August 23rd: SVG Ripples, Custom Shapes with CSS Grid, and a Particle Party
Sponsored:
Understand, fix, and automate across your codebase
Sourcegraph helps you code better and stay in flow. It's a code search and intelligence tool for all your company's code to help you quickly understand code, find usage examples, track down bugs, assess the impact of a change, and more.
Sponsored:
CSV Imports, Reimagined with Flatfile
We've built an SDK to construct powerful data flows. Imagine a world where your CSV importer says yes, instead of throwing an exception.
Ripple
Scott Kellum sends a trippy, liquid-y ripple through a series of portrait photos with a smooth combination of SVG filter primitives.
Animated Star Rating
Jon Kantner shares a super-fun star rating input with lots of clever details. Try clicking stars one by one, then click across a long range, like 1 star to 5, and watch how that progress animates.
Using :has() as a CSS Parent Selector and much more
Writing for the Webkit blog, CSS legend Jen Simmons takes us from the basics of how to use :has() as a parent selector through several practical examples of :has() in use, including a pure-CSS dark mode switch.
Amazon Fire Remote in HTML and CSS
Alvaro Montoro shares a photorealistic recreation of the "aCSSzon" remote. The glossy shine on the navigation ring is just stunning!
Space, Rocket Ships, & Electric Cars!
hluebbering rounds up an out of this world collection of space-y Pens complete with planets, stars and space vehicles.
Some quote or something
Bruce Brotherton's modestly titled quote is eye-catching without drawing too much attention to itself. Perfect for an article pullquote or testimonial callout!
CodePen Radio #381: Data on External Library Usage
On the latest podcast, Marie joins the show to dig into the data of the top 10 most used JavaScript external resources of all time on CodePen, including the rise, fall, and sometimes the rise again, of your favorite JS libraries.
#CodePenChallenge: Equal with Deletions
In the 3rd week of our "Coding Challenges Challenge", we tested if two strings were equal with deletions. Browse through community solutions in our collection from week two, including Pens by Julian Parker, luke555, Aryan Tayal, and danchepkwony. Thanks again to Cassidy Williams for the challenge prompts!
Easiest 3D Button
antoniasymeonidou demonstrates how to create a chunky, colorful 3D button with just a little bit of CSS.
tsParticles
Matteo Bruni introduces the jsDelivr ESM of his tsParticles library with this fun demo that alternates between a confetti storm and a cursor-tracking fizz of multi-colored bubbles.
CSS Grid and Custom Shapes
On CSS-Tricks, Temani Afif shows you how to create intriguing layouts with complex shapes with CSS Grid. Get into hexagons, rhombuses, and triangles in part one, then dig into part two for the zig-zags.
LaserScan
prisoner849 brings a retro vibe to the browser with this sweeping "laser scan" reminiscent of TRON and old school science class films.
Chris' Corner
Let’s hang out in CSS land this week! Mostly! I’ve got some YouTube videos you can use to fill up your queue. Personally, I enjoy taking little relaxed moments of my day to soak in a tech video, as it’s a different kind of brain activation than writing or coding that still feels like I’m doing something useful.
Michelle Barker — Creative CSS Layout
Michelle sets up some real-world layout situations and spells out clearly how to approach them.
David East & Adam Argyle — How do you stop second guessing your CSS decisions?
David certainly isn't helpless at CSS, but in this video he's feeling that way a bit. He hones in on some problematic situations (while looking at examples right in CodePen) and brings Adam along for the ride to help talk them out.
Lea Verou — CSS Variable Secrets
Lea is the master of mind-blowing conference talks. I feel like CSS Custom Properties have settled in a bit and developers are understanding them and how to use them. Now Lea comes along, takes things a step at a time from first principles, and has us rethinking things. It's not even the exotic tricks so much, although there are some of those, it's things like how @property cleans up our fallback code, and how instantiating them in JavaScript has advantages and good practices on what properties should actually be.
Cassie Evans & Jake Archibald — FLIP animations
An episode of HTTP 203 gets into the "First Last Invert Play" (FLIP, despite Jake's objections) concept of animation which is downright powerful and everyone should know about.
Luke Brown — Building with Vite: Instant Hot Reloading!
Eight minutes is the perfect length for this "kicking of the tires" of Vite. You'll almost certainly understand Vite, and if it will be useful for you after this.
