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.

April 26th: Strange Sliders, Scary Numbers, and Glassy Gradients

Lumon Macrodata Refinement

Adam Kuhn risks a trip to the break room to bring us this recreation of the Macrodata Refinement UI from Apple TV's "Severance" series.

Malfunctioned Range Slider

There's something wrong with this range slider from Tin Fung, Chan. Maybe that ball is too heavy? Maybe the slider's facing the wrong way up? Give it a try, then take a peek at the commented JS code to see what's making the slider malfunction.

Rainy Animation

Koyama Monaka uses p5.js to paint an abstract rainy scene, with smudged circles that bring to mind streetlights reflected in a rain puddle on asphalt.

Type Challenge: Comfortaa & Square Peg

Mike Mai answers a challenge prompt from "Flexible Typesetting" author Tim Brown with this clever pairing of two randomly-selected typefaces. Mike shows how Comfortaa and Square Peg can work together to create a vaporwave vibe.

inbloom

Animated dots gather to form a tulip image in this pretty piece of vanilla JavaScript pointillism from pimskie.

Tubes

Mark Boots mixes up a solution of linear and radial gradients in the CSS lab to create a series of test tubes filled with animated "liquid".

DigitalOcean

Get back to coding and let DigitalOcean handle the infrastructure. In just minutes, you’ll get your app up and running with our powerful, simple tools and products—like Droplets, App Platform, and Managed Databases. Jump in now with a free $100 credit!

Gingham w/Repeating Linear Gradients

Anna Pawl weaves linear gradients together with a little bit of grid to create stylish two-color patterns reminiscent of gingham fabric.

DigitalOcean

Get back to coding and let DigitalOcean handle the infrastructure. In just minutes, you’ll get your app up and running with our powerful, simple tools and products—like Droplets, App Platform, and Managed Databases. Jump in now with a free $100 credit!

#CodePenChallenge: Icons

The third week of the April challenge was all about icons! Browse through our collection of the iconic Pens from week 3, including creations from Kit Jenson, Hyperplexed, Pepita K., and Sicontis.

Pure CSS - Lava Lamp

maxi83c recreates a lava lamp with SCSS, complete with a groovy glow. Dig into the CSS panel to get insight into the gradient, clip-path, and nth-child magic that went into it!

Petri Architected

Sophia Wood brings a JavaScript petri dish to life in this interactive Pen created for the #WCCChallenge "Microcosm" prompt. Click anywhere in the scene to generate a new dish.

Animations & Cool Effects

Riccardo Zanutta started curating this massive collection of 1500+ Pens in 2014 😮 It's an fantastic look at popular animation effects from the CodePen community over time. Pro tip: use the collection's "Sort By" filter to travel back and forth in time.

DigitalOcean

Get back to coding and let DigitalOcean handle the infrastructure. In just minutes, you’ll get your app up and running with our powerful, simple tools and products—like Droplets, App Platform, and Managed Databases. Jump in now with a free $100 credit!

Funky Wavy Text

Luke Meyrick creates a set of type specimens with an offset text stroke that gets its funk from a randomized SVG turbulence filter.

Minimalist Thermostat

Jon Kantner shares "A simple thermostat UI with a switchable scale. Operable by dragging in a circle or using the arrow keys." Watch the gradual change to the background glow as you turn the dial!

CodePen Radio #364: Varun Vachhar

If you're curious about the intersection of creative coding and NFTs, this is the CodePen Radio episode for you! Chris Coyier welcome guest Varun Vachhar for a conversation about Varun's art and his experience in the NFT world.

Point and Click Penguin

Masahito Leo Takeuchi is back with another interactive pixel pal! "I previously experimented with sprites that change angle, so I took the idea further by working out the angle based on mouse click. Instead of turning straight away, the penguin can only turn 45 degrees at a time. The penguin also leaves some footprints which fades away."

Chris' Corner

Reading Adrian Roselli's "Accessible Cart Tables?" had me thinking how, I would guess, developers would get into accessibility work for the same reason they got into development in the first place: puzzles! Coding is essentially solving little (and big) puzzles all day. You follow a trail of logic, and write your own logic, giving yourself clues along the way, to solve the problem.

Here's the problem in Adrian's article, the accessibility of a shopping cart table like this:

Screenshot of a typical shopping cart form. Rows including the SKU, Description, Unit Price, Quantity, and Total. But also several right-aligned two-column rows for Sub-Total, Shipping, and Grand Total

The problem here isn't so much the top half of the table. That's a pretty standard table with five columns and rows that have values in each column.

The problem is the last three rows. Those right-aligned, two-column rows that don't really fit the format of the rest of the table.

Producing this design isn't problem. A <th colspan="4"> for the "headers" of those rows will get you most of the way there. Accessibility is the problem.

There are at least three annoying problems that pop up here. 1) Those bottom "row headers" are under the header SKU, which is wrong. 2) Worse, "JAWS/Chrome announces the last column in those three rows a bit oddly. If you navigate down the Total column into the Sub-Total row, you will hear "sub dash total sub dash total sub dash total sub dash total". JAWS is announcing the row header once for each column it spans." and 3) VoiceOver/Safari gets the row headers entirely wrong in an off-by-one sense. Ooooof.

Some developers would just throw their hands up and say, oh well, I've coded this table correctly so it's the browsers or the assistive technologies fault if it doesn't handle it well.

But have you coded it well? Isn't good coding actually solving the problem? The problem being: providing the information in this table to all users?

In Adrian's post, he continues the problem-solving journey, trying out at least 7 different approaches to the table with the same information but with different HTML, trying to ensure it is read sensibly. Now that's puzzle-solving at it's best.

The demos exist as a Pen to explore, benefiting everyone, not to mention all the browser bugs filed along the way.