Code Computerlove logo Front End Tools & Docs

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 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:

Prefetching
useEffect(() => {
  fetch("/api/books")
    .then((resp) => resp.json())
    .then((books) => {
      setBooks(books);
    });


  fetch("/api/books-count")
    .then((resp) => resp.json())
    .then((booksCountResp) => {
      setCount(booksCountResp.count);
    });
}, []);

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

Prefetching
<link rel="prefetch" href="/api/books" as="fetch" />
<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 (@jh3y) 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 Jhey (@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 o 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 any more. 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 be 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)

Check it out and see what you think.