30:[] 2e:{"title":"Plenty of stickies","cells":[{"id":190,"value":"# Plenty of stickies","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"Recently, I came across [‘sticky inset 0’](https://codepen.io/vincent-valentin/pen/yLRRNVP?editors=1100) CodePen by Vincent Valentin. The pen showcases the use of the CSS property [`inset`](http://developer.mozilla.org/en-US/docs/Web/CSS/inset) with `position: sticky`. \n\nI thought, can I overload a grid of elements with `position: sticky`? Apparently, you can!","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"grid = {\n const numOfCells = cols * cols;\n\n let focusCell;\n\n const el = htl.html`

\n ${Array.from({ length: numOfCells }).map((__, i) => {\n const [x, y] = index2coords(i, cols);\n const debugEl = debug ? md`\\`(${x}, ${y})[index:${i}]\\`` : null;\n let className = \"cell\";\n // if (x === y) {\n className += \" cell--dot\";\n // }\n const cell = htl.html`\n${debugEl}`;\n const midCol = Math.floor(cols / 2);\n if (midCol === x && midCol === y) {\n focusCell = cell;\n }\n return cell;\n })}\n

\n ${md`_Try scolling the grid..._
\n↖️ ⬆️ ↗️
\n⬅️ ⏺️ ➡️
\n↙️ ⬇️ ↘️`}\n

`;\n\n yield el;\n\n if (focusCell) {\n focusCell.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n inline: \"center\"\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof visibleCols = Inputs.range([3, 9], {\n label: \"Visibles columns/rows\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"function index2coords(index, length) {\n const x = index % length;\n const y = (index - x) / length;\n return [x, y];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"function getColor(x, y, cols) {\n const center = [cols / 2, cols / 2];\n const dist = distance(x, y, ...center);\n const rUV = math.inverseLerp(0, maxDistance, dist);\n const opacity = Math.max(1 - rUV, 0.05);\n const hue = math.lerp(260, 80, rUV);\n return `hsla(${hue} 80% 40% / ${opacity})`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"maxDistance = distance(0, 0, cols / 2, cols / 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"0 == index2coords(3, 3)?.[0] && 1 == index2coords(3, 3)?.[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"styles = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewportSize = Math.min(width, 480)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"extend = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"cellSize = viewportSize / visibleCols","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"cols = visibleCols * 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"import { distance } from \"@saneef/helper-functions-geometry\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"import { CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}