Let's Build UI Newsletter #4
Reacting with Emojis, centering divs, the "linear" look and more!
Welcome to issue #4!
🚨 New Content Alert
A new article titled Reacting with Emojis was just published! You'll learn about practical uses of the most common React hooks, event listeners and more, all in under 100 lines of Javascript. By the end you'll have a custom hook you can use in several different scenarios.
âž• What's New in the Frontend Universe
A recent blog post from the React team gives an update on a project that's been in progress for a while: React Compiler. Manual memoization of functions and components may no longer be required once this feature becomes available. It's already being used in production on Instagram.com and might make its way into a new version of React sooner than later.
📚 Interesting Reads
- How to center a div. It's a problem we've all encountered at some point, and Joshua Comeau demonstrates many ways to accomplish what always seems to be a tricky task.
- Have you used CSS Logical Properties yet? In an article of the same name, Ahmad Shadeed explains how you can use them today, including some nice visual examples.
- There seems to be a new design trend happening lately, especially with SaaS websites. The Frontend Horse will tell you all about it in The Linear Look.
🧰 Cool Tools
✨ Tips & Tricks
Animating content when it's added to the DOM can be difficult, especially if you aren't using an animation library. Thanks to this short blog post by Stephanie Eckles, a quick and easy way to handle it with CSS only is to use an animation keyframe ending with the forwards property.
.some-element {
opacity: 0;
animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}
This approach doesn't require Javascript or adding additional classes just to handle an entry animation.
👋 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!