Reading Time: 2 minutes
After years of admiring and learning from the sidelines, I’ve created a CodePen account. It’s a surprisingly creative and fun space, and I note a problem with distraction.
Having a safe coding space encourages experimentation and pushing boundaries. Sure, I have my local code editors and virtual servers, and it’s a new paradigm of excitement when you know your playtime is within public scrutiny.
Objective
I want to better illustrate my content thinking in this blog and take some of the pain away from presenting and reading dry code.
CodePen allows its embedding within the page and for readers to explore the code and “live” results. It’ll save me time when working as hard on overriding WordPress and theme defaults as on illustrating the topic.
I believe I can update each original Pen in CodePen, and the result updates “live” in the blog. That’s useful.
First Pen adventures
In only my first Pen, I achieved and abandoned the experiment’s objective for random enhancements. I confess to becoming more excited as the platform’s potential became clearer and my distraction deepened. “What if I add a…?” It failed, leading to more distraction with round-tripping to an AI chat for help and more ideas.
Creative distractions
My intention was to learn the platform by creating a JavaScript random word generator. It highlighted how HTML, CSS, and JavaScript interact and instantly update the result. Excellent.
Then I added a colour randomizer and worked on updating my old favourite tooltip. Bing’s Copilot helped solve its timed dismissal, a struggle from nearly eight years ago. My copilots then were textbooks needing endless code revisions. I love it when AI is useful and not too fussy about criticism and working on many, many fresh updates toward prompt and result perfection.
Accessibility and fun
Ah, and what if I removed the annoying accidental tooltip calls when transiting the cursor over the abbr element? A delayed mouseover, perhaps? Maybe later.
Then I thought of VoiceOver, and yes, it works true in the CodePen model. I added ARIA attributes and values to the randomiser and experimented with how short the time intervals can be before things sound messy. It was fun to play and procrastinate usefully while avoiding decorating our hallway.
You will now understand the depths of my distraction, and yes, I finished the hallway.
Backups
I probably don’t need to create backups of the Pens, and there’s no harm in doing so. I plan to copy and paste the code from each Pen into an HTML template. It allows options should CodePen evaporate or another tool take my fancy.
Summary
CodePen is a great tool for learning. My new CodePen account may help my fellow designers get the HTML bug. I only need to master CodePen’s importing external resources, templates, and my focus.
Here’s my first pen embedded in WordPress. The CodePen-supplied WordPress shortcode didn’t work in the editor preview. I panicked and returned to an iframe embed and modified CSS for the narrowest viewports instead: