Develop Reference

How can I recreate a codepen locally on my computer?

So I found a nice website on CodePen and I want to copy/paste it local so I can play with it a bit. I have created all 3 files ( html, css, javascript ) in the same folder and I linked them in the html file.
In the local folder I have : index.html + stylesheet.css + Javass.js.
I have linked them in respectively like this:
<link rel="stylesheet" href="stylesheet.css">
<script src="Javass.js"></script>
I think the css file is showing but not the js one. Can you help me?
Edit: https://codepen.io/TurkAysenur/pen/gORaboY (this is the codepen)

It is hard to tell like this.
Though here are the common things:
Copy code pen's html into the body html element (don't replace the whole code)
Make sure JS runs after page loaded ( window.onload=()=>{...} ) or any other solution for that.
Edit: according to Yogi there is an export button. This could be the simplest solution for you

how to override LMS static JS views for custom theme

I'm attempting to modify the following file, defaulted by the OpenEDX lms.
account_settings_factory_spec.js
account_settings_view.js
But upon rerunning paver, files aren't changing. Is it actually possible to override the JS in themes? My end goal is to remove the tabs in the account section as well as edit the additional infomation.
Any help towards reaching a solution would be appreciated!
Thanks.

Is it actually possible to override the JS in themes?
yes, tricky
copy & paste from original and edit/modified "account_settings_view.js" and "account_settings_factory.js" to your theme folder
/edx/app/edxapp/themes/my_theme/lms/static/js/student_account/views/account_settings_view.js
/edx/app/edxapp/themes/my_theme/lms/static/js/student_account/views/account_settings_factory.js
and copy(from original) & paste "account_settings.html" to your theme folder
/edx/app/edxapp/themes/my_theme/lms/templates/student_account/account_settings.html
and find this line and edit, this path should be your theme JS path. Check how your custom CSS or JS linked in the header(see image below, "payne" is my theme name).
<%static:require_module module_name="YOUR_THEME/js/student_account/views/account_settings_factory" class_name="AccountSettingsFactory">
I just changed here you can see below. Just added "xxxx" Here I used Docker devstack.

gh-pages won't load CSS or JS

Alright, so I have Jekyll running my site locally and it runs perfectly fine. When I pushed everything to Github and made it a gh-page all styling and js functions disappeared. When I go onto the site I see that the css files that it is pointing to are empty, though they clearly have styling in github... So i've tried several of the solutions that I could see on here, but to no avail. This is the gh-page currently: https://jacobprice.github.io/Webpage/
The code is here: https://github.com/JacobPrice/Webpage
I've been changing stuff around based off solutions here, so hopefully I haven't broken something else... Any help is greatly appreciated.
Note** if the site is down it will show an old ruby on rails project with a countdown. That is not the gh-page site.

View page source your website.
I see your url failed
Edit Your Url load css and js file:
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/functions.js" type="text/javascript"></script>
You should use relative path for url

Okay, so this is kind of a work around... Not sure why it wasn't directing to the proper folder, but the fix for me was to copy my main.css (the full css that sass compiles) and then create another main.css file where it kept pointing too. Kind of a hack and not proper, but it works...

In _config.yml, set baseurl: /Webpage and call your resources like this :
<script src="{{ site.baseurl }}/assets/js/jquery-2.1.1.min.js"></script>
It will now work both locally and on gh pages.

sigma.js How to plug a plugin on my own page

I'm totally new at coding and i have some trouble using the dragNodes plugin. I can make the plugin work by itself with the generated random graph example, but I am struggling to make it work with my own graph.
I don't understand what to put in the html. I tried to put only that:
`<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>sigma.plugins.dragNodes(s, s.renderers[0]);`
and it doesn't make my nodes move. I think I have to change the content of "s" and "s.renderers[0]" but I cannot find where., and I don't know how to do it...
Basically, I would love if anyone could give me some explanations about how to plug a plugin in my page?
If you could help me, I'm lost and that would be awesome! Thank you a lot!

I think you are mixing up two things:
How to use script into html
How to include external js files in a web page.
In order to insert javascript directly into an html page you have to use the script tag as follow (called inline js):
<body>
<script>
// some inline js
var a = 1;
</script>
</body>
In order to include js from an external file you have to reference the file with the src attribute just like you did.
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
The only thing that you missed is that sigma.plugins.dragNodes(s, s.renderers[0]); is also some js code, you thus have to put it into script tags to that it can be interpreted as such by the browser.
Here is what you probably are trying to write:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
<script>
sigma.plugins.dragNodes(s, s.renderers[0]);
</script>
Having all this into <body>tags.
I should also mention that to render your graph using sigma you should have an instance of sigma in your page, and in your case it should be called s.
To learn more about js/web programming I would advise this: http://www.codecademy.com/
As far as documentation for sigma is concerned check out their tutorial: http://sigmajs.org/

In addition to Nicolas Joseph's answer (put javascript in script tag), you should also download the js library that is required and save the html file in the appropriate path.
For example if your file.html is in a directory dir (dir/file/.html)
Then the command:
<script src="sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js">
</script>
will search for a file named sigma.plugins.dragNodes.js in the following path:
dir/sigma.js/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
To check out which librarires you are missing you should open debug mode in your browser (right click->inspect element) and check the console tab.
Cheers

Embed Partial Gist File

I have a gist setup here. I use the following code to embed a single file from my gist to a webpage.
<script src="https://gist.github.com/4672365.js?file=1.java" type="text/javascript"></script>
But what I want is to embed a single line from file 1.java. You can say that I want to embed only line #2 from file 1.java into my webpage. Thanks in advance for help :)

After I got no helpful answers to this question, I tried myself to do some javascript coding. I have uploaded that code on github. The file on this link does the magic. To embed a single line into your webpage you need to add reference to my javascript file in HEAD tag. Here is a simple code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://github.com/kashif-umair/gist-embed/raw/feature/show_single_line/gist-embed.js" ></script>
</head>
<body>
<code id="gist-<YOUR_GIST_ID>" data-file="<YOUR_FILE_NAME_IN_GIST>" data-line="<LINE_NUMBER>"></code>
</body>
</html>
You need to replace YOUR_GIST_ID with the ID of your gist, YOUR_FILE_NAME_IN_GIST with the file name from which you want to embed the line and LINE_NUMBER with the line number in file which you want to embed.
NOTE:
If you want to embed a single line then both the file name and line number should be present in code tag.
If you want to embed multiple selective lines from a file then you should put values something like MS Word page ranges for printing. e.g. data-line="1-4,10,12-15". Please make sure that you used the correct syntax to put these values to avoid getting odd results.
If you want to embed whole file then remove the data-line attribute from code tag.
Hopefully I've helped for the people who have or will face this problem.
As I am continuously making changes to my javascript file so I think updating this answer every time is not a good idea at all. So from now I'll update the README.md file in the GitHub repository. Anyone having problems can visit the github to read README.md file. For reference I'm adding the link to my repository here.
https://github.com/kashif-umair/gist-embed
P.S: Please take a look at my javascript file in the github repository and suggest any good practices for coding.

The Right and fastest way to do is just append the .js address with ?file=file.name : )
<script src="https://gist.github.com/kashif-umair/4672365.js?file=MyApplication.java"></script>

Create a gist containing only the line you need.