cm

December 6, 2023

The Joys of JSFiddle

I've been using JSFiddle on and off since about 2014. The reason I continue to use it is because it offers me a quick and easy front end playground (JavaScript, HTML, CSS, and various front end frameworks) that automatically runs, saves my changes and is easily shared. Of course, I can always have a local HTML file with a <script> element or a local JavaScript file and run it in my browser, etc. But if I want to share it as a working example on the web then I'd have to host it somewhere. It would be pretty straight-forward to push the local code to Github and make a Github Pages repository which would make the site available via the web. However, there are more steps involved in that process and the Pages website is tied to your Github username. If you want to play around with multiple different scripts you'd have to be ok with structuring your scripts within the same static website. That's additional work and may not make sense if you just want to play or prove a small proof of concept.

The JSFiddle user interface is also very simple and convenient. Everything you need is right there whether you're at your desk or on the go. Sometimes I use the VSCode IDE in the browser on a tablet device and the experience is very nice. But if you all you want to do is create a small-scale UI and actually run it/interact with it, then JSFiddle again stands out to me. So I keep coming back to JSFiddle to mess around with whatever JavaScript, HTML or CSS thing is on my mind.

For example, recently I recalled the Gödel numbering scheme which I read about in the book Gödel, Escher, Bach when I was in middle school. To my surprise I had never written a program to convert strings to this numbering system and back again. It's a straight-forward scheme and while it has applications in logic and mathematics it can also be used to encode arbitrary strings as numbers: each character in a string is a consecutive prime number (starting with 2) raised to the power of the character's value. For English letters a simple mapping of A = 1, B = 2, etc will work. So the string "abc" would be represented by 2^1 * 3^2 * 5^3 = 2250. The interesting property of this scheme is that because primes are unique there is only one unique prime factorization, thus ensuring you can "decode" the number 2250 back into 2^1 * 3^2 * 5^3 and thus the original string "abc".

So I hopped on JSFiddle, made a quick script and very simple UI and almost immediately recalled why I hadn't done this previously: the resulting numbers very quickly exceed JavaScript's MAX_SAFE_INTEGER! Luckily, EcmaScript standards (the underlying standard of JavaScript) have been updated over the years and I realized I could use the built-in native type BigInt now rather than rely on Number. It works and you can try it here: https://jsfiddle.net/j3pydev/zny1pL0d/. For now I cap the string length to 10 meaning the biggest number you can encode is from the string "zzzzzzzzzz" (ten z's) which I won't paste here, but you can view in my fiddle. It is a number that's 256 digits long!

Naturally, JSFiddle is fun to use for more traditional design and UI things too. For example, I recently made a proof-of-concept for a typewriter UI effect which uses a little Javascript and CSS. In one version the text is present and simply revealed in a way that looks like it's being typed: https://jsfiddle.net/j3pydev/xs3yaz08/. In the other version the text is added one character at a time: https://jsfiddle.net/j3pydev/h28yatw9/ . Even more recently, I figured out a better way to choose the random values for the typing pauses so they skew shorter (using a power distribution) like a real person typing so I updated the fiddles.

Some of my older fiddles also had to do with prime numbers and thanks to my Gödel Numbering fiddle I was able to go back and update them.  My Fermat's Little Theorem primality checker fiddle (which remains a bit of a work-in-progress: https://jsfiddle.net/j3pydev/3aqgdwxh/) now has a nicer UI and more clearly illustrates the truly enormous numbers that result in the computations (in this case I choose a couple dozen or so random integers that are less than the target number in order to make a statistically probable guess). Thanks to JSFiddle, I quickly found out that the Fermat's Little Theorem method of primality checking will outstrip JavaScript's BigInt capabilities, for prime numbers of just six digits in length and greater (because the calculation involves taking a number to the power of the prime number in question). To me, running up against these kinds of limits via hands-on usage is super fun, sometimes more so than reading about the theoretical limits!

In the case of my left-truncated prime tester fiddle (which is rather old at this point: https://jsfiddle.net/j3pydev/enopyf4n/) I plan to refactor it to use BigInt at some point in the future. A left-truncated prime is a prime number in which each time you remove the left-most digit the remaining number is still prime, thus necessitating many iterations of primality checking. For this fiddle I actually implemented a web worker within JSFiddle so that the usually lengthy computation can be done without freezing the UI. So while JSFiddle may be somewhat limited compared to what you can do locally on your own machine with an IDE, thanks to modern web APIs and deft design it remains quite flexible.

My older fiddles show a diverse range of front end goodies too, not just prime number related things: WebVR using Aframe and D3https://jsfiddle.net/j3pydev/k06eL1tg/ , D3 charts: https://jsfiddle.net/j3pydev/ssohmpyt/ , and some fun with Hangul (Korean language):  https://jsfiddle.net/j3pydev/nj1qzexe/.  JSFiddle is a decent place to try out front end frameworks such as React (here's a very old fiddle of mine with a simple React component: https://jsfiddle.net/j3pydev/bbh3paaj/), many of which they support as options in the JSFiddle UI, and of course, it's also a nice place to save and share answers to front end questions on StackOverflow. I have a couple of those still actively linked to (here's one: https://jsfiddle.net/j3pydev/cojfttoy/).

I hope this post inspires you to have some fun on JSFiddle!

About cm