frontend

Laravel Vite (replacing Mix) compiles and bundles frontend assets with hot module replacement during development. I define entry points in vite.config.js—typically resources/js/app.js and resources/css/app.css. The @vite directive includes compiled as

Frontend errors are inevitable, so I’d rather control the blast radius. I wrap unstable sections with an ErrorBoundary that shows a friendly fallback and captures context for reporting. I also avoid spamming the error tracker by including a fingerprin

Server-side validation is the source of truth, but raw error payloads are rarely UI-friendly. I normalize validation errors into a Record<field, message> shape so forms can render them consistently. The tricky detail is mapping server field path

Search boxes are a classic place to accidentally fire a request on every keystroke. I debounce the value that triggers the query (not the input rendering) so typing stays responsive, and I cancel/ignore stale requests so results don’t arrive out of or

Tailwind CSS provides utility-first styling that pairs perfectly with Rails component-driven architecture. I configure Tailwind to scan templates for class names and generate only the CSS being used. The standalone CLI runs during development with --w

Scroll listeners are easy to get wrong and they can cause performance issues on long lists. IntersectionObserver lets the browser do the hard work: I put a sentinel div at the bottom of the list and trigger fetchNextPage when it becomes visible. I als

Leaking secrets into the browser bundle is an easy mistake. Vite only exposes env vars with the VITE_ prefix, and I keep that rule strict. I also define a small typed wrapper so components don’t read import.meta.env directly everywhere. The wrapper gi

Brittle test suites often come from mocking fetch at every call site. MSW lets me mock at the network layer: components make real HTTP calls, but the test environment intercepts them and returns deterministic responses. That keeps tests closer to real

When auth breaks in the UI, it’s expensive and it always seems to happen at the worst time. I keep one or two Playwright smoke tests that cover the critical path: login, navigate, create something, logout. The goal isn’t to test every edge case; it’s

Modals are accessibility traps—literally. Without focus management, keyboard users can tab into the page behind the modal and get lost. I trap focus within the dialog while it’s open, restore focus to the trigger on close, and support Escape to dismis

TypeScript adds static typing to JavaScript for better code quality. I define types with interfaces and type aliases for clear contracts. Type annotations like : string, : number catch errors at compile time. Generics enable reusable, type-safe compon

Copying code is a core interaction in a snippets app, and it needs to work reliably across browsers. The modern API is navigator.clipboard.writeText, but it requires HTTPS and permissions in some contexts. I try it first, and if it fails I fall back t