CodePen

409: Our Own Script Injection

Chris Coyier |
Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special <script> tag into the previews of the Pens you work on. This script has a lot of important jobs so it’s presence is crucial, and getting it in there reliably can is a bit of a challenge. […]... read more

Chris’ Corner: Terminological Fading

Chris Coyier |
I found myself saying “The Edge” in a recent podcast with Stephen. I was talking about some server-side JavaScript that executes during a web request, and that it was advantageous that it happens at CDN nodes around the world rather than at one location only, so that it’s fast. That was kinda the wh... read more

408: Proxied Third-Party JavaScript

Chris Coyier |
Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most “gray hat” thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the <script> necessary to make that work directly to fullres.com, but being an analytics... read more

Chris’ Corner: Simple, Accessible Multi-Select UI

Chris Coyier |
There’s a nice article by Enzo Manuel Mangano called Checkbox Interactions – The beauty of Layout Animations. In the end, you get some nicely animated checkboxes, essentially: I like it. It’s a modern-looking multiple-choice with very clear UX. Enzo’s tutorial is all React Native-ified. I think Enzo... read more

407: Our Own CDN

Chris Coyier |
Robert and Chris jump on to talk about our little CDN project. Maybe that’s not the right term, but we struggled with naming it. Truth be told, it’s the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a […]... read more

Chris’ Corner: Clever Clever

Chris Coyier |
David Darnes made a <code-pen> web component, which is a basic HTML/CSS/JS panel layout that renders them into an iframe (using the very cool <syntax-highlight> web component as well). Then it ate itself when Ariel Salminen put a <code-pen> in a <code-pen>. Then the universe ... read more

406: Hot Trends of 2025

Chris Coyier |
Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025. New CSS! Hot Styles Hot Pens Time Jumps... read more

Chris’ Corner: Pretty Palettes

Chris Coyier |
I’m not terribly good at picking a good color palette out of thin air. My go-to is a dark look with bright colored accents, but I’m wildly envious whenever I see a beautiful website with great looking colors that are very far away from what I could pull off. Sometimes, a little inspiration can go […... read more

405: Elasticsearch → Postgres Search

Chris Coyier |
Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We fou... read more

Chris’ Corner: Faces

Chris Coyier |
It’s one of those weeks where I just feel like posting some specimen screenshots of new-to-me typefaces that I like and have saved.... read more