10 Cool Things You Can Do with CodePen and JavaScript

Hey web people! I work on CodePen a playground for front end web design and development. One of the things you can do on CodePen is create Pens, which are HTML, CSS, and JavaScript you create and see the result of immediately. Ty North has already told you about some reasons to use CodePen, so this time, I thought I'd focus on some of the things you can do specifically with JavaScript on CodePen.

[author_more]

1. Add Any Library You Want, Quickly

Every Pen has its own Settings. This is where you can set things like what External JavaScript you'd like to use.

It's as simple as selecting a library from the Quick Add dropdown, or even better, just start typing the library and we'll offer matching choices. There are thousands of CDN-hosted libraries we offer through typeahead.

2. Write in ES2015

If you're like me and baby-stepping into new ES2015 features, you can practice on CodePen by enabling the Babel JavaScript preprocessor.

Now you can use ES2015 features and Babel will process them down to older version of JavaScript so what you write works everywhere.

Shown here is the let keyword, an arrow function, and template literals.

You can also write ES2015 stuff without using Babel as well, but you may run into browser support issues like you would any other cutting edge feature.

3. Use a Real Console for Output and Debugging

You can use your browser's DevTools console on CodePen, of course. But you need to make sure you set the context of it to the demo <iframe>, or else it won't work.

Or, you can pop open CodePen's built-in console, which is always in the correct context.

Mini tip! You might notice the URL change when you open/close differnet code panels. There are four numbers, and stand for HTML, CSS, JS, and Console (in that order). So the URL parameter:

?editors=0011

Stands for HTML closed, CSS closed, JavaScript open, Console open. Passing a 2 as the last number maximizes the console. In this way you could share a Pen where the output is intentionally only for the console.

Continue reading %10 Cool Things You Can Do with CodePen and JavaScript%

by Chris Coyier via SitePoint