Newsletter • Issue 54
Waddling SVG Penguins, Road Bikes, and PodRocket!
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.logrocket.com
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.
There’s also a video recording if that’s more your thing!
CodePens
Point and Click Penguin — codepen.io
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;}
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.
Articles
SVG generative mountain ridge dividers
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.
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.
Case Study: Windland — An Immersive Three.js Experience
Anderson Mancini walks you through the process of creating his Blender to Three.js project, Windland.
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.
Resources
Huetone • Make colors accessible — huetone.ardov.me
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.
Chalk.ist - Create beautiful images of your code — chalk.ist
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.
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
[tweet https://twitter.com/FrontendHorse/status/1517901626773811201\]
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