The 100th issue of The CodePen Spark went out this morning 🎉

That's means it's been 100 weeks since we started sending a weekly newsletter packed with front-end inspiration to hundreds of thousands of devs around the world. Whew!

Though nothing at CodePen is a true solo project, I think it's fair to say The Spark is my domain — I select the content for it and write it each week. It's my favorite thing I do at work.

So, I'm taking this milestone as an opportunity to share a little behind-the-scenes look at how The Spark is made, and reminisce a bit.

The Spark Alumni

I can't celebrate a milestone like this without a shoutout to two CodePen alumni: Tim Holman, who came up with the idea and built the original system we used to create and send the newsletter. And Jake Albaugh, who built the CMS and email system we use to create and send The Spark today.

You can hear Tim talking about the very earliest days of The Spark in 📻CodePen Radio #113: The CodePen Spark, which aired the week after the first issue went out.

Later, Jake was on the show to talk about designing and building the ETL system we use for The Spark in 📻CodePen Radio #157: ETL.

Gathering Sparks

The goal is to spark people's minds with inspiration or new information that makes them want to create, or learn something new. I keep that in mind as I select the content for each issue.

Every issue of The Spark is a mixture of what was popular on CodePen through the week, and things that I feel should get more attention.

"css (cascading silk screen)" by Daniel Warren in Spark #84

To keep things fresh, I try to keep it scoped to things that were created in the week since the previous Spark went out.

The Spark is also a chance to show off the work of the CodePen community at large — I love finding Twitch streams, posts on personal websites, and Medium and Dev.to posts to share.

David Gwyer's Medium post "Level Up Your CSS Selector Skills" in Spark #80

Sometimes I'll include things that we didn't pick for the homepage, but wanted to. Some front-end experiments need a little extra context. For example, a Pen where all the interesting stuff is happening in the console. Other things need a bit of "fair warning", like when they ask for webcam access, or automatically play sounds or music. We're not able to add that kind of "heads up" to the homepage grid, but we can include it in The Spark.

Captions

Captions are my chance to zoom in to the details and share tidbits that might not always come through on the home page. I can use a caption to highlight interesting technologies or techniques, or give the backstory on where a design idea came from.

I like to use the creator's own words (from the "Description" of the Pen/Project/Collection) when they're available. Sometimes a good description is what makes me choose something for The Spark, so don't forget to fill in that field 😉

And of course, I write a lot of captions from scratch. Here's my favorite I wrote this year, for Cassie Evans' "Shy blob - Face detection" in Spark #82.

"Cassie Evans' lil blob dance like no one is watching — but *only* if no one is watching! If you peek (through your webcam) this shy blob will stop boppin' and start blushin'."

Titles

I love writing the titles for each issue.

Usually, I go with 3-part alliteration, like "Melody, Maps, and Mood". But if I can't find a starting-letter match across 3 different entries in the issue, I go with something thematic that ties the week together, like "Time, Perspective, and Expansion".

And, like every headline writer, I've learned some lessons about truncation the hard way....

"Buildings, Bouquets, and Butt....." wasn't exactly the tone I was aiming for.

Tools

I have a couple tools that are indespensible for putting together The Spark.

Slack

Through the week, I save things I'm considering for The Spark in our #newsletter channel in our internal Slack. Since CodePen is fully remote we all live in Slack, so it felt like the natural place to gather up our favorites from the week. I use the "pin to channel" feature to create a list of links right inside the channel.

Images

For still screenshots, I use the built-in macOS screenshot feature and crop it down to size in Preview. Nothing fancy!

Gifs are where it gets tricky. Getting both a good loop and a small filesize presents a challenge. Luckily I have a great tool for that.

cutting a loop with Giphy Capture

I use Giphy Capture. The controls for creating a loop are very intuitive, and it has great export options. I export the gif at a low frame rate to keep its size small. Then, I run it through ImageOptim to compress it further.

ETL

When I'm ready to add an item to The Spark, I post it through the CMS Jake created.

The great thing about this setup is that once the issue is complete, it generates JSON that includes all of the content I manually added to the issue, plus every upcoming event from the Meetups page and all of the current listings from our Jobs board. I used to have to copy those all in manually, which was really slow and typo-prone.

To Hundreds More!

Though 100 is a fun round number, it still feels like we're just getting started with what The Spark can be. I'm looking forward to making new discoveries and sharing new sparks of inspiration ✨

I'd really love to share more long-form writing about front-end development with embedded Pens, and more collections. If you're making those things, let us know! You can share them with us on Twitter @CodePen, or in our Spectrum community at spectrum.chat/codepen.


989 0 22