[{"data":1,"prerenderedAt":2102},["ShallowReactive",2],{"snippets-index":3},[4,182,257,381,434,794,1329,1617,2000],{"id":5,"title":6,"body":7,"description":172,"draft":173,"extension":174,"lastModified":175,"meta":176,"navigation":78,"path":177,"seo":178,"stem":179,"tags":180,"__hash__":181},"snippets\u002Fsnippets\u002Fclick-outside.md","Click Outside Listener",{"type":8,"value":9,"toc":170},"minimark",[10,30,166],[11,12,13,14,24,25,29],"p",{},"Uses\n",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FEvent\u002FcomposedPath",[19],"nofollow",[21,22,23],"code",{},"composedPath","\nto detect click outside the target element. This works across (",[26,27,28],"em",{},"open",") Shadow\nDOM too.",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-ts shiki shiki-themes github-dark","const targetEl = document.getElementById(\"#target-element\");\n\ndocument.addEventListener(\"click\", (event) => {\n  if (event.composedPath().includes(targetEl)) {\n    \u002F\u002F Clicked within targetEl\n  } else {\n    \u002F\u002F Clicked outside targetEl\n  }\n});\n","ts","",[21,38,39,73,80,110,130,137,148,154,160],{"__ignoreMap":36},[40,41,44,48,52,55,59,63,66,70],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"snl16","const",[40,49,51],{"class":50},"sDLfK"," targetEl",[40,53,54],{"class":46}," =",[40,56,58],{"class":57},"s95oV"," document.",[40,60,62],{"class":61},"svObZ","getElementById",[40,64,65],{"class":57},"(",[40,67,69],{"class":68},"sU2Wk","\"#target-element\"",[40,71,72],{"class":57},");\n",[40,74,76],{"class":42,"line":75},2,[40,77,79],{"emptyLinePlaceholder":78},true,"\n",[40,81,83,86,89,91,94,97,101,104,107],{"class":42,"line":82},3,[40,84,85],{"class":57},"document.",[40,87,88],{"class":61},"addEventListener",[40,90,65],{"class":57},[40,92,93],{"class":68},"\"click\"",[40,95,96],{"class":57},", (",[40,98,100],{"class":99},"s9osk","event",[40,102,103],{"class":57},") ",[40,105,106],{"class":46},"=>",[40,108,109],{"class":57}," {\n",[40,111,113,116,119,121,124,127],{"class":42,"line":112},4,[40,114,115],{"class":46},"  if",[40,117,118],{"class":57}," (event.",[40,120,23],{"class":61},[40,122,123],{"class":57},"().",[40,125,126],{"class":61},"includes",[40,128,129],{"class":57},"(targetEl)) {\n",[40,131,133],{"class":42,"line":132},5,[40,134,136],{"class":135},"sAwPA","    \u002F\u002F Clicked within targetEl\n",[40,138,140,143,146],{"class":42,"line":139},6,[40,141,142],{"class":57},"  } ",[40,144,145],{"class":46},"else",[40,147,109],{"class":57},[40,149,151],{"class":42,"line":150},7,[40,152,153],{"class":135},"    \u002F\u002F Clicked outside targetEl\n",[40,155,157],{"class":42,"line":156},8,[40,158,159],{"class":57},"  }\n",[40,161,163],{"class":42,"line":162},9,[40,164,165],{"class":57},"});\n",[167,168,169],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":75,"depth":75,"links":171},[],"Detect a click outside an element with the Event composedPath API. One document listener does the job in TypeScript, and it reaches across open Shadow DOM too.",false,"md","2026-08-29T17:42:32+07:00",{},"\u002Fsnippets\u002Fclick-outside",{"title":6,"description":172},"snippets\u002Fclick-outside","typescript, event, dom","eA1YS9MHGPN7qyLkYSBRBkwBqW1vm_7WLTOq6aEaJRk",{"id":183,"title":184,"body":185,"description":251,"draft":173,"extension":174,"lastModified":175,"meta":252,"navigation":78,"path":253,"seo":254,"stem":255,"tags":202,"__hash__":256},"snippets\u002Fsnippets\u002Ffull-height-body.md","Full Height Page",{"type":8,"value":186,"toc":249},[187,198,246],[11,188,189,190,193,194,197],{},"Instead of hacking around ",[21,191,192],{},"min-height: 100vh;"," there's a simpler way to have the\n",[21,195,196],{},"\u003Cbody>"," span full height of the page.",[31,199,203],{"className":200,"code":201,"language":202,"meta":36,"style":36},"language-css shiki shiki-themes github-dark",":root {\n  display: grid;\n  min-height: 100%;\n}\n","css",[21,204,205,212,226,241],{"__ignoreMap":36},[40,206,207,210],{"class":42,"line":43},[40,208,209],{"class":61},":root",[40,211,109],{"class":57},[40,213,214,217,220,223],{"class":42,"line":75},[40,215,216],{"class":50},"  display",[40,218,219],{"class":57},": ",[40,221,222],{"class":50},"grid",[40,224,225],{"class":57},";\n",[40,227,228,231,233,236,239],{"class":42,"line":82},[40,229,230],{"class":50},"  min-height",[40,232,219],{"class":57},[40,234,235],{"class":50},"100",[40,237,238],{"class":46},"%",[40,240,225],{"class":57},[40,242,243],{"class":42,"line":112},[40,244,245],{"class":57},"}\n",[167,247,248],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":75,"depth":75,"links":250},[],"Make the body span the full page height without the min-height 100vh hack. Two CSS lines on the root element, a grid display and min-height 100%, do the whole job.",{},"\u002Fsnippets\u002Ffull-height-body",{"title":184,"description":251},"snippets\u002Ffull-height-body","cCBsSRmwMDC73T0WYaTpXVCdyZgh86zjPBEcaB6UdUg",{"id":258,"title":259,"body":260,"description":374,"draft":173,"extension":174,"lastModified":175,"meta":375,"navigation":78,"path":376,"seo":377,"stem":378,"tags":379,"__hash__":380},"snippets\u002Fsnippets\u002Ffull-width-image.md","Full width image in a max width container",{"type":8,"value":261,"toc":372},[262,359,362,370],[31,263,265],{"className":200,"code":264,"language":202,"meta":36,"style":36},".full-bleed {\n  object-fit: cover;\n  max-width: none;\n  width: 100vw;\n  position: relative;\n  inset: 0 50%;\n  margin-inline: -50vw;\n}\n",[21,266,267,274,286,298,312,324,341,355],{"__ignoreMap":36},[40,268,269,272],{"class":42,"line":43},[40,270,271],{"class":61},".full-bleed",[40,273,109],{"class":57},[40,275,276,279,281,284],{"class":42,"line":75},[40,277,278],{"class":50},"  object-fit",[40,280,219],{"class":57},[40,282,283],{"class":50},"cover",[40,285,225],{"class":57},[40,287,288,291,293,296],{"class":42,"line":82},[40,289,290],{"class":50},"  max-width",[40,292,219],{"class":57},[40,294,295],{"class":50},"none",[40,297,225],{"class":57},[40,299,300,303,305,307,310],{"class":42,"line":112},[40,301,302],{"class":50},"  width",[40,304,219],{"class":57},[40,306,235],{"class":50},[40,308,309],{"class":46},"vw",[40,311,225],{"class":57},[40,313,314,317,319,322],{"class":42,"line":132},[40,315,316],{"class":50},"  position",[40,318,219],{"class":57},[40,320,321],{"class":50},"relative",[40,323,225],{"class":57},[40,325,326,329,331,334,337,339],{"class":42,"line":139},[40,327,328],{"class":50},"  inset",[40,330,219],{"class":57},[40,332,333],{"class":50},"0",[40,335,336],{"class":50}," 50",[40,338,238],{"class":46},[40,340,225],{"class":57},[40,342,343,346,348,351,353],{"class":42,"line":150},[40,344,345],{"class":50},"  margin-inline",[40,347,219],{"class":57},[40,349,350],{"class":50},"-50",[40,352,309],{"class":46},[40,354,225],{"class":57},[40,356,357],{"class":42,"line":156},[40,358,245],{"class":57},[360,361],"full-bleed",{},[11,363,364,365],{},"Original Source: ",[15,366,369],{"href":367,"rel":368},"https:\u002F\u002Fcss-tricks.com\u002Ffull-bleed\u002F",[19],"Full Bleed CSS Tricks",[167,371,248],{},{"title":36,"searchDepth":75,"depth":75,"links":373},[],"Break an image out of a max width container and stretch it edge to edge. A short CSS full bleed rule built from 100vw, inset and a negative inline margin of -50vw.",{},"\u002Fsnippets\u002Ffull-width-image",{"title":259,"description":374},"snippets\u002Ffull-width-image","css, image","pJE6IPnnc3ZNxpDV7G61nTK5R-XcUHgmQkaBLlRv2LI",{"id":382,"title":383,"body":384,"description":427,"draft":173,"extension":174,"lastModified":175,"meta":428,"navigation":78,"path":429,"seo":430,"stem":431,"tags":432,"__hash__":433},"snippets\u002Fsnippets\u002Fhomebrew-update.md","Update and Prune Homebrew Packages",{"type":8,"value":385,"toc":425},[386,389,422],[11,387,388],{},"Update Homebrew packages and remove unwanted or unused deps from homebrew (this\nclears up lot of storage space at times)",[31,390,394],{"className":391,"code":392,"language":393,"meta":36,"style":36},"language-sh shiki shiki-themes github-dark","brew update && brew upgrade && brew cleanup --prune=all\n","sh",[21,395,396],{"__ignoreMap":36},[40,397,398,401,404,407,409,412,414,416,419],{"class":42,"line":43},[40,399,400],{"class":61},"brew",[40,402,403],{"class":68}," update",[40,405,406],{"class":57}," && ",[40,408,400],{"class":61},[40,410,411],{"class":68}," upgrade",[40,413,406],{"class":57},[40,415,400],{"class":61},[40,417,418],{"class":68}," cleanup",[40,420,421],{"class":50}," --prune=all\n",[167,423,424],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":75,"depth":75,"links":426},[],"Update every Homebrew package and prune the old ones in one shell command. The cleanup step with prune=all reclaims the disk space stale downloads hold on macOS.",{},"\u002Fsnippets\u002Fhomebrew-update",{"title":383,"description":427},"snippets\u002Fhomebrew-update","macos, terminal","sL38g5ziNmnSbGLtXEjAbg3l4s020_StSDcJlQaz9SQ",{"id":435,"title":436,"body":437,"description":787,"draft":173,"extension":174,"lastModified":175,"meta":788,"navigation":78,"path":789,"seo":790,"stem":791,"tags":792,"__hash__":793},"snippets\u002Fsnippets\u002Fmediaquery-hook.md","MediaQuery Change Composition Hook",{"type":8,"value":438,"toc":784},[439,690,695,781],[31,440,442],{"className":33,"code":441,"language":35,"meta":36,"style":36},"import { onMounted, onUnmounted } from \"vue\";\n\nexport const useMediaQueryListener = (\n  mediaQuery: string,\n  callback: (matches: boolean) => void\n) => {\n  function handleMediaQueryListChange(e: MediaQueryListEvent) {\n    callback(e.matches);\n  }\n\n  let mediaQueryList: MediaQueryList;\n\n  onMounted(() => {\n    mediaQueryList = window.matchMedia(mediaQuery);\n    callback(mediaQueryList.matches);\n    mediaQueryList.addEventListener(\"change\", handleMediaQueryListChange);\n  });\n\n  onUnmounted(() => {\n    mediaQueryList?.removeEventListener(\"change\", handleMediaQueryListChange);\n  });\n};\n",[21,443,444,460,464,480,494,519,527,548,556,560,565,581,586,599,617,625,641,647,652,664,679,684],{"__ignoreMap":36},[40,445,446,449,452,455,458],{"class":42,"line":43},[40,447,448],{"class":46},"import",[40,450,451],{"class":57}," { onMounted, onUnmounted } ",[40,453,454],{"class":46},"from",[40,456,457],{"class":68}," \"vue\"",[40,459,225],{"class":57},[40,461,462],{"class":42,"line":75},[40,463,79],{"emptyLinePlaceholder":78},[40,465,466,469,472,475,477],{"class":42,"line":82},[40,467,468],{"class":46},"export",[40,470,471],{"class":46}," const",[40,473,474],{"class":61}," useMediaQueryListener",[40,476,54],{"class":46},[40,478,479],{"class":57}," (\n",[40,481,482,485,488,491],{"class":42,"line":112},[40,483,484],{"class":99},"  mediaQuery",[40,486,487],{"class":46},":",[40,489,490],{"class":50}," string",[40,492,493],{"class":57},",\n",[40,495,496,499,501,504,507,509,512,514,516],{"class":42,"line":132},[40,497,498],{"class":61},"  callback",[40,500,487],{"class":46},[40,502,503],{"class":57}," (",[40,505,506],{"class":99},"matches",[40,508,487],{"class":46},[40,510,511],{"class":50}," boolean",[40,513,103],{"class":57},[40,515,106],{"class":46},[40,517,518],{"class":50}," void\n",[40,520,521,523,525],{"class":42,"line":139},[40,522,103],{"class":57},[40,524,106],{"class":46},[40,526,109],{"class":57},[40,528,529,532,535,537,540,542,545],{"class":42,"line":150},[40,530,531],{"class":46},"  function",[40,533,534],{"class":61}," handleMediaQueryListChange",[40,536,65],{"class":57},[40,538,539],{"class":99},"e",[40,541,487],{"class":46},[40,543,544],{"class":61}," MediaQueryListEvent",[40,546,547],{"class":57},") {\n",[40,549,550,553],{"class":42,"line":156},[40,551,552],{"class":61},"    callback",[40,554,555],{"class":57},"(e.matches);\n",[40,557,558],{"class":42,"line":162},[40,559,159],{"class":57},[40,561,563],{"class":42,"line":562},10,[40,564,79],{"emptyLinePlaceholder":78},[40,566,568,571,574,576,579],{"class":42,"line":567},11,[40,569,570],{"class":46},"  let",[40,572,573],{"class":57}," mediaQueryList",[40,575,487],{"class":46},[40,577,578],{"class":61}," MediaQueryList",[40,580,225],{"class":57},[40,582,584],{"class":42,"line":583},12,[40,585,79],{"emptyLinePlaceholder":78},[40,587,589,592,595,597],{"class":42,"line":588},13,[40,590,591],{"class":61},"  onMounted",[40,593,594],{"class":57},"(() ",[40,596,106],{"class":46},[40,598,109],{"class":57},[40,600,602,605,608,611,614],{"class":42,"line":601},14,[40,603,604],{"class":57},"    mediaQueryList ",[40,606,607],{"class":46},"=",[40,609,610],{"class":57}," window.",[40,612,613],{"class":61},"matchMedia",[40,615,616],{"class":57},"(mediaQuery);\n",[40,618,620,622],{"class":42,"line":619},15,[40,621,552],{"class":61},[40,623,624],{"class":57},"(mediaQueryList.matches);\n",[40,626,628,631,633,635,638],{"class":42,"line":627},16,[40,629,630],{"class":57},"    mediaQueryList.",[40,632,88],{"class":61},[40,634,65],{"class":57},[40,636,637],{"class":68},"\"change\"",[40,639,640],{"class":57},", handleMediaQueryListChange);\n",[40,642,644],{"class":42,"line":643},17,[40,645,646],{"class":57},"  });\n",[40,648,650],{"class":42,"line":649},18,[40,651,79],{"emptyLinePlaceholder":78},[40,653,655,658,660,662],{"class":42,"line":654},19,[40,656,657],{"class":61},"  onUnmounted",[40,659,594],{"class":57},[40,661,106],{"class":46},[40,663,109],{"class":57},[40,665,667,670,673,675,677],{"class":42,"line":666},20,[40,668,669],{"class":57},"    mediaQueryList?.",[40,671,672],{"class":61},"removeEventListener",[40,674,65],{"class":57},[40,676,637],{"class":68},[40,678,640],{"class":57},[40,680,682],{"class":42,"line":681},21,[40,683,646],{"class":57},[40,685,687],{"class":42,"line":686},22,[40,688,689],{"class":57},"};\n",[691,692,694],"h2",{"id":693},"usage","Usage",[31,696,700],{"className":697,"code":698,"language":699,"meta":36,"style":36},"language-vue shiki shiki-themes github-dark","\u003Cscript setup lang=\"ts\">\nimport { useMediaQueryListener } from \"..\";\n\nuseMediaQueryListener(\"(min-width: 1024px)\", (matches) => {\n  \u002F\u002F Do stuff when matches is true\n});\n\u003C\u002Fscript>\n","vue",[21,701,702,725,739,743,763,768,772],{"__ignoreMap":36},[40,703,704,707,711,714,717,719,722],{"class":42,"line":43},[40,705,706],{"class":57},"\u003C",[40,708,710],{"class":709},"s4JwU","script",[40,712,713],{"class":61}," setup",[40,715,716],{"class":61}," lang",[40,718,607],{"class":57},[40,720,721],{"class":68},"\"ts\"",[40,723,724],{"class":57},">\n",[40,726,727,729,732,734,737],{"class":42,"line":75},[40,728,448],{"class":46},[40,730,731],{"class":57}," { useMediaQueryListener } ",[40,733,454],{"class":46},[40,735,736],{"class":68}," \"..\"",[40,738,225],{"class":57},[40,740,741],{"class":42,"line":82},[40,742,79],{"emptyLinePlaceholder":78},[40,744,745,748,750,753,755,757,759,761],{"class":42,"line":112},[40,746,747],{"class":61},"useMediaQueryListener",[40,749,65],{"class":57},[40,751,752],{"class":68},"\"(min-width: 1024px)\"",[40,754,96],{"class":57},[40,756,506],{"class":99},[40,758,103],{"class":57},[40,760,106],{"class":46},[40,762,109],{"class":57},[40,764,765],{"class":42,"line":132},[40,766,767],{"class":135},"  \u002F\u002F Do stuff when matches is true\n",[40,769,770],{"class":42,"line":139},[40,771,165],{"class":57},[40,773,774,777,779],{"class":42,"line":150},[40,775,776],{"class":57},"\u003C\u002F",[40,778,710],{"class":709},[40,780,724],{"class":57},[167,782,783],{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":36,"searchDepth":75,"depth":75,"links":785},[786],{"id":693,"depth":75,"text":694},"A Vue composition hook that watches a media query and calls back on every change. It sets up matchMedia on mount and drops the listener on unmount, typed in TypeScript.",{},"\u002Fsnippets\u002Fmediaquery-hook",{"title":436,"description":787},"snippets\u002Fmediaquery-hook","vue, typescript","KQSGd-4pUsEJ_1pPlPLqLe1a1yBZGm3JCt7uGJms0Vo",{"id":795,"title":796,"body":797,"description":1322,"draft":173,"extension":174,"lastModified":175,"meta":1323,"navigation":78,"path":1324,"seo":1325,"stem":1326,"tags":1327,"__hash__":1328},"snippets\u002Fsnippets\u002Fprefetch-links.md","Prefetch Links on hover",{"type":8,"value":798,"toc":1319},[799,1241,1243,1316],[31,800,802],{"className":33,"code":801,"language":35,"meta":36,"style":36},"export const usePrefetch = (\n  { selector, as }: { selector: string; as: string } = {\n    selector: \"a[data-prefetch]\",\n    as: \"document\",\n  }\n) => {\n  window.prefetchedLinks ??= new Set\u003Cstring>();\n\n  const createPrefetchLink = (url: string) => {\n    const link = document.createElement(\"link\");\n\n    link.href = url;\n    link.rel = \"prefetch\";\n    link.as = as;\n    return link;\n  };\n\n  const onHover = (e: Event) => {\n    const link = e.target as HTMLAnchorElement;\n\n    if (!window.prefetchedLinks.has(link.href)) {\n      window.prefetchedLinks.add(link.href);\n      const linkEl = createPrefetchLink(link.href);\n      document.head.appendChild(linkEl);\n    }\n  };\n\n  const prefetchLinks = Array.from(document.querySelectorAll(selector));\n  for (let link of prefetchLinks) {\n    link.addEventListener(\"mouseenter\", onHover, { once: true, passive: true });\n    link.addEventListener(\"touchstart\", onHover, { once: true, passive: true });\n  }\n};\n",[21,803,804,817,861,871,881,885,893,915,919,944,966,970,980,992,1002,1010,1015,1019,1043,1061,1065,1084,1095,1110,1122,1128,1133,1138,1162,1182,1209,1231,1236],{"__ignoreMap":36},[40,805,806,808,810,813,815],{"class":42,"line":43},[40,807,468],{"class":46},[40,809,471],{"class":46},[40,811,812],{"class":61}," usePrefetch",[40,814,54],{"class":46},[40,816,479],{"class":57},[40,818,819,822,825,828,831,834,836,839,841,843,845,848,850,852,854,857,859],{"class":42,"line":75},[40,820,821],{"class":57},"  { ",[40,823,824],{"class":99},"selector",[40,826,827],{"class":57},", ",[40,829,830],{"class":99},"as",[40,832,833],{"class":57}," }",[40,835,487],{"class":46},[40,837,838],{"class":57}," { ",[40,840,824],{"class":99},[40,842,487],{"class":46},[40,844,490],{"class":50},[40,846,847],{"class":57},"; ",[40,849,830],{"class":99},[40,851,487],{"class":46},[40,853,490],{"class":50},[40,855,856],{"class":57}," } ",[40,858,607],{"class":46},[40,860,109],{"class":57},[40,862,863,866,869],{"class":42,"line":82},[40,864,865],{"class":57},"    selector: ",[40,867,868],{"class":68},"\"a[data-prefetch]\"",[40,870,493],{"class":57},[40,872,873,876,879],{"class":42,"line":112},[40,874,875],{"class":57},"    as: ",[40,877,878],{"class":68},"\"document\"",[40,880,493],{"class":57},[40,882,883],{"class":42,"line":132},[40,884,159],{"class":57},[40,886,887,889,891],{"class":42,"line":139},[40,888,103],{"class":57},[40,890,106],{"class":46},[40,892,109],{"class":57},[40,894,895,898,901,904,907,909,912],{"class":42,"line":150},[40,896,897],{"class":57},"  window.prefetchedLinks ",[40,899,900],{"class":46},"??=",[40,902,903],{"class":46}," new",[40,905,906],{"class":61}," Set",[40,908,706],{"class":57},[40,910,911],{"class":50},"string",[40,913,914],{"class":57},">();\n",[40,916,917],{"class":42,"line":156},[40,918,79],{"emptyLinePlaceholder":78},[40,920,921,924,927,929,931,934,936,938,940,942],{"class":42,"line":162},[40,922,923],{"class":46},"  const",[40,925,926],{"class":61}," createPrefetchLink",[40,928,54],{"class":46},[40,930,503],{"class":57},[40,932,933],{"class":99},"url",[40,935,487],{"class":46},[40,937,490],{"class":50},[40,939,103],{"class":57},[40,941,106],{"class":46},[40,943,109],{"class":57},[40,945,946,949,952,954,956,959,961,964],{"class":42,"line":562},[40,947,948],{"class":46},"    const",[40,950,951],{"class":50}," link",[40,953,54],{"class":46},[40,955,58],{"class":57},[40,957,958],{"class":61},"createElement",[40,960,65],{"class":57},[40,962,963],{"class":68},"\"link\"",[40,965,72],{"class":57},[40,967,968],{"class":42,"line":567},[40,969,79],{"emptyLinePlaceholder":78},[40,971,972,975,977],{"class":42,"line":583},[40,973,974],{"class":57},"    link.href ",[40,976,607],{"class":46},[40,978,979],{"class":57}," url;\n",[40,981,982,985,987,990],{"class":42,"line":588},[40,983,984],{"class":57},"    link.rel ",[40,986,607],{"class":46},[40,988,989],{"class":68}," \"prefetch\"",[40,991,225],{"class":57},[40,993,994,997,999],{"class":42,"line":601},[40,995,996],{"class":57},"    link.as ",[40,998,607],{"class":46},[40,1000,1001],{"class":57}," as;\n",[40,1003,1004,1007],{"class":42,"line":619},[40,1005,1006],{"class":46},"    return",[40,1008,1009],{"class":57}," link;\n",[40,1011,1012],{"class":42,"line":627},[40,1013,1014],{"class":57},"  };\n",[40,1016,1017],{"class":42,"line":643},[40,1018,79],{"emptyLinePlaceholder":78},[40,1020,1021,1023,1026,1028,1030,1032,1034,1037,1039,1041],{"class":42,"line":649},[40,1022,923],{"class":46},[40,1024,1025],{"class":61}," onHover",[40,1027,54],{"class":46},[40,1029,503],{"class":57},[40,1031,539],{"class":99},[40,1033,487],{"class":46},[40,1035,1036],{"class":61}," Event",[40,1038,103],{"class":57},[40,1040,106],{"class":46},[40,1042,109],{"class":57},[40,1044,1045,1047,1049,1051,1054,1056,1059],{"class":42,"line":654},[40,1046,948],{"class":46},[40,1048,951],{"class":50},[40,1050,54],{"class":46},[40,1052,1053],{"class":57}," e.target ",[40,1055,830],{"class":46},[40,1057,1058],{"class":61}," HTMLAnchorElement",[40,1060,225],{"class":57},[40,1062,1063],{"class":42,"line":666},[40,1064,79],{"emptyLinePlaceholder":78},[40,1066,1067,1070,1072,1075,1078,1081],{"class":42,"line":681},[40,1068,1069],{"class":46},"    if",[40,1071,503],{"class":57},[40,1073,1074],{"class":46},"!",[40,1076,1077],{"class":57},"window.prefetchedLinks.",[40,1079,1080],{"class":61},"has",[40,1082,1083],{"class":57},"(link.href)) {\n",[40,1085,1086,1089,1092],{"class":42,"line":686},[40,1087,1088],{"class":57},"      window.prefetchedLinks.",[40,1090,1091],{"class":61},"add",[40,1093,1094],{"class":57},"(link.href);\n",[40,1096,1098,1101,1104,1106,1108],{"class":42,"line":1097},23,[40,1099,1100],{"class":46},"      const",[40,1102,1103],{"class":50}," linkEl",[40,1105,54],{"class":46},[40,1107,926],{"class":61},[40,1109,1094],{"class":57},[40,1111,1113,1116,1119],{"class":42,"line":1112},24,[40,1114,1115],{"class":57},"      document.head.",[40,1117,1118],{"class":61},"appendChild",[40,1120,1121],{"class":57},"(linkEl);\n",[40,1123,1125],{"class":42,"line":1124},25,[40,1126,1127],{"class":57},"    }\n",[40,1129,1131],{"class":42,"line":1130},26,[40,1132,1014],{"class":57},[40,1134,1136],{"class":42,"line":1135},27,[40,1137,79],{"emptyLinePlaceholder":78},[40,1139,1141,1143,1146,1148,1151,1153,1156,1159],{"class":42,"line":1140},28,[40,1142,923],{"class":46},[40,1144,1145],{"class":50}," prefetchLinks",[40,1147,54],{"class":46},[40,1149,1150],{"class":57}," Array.",[40,1152,454],{"class":61},[40,1154,1155],{"class":57},"(document.",[40,1157,1158],{"class":61},"querySelectorAll",[40,1160,1161],{"class":57},"(selector));\n",[40,1163,1165,1168,1170,1173,1176,1179],{"class":42,"line":1164},29,[40,1166,1167],{"class":46},"  for",[40,1169,503],{"class":57},[40,1171,1172],{"class":46},"let",[40,1174,1175],{"class":57}," link ",[40,1177,1178],{"class":46},"of",[40,1180,1181],{"class":57}," prefetchLinks) {\n",[40,1183,1185,1188,1190,1192,1195,1198,1201,1204,1206],{"class":42,"line":1184},30,[40,1186,1187],{"class":57},"    link.",[40,1189,88],{"class":61},[40,1191,65],{"class":57},[40,1193,1194],{"class":68},"\"mouseenter\"",[40,1196,1197],{"class":57},", onHover, { once: ",[40,1199,1200],{"class":50},"true",[40,1202,1203],{"class":57},", passive: ",[40,1205,1200],{"class":50},[40,1207,1208],{"class":57}," });\n",[40,1210,1212,1214,1216,1218,1221,1223,1225,1227,1229],{"class":42,"line":1211},31,[40,1213,1187],{"class":57},[40,1215,88],{"class":61},[40,1217,65],{"class":57},[40,1219,1220],{"class":68},"\"touchstart\"",[40,1222,1197],{"class":57},[40,1224,1200],{"class":50},[40,1226,1203],{"class":57},[40,1228,1200],{"class":50},[40,1230,1208],{"class":57},[40,1232,1234],{"class":42,"line":1233},32,[40,1235,159],{"class":57},[40,1237,1239],{"class":42,"line":1238},33,[40,1240,689],{"class":57},[691,1242,694],{"id":693},[31,1244,1248],{"className":1245,"code":1246,"language":1247,"meta":36,"style":36},"language-html shiki shiki-themes github-dark","\u003Ca href=\"\u002Fsome-path\" data-prefetch>...\u003C\u002Fa>\n\u003Cscript>\n  import { usePrefetch } from \"...\"; \u002F\u002F make sure you have a build step since you can't import TS code :)\n  usePrefetch();\n\u003C\u002Fscript>\n","html",[21,1249,1250,1274,1282,1300,1308],{"__ignoreMap":36},[40,1251,1252,1254,1256,1259,1261,1264,1267,1270,1272],{"class":42,"line":43},[40,1253,706],{"class":57},[40,1255,15],{"class":709},[40,1257,1258],{"class":61}," href",[40,1260,607],{"class":57},[40,1262,1263],{"class":68},"\"\u002Fsome-path\"",[40,1265,1266],{"class":61}," data-prefetch",[40,1268,1269],{"class":57},">...\u003C\u002F",[40,1271,15],{"class":709},[40,1273,724],{"class":57},[40,1275,1276,1278,1280],{"class":42,"line":75},[40,1277,706],{"class":57},[40,1279,710],{"class":709},[40,1281,724],{"class":57},[40,1283,1284,1287,1290,1292,1295,1297],{"class":42,"line":82},[40,1285,1286],{"class":46},"  import",[40,1288,1289],{"class":57}," { usePrefetch } ",[40,1291,454],{"class":46},[40,1293,1294],{"class":68}," \"...\"",[40,1296,847],{"class":57},[40,1298,1299],{"class":135},"\u002F\u002F make sure you have a build step since you can't import TS code :)\n",[40,1301,1302,1305],{"class":42,"line":112},[40,1303,1304],{"class":61},"  usePrefetch",[40,1306,1307],{"class":57},"();\n",[40,1309,1310,1312,1314],{"class":42,"line":132},[40,1311,776],{"class":57},[40,1313,710],{"class":709},[40,1315,724],{"class":57},[167,1317,1318],{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":36,"searchDepth":75,"depth":75,"links":1320},[1321],{"id":693,"depth":75,"text":694},"Prefetch a page before the visitor clicks it. This TypeScript helper watches hover on any link marked data-prefetch, then appends a rel=prefetch tag once per URL.",{},"\u002Fsnippets\u002Fprefetch-links",{"title":796,"description":1322},"snippets\u002Fprefetch-links","typescript, dom, performance","nmw_PLr3Nl59ylNJhXSEFoE28PgAEJFzJXYx6klUc6Q",{"id":1330,"title":1331,"body":1332,"description":1610,"draft":173,"extension":174,"lastModified":175,"meta":1611,"navigation":78,"path":1612,"seo":1613,"stem":1614,"tags":1615,"__hash__":1616},"snippets\u002Fsnippets\u002Frecursive-partial-type.md","Recursive Partial Type",{"type":8,"value":1333,"toc":1607},[1334,1337,1403,1405,1596,1604],[11,1335,1336],{},"Sometimes we would like to derive a deeply nested partial\u002Foptional type from an\nexisting type (without modifying it). This simple type util can come in handy\nfor that:",[31,1338,1340],{"className":33,"code":1339,"language":35,"meta":36,"style":36},"type RecursivePartial\u003CT> = {\n  [P in keyof T]?: RecursivePartial\u003CT[P]>;\n};\n",[21,1341,1342,1362,1399],{"__ignoreMap":36},[40,1343,1344,1347,1350,1352,1355,1358,1360],{"class":42,"line":43},[40,1345,1346],{"class":46},"type",[40,1348,1349],{"class":61}," RecursivePartial",[40,1351,706],{"class":57},[40,1353,1354],{"class":61},"T",[40,1356,1357],{"class":57},"> ",[40,1359,607],{"class":46},[40,1361,109],{"class":57},[40,1363,1364,1367,1370,1373,1376,1379,1382,1385,1387,1389,1391,1394,1396],{"class":42,"line":75},[40,1365,1366],{"class":57},"  [",[40,1368,1369],{"class":61},"P",[40,1371,1372],{"class":46}," in",[40,1374,1375],{"class":46}," keyof",[40,1377,1378],{"class":61}," T",[40,1380,1381],{"class":57},"]",[40,1383,1384],{"class":46},"?:",[40,1386,1349],{"class":61},[40,1388,706],{"class":57},[40,1390,1354],{"class":61},[40,1392,1393],{"class":57},"[",[40,1395,1369],{"class":61},[40,1397,1398],{"class":57},"]>;\n",[40,1400,1401],{"class":42,"line":82},[40,1402,689],{"class":57},[691,1404,694],{"id":693},[31,1406,1408],{"className":33,"code":1407,"language":35,"meta":36,"style":36},"type PointCoord = {\n  x: number;\n  y: number;\n};\n\ntype PointColor = {\n  r: number;\n  g: number;\n  b: number;\n};\n\ntype PointData = {\n  coord: PointCoord;\n  color: PointColor;\n};\n\n\u002F\u002F ❌ Err :( coord, color are partial not it's nested props\ntype partialPoint = Partial\u003CPointData>;\n\n\u002F\u002F ✅ All props including the nested ones like x, y are Partial\ntype nestedPartialPoint = RecursivePartial\u003CPointData>;\n",[21,1409,1410,1421,1433,1444,1448,1452,1463,1474,1485,1496,1500,1504,1515,1526,1537,1541,1545,1550,1570,1574,1579],{"__ignoreMap":36},[40,1411,1412,1414,1417,1419],{"class":42,"line":43},[40,1413,1346],{"class":46},[40,1415,1416],{"class":61}," PointCoord",[40,1418,54],{"class":46},[40,1420,109],{"class":57},[40,1422,1423,1426,1428,1431],{"class":42,"line":75},[40,1424,1425],{"class":99},"  x",[40,1427,487],{"class":46},[40,1429,1430],{"class":50}," number",[40,1432,225],{"class":57},[40,1434,1435,1438,1440,1442],{"class":42,"line":82},[40,1436,1437],{"class":99},"  y",[40,1439,487],{"class":46},[40,1441,1430],{"class":50},[40,1443,225],{"class":57},[40,1445,1446],{"class":42,"line":112},[40,1447,689],{"class":57},[40,1449,1450],{"class":42,"line":132},[40,1451,79],{"emptyLinePlaceholder":78},[40,1453,1454,1456,1459,1461],{"class":42,"line":139},[40,1455,1346],{"class":46},[40,1457,1458],{"class":61}," PointColor",[40,1460,54],{"class":46},[40,1462,109],{"class":57},[40,1464,1465,1468,1470,1472],{"class":42,"line":150},[40,1466,1467],{"class":99},"  r",[40,1469,487],{"class":46},[40,1471,1430],{"class":50},[40,1473,225],{"class":57},[40,1475,1476,1479,1481,1483],{"class":42,"line":156},[40,1477,1478],{"class":99},"  g",[40,1480,487],{"class":46},[40,1482,1430],{"class":50},[40,1484,225],{"class":57},[40,1486,1487,1490,1492,1494],{"class":42,"line":162},[40,1488,1489],{"class":99},"  b",[40,1491,487],{"class":46},[40,1493,1430],{"class":50},[40,1495,225],{"class":57},[40,1497,1498],{"class":42,"line":562},[40,1499,689],{"class":57},[40,1501,1502],{"class":42,"line":567},[40,1503,79],{"emptyLinePlaceholder":78},[40,1505,1506,1508,1511,1513],{"class":42,"line":583},[40,1507,1346],{"class":46},[40,1509,1510],{"class":61}," PointData",[40,1512,54],{"class":46},[40,1514,109],{"class":57},[40,1516,1517,1520,1522,1524],{"class":42,"line":588},[40,1518,1519],{"class":99},"  coord",[40,1521,487],{"class":46},[40,1523,1416],{"class":61},[40,1525,225],{"class":57},[40,1527,1528,1531,1533,1535],{"class":42,"line":601},[40,1529,1530],{"class":99},"  color",[40,1532,487],{"class":46},[40,1534,1458],{"class":61},[40,1536,225],{"class":57},[40,1538,1539],{"class":42,"line":619},[40,1540,689],{"class":57},[40,1542,1543],{"class":42,"line":627},[40,1544,79],{"emptyLinePlaceholder":78},[40,1546,1547],{"class":42,"line":643},[40,1548,1549],{"class":135},"\u002F\u002F ❌ Err :( coord, color are partial not it's nested props\n",[40,1551,1552,1554,1557,1559,1562,1564,1567],{"class":42,"line":649},[40,1553,1346],{"class":46},[40,1555,1556],{"class":61}," partialPoint",[40,1558,54],{"class":46},[40,1560,1561],{"class":61}," Partial",[40,1563,706],{"class":57},[40,1565,1566],{"class":61},"PointData",[40,1568,1569],{"class":57},">;\n",[40,1571,1572],{"class":42,"line":654},[40,1573,79],{"emptyLinePlaceholder":78},[40,1575,1576],{"class":42,"line":666},[40,1577,1578],{"class":135},"\u002F\u002F ✅ All props including the nested ones like x, y are Partial\n",[40,1580,1581,1583,1586,1588,1590,1592,1594],{"class":42,"line":681},[40,1582,1346],{"class":46},[40,1584,1585],{"class":61}," nestedPartialPoint",[40,1587,54],{"class":46},[40,1589,1349],{"class":61},[40,1591,706],{"class":57},[40,1593,1566],{"class":61},[40,1595,1569],{"class":57},[11,1597,1598,1599],{},"Original Source:\n",[15,1600,1603],{"href":1601,"rel":1602},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F47914536\u002Fuse-partial-in-nested-property-with-typescript",[19],"Stackoverflow",[167,1605,1606],{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":36,"searchDepth":75,"depth":75,"links":1608},[1609],{"id":693,"depth":75,"text":694},"A TypeScript utility type that makes every property optional at every level of nesting. RecursivePartial maps over the keys and recurses without touching the source.",{},"\u002Fsnippets\u002Frecursive-partial-type",{"title":1331,"description":1610},"snippets\u002Frecursive-partial-type","typescript, util, type","53GTr-s93U-NfyletsB8hs9Q5tDqAYprwyaYg2LD-jE",{"id":1618,"title":1619,"body":1620,"description":1993,"draft":173,"extension":174,"lastModified":175,"meta":1994,"navigation":78,"path":1995,"seo":1996,"stem":1997,"tags":1998,"__hash__":1999},"snippets\u002Fsnippets\u002Fsquoosh-image-convert.md","Shell script to convert PNGs into AVIF\u002FWEBP using Squoosh CLI",{"type":8,"value":1621,"toc":1990},[1622,1967,1969,1987],[31,1623,1625],{"className":391,"code":1624,"language":393,"meta":36,"style":36},"#!\u002Fbin\u002Fbash\nif ! [ -x \"$(command -v npx)\" ]; then\n    echo \"npm isn't installed.\" >\u002Fdev\u002Fnull >&2\n    exit 1\nfi\n\n# TODO add other formats ex: webp\navif() {\n    # customise parameters as needed\n    local avif_options='{\"quality\": \"30\", \"effort\": \"4\"}'\n    npx @squoosh\u002Fcli --avif \"$avif_options\" $1\n}\n\nformat=$1\nif [ -z \"$format\" ]; then\n    echo \"Format arg not specified. pass avif or webp as argument to the script.\" >\u002Fdev\u002Fnull >&2\n    exit 1\nfi\nif [[ \"$format\" != \"avif\" ]]; then\n    echo \"Invalid format specified\" >&2\n    exit 1\nfi\n\nfor image in *.png; do\n    base_name=${image%%.*}\n    test_file=\"$base_name.avif\"\n    if [[ ! -f $test_file ]]; then\n        avif $image\n    else\n        echo \"$test_file already exists. Skipping...\"\n    fi\ndone\n",[21,1626,1627,1632,1664,1681,1689,1694,1698,1703,1711,1716,1729,1752,1756,1760,1770,1790,1803,1809,1813,1837,1846,1852,1856,1860,1879,1900,1915,1931,1939,1944,1957,1962],{"__ignoreMap":36},[40,1628,1629],{"class":42,"line":43},[40,1630,1631],{"class":135},"#!\u002Fbin\u002Fbash\n",[40,1633,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661],{"class":42,"line":75},[40,1635,1636],{"class":46},"if",[40,1638,1639],{"class":46}," !",[40,1641,1642],{"class":57}," [ ",[40,1644,1645],{"class":46},"-x",[40,1647,1648],{"class":68}," \"$(",[40,1650,1651],{"class":50},"command",[40,1653,1654],{"class":50}," -v",[40,1656,1657],{"class":68}," npx)\"",[40,1659,1660],{"class":57}," ]; ",[40,1662,1663],{"class":46},"then\n",[40,1665,1666,1669,1672,1675,1678],{"class":42,"line":82},[40,1667,1668],{"class":50},"    echo",[40,1670,1671],{"class":68}," \"npm isn't installed.\"",[40,1673,1674],{"class":46}," >",[40,1676,1677],{"class":68},"\u002Fdev\u002Fnull",[40,1679,1680],{"class":46}," >&2\n",[40,1682,1683,1686],{"class":42,"line":112},[40,1684,1685],{"class":50},"    exit",[40,1687,1688],{"class":50}," 1\n",[40,1690,1691],{"class":42,"line":132},[40,1692,1693],{"class":46},"fi\n",[40,1695,1696],{"class":42,"line":139},[40,1697,79],{"emptyLinePlaceholder":78},[40,1699,1700],{"class":42,"line":150},[40,1701,1702],{"class":135},"# TODO add other formats ex: webp\n",[40,1704,1705,1708],{"class":42,"line":156},[40,1706,1707],{"class":61},"avif",[40,1709,1710],{"class":57},"() {\n",[40,1712,1713],{"class":42,"line":162},[40,1714,1715],{"class":135},"    # customise parameters as needed\n",[40,1717,1718,1721,1724,1726],{"class":42,"line":562},[40,1719,1720],{"class":46},"    local",[40,1722,1723],{"class":57}," avif_options",[40,1725,607],{"class":46},[40,1727,1728],{"class":68},"'{\"quality\": \"30\", \"effort\": \"4\"}'\n",[40,1730,1731,1734,1737,1740,1743,1746,1749],{"class":42,"line":567},[40,1732,1733],{"class":61},"    npx",[40,1735,1736],{"class":68}," @squoosh\u002Fcli",[40,1738,1739],{"class":50}," --avif",[40,1741,1742],{"class":68}," \"",[40,1744,1745],{"class":57},"$avif_options",[40,1747,1748],{"class":68},"\"",[40,1750,1751],{"class":99}," $1\n",[40,1753,1754],{"class":42,"line":583},[40,1755,245],{"class":57},[40,1757,1758],{"class":42,"line":588},[40,1759,79],{"emptyLinePlaceholder":78},[40,1761,1762,1765,1767],{"class":42,"line":601},[40,1763,1764],{"class":57},"format",[40,1766,607],{"class":46},[40,1768,1769],{"class":99},"$1\n",[40,1771,1772,1774,1776,1779,1781,1784,1786,1788],{"class":42,"line":619},[40,1773,1636],{"class":46},[40,1775,1642],{"class":57},[40,1777,1778],{"class":46},"-z",[40,1780,1742],{"class":68},[40,1782,1783],{"class":57},"$format",[40,1785,1748],{"class":68},[40,1787,1660],{"class":57},[40,1789,1663],{"class":46},[40,1791,1792,1794,1797,1799,1801],{"class":42,"line":627},[40,1793,1668],{"class":50},[40,1795,1796],{"class":68}," \"Format arg not specified. pass avif or webp as argument to the script.\"",[40,1798,1674],{"class":46},[40,1800,1677],{"class":68},[40,1802,1680],{"class":46},[40,1804,1805,1807],{"class":42,"line":643},[40,1806,1685],{"class":50},[40,1808,1688],{"class":50},[40,1810,1811],{"class":42,"line":649},[40,1812,1693],{"class":46},[40,1814,1815,1817,1820,1822,1824,1826,1829,1832,1835],{"class":42,"line":654},[40,1816,1636],{"class":46},[40,1818,1819],{"class":57}," [[ ",[40,1821,1748],{"class":68},[40,1823,1783],{"class":57},[40,1825,1748],{"class":68},[40,1827,1828],{"class":46}," !=",[40,1830,1831],{"class":68}," \"avif\"",[40,1833,1834],{"class":57}," ]]; ",[40,1836,1663],{"class":46},[40,1838,1839,1841,1844],{"class":42,"line":666},[40,1840,1668],{"class":50},[40,1842,1843],{"class":68}," \"Invalid format specified\"",[40,1845,1680],{"class":46},[40,1847,1848,1850],{"class":42,"line":681},[40,1849,1685],{"class":50},[40,1851,1688],{"class":50},[40,1853,1854],{"class":42,"line":686},[40,1855,1693],{"class":46},[40,1857,1858],{"class":42,"line":1097},[40,1859,79],{"emptyLinePlaceholder":78},[40,1861,1862,1865,1868,1871,1874,1876],{"class":42,"line":1112},[40,1863,1864],{"class":46},"for",[40,1866,1867],{"class":57}," image ",[40,1869,1870],{"class":46},"in",[40,1872,1873],{"class":68}," *.png",[40,1875,847],{"class":57},[40,1877,1878],{"class":46},"do\n",[40,1880,1881,1884,1886,1889,1892,1895,1898],{"class":42,"line":1124},[40,1882,1883],{"class":57},"    base_name",[40,1885,607],{"class":46},[40,1887,1888],{"class":57},"${image",[40,1890,1891],{"class":46},"%%",[40,1893,1894],{"class":57},".",[40,1896,1897],{"class":46},"*",[40,1899,245],{"class":57},[40,1901,1902,1905,1907,1909,1912],{"class":42,"line":1130},[40,1903,1904],{"class":57},"    test_file",[40,1906,607],{"class":46},[40,1908,1748],{"class":68},[40,1910,1911],{"class":57},"$base_name",[40,1913,1914],{"class":68},".avif\"\n",[40,1916,1917,1919,1921,1923,1926,1929],{"class":42,"line":1135},[40,1918,1069],{"class":46},[40,1920,1819],{"class":57},[40,1922,1074],{"class":46},[40,1924,1925],{"class":46}," -f",[40,1927,1928],{"class":57}," $test_file ]]; ",[40,1930,1663],{"class":46},[40,1932,1933,1936],{"class":42,"line":1140},[40,1934,1935],{"class":61},"        avif",[40,1937,1938],{"class":57}," $image\n",[40,1940,1941],{"class":42,"line":1164},[40,1942,1943],{"class":46},"    else\n",[40,1945,1946,1949,1951,1954],{"class":42,"line":1184},[40,1947,1948],{"class":50},"        echo",[40,1950,1742],{"class":68},[40,1952,1953],{"class":57},"$test_file",[40,1955,1956],{"class":68}," already exists. Skipping...\"\n",[40,1958,1959],{"class":42,"line":1211},[40,1960,1961],{"class":46},"    fi\n",[40,1963,1964],{"class":42,"line":1233},[40,1965,1966],{"class":46},"done\n",[691,1968,694],{"id":693},[31,1970,1972],{"className":391,"code":1971,"language":393,"meta":36,"style":36},"# Run this script file in the directory where you have png files\n.\u002Fsquoosh.sh avif\n",[21,1973,1974,1979],{"__ignoreMap":36},[40,1975,1976],{"class":42,"line":43},[40,1977,1978],{"class":135},"# Run this script file in the directory where you have png files\n",[40,1980,1981,1984],{"class":42,"line":75},[40,1982,1983],{"class":61},".\u002Fsquoosh.sh",[40,1985,1986],{"class":68}," avif\n",[167,1988,1989],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":75,"depth":75,"links":1991},[1992],{"id":693,"depth":75,"text":694},"A bash script that converts every PNG in a folder to AVIF with the Squoosh CLI. It checks for npx first, reads the format from an argument, and tunes quality.",{},"\u002Fsnippets\u002Fsquoosh-image-convert",{"title":1619,"description":1993},"snippets\u002Fsquoosh-image-convert","squoosh, image optimisations, shell, avif, webp","7daqRHpyNA8AXJ3EyyL8Mb8Wo90l8Eaxq58GuVXVOLY",{"id":2001,"title":2002,"body":2003,"description":2095,"draft":173,"extension":174,"lastModified":175,"meta":2096,"navigation":78,"path":2097,"seo":2098,"stem":2099,"tags":2100,"__hash__":2101},"snippets\u002Fsnippets\u002Funregister-serviceworkers.md","Unregister all Service Workers",{"type":8,"value":2004,"toc":2093},[2005,2090],[31,2006,2010],{"className":2007,"code":2008,"language":2009,"meta":36,"style":36},"language-js shiki shiki-themes github-dark","if (\"serviceWorker\" in navigator) {\n  navigator.serviceWorker.getRegistrations().then(function (registrations) {\n    for (let registration of registrations) {\n      registration.unregister();\n    }\n  });\n}\n","js",[21,2011,2012,2026,2051,2068,2078,2082,2086],{"__ignoreMap":36},[40,2013,2014,2016,2018,2021,2023],{"class":42,"line":43},[40,2015,1636],{"class":46},[40,2017,503],{"class":57},[40,2019,2020],{"class":68},"\"serviceWorker\"",[40,2022,1372],{"class":46},[40,2024,2025],{"class":57}," navigator) {\n",[40,2027,2028,2031,2034,2036,2039,2041,2044,2046,2049],{"class":42,"line":75},[40,2029,2030],{"class":57},"  navigator.serviceWorker.",[40,2032,2033],{"class":61},"getRegistrations",[40,2035,123],{"class":57},[40,2037,2038],{"class":61},"then",[40,2040,65],{"class":57},[40,2042,2043],{"class":46},"function",[40,2045,503],{"class":57},[40,2047,2048],{"class":99},"registrations",[40,2050,547],{"class":57},[40,2052,2053,2056,2058,2060,2063,2065],{"class":42,"line":82},[40,2054,2055],{"class":46},"    for",[40,2057,503],{"class":57},[40,2059,1172],{"class":46},[40,2061,2062],{"class":57}," registration ",[40,2064,1178],{"class":46},[40,2066,2067],{"class":57}," registrations) {\n",[40,2069,2070,2073,2076],{"class":42,"line":112},[40,2071,2072],{"class":57},"      registration.",[40,2074,2075],{"class":61},"unregister",[40,2077,1307],{"class":57},[40,2079,2080],{"class":42,"line":132},[40,2081,1127],{"class":57},[40,2083,2084],{"class":42,"line":139},[40,2085,646],{"class":57},[40,2087,2088],{"class":42,"line":150},[40,2089,245],{"class":57},[167,2091,2092],{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":75,"depth":75,"links":2094},[],"Unregister every service worker a page holds. Loop over the result of navigator.serviceWorker.getRegistrations and unregister each one, to undo a bad deploy.",{},"\u002Fsnippets\u002Funregister-serviceworkers",{"title":2002,"description":2095},"snippets\u002Funregister-serviceworkers","serviceworker, javascript","EiAWA_DcFtwsbt3O3K3h7Ps_P5oIzwRg7FvF3RaNkOQ",1788101291944]