Newsletter • Issue 44
Adorable Valentine's, Jello Letters, and Easy Three.js!
Web Valentine
I adore this project by Lynn Fisher and Phil Hawksworth, so it gets its own little section right at the top.
Open source, Open hearts — oss.love To show our love for the OSS community, join us in sending a valentine—a token of appreciation—to your favorite open source developers and projects.
The designs for these Valentines are delightful and punny, and that’s everything Frontend Horse stands for, so it gets our seal of approval.
CodePens
This animated CSS tiger from Tiffany Choon is just wonderful. The illustration style is super cute, and the wobbly SVG filters give the whole thing a hand-drawn feel. The click animation puts it over the top.
Jello Interactive Lettering — codepen.io
Click and drag the word to squash and stretch with delightful animation! A really fun pen from our friend Pete Barr that shows off the power of variable fonts. I love how Pete encourages you to click with the extra-large cursor.
The font used is GT Flexa, and it’s got a gorgeous website to show off its impressive versatility. The letters seem to be made of rubber with all the different ways they show it being squashed, stretched, pinched, and bent. Visit the GT Flexa site.
Super Mario Scrollable Timeline — codepen.io
Check out this brilliant scrolly timeline of the Mario series that makes our favorite plumber run, jump, and smash coin blocks.
Resources
Threeasy - Beginner Friendly Three.js — threeasy.org
I love playing with Three.js, but there’s a ton of boilerplate needed to start. That’s a lot to saddle beginners with when they just want to render their first cube.
That’s where Threeeasy comes in!
Frontend Horse community member David Fitzgibbon created this handy abstraction that handles concepts like Scene, Camera, and Renderer for you. Now you can focus on the unique stuff in your scene!
It’s a very early project but I think there’s tons of potential in this.
Svelte vs. React in 2022 — prismic.io
Our friend Ben Holmes wrote a wonderfully in-depth React vs. Svelte article that walks you through each, then compares them side by side.
Upcoming Streams
We’ve got two excellent streams this week! One contains CSS art wizardry, while the other will dig into media queries, which is deeper than just window size!
CSS wizard Amit is back to show us how he’s creating and animating stick figures with just CSS! We’ll create a horse together, learning some of his advanced techniques.
Kilian Valkhof is back to share his deep knowledge of media queries. We’ll dig into queries like reduced-motion, forced-colors, reduced-data, and dark-mode!
The shows are live on Twitch this Tuesday and Thursday, 12 PM Eastern.
What I’ve been up to
Last week, I hopped in the saddle again and made a generative landscape CodePen with pyramids and some paper textures.
Three different generative results
You can check it out here. Creating like this feels fantastic, so I’m trying to make this more of a habit.
I’ve also been streaming solo more often and loving it! It’s such a wonderful atmosphere because lovely and knowledgeable people from our community fill the chat.
So long, Partner
Thanks for hitting the trail with us this week! I’m so grateful to everyone who takes the time to go through this each week. Feel free to reply and let me know what you liked!
If I don’t see you on Twitch, I’ll see you here, at the same time next week!
Your neigh-bor,
Alex