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.

June 24th: Reflections, Variations, and Illusions

CSS Grid: Card Variations

Olivia Ng shares variations on the same HTML card with CSS grid. And for a little more variety, click the color buttons to try out different color themes.

WooCommerce

WooCommerce is a flexible and powerful eCommerce open-source plugin for WordPress. There are 450+ plugins for it, enabling things like booking appointments, memberships, subscriptions, and tons more. We use WooCommerce at CodePen to sell t-shirts and hats, managing our inventory and handling fulfillment with a ShipStation plugin.

#CodePenChallenge: Fruits and Veggies

For the third week of the Pens June 2019 Food Fight challenge, we played with fruits and veggies! Check out the Pens from the challenge, including Diogo Goncalves' "Veggielisa".

Captain Dashboard

Bob Main invites you to "become the captain of the web and explore the galaxy with 'Warp Drive' at your command! Swap between night and day mode. Control your speed! Hit the breaks! View the 'light racers'... and so much more!"

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.

Chuck Close'ish Self Portrait

Ricky Eckhardt emulates Chuck Close's iconic paint "pixel" style to produce a striking SCSS self-portrait.

CSS Masonry with Flexbox, :nth-child(), and Order

Tobias Ahlin demonstrates how to avoid the common pitfalls of a masonry-style layout with flexbox in this detailed tutorial with lots of helpful Pens.

Blob Sign Painter

Need a blob with a sign for your custom Slack emoji? Katy DeCorah's got you covered! Type a word on the sign and download your blob in handy .png format, ready to pop into your Slack.

Simple Star Rating

Mert Cukuren translates Zheng's "Rate us 5 stars" Dribbble shot to the front-end in this delightful five-star Pen.

CodePen Radio #226: New Export

Stephen talks with Marie about how we updated and improved our exporting function on CodePen and talks about a possible future Pro feature that could come from the changes we made.

GLSL: Cube Environment Reflections

Liam Egan shares another GLSL marvel! Open up the dat.gui controls and play with the sliders to change the object, its lighting, and its environment.

CSS John Wick (Keanu Reeves) Portrait

John Wick is in your browser — hope you're ready! This CSS portrait from Malaika Ishtiaq is staring into your soul.

Interactive 60% Keyboard

James Holmes shares a super-realistic CSS rendering of a mechanical keyboard. Click those keys!

Ball Color Optical Illusion

Did you see that ball color illusion going around Reddit and Twitter? They're all the same shade of brown! Team CodePen's Cassidy Williams recreated it with SCSS in this mind-boggling Pen.