Newsletter • Issue 53
Text Effects, SVG Generators, and Accessible Colors!
Before we jump in, I wrote an article on productivity for developers you might find useful!
14 Actionable Tips For Developer Productivity — prismic.io
I touch on everything from coding, planning, learning, and taking care of what’s most important.
It’s everything I know to be a developer who gets things done without burning out.
Resources
Frontend Practice - Updated! — www.frontendpractice.com
This excellent resource from Kyle Shook has you recreate real websites to learn practical frontend skills. It’s been updated to have 30 examples and difficulty levels!
Reasonable Colors — reasonable.work
Reader Matthew Howell submitted their accessible color system. I love resources like this that make accessibility easy to get right.
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
fffuel - generators for gradients, patterns, backgrounds & decorative graphics — fffuel.co
I shared fffuel months ago, back when it had about six or seven cool generators. Now that’s grown to over fifty wonderful designs you can grab and use on your site.
I especially love that the creator, Seb, gives an explanation of how each generator works.
Simple visuals and definitions to help anyone understand some key UX best practices.
I’m no UX expert, so I love how approachable it is. Plus the website design is gorgeous.
Build Excellent Websites — buildexcellentwebsit.es
Andy Bell created a great website that states his approach to building excellent websites. The website itself shows the power of the methodology, and he’s included the key resources on the page.
Articles
The Front-End Developer’s Guide to the Terminal — www.joshwcomeau.com
This is a robust guide to something that so many developers take for granted! Tutorials and docs always assume you know how to use your terminal, but there’s a great chance you’ll learn something from this wonderful guide.
This is an excellent case study detailing just how the team at Studio Immersive Garden made an incredible vineyard experience using real maps and great particle effects.
Inspiration
Pepper ! — pepper.corentinbernadou.co
I love this wiggly typographic animation! There are lots of divs and a bit of GSAP to make this fun and stylish experiment.
Community Question
Every week we ask the community a question on Twitter!
Last Week’s Question
If you could add one feature to every browser right now, what would it be? (Link)
We had so many excellent responses! If the community had its way, today’s browsers would fully support:
Container Queries, scroll-timeline, CSS Houdini, Subgrid, CSS Object Model, :has(), Nested CSS, Web Share API, Web Push API, WebGPU, and a few more!
I hadn’t heard of WebGPU, and never considered Darin’s idea for the “ability to animate width/height performantly to any value (including “auto”) without needing to hack transforms or use JS”
Thanks to Darin, Cassidy, Adhocracy, Adam, Kilian, Arno, Chris M, James, Martin, Mac, Brent, Ben, Jace, Temani, Jono, and Chris B!
This Week’s Question
[tweet https://twitter.com/FrontendHorse/status/1515372478264193031\]
Head over to Twitter to give your response and I’ll include your answers in next week’s newsletter!
So Long, Partner
That’s it for this week!
As always, I love having you along for the ride. If you’re not already part of our friendly Discord community, trot on over! If you’d like to support the newsletter, feel free to buy me a coffee
Until next time!
Your neigh-bor,
Alex