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.

114: GitLab

Show Description CodePen recently switched from GitHub to self-hosted GitLab. We’re happy with it! In this episode, Chris, Rachel, and Tim talk about the differences between GitHub and GitLab, why we decided to make the change, the features we like, and how the team managed the switch. Show Sponsor CodePen Pro Show Links Gitlab Github […]

ReSolarized

The other day, on Twitter, François Robichet pointed out that our Solarized (both light and dark) themes were a little off from the canonical themes. Fortunately, themes are just CSS, so tweaking them is pretty easy. In fact, Alex Zaworski created a Pen that does an excellent job of making theme CSS creation easy: See […]

An Update to Debug Mode

Debug Mode is a feature we designed for—you guessed it—debugging your code. The debug view of your Pen shows you the result of your code without the CodePen frame around it. It makes it easier to focus in on what’s going on with your code as you wrote it, since you can rule out any […]

Web-Maker

Web-Maker is a chrome extension that converts your Chrome tabs into an offline playground for your web experiments. We get asked fairly often about an offline version of CodePen. While we think that would be cool, in all honesty, we aren’t particularly close to that. If you’re looking for a CodePen-like offline editor, and use […]

The Most Hearted of 2016!

What a year! 2016 was the biggest year for CodePen yet. It’s such a joy to show off the top Pens, Collections, and Posts from 2016. It’s been the greatest pleasure to watch people create such a wide variety of Pens from all over. From Tiffany Rayside’s creativity to Szenia Zadvornykh’s amazing WebGl creations to Gabi’s glorious guide to […]

A CodePen-Hosted Asset CORS Gotcha

For as long as I’ve worked at CodePen, there’s been on on-going issue that has really bugged me. Some members have reported that CodePen-hosted images were not returning with the correct CORS headers when they’re used in Canvas or WebGL Pens. This can be a real bummer, because if an asset doesn’t return with Cross-Origin […]

Use Any PostCSS Plugin You Want on CodePen

We support writing CSS with PostCSS here at CodePen, and as we just posted, we support a select number of PostCSS plugins. If you ever have a strong desire to see us support others, definitely let us know and we’ll see what we can do. But, you also don’t need our help anymore! The ever-clever […]

Current List of All PostCSS Plugins We Support

We offer PostCSS on CodePen, and the purpose of using it is like anywhere else: you use plugins that do potentially useful preprocessing to your CSS. We do not currently have a way for you to use whatever plugin you want for PostCSS, we only offer a select few. To use them, you have to […]

JavaScript 30

Wes Bos has a new totally free training course called JavaScript30: 30 Day Vanilla JS Coding Challenge Build 30 things in 30 days with 30 tutorials No Frameworks × No Compilers × No Libraries × No Boilerplate We’re seeing a good amount of people tackle the challenges here on CodePen!

RegEx Find (and Replace) on CodePen

This has been possible ever since we integrated the CodeMirror Find & Replace functionality into CodePen, but it’s a bit hidden, so it’s worth explaining specifically. If you start any “Find” with a “/”, that will be a RegEx. So for example, Command/Control + F brings up “Find”: A search for “/apples/” is basically the […]

← Older posts