Two small web pages that make regular feedback in a team easy to start and hard to do badly. Both are built on the 4A feedback rules from No Rules Rules (Reed Hastings & Erin Meyer) and the Start / Stop / Continue format.
No backend, no accounts, no tracking. Plain HTML, one shared stylesheet, installable on a phone.
index.html – Feedback Friday. A guided 1:1 session for two people, about 20 minutes: look back at last time's resolutions, three minutes of silent preparation along Continue / Start / Stop, two five-minute rounds (each person gives once and receives once), and a closing step where each person decides what to accept and what to discard. Timers, a chime at the end, and a copyable note-sheet template. The app stores nothing; notes go on paper on purpose.
trainer.html – 4A Feedback Trainer. Practice before the real thing. A quiz ("good or foul?": 14 situations to judge against the four rules), a writing workshop (5 scenarios with an honest self-check and an example solution), a moderated team round with a 90-second timer per pair, and a small profile with XP, levels and badges. Progress is kept in the browser's local storage.
| Rule | Meaning | |
|---|---|---|
| Giving | Aim to Assist | Feedback is given to help, never to hurt, expose, or make yourself look good. |
| Giving | Actionable | Describe concrete behaviour and say what the person can do differently or keep doing. |
| Receiving | Appreciate | Listen without defending. First of all: thank you. |
| Receiving | Accept or Discard | You decide what to act on. Weighing it seriously is part of the deal. |
Open index.html in a browser, or host the folder anywhere static. GitHub Pages works: Settings → Pages → deploy from the main branch root. On a phone, "Add to Home Screen" installs it as an app.
The palette lives in theme.css: --ink (dark: text, buttons, tags), --accent (light: highlights, chips, app tile) and white. Set --ink-rgb and --accent-rgb to match, and swap the colours in icon.svg and site.webmanifest if you want matching icons.
The quiz situations, workshop scenarios, levels and badges are plain arrays at the top of the script in trainer.html. Rewrite them with situations from your own team; that is where the trainer gets good. The session texts in index.html are plain HTML.
feedback-friday/
├── index.html the 1:1 session
├── trainer.html the 4A trainer
├── theme.css shared palette and components
├── site.webmanifest install metadata
├── icon.svg, icon-*.png
├── LICENSE MIT
└── README.md
Reed Hastings and Erin Meyer, No Rules Rules: Netflix and the Culture of Reinvention (2020). The pages paraphrase the method; read the book for the reasoning behind it.
MIT. Made by Anne with <3.