frontend
Technical notes on web development, DevOps, and AI integration.
119 articles
- 19:31frontend
Guessed Values Are Not Data: Mark Mockup Placeholders
Unmarked guesses in a mockup survive into official presentations. Label every value's origin so a deliverable stops lying about its certainty.
TL;DR: Mockups filled with unmarked guesses look authoritative, and one screenshot turns fabricated numbers into client expectations. Fix: label every value either "Source: catalog" for verbatim data or "PLACEHOLDER, question #9" for guesses, tied to a numbered open question. A guessed value is not data; without provenance markers, developers build validation on fiction that costs far more to rewrite.
#requirements#ux#mockup - 18:06frontend
Next.js Mockup Pages Without Login for Client Review
Replace static mockup screenshots with real Next.js routes clients can open without a session, using an explicit public path list in the proxy file.
TL;DR: The blank preview problem came from mockup routes sitting behind auth, but loosening authentication for the whole app was never an option. Next.js's new root-level proxy file exempts mockup routes from authorization via an explicit public paths list and config matcher, leaving authentication untouched. Mockup routes should use fixture data only, and every route gets tested both ways.
#nextjs#middleware#prototyping - 00:12frontend
Why a Form Date Slips Back One Day: the Payload Follows the Data
A date input ships a plain string, the old payload carried a UTC instant. How one day vanished and the contract that stopped it.
TL;DR: A date input saved as December 20 came back as December 19 because wrapping the plain yyyy-mm-dd string in a Date, then calling toISOString, shifted local midnight to the previous day in UTC-negative timezones. The fix anchors the input string at UTC midnight explicitly. Keeping the Go backend strict on RFC 3339 prevents this class of bug entirely.
#javascript#golang#api - 21:06frontend
The One-Line Catch That Deleted Admin Sessions
An API outage and an expired session were treated the same by a single catch, until one server restart logged out every admin.
TL;DR: A single catch-all deleted the session token on any error, so a brief backend outage logged out every admin. The fix: classify failures first—only 401 purges the token, 403 shows an access-denied notice, and 5xx or network errors keep the session with a retry banner. Five unit tests lock the classification.
#javascript#http#error-handling - 23:48frontend
Tests That Lock Design Intent, Not Screenshots
Design intent does not survive on documentation alone. A 129-line unit test pins the house classes, so drift breaks the build, not the quarterly audit.
TL;DR: When a fresh restyle kept slipping back to old borders and colors, thicker documentation didn’t stop the drift. So the team shipped a 129-line test that renders components to static markup and checks exact Tailwind classes. It now catches silent design changes in CI and enforces token-only styles before shipping.
#testing#vitest#tailwind - 22:36testing
First Day With Vitest, and It Immediately Exposed Two Bugs
A Next.js frontend got its first vitest suite: 12/12 green, yet two bugs surfaced while writing the tests, before they could become complaints.
TL;DR: Installed Vitest on a Nextjs frontend that had no tests and wrote twelve passing checks. Writing them revealed two hidden issues, a client name duplicated across industry groups and a token gate whose glob missed files directly under src. The takeaway is to add a test harness early, since building tests finds bugs even when everything stays green.
#vitest#testing#git - 19:55testing
When the Test Reads Its Own Source Code
Vitest refuses to render components under Vite 8? Make the source files the test data: lock the rating flag invariant with toContain.
TL;DR: Vitest could not transform JSX after Vite 8 moved to rolldown and oxc without a React plugin, breaking the entity card render test. Instead the author added a text tripwire that reads source files and asserts rating_enabled !== false on six surfaces. It checks code shape not runtime, so integration tests verify the flag gates display without leaking rating data.
#vitest#testing#react - 18:03frontend
When Ratings Are Off, Hiding the Badge Is Not Enough
Switching the rating flag off is not enough while card badges and aggregateRating markup still ship. My notes on sweeping every surface clean.
TL;DR: Switching off ratings hid the detail page section but cards and JSON-LD still showed the old score from cached property data. That mismatch between what users see and what crawlers read risks spam penalties. Now the rating_enabled flag gates both the UI badge and the structured data so everything disappears together.
#react#seo#feature-flags - 17:10backend
The Checkbox That Silently Killed a Feature in a Go Backend
An unchecked checkbox sends nothing, and a Go backend reads that silence as false. Lessons from a silent admin-form bug.
TL;DR: Leaving checkboxes unchecked sent nothing, which the backend misread as disabling the features. In Go, a missing boolean unmarshals to false, so absent was treated as off and omitempty hid the problem. The fix was to always send explicit true or false and use null versus absent for nullable fields.
#go#json#react