How To Embed CodePen (Interactive Javascript code and animations)

Mick West

Administrator
Staff member
CodePen.io is a site that lets you easily create small web pages (called "Pens") using a mixture of HTML, CSS, and JavaScript. Here's a simple example (from the WTC: rate of fall thread). You can move the sliders to adjust the values, and the results update automatically. You can also just type in parameters.



I think this has the potential to be very useful for debugging, as it's possible to create simple mathematical models, where you can adjust the variable to see what effect various assumptions have. Like in the above, you can see is having the correct value for g would make any difference to the end result (it does not).

To embed a Pen you can simply use the URL directly, like:

http://codepen.io/mickwest/pen/eqtJo

and you can optionally set the height, like:

http://codepen.io/mickwest/pen/eqtJo,320

You can click on the tabs in the example above and it will show you the underlying code.

The "Edit on CodePen" link will not work if you click on it directly, you will have to right click on it. This is due to the security settings. The Pen runs using the "sandbox" attribute, however for additional security I've currently encapsulated the entire thing in a more restrictive sandbox.

The above example could easily be re-used for a similar simulation. You just need to get a Codepen account, and then you can "fork" a Pen (meaning you make your own copy of it, which you can then edit).
 
Last edited:
Some caveats:
  • Graphically intensive Pens can make a page be somewhat unresponsive on a mobile device.
  • if you include content from elsewhere, then try to use HTTPS, otherwise the "mixed content" warning will show up in the address bar.
  • In some cases using non-HTTPS content will cause the Pen not to load in higher security browsers, such as Chrome. For example, the following Pen works in Safari, but not in the latest Chrome:


Giving the errors:
Code:
[blocked] The page at 'https://www.metabunk.org/threads/more-codepen-tests.2778/' was loaded over HTTPS, but ran insecure content from 'http://fonts.googleapis.com/css?family=Istok+Web': this content should also be loaded over HTTPS. (index):1
[blocked] The page at 'https://www.metabunk.org/threads/more-codepen-tests.2778/' was loaded over HTTPS, but ran insecure content from 'http://d3js.org/d3.v3.min.js': this content should also be loaded over HTTPS.
 
Last edited:
Back
Top