X Bookmarks — 2024 KW15: Cohere Rerank 3 and a week of CSS tricks

April 11, 2024

|bookmarks

by Florian Narr

X Bookmarks — 2024 KW15: Cohere Rerank 3 and a week of CSS tricks

@cohere — Rerank 3, a model built specifically for enterprise RAG

Introducing Rerank 3: our newest foundation model purpose built to enhance enterprise search and Retrieval Augmented Generation (RAG) systems, enabling accurate retrieval of multi-aspect and semi-structured data in 100+ languages.

Smart, because re-ranking is the part of RAG that most teams skip or bolt on with a cosine score and call it done. A dedicated model that handles multi-aspect and semi-structured data in 100+ languages is a real step — the multi-aspect part in particular matters when documents have both tables and prose and you can't just embed them uniformly.


@payloadcms — one-liner Payload install into any Next.js app

Install Payload into any @nextjs app with just one line 👇

npx create-payload-app@latest was always fine for greenfield. Getting it into an existing Next.js project used to mean wiring up config files, providers, and the admin panel route manually. If this is actually down to one command now, that's the friction point that was keeping people from trying it.


@jh3yy — CSS depth blur with backdrop-filter and masks

Spoiler: It's a stack of empty elements using CSS backdrop-filter: blur() with varying strengths/mask 🤙

Stack empty <div>s, apply backdrop-filter: blur() at increasing values, then mask each layer — and you get a depth-of-field effect in pure CSS. No canvas, no WebGL, no JS. The insight here is that backdrop-filter applies to whatever is behind the element, so layering them with different blur radii fakes depth across a static scene.


@jh3yy — theme switching with View Transitions and clip-path

Eclipse-inspired theme switch with View Transitions 🌚

document.startViewTransition(toggle)
::view-transition-new(root) { animation: switch; }
@keyframes switch {
  0% { clip-path: circle(60% at 200% -200%); }
  /* ... */
}

Animate clip between modes 😍 Progressively enhance!

The document.startViewTransition API has been production-ready in Chrome for a while and this shows exactly why it's interesting: you wrap a DOM mutation in a transition callback, then animate between the captured "before" and "after" states using CSS. The clip-path circle expanding from off-screen is a nice touch — the browser handles the snapshot, you just describe the animation.


@frankdilo — Typefully's monthly SaaS stack, in actual numbers

We invest heavily in SaaS each month to run @typefully.

Our stack and monthly expenses:

@CustomerIO: $725 @render: $643 @datadoghq: $400 @ChartMogul: $350 @TimescaleDB: $300 @OpenAI: $300 @intercom: $252 @awscloud: $250 @mixpanel: $237 @retool: $100 @NotionHQ: $46 @ghost: $36

Total lands around $3,600/month. Customer.io at the top is interesting — email is expensive. Render at $643 beating AWS at $250 tells you they're not on a custom-tuned EC2 setup, which is fine for most SaaS sizes. TimescaleDB as a dedicated line item suggests they're doing real time-series work, not just stuffing timestamps into Postgres. The OpenAI spend seems low for a writing tool, but this is from April 2024 so likely before they leaned into AI features hard.


@brotzky — walkthrough on building a good chart

Want to build better charts?

Here's the full breakdown of how I built this one 👇

Saved this less for the specific chart and more because 1,720 bookmarks in 24 hours tells you this hit a nerve. Most devs reach for Recharts or Chart.js and stop there. A walkthrough that shows the design decisions behind a chart that actually looks good is worth reading even if the stack isn't yours.


Create hover gallery effect using flex grow 🚀

The trick: a row of images with flex-grow: 0 normally, animated to flex-grow: 1 on hover. No JavaScript, no width calculations, no resize event listeners. The flex layout does the redistribution automatically as neighboring items shrink. Clean application of a layout primitive.


@pontusab — 2024 Next.js SaaS stack

Tech stack 2024

@nextjs @supabase @upstash @novuhq @dubdotco @resend @triggerdotdev @vercel @shadcn

Honestly just saved this so I don't forget it exists. Upstash for Redis/rate limiting, Trigger.dev for background jobs, Dub for link tracking, Resend for email — this is a reasonable opinionated starting point for a solo-built Next.js SaaS in 2024. Not exotic, which is kind of the point.


@search_yordan — regex in Google Search Console for long-tail keyword discovery

#SEOtip Use (\w*\W){5,} regular expression in Google Search Console to identify long-tail keywords

The regex matches queries with 5 or more word-boundary transitions — effectively filtering for 5+ word phrases. GSC's query filter accepts regex, which most people don't use. Put this in the Performance report's query filter and you get a clean cut of long-tail traffic that's often converting better but getting ignored. Practical.


@huge_icons — Hugeicons: 27k+ icons, available as npm package and React components

  • 27,000+ beautiful icons for devs
  • 3,800+ free icons for commercial use
  • Available npm, SVG, React and React Native

→ hugeicons.com

3,800 free icons for commercial use via npm is the relevant number here — that's more than most projects need, and the React component integration means no manual SVG wrangling. Filed under "reference when the icon library situation needs a decision."