annotepage

A detailed usage example

The three sentences of how you use it, at length.

Your project

The key is in the tag, or it is not and each reviewer pastes it once.

How your site updates

Your site deploys on its own, or somebody puts it online.

They change what the steps below show. Neither asks you to choose anything: you are already in one of these cases.

The people reviewing your page

  1. The reviewers paste the key

    Once, in their browser.

  2. A reviewer annotates the page

    They press the button, click what is wrong, and write a sentence about it.

You and your assistant

  1. You give it the key, once

    The tool writes it for you: it already has the address and the key. One button, one file, on the machine where your assistant runs.

    Nothing is typed twice. What comes out is what this browser is using.

  2. You ask your assistant

    One line names the site. The rest is its own work.

    Open it in your site’s code, where it can edit the files. Anywhere else it can only read the notes and reply.

    Naming the site is enough. The file above says which key that site uses.

    [figure: replaying the same session]

    connect to staging.example.com with annotepage and fix what the reviewers flagged

    Bash(annotepage open) … +52 lines (ctrl+o to expand)

    Two are the same bug. The third is a different one: the grey footnote under the table.

    Two edits. Padding 36px to 16px and the label 17px to 16px, once, for both buttons.

    Bash(node ap3-measure.mjs) wraps at 316px and below; holds one line from 317px up … +24 lines (ctrl+o to expand) Bash(git commit -a -m 'guide: hold both action labels on one line, footnote to AA, 1.4.13') 1 file changed, 3 insertions(+), 3 deletions(-) … +1 line (ctrl+o to expand) Bash(git push origin main) … +8 lines (ctrl+o to expand) Bash(curl -s staging.example.com/guide | grep -o 'data-version="[^"]*"') data-version="1.4.13"

    Replied in each thread with what I measured, and resolved all three in 1.4.13.

    ❯

What comes back on the page

  1. The remark waits for your deploy

    Marked resolved, and stamped with the version the fix ships in.

    The page they open is still the old one, so the remark stays in front of them.

  2. You deploy the fix.
  3. The reviewer finds the answer

    They open the page again and find what was measured, under the element they pointed at.

See every way to install it