View profile

#54 - Waddling SVG Penguins, Road Bikes, and PodRocket!

#54 - Waddling SVG Penguins, Road Bikes, and PodRocket!
By Alex from Frontend Horse • Issue #24 • View online
Adorable SVG animations, a detailed :has() article, a great color tool, and my appearance on the PodRocket podcast!

I got to speak with the wonderful folks over at PodRocket! It was a really fun conversation and fun to talk about this community and my work at Prismic.
Give a listen and let me know what you think!
PodRocket - Frontend Horse with Alex Trost
PodRocket - Frontend Horse with Alex Trost
Join us as we talk to Alex Trost, creator of Frontend Horse and Developer Experience Team lead at Prismic, about creative coding, building communities, and what all this has to do with horses.
podrocket.logrocket.com  •  Share
There’s also a video recording if that’s more your thing!
CodePens
Point and Click Penguin
Point and Click Penguin
This is easily the most adorable thing I saw all week.
Click anywhere on the screen and watch the little penguin waddle over, then jump for joy on arrival.
Creator Masahito is using SVG sprite sheets to handle these animations. If you want a peek behind the curtain, add this line at the end of the CSS:
.penguin_wrapper {overflow: visible;}
codepen.io  •  Share
Road Bike
Road Bike
I really like the way Tom Miller animated these speed lines as if they’re dripping off the back.
Great use of dash offset, even in the subtle road lines below.
codepen.io  •  Share
Articles
Our friend Alistair details how he created generative SVG page dividers. His beautiful site has a fun mountain theme, and these rocky borders fit perfectly.
alistairshepherd.uk  •  Share
I love all the content that’s coming out around the :has() selector. It’s helpful to think of it as a “parent selector,” letting us style the parent based on the children.
This robust article explains the selector and gives use-cases and examples.
ishadeed.com  •  Share
Anderson Mancini walks you through the process of creating his Blender to Three.js project, Windland.
tympanus.net  •  Share
Figma, Illustrator, Sketch, and other design tools all handle SVGs a bit differently. This article shows how each tool handles tiny decimal values by rounding at different places.
It’s interesting, but I wouldn’t worry too much about the results. Figma is still a great tool, and you’re probably not going to notice when looking at the SVG itself.
bjango.com  •  Share
Resources
Huetone • Make colors accessible
Huetone • Make colors accessible
I’ve been sharing accessible color tools the past couple of weeks, and here’s another that someone shared in the stream chat this week!
I love how this one has built-in color palettes from Chakra, Tailwind, Stripe, and many more.
huetone.ardov.me  •  Share
Chalk.ist - Create beautiful images of your code
Chalk.ist - Create beautiful images of your code
I’ve been using Carbon to make nice looking code images for a while, but I like seeing competition in this space.
This one isn’t as fully featured as Carbon, but you might like the shiny effect.
chalk.ist  •  Share
Community Question
Last Week’s Question
You’ve been given a time machine to go back and stop one CSS feature from ever being invented. Which do you stop?
Adir would change color to text-color and background-color to color.
Temani would ditch !important, while Caroline would change how max-width works and make grid-template-columns shorter to type.
Adam points out that “will-change often does more harm than good.”
Amit would change the default for transform-style, Brent would reverse flex-direction, and Thomas would improve how multi-columns work.
Brandon and David have my vote: make border-box the default from the beginning.
What’s awesome is that the CSS Working Group has its own list of Mistakes in the Design of CSS! Thanks to Ben for sharing.
This Week’s Question
🐴 Frontend Horse
❓Weekly Community Question❓

What CSS property do you think more folks should know about?
Head over to Twitter to give your response and I’ll include your answers in next week’s newsletter!
So Long, Partner
We’re about to hit 5,000 subscribers! I can’t thank you enough for being one of those people.
If you know someone who would enjoy this newsletter, let them know, and they might be lucky number five thousand.
Huge thanks to Ryan Trimble for buying me a coffee last week! I greatly appreciate the support. 💜
Your neigh-bor,
Alex
Did you enjoy this issue?
Alex from Frontend Horse

A round-up of the web's best CodePens, websites, and articles, plus the latest Frontend Horse content!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue