Hey hey hey!

Welcome to another edition of the Top 3 in Tech newsletter. Some exciting updates to popular tools this week, including a great new collection of amazing components to use in your next React project.

Let’s get right to it 🔥

1. Svelte 4

JavaScript is pretty great. It’s flexible, powerful and has spawned many awesome frameworks in the last decade.

One of those is Svelte. I’m a big fan of Svelte because it embraces everything I think a JS framework should: a great out-of-the-box experience with batteries included, that encourages simple code without limiting the author. When Svelte 3 was released (over 4 years ago) it was a breath of fresh air in the JS framework world.

Since then, the team has been busy working on SvelteKit: the metaframework (like NextJS for React or NuxtJS for Vue) built on top of Svelte, making it even easier for developers to build full-stack web applications. SvelteKit launched version 1.0 (officially marking it stable and production-ready) only at the end of last year, so there hasn’t been a whole lot of exciting new features in Svelte itself.

That’s also the case for this new Svelte 4 release. It has a tighter design, better developer experience and improved performance, but most importantly, it’s laying the groundwork for the next generation of Svelte - Svelte 5 - that the team is hard at work on.

Either way, I thought the news was worth sharing to show that Svelte is still moving in the right direction and has a bright future ahead of it.

Read the announcement blog post here.

2. Figma Dev Mode

One recent announcement that is very exciting on the other hand, is the new Dev Mode that Figma just released. Figma is a browser-based design tool, and it has quickly become the industry standard for collaboration between designers and developers. And for good reason!

Figma is awesome, but it’s always felt a bit awkward in some of the “handover” features. It’s important to remember that a static Figma design is only the beginning, and there will always be a need for developers to actually implement those designs. And that has just gotten sooo much easier 🔥 (and yes I like the 🔥emoji, sue me)

With an integrated Figma for VS Code extension, easy access to (actually semi-useful) CSS or SwiftUI code + the use of variables to streamline design systems, this new mode is looking great for both designers and, especially, developers. Exciting times!

Check out the landing page here to learn more about Figma Dev Mode.

3. Shadcn UI

The final pick for this week is an awesome compilation of sleek, accessible React components. It might look like a component library (like we’re used to from Bootstrap, MaterialUI etc.), but it’s actually not - instead, Shadcn UI is a collection of re-usable components that you can copy and paste into your apps. And no, I don’t know how to pronounce the name either 🤷‍♂️

What’s cool about this is that you gain total ownership over the components you add to your project. You’re not installing a giant npm package with every component under the sun that you might not need (or that will be impossible to style to fit your design). Instead, you cherrypick the exact components you need (like an Accordion, Dialog and Tooltip for example). These components are then kept in a folder in your project, so you can use them as-is, or change them as much as you like to fit your needs.

I love this approach because it doesn’t lock you into a specific system. And at the same time, the default styles are quite neutral and good looking for most projects - giving you a great starting point to tweak off of.

I highly recommend giving it a shot for your next React project - and feel free to let me know how you like it!

Get started with the official documentation here.

​That's all for now! See you in 2 weeks ✌️

If you did, why not share it with your friends! Either by forwarding this email, or by posting about it on LinkedIn, Twitter or Facebook. You can also simply copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow.

— Mads Brodt