2b:null 2c:["$","title",null,{"children":"Act on Press | Trevor Manz | Observable"}] 31:[] 2f:{"id":"c6c0bef171293fcf","slug":"act-on-press","title":"Act on Press","thumbnail":"ec6e6da6dbeff0703504cdb25c1f32804c8956b80b3bcb94def8a184118bc127","access_level":"public","create_time":"$D2024-06-07T12:39:57.599Z","update_time":"$D2024-06-07T13:48:59.864Z","view_time":null,"first_public_time":"$D2024-06-07T13:39:48.837Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"eea54452b8f3877b","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":"starter_2024"},"version":50,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"075e7cdc2ad9e61e","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":null}],"members":[{"type":"individual","id":"075e7cdc2ad9e61e","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":null,"role":"editor"},{"type":"team","id":"eea54452b8f3877b","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Act on Press","cells":[{"id":0,"value":"# Act on Press\n\nI came across [a tweet](https://twitter.com/ID_AA_Carmack/status/1787850053912064005) from John Carmack advocating for \"Act on Press\" UI design.\n\nBelow are two buttons: one with the standard \"click\" event, and one with an \"act on press\" (mousedown) event.\n\nCan you notice the difference?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"{\n let count = 0;\n let button = html``;\n button.addEventListener(\"click\", () => {\n button.innerText = `Count is ${count++}`;\n });\n return html`

Act on Release${button}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n let count = 0;\n let button = html``;\n button.addEventListener(\"mousedown\", () => {\n button.innerText = `Count is ${count++}`;\n });\n return html`

Act on Press${button}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"