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.
Time Jumps
--------
--------
408: Proxied Third-Party JavaScript
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 tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codepen.io URL instead (a proxy) so that we get (much) more accurate usage data on the app. Since there is nothing tracked that is an anonymity concern, and we do nothing with the data other than help inform ourselves on how to make a better app, we wear this gray hat.
If you'd still like to block these requests, the path would be https://codepen.io/stats/fr/*
Time Jumps
--------
--------
407: Our Own CDN
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 good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.)
There are several complications along the way. One is that we need to fingerprint these files so we can cache-bust them when needed. We also need to be able to import the URLs in other parts of the repo, so we need manifest files that contain those URLs in multiple formats. Plus many of the files have their own build process, they aren't just entirely static files. In the end, building our own thing was probably the right move.
The files go to Cloudflare R2, which, I suppose, is the CDN part.
Time Jumps
--------
--------
406: Hot Trends of 2025
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!
Custom @functions (just landed)
if() function
clip-path & shape()
corner-shape and the superellipse
Scrolling stuff
The attr() power up
Hot Styles
Liquid glass (Jhey's demo, Spark)
Hard glitch (CRT-like effect with VFX-JS, Glitchy button hover effect with VFX-JS, ❍ Cinematic Glitch Slideshow)
Holographics (CSS Holographic Masks)
Grainy textures (Grainy distorted interactive 1 gradient blobs)
Innovative blurs (wavy wobbly lava orb, Bubbles Background Animation)
New color spaces (OKLCH Swatch Example, CSS Color Functions, CSS oklch Gradation)
Hot Pens
Petr Knoll’s Glass Button (From February, well ahead of liquid glass)
Mike Bespalov’s Monospace ASCII art generator (known to be “vibe coded”)
Adam Kuhn’s Severance Lumon Macrodata Refinement
Steve Gardner’s “Who Needs Shaders”
Time Jumps
--------
--------
405: Elasticsearch → Postgres Search
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 found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what Elasticsearch had to offer anyway.
For the power users out there: it's true that we've lost the ability to do in-code search for now. But it's temporary and will be coming back in time.
Time Jumps
Netherlands