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.

March 11th: Hearts, Hats, and Heroes

The Cube

Boris Šehovac recreates the classic Rubik's cube in this playable Pen that's just as fun (and frustrating) as the real thing!

Testing that Teams love on Web + Mobile

Today orgs are balancing between faster time to market & flawless UX. See the future of test automation QA & Dev's love with a Free Trial.

CSS Heart Shaped Bee

Watch JustYourAverageOnion draw a lovely bee with CSS in this time-lapse live coding session on YouTube.

#CodePenChallenge: Coding Heroes

The March 2019 challenge is all about paying tribute to our heroes. Check out the Pens from week one, where we paid tribute to our most admired people in the world of code, including Meiko Hori's "Three Virtues of a Programmer", in tribute to Larry Wall.

How Do Top Developers Deliver Video?

Download the Video Developer Report! Dive into the insights of video developers from Broadcasters, Integrators, Publishers, Telcos and more.

Scrolling Grid

Sarah Higley shares a demonstration of a CSS-only grid with a fixed header and scrolling body, built with accessibility in mind.

shape-outside + vertical writing mode

Kristopher Van Sant makes waves with a combination of a shape-outside polygon and `vertical-rl` writing.

Bonsai Animation

A reflective animation of a delicate bonsai tree, created with SVG filters and Greensock by Kamil Dyrek.

To-Do List

Creating this todo list was a todo in itself for Cassie Evans. It's a "to do list with plain JS to work out the hurdles before re-making with Vue.js", with stylish buttons borrowed from a Pen from Jesper Hills.

Hearts

Johan Karlsson shares a lovely collection of his many hearts, inspired by a Coding Train challenge.

C3: Color Contrast Checker

"Interactive validator that gets two colors (in RGB or HEX), and calculates the contrast difference between the two, providing information about their accessibility based on WCAG 2.1 criteria" from Alvaro Montoro.

Mr. Kitty

"Accessorize Mr.Kitty! Drew SVG using illustrator and used Green Socks' GSAP to animate draggable features" from Lady Jellington.

Visualizing Cover vs Contain

A quick lesson on the difference between `cover` and `contain` for `object-fit` and `background-size`, from Joey Hoer.

CSS Gradient Counter List

"An example of CSS counter with a fixed background gradient" from Mattia Astorino.