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.

1,000 SVG Icons!

Well, 996 to be exact. I think it’s fair to say that Font Awesome is the most successful icon project ever, and in addition to their paid offerings, they have an open-source free version. We’ve always offered up SVG icons you can easily copy/paste in our free Assets panel, but up until now, there were […]

Lazy Loading and `srcset` images in the Grid

We make screenshots of all Pens and serve them in a variety of ways, most notably in any “grid” of Pens on CodePen. All Pens will show an image in the grid at first, and then if the Pen is animated (and you don’t have the user setting to only show images) it will fade […]

Updates to the Click-to-Load Embeds

When you open up the Embed modal in the Pen Editor, this is where you get the copy-and-paste code for Embedded Pens. You can do lots here, like change the theme, flip on an option to make the embed have a live editor, adjust the height, and also enable the click-to-load feature. The purpose of […]

#277: Putting Out Fires

Outages, bugs, and other production nightmares — every startup has them. Dee and Marie are on to talk about what the process is when something goes wrong at CodePen, and tips and tactics for how to deal with a production fire.

Uploading Avatars and Screenshots is better, too.

With all this recent work we did upgrading our Asset Hosting feature, there were some side-benefits around the app as well. For example, as a PRO member, you can upload replacement screenshots for your Pens if you wish to. The uploader for those is the much nicer Filestack uploader now. Here’s how that works: Similarly, […]

New URL:

Google has a new Top-Level Domain (TLD) they are offering: .new. They have special requirements for it: Navigation to a .new domain must bring a user directly into the action generation or online creation flow. Navigation or redirection to a homepage or landing page that requires the user to take additional steps or clicks to […]

Small Improvements to Pins

A quick story first! When we first built the Pins feature, we were on this little kick like more data on CodePen should be available in real-time. Our approach then was to put the data about Pins into Firestore, a data-storage solution from Google (the successor to Firebase), where real-time connectivity is a first-class feature. […]

Lazy Loaded Prefill Embeds

CodePen’s Prefill Embeds are the perfect way to enhance documentation with live examples. With them, you keep all the code in your repo or blog post so you can easily update demos and track changes. To get started you can set everything up in a real Pen then copy out a Prefill Embed from the […]

← Older posts
Newer posts →
12 3