Why we decided to incorporate CodePen into our workflow

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.

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.

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

Warning: Undefined variable $postID in /www/fiascodesign_482/public/wp-content/themes/fd/parts/old-post-content.php on line 58
Apps & Art: How Digital Design Helps Immersive Gallery Experience

7 Mins

Apps & Art: How Digital Design Helps Immersive Gallery ExperienceFor years, exhibitions in galleries and museums around the world were standalone offerings. They took place between certain dates, at certain times, in one place, and once you’d paid your money and visited, the experience was over. They were one time events showcasing work and exhibits to only those who came through the door. However, […]

The American Election: Designing a Presidential Campaign

5 Mins

The American Election: Designing a Presidential CampaignAmerican elections inevitably attract attention from across the world, and this year’s intoxicating and occasionally offensive juggernaut has finally reached its dramatic conclusion. It feels as if the collective political anxiety of the world is concentrated on a few hours and one, potentially world changing announcement. But, we all know that a successful election campaign, […]

Learning to be a 'Yes' Man

3 Mins

Learning to be a ‘Yes’ ManI was drinking my morning cup of coffee and realised that rather than feeling excited about what the day might bring, I was feeling anxious. As I get older I’m learning more and more about myself. One thing that I’ve learnt, in what would seem like quite a sad epiphany, is that I’m not the […]

The Rebranding of the British Countryside

5 Mins

The Rebranding of the British CountrysideThe way we view the British countryside has changed. The identity of our green and pleasant lands have shifted, and over the past few years the digital and print design communities have transformed the outdoor lifestyle sector, bringing it into the 21st century and revolutionising our experience of this growing market. Here are a few […]

Why Words Matter for Brands

4 Mins

Why Words Matter for BrandsOn the 7th of September we were luckily enough to attend West of England Design Forum’s most recent event – and it left us at Fiasco Design feeling very inspired and even more in love with words than we were before. This is without a doubt the most intimidating post that we’re going to do. Non-copywriters […]

4 Mins

How the Stranger Things identity lured the Netflix generationIf you’ve been on another planet, you probably won’t have heard of Stranger Things, the Duffer Brother’s enigmatic, spooky, 1980s adventurethon that has taken Netfix by storm. For everyone else, you’re probably aware that it is uncompromisingly and unapologetically a Netflix original, and has all the attributes that lure in a certain generation with looming […]

3 Mins

Teamwork Creates the DreamworkOver the past couple of years the team here at Fiasco Design has been steadily growing – and more importantly evolving. We started as a partnership back in 2010 and since then we have organically grown into a creative, and passionate, team of like-minded individuals that I’m personally very proud of. As a creative agency […]

3 Mins

What is it like to work within Client services?“An idea can only become reality once it is broken down into organised, actionable elements.” – Scott Belsky. In my naivety, I thought that to work within the creative industry I’d have to be a ‘creative’ myself. I wasn’t graced with the creative talents that my colleagues exude on a daily basis. This posed itself […]

3 Mins

Brand identity projects: why communication is keyAs illustrators, designers, coders and artists, we perpetually live in a visual world at Fiasco Design HQ. New ideas are part of our day to day life, and we often get asked to provide advice and designs that help small and medium businesses establish their visual identity or help with the process of rebranding. With […]

fiasco design why we need to change creativity in education

3 Mins

Do we need to radically change our perception of creativity in education?Choosing a Career I was first asked ‘What do you want to do when you grow up?’ when I was in primary school. It seems somewhat incomprehensible that we’re asked to form a decision on want we want to do with our lives at such a young age. This question is almost always met with […]

fiasco design studio

5 Mins

Advice and insight on setting up an agency after six years in businessThis May marks our sixth year in business. In 2010, myself and fellow co-founder Jason Smith embarked on a journey to start our own design agency with no client base and a total of zero combined years’ experience either working in or running an agency. With no experience of running a business and no business […]

3 Mins

Improving UX through the use of animationI have always had a love of the moving image, whether that be in blockbuster films, indy shorts, animation or stop motion and gifs. This continues to be an inspiration to me and since getting more into coding, I have found a place for my interest to expand, which has since grown into an opportunity […]

3 Mins

Small fish in a big ocean: My advice to illustration graduatesI’m not going to lie, it’s going to be a rocky ride initially. At college you are a big fish in a small pond, after graduation you become a rather small fish in a rather large ocean. So stay classy ladies and gents. A lot of it is about longevity and trial and error. It’s not […]

3 Mins

Hello pen and paper my old friend, good to see you againOne of my favourite things to do when I was younger was draw. I’d lose myself for hours freely sketching whatever ideas came into my head. I didn’t care when or where. Whether it was at the kitchen table, on the living room floor or in the middle of a family gathering, I was as […]

4 Mins

Perfectionism and 12 steps to recovery“God saw what he had made and it was good… …next time, it will be perfect!” Imagine this… your massive project is coming to an end. It’s cost you blood, sweat and tears. This is the moment you’ve been waiting for: the pay off. “Yes!” it finally launches! But instead of pride, satisfaction and closure…it’s […]

3 Mins

The great escape: Why getting out into the great outdoors is good for the mind, body and soulI am very fortunate to have grown up in the countryside of the South West. It is something that has helped to mould me as a person, giving me an appreciation for the outdoors and the wildlife that resides within. The importance of taking time out and escaping at the weekends is very important, with […]