Plunk, Pen or Fiddle?

I’ve experienced some frustration recently with all of the big three code sandboxes: JSFiddle, Plunker, and CodePen. I’d originally picked Plunker because it provides the ability to create separate datasource files that can be used in my Plunks. This is extremely useful, especially when demonstrating how to load an external data source.

About a week ago while viewing my own post in Appliness digital magazine (shameless plug) I noticed that I couldn’t access the source code in the embedded iFrame. I wasn’t sure if this was an oddity with Appliness so I made a mental note to check it out.

The very next day I received a comment from a visitor stating that they were having the same problem when viewing the site on their phone. Obviously, I had a problem. I want my code to be viewable on as many devices as possible so I started looking into alternatives.

CodePen

ferrari

For looks, you can’t beat CodePen. It’s definitely the Ferrari of the bunch. Its sleek black skin and optional upgrades made me want to take it for a spin. The CodePen window is made up of four frames, HTML, CSS, JS, and the Output. Each code frame has its own set of additional features/libraries accessible via a small gear icon in the upper right corner.

CodePen’s additional features are very slick and useful. The HTML frame allows you to utilize three useful templating tools, Haml, Markdown and Slim, at the click of a button. CSS provides easy access to Less and Sass as well as some other oft-used CSS functionality, like reset. And JS frame applies clickable access to Coffeescript and Modernize, as well as allowing you to add any external library of your choosing. It also provides a useful link to cdnjs.com where you can find a CDN reference to just about any library yo can think of.

CodePen

CodePen felt great, looked great, and provided optional upgrades. Unfortunately, once you take it out of the garage and park it in your driveway, i.e., embed it on your site, it doesn’t necessarily run great.

fiero

As a matter of fact, my Angular code which works when viewed on CodePen, did not work at all on my site. The Ferrari of sandboxes actually seems more like a Fiero with a Ferrari kit.

JSFiddle

minivan

JSFiddle seems to be the most widely-used sandbox. It’s the most utilitarian of the three…the minivan, if you will. Its looks are very basic, and while it claims the ability to apply different skins when embedded, the only skins available are “light” (light gray and white) and “presentation” (light gray and white with a gigantic font). You would think if there was a “light” there would also be a “dark”, right? Nope. This minivan only comes in gray.

Like CodePen, JSFiddle displays HTML, JS, CSS, and output frames. It provides access to a slew of libraries via a too-huge dropdown list. It also provides a second dropdown with esoteric options like “no wrap – in head”, which actually turns out to be quite important. The rest of the options are hidden in a vertical accordion.

jsfiddle

The most important difference between CodePen and JSFiddle, however, is only apparent when it’s embedded. JSFiddle works and CodePen doesn’t.

Plunker

buick

Plunkr is a little different than the others. It’s no Ferrari, but it’s no minivan either. I guess it’s a Buick. It’s looks are more modern than JSFiddles, but its options are almost non-existent. The window only has two frames: code and output. You create your own files rather than using dedicated HTML, JS, and CSS frames. While this means that you can’t look at all of your code at once, it actually lends to its flexibility.

With Plunkr you can create multiple files in the same project. This means you can test more abstractly, and easily swap functionality in and out. Your HTML head is in your code window making it easy to see what’s getting loaded. Being able to create your own files also means being able to create external datasources, which is fantastic for playing with dataloading functionality.

plunker

The biggest problem with Plunker is the one I mentioned earlier. When it’s embedded, you can’t view the source files on mobile devices.

So, what do you drive, a Fiero/Ferrari, a minivan, or a Buick? Or something entirely different?

RabidGadfly Seeking Full Time Work in Massachusetts

I was notified on Friday that the entire web development team at my company, Pongo Resume, will be laid off at the end of this month. I’ve been a full-time web developer for 8 years. The majority of my time at Pongo was spent building their next-generation Resume Builder in Flex 4.5 as well as maintaining their legacy Resume Builder in Flash (AS2). I also spent a significant amount of time in ColdFusion 9 rewriting their billing process.

Before working at Pongo, I worked for 13 years at Hasbro where a significant amount of my time was spent building out their media portals using ColdFusion and Flash. The portals allowed viewing of videos, playing games, and reading online comic books. I also spent a good deal of time working with my friend and fellow blogger Dan Gaspar creating a ColdFusion/Model Glue API which provided access to our data to facilitate both internal and external development.

While my main focus has been within the Adobe stack; Flash, Flex, and ColdFusion, I also have experience in PHP, JQuery, JavaScript, and several other web technologies. I have worked with frameworks and I’m familiar with MVC concepts.

If you know of anyone in the Massachusetts or Rhode Island area that is looking for a developer please contact me or feel free to pass along my information. In addition to myself, there will be three other hard-working developers looking for work.

Thanks much!
Glenn Gervais

contact me