A catalogue that filters, sorts and remembers
The page stops being a page. Everything on screen is rendered from one array, the filter and the sort are derived from state rather than stored beside it, the form refuses bad input properly, the query lives in the URL, and every one of the four states a request can be in is handled. No framework — this is the part a framework replaces, written once so you know what it does.
Builds on JavaScript
What you end up with
- A render function that builds the DOM from data and cannot be persuaded to run somebody else’s script.
- Filtering and sorting as derived state, debounced, with an empty state that says what to try.
- A form that reports every problem at once, ties each message to its field, and moves focus there.
- A query you can share as a link, and a list that survives a reload.
- Loading, ready, empty and error — with a retry, and the race condition that ruins a search box already handled.
-
The markup and the stylesheet are given; the JavaScript file is yours. The rule for the whole build: the array is the truth, the DOM is a picture of it. Change the array and re-render — never reach in and patch one node.
Not finished yet
-
The commonest bug in this kind of screen is a second array:
itemsandfilteredItems, updated in two places, disagreeing by Thursday. There is one array and a function that derives what is visible from it.Not finished yet
-
Three rules decide whether a form is usable: report every problem at once, put each message next to the field it belongs to, and move focus to the first one. All three are five lines each, and all three are usually missing.
Not finished yet
-
Two different kinds of memory. What someone would want to send — the search, the sort — belongs in the URL. What is theirs alone — the list they added to — belongs in storage. Both are read once, on load, and written whenever they change.
Not finished yet
-
The last step swaps the built-in array for something that takes time and can fail. Four states, one of which everybody forgets, and one race condition that only ever appears on a slow connection — which is where your users are.
Not finished yet
Last step — finish it and the build is yours.
When it is finished