Let's Build UI Newsletter #5

How to animate borders in CSS, devaluation of the frontend, AI and design systems and more!

Mar 19, 2024

2 min read

Welcome to issue #5!

🚨 New Content Alert

A few days ago, How to Animate Borders in CSS was published! This article shows five ways you can animate borders in CSS without using the border property at all, and instead use "fake" borders, outlines and even SVG to accomplish complicated animations.

Thanks to The Collective Newsletter by Codrops for featuring this article!

➕ What's New in the Frontend Universe

Storybook Version 8 was released recently, which includes built in visual testing via Chromatic, React Server Component support, UI updates and more.

The fourth edition of Eloquent JavaScript is now available! This book has been an important resource for many of us who learned JS over the last 10+ years.

📚 Interesting Reads

What we do every day as frontend developers and engineers is hard! In The quiet, pervasive devaluation of frontend, a powerful argument is made about the importance of what we do every day.
Every so often you should make sure the tools you use are actually doing what you expect. In You Probably Don't Need eslint-config-prettier or eslint-plugin-prettier, learn why these two popular integrations may not be needed anymore.
For some interesting ways to start leveraging AI in your workflow, be sure to check out AI and Design Systems by Brad Frost.

🧰 Cool Tools

✨ Tips & Tricks

Have you heard of the new CSS field-sizing property? With it, you can automatically resize text inputs, textareas and more based on the size of their content.

This usually required JavaScript before but now it's just one line of CSS.


input, textarea {
  field-sizing: content;
}

Browser support is still quite limited (only Chrome v123+) but that'll improve over time.

Check out these articles for detailed explanations.
CSS field-sizing
Field-sizing just works!

👋 The End

Thanks for reading! If you enjoyed this issue, please forward it to someone you know! If this was forwarded to you, consider subscribing!