This time I decided to ask YouTube about them and they are a bit more complex and versatile than I thought. This video for JSFiddle I thought was useful:
The JSFiddle Panel
Inside the page you can add libraries such as JQuery and others, also instead of CSS you can have SCSS. Also on the right you can see dependencies have been brought in, the 3 resources, a couple of js files and a css file. So you can add other features to make the programme run.
This is the embedded fiddle. I think it is quite a handy thing. A great way to demonstrate code to others:
It will save a copy to the cloud. I have done a little look on the interwongle and cannot see how to save to your own pc so far.
There is also CodePenwhere you see some demos of code with an output. Similar to JSFiddle with some pro/pay add-ins.
There were a few features that appeal to me about JSBin. One was it put the links to external libraries into the code and 2 that it saved your code as gists on github. Unfortunately, uploading your gists from github by changing part of a gist url as per the video below didn’t work for me at all, which is a shame as there was a lot I like about JS Bin.
You have the 3 panels of HTRML/CSS & JS and an output panel and you also have the browser console panel (this allows you to re-set theme and add line numbers to code and other editing features.
You can login using your github account ID and you can save to GIST and also save to file on your PC via the download process. The save Snapshot saves to your JS Bin account and you can see your previous codes in the “My Bins”.
You can also use JS libraries, apparently it is quite extensive. There are also a few styles of CSS too.
You can easily embed your JSBin in a web page.
The editor settings are handy and next to the File Tab , 2 screenshots up, you will see a little icon, if you click on that it will show you the blue header with other resources.
I like that if you download the JSBin it puts all the code in one file. Its how I work at the moment, I find it easier to adjust things as I’m doing one off’s not a lot of structured, shared coding.
I have not been able to find any other peoples code for JS Bin, to try and explore. I will need to do a little more searching for that. That is what is nice about CodePen. It shows you other pens on the interface which you can play with. There is a pro-version if you want to keep your data private.
JSTinker.An open source clone of JSFiddle, this project was made to provide insight into how something like this is created. My goal was to mimic as many of JSFiddle’s features as possible in an offline environment. No accounts or internet connection totally necessary (besides online resources).
You can also download JS Bin and run it on your own machine as well, there is a Youtube video for that.
What is the difference between GitHub and gist? GitHub is the entire site. Gists are a particular service offered on that site, namely code snippets akin to pastebin. However, everything is driven by git revision control, so gists also have complete revision histories.
Gists are held in the Github repository so you access them via logging into Githb.
So, after getting my head around JSfiddle, Codepen & JSBin I started to look up Gists and came across Observable that seems to focus on a lot of visiualisation tools, which is where I started at the top of the article with JS Fiddle and the dygraph code that I was interested in.
I will have to work through his introductionpages. Not in this post though.
I think his stuff is fantastic. Way over my head but I have played around with some of his stuff. The Dendograms and Force Directed Graphs I thought were interesting and I could do a little coding for the Dendograms.
One thing about the Observable site is that it has a “notebook” type format that allows you to put text in between the code, similar to Jupyter Notebooks for python, so you can explain what you are doing in the code, and you can show the output too. This is definitely something I will be exploring.
All 3 do a good job of displaying code for you to test. They all have the 3 panes and the output pane and there seems to be a leaning towards CodePen on the posts I was looking at.
Generally I have been putting code in Notepad++ and running from there, but I think I will have to start using these css – js playground tools to use.
As they all offer free accounts and 2 of them have paid extras. I will currently lean towards CodePen as I can see some resources to experiment with right away.
The Fiddles & Bins I will carry on hunting to see if I can find some resources or other peoples code to experiment with.
I like the idea of the library add-ons that I wasn’t aware of before, and downloading the files to use on my PC. So this is handy resource to test and develop on your own with notepad++. So the 2 programmes I will follow are CodePen & JS Bin as I can download files directly to my PC. Its also nice having a copy on the cloud to play with too. This allows you to tweek the code when you are out and about. Something I do when I’m having problems with getting code to work. I keep at it until either I give up in defeat or get it to work.
I will also have to delve more deeply in to the Observable website too. But that will be for another day. It has a slightly different structure to the other ones.
I can just about manage some Html/Css/JS although am challenged by the JS even after I did a lot of the Codecamp JS tutorials. I think its one of those things you have to practice at a lot to get confident with it. That is the issue with my eclectic exploration. I hop around too much between different methods, processes, programmes and codes.