Reid Burke

Anthropic:

Claude can generate high-quality frontends, but without guidance it tends toward generic, conservative designs. […] Claude has strong knowledge of design principles, typography, and color theory, but defaults to safe choices unless explicitly encouraged otherwise.

Anthropic found three strategies to produce better results:

1. Guide specific design dimensions
2. Reference design inspirations
3. Call out common defaults to avoid

With an aesthetics prompt section, the task create a SaaS landing page for a project management tool improves a lot:

This example prompt applies these strategies:

<frontend_aesthetics>
You tend to converge toward generic, “on distribution” outputs. In frontend design, this creates what users call the “AI slop” aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend’s aesthetics.

Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.

Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.

Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:

• Overused font families (Inter, Roboto, Arial, system fonts)
• Clichéd color schemes (particularly purple gradients on white backgrounds)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
</frontend_aesthetics>

The React Team:

React 19.2 is now available on npm!

This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we’ll give an overview of the new features in React 19.2, and highlight some notable changes.

New features include <Activity /> and useEffectEvent which has been in development for a while now.

Effect Events

Event callbacks now can be split outside of effects. This means event callback dependencies do not need to be in effect dependencies.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // theme is no longer an event dependency
});

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => {
    onConnected();
  });
  connection.connect();
  return () => connection.disconnect();
}, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies)

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // theme is no longer an event dependency
});

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => {
    onConnected();
  });
  connection.connect();
  return () => connection.disconnect();
}, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies)

Now you can avoid re-running effects for changes to variables which only affect a callback.

This requires upgrading to [email protected] to permit effect events to be excluded from effect dependencies.

Batched Suspense Boundaries for SSR

We fixed a behavioral bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering.

Starting in 19.2, React will batch reveals of server-rendered Suspense boundaries for a short time, to allow more content to be revealed together and align with the client-rendered behavior.

This fix also prepares apps for supporting <ViewTransition> for Suspense during SSR. By revealing more content together, animations can run in larger batches of content, and avoid chaining animations of content that stream in close together.

If total page load time approaches 2.5 seconds, React stops batching and reveals content immediately to help fulfill good LCP core web vitals for SEO.

SSR: Web Streams support for Node

renderToReadableStream is now available for Node.js. While React does not recommend using it due to performance concerns, I’m interested to see the performance delta inside projects which already mostly use Web Streams like Hono.

Pino is a very low overhead JavaScript logger. Low overhead is important when you have a lot of logs.

Node.js docs for process I/O:

Warning: Synchronous writes block the event loop until the write has completed. This can be near instantaneous in the case of output to a file, but under high system load, pipes that are not being read at the receiving end, or with slow terminals or file systems, it’s possible for the event loop to be blocked often enough and long enough to have severe negative performance impacts. This may not be a problem when writing to an interactive terminal session, but consider this particularly careful when doing production logging to the process output streams.

If you’re not careful, logs can consume the entire event loop utilization.

Process i/o behavior differences between Terminals, Files, and Pipes

On a related note: process.stdout.write is synchronous when writing to a file or terminal but asynchronous when writing to a pipe. Sim Lijin wrote about disappearing bytes in Node.js which is due to these behaviors. In particular, synchronous writes are used for terminals because process I/O may not complete if you call process.exit(). This causes what may be unexpected differences in behavior. For example, pipes are async:

node -e "process.stdout.write('@'.repeat(128 * 1024));" | wc -c
  131072

node -e "process.stdout.write('@'.repeat(128 * 1024));" | wc -c
  131072

But if you call process.exit(0) while writing to an async pipe, the result is truncated because the async write is interrupted:

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" | wc -c
  65536

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" | wc -c
  65536

If you write to a file, process I/O writes are synchronous, so the entire content is written:

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" >node-stdout-test.out && wc -c node-stdout-test.out
  131072 node-stdout-test.out

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" >node-stdout-test.out && wc -c node-stdout-test.out
  131072 node-stdout-test.out

The reason the async write is 65,536 bytes comes from the pipe capacity of 16 pages. According to man pipe(7):

Before Linux 2.6.11, the capacity of a pipe was the same as the system page size (e.g., 4096 bytes on i386). Since Linux 2.6.11, the pipe capacity is 16 pages (i.e., 65,536 bytes in a system with a page size of 4096 bytes).

Mark Dalgleish:

Recently we shipped a preview of React Router with support for React Server Components (RSC) as well as low-level APIs for RSC support in Data Mode. With the release of React Router v7.9.2, we’re excited to announce that preview support for RSC is now also available in Framework Mode.

To get started, you can quickly scaffold a new app from our unstable RSC Framework Mode template:

npx create-react-router@latest --template remix-run/react-router-templates/unstable_rsc-framework-mode

npx create-react-router@latest --template remix-run/react-router-templates/unstable_rsc-framework-mode

React Router has been developing Framework Mode RSC for some time. Here’s a demo:

Mark continues:

To enable RSC Framework Mode, you simply swap [the React Router Vite plugin] out for the new unstable_reactRouterRSC Vite plugin, along with the official (experimental) @vitejs/plugin-rsc as a peer dependency.

npm install @vitejs/plugin-rsc

npm install @vitejs/plugin-rsc

import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

export default defineConfig({
  plugins: [
    unstable_reactRouterRSC(),
    rsc(),
  ],
});

import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

export default defineConfig({
  plugins: [
    unstable_reactRouterRSC(),
    rsc(),
  ],
});

The build output changes from a React Router ServerBuild to a request handler function with the signature (request: Request) => Promise<Response>.

The heavy lifting was moved into RSC Data Mode making the RSC Vite plugin much smaller than the stable Vite plugin:

As noted in our post on “React Router and React Server Components: The Path Forward”, the great thing about RSC is that this new Framework Mode plugin is much simpler than our earlier non-RSC work. Most of the framework-level complexity is now implemented at a lower level in RSC Data Mode, with RSC Framework Mode being a more lightweight layer on top.

k9s is a terminal based UI to interact with your Kubernetes clusters by Fernand Galiana. I use this tool frequently and have sponsored the developer since December 2024.

 brew install derailed/k9s/k9s

 brew install derailed/k9s/k9s