Dev Roundup, Mar 2024

Around the Web 🕷

Aceternity UI

My colleague José shared this UI library with me, and it's really something else. It breaks the mold for UI libraries by providing components that are flashy, animated, and sometimes over the top interactions. Whatever your opinion may be on some of these effects, this library is undeniably eye-catching.

Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript.

Optimizing Javascript for fun and for profit

If you're a Javascript developer with any interest in performance optimization, this post is a goldmine. It details 13 common performance pitfalls, and includes optimizations with runnable examples for support.

Grid Item Reveal Animation on Hover | Codrops

My company Metalab recently underwent a gorgeous website and brand overhaul. The website animations make quite a statement, so much so that developers are already creating tutorials to achieve similar effects. Take a look at the real deal here, and learn how to build something similar below.

A recreation of the grid item reveal animation on hover as seen on the website of Metalab.

March 13, 2024

Onest + Cal Sans Fonts

A couple geometric sans serif fonts I've been loving lately.

From thin to extra bold, Onest is designed as a hybrid of geometric and humanistic grotesques. Onest is suitable for reading long texts from the screens of any

The home for our Cal Sans font. Contribute to calcom/font development by creating an account on GitHub.

This Pattern Will Wreck Your React App's TS Performance

I've seen this pattern in the wild and not thought much about it. As a bit of a spoiler, it turns out interface extends is generally faster than &. See the details in Matt Pocock's post below.

Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.

March 25, 2024

Some Fave Tweets 🐦

This shows a seemingly complex animation being broken down into discrete and straightforward(ish) steps. A really nicely illustrated look into an effective problem solving approach -- plus I'm a sucker for pixel art.

Here is a QUICK explanation for my procedural animations that several people asked for. Hope it helps! #gamemaker #procgen pic.twitter.com/5jTc5LbZJf

— RujiK (@TheRujiK) March 2, 2018

This website uses a single font-size throughout, and it looks so dang nice!

Currently obsessed with the single font-size aesthetic of @emilkowalski_'s blog 👌🏻https://t.co/FLJsZ6auQt pic.twitter.com/OSDXsCjzKR

— Adam Wathan (@adamwathan) March 22, 2024

@j3yy with another display of UI wizardry. This time making an absolutely delightful input with controls. Full codepen here

the little details™

Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬

.character {
transition-delay:
calc(sin((var(--index) / 12) * 45deg) * 0.475s);
} https://t.co/ttBoPP44w0 pic.twitter.com/ajAl564U78

— jhey ▲🐻🎈 (@jh3yy) March 8, 2024

This is a good reminder of how much can be accomplished by just using the platform™.

*slaps roof of car* this little input can fit so much UX in it pic.twitter.com/8uFZzj8tYn

— Ryan Florence (@ryanflorence) March 3, 2024