Caching Spikes, Prototype Stress, and Streaming Markdown Under Load

Performance isn't just about what you cache—it's about how you test, render, and structure the things users actually see. This batch of posts spans infrastructure optimizations, prototype testing methods, streaming markdown performance, and CSS tricks that blur the line between semantics and presentation.

Simplifying runtime caching on Vercel

Vercel consolidated Data Cache into Runtime Cache and the infrastructure numbers are worth noting: 440 million reads per hour handled by distributed Redis fleets, with circuit breakers that dropped p99 latency to one-fifth during traffic bursts. Pro projects now get 8x more storage, Enterprise gets 10x. If you're running Next.js on Vercel and wondering why your cache behavior changed, this is the explanation—and the performance gains look real.

5 prototype stress tests for better UX design

AI-assisted prototyping is faster, which means you can afford to break things deliberately before production. The article recommends five tests: layout behavior between breakpoints, input handling with messy real-world data, loading/empty/error states, unexpected interaction sequences, and accessibility with assistive tech. The key insight is to test behavior rather than polish, and to document failures as explicit design decisions with engineering in the loop. This is the process that catches the edge cases that make it to production otherwise.

React Markdown alternatives: Benchmarking 3 streaming renderers

If you're rendering AI chatbot responses in React, this benchmark is directly applicable. react-markdown handled short and medium responses fine, but long responses with syntax highlighting showed chunk-to-mutation latency jump from 3.7ms to 42.3ms under CPU throttling, with 269 long frame gaps. Markstream used the least main-thread time in demanding conditions:

import { Markstream } from 'markstream';
 
function ChatResponse({ streamingContent }) {
  return <Markstream content={streamingContent} />;
}

Streamdown showed promise but had occasional large frame gaps worth investigating if you're optimizing for low-end devices.

What's !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More

Firefox 155-157 brought alpha(), progress(), and advanced attr() to Baseline status. Chrome 153-154 added scroll-axis-lock and text-decoration-inset. Safari 27 shipped revert-rule and the :heading pseudo-class. The scroll-state() queries are particularly useful for detecting scroll positions without JavaScript, and the post includes a clever workaround for animating ::selection background colors using @property:

@property --selection-bg {
  syntax: '<color>';
  inherits: true;
  initial-value: yellow;
}
 
::selection {
  background-color: var(--selection-bg);
}

The Frankenstein Table

Using <table>, <th>, <td> with display: grid makes layouts more readable for developers, but the comments section is correct: overriding display properties strips semantic meaning for assistive technologies. Reserve this for purely presentational layouts. If it's actually tabular data, use a real table. The developer ergonomics aren't worth breaking accessibility.

The thread running through these posts is the gap between what works in ideal conditions and what survives real-world stress: caching under traffic spikes, prototypes under messy input, markdown rendering on throttled CPUs, and CSS hacks that trade semantics for convenience. Test the edges.