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:

More Issues

This week: Sweaters, Shibas, and Sweets

Holiday CSSweater Generator

Let Adam Kuhn knit you a CSSweater in a holly-jolly color combo, or flip the switch and check out Dark Mode.

Testing your way, Coded AND Codeless.

Super-fast authoring. Amazingly stable tests. Your way—coded, codeless, or both! Capture a stable test in minutes!

The Long and Short of CSS Flexbox Container Properties

Sharkie shares a beginner-friendly primer on the ins and outs of container properties in this tutorial post on dev.to.

Interactive Hippo Button Tutorial

Mariusz Dabrowski shares the full scoop on the creation of this adorable hippo button, from the thought process through the illustration to the code in a generously detailed post.

#CodePenChallenge: :nth-child

We saved the toughest challenge of 2019 for last! December's challenge is all about CSS with strict limitations. For week one, we asked you to style a Pen with :nth-child and it's relatives ONLY. Check out the Pens from the first week, including Ryan Mulligan's "0123456789 Rhymes".

Netlify

Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

Candy Cane

Dan Wilson gets into the holiday spirit with an impressionistic candy cane, build with CSS motion path.

Flow

"Flow visualization. The gradient being used is the gradient of a certain angle, but the flow lines themselves form coaxial circles. Dragging with the mouse will seed new particles" from Peter Liepa.

CodePen Radio #247: Ads

Chris and Marie talk about the various ways sponsorship and advertising has changed over the years at CodePen.

Animated Atom SVG

Brad Frost continues a series of "making something every day in December" with an animated SVG atom. Check out the making-of post, complete with a custom-styled embedded Pen.

Working with 2D and 3D Scenes and Geometry in Forge Viewer

On the Autodesk community blog, Petr Broz demonstrates how to "traverse the hierarchy of model elements, access or manipulate individual geometries, or compute their bounds" in 2D and 3D, with lots of embedded Pens along the way!

Mochi Shiba

"Using SVG and VueJS to generate Mochi Shiba pop-up effects when hovering a container. I drew the Shiba in Illustrator with SVG and had a load of alternate parts for the Mouth/Eyes/Ears ... then I use VueJS properties and CSS to show the correct SVG parts" from Simon Goellner.

Hey Felix

Introducing Felix, from allemmedup: "Felix is an interactive digital assistant sure to either brighten your day, or irritate you to the extent of your sanity. It’s up to you which way the tides will churn."

A Literal CodPen

Jon Kantner brings the most common CodePen typo, CodPen, to life with a real cod-Pen. For another laugh, check out codpen.io.