X Bookmarks — 2024 KW29: RAG Architecture and CSS Scroll Tricks

July 18, 2024

|bookmarks

by Florian Narr

X Bookmarks — 2024 KW29: RAG Architecture and CSS Scroll Tricks

@leerob — Next.js active nav state using server and client components

Next.js Tip: Active state for navigation links

When you change routes, update the background color of a navbar item by looking at the current URL.

Server components 🤝 client components

Smart pattern — the key insight is using usePathname() in a thin client component that wraps just the nav item, while the rest of the layout stays a server component. Avoids the common mistake of making the whole nav a client component just to read the current route.

@baptadn — RAG system architecture walkthrough thread

I'm currently developing a RAG (Retrieval-Augmented Generation) system with @vercel / @nextjs.

As usual, I start with a mental representation of the system. Here is it.

🧵 It all starts with a document (1/10)

Threads that lead with a system diagram are worth saving. The interesting part here is building RAG on top of Next.js and Vercel rather than a dedicated backend — which means leaning on Vercel AI SDK, edge functions, and Blob storage as the plumbing. The mental model diagram upfront is a good habit before writing a single line of code.

@jh3yy — CSS scroll velocity for text-shadow position

Scroll velocity CSS text-shadow 📜

  1. Animate 2 custom properties on scroll
  2. Transition one of the property values
  3. Use the diff (velocity) for the text-shadow position 🤙

A CSS take on it.

Neat technique. Two custom properties — one updates instantly on scroll, one transitions with a delay. The delta between the two gives you a proxy for scroll velocity without a single line of JavaScript. Then you wire that diff to text-shadow offset for a motion trail effect. Pure CSS, no scroll event listeners.

@pontusab — Global search with Typesense in midday.ai

I love how easy it is to set up a global search index with @typesense. We're integrating search into our @middayai engine so you can find your bank more easily! 🏦

Also, a new market launching soon 👀

Typesense keeps coming up as the go-to self-hostable alternative to Algolia for full-text search — simpler ops, single binary, typo-tolerant by default. Pontus building it into midday.ai's open-source financial dashboard is a good reference implementation. Worth bookmarking for the next time I need search that doesn't cost $500/mo to run.

@sarunw — App Store screenshot generator

Preparing screenshots for the App Store is a painful process for me.

Even when I add a new feature, I rarely update the screens.

That's why I created an app that generates screenshots as quickly as possible.

You can try it for free, and if you want to see any features, please

Honestly just saved this because the problem is real — App Store screenshots are the thing that gets skipped every release cycle. Building a tool to remove the friction of your own workflow is the right call. Curious what the generation approach is under the hood.