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.

#257: Challenges 2020

We’re two years into the #CodePenChallenge! Chris and Marie chat about why we do them, and the challenges of keeping a community challenge fresh and fun over time.

New Editor Focus Keyboard Commands

We’ve just released some key keyboard commands for the Pen Editor that have been highly requested for years: the ability to move from editor to editor. Command (Mac) / Control (PC) + Option (Alt) + 1: Move focus to the HTML Editor Command (Mac) / Control (PC) + Option (Alt) + 2: Move focus to […]

CodePen for Education Questions, Answered

I got a bunch of questions from a “Head of Customer Success” at a company that does developer education recently. They had some great questions about how CodePen could be used in their online courses1. The answers might benefit anyone in this situation, so here’s exactly what I was asked and what I answered. Which […]

#256: Browsing

Klare, Stephen, and Marie talk about recent changes to browsing CodePen and how it makes everything faster and less likely to start a fire on your laptop.

Editor Activity Indicator

You might notice a smidge of extra visual activity happening down in the Pen Editor footer lately. We’re trying to show you a bit more information about what the Pen Editor is actually doing. Here’s an example (5 second video) where I’m editing some HTML to include an <em> tag or not, and the editor […]

#255: Assets Update

Stephen and Marie talk about the recent update to the assets modal and highlight some of the benefits of the assets you have available to you on CodePen. Just don’t say Redux!

Freshly Designed Assets Modal

When you’re working in the Pen Editor, you have complete access to both all the files you’ve uploaded (Asset Hosting is a PRO feature) as well as a slew of free design resources we make available to you. Click that Assets button in the footer, and the Assets modal will pop up. We’ve just redesigned […]

HTMLHint

Along with our recent release of using Prettier for code formatting, we’ve also now upgraded our HTML linter to use HTMLHint instead of html-inspector. Interestingly, they have about the same number of stars on GitHub, but html-inspector is archived and no longer maintained while HTMLHint is actively maintained. You use it by selecting Analyze HTML […]

Prettier

Prettier has become the predominant code formatting tool used by web designers and developers. It has a nice set of defaults that work great for CSS, JavaScript, and even HTML (and most of the preprocessor we support, like SCSS). We’ve long offered one-click access to formatting, and now those are powered by Prettier. Here’s an […]

← Older posts
Newer posts →