We were pretty stoked to get HTML linting back into the editor as the “Analyze HTML” command, to join its pals “Analyze CSS” and “Analyze JS”. We started actually using them a lot more. Then we got annoyed. The default settings for the analyzers we were using were a little more opinionated than we liked. […]

Show Description The whole point of testing in development is so you don’t write some new code that ends up affecting other code, causing it to fail or otherwise do something unexpected. You write some code, then you write a test to ensure the code you write does what you expect it to (you might […]

By ReasonablePopularRequest™, we added a couple of features to the pop-up Assets area in the Editor. After dropping an asset, it uploads then selects itself. That means the next action you take could be a keyboard copy so you can paste the URL of the uploaded asset, rather than having to click onto the asset […]

Over on the Blind Accessibility Testers Society (Blind Bats!), Tim Harshbarger posted a great guide on how you can do many of the main activities on CodePen, like creating and editing Pens, changing their settings, commenting, sharing, and more. Not only is this guide useful, but it gave us some great feedback on things we […]

Show Description Of course there are loads and loads of animation examples on CodePen as Pens, but animation is also in use in the CodePen UI itself. How do we think about that? Why do we use it? When is it useful? How do we approach it with code? What’s the weirdest @keyframes in our […]

There is a thing called Atomic CSS. You use shorthand to apply styles directly in HTML. An example from their docs: <div class=”Bgc(#0280ae.5) C(#fff) P(20px)”> Lorem ipsum </div> That will apply these classes: .P\(20px\) { padding: 20px; } .C\(\#fff\) { color: #fff; } .Bgc\(\#0280ae\.5\) { background-color: rgba(2,128,174,.5); } But where do those classes come from? […]

While you’re taking a break from Pokemon Go (or erm…waiting to get on) have some fun with these Pokemon-inspired Pens! “CSS Isometric Pokemon” by Ash See the Pen CSS Isometric Pokemon by Ash (@littleginger) on CodePen. Riley Shaw’s “Gotta catch ’em all!” See the Pen Gotta catch ’em all! by Riley Shaw (@rileyjshaw) on CodePen. […]

Sometimes we’re surprised when we hear from folks who didn’t realize we have a certain feature. That’s happened a few times recently for our CodePen PRO Teams feature. Then we’re like, oh yeah, that’s our job to make sure you know! So we made a page to explain them. Which complements our documentation on Teams, […]

We have a bit of a UI update for you! We’ve added this dropdown to each of the editors, which brings together many of the actions you can perform on an editor and the code it contains. A GIF can do a good job of explaining: The Tidy and View Compiled functionality used to be […]

Show Description All of our hires so far at CodePen have some ownership of the company in the form of stock options. This seems to be the most popular option for companies like ours, but it’s not the only way. We’re joined by our lawyer Alex King who explains the difference between stock options vs. […]