CodePen: Built, Test, Share and Discover HTML, CSS, and JavaScript
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 like sharing working scripts occasionally to help others. I’ve shared how to use JavaScript to check password strength and 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 more tools to the site, but WordPress isn’t conducive to publishing like this. It’s a content management system (CMS), not primarily a development platform.
CodePen
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 publication 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 more easily.
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 could 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 heart, to leaving a comment, to forking and changing for their own needs.
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 your working scripts into Pens, combine them into Projects (multi-file editor), or even build out collections. It’s 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 it as a GitHub Gist, export it in a zip file, and even embed the pen in an article like this:
See the Pen Predicted Sales Impact Of Online Reviews by Douglas Karr (@martech_zone) on CodePen.
One of the limitations of the Pen editor is the sheer volume of code. You may never encounter this issue, as the editor should be fine with hundreds or 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 add the feed to your RSS feed to see newly published pens. 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 many additional features for improved functionality or teams – including collaboration, processes, asset hosting, private views, and even deployed projects with your domain or subdomain. And, of course, CodePen provides a great repository with Github integration where your entire team can work. If you want to test some simple code like I do, CodePen is an invaluable tool.
Related Martech Zone Content
