ux
Technical notes on web development, DevOps, and AI integration.
32 articles
- 14:19frontend
The Filter Chip That Quietly Dropped Rows
A client-side filter over a paginated endpoint drops rows it never fetched. The fix: a 500-row fetch ceiling, aria-pressed, and a sort deliberately left out.
TL;DR: The chip filters submissions in the browser. It works with a limited set of rows. A 500-row limit was added with a comment naming the ceiling.
#javascript#ux#accessibility - 13:08frontend
The sidebar was organized by function, not by task
A nav group named after a permission layer means nothing to operators. The regroup follows tasks instead of module boundaries.
TL;DR: The sidebar was reorganized by task, not function. Links are now grouped by division or citizen services. A read-only icon marks unusable entries until backend permissions are updated.
#ux#information-architecture#navigation - 10:40frontend
Dead Links in the Admin Sidebar: Menus That Always 403 Must Go
An admin audit found two menu entries that always end in 403 and seven items still marked read-only. Both were removed, and the tests now assert the absence.
TL;DR: Audit found dead links in admin sidebar. Nav was not broken, just advertising inaccessible routes. Fix involved hiding links from department accounts.
#rbac#ux#nextjs - 03:56frontend
Four Groups: Navigation Follows Permission, Not Content
The admin sidebar splits into four groups that state permission: your own section for writing, other sections read-only, plus a temporary group.
TL;DR: The admin sidebar was split into four permission-based groups so users can see what they can write to before clicking. The layout is built from one RBAC capability map rather than static lists, keeping read-only sections clearly marked. Server-side authorization still enforces access, and tests confirm the change.
#rbac#nextjs#ux - 01:35security
When the Server Fails Closed, the Interface Must Tell the Truth
The server refused free uploads from scoped editors while the UI kept offering the button. Gating the picker fixed the affordance, not the security.
TL;DR: Scoped editors could see KotaPortal's media upload button but always hit a 403, since only admin-global accounts could upload free. The fix gates the button, file input, and handler behind the same server-side permission check, so the UI stops promising what the server refuses. Lesson: hiding UI is hygiene, not enforcement; the server remains the real gate.
#rbac#react#ux - 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 - 20:04testing
Testing the Interface Against API Status Codes
A duplicate email returned a perfect 409 and an English toast in an Indonesian UI. The API was right; the translation layer failed twice.
TL;DR: QA tested 22 admin scenarios; 20 passed. Two failures were frontend translation issues, not backend bugs: a 409 conflict surfaced as an untranslated English toast, and a rejected fake image upload triggered no feedback at all despite the server correctly returning 400. Silent failures mislead more than wrong-language ones; localization belongs in the interface layer.
#testing#ux#api - 23:57devops
Move an Oversized Folder to Block Storage with a Symlink
A 14G backup folder filled the root disk. The move-to-block-storage-with-symlink pattern relieves disk pressure without deleting backup data.
TL;DR: When the root disk hit 95 percent, the culprit was a 14GB WordPress plugin backup folder. Instead of deleting it, the fix moved the folder intact to block storage and left a symlink at the old path, dropping usage to 44 percent. Verify file counts, use absolute paths, and persist the mount in fstab to avoid dangling links.
#linux#rsync#symlink - 11:23frontend
An Honest Ticket Status Stepper: Learning from the History Array
The ticket stepper stops guessing from one status string: stage times come from the transition history, first row per status.
TL;DR: The stepper used to guess progress from one status string, now it maps real timestamps from the history array and falls back to created and updated times. Four display stages replace six cluttered steps, grouping terminal statuses while safely handling invalid dates and listing history in order. Transformations run during render, and const literal types prevent invalid pillar submissions.
#react#typescript#ux