JavaScript. Ah, JavaScript. One irrefutable fact about JavaScript is that no one is ambivalent about it. You either love it. Or you hate it. Full stop. Love it or hate it though, if you’re doing Web development, you’re stuck with it. You simply can’t write a modern online application by hand (that is, if you aren’t using tools that abstract away the need for JavaScript such as ASNA Mobile RPG) without JavaScript.
The good news is that the JavaScript development environment and ecosystem has matured substantially in the last several years. There was a time when pretty much the only JavaScript debugging aids available were the venerable Alert() dialog and the debugger; statement. That’s no longer the case and superb JavaScript debugging tools are built into every modern browser today.
JavaScript playgrounds
Another thing that’s making JavaScript easier to learn is the advent of online JavaScript "playgrounds." These online JavaScript/HTML/CSS testing sites have actually been around for several years but in the last couple of years have really matured. The best of these JavaScript playgrounds are codepen.io, jsfiddle.net, jsbin.com. All three of these sites let you enter HTML, CSS, and JavaScript snippets to test and share. I’ve long been a fan of JSFiddle but recent updates to CodePen have won me over. In CodePen, a snippet is called a Pen.
Some of CodePen’s features include:
- Interactive input panels for HTML, CSS, and JavaScript.
- The ability to add external CSS and JavaScript resources via a CDN link.
- A preview panel that shows your HTML (if your Pen has HTML).
- A built-in JavaScript console panel. This feature essentially mimics the console feature of a browser’s development/debugging console panel. Having this panel built into CodePen is very handy.
- Each pen has its own unique URL to share your code with others. You can also embed a Pen in a blog post or Web page.
- You can designate a Pen as a template–making it much quicker to spin up a similar Pen.
- I’m not sure I’d use it much but CodePen also offers a blog feature. I suppose it might be handy to provide a contextual explanation of a Pen and how it works.
- CodePen makes it very easy to explore other public Pens. There are tons of great examples and you can even browse examples by pattern.
Show me the money
CodePen is free, but there are also three "Pro" plans that heap on additional features. The basic Pro plan is $75 a year and it adds several additional features, but "Professor" and "Collaborative" modes alone make the Pro plan reasonable for any serious client-side coder.
Figure 1a below shows a CodePen.io Pen (click here to see that Pen in action). This Pen didn’t need any CSS, so that panel (collapsed between the HTML and JS panels) is closed. The white bar near the bottom of the figure shows the rendered Pen and the console is shown under that.
Figure 1a. CodePen in action
You can easily configure a Pen with the panel shown below in Figure 1b. Perhaps most importantly this settings panel is where you add references to external resources as hosted on CDNs.
Figure 1b. The settings panel in CodePen
One of the things that slowed me down a little with CodePen was that by default a "Run" button isn’t shown for Pens. By default, Pens run automatically upon each change. You can change that default behavior by deselecting the "Auto Update Preview" button on the Settings panel’s "Behavior" tab. When you do that you will see a "Run" button as is present in Figure 1a. I vastly prefer this manual behavior.
Figure 1c. Disabling Auto Update Preview (which adds a "Run" button for the Pen)
If you’re building online HTML 5-based apps today, these online playgrounds are highly recommended. Give them a close look, they are really great at providing a low-friction way to learn more about JavaScript, HTML, and CSS.
