What is CodePen?
Every front-end developer needs to test a small piece of code and creating a new git branch is too much of a hassle or attempting to change production code would be too risky. So what can you do?
CodePen is an online code editor where developers can create code snippets, creatively named "pens", and test them. CodePen supports plenty of different languages aside from the typical HTML, CSS, and JavaScript. Inside of the settings the source compiler can be changed to process many different languages:
- Haml or Jade for HTML markup
- SASS or LESS for stylistic editing
- CoffeeScript, TypeScript, and any other library you can provide external link for
This allows for very quick access to editing, most commonly, small pieces of code and testing them on the web. So now you have created a beautiful animation to display your CSS talents and you want to insert into your portfolio. How do you do it? You can embed the pen using their embed tool which has options for iframe, HTML, and WordPress. Unfortunately, LinkedIn does't allow embedding iframes so here is a link to an example.
You could then send the pen link to a friend or colleague and have them work on it as well. There are many other options, for a monthly fee, to improve collaboration between colleagues. Other features that make CodePen great are:
- User interface
- Fork pens (similar to Git)
- Save pens to profile and access anywhere
- Share on social media
If you are a front-end developer I highly recommend checking out CodePen. There are many other similar resources out there, but CodePen as been a better asset for me.