Updated weekly · 201 posts

The journal — what I'm learning, written down.

Articles on product design and craft, hands-on tutorials, and longer-form Foundations pieces I write to teach what I wish someone had taught me. Mostly for designers learning to ship and engineers learning to draw.

Posts

201

Tutorials

32

Foundations

25

Reads / month

12.4k

201 postsRSS feed →

FeaturedArticleJul 2026 · 24 min

API rate limits need workload contracts

Workload-centered rate-limit contracts define quota units, partition identity, bursts, concurrency, rejection semantics, client adaptation, and capacity evidence.

API reliability

Read the article

Editor's picks

Top reads this month.

See all picks →

JP Casabiancain The Briefing

API deprecation needs consumer evidence

Evidence-led deprecation connects runtime signals, consumer inventory, semantic replacement maps, migration receipts, exceptions, staged enforcement, and closure.

ArticleJul 202624 min0.8k

JP Casabiancain The Briefing

Automated hiring needs review paths

Meaningful review paths connect automation notice, evidence preservation, empowered human judgment, candidate context, correction, explanation, and system repair.

ArticleJul 202624 min1.5k

JP Casabiancain The Briefing

Build cursor pagination that survives writes

A PostgreSQL keyset-pagination contract combines unique ordering, matching indexes, scoped opaque cursors, directional seeks, mutation semantics, and adversarial tests.

TutorialJul 202624 min2.2k

JP Casabiancain The Briefing

Build a trustworthy service-worker update

A safe service-worker release coordinates waiting versions, compatibility, unsaved work, multiple tabs, activation, cache migration, one reload, and rollback.

TutorialJul 202624 min2.9k

JP Casabiancain The Briefing

Build an aria-activedescendant combobox

A reducer-driven combobox keeps query, value, selection, active option, popup, focus, asynchronous results, composition, and announcements coherent.

TutorialJul 202624 min3.6k

JP Casabiancain The Briefing

Foundations: monotonic clocks and deadlines

Clock-selection discipline separates user-visible wall time, monotonic duration measurement, propagated deadlines, restart boundaries, distributed uncertainty, and timing receipts.

FoundationsJul 202624 min4.3k

Everything

API deprecation needs consumer evidence

Evidence-led deprecation connects runtime signals, consumer inventory, semantic replacement maps, migration receipts, exceptions, staged enforcement, and closure.

Developer experience

Automated hiring needs review paths

Meaningful review paths connect automation notice, evidence preservation, empowered human judgment, candidate context, correction, explanation, and system repair.

Build cursor pagination that survives writes

A PostgreSQL keyset-pagination contract combines unique ordering, matching indexes, scoped opaque cursors, directional seeks, mutation semantics, and adversarial tests.

Build a trustworthy service-worker update

A safe service-worker release coordinates waiting versions, compatibility, unsaved work, multiple tabs, activation, cache migration, one reload, and rollback.

Build an aria-activedescendant combobox

A reducer-driven combobox keeps query, value, selection, active option, popup, focus, asynchronous results, composition, and announcements coherent.

Foundations: monotonic clocks and deadlines

Clock-selection discipline separates user-visible wall time, monotonic duration measurement, propagated deadlines, restart boundaries, distributed uncertainty, and timing receipts.

Foundations: authorization decision flow

Authorization traces connect subject, resource, action, trusted context, policy decision, obligations, enforcement, cache scope, side effects, and audit evidence.

Field note: take-home deletion dates

Purpose-bound retention defines candidate notice, artifact categories, controlled review, reviewer and vendor copies, deletion workflow, exceptions, and verification.

Recruiting privacy

Field note: status pages need update contracts

Status-update contracts connect affected capability, observable impact, evidence time, uncertainty, validated action, cadence, ownership, resolution, and correction.

Incident communication

Build provenance should travel with releases

Release provenance connects a shipped artifact to its source, build instructions, dependencies, builder identity, verification policy, and promotion history.

Supply chain security

Secret rotation is an availability feature

Rotation protocols preserve service continuity through dual validity, staged rollout, verification, rollback, revocation, ownership, and rehearsal.

Hiring funnels need denominator contracts

Denominator contracts make selection-rate comparisons explicit about stage, population, time window, eligibility, exclusions, uncertainty, and decision use.

Build cancellable fetch with AbortSignal

A cancellable request pipeline composes user intent, timeouts, supersession, streaming work, structured reasons, UI state, and cleanup around one signal.

Coordinate browser tabs with Web Locks

A Web Locks coordinator gives same-origin tabs explicit ownership, bounded waiting, cancellation, leader duties, observability, and safe fallbacks.

Build an OAuth 2.0 client with PKCE

A secure authorization-code client binds each request to a one-time verifier, exact redirect state, S256 challenge, strict response validation, and safe token handling.

Foundations: backpressure and flow control

Backpressure contracts connect producer rate, consumer capacity, queue units, high-water marks, demand, cancellation, overload policy, and user-visible progress.

Distributed systems

Foundations: accessible naming

Accessible naming separates role, name, description, state, visible text, reference precedence, component APIs, localization, and accessibility-tree testing.

Field note: accessible interview scheduling

Accessible scheduling gives every candidate a usable interface, private accommodation path, clear logistics, neutral rescheduling, day-of fallback, and bounded disclosure.

Hiring accessibility

Field note: scheduled jobs need catch-up rules

Missed-run policies connect intended fire time, useful deadline, catch-up semantics, concurrency, idempotency, backlog limits, durable skips, and manual replay.

Passkey recovery is authentication architecture

Recovery maps keep passkey assurance, fallback strength, identity proofing, support authority, revocation, and abuse response inside one system.

Time zones are product state

Temporal state contracts separate instants, wall-clock values, dates, durations, recurrence, named zones, and daylight-saving ambiguity.

Product engineering

Row security needs adversarial fixtures

Adversarial RLS fixtures test actors, tenants, commands, mutations, privileged paths, revocation, side effects, and denial behavior.

API examples should be executable contracts

Executable examples make API setup, requests, responses, errors, multi-call journeys, cleanup, versioning, and compatibility continuously verifiable.

Developer experience

AI traces need redaction contracts

Redaction contracts preserve useful AI telemetry while bounding prompts, retrieval, tool data, personal content, access, retention, and export.

SLOs should follow user journeys

Journey SLOs connect meaningful user outcomes, cross-system evidence, latency, error budgets, recovery, and release decisions.

Interview debriefs need independent evidence

Evidence-before-discussion protocols preserve observations and individual ratings before panels reconcile disagreement and make a decision.

Skills taxonomies need expiry dates

Versioned skill definitions connect observable behavior, evidence, role mappings, aliases, ownership, review triggers, and retirement.

Quality of hire starts before closing

Predeclared quality-of-hire plans connect role outcomes, hiring evidence, ramp windows, operating context, privacy, and process learning.

Interview question banks need maintenance logs

Question maintenance logs keep competencies, prompts, probes, anchors, accessibility, evidence yield, versions, and retirement connected to current work.

Build a resumable Server-Sent Events client

A production SSE client needs monotonic event IDs, replay retention, duplicate-safe reducers, heartbeats, visible recovery, and snapshot fallback.

Build an accessible reorderable list

One pure move operation can support drag, buttons, direct position, keyboard acceleration, focus retention, announcements, persistence, and undo.

Build conflict-aware autosave with ETags

ETag preconditions turn silent overwrites into an explicit autosave conflict state with preserved drafts, comparison, merge, reload, and retry.

Product engineering

Build an offline draft queue with IndexedDB

A durable browser queue needs local identity, dependency-aware replay, idempotency, conflict handling, storage policy, and truthful sync states.

Build a card layout with container queries

Container queries let reusable cards respond to the space their parent provides, with named containment, intrinsic fallbacks, and component-level QA.

Build a PostgreSQL worker queue with SKIP LOCKED

A PostgreSQL work queue needs atomic claiming, bounded leases, idempotent handlers, retry classes, fairness, cancellation, and reconciliation.

Roll out CSP and Trusted Types

A staged CSP and Trusted Types rollout inventories injection sinks, assigns policies, collects bounded reports, fixes causes, and ratchets enforcement.

Build a resumable upload with the tus protocol

A resumable upload needs negotiated capability, durable offsets, metadata policy, conflict checks, truthful progress, expiry, cleanup, and processing states.

Foundations: HTTP caching without superstition

Cache contracts make response selection, freshness, validation, privacy, mutation, stale behavior, and deployed-path evidence explainable.

Web foundations

Foundations: Unicode for product interfaces

A Unicode text contract assigns the right unit to storage, length, editing, equality, normalization, search, sorting, display, and security.

Web foundations

Foundations: database isolation

Invariant-led transaction design turns hostile concurrent schedules into choices about atomic updates, constraints, locks, serializable retries, and product recovery.

Foundations: browser focus

Focus ownership connects native tab order, component patterns, DOM lifecycle, modal context, asynchronous rendering, and durable restoration.

Foundations: event delivery semantics

End-to-end delivery contracts separate broker receipt, durable processing, external effects, acknowledgement, deduplication, retry, and reconciliation.

Distributed systems

Foundations: URLs as product architecture

URL state contracts separate durable identity, shareable view state, navigation history, canonicalization, confidentiality, authorization, and migration.

Web foundations

Field note: export buttons need data contracts

Export contracts define row grain, request scope, schema, encoding, authorization, async states, provenance, compatibility, and downstream use.

Product engineering

Field note: status labels need an owner

Actor-aware status contracts connect durable state to ownership, expected action, timing, role-safe language, announcements, and escalation.

Field note: copy buttons need verification states

A trustworthy Copy control freezes exact source bytes, awaits the Clipboard API, confirms accessibly, handles failure, and protects sensitive data.

Field note: recruiter outreach horizons

A decision horizon makes candidate outreach honest about observed relevance, opportunity confidence, timing, ownership, preferences, and closure.

Field note: reference checks verify claims

Structured reference plans verify a few job-relevant operating claims with comparable questions, evidence boundaries, context, and fair discrepancy handling.

Field note: panel calibration receipts

Calibration receipts prove interviewers can apply shared evidence, probe, note, and rating standards—and reveal exactly where interpretation drifts.

AI evals need measurement contracts

Measurement contracts connect AI product claims, scenario populations, graders, uncertainty, failure classes, and release decisions.

AI-generated dependencies need receipts

Dependency receipts make generated package choices, provenance, permissions, maintenance, alternatives, and removal plans reviewable.

Baseline belongs in architecture decisions

Baseline support data becomes useful when browser capabilities, user evidence, fallbacks, deletion triggers, and ownership enter architecture decisions.

Accessibility maturity needs proof points

Accessibility maturity becomes credible through repeatable proof points for ownership, testing, procurement, incidents, feedback, and remediation.

Postmortems should become onboarding material

Curated postmortems teach new developers system boundaries, failure patterns, recovery habits, operational language, and design intent.

Product engineering

Recruiter screens should test transfer

Transfer-focused recruiter screens connect adjacent experience to role outcomes through constraints, artifacts, behaviors, and evidence.

Transferable skills need translation artifacts

Translation artifacts show how experience from another domain maps to a target role's constraints, decisions, outputs, and outcomes.

Career ladders need AI review expectations

AI-era career ladders should reward framing, verification, risk calibration, review, disclosure, and system improvement—not tool usage.

Portfolios should show collaboration diffs

Collaboration diffs reveal how critique, engineering constraints, research, operations, and review changed the work and the outcome.

Seniority is constraint discovery

Senior engineers expose the hidden product, system, data, operational, organizational, and irreversible constraints that should reshape scope.

AI agents need permission budgets

Permission budgets keep agent tools, data, writes, approvals, production access, and audit evidence aligned with the task.

Tests should challenge generated intent

AI-assisted tests need independent oracles, adversarial cases, mutation checks, review authorship, and production evidence.

TypeScript skill lives at runtime boundaries

Runtime boundary maps connect unknown external data to parsers, domain models, product states, observability, and recovery.

Platform teams should remove a repeated wait

Developer wait ledgers turn repeated delays, handoffs, and unsafe workarounds into measurable platform product improvements.

Developer experience

Developer productivity needs a constraint ledger

Constraint ledgers follow the bottleneck across AI generation, review, release, quality, cognitive load, and operations.

Practical hiring exercises should allow AI

AI-permitted work samples can evaluate framing, implementation, verification, disclosure, review, and improvement in realistic conditions.

Job descriptions need system context

System-context job briefs connect product pressure, architecture, constraints, first outcomes, decision rights, and candidate evidence.

Technical interviews should include code review

Code-review interviews reveal how candidates read context, prioritize consequence, communicate evidence, and improve a change.

Open-source maintenance is portfolio proof

Maintenance contributions show codebase orientation, reproduction, proportionate scope, review, compatibility, release work, and collaboration.

Hiring scorecards need evidence maps

Evidence maps connect role outcomes, observable behaviors, interview stages, artifacts, counter-evidence, confidence, and hiring decisions.

QA receipts after deploy

Post-deploy QA receipts connect route, data, asset, responsive, analytics, and recovery checks to production evidence.

Product engineering

Migrations deserve product briefs

Database migrations need product behavior, compatibility, backfill, verification, rollback, and cleanup plans beside the SQL.

Accessible charts explain uncertainty

Accessible charts combine summaries, direct labels, structured data, keyboard paths, responsive behavior, and honest uncertainty.

Logs need user-journey context

Production logs become useful when they connect safe correlation, product state, release context, user impact, and recovery.

Product engineering

API contracts before interface polish

Contract-first product work makes data states, errors, permissions, idempotency, freshness, and performance visible before polish.

Review depth should follow consequence

Code review should follow consequence: local presentation, shared behavior, and trust boundaries need different evidence and scrutiny.

Product engineering

Responsive layouts need content fixtures

Responsive interfaces need repeatable fixtures for long labels, real data, open states, errors, localization, zoom, and narrow screens.

Design-system migrations under roadmap pressure

Design-system migrations work when component strategy, adoption, QA, exceptions, deprecation, and cleanup move with product delivery.

Webhooks need reconciliation views

Reliable webhook systems make delivery, idempotency, event order, processing attempts, replay safety, and customer impact operable.

Case studies should show recovery work

Recovery-focused case studies reveal diagnosis, containment, technical depth, production verification, ownership, and durable improvement.

Portfolio artifacts that prove judgment

Engineering portfolios get stronger when screenshots are backed by system diagrams, QA receipts, migration notes, and decision artifacts.

Checkout analytics should explain trust

Checkout analytics should explain belief, hesitation, payment recovery, mobile friction, support context, and post-purchase confidence.

Agent-readable product specs

AI-assisted implementation needs specs with product promises, data sources, states, non-goals, acceptance checks, and review focus.

Support-first admin workflows

Support-first admin tools connect customer questions to object state, safe actions, audit history, macros, and escalation paths.

Product engineering

Feature flags need product owners

Feature flags should have owners, audiences, rollout plans, analytics, support visibility, cleanup dates, and decision logs.

Product engineering

Designing data-heavy empty states

Data-heavy empty states should explain cause, owner, confidence, setup, filters, permissions, sync delays, and recovery.

Product sense for frontend engineers

Frontend product sense connects component choices, states, copy, data confidence, analytics, accessibility, and release proof.

Admin UX is operations design

Admin tools need operational decisions, table density, trustworthy filters, safe bulk actions, audit context, and recovery.

Product engineering

AI coding needs issue triage

AI-assisted implementation works better when issues include symptoms, reproduction, scope, constraints, fixtures, and acceptance checks.

Design systems need decision logs

Decision logs preserve why system rules, tokens, components, escape hatches, deprecations, and migrations exist.

Launch checklists that reduce support load

Support-aware launches need checked states, help copy, macros, analytics, first-hour watch plans, and live QA.

Product engineering

Analytics dashboards need owners

Dashboards become useful when metrics have definitions, freshness, thresholds, readers, decisions, and review cadence.

Shopify apps should design for merchant recovery

Shopify app UX should make billing, theme impact, sync health, support context, rollback, and uninstall recovery visible.

Portfolio proof for full-stack roles

Full-stack portfolios need evidence below the screen: data models, integrations, deployment receipts, metrics, and maintenance notes.

Error copy should teach recovery

Error copy should explain cause, consequence, preserved work, next action, support context, and recovery without leaking unsafe detail.

Technical debt needs product framing

Technical debt is easier to prioritize when the team can see user impact, business risk, cost of delay, scope, and proof.

Product engineering

Systems thinking for frontend engineers

Frontend work gets stronger when UI, data, product language, support, analytics, and release behavior are designed as one system.

AI QA receipts for product surfaces

AI-generated work needs inspectable receipts for routes, states, metadata, visuals, accessibility, and live deployment.

Designing for data freshness

Dashboards, admin tools, commerce flows, and AI features need UI states for fresh, stale, partial, failed, and unknown data.

Product engineering

Conversion work without dark patterns

Useful conversion work removes uncertainty, protects user agency, and measures downstream quality instead of leaning on pressure tactics.

Component APIs should teach product intent

Design-system APIs should encode intent, states, constraints, and examples so teams make better product decisions by default.

Operational metrics for founder-led products

Small teams need weekly metrics that connect customer signals, business cost, product action, and clear ownership.

Portfolio case studies need maintenance notes

Maintenance notes make case studies more credible by showing shipped state, caveats, watch items, cleanup, and ownership after launch.

Checkout recovery states that save trust

Checkout recovery needs specific states for payment, inventory, shipping, discounts, sessions, support, and safe retry paths.

Agent context files that reduce review risk

AI coding agents need local rules, product voice, data paths, UI constraints, verification commands, and PR expectations before editing.

Product engineers should write support notes

Support notes translate shipped code into customer context, safe language, known states, escalation paths, and post-launch learning.

Product engineering

Agentic coding still needs product taste

AI can move code faster, but product judgment still has to own hierarchy, scope, states, system fit, and release proof.

Internal tools deserve product craft

Admin, support, and operations tools have real users, real consequences, and a quality bar beyond generic tables.

Product engineering

Release checklists for AI-assisted PRs

Fast AI-generated diffs still need receipts for scope, migrations, assets, routes, SEO, deploys, and live QA.

Feature flags are design material

Flags shape who sees what, how support explains a rollout, how analytics are read, and how safely teams can recover.

Product engineering

The post-purchase experience is product

Commerce trust is confirmed after checkout through order states, fulfillment, support, returns, and recovery paths.

Dashboards should change the weekly rhythm

Useful dashboards create cadence: what changed, what threshold matters, who responds, and what decision follows.

Lightweight design-system governance

Good governance routes decisions, contribution paths, adoption signals, and cleanup without slowing product teams down.

API error design for humans

API errors need product meaning: cause, safe message, support context, retry behavior, analytics, and recovery.

The engineering portfolio evidence stack

A strong portfolio moves from claim to artifact to proof so recruiters, managers, and engineers can inspect the work.

AI product specs need receipts

Agent-ready specs need context, examples, non-goals, acceptance checks, assumptions, and verification before code starts.

Product debugging is a design skill

Useful debugging finds the broken product promise across UI, data, state, copy, support, and implementation.

Designing AI review loops

AI work gets better when generation is followed by critique, revision, verification, and a human decision trail.

Shopify ops workflows for small teams

Small ecommerce teams need storefront, inventory, fulfillment, support, analytics, and campaign workflows to act like one system.

Component migration playbooks that teams follow

Design-system migration needs inventory, old-to-new maps, risk notes, route QA, and cleanup rules teams can actually use.

Case study system diagrams that prove the work

The right diagrams show state, data, tradeoffs, release paths, and proof that final screenshots cannot explain alone.

Production-shaped data for UI design

Interfaces get stronger when mock data includes stale records, permissions, long strings, missing values, and real failure modes.

Frontend observability for product UI

Errors, latency, abandoned states, and repeated confusion should become product signals, not only debugging noise.

Admin permissions that humans understand

Permission UI should explain roles, disabled actions, escalation, audit history, and recovery without leaking sensitive context.

AI-assisted refactors need a paper trail

Generated refactors stay trustworthy when invariants, scope, assumptions, verification, and rollback notes are visible.

Technical writing is product infrastructure

Specs, PR notes, release notes, support language, and captions keep product decisions usable after the meeting ends.

A proof-driven homepage for engineering roles

A candidate homepage should route recruiters, hiring managers, and engineers toward proof instead of hiding behind vague positioning.

QA notes that build trust

A useful QA note names the risk, route, state, data, command output, migration proof, and reviewer focus behind a change.

Analytics events are product language

Event names should describe product moments, failure states, outcomes, and learning paths instead of generic UI motion.

Release notes for small teams

Internal release notes help small teams preserve user impact, support readiness, metrics, rollback paths, and product memory.

Design engineer interview artifacts

Artifacts like state maps, API diffs, QA notes, release notes, and support taxonomies make interviews more concrete.

Maintenance work is product work

Repair work becomes product proof when it reduces user risk, support load, release drag, or the cost of future product changes.

Component APIs that age well

A component API should protect product intent, supported variation, accessibility, migration, and escape hatches without becoming rigid.

AI-agent PRs need human receipts

AI-assisted pull requests are trustworthy when context, verification, state coverage, migration notes, and reviewer focus are visible.

A commerce ops dashboard for small brands

Small ecommerce brands need operating views that connect demand, inventory, fulfillment, support, campaigns, and next actions.

Portfolio systems for engineering interviews

A portfolio system turns projects into interview-ready evidence: constraints, decisions, artifacts, metrics, caveats, and technical hooks.

Case study metrics without theater

Useful portfolio metrics explain the product question, baseline, evidence, attribution, and caveat instead of decorating the page.

Hardening AI prototypes into product code

A generated screen becomes production only after assumptions, states, data, accessibility, analytics, release, and cleanup are owned.

Support queues are product research

Support messages show where the product hid states, used the wrong language, broke recovery, or made an unclear promise.

Frontend architecture designers should understand

Designers who understand components, state, data shape, routes, performance, and accessibility make stronger product decisions.

Checkout trust is a system, not a badge

Checkout trust comes from coherent promises across price, shipping, payment, inventory, recovery, confirmation, and support.

Portfolio proof beats portfolio polish

Hiring teams need evidence of judgment: constraints, tradeoffs, shipped systems, operating signals, and what changed after launch.

Agent context files for real codebases

A useful agent file gives the model project rules, verification paths, boundaries, and examples instead of vague personality instructions.

Fit guidance is ecommerce infrastructure

For apparel storefronts, sizing content is not support copy. It is conversion, return prevention, and product trust.

The production handoff starts in the spec

A useful spec carries state, data, ownership, analytics, QA paths, rollout, and cleanup before engineering receives the ticket.

A small-team quality bar for AI-built UI

AI can create a plausible first draft quickly, but product teams still need state coverage, browser checks, system fit, and release proof.

Deploy readiness for product UI

A deploy-ready UI has more than a passing build. It has state coverage, release signals, rollback notes, and a first-hour watch plan.

Audit trails are product design

Admin users need history they can understand under pressure: actor, action, delta, source, and recovery in product language.

Feature flags for small product teams

Flags should separate deploy from release without creating private product realities nobody can explain later.

Error boundaries are product surfaces

The fallback users see during a frontend failure should preserve context, protect work, explain recovery, and give engineering evidence.

Pricing experiments without fooling yourself

Pricing tests need more than a conversion lift. They need segment reads, guardrails, support signals, and expectation checks.

How I review AI-built screens before they become product

The useful review is not whether the screen looks impressive. It is whether the product job, states, data, and code can survive real use.

Context before polish

Most product screens get better when the team explains the situation before tuning the surface.

Design system escape hatches that do not create drift

A good system needs sanctioned exceptions: scoped, named, reviewed, and designed to feed the system later.

The analytics layer I wish more dashboards had

Raw charts are not enough for operating teams. The missing layer is a short briefing that names movement, confidence, and next attention.

Handoff notes engineers can trust

Good handoff notes are not extra documentation. They are a compact record of behavior, data, constraints, and unresolved decisions.

A roadmap shape for small teams

Small teams need roadmaps that protect judgment: fewer lanes, clearer bets, and explicit cleanup triggers.

Forms that respect the user's time

A respectful form explains why it asks, preserves progress, validates near the problem, and never makes recovery expensive.

My front-end quality bar before a PR

Before I open a UI PR, I want the boring checks handled: states, keyboard paths, long content, loading, errors, and a clean diff.

Operating rules for useful AI agents

Agents become useful when their work is bounded: inspect first, change narrowly, verify concretely, and leave a readable trail.

Portfolio work should prove judgment, not taste

The strongest portfolio pieces show constraints, tradeoffs, decisions, and what changed because of the work.

Designing command palettes for product work

Command palettes are useful when they compress real workflows, not when they become a search box with a keyboard shortcut.

Foundations: interaction states beyond hover

A useful component system defines state as product behavior: focus, loading, disabled, selected, invalid, pressed, and unavailable.

A practical QA pass for AI-generated UI

AI can draft screens quickly, but the review still has to catch states, data assumptions, accessibility, and product intent.

Building optimistic UI without lying

Optimistic UI should make fast actions feel responsive while still preserving truth, recovery, and user confidence.

The quiet value of a design debt log

A useful debt log turns scattered UI compromises into a visible backlog of product risk and system learning.

Empty-state copy that earns action

Good empty states explain what happened, why it matters, and what the user can do without turning absence into marketing.

When dashboards need a readout

Some dashboards should produce a short operating readout: what changed, what likely drove it, and what needs attention now.

The shape of a useful product spec

A good spec is not a document trophy. It makes scope, behavior, risk, and verification easier to reason about.

Shipping small without shipping thin

A small release should reduce scope, not remove the states, recovery paths, and product judgment that make work feel complete.

A checklist for handoff-ready prototypes

A prototype is ready for handoff when it explains behavior, data, states, and constraints, not just the happy path.

Writing component docs teams actually use

Useful component documentation explains decisions, examples, states, and contribution paths, not just props.

Design dashboards around decisions, not charts

A dashboard is useful when it helps someone decide what changed, why it changed, and what to do next.

A small rubric for build vs. buy decisions

The right build-versus-buy call depends less on engineering pride and more on product leverage, risk, and maintenance shape.

How I review pull requests for UI risk

A UI PR review is not only about code style. It is a search for product behavior that can regress quietly.

Building a resilient loading state

Loading UI should preserve layout, explain delay, and make recovery possible when the wait turns into failure.

The screen after sign-up matters more than the landing page

The first authenticated screen decides whether the promise of the marketing site turns into momentum or confusion.

AI features need human escape hatches

The safest AI product flows make uncertainty visible and give users a clear way to inspect, edit, or decline the output.

Foundations: spacing systems that survive product work

Spacing tokens are useful only when they encode rhythm, density, and exceptions that product teams can actually apply.

Designing admin tables people can trust

A table is not trustworthy because it is dense. It is trustworthy when state, priority, and recovery are obvious.

Event names that survive a product rebuild

Analytics events last longer when they describe user intent instead of UI implementation details.

On hiring designer-engineers

Look for evidence of product judgment across design and code, not the fantasy of two full-time roles in one person.

Building an accessible drawer in 200 lines

A drawer is a modal dialog with a layout opinion. Treat semantics, focus, escape, scroll lock, and QA as the core work.

When a designer should learn to ship code

The point is not becoming two people. The point is gaining leverage where design decisions meet the product.

Foundations: color, in OKLCH

A practical guide to OKLCH for product color systems: ramps, perceptual lightness, contrast, semantic tokens, and recipes.

A small set of design principles I keep coming back to

The principles that have stayed useful in product reviews because they change decisions under pressure.

Hand-rolling a tooltip in plain HTML with anchor-positioning

A small tooltip pattern using semantic markup, CSS anchor positioning, keyboard behavior, and a practical fallback.

Foundations: type scale, line-height, and rhythm

A practical typography foundation for product interfaces: scale selection, line-height, measure, density, responsive behavior, and exercises.

The case for keeping the messy middle

Polished case studies can become less believable when they erase the false starts that shaped the work.

Animating between data states with React + requestAnimationFrame

A practical pattern for animating changing data without turning a dashboard into a motion demo.

Designing checkout when half your traffic is mobile

Mobile checkout is not a smaller desktop flow. It needs a sharper hierarchy, calmer forms, and a measurement plan for friction.

My Claude Code PR workflow

How I use AI agents for repo inspection, implementation, verification, and pull requests without skipping engineering judgment.

A practical naming guide for Figma variables

A small system for naming primitives, semantic tokens, component variables, and modes so design and code can stay aligned.

Vue 2 to Vue 3 migration notes from product work

The migration risks I watch for: component contracts, reactivity assumptions, plugins, tests, and design-system drift.

A Supabase-backed static CMS starter for Astro

How this site uses Supabase as a small content backend while still deploying as a fast static Astro site.

What makes an API spec agent-ready

A practical checklist for API descriptions, examples, auth, side effects, errors, and Postman collections that AI agents can use safely.

How I structure a design tokens starter

A starter model for primitives, semantic tokens, component tokens, CSS variables, and handoff documentation.

Why your design system isn't being used

A practical look at adoption, and why having a design system is rarely the real problem.

Build a Stripe-style sparkline in 80 lines of SVG

From normalization math to area gradients and smooth metric morphs.

Foundations: thinking in design tokens

A primer for designers and engineers new to design tokens, with exercises.

Three quick rules for empty states

Empty is not blank. It is an opportunity.

Series

Longer-form journeys.

Multi-part guides I'm building over time. Subscribe and I'll send the next chapter when it lands.

Series · 7 parts

A weekly series for designers learning the engineering side.

Start the series

Series · 4 parts

Shipping Cartkit

How a small team rebuilt commerce checkout, in the open.

Start the series

Series · 3 parts

Weekend prototypes from sketch to live site.

Start the series

Subscribe

One email, every other Sunday.

Get the latest article, the next Foundations chapter, and a small note from me about the week.