🔥 Svelte 5, Graphite, Easy CSS animations

Hey there!

Another week, another fresh issue of the Top 3 in Tech newsletter. Some exciting updates and sweet new tools to make our lives easier this time around - so let’s get started:

1. Svelte 5

Svelte is a component-based JavaScript framework, much like React and Vue - and it’s a pretty cool one. Where Svelte is different is that it’s also a compiler, which gives it some unique advantages in terms of how developers can write Svelte code which then gets transformed to vanilla JS before being sent to the browser.

Frameworks like this tend to get major updates quite sparingly. But if you’ve been following the newsletter for a while, you’ll know that Svelte 4 was just released a few months ago. So why are we already talking about Svelte 5, you ask?!

Well, Svelte 4 was more of an incremental, performance-focused update with no new features. Svelte 5 on the other hand (while not officially released yet) has been teased by the team to bring one particularly exciting new feature they call Runes.

Runes are basically a set of functions to make working with reactivity easier. The 4 runes are $state, $derived, $effect and $props. And if you’ve ever worked with React or Vue, those will seem quite familiar to useState/useEffect in React, ref/computed in Vue etc. It’s a major update to the reactivity system in Svelte, and while the current system seems amazing and easy at first glance, it actually has a lot of intricacies and “gotchas” that are hard to reason about. I think these new runes will make it a lot easier for developers to transition into Svelte from other frameworks, which is a very exciting development!

There’s no official news on the release date yet, but check out this blog post or watch this video here to learn a lot more about runes and why it’s an exciting new improvement for Svelte:

2. Graphite

Another interesting tool I came across this week is called Graphite. You can think of Graphite as a new workflow for using Git more efficiently when working in teams - allowing developers to move faster and spend less time worrying about pull requests, commits and branches.

It’s a quite interesting approach to be honest, because the “standard” Git workflow usually goes something like this:

1. Create a new branch

2. Commit some changes

3. Make a PR to your team

4. Make changes based on the feedback

5. Get final approval

6. Merge the entire PR with all the changes

This seems fine, and it’s what we use at my company - and I never really thought to consider alternatives, as it always seemed “good enough”. But what Graphite promises is a much simpler workflow where you make changes first, and then consider how they should be merged based on what other changes they relate to. They also provide a dashboard and code-review flow that seem miles ahead of what we’re used to from GitHub.

I’m not entirely sold on the full idea behind Graphite yet, but it’s very interesting to see someone challenging the status quo and innovating in this space (+ they have a super cool VS Code extension!). So if you’re interested, learn more on their homepage or watch this more detailed explanation and demo:

3. Easy CSS animations

The final pick for this week is a super simple website with copy/pasteable CSS animations. What’s not to love?

So whether you’re looking for some inspiration to spice up your portfolio or have been struggling to create the right bouncing animation for your buttons, check out animista.net for lots of sleek CSS animations you can easily implement into your own projects 💪

That's all for now - thanks for reading! 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 Twitter, LinkedIn, 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

---

Powered by beehiiv