The
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 21st: Playable Burger Drums, Directionally Aware Buttons, and Slider Styles

Auto-translate MongoDB queries

With Studio 3T convert MongoDB, aggregation, & SQL queries to Node.js, Java, Python, C#, PHP, Ruby, & the mongo shell language in one click.

Beat Burger

This one goes out to everyone who's ever wanted to play drums on a burger. Steve Gardner cooked this musical marvel up with Alex Trost on Component Carousel!

Rage

Tiffany Choong illustrates & animates the transformation from demure Retsuko to her heavy metal alter ego Aggretsuko with CSS.

#CodePenChallenge: Shopping Layout

For week two of the Layouts challenge, we went shoe shopping! Check out the Pens from this e-commerce layout challenge, including ales_codes' bright & bold design.

Lost at Sea

dilums recreates the welcome screen from the game "Overboard" with Pixi.js.

CodePen Radio #320: Andy and Una from Google’s Learn CSS Project

Chris Coyier is joined by Andy Bell and Una Kravets to talk about Google's "Learn CSS" project, which includes tons of embedded Pens to help new developers and seasoned developers who are new to CSS get started.

Generative Quadtree Based Grid Layouts

"Generative layouts created using random quadtrees, very much inspired by Pentagram's work on Graphcore's branding" from George Francis.

Diamond Slider

On their latest livestream, The Keyframers animate a real gem of a slider inspired by a Dribbble shot by Ahmad Sulaiman for Plainthing Studio. Check out how the diamond reacts to the speed of your slide!

Saul Bass-ified

Emmanuel Meinike takes inspiration from the hand-drawn motion of Saul Bass title sequences in this charming retro Pen. Press space to regenerate a new set of shapes, or C to recolor the scene.

Pokemon Battle (Pure CSS)

Elizabeth Diang animates a Pokemon battle with CSS, inspired by an illustration by leaphere on Instagram. "It was fun to try new techniques, including mixins for building 3D shapes, and box shadows to enhance details."

Color Palettes

Astap showcases a set of harmonious color palettes in a tetris-like display.

Directionally Aware CSS Buttons w/ React

Hover over these "directionally aware" buttons from any direction and the fill animations will react based on where you hover. Built by Jhey Tompkins with React.

Styled Native Input Range #46

Ana Tudor reworks a skeumorphic slider from 2015 with 2021 technology. Check out the Pen description for an in-depth look at what's changed and how it works now.

Netlify

Connect your repository. Add your build settings. Deploy your website. Netlify is the fastest way to get a site live and supports any type of site with a Jamstack architecture. With static global CDN hosting, it is the fastest possible way to host.