If I was giving out medals for code playgrounds capable of building complex components, I’d give out two silvers to Codepen and Plunker, and a bronze to jsfiddle. I believe gold is still up for grabs.
For the longest time, I preferred to do my tinkering in jsfiddle since it felt more flexible until last month when I started experimenting with Angular2 and playing with their example plunks.
Plunker strength is its ability to create multiple files and begin simulate the complex file structure which one would encounter in a large app. It beats Codepen on this front, and I believe its currently easier to develop Angular2-based components because one can create classes and import them properly.
I started an Observerables plunk to experiment with this concept new to angular 2. Unlike promises, Oberservrables can emit multiple values over time and manage unidirectional data flow as described in this nice post, Angular 2 Observable Data Services.
In my plunk, I wasn’t interested in listening to streams of data over time but I wanted to use an oberverable as a message bus which I could include in any class and have that class communicate with any other class through a pub/sub pattern. I also wanted to use named custom events which are more familiar to me than listening to data that simply changes and it allows me to apply filters on those names. As I grow my accustomed to this pattern, I’ll probably drop the named event training wheels.
While experimenting with my crude, blocky art, I got inspired to build a tool that could create blocky illustrations, the type found in indie games like Fez, Sword & Sworcery or Queen under the Mountain.
When I landed on Codepn, instead of diving right into the code, I like how they curate a selection of pens. I went a through a number of them and noticed several seem to brag about being “pure css” and when I looked at their CSS, I thought they were either using some tool that I didn’t know about it or they were painstakingly tweaking the css by hand. I couldn’t believe their attention to detail if they in fact hand coded each line by tweaking numbers as demonstrated in this post on creating art by building SCSS matrix. By hand. Madness. Of course, this is something I do all the time. Beautiful madness.
Back to my original plunk, I wanted put simple div-based art assets: tree, mountain, river, and buffalo in my scene. I didn’t want to tweak numbers. I want to design these assets by “painting” with blocks; similar to how minecraft paints with cubes but drag around 2d triangles and rectangles dropping them in place.
How hard could it be to create this tool? I sketched out a three column grid design involving a toolbar 5%, sketch pad 70%, and code catcher 25%, and began building it one pen. I came up with Buffalo Builder, a simple tool to produce minimal illustrations that can be used in apps and games. This felt like a cool and dangerous side project as it ultimately could distract from other side projects which also begged for my attention.
I spent about 2-3hrs on it every day for a week, and by fourth day it was starting to get both unwieldy and also pretty good. I was able to create crude animals, and I liked my proof concept but the code base was getting too large for a prototype.
At this point, my account was still free, but after some googling about managing external resources in code pen, I had my go-for-pro moment when I discovered that pro accounts could create multiple pens and use them as a resources within one pen. I opted for the yearly subscription price $75 and plan to show my co-workers its value, and thus make something I could easily expense. After paying, I immediately flipped the pen from public to private. Like most artists, I do get a bit uncomfortable about having eyes on my work before its ready for public consumption.
Once my monolithic pen reached a few hundred lines of code, I dismantled it and broke it up into six separate pens, one of each main component of the app including things like a tools, sketch, and image reference sections. I could open each component pen in a tab to work on them individually.
I imported the CSS and JS into the master pen to assemble the app.
Then, I used the external pens as html templates.
Buffalo Builder, as an app pen, is a buggy disaster, but I’ll share it anyway so that you can see the structure, and mind the mess. Its neat how pro members can share a public pen comprised of many private pens. I believe you are probably more interested in the basic pattern so that you can start designing and developing your own tools.
Instead of a single file, I forked this pen four times to create a pen app leveraging two external asset pens: a tools component pen and sketch component pen to build the final app pen. My fourth template is a tool component pen which is supposed to be contained in the Tools component. When I add Tool to Tools, the brush will appear, however, if I then try to run to the app, it fails throwing an error: “EXCEPTION: Unexpected directive value ‘undefined’ on the View”.
I had no problem creating deeply nested components in Plunker and this is obviously when the Angular team picked it to showcase their excellent intro to Angular2 Tour of Heroes plunk. The file tree structure is clean, familiar, and easy to browse.
Until I can figure out how to create deeply nested components, I can’t really recommend Codepen over Plunker for experimenting with Angular2 unless you’re only interested in developing one level deep, then it feels just right.
When I experiment, I personally don’t like creating To-Do list type demos but would rather work with elements from nature or pop culture. I had recently watched Revevant and really enjoy frontier stories involving spirit animals like giant grizzly bears or the white buffalo.
While this inspiration is pretty wild, all the coding concepts do directly relate back to my day job designing and developing enterprise UI where privacy is paramount. With private pens, you can safely include sanitized client data to test your components and not worry about exposing any new IP or sensitive information.
Whether you’re building an enterprise app, complex data visualization, or MMORPG, they are all comprised of lots of individual components that work together to form the whole experience. So whether you want to build a simple fail whale or T-rex…
…or the next Stardew Valley…
consider building shallow components in Codepen or deep components in Plunker for your next project.
Codepen, when you follow through on this file system promise, the gold is yours.