Let's Build UI Newsletter #3

Welcome to issue #3!

CSS Motion Path, Waku, the top frontend tools of last year and more!

🚨 New Content Alert

An article all about CSS Motion Path was published a few days ago, with three examples of how to use it in What is CSS Motion Path. This technique can come in handy any time you want a low-code way of moving elements along an SVG path.

Many thanks (again!) to The Collective Newsletter by Codrops for featuring the article.

➕ What's New in the Frontend Universe

On the heels of the React Server Component buzz from last year, we've started to hear about new frameworks that make use of Server Components, like Waku. It seems that aside from Next.js, there are alternative options if you want to experiment with them.

Speaking of Server Components, the Syntax Podcast just did an episode about them last week that's worth checking out.

📚 Interesting Reads

1. We all use tools every day to do our jobs. Be sure to check out the Top Front-End Tools Of 2023 if you're curious what you might have missed out on last year.
2. In 12 Modern CSS One-Line Upgrades, Stephanie Eckles presents 12 powerful CSS properties you can use today to level up your project.
3. Have you ever wondered how web development blogs display live code editors? You can use CodeSandbox embeds, but did you know you can also build your own using the same underlying tooling they use? Learn more in How to Use Sandpack for Code Demos.

🧰 Cool Tools

SVG Path Visualizer

Enter an SVG path data (the string inside the `d` attribute) to visualize it and discover all its different commands.

SVG Path VisualizerMathieu Dutour

Polypane, The browser for ambitious web developers

Build responsive, accessible and fast sites with a stand-alone browser. All the tools you need in one app.

Brand kit Copy Icon as SVG Copy Logo as SVG Brand guidelines Homepage

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

UnsplashUnsplash

✨ Tips & Tricks

Some of the articles on this blog feature a lot of different animations, which look nice for many users, but not everyone appreciates them. In fact, certain animations could make your app unusable for some users, and keeping everyone in mind is a big part of what makes your project accessible.

The prefers-reduced-motion media query can help with this, which allows you to reduce animation effects and offer your users an alternative. Check out Reducing Motion in Animations to learn more.

👋 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!