Loading Data and Remix Updates

Loading data: but where should we load it from?

Adam Rackis (of Spotify) writes a really interesting article on not how to load data (we all know many ways to do this), but rather where to load data. Also, this is framework-agnostic, so it applies just about everywhere.

What it all boils down to is that streaming is a really good way to get the best of both worlds when it comes to displaying something quickly to the user but also waiting for the full content to load from a slow API on the server. A lot of frameworks already have this in place, so it can be used today. But what if you can't use it?

Adam explains that where you may need to call data from a slow API from the Front End of your website, you can use prefetching to tell the browser as early as possible that you're going to be calling specific links, so it can make the connection early and therefore load the data much more quickly.

Given the following JS:

1⁠useEffect(() => {
2⁠  fetch("/api/books")
3⁠    .then((resp) => resp.json())
4⁠    .then((books) => {
5⁠      setBooks(books);
6  ⁠  });
7⁠  fetch("/api/books-count")
8⁠    .then((resp) => resp.json())
9⁠    .then((booksCountResp) => {
10⁠      setCount(booksCountResp.count);
11⁠    });
12⁠}, []);

We could speed this up by adding the following to our <head>:

1⁠<link rel="prefetch" href="/api/books" as="fetch" />
2⁠<link rel="prefetch" href="/api/books-count" as="fetch" />

Jhey's Spot

For Jhey's spot this week, I've got a couple of awesome Codepen examples for you. The first uses CSS anchor positioning to show an animated box around links as you hover over them. This is something we've had to do in JS for a long time, but with the advent of CSS variables and custom properties, it's now much easier to do in CSS!

See the Pen Anchor Magnet Slide Menu by Jhey (@Jhey) on CodePen.

And the second example uses scroll-masking to show a gradient when you scroll to show visually when you are at the start and end of a scroll container. I see this popping up a lot and this is a really nice way of doing it.

See the Pen CSS Scroll Masking by jh3y (@jh3y) on CodePen.

CSS anchor positioning API

Off the back of Jhey's demo above, there's a great article on the Chrome Developers blog about CSS anchor positioning.

The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements relative to other elements, known as anchors. At the heart of this API lies the relationship between anchors and positioned elements. It simplifies complex layout requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more. With anchor positioning built into the browser, you'll be able to build layered user interfaces without relying on third-party libraries, opening a world of creative possibilities.

Merging Remix and React Router

You've probably seen me post about this or talk about it. Remix and React Router are merging!

I'll be honest: I did not see this coming. I always felt like Remix and React Router were tools for very different things. But the last couple of large updates to Remix saw them introduce the concept of SPAs to an otherwise SSR-based framework. There was a lot of talk during this period about how similar the two things were, so it stands to reason that a merge was on the horizon from that point.

At first, I felt a bit sad that the Remix name is the one that won't be used for Remix anymore. I feel like React Router sounds a bit too narrow for what Remix is capable of. However, I understand that React Router is (by far) the bigger name and hasa lot more (in terms of usage) to lose by rebranding as Remix. And, it's going to be (hopefully 🤞) a seamless upgrade where nothing breaks when you change the names over in your package.json.

Also, this wasn't communicated very well initially, but the Remix name isn't going away. There are, apparently, some big plans for what Remix is going to become. We just don't know what those plans are or the direction the framework is headed in. Hopefully, we'll find out soon.

Something a little different

I came across a website this week, the likes of which I have never seen before and the implementation of which is, in my opinion, flawless!

Dustin Brett has spent 3 years building his personal website, and it is something to marvel at! I've seen OS-style websites before, but I feel like Dustin has managed to create his own style (albeit using familiar icons) that works seamlessly, is intuitive (as much as a 'desktop website' can be), and you can even run Doom! (as a video)