This week: Noise, Neon, and Numbers
Debug Puppeteer + Playwright Tests Fast
Testim Root Cause simplifies screenshot capture, highlighting the UI action to visually identify where the test failed. Via cloud or local.
Grid-Based Blog Index Page Layout
Flowers forever! Sheelah Brennan shares a blog layout concept with lovely botanical accents.
Dreaming of Jupiter - Three.js
Jupiter hovers over a wavy starfield in this dreamy Pen by isladjan.
#CodePenChallenge: 100 Details and Summary Elements
For week three of the So! Much! HTML! Challenge, we worked with the dynamic duo of details and summary. Check out the Pens from week 3, including Niels Voogt's interactive story "The Search".
Been OOO for awhile? Miss the sound of clicky-clacky keyboards all around? Oliva Ng's got you covered with a stylish gallery of mechanical clicks and typewriter dingsSponsored:
Jamstack Conf coming October 6 & 7
Join 15,000+ developers and web enthusiasts for a dynamic day of keynotes, interactive sessions, live Q&A and 1:1 networking. Hear directly from builders of popular Jamstack technologies and discuss how the Jamstack is enabling software delivery at the edge.
"Now where did I leave my keys...?" Bounce around the moon with this jaunty animated rover from Chris Gannon.
Thank You - 500: Interactive 3D Celebration
Anna the Scavenger celebrates 500 CodePen followers in plastic retro style. Hover and click around the scene to join the party!
CodePen Radio #285: AVIF
Marie and Stephen talk about adding AVIF support to CodePen Asset hosting – most importantly, how do you pronounce AVIF? What is AVIF? How does AVIF compare with WebP? And how was AVIF support added to CodePen?
Neon "Open" Sign
Josh Werner's spot on CSS + JS recreation of a neon sign looks just like the real thing, complete with little flickers.
Only CSS: Umbrella is Gone
A parade of multicolor umbrellas drift away into the sky in this serene CSS animation from Yusuke Nakaya.
Toon Fire Shader
Yugam sets the browser ablaze with three.js. Pop open the controls in the top right corner to change the size and color of the fire.
Passing Time (2020 Update)
The hands of a clock sweep through a mess of shapes in this "fun little experiment using matter.js" from Daniel Givens.
SVG Jigsaw Solver (Drag'n'Drop version)
"Give it a scroll, and drop in your own image if you fancy it". Charlotte Dann's generative art jigsaw experiment automatically solves a puzzle as you scroll.