Recipes

The smallest live island. Here a count is kept on the server, and a button on the page adds one to that count. When the count changes, the server renders the partial again and sends it back over the wire as HTML.

A todo list kept as one state on the server. Add tasks, tick them off and filter them, while the header and the list renders again only when something they read has changed. Rows slide in and out with no JavaScript of the page's own.

A sign-up form that checks itself as you type: whether the name is free, whether the email is made up, and each password rule ticking off as it is met. The rules are the account's own validations, written once in Ruby.

Signing in and out with the Rails 8 auth generator pattern, plus a little extra flavor: your other tabs notice a sign-out, and you can see and end the sessions you have open.

Some actions are better left to the browser. Here is an adventurer's backpack. Its tabs, item menus and examine windows open in the browser, with nothing sent to the server. Only actions that changes state, like dropping or wielding an item, tells the server.

Search, filter, sort and page through a general store's shelves. The list and the count follow each change without being told to. The address bar also follows, so a search survives a reload and can be shared.

Three dependent selects for booking a cart: select a kingdom, a region and a town. Each select decides what the next one offers, without the update being declared by hand. The address bar follows each change, so a journey can be opened from a link.

A shopping cart at the general store. Any change to a quantity, the delivery or the coupon is followed by every number that depends on it: the line total, the subtotal, the delivery fee and so on. The prices are worked out on the server, written once in Ruby.

A form for booking a room at the inn. A message under a field can follow another field: pick a bigger room and the note about too many guests disappears. The Save button waits until the form is both valid and changed. The rules are the model's own validations, written once in Ruby.

A bank of items with a checkbox on each row. The count, the worth and the Sell button follow the ticks, and a filter hides ticked rows without losing them. The selection is one set of ids on the server, so there is no manual work to restore the boxes when the list is redrawn.

A quest log where a click turns a row into a form, in place. Hitting the Enter key saves, and the Escape key cancels. A save updates for everyone who has the page open, without closing a row they are editing. The page needs no edit route and no JavaScript of its own.

A bounty board that several visitors edit at once. Each row shows who else has it open and a simple conflict-solving mechanism: keep mine, or take theirs. The conflict is found on the server, by comparing two copies of the row, and the page needs no JavaScript of its own.

A smithy's order book that every visitor writes to. The counts, the coin and the queue updates with each order whether by a visitor or a background job.

A rookery that sends birds at three speeds. The button you pressed spins while its bird is out, and a note appears when the server takes too long. Each indicator is CSS reading an attribute the client sets, so the channel keeps no state for them.

The town crier's chronicle, loading more as it is scrolled. Entries other visitors add wait, so the list never moves while you read, and the address bar remembers how far down you are.

A caravan route, its stops and the cargo at each stop, edited as one form. Add/remove a stop, drag and drop to reorder. The rows are kept on the server, so the only JavaScript needed here is for the drag and drop.

An apothecary's potions, each picking its ingredients from 120 jars. Filter the list as you type, and a jar you picked stays picked when the filter hides it. The selection is one array on the server, so the page needs no JavaScript of its own.

A town notice board that anyone pins to and tears from. A notice you tear down slides away. Notes that another visitor tears, or a filter hides, are gone at once. The motion is plain CSS, modulized as one import.

An armoury where every piece put on or taken off is a step. Undo, redo or jump to any step, from the list or with hotkeys. Each step holds the whole kit as a plain value on the server, so undo only moves back a step, and the page needs no JavaScript of its own.

Enlisting at the adventurers' guild in four steps. Each step is saved as you leave it. The marks along the top show which steps are correct, and cross-step validation is in place: a change on one step may break another. The rules are written once, in Ruby.

A guild hall where your rank decides what you may do. Each open page renders its own buttons from the user's own rank, so an action your rank may not take is refused on the server. The permission rules are Pundit policies.