Here Comes the Ice Cream Truck

This weekend’s shaping up to be a hot one all over the northern hemisphere. It’s perfect ice cream weather, wouldn’t you say? The CodePen community’s got something on the truck for everybody! Take your pick of perfect popsicles from Mikhail Korotkov’s “cant get enough icecream in pure css3” See the Pen cant get enough icecream […]

Updating Linting Rules

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. […]

099: Testing

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 […]

Auto-Selecting Asset Uploads and Image Previews

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 […]

New PRO Perk: CrossBrowserTesting

There is a brand new PRO Perk up! This one is from our friends at CrossBrowserTesting. Yep yep, the very same app we have a partnership with that allows you to test your Pens, for free, across any browser/platform/version right through the comfort of your web browser. It’s pretty amazing. It’s 20% off either their […]

Blind Accessibility Testers Society Guide to CodePen

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 […]

098: Animation

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 […]

Chrome/Opera Extension for Atomizer

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? […]

Gotta Catch ’em All!

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. […]

← Older posts