The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

This week: Clocks, Cats, and Contacts

The Weasley Clock

Olivia Ng animates the Weasley family's status-updating clock from the Harry Potter series with SCSS and a dash of Splitting.js.

Deliver Netflix-grade video with any sized development team

Add scalable live and on-demand video to any app, using any web framework. Mux Video API uses machine learning to host, encode, and deliver video more efficiently and at higher quality.

CSSYBERTRUCK

You know you cannot escape the Cybertruck. David Khourshid's rendition is complete with "armored glass" windows that work just like the real thing!

Vertical Slider

Matthew Williams shares a bit of character-building UX: "The world's most unintuitive volume control slider if you decide to add gravity to the mix!"

WordPress.com

WordPress powers 31% of the internet. Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tool.

Bongo Cat Codes

Bongo Cat is one of us now, thanks to Caroline Artz and SCSS.

CodePen Radio #246: Pop Out Previews

Klare, Stephen, and Marie talk about the latest feature CodePen launched: grid modal view. How did we build this? Why did we build this? And, more importantly, what do we call it?

A Layout Trick for Building a Contact List

Michelle Barker demonstrates how to use three different CSS properties: grid's max-content, inline-block, or inline-flex, to create list items whose width is set by the longest item in the list.

Grass #2

ycw continues a series of BabylonJS experiments with a rotating lawn of magnificent sparkling grass.

Star Wars Dark/Light Toggle w GSAP 3

Decisions, decisions. Choose your side in the Star Wars saga with Kasper De Bruyne's GSAP3-powered saber toggle.

Rolling Range Slider

A penguin rolls through the range in this adorable slider from pwambach.

Staggered Cubes

It's amazing what you can do with just cubes! jh3y creates a staggering animation with nesting cubes and Zdog. Pop open the dat.gui controls to change the size and colors for your own stunning display.

#CodePenChallenge: Scrabble

For the final week of the Board Games challenge, we brought out the Scrabble board! Check out the Pens from week four, including "Stranger Things Scrabble" from Dilx.

Animation with Progress Bars

You can tell noot2 is making a lot of progress with animation in this Pen (get it?)