Newsletter • Issue 49
Turbulent Buttons, Globby Posters, and Responsive CSS!
Live Shows
I’m always streaming over on our Twitch channel, and this week we’ve got a wonderful show planned!
This Thursday, the wonderful Kevin Powell is back to teach us to write responsive CSS the easy way!
There are a lot of tools to make our sites responsive, but without a good approach, we can get lost in a mess of media queries and breakpoints. If anyone can help us make responsive CSS easier, it’s definitely Kevin!
Catch the show live Thursday, March 24th, 12:00 PM EDT on Twitch.
CodePens
Union - Generative Posters — codepen.io
It’s been wonderful to see our friend George Francis grow as an artist over the past year. His style experiments have created so many delightful pieces, and I love to see him continue to try new things.
In this piece, he’s creating “globs” with two circles and two Bézier curves. I thought he’d be using a pre-defined SVG path, but he’s doing all the complex glob math with JavaScript.
Woo Descending a Staircase — codepen.io
Cassie Evans puts together a lovely little demo where, as you scroll, the “WOO” appears to slide down a staircase, bending at impossible angles for text.
So how is Cassie doing it?
Well, the image on the right gives a hint. There are four divs, each with its own “WOO” element inside. Using GSAP ScrollTrigger, transform the text as the user scrolls. To see a full breakdown, comment out the overflow: hidden; on line 49 of the CSS.
Turbulent Buttons — codepen.io
A nice little demo with a fun twist. What starts as two nice-enough buttons packs a great surprise.
When you hover over each button, you get a couple of cool animations. Using Splitting.js, he slides the letters out and back in. Then a wavy, warped SVG filter makes the letters look underwater.
You might not realize that the animated button isn’t a button at all. Adam places an invisible <button> in front of a <div> styled as a button. I’m guessing it’s more flexible and lets you mess with the visuals without worrying about impacting the functionality of the <button>.
Articles
Delightful React File Structure - Josh Comeau — www.joshwcomeau.com
This article by Josh Comeau is a wonderful walkthrough of how and why he organizes his projects the way he does. With interactive examples, he shows
Touches on his distinction between ‘helper’ and ‘utils’ folders.
He even shares a handy npm package he made for creating new react components.
Blue people and long limbs: How one illustration style took over the corporate world — webflow.com
A wonderful deep-dive into the flat, long-armed illustrations that have taken over corporate design since 2017.
They look at the early origins in the Memphis Group, the first usage of the style in corporate design with Slack and Facebook, and the explosion that followed.
Resources
CodeSandbox announced their new online IDE, letting you run your development server in the cloud. They’re taking the Figma approach and bringing the cloud-based, ‘multiplayer’ experience to your editor.
Figma revolutionized design collaboration, and I think these online IDEs will do the same for development.
The best part is that it removes the need for expensive machines for web development. When the real work is being done on a server, $150 Chromebooks suddenly become viable dev computers.
They’re even working on a native iOS app. It’s really exciting to think that you’ll be able to do full-scale development on an iPad.
This is a pretty cool resource if you’re looking to improve your general CSS skills. 100 different exercises that cover animation, illustration, interaction, and a whole lot more.
So long, partner
Thanks for riding with me, partner.
It was the first day of spring this week, and I’ve gotta say I’m beyond excited for more sun and warmer weather. I’m starting to go for walks again, and I hope you find yourself outside more, too.
I’m grateful for a lot, including the chance to write this little letter each week. I appreciate your reading. 💜
Your neigh-bor,
Alex