iiinova — where your digital self keeps evolving

DID YOU KNOW: @codepen.io has a read/write API? blog.codepen.io/docs/api/api... Comes in GraphQL & Rest flavors so you can use what's best for your task. Updating a Pen is super easy and seamless.

111

Shaw @shaw.city · 02/10/2026

🖐️✊ More Drag & Drop on @codepen.io 2.0! Panels can be dropped into the tab area for an expanded view, now including Settings & Assets. You can even drag the Console to a tab!

1101

Shaw @shaw.city · 11/09/2026

New & Improved! visibility:hidden to hide the container & inherit style properties for the psuedo-element bg without CSS variables. Easier anchor positioning. Fading gradients with background-attachment:fixed & box-shadows to show the bg isn't clipping. codepen.io/editor/shsha...

Updated code using less magic for positioning.

022

Shaw @shaw.city · 10/09/2026

In CSS, "shrink wrapping" backgrounds to text content with `text-wrap: balance` is a huge pain, but with a little `position-anchor` trickery, we can now make those backgrounds snap to the right size of the wrapped text. codepen.io/editor/shsha...

2152

Shaw @shaw.city · 08/09/2026

New on @codepen.io: 🖐️✊ Draggable Panels 🖐️✊ Try dragging & dropping a Sidebar Panel into the Editors for even more ways to customize the UI. Great to combine with Minimal UI when you still want certain Panel content easily visible. www.youtube.com/watch?v=fcPe...

1113

Shaw @shaw.city · 01/09/2026

On CodePen, we did a lot of testing to try to ensure our iframes in the Editor and Embeds allow for `color-scheme` values that respond to the system theme (if you want them to!)

010

Shaw @shaw.city · 12/08/2026

Thanks for writing up your perspective! I'm curious: Have you tried 2.0 with Minimal UI and a Classic Block template? codepen.io/editor/pen?t... With those two settings in place, the UI and experience is virtually identical to the Classic Editor... only now you have the ability to expand beyond.

CodePen 2.0 with Blank Classic default template and Minimal UI turned on, looking virtually identical to the Classic CodePen Editor.

110

Shaw @shaw.city · 04/08/2026

Three on CodePen. We offer System, Light or Dark in the Editor Settings. It seems like the right choice to let users be explicit about which specific color scheme they want, especially for a code editor.

CodePen Editor Settings showing Site Theme with options for System, Dark or Light

050

Shaw @shaw.city · 28/07/2026

The great news is you have even more control over that in 2.0! Set things up how you want and then use the "Copy Link with Layout" option in the Share menu to get some fancy URL params that open the Pen exactly how you like. codepen.io/editor/shsha...

Copy Link with Layout button in the Share Menu of the CodePen 2.0 Header

120

Shaw @shaw.city · 25/07/2026

Yes; for others looking – the global setting is under Settings > Layout for adjusting your default layout & orientation.

Settings Modal in CodePen 2.0 showing default layout/orientation settings

010

Shaw @shaw.city · 23/07/2026

I needed to split an ethernet port and all I had handy was an old switch I used for Halo LAN parties. Turns out, ethernet technology has come a little ways since then. 1. 10baseT Switch 2. WiFi 3. Gigabit Switch

Three Internet Speed Tests.
The first showing 43 down, 49 up on a 10baseT ethernet switch. The second shows 246 down, 260 up over Wifi. The third shows 873 down, 690 up on a Gigabit ethernet switch.

000

Shaw @shaw.city · 22/07/2026

I -love- dithering, probably due to the fixation I had with my GameBoy Camera. I last dug that out 10 years ago; might be time for a resurgence... if only there were easier ways to transfer data off.

Young child photographed on a GameBoy Camera shown on a Game Boy Color, photographed by an old iPhone.

060

Shaw @shaw.city · 08/07/2026

😎 Look cool as heck in said polyester space suits with custom mission patches

@keyframers ( Stephen Shaw and David Khourshid ) posing in polyester space suits on the set of Web Dev Challenge.

161

Shaw @shaw.city · 23/06/2026

You don't need AI to design UI. Use what you've got.

837244

Shaw @shaw.city · 16/06/2026

The .css extension for 2.0 Pens still works. You can use `@import` directly for the easiest inclusion, or if you're using the Classic Block, external styles can be added in .codepen/classic.config.json

Classic.config.json addition of external styles

000

Shaw @shaw.city · 16/06/2026

Not currently possible. Pug doesn't really have a built-in way to include JSON data (that I'm aware of) and fetch is locked down to prevent security issues. That code produces this error if you click into the Pug Block, due in part to the local file reference in fetch instead of a URL.

000

Shaw @shaw.city · 30/04/2026

Working on a CodePen redesign. Fashion and styles repeat themselves every 20 years, right?

2252

Shaw @shaw.city · 24/04/2026

Released some updates to the @codepen.io 2.0 Editor to help with Perceived and Actual Performance. In most cases, page weight & load time are nearly identical to/less than the Classic Editor. If you still feel like 2.0 is slower, please send a screenshot like this comparing the two on your setup.

Comparison between the Classic CodePen Editor and the CodePen 2.0 Editor showing almost identical page size and load times.

131

Shaw @shaw.city · 21/04/2026

I feel like the vibes of kids software in the 90s and early 2000s were along these lines. Quirky UIs focused on a vibe en.wikipedia.org/wiki/Kid_Pix en.wikipedia.org/wiki/File:Ki...

140

Shaw @shaw.city · 30/03/2026

Just trying to book a haircut and now I'm debugging the website because the login form doesn't work.

"Failed to fillFrame. Frame is missing uuid" error in browser console

140

Shaw @shaw.city · 26/03/2026

Yes! Super handy. That was something I really pushed for to help keep the focus on the important user code. You can even configure it through the Classic Block visual config and the classic.config.json file to add extra styles & scripts, modify the <head> or add classes to the <html>!

020

Shaw @shaw.city · 26/03/2026

Bonus Tip: You can set Default Layout & Orientation in the 2.0 Editor under Settings > Layout if you love the Classic Editor's "Top" orientation.

The Settings modal in the CodePen 2.0 Editor showing the layout options with a Default Orientation setting.

100

Shaw @shaw.city · 26/03/2026

3. Use the Default Template setting to keep your setup on new Pens. After you've set up a Pen the way you like it, make it a Template and set it as your Default Template so that every new Pen will start with the same Files & Blocks.

Template setting under the Controls Menu in the CodePen 2.0 Editor

Default Template setting in the CodePen 2.0 Editor

100

Shaw @shaw.city · 26/03/2026

This Classic Block Template is a good starting point: codepen.io/editor/pen?t... Or you can right click the index.html file & select rename, or search "Rename" in the Omnibar. You can also use *.pen.pug, *.pen.md, and *.pen.njk to have the same automatic scaffolding with Pug, Markdown & Nunjucks!

index.pen.pug to automatically scaffold out the HTML and link up the CSS & JS.

100

Shaw @shaw.city · 26/03/2026

2. Rename to index.pen.html to simplify the HTML The processing in 2.0 Pens is mostly based on file extensions (e.g. script.ts = TypeScript). Use *.pen.html to have the CSS & JS linked up & the rest of the HTML scaffolded for you, so you only see the <body> content like the Classic CodePen Editor.

index.pen.html file simplifying the HTML in the CodePen 2.0 Editor

232

Shaw @shaw.city · 26/03/2026

1. Enable Minimal UI from the Control Menu This global setting tucks away the Sidebar to focus in on the Editors & Preview like the Classic Editor. You can still get to the Sidebar by hovering near the edge, clicking the toggle, or using the Omnibar to search for Files/Settings/Shortcuts.

CodePen 2.0 Controls Menu with Minimal UI enabled

110

Shaw @shaw.city · 26/03/2026

If you love the Classic @codepen.io Editor and want that same feel in the 2.0 Editor, here are some quick tweaks to get you back into familiar territory. Try the 2.0 Editor: codepen.io/editor/pen

1186

Shaw @shaw.city · 26/03/2026

Here's an empty version as a Template that you can set as your Default to start all new Pens that way: codepen.io/editor/shsha... Or bookmark this to use it: codepen.io/editor/pen?t...

Screenshot showing default template option in the CodePen 2.0 Editor

130

Shaw @shaw.city · 26/03/2026

Blocks can be stacked! Rename your index.html to index.pen.pug and you'll get the same experience you're used to where the style & script are automatically linked and the code shown in the Editor is only what's in the <body>. codepen.io/editor/shsha...

Example of the CodePen 2.0 Editor using Classic Block and Pug to produce a basic demo where the Pug input is only what's in the <body>

102

Shaw @shaw.city · 17/03/2026

Sure, I'd love a 13gb Software Update to expand support for a display I don't own.

macOS Software Update dialog showing Tahoe 26.3.1, a 12.87gb software update that "expands external display support"

000

Shaw @shaw.city · 16/03/2026

In context: just talking about CloudFlare optimizations. Out of context: Kind of an unhinged thing to say to your boss.

Screenshot from Slack with the text “Yup. Kill the worker if you need.”

011

Shaw @shaw.city · 12/03/2026

Two ways to simplify the Editor for this case: 1. Set the Blank Classic Template as your Default to have 0 HTML boilerplate / code codepen.io/editor/team/... 2. Enable Minimal UI (Controls > Minimal UI) to hide the sidebar and other UI elements until they're needed. blog.codepen.io/docs/what-ch...

000

Shaw @shaw.city · 12/03/2026

Good news! For a "Classic" CodePen experience try these two tweaks: 1. Enable Minimal UI (Controls > Minimal UI) to hide the sidebar and other UI elements until they're needed. 2. Set the Blank Classic Template as your Default codepen.io/editor/team/... blog.codepen.io/docs/what-ch...

230

Shaw @shaw.city · 11/03/2026

Thanks for the feedback! Anything in particular about the Minimal UI Sidebar Reveal that feels off? Just that the area is too small? Have you tried using the button toggle?

000

Shaw @shaw.city · 03/03/2026

It's definitely cool. Here's a goofy little video of me playing with it, but the github.com/todbot/picos... has some better examples of what it can do.

110

Shaw @shaw.city · 03/03/2026

I've mostly been dabbling in Macropad/MIDI Controller kind of stuff. My biggest build so far has been this MIDI Step Sequencer github.com/todbot/picos... I ordered the circuit board then had to source all the components and solder everything. I definitely need to level up my soldering skills/gear.

140

Shaw @shaw.city · 14/01/2026

Files from my hard drive without any context.

Two images of Spock side by side. One is normal Spock labelled "DOM", and one is Spock with his evil goatee labelled "Shadow DOM."

050

Shaw @shaw.city · 20/10/2025

Oh dang. This might be the first useful "AI Overview" popping up in a search that I've seen. The info's probably scraped from somewhere, but there's not a basic chord chart showing up in the overall search results.

AI Overview giving chords for a song in Nashville Numbers style with correct keys and modulations.

020

Shaw @shaw.city · 16/10/2025

As a testament to the impact: Here's a screenshot I saved back in 2017 where you picked one of my Pens. Approximately one year later, we were co-workers!

"Marie Mosley picked your Pen Airport Distance Map" notification from CodePen

120

Shaw @shaw.city · 14/10/2025

Why is the new Simulator icon a Santa glove?

"Simulator" app on macOS depicting what appears to be a santa glove holding an iPad

220

Shaw @shaw.city · 03/10/2025

Trying to motivate my kids to go above & beyond in doing housework (mowing the lawn, washing cars, etc.). Money seems to be the best reward right now, but I never have cash on hand. Fortunately, I have a printer and mediocre design skills...

A stack of $5 "Shawbucks", the official currency of Shaw City.

010

Shaw @shaw.city · 04/09/2025

Note: If you're testing document visibility APIs, make sure you don't have "Emulate a focused page" checked.

Chrome Dev Tools "Emulate a focused page" checkbox under Styles -> :hov. Description text says "Keep page focused. Commonly used for debugging disappearing elements."

120

Shaw @shaw.city · 04/09/2025

Tonight, on a very special CodePen Radio…

141

Shaw @shaw.city · 02/09/2025

I always get > and < mixed up.

Text with >body< instead of <body> due to mixed up HTML encoding

020

Shaw @shaw.city · 28/08/2025

Later created Nintendo Planet & other sites by cobbling together scraps of code from other websites, learning how to manipulate existing pieces to make the… “aesthetic” I wanted.

Awful website called Nintendo Planet with red text on a black background and little substance.

020

Shaw @shaw.city · 25/08/2025

Neighbor found a stray kitten in their yard. Apparently we have a reputation, so they knew to come to us. Now I have a Junior Developer working with me while we try to find her a forever home.

Small calico kitten standing on a laptop looking fricken adorable

020

Shaw @shaw.city · 21/08/2025

I had a rechargeable battery pack that attached to the back, but I don't think it lasted a fraction as long as the 20 AAs the GameGear regularly took. It was a chonky beast. Speaking of Genesis & Chonky: Did you ever see the Sega Nomad? Full handheld Genesis that ate batteries even faster than GG.

Box for the 1990's Sega "Nomad" handheld Genesis

100

Shaw @shaw.city · 12/08/2025

So GitHub is just toast after that CEO situation yesterday...? That was fast.

GitHub showing "There aren't any open pull requests" in one area and 10 pull requests in another.

020