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.

May 9th: CSS Sorting, Generative Paintings, and Buttons 11 Ways

microvania

Kit Jenson continues a series of playable Pens with "A CSS drawn metroidvania style game meant for speedrunning."

CodePen Radio #366: Paulina Hetman

Creative coder Paulina Hetman is our guest on this week's episode! Paulina uses her skills as an illustrator and all-around web developer to make ideas come to life. And she doesn’t keep all those ideas to herself — she spends time educating other budding developers both professionally and by building courses and developer quizzes as Pens!

Organize your content for the world

74,000 + developers & marketers use Storyblok's CMS to deliver powerful content experiences on any frontend: Websites, eCommerce and more.

CSS-Only Pokémon Quest Icon Sorter

"I challenged myself back in 2018 to make every single Pokémon Quest icon with CSS only. I finally finished in 2022! Each icon is fully responsive and there's even a CSS-only navigation to sort by type". From Gabrielle Wee.

Deep Dive into Text Wrapping and Word Breaking

Will Boyd takes us through "the various ways we can control how text wraps (or doesn’t wrap) on a web page" in this thorough tutorial with tons of helpful embedded Pens.

Buttons: A Retrospective

Mike Mai looks back on a decade+ of button design & development in this interactive retrospective. "Try using both the mouse and keyboard to interact with all the buttons, and see how design aesthetics changed over time. Use the OG switch in each figure to see the buttons in original color scheme."

Customizable link spinner effect

Build your own "hacker-style" text effect with Josh Dillon's fun tool. Crank up the solve time for maximum drama!

Tom Hinton on CodePen

New CodePen community member Tom Hinton makes a dazzling debut with a series of kaleidoscopic works of shader art.

smolCSS

Stephanie Eckles demonstrates the amazing things you can do with just a little bit of CSS in this compendium of "minimal snippets for modern CSS layouts and components".

Mondrian's Algorithm

Create a new geometric painting with the click of a button in this interactive Pen from Sanja_kaz, inspired by the paintings of Piet Mondrian.

Wavy Upload Button

UI-delight master Aaron Iker shares an upload button that bounces and waves along with the loading animation inside it, then finishes with a cheerful "Done" confirmation message.

ThreeJS Toys - Neon Cursor

Kevin Levron brilliantly lights up the browser with a color-changing Three.js cursor trail.

#CodePenChallenge: Bump

The May theme is "Get Moving", and we started with a bump! Browse our collection of creations from week one, including Pens by Sicontis, Yeshua Emanuel Braz, Joshua van Boxtel, and Ian Woodard.

Building a Like Button with Cloudflare Workers

Andrew Walpole gets deep into the details of how to create a "like" button that stores a like count using Cloudflare's Key/Value feature. Check out the embedded Pen with a heart the gets bigger with each like!

Azure Static Web Apps Anniversary

Come join us to celebrate the one-year anniversary of Azure Static Web Apps! Connect with others in the developer community and increase your Static Web Apps skills in a fun, collaborative way.

FLIP Order

Team CodePen's very own Stephen Shaw shares a "Simple experiment using GSAP, CSS Grid and the order property to move items around." Click any two boxes and they'll trade places with style!

Chris' Corner

Most developers spend a lot of time in the terminal. You just can’t avoid it. That’s how development environments are spun up. That’s where npm packages are pulled from. Many developers do their version control there. It’s just part of the deal.

It’s probably smart to be at least fairly proficient in there. I say that almost in a pep talk to myself. In my decades as a computer person, I still don’t feel particularly strong at the terminal. If there is some other way to accomplish a task, typically involving a UI, I do that. For example, if I need to edit my .bashrc file, I know I can do code ~/.bashrc to open it up in VS Code (I just tested that and got it right on my third try). But, I’m so clumsy doing it that generally I just go to my Finder, navigate to my home user directory, press Command-Shift-Period to reveal hidden files, and drag the file to VS Code. Slow, but comfortable for me.

I concede the fact that the terminal is actually a pretty useful UI for a lot of developers. You type commands in a very powerful place that can do just about anything your computer can do, the computer does those things, and you (usually) get some output about it.

The fact that the input mechanism is consistent and unlimited is a strength. It’s that output that often gets me. I usually find the output horrific. Sometimes there just is none. At its best, it’s somewhat human and has reasonable and useful information. But I’m expected to read it, and it completely ignores millennia of typography science about readability. Most commonly, it’s a firehose of text. Text coming through so hot and fast that I can’t imagine being able to make sense of it.

Remember the “digital rain” in The Matrix? (You’ll find a lot of examples on CodePen.) It was kind of a tongue-in-cheek joke that anyone could actually understand that. Neo could, but he was an anomaly that could also dodge bullets, sooooo. That’s what terminal output often feels like to me, and when I see a developer look at that firehose and somehow immediately see the three relevant words they are looking for in a gosh-darned haystack of words, it blows my mind.

My mind goes: why can’t this be better? Why can’t error messages look like error messages? Why can’t things I’m supposed to read have typography meant for reading? Why can’t code samples be output in such a way that they are designed to be copy and pasted? Why can’t I see my current path information and directory contents without having to constantly ask for it? Why can’t I output an image? Why is the scripting language for this so inscrutable?

There have been some light improvements over my time to this world. I used to use the Terminal app built into macOS, but then along came iTerm with support for basic UI concepts like tabs and split panes (my god, smh). But of course, you can’t count on everyone having iTerm (or a Mac), so usually split-pane stuff is done by something like tmux, which I’m very glad exists, but oh god it feels so primitive.

I so want my multiple running terminals to have a more beautiful and usable design!

It was interesting to see Vercel get in the game with Hyper. I love the focus on simplicity, beauty, and extensibility, but it hasn’t hit home for me quite yet. I find it more interesting how apps like VS Code and Nova have put in terminals right into the code editor experience. I’m not quite at 100% usage of those yet, but I am using them for “simple” projects, almost entirely because of the fact that when I open them it puts the terminal at the correct path for the home of the project. I appreciate stuff like Oh My Zsh having cool themes, but it doesn’t really help me with any of the fundamental trouble I have with feeling productive in the terminal.

Maybe the world could use a totally new take on the terminal. I’m not signing up for the job, I’m just saying. Maybe a whole new modernized language? Maybe it’s JavaScript-ish because JS is eating everything? Maybe the output isn’t isolated to text, and even the text allows for quality typography? Like, uhm, a web browser. Maybe the UI can be super cleaned up and take cues from the last couple decades of UI work. Could a terminal feel more like Slack? Fig is doing some neat stuff augmenting existing terminal apps with layer-on-top UI stuff. Warp is doing cool stuff with output looking... actually kinda good? Still, I’d like to see someone go even bigger.