Codepen: Build, Test, and Discover Front-End Code

One challenge with a content management system is testing and producing scripted tools. While that’s not a requirement for most publishers, as a technology publication, I do like sharing working scripts from time to time to help other folks. I’ve shared how to use JavaScript to check password strength, how to check email address syntax with Regular Expressions (Regex), and most recently added this calculator to predict the sales impact of online reviews. I hope to add dozens of tools on the site but WordPress isn’t exactly conducive to publishing like this… it’s a content system, not a development system.

So, to get my little scripts working I enjoy using CodePen. CodePen is a neatly organized tool with an HTML panel, a CSS panel, a JavaScript panel, Console, and a published of the resulting code. Each panel has information when you mouse over elements so that you understand what’s possible, as well as color-coding of your HTML, CSS, and JS to help you edit and write easier.

CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. CodePen focuses primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

About CodePen

With CodePen, I was able to do all the work necessary to publish the calculator I embedded in the site. Most creations on CodePen are public and open source. They are living things that other people and the community can interact with, from a simple hearting, to leaving a comment, to forking and changing for their own needs.

CodePen - calculator for predicting the sales impact of online reviews

With CodePen, you can change your view if you’d like the panes to be on the left, right, or bottom as you work… or view the HTML in a new tab. The side-by-side view works incredibly well to test your responsive settings since you can adjust the size of the viewable pane.

You can organize each of your working scripts into Pens, combine them into Projects (multi-file editor), or even build out collections. It’s basically a working portfolio site for front-end code where you can follow other authors, fork other publicly shared projects into your own to modify, and even learn how to do some fun stuff through challenges.

You can save as a GitHub Gist, export in zip file, and even embed the pen in an article like this:

See the Pen
Predicted Sales Impact Of Online Reviews
by Douglas Karr (@douglaskarr)
on CodePen.

One of the limitations of the Pen editor is the sheer volume of code. You may never run across this issue, as the editor should be fine with hundreds or even thousands of lines of code. But when they start hitting 5,000 – 10,000 or more lines of code, you’ll see the editor start to fail. However, you can add external references to stylesheets or JavaScript hosted elsewhere!

I’d encourage you to sign up. You will be subscribed to their weekly email and can also add the feed to your RSS feed so you can see newly published pens. And, if you start searching or browsing the public pens there, you’ll find some incredible projects… the users are quite talented!

Follow Douglas Karr on Codepen

The paid version, CodePen Pro, offers a ton of additional features for improved functionality or teams – including collaboration, processes, asset hosting, private views, and even deployed projects with your own domain or subdomain. And, of course, CodePen provides a great repository with Github integration where your entire team can work. If you’re just wanting to test out some simple code as I am, CodePen is an invaluable tool.

© 2020 DK New Media, LLC, All Rights Reserved