I love CodePen. It’s a great environment for trying out ideas in HTML, CSS, and JavaScript. I’ve been using it a lot on my own and with the students in the JavaScript class I’m teaching. It’s nice that CodePen offer so many embed options. But, sometimes, I want just the thing itself, without any of the chrome or other features CodePen’s out-of-the-box embeds offer. Essentially, I wanted something really stripped down and minimalist. I wanted this (which sometimes fails on desktop and always fails on mobile–The Editors):
That’s a bit of generative art I built with a cool JavaScript drawing library called q5.js. It’s rather pedestrian title is “q5 Random Circles 2.” I’ll have more to say on q5 and generative art in another post. Here’s what it looks like via CodePen’s default embed option:
See the Pen q5 Random Circles 2 by James “Wheatbread” Martin (@jamesnotjim) on CodePen.
That’s great–kind of amazing, really–for situations where you want to display the result and also encourage people to see explore the code that makes it happen. But, for situations where you just want the result, it’s too much. And I suspect it’s also too much for anyone who isn’t into programming.
The Embed Method
At the top of each “pen” in CodePen is a Change View button. The “Debug mode” is what we want:
The Debug mode presents you with a single page combining the HTML, CSS, JavaScript, and whatever libraries you’re using:
The URL from that debug view is what we need. Back here in WordPress, we can use that in an iframe. The WordPress Custom HTML Block can make sense of an iframe tag. The code for that previous example is this:
<iframe width=405 height=405 src="https://cdpn.io/pen/debug/mydrEya?authentication_hash=WPALYWzBoQek"></iframe>The canvas size in the original is 400 x 400. To get rid of any scrollbars or truncating, adding an extra five pixels to the height and width seems to be all that’s necessary.
Pros & Cons
The cool thing here is I get to keep the code in CodePen but display the results of it here in WordPress. Any changes I made there will be reflected here. That’s the chief advantage and also the chief risk. If I delete the pen or break it, it’ll be broken here as well. If CodePen–which has been around since 2012–goes away or makes any changes that break the debug view as its currently implemented, that’ll break things here as well. Such are the joys of the interconnected world we live in.
But, for me, it meets my goal of being able to share things I’ve built in a way that matches the minimalist aesthetic of the site (and, often, the things).