CodePen Blog

This is where we post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. There's an RSS feed.

373: Script Injection with Cloudflare Workers

This week Shaw and Chris dig into some deepnerd tech stuff: manipulating HTML. In a perfect world, perhaps we wouldn’t need to, but today, and even moreso in the foreseeable future of CodePen, we need to do a smidge of HTML manipulation on the HTML that you write or that is generated by code you […]

372: Trends

This week Marie and Chris get together to chat about what’s been hot hot hot on CodePen lately. We’ve discovered there is a really taking to the creamy cardstock look, for one thing. Typography is always great, but we’re seeing more typographic trickery often including variable fonts. While not new, there are still loads of […]

371: Jon Kantner

I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I’ve talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he […]

370: Alex Trost

This week I got to speak with Alex Trost! Alex has been hard at work created Frontend Horse, a clever brand celebrating the beautiful and clever things in our industry via a newsletter, articles, streaming, a Discord community and more. This is the way to do it! Time Jumps Sponsor: Notion Notion is an amazing […]

Bob Ross Ipsum

There is a “Lorem ipsum” generator built right into Emmet, which we enable on CodePen by default. So if you type lorem-Tab, you’ll get some. Good to know: you can customize how much you get of it by adding numbers. lorem10 is just 10 words of filler text. lorem1000 is 1,000 words of filler text. […]

369: With Chris Smith

This week I got to speak with Chris Smith! We got to talk about all sorts of things from blogging, to pushing the boundaries of CSS, to logic in CSS, to digging into some of Chris’ most interesting Pens, to Chris’ actual favorite Pen of all time. Time Jumps Sponsor: React Summit Ken Wheeler, Tejas […]

Live View Iframe Sizing

Lee Martin had a good idea here. On CodePen’s Live View, we use a parent<iframe> to listen for updates to the Pen and then inject them or refresh the preview automatically. But that parent <iframe> can be tricky to size. For example, on iOS, the height of the iframe was as tall as the content […]

368: Lea Rosema

I got to talk with Lea Rosema this week! She’s an incredibly talented digital artist and front-end developer. She does quite a bit of art with some of the trickiest web technology out there: shaders! But rather than just learn it and use it, she helps other people learn and get more out of it. […]

One Weird Trick to Try @parcel/css on CodePen

Ideally, we’d just offer @parcel/css as a CSS processor choice right in our editors. We could absolutely do that, but we’re smack in the middle of a bunch of next-gen CodePen stuff, and we’re keeping our efforts focused there. Never fear, interesting new processors like this will be there along with it. But this CSS […]

← Older posts
12 3