JSfiddle, Codepen, JSBin & Observable

I was looking at an article on The 38 best tools for data visualization and  I saw 06. Dygraphs and I thought I would take a look at it. On following the link to it, it also had just play with dygraphs on jsFiddle.

So I linked through to JSFiddle and decided to look at that a bit more deeply. I had come across the programme a couple of times before, as well as CodePen as peoples demos. Some I could easily run, others didn’t do that much, but I never explored the programmes themselves. I also tried to grab the 3 panels of HTML, CSS & JavaScript and put them all together in one file and then try to run that, with varying amounts of success, and I can understand why now as you can configure the different panels, especially the JavaScript one to call say jQuery.

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.

CodePen

There is also CodePen where you see some demos of code with an output. Similar to JSFiddle with some pro/pay add-ins.

Below I have embedded the Pen Canvas Orbital Trails by Jack Rugile (@jackrugile) on CodePen.

CodePen has a front page with some pens displayed. There you can use the search (top right- see 3 screenshots down) or you can go to your dashboard ( next screenshot after this)

This dashboard is a nice feature with some good sorting tools (I had read comments about people having difficulties finding older code examples) with these types of tools

The search function helps you find pens of the type that interest you, eg the Charts query below

Then you can select one and fork or save the code to experiment with.

Once you are logged in you can download pen’s to your PC which are in zipped format with a JS and CSS sub directories so all well ordered.

I then looked up jsfiddle v Codepen and got this article: JSbin, JSfiddle or Codepen, which one to use and why? which also brought up jsBin into the comparison.

JSBin

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.

With JS Bin

Some youtube resources here.

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.

Other references

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.

Gists

End thoughts

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.