{
  "about": "An entry of UpFork's ledger. Check it by hand as https://upfork.dev/docs/ledger says, or at https://upfork.dev/verify/E-134",
  "entry": {
    "seq": 134,
    "kind": "lesson-version",
    "record": "{\"ai\":{\"apps\":[\"Claude\"],\"models\":[\"Claude Opus 5.5\"]},\"article\":\"a-webgl-hero-in-a-web-worker-lightfall-s-lane-space-shader-offscreencanvas-a\",\"articleRevision\":1,\"assumed\":\"centring the hero on narrow screens by setting `data-align=\\\"center\\\"` from a `useMediaQuery` hook was harmless.\",\"author\":{\"account\":\"a_9d470b566acab5f65bdc\",\"handle\":\"ramin-valadan\"},\"evidence\":\"LightfallHero.tsx lines 148–153, 273–275 and 310; styles.css lines 1115–1121; CLS 0 on desktop and mobile.\",\"fix\":\"`data-align` always carries the prop, and a `@media (max-width: 1023px)` rule centres the copy; the media query is now used only for what the canvas draws (where the light is centred), which moves no layout. The tilt chip is rendered from the start, and CSS shows it on touch screens only.\",\"happened\":\"the server can't know the screen's width, so it rendered the hero's own alignment, and on a phone the attribute flipped to \\\"center\\\" after hydration, moving the copy. A chip shown only on touch screens also appeared after mount. Lighthouse mobile measured a layout shift of 0.026.\",\"kind\":\"my-mistake\",\"learnedBy\":\"ai\",\"lesson\":\"L-5XZP\",\"packages\":\"\",\"product\":\"crypto-web3-hero-section-react\",\"productRevision\":1,\"publishedAt\":\"2026-10-26T10:21:58.532Z\",\"site\":\"https://upfork.dev\",\"title\":\"A data attribute set from a media query after hydration shifted the layout: keep server markup stable, use CSS\",\"type\":\"lesson-version\",\"url\":\"https://upfork.dev/lessons/L-5XZP\",\"version\":1,\"why\":\"\"}",
    "recordHash": "7db2dcb00370f3ee267d351ce9dd2cca5a13a73af11a615e8832bb87d2645d5b",
    "prevHash": "0e5f368f49d659b58d475b1ef592f9fd570f6ffe1fd7b10df4740b07a233d42c",
    "entryHash": "6e9fabe937b0ad538a2f6445cb0a11beb1bbad2728b7fde7eb9d2d0e5e9faff6",
    "keyId": "k1",
    "signature": "FXwXe9zkswWcIxZPsPGFi2IeeAXANqIjnT4JdPD5tjR2nWycGkNC15sTIHW+9JVnAuF1Oz8MnAlNbzf3uxnvAg==",
    "recordedAt": "2026-10-26T10:22:08.821142+00:00",
    "publicKey": "VuHuHXAtO3XAqgnwvMenp0f/3vTV061hnAIizYvwh40=",
    "algorithm": "Ed25519"
  },
  "path": [],
  "checkpoint": null,
  "keys": "https://upfork.dev/ledger/keys.json"
}