123
The
Spark
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.

Past Editions:

This week: Seas, Storms, and States

Procedural Mountains

Generate an inspiring mountaintop scene for yourself with Kyle Wetton's picturesque procedural Pen.

Feature Flag Management Made Simple

Easily manage and deploy features across different users or segments to get instant feedback on how customers are using it in production.

Variable Fonts Experiment

Supremo shares two cool image carousel designs that take advantage of the animatable magic of variable fonts.

#CodePenChallenge: Five Lines

It's amazing what you can do with just a little bit of code! The constraint for the second week of September's "Limitations" challenge was five lines of HTML, five lines of CSS, and five lines of JS. Check out the Pens from the challenge, including Pogany's lovely piece "5 lines of code".

CSS Empty States + Custom Properties

"Use custom properties for string values to create default/global empty state text which you can override per-component using pseudo elements (:after) and pseudo classes (:empty)". A fun CSS trick from Una Kravets.

The Bright Stuff

Stacie Arellano shares a primer on understanding web accessibility color contrast guidelines, with an embedded interactive tutorial with retro-gaming flair!

CodePen Radio #236: Private by Default

We've got a small feature update to talk about that's a big deal to some folks: private by default. Chris & Marie talk about how we added this option and the steps we took to validate and notify users about the feature.

Upside Down

Flying fish jump in and out of a dark sea in this lovely Pen from K-T.

Deet

Kristopher Van Sant shares a beautiful SVG portrait of Deet from The Dark Crystal: Age of Resistance.

Triangle Storm - Generative Art

"Click to regenerate the triangles! This generative art demo populates a 20 x 40 css grid with triangles. The chances of a triangle being displayed increase with the number of rows. If a triangle is displayed, it's given a random transparency. Upon click, the triangles get regenerated and a css animation introduces them to the dom" from Rob DiMarzo.

React for Beginners

It's extremely popular for a reason: React is a good fit for the fast, interactive, state-driven websites we're often asked to build as front-end developers. Start this course by Wes Bos to upgrade your JavaScript skills.

ThreeJS Moon – Textures by NASA's Scientific Visualization Studio

Michael Gehrmann experimented with ThreeJS and the CGI Moon Kit provided by NASA to create a rotating replica of our moon. Drag the moon to check out every side!

Old Clock

Adir-SL animates a stately grandfather clock with good ol' pure CSS.

With Your Eyes Closed

Wake a snoozing Snorlax with a Poke flute in this adorable Pen from Tiffany Choong.