Just enough JavaScript
Where Feitio uses scripts, what the browser already does on its own, and the rules for not overdoing it.
On this page
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 <dialog>, with showModal() | one line to open |
| Details | the browser’s <details> | 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.