Alert() dialog and the
Some of CodePen’s features include:
- A preview panel that shows your HTML (if your Pen has HTML).
- Each pen has its own unique URL to share your code with others. You can also embed a Pen in a blog post or Web page.
- You can designate a Pen as a template–making it much quicker to spin up a similar Pen.
- I’m not sure I’d use it much but CodePen also offers a blog feature. I suppose it might be handy to provide a contextual explanation of a Pen and how it works.
- CodePen makes it very easy to explore other public Pens. There are tons of great examples and you can even browse examples by pattern.
Show me the money
CodePen is free, but there are also three "Pro" plans that heap on additional features. The basic Pro plan is $75 a year and it adds several additional features, but "Professor" and "Collaborative" modes alone make the Pro plan reasonable for any serious client-side coder.
Figure 1a below shows a CodePen.io Pen (click here to see that Pen in action). This Pen didn’t need any CSS, so that panel (collapsed between the HTML and JS panels) is closed. The white bar near the bottom of the figure shows the rendered Pen and the console is shown under that.
Figure 1a. CodePen in action
You can easily configure a Pen with the panel shown below in Figure 1b. Perhaps most importantly this settings panel is where you add references to external resources as hosted on CDNs.
Figure 1b. The settings panel in CodePen
One of the things that slowed me down a little with CodePen was that by default a "Run" button isn’t shown for Pens. By default, Pens run automatically upon each change. You can change that default behavior by deselecting the "Auto Update Preview" button on the Settings panel’s "Behavior" tab. When you do that you will see a "Run" button as is present in Figure 1a. I vastly prefer this manual behavior.
Figure 1c. Disabling Auto Update Preview (which adds a "Run" button for the Pen)