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.

August 17th: Pinwheels, Pups, and Perlin Noise

Learn GraphQL with React

Take your API skills to the next level. Start building your apps with React and Contentful's free GraphQL API today.

Pinwheel - Pure JavaScript

Toshiya Marukubo presents a cheerful, summery scene of pinwheels and bubbles in JavaScript.

FLOWEЯS

"Generative wallpaper patterns for floral enthusiasts" from Scott Weaver. Click to generate a new field of bright flowers.

The Grid: CSS Text-Based Animation

CurleyWebDev's live coding speedrun shows how to create a retro grid graphic with CSS, and demonstrates some handy Emmet snippets!

#CodePenChallenge: The Rain (Supa Dupa Fly)

For the 2nd week of the music video palettes color challenge, we cruised into the 90s with Missy Elliott's "The Rain (Supa Dupa Fly)". Check out the Pens from week two, including Ryan Mulligan's "Supa Dupa Fly Hover".

Jetpack Search

Jetpack, the WordPress plugin for your self-hosted WordPress sites, can make these search experience on your site dramatically better. We use it on the CodePen documentation to make search have extremely relevant, instant results in a great UI.

CodePen Radio #280: Planning Big Projects

Marie, Klare, and Dee talk about how Klare leads CodePen through project planning.

A Practical Look at Social Icons

"I've seen this done a million different ways, but here's how I normally implement social icons. An unordered list element with links & inline SVGs to allow for hover effects on the fill property. Nothing fancy, just functional, easy to understand social links." From Geoff Dusome.

Only CSS: Moon Clip

Yusuke Nakaya clips out a quarter moon shape to let a glittering starfield shine through in this lovely bit of CSS.

SVG Tip Of The Day #17 - Animating viewBox

"By animating the viewBox of your SVG, you can create a camera effect 🎥 x & y, make the camera moves. Width & height, make the camera zoom." Part of a great series of SVG tips from Louis Hoebregts.

London Bus (Pure CSS)

Yoav Kadosh translates Ekaterina Ushakova's illustration into CSS. "Every additional detail introduces another challenge, and CSS offers a variety of ways to overcome them."

Perlin Noise Nebula

Lea Rosema conjures a nebula with some help from Three.js. Spend some time with it and watch it gradually change over time.

Custom Cursor - Circle Follows The Mouse Pointer

There's a lot of fun stuff going on with Cojea Gabriel's custom cursor. Try hovering the image from different angles and watch how the cursor squishes and expands.

Mechanical Number Counter

Andrew Rubin crafts "an old-school number counter" with CSS and JavaScript. Pop in a number and watch the numbers flutter into place.