In the last few months my development technique and processes have changed. In fact, it’s constantly changing. I am always chopping and changing certain developer tools and apps trying to create the most functional, efficient workflow I can.
Enter CodePen, the self-proclaimed playground for the front end web. The small team at CodePen have created a tool accessible to anyone. All you need is a little coding knowledge and a desire to share, inspire and educate others. That’s what it’s all about.
From it’s humble beginnings a few years ago, CodePen has seen a massive growth in users. Now boasting a total of 615,368 signed up* to the platform. These users have together created 7,734,292 unique pens*. That’s a lot of code!
Enough of the stats, where does it fit into the workflow?
CodePen is a great tool for getting code ideas down quickly. This is where it has come in really handy in our workflow here at Fiasco. Sitting somewhere between the design and build stage of websites, it helps us to test things out in a comfortable environment before taking on the full build of a site. It has become a great tool to make snippets of sites, cool code tests and to scope projects at Fiasco, while also acting as a platform for me to improve my skills.
See the Pen Animated Instagram logo by Nick lewis (@nickylew) on CodePen.
Why we love it as a prototyping tool
CodePen has been built with the front end developer in mind. It’s intuitive, fast and perfect for the job in hand. The platform has everything a front end dev would need to create anything from a quick button mockup to a cheeky WebGL based animation (WebGL – it’s wizardry!).
Super quick selections to drop in javascript libraries and css frameworks make it lightning quick to set up a new project and get straight into your code. Sometimes you just need to get that idea out your head and into code form so you can save it for later. Just as a pen and paper is the choice for jotting down quick static ideas, CodePen is the equivalent tool for the digital space.
See the Pen Jumping ball loading by Nick lewis (@nickylew) on CodePen.
Want some other options? Alright then.
There are a bunch of quick prototyping tools out there for front end devs. So here’s a little list of some others.
JS Fiddle
A tool focussed around you guessed it, Javascript. One of the largest online tools for testing Javascript ideas. A great feature is JSHint, which means you can test and verify the code you’ve written right then and there.
JS Bin
Super simple tester for the building block of the web. HTML, CSS and Javascript are all here, but with only two windows showing one code element and the output it can be a bit annoying changing between the code types using the tabs above the editor.
Compilr
Another online only code editor and sandbox tool. Compilr however goes further in the spectrum of code types, not only including the three pillars HTML, CSS and JS but PHP, C# and C++ too.
Cloud9
Last on my list is Cloud9. It’s more than just another editor on the web. Cloud9 goes beyond to become a fully specked tool to potentially take your development of sites from the desktop to living fully online and stored in the cloud. All the platforms you might need right there in the browser, and a multi browser render so you can test across browsers without ever leaving the one you’re editing in.
• • •
These are just a few options. There a many other online editors and front end tools out there, but these are perhaps the better options, with CodePen definitely sitting at the top of my list of favourites. It has firmly become part of our working process at Fiasco and I’m sure it will continue to be so in the future.
How do you work and what tools do you use to improve your workflow? Get in touch with us on Twitter and let us know.
*stats taken on 15/06/16
