CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 5.14.1"/><meta name="theme-color" content="#f3c868"/><meta data-react-helmet="true" name="description" content="Personal blog about frontend web development, with a focus on accessibility, web components and functional reactive programming."/><meta data-react-helmet="true" property="og:url" content="https://fedknu.com/colophon/"/><meta data-react-helmet="true" property="og:title" content="Colophon"/><meta data-react-helmet="true" name="og:description" content="Personal blog about frontend web development, with a focus on accessibility, web components and functional reactive programming."/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="twitter:creator" content="@fedknu"/><meta data-react-helmet="true" name="twitter:title" content="Colophon"/><meta data-react-helmet="true" name="twitter:description" content="Personal blog about frontend web development, with a focus on accessibility, web components and functional reactive programming."/><style data-href="/styles.243e1163fbfb371fd411.css" data-identity="gatsby-global-css">@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:200;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-ExtraLight.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:200;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:300;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-Light.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:300;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-LightItalic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:400;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:400;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-RegularItalic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:500;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-Medium.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:500;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-MediumItalic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:600;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-SemiBold.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:600;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:700;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-Bold.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:700;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-BoldItalic.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-weight:800;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-ExtraBold.woff2) format("woff2")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:italic;font-weight:800;src:url(/fonts/Atkinson-Hyperlegible-Next/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2) format("woff2")}*,:after,:before{box-sizing:border-box}.dmsbls0{line-height:1.4}.dmsbls0,.dmsbls1{color:#1f2937;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.dmsbls1{font-size:22px;font-weight:300;line-height:1.75}.dmsbls2:focus{border-radius:1px;outline:3px solid #d14;outline-offset:2px}.dmsbls2:focus,.dmsbls2:focus:hover{border-bottom-style:none}.dmsbls3{border-bottom:1px solid #0572e6;color:#0572e6;padding-bottom:1px;text-decoration:none;word-break:break-word}.dmsbls3:hover{border-bottom:3px solid #0572e6}.dmsbls4{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fc34ni0{margin:24px 0 60px;text-align:center}.fc34ni1{font-weight:600;margin:0 0 10px}.fc34ni2 ol,.fc34ni2 p,.fc34ni2 td,.fc34ni2 th,.fc34ni2 ul{color:#1f2937;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:22px;font-weight:300;line-height:1.75}.fc34ni2 td,.fc34ni2 th{padding:8px;text-align:center}.fc34ni2 th{background-color:#e1e1e1;font-weight:600}.fc34ni2 table{border-collapse:collapse}.fc34ni2 table,.fc34ni2 td,.fc34ni2 th{border:1px solid #526b8d}.fc34ni2 a{border-bottom:1px solid #0572e6;color:#0572e6;padding-bottom:1px;text-decoration:none;word-break:break-word}.fc34ni2 a:hover{border-bottom:3px solid #0572e6}.fc34ni2 a:focus{border-radius:1px;outline:3px solid #d14;outline-offset:2px}.fc34ni2 a:focus,.fc34ni2 a:focus:hover{border-bottom-style:none}.fc34ni2 h1,.fc34ni2 h2,.fc34ni2 h3,.fc34ni2 h4,.fc34ni2 h5,.fc34ni2 h6{color:#1f2937;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:600;line-height:1.4;margin:50px 0 0}.fc34ni2 h1{font-size:32px}.fc34ni2 h2{font-size:26px}.fc34ni2 h3{font-size:22px}.fc34ni2 b,.fc34ni2 strong{font-weight:600}.fc34ni2 blockquote{background-color:#fafafa;border:1px solid #526b8d;box-shadow:8px 8px 0 1px #e1e1e1;margin:48px 96px;padding:16px 24px}.fc34ni2 blockquote p{color:#1f2937;margin:0}.fc34ni2 img{max-width:100%}.fc34ni2 a img{border-bottom-style:none}.fc34ni2 a:hover img{padding:0}.fc34ni2 iframe[src^="https://www.youtube.com"]{display:block;margin:0 auto}.fc34ni2 .gatsby-resp-image-figure,.fc34ni2 p>.gatsby-resp-image-wrapper{margin-bottom:48px;margin-top:48px}.fc34ni2 .gatsby-resp-image-figcaption{color:#1f2937;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:300;line-height:1.75;margin-top:8px;text-align:center}.fc34ni2 code,.fc34ni2 kbd,.fc34ni2 pre,.fc34ni2 samp{font-family:SFMono-Medium,SF Mono,Segoe UI Mono,Roboto Mono,Ubuntu Mono,Menlo,Consolas,Courier,monospace}.fc34ni2 code:not([class=grvsc-code]){background-color:rgba(27,31,35,.05);border-radius:3px;color:#d14;font-size:80%;font-weight:400;margin:0;padding:3px 6px;white-space:nowrap}.fc34ni2 a code:not([class=grvsc-code]){color:inherit}.fc34ni2 pre.grvsc-container{line-height:1.75} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.px9xea0:not(:last-child){margin-bottom:44px}.px9xea1{font-size:22px;font-weight:400;margin:0}.px9xea2{margin:5px 0 0}._1kjbxuk0{border-radius:3px;color:#fff;display:inline-block;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:13px;line-height:1;padding:4px 5px 2px;text-transform:uppercase;white-space:nowrap}._1kjbxuk1{background-color:#526b8d}._1kjbxuk2{background-color:#0572e6}._1kjbxuk3{background-color:#3d854d}._1kjbxuk4{background-color:#d43900}._1kjbxuk5{background-color:#f9ca5e;color:#4a3712}._1kjbxuk6{background-color:#7659b6}._19o0aq30{margin:0 0 5px}._19o0aq31{color:#526b8d;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;margin-right:10px;text-transform:uppercase}.a0zrw70{align-items:center;background-color:#d14;border-radius:3px;display:inline-flex;height:50px;left:0;margin:8px;padding:0 16px;position:fixed;top:0;transform:translateY(-58px);z-index:10}.a0zrw70:has(>a:focus){transform:translateY(0)}.a0zrw71{color:#fff;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:18px;font-weight:300;outline-offset:4px}.a0zrw72{margin:0 auto;max-width:1024px;padding:36px 24px 48px}.a0zrw73{background-color:#fafafa;border-bottom:1px solid #e1e1e1}.a0zrw73:before{background-color:#f9ca5e;content:"";display:block;height:3px;width:100%}.a0zrw74{align-items:center;display:flex;font-family:Atkinson Hyperlegible Next,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Noto Sans,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:18px;justify-content:space-between;line-height:1;overflow-x:scroll;padding:16px 24px}.a0zrw75{color:#344563;text-decoration:none}.a0zrw75:after{background:currentColor;content:"";display:block;height:2px;transition:width .3s;width:0}.a0zrw75:hover:after{width:100%}.a0zrw76:after{background:currentColor;content:"";display:block;height:2px;width:100%}.a0zrw77{align-items:flex-start;display:flex;margin-right:40px}.a0zrw78{height:32px;margin-right:12px}.a0zrw79{white-space:nowrap}.a0zrw7a{font-size:18px;font-weight:600}.a0zrw7b{color:#526b8d;font-size:14px;font-weight:300;margin-top:3px}.a0zrw7c{align-items:center;display:flex;justify-content:flex-end;margin:0;padding-left:0}.a0zrw7d{display:inline-block;list-style-type:none;margin-right:28px}@media screen and (min-width:768px){.a0zrw74{margin:0 auto;max-width:1024px;overflow-x:hidden}}</style><link rel="icon" href="/favicon-32x32.png?v=f062a85faff3c73910999d9a35af60c4" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=f062a85faff3c73910999d9a35af60c4"/><link rel="alternate" type="application/rss+xml" title="fedknu.com" href="/rss.xml"/><title data-react-helmet="true">Colophon - fedknu.com</title></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><span class="a0zrw70" data-testid="layout-skip-link-container"><a class="a0zrw71" href="#main" data-testid="layout-skip-link">Skip to main content</a></span><header class="a0zrw73"><nav class="a0zrw74"><a class="a0zrw77 a0zrw75 dmsbls2" data-testid="navigation-logo" href="/"><img class="a0zrw78" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iIzc3QjI1NSIgZD0iTTM1IDM2di01YzAtMy4zMTQtMi42ODYtNi02LTZIMTNjLTMuMzEzIDAtNiAyLjY4Ni02IDZ2NWgyOHoiLz48cGF0aCBmaWxsPSIjRkZEQzVEIiBkPSJNMTYuNjQgMjUuMTA2YzAgLjg5NCAyLjM2IDEuOTkzIDQuMzYgMS45OTNzNC4zNTktMS4wOTkgNC4zNTktMS45OTJWMjEuMjloLTguNzJ2My44MTZ6Ii8+PHBhdGggZmlsbD0iI0Y5Q0E1NSIgZD0iTTE2LjYzMiAyMi45NzNjMS4yMTYgMS4zNzQgMi43MjQgMS43NDYgNC4zNjQgMS43NDYgMS42MzkgMCAzLjE0Ni0uMzczIDQuMzYzLTEuNzQ2di0zLjQ5MWgtOC43Mjh2My40OTF6Ii8+PHBhdGggZmlsbD0iI0ZGREM1RCIgZD0iTTE0LjQ0NCAxMi45MzZjMCAxLjQ0OC0uNzM0IDIuNjIyLTEuNjM5IDIuNjIycy0xLjYzOS0xLjE3NC0xLjYzOS0yLjYyMi43MzQtMi42MjMgMS42MzktMi42MjNjLjkwNS0uMDAxIDEuNjM5IDEuMTc0IDEuNjM5IDIuNjIzbTE2LjM4OSAwYzAgMS40NDgtLjczMyAyLjYyMi0xLjYzOSAyLjYyMi0uOTA1IDAtMS42MzktMS4xNzQtMS42MzktMi42MjJzLjczMy0yLjYyMyAxLjYzOS0yLjYyM2MuOTA2LS4wMDEgMS42MzkgMS4xNzQgMS42MzkgMi42MjMiLz48cGF0aCBmaWxsPSIjRkZEQzVEIiBkPSJNMTIuNDc3IDEzLjk2YzAtNS41ODkgMy44MTYtMTAuMTIxIDguNTIzLTEwLjEyMXM4LjUyMiA0LjUzMiA4LjUyMiAxMC4xMjFTMjUuNzA3IDI0LjA4MSAyMSAyNC4wODFjLTQuNzA2LS4wMDEtOC41MjMtNC41MzItOC41MjMtMTAuMTIxIi8+PHBhdGggZmlsbD0iI0MxNjk0RiIgZD0iTTIxIDIwLjgwMmMtMi43NTQgMC0zLjYtLjcwNS0zLjc0MS0uODQ4LS4yNTYtLjI1Ni0uMjU2LS42NzEgMC0uOTI3LjI0OC0uMjQ4LjY0Ni0uMjU1LjkwMi0uMDIzLjA1Mi4wMzcuNzIxLjQ4NyAyLjgzOS40ODcgMi4yIDAgMi44MzYtLjQ4NSAyLjg0Mi0uNDkuMjU2LS4yNTUuNjU3LS4yNDMuOTEzLjAxNS4yNTYuMjU2LjI0Mi42ODMtLjAxNC45MzgtLjE0MS4xNDMtLjk4Ny44NDgtMy43NDEuODQ4Ii8+PHBhdGggZmlsbD0iI0ZGQUMzMyIgZD0iTTIxIDBjNS42NDggMCA5LjE3OCA0LjY0OCA5LjE3OCA4LjEyMSAwIDMuNDczLS43MDYgNC44NjMtMS40MTIgMy40NzNsLTEuNDEyLTIuNzc4cy00LjIzNSAwLTUuNjQ3LTEuMzljMCAwIDIuMTE4IDQuMTY4LTIuMTE4IDAgMCAwIC43MDYgMi43NzktMy41My0uNjk0IDAgMC0yLjExOCAxLjM4OS0yLjgyNCA0Ljg2Mi0uMTk2Ljk2NC0xLjQxMiAwLTEuNDEyLTMuNDczQzExLjgyMiA0LjY0OCAxNC42NDYgMCAyMSAwIi8+PHBhdGggZmlsbD0iIzY2MjExMyIgZD0iTTE3IDE0Yy0uNTUgMC0xLS40NS0xLTF2LTFjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjFjMCAuNTUtLjQ1IDEtMSAxbTggMGMtLjU1IDAtMS0uNDUtMS0xdi0xYzAtLjU1LjQ1LTEgMS0xczEgLjQ1IDEgMXYxYzAgLjU1LS40NSAxLTEgMSIvPjxwYXRoIGZpbGw9IiNDMTY5NEYiIGQ9Ik0yMS43NSAxNi43NWgtMS41Yy0uNDEzIDAtLjc1LS4zMzctLjc1LS43NXMuMzM3LS43NS43NS0uNzVoMS41Yy40MTMgMCAuNzUuMzM3Ljc1Ljc1cy0uMzM3Ljc1LS43NS43NSIvPjxwYXRoIGZpbGw9IiNFMUU4RUQiIGQ9Ik0zMyAzNWMwIC41NTMtLjQ0NyAxLTEgMUgyMmMtLjU1MyAwLTEtLjQ0Ny0xLTEgMC0uNTUzLjQ0Ny0xIDEtMWgxMGMuNTUzIDAgMSAuNDQ3IDEgMXoiLz48cGF0aCBmaWxsPSIjRTFFOEVEIiBkPSJNMjAuMjQgMjJIMy43NTljLTEuNTI0IDAtMy40NzguNzcxLTIuNDc4IDMuNTMxbDMuMDcyIDguNDc1QzQuMzU0IDM0LjAwNiA0Ljc1IDM2IDcgMzZoMjBsLTQtMTEuMjRjLS40MzgtMS4zMjItMS4yMzUtMi43Ni0yLjc2LTIuNzZ6Ii8+PHBhdGggZmlsbD0iIzk5QUFCNSIgZD0iTTE5LjI0IDIySDIuNzU5Yy0xLjUyNCAwLTMuNDc4Ljc3MS0yLjQ3OCAzLjUzMWwzLjA3MiA4LjQ3NUMzLjM1NCAzNC4wMDYgMy43NSAzNiA2IDM2aDIwbC00LTExLjI0Yy0uNDM4LTEuMzIyLTEuMjM1LTIuNzYtMi43Ni0yLjc2eiIvPjxwYXRoIGZpbGw9IiNFMUU4RUQiIGQ9Ik0xNC4wMTkgMjkuMjgzYy41MjQgMS41NzIuMDk5IDMuMTMtLjk0OSAzLjQ3OS0xLjA0OC4zNS0yLjMyMi0uNjQxLTIuODQ2LTIuMjEzcy0uMDk5LTMuMTMuOTQ5LTMuNDc5YzEuMDQ4LS4zNDkgMi4zMjMuNjQxIDIuODQ2IDIuMjEzek0xOSAyNC43NUgzYy0uNDE0IDAtLjc1LS4zMzYtLjc1LS43NXMuMzM2LS43NS43NS0uNzVoMTZjLjQxNCAwIC43NS4zMzYuNzUuNzVzLS4zMzYuNzUtLjc1Ljc1eiIvPjwvc3ZnPg==" alt="" data-testid="navigation-logo-image"/><span class="a0zrw79" data-testid="navigation-logo-title"><div class="a0zrw7a">F. Knüssel<span class="dmsbls4">: </span></div><div class="a0zrw7b">Frontend Developer</div></span></a><ul class="a0zrw7c"><li class="a0zrw7d"><a class="a0zrw75 dmsbls2" data-testid="layout-navigation-link" href="/about/">About</a></li><li class="a0zrw7d"><a class="a0zrw75 dmsbls2" data-testid="layout-navigation-link" href="/">Blog</a></li><li class="a0zrw7d"><a class="a0zrw75 dmsbls2" data-testid="layout-navigation-link" href="/uses/">Uses</a></li><li class="a0zrw7d"><a class="a0zrw75 dmsbls2" data-testid="layout-navigation-link" href="/now/">Now</a></li><li class="a0zrw7d"><a aria-current="page" class="a0zrw75 dmsbls2 a0zrw76" data-testid="layout-navigation-link" href="/colophon/">Colophon</a></li><li class="a0zrw7d"><a class="a0zrw75 dmsbls2" href="https://github.com/fed" data-testid="layout-navigation-link">GitHub</a></li><li class="a0zrw7d"><a class="a0zrw75 dmsbls2" href="/rss.xml" data-testid="layout-navigation-link">RSS</a></li></ul></nav></header><main class="a0zrw72" id="main" data-testid="layout-content"><article><header><h1 class="fc34ni1 dmsbls0"><span class="">Colophon</span></h1></header><div class="fc34ni2" data-testid="article-body"><p>This site was built with <a href="https://typescriptlang.org">TypeScript</a>, <a href="https://gatsbyjs.com">Gatsby</a>, <a href="https://react.dev">React</a>, <a href="https://vanilla-extract.style">Vanilla Extract</a> and a number of <a href="https://github.com/fed/blog/blob/master/package.json">other packages</a>. All posts are written using <a href="https://www.markdownguide.org/">Markdown</a>.</p> <p>In terms of typography, I'm using the <a href="https://www.brailleinstitute.org/freefont/">Braille Institute's Atkinson Hyperlegible</a> font family for all of the text content ("Next" variant) and code snippets ("Mono" variant). This font focuses on letterform distinction, and it's clear and accessible.</p> <p>The source code for this site is open source and available on <a href="htps://github.com/fed/blog">GitHub</a> and hosted on <a href="https://cloudflare.com">Cloudflare Pages</a>.</p> <p>This website produces less than 0.05 g of CO₂ per per visit, according to <a href="https://websitecarbon.com/website/fedknu-com">Website Carbon Calculator</a> and <a href="https://digitalbeacon.co/report/fedknu-com">Digital Beacon</a>, achieving a carbon footprint rating of A+.</p> <p>All of the content in this blog is original content written by me, none of it is AI generated.</p> <p><img src="https://files.fedknu.com/not-by-ai-badge-inverse.svg" alt="Badge reading: written by human, not by AI"></p> <style class="grvsc-styles"> .grvsc-container { overflow: auto; position: relative; -webkit-overflow-scrolling: touch; padding-top: 1rem; padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem)); padding-bottom: 1rem; padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem)); border-radius: 8px; border-radius: var(--grvsc-border-radius, 8px); font-feature-settings: normal; line-height: 1.4; } .grvsc-code { display: table; } .grvsc-line { display: table-row; box-sizing: border-box; width: 100%; position: relative; } .grvsc-line > * { position: relative; } .grvsc-gutter-pad { display: table-cell; padding-left: 0.75rem; padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2); } .grvsc-gutter { display: table-cell; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .grvsc-gutter::before { content: attr(data-content); } .grvsc-source { display: table-cell; padding-left: 1.5rem; padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)); padding-right: 1.5rem; padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem)); } .grvsc-source:empty::after { content: ' '; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .grvsc-gutter + .grvsc-source { padding-left: 0.75rem; padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2); } /* Line transformer styles */ .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before { content: ' '; position: absolute; width: 100%; } .grvsc-line-diff-add::before { background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2)); } .grvsc-line-diff-del::before { background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2)); } .grvsc-line-number { padding: 0 2px; text-align: right; opacity: 0.7; } </style></div></article></main></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/colophon/";/*]]>*/</script> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-04ee7f5a8cc413847993.js\"],\"component---src-templates-blog-tsx\":[\"/component---src-templates-blog-tsx-6a5dbd7c6d57d02b13fc.js\"],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-1dc445141ef89212cb9b.js\"]}"; </script> <script>window.___webpackCompilationHash="791e8d5abaec47d43517";</script><script src="/webpack-runtime-fe90664acf86a68c61dd.js" async></script><script src="/framework-f90682dfa2bbb8a99674.js" async></script><script src="/app-04ee7f5a8cc413847993.js" async></script><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "ad4da2ebedb74814ba19c0d00468a7a0"}'></script></body></html>