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.

128: Taking CodePen on the Road

Chris, Tim Holman, and Marie are talking about spreading the CodePen word at conferences, both as speakers and attendees. How do you not cross the line into smarmy marketing? Do you need business cards? We talk about what feels right, and what doesn’t, when you take your company out “on the road”.

How to Make an Embedded Pen Resizeable

Some recent changes to Embedded Pens have made it a lot easier to make them resizeable! Let’s cover everything. Embedded Pens are naturally horizontally flexible and responsive They can go as wide or narrow as you need. They naturally fill the horizontal space of the container they are in. If they are wide enough, you […]

Prettier Prettification

Everybody loves pretty code, and in fact CodePen has had the “tidy” functionality since the beginning. In the Pen editor, it’s in the dropdown within your HTML/CSS/JS panels. And in the Project Editor, it’s in the main bar, at the top of your file editor. So, why are we here? Well, we’ve just changed the […]

Embed Touch Ups

Last week, we pushed out a variety of improvements to Embedded Pens! Here’s a quick rundown of what’s new. Vertically Responsive Some folks add a little interactivity to Embedded Pens on their side. For example, putting them inside resizable containers so readers can expand and contract them as they need, to expose more code or […]

127: Alphas and Betas

Chris, Rachel, and Marie talk about the stages of testing CodePen’s new Projects feature – moving from developing in “secret” to alpha, transitioning to invite-only beta and open beta, and managing communication with alpha and beta users.

Chrome Extensions for CodePen Keyboard Shortcuts

I tried both of these and they work great! Codopen The Codopen extension allows for quick switching to Debug View. It adds a button, but also a keyboard command (Command/Control+Shift+I) that pops open a new tab with the current Pen in Debug View. codeTabber The codeTabber extension provides keyboard commands for switching between the editor […]

Update 2! CodePen is Going All-HTTPS

As we mentioned a few weeks ago, CodePen will be going entirely HTTPS on June 1, 2017. That article goes into why and how it might affect for you. This post is another reminder that it’s happening! But, we also want to share some steps we’re taking to help the process along. Non-Secure Resources Now […]

126: Project Management 2

Marie, Alex, and Rachel talk project management for the payments update and the Project project. We talk about the tools we used to manage our projects, what we’ve learned while managing projects, and tips for folks about to manage their first big project.

The Material Design Color Tool Exports to CodePen

Material Design is Google’s design system. It’s things like colors, icons, and typography, but also patterns, animation, and principals. There are implementations of Material Design, like Angular Material, which you can also work with on CodePen. They even have an account for their own demos. Brand new on the Material Design site is the Color […]

← Older posts
Newer posts →