Web Design and Engineering

Next.js, React, modern CSS, performance, immersive web, frontend architecture.

Page 2 of 3

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL vs CSS animation: when to use each (2026)

CSS animates transform and opacity off the main thread for free. WebGL hands you the raw GPU. Here is the line between them, with the bundle and battery costs.

A scattered heap of grey files joined by lines into one lit file, which feeds a text panel whose lines sit exactly inside their dashed outlines

Web

Web font performance: one WOFF2 file, zero layout shift

An unoptimised family adds 500KB and delays readable text. Subset to WOFF2, self-host it, tune the fallback with size-adjust so nothing moves on swap.

A ring gauge lit for less than half its length, the rest broken into six dark segments, beside six lanes of tasks each with one long white block past a dashed limit

Web

6 frontend mistakes that tank your Lighthouse score in 2026

Total Blocking Time is 30% of the Lighthouse score, yet most teams fix the wrong metric. The six production mistakes that crater it, and how to fix each.

A dark client tile and a lit server tile joined by one short white line between matching ports of small pills, with a dashed detour through three empty boxes above

Web

Type-safe RPC with Next.js Server Actions: skip the API layer

A Server Action is already an RPC. Here is how to make it type-safe end to end and validated at runtime, with no API route or response type to maintain.

One tall glowing white screen full of moving shapes beside a grid of nineteen identical grey document pages

Web

Website architecture in 2026: SPA homepage, static for the rest

Most marketing sites overengineer every page. We treat the homepage like an app and ship the other 95% as static docs, splitting the build target by intent.

Three closed white rings holding a large painted block, a pointer with a ripple, and stacked bars on their dashed outlines, each above a meter marked in its good zone

Web

Core Web Vitals on Next.js in 2026: how to ship green

Concrete steps to hit Good on LCP under 2.5s, INP under 200ms, and CLS under 0.1 on a Next.js 16 SaaS, plus how to read field data when Lighthouse lies.

An S-shaped easing curve with a tile repeated along it in fading copies, bunched at the ends; four lit tiles top left, three struck-through outlines bottom right, a scrollbar at the edge

Web

Immersive web stack in 2026: Lenis, GSAP, and what to skip

Lenis (3 kB), GSAP free since April 2025, ScrollTrigger for scroll math, and native CSS scroll-driven animations. The 2026 stack we ship in production.

On a white ground, nine black concentric rings around a black core, nine dark lines arriving from outside, each stopped at a different ring

Web

TypeScript strict mode: the 9 settings we never turn off

strict: true turns on 9 checks, and since TypeScript 6.0 it is the default. What each flag catches in production, plus the 3 flags outside the bundle we add.

Two lanes of weekly tile columns: above, six dashed empty weeks then a steady grey block three tiles high; below, lit columns starting at once and varying in height

Web

Next.js development agency vs in-house: when each one wins in 2026

A US senior Next.js hire costs $195,000 fully loaded and takes six weeks to find. Agency rates run $60 to $250 per hour. Here is how each one wins.

A brick wall of dark rounded bricks in which thirteen scattered bricks are lit white

Web

Next.js Server Actions security: 13 advisories and 2026 fixes

Next.js shipped 13 security advisories in 2026: middleware bypass, cache poisoning, and SSRF. What changed and how to ship Server Actions safely now.

A thin upper lane of small tiles with a dashed empty outline in it, a curved arrow down to the same tile lit on a wide lower lane carrying a block of packages and a long bar

Web

Edge runtime vs Node runtime: Next.js 16 moved the default

Next.js 16 moved middleware to the Node runtime and renamed it proxy.ts. Where Edge still wins on latency, where Node wins on packages and long tasks.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Why we removed Tailwind from production: a CSS-only design system

After years of running Tailwind alongside our own design system, we removed it from production. Here is the architecture that replaced it and what changed.

Back to Field notes