# Just enough JavaScript Where Feitio uses scripts, what the browser already does on its own, and the rules for not overdoing it. ## The principle Feitio uses JavaScript where it makes the screen better, and does not have to work without it. What stays out is excess: a big library for a small effect, a script on every page out of habit, the whole screen built in the browser when the server would deliver it ready. ## The browser first Before writing a script, check whether the browser already does it. What it does on its own arrives accessible: keyboard, screen reader and focus. Component The browser does The script adds Drawer the browser’s `popover`: opens, closes with Esc and a tap outside none Dialog the browser’s ``, with `showModal()` one line to open Details the browser’s `
` the open and close animation AppShell — the header that hides on scroll, on mobile ScrollFade, BackToTop — show when they apply; smooth scroll to the top StatusOverlay — the loading, done and error states CodeBlock — copy and code colors ## Rules - **No browser API while the component is being built.** The page comes ready from the server; the script comes in later and only adds. - **Reduced motion applies to scripts too:** no hand-made animation when the system asks for less motion. - **Scripts never take away the keyboard or the screen reader.** If the browser element did it, it still does. - **Small and close to its user:** a component’s script ships with it, not in a bundle for the whole site.