If you are a front-end developer, I’m 100% sure that you heard about CodePen. CodePen is a developer sandbox or playground where you can write HTML, JS, CSS, run and test your code. It is like an ultimate development environment which is available in your browser. It has almost every essential feature like in your local development environment.
I’m using Codepen for nearly three years now. I use it daily not just for development but to find inspiration or some solution for a generic problem.
This article is about my experience, but I will talk about the app in a broader circle. I’m trying not to be biased I swear! 🙂
Why Choose Codepen and Not the Other Alternatives
As I know, Codepen isn’t the oldest app in this field. There a lot of similar application with similar right solutions and UIs like the JSFiddle, JS Bin or Dabblet these are all useful tools, and I recommend them too! You have to find the best for you!
Some of the main differences are the Codepen’s pro version and the Dribbble like pen browsing interface. Codepen is a more commercial app, and this guarantees the continuous development and the great support.
See the Pen Animated Landscape Icon with GSAP by Adam Laki (@adamlaki) on CodePen.
Witch the premium version (start from $10/month) you get a lot of extra features for me the most useful was the pen’s privacy feature. In a lot of case, I don’t want to make my pens publicly available. I also use a lot the live preview feature and the newly introduced project platform where you can manage complete projects in a folder structure.
I have to notice that the project feature is not flawless. I often get a save or upload error and the error messages, not the best, but I see the development.
Because I use the pro version, I will talk a lot about these functions too.
For more pro feature info check out the official landing page.
So What Can I Do With Codepen?
You can almost cover every aspect of a basic front-end development workflow. It will feel intuitive after a modern code editor program, so the learning curve is little small. Here I just highlighted the frequently used features by me.
Prototyping
I almost always make my prototypes here. For the smaller ones I open a new private pen and for a bigger one I open a blank project. Here you can move forward quickly (and dirty), and after this, you can refactor it in your development environment.
Nice to know that you can export your pens with one click, so the integration is smooth.
Everything is Integrated
Do you need Angular, Jquery, Bootstrap, Vue in your project? You can quickly add them with ease from the correct (HTML, CSS, JS) panel settings screen. You can also add any external resource from a CDN.
Write in Sass, LESS or Stylus
Of course, you can use your favorite preprocessor in your pens. You also prettify your code too, and the compiler also checks for errors.
Different Views
In Codepen there are a lot of different views which means you can easily debug, live preview, presented, collab your pens.
Do you want to preview your project in a mobile browser? Send your URL with SMS to your phone and enjoy the live refresh.
Want to work with your partner? Switch to collab mode and work together like you are in the same room.
Are you a presenter or a teacher? Turn on Professor Mode and let your student connect with you and see what you are doing while you explain!
Cross Browser/Device Development
You can send all of your pens through CrossBrowserTesting which is today one of the most popular cross-browser testing tools. It is like you have a pro account here too, but you only can use it with Codepen.
Collections and Favorites
If you used Pinterest, I’m sure that you will love collections. You can collect the similar pens in your custom groups. You can also make them private or public.
With the favorite function, you also save the pens for later use and give feedback to the author.
Make Your Profil Unique
Every Codepen member get a profile page it is like your Dribbble profile, but here you can show your front-end works. You can customize all your page and header with CSS as you wish!
Blogging and Codepen Embed
If you run a dev blog, you can easily embed your pen. If you are a PRO member, you also customize the integrated editor look.
The great feature of the Codepen embeds is that your user can edit it real time while they read.
With this type of embed, you can make your posts more useful. If you are worried about the performance, you can also enable the runnable embeds when the editors need interaction to run, so they aren’t inited on page load.
+1 – Blogging on Codepen
You not only can create pens but also posts which are a regular blog post. As in the pens case, this posts also highlighted by different algorithms so if you write a killer post you easily can get more traffic and be more popular!
Summary
For me, as a front-end developer, Codepen is an ultimate tool which makes my life easier. No matter where I work, I always access my portable development environment where I can inspire too.
More in #tools category 
