-
Notifications
You must be signed in to change notification settings - Fork 0
/
devdiary.html
1 lines (1 loc) · 21.5 KB
/
devdiary.html
1
<!doctypehtml><html dir=ltr lang=en-NZ xml:lang=en-NZ><meta content="IE=edge"http-equiv=X-UA-Compatible><meta charset=utf-8><meta content="width=device-width,initial-scale=1,minimum-scale=1,viewport-fit=cover"name=viewport><title>sainternet.xyz</title><meta content="Sainternet offers validating, recursive, caching, mostly specification compliant, filtered DNS servers with a zero logging policy served over all your favourite acronyms."name=description><meta content="dns, DNS, 'dns.sainternet.xyz', doh, DoH, dohttps, DoHTTPS, 'doh/3', 'DoH/3', 'dohttp/3', 'DoHTTP/3', dot, DoT, dotls, DoTLS, doq, DoQ, doquic, DoQUIC, 'filtered dns', 'filtered DNS', 'Hayden Pearce', pokedex, Pokedex, 'pokédex', 'Pokédex', saint, sainternet, saint-lascivious, 'sainternet.xyz'"name=keywords><meta content="saint-lascivious, 'Hayden Pearce'"name=author><meta content=#607D8B name=theme-color><meta content=yes name=mobile-web-app-capable><meta content=black name=apple-mobile-web-app-status-bar-style><meta content=sainternet.xyz name=apple-mobile-web-app-title><meta content="connect-src https://www.google-analytics.com www.google-analytics.com; default-src 'self'; img-src 'self' https://www.google-analytics.com www.google-analytics.com; script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"http-equiv=Content-Security-Policy><link href=resources/icons/favicon/favicon.ico rel=icon type=image/x-icon sizes="16x16 24x24 32x32 64x64"><link href=favicon.ico rel=icon type=image/x-icon><link href=resources/icons/favicon/favicon-16x16.png rel=icon type=image/png sizes=16x16><link href=resources/icons/favicon/favicon-24x24.png rel=icon type=image/png sizes=24x24><link href=resources/icons/favicon/favicon-32x32.png rel=icon type=image/png sizes=32x32><link href=resources/icons/android-chrome-48x48.png rel=icon type=image/png sizes=48x48><link href=resources/icons/favicon/favicon-64x64.png rel=icon type=image/png sizes=64x64><link href=resources/icons/android-chrome-72x72.png rel=icon type=image/png sizes=72x72><link href=resources/icons/android-chrome-96x96.png rel=icon type=image/png sizes=96x96><link href=resources/icons/android-chrome-128x128.png rel=icon type=image/png sizes=128x128><link href=resources/icons/android-chrome-192x192.png rel=icon type=image/png sizes=192x192><link href=resources/icons/android-chrome-384x384.png rel=icon type=image/png sizes=384x384><link href=resources/icons/android-chrome-512x512.png rel=icon type=image/png sizes=512x512><link href=resources/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=resources/icons/safari-pinned-tab.svg rel=mask-icon color=#f44336><meta content=resources/icons/mstile-144x144.png name=msapplication-TileImage><meta content=resources/icons/browserconfig.xml name=msapplication-config><meta content=#ef5350 name=msapplication-TileColor><link href=https://sainternet.xyz/devdiary.html rel=canonical><link href=resources/stylesheets/material.blue_grey-red.min.css rel=preload as=style><link href=resources/stylesheets/material.blue_grey-red.min.css rel=stylesheet><link href=resources/stylesheets/sainternet.min.css rel=preload as=style><link href=resources/stylesheets/sainternet.min.css rel=stylesheet><link href=resources/stylesheets/ribbons.min.css rel=preload as=style><link href=resources/stylesheets/ribbons.min.css rel=stylesheet><link href=resources/stylesheets/table.min.css rel=preload as=style><link href=resources/stylesheets/table.min.css rel=stylesheet><link href=resources/stylesheets/datetime.min.css rel=preload as=style><link href=resources/stylesheets/datetime.min.css rel=stylesheet><link href=resources/stylesheets/mono.min.css rel=preload as=style><link href=resources/stylesheets/mono.min.css rel=stylesheet><link href=resources/stylesheets/button_home.min.css rel=preload as=style><link href=resources/stylesheets/button_home.min.css rel=stylesheet><link href=resources/google/webfonts/materialicons/v140/Material-Icons.woff2 rel=preload as=font crossorigin type=font/woff2><link href=resources/google/webfonts/robotomono/v22/RobotoMono-Regular.woff2 rel=preload as=font crossorigin type=font/woff2><link href=resources/google/webfonts/roboto/v30/Roboto-Bold.woff2 rel=preload as=font crossorigin type=font/woff2><link href=resources/google/webfonts/roboto/v30/Roboto-Medium.woff2 rel=preload as=font crossorigin type=font/woff2><link href=resources/google/webfonts/roboto/v30/Roboto-Regular.woff2 rel=preload as=font crossorigin type=font/woff2><link href=resources/fontawesome-free-6.4.0-web/webfonts/fa-brands-400.woff2 rel=preload as=font crossorigin type=font/woff2><link href=resources/google/css/roboto.min.css rel=preload as=style><link href=resources/google/css/roboto.min.css rel=stylesheet><link href=resources/google/css/robotomono.min.css rel=preload as=style><link href=resources/google/css/robotomono.min.css rel=stylesheet><link href=resources/google/css/materialicons.min.css rel=preload as=style><link href=resources/google/css/materialicons.min.css rel=stylesheet><link href=resources/fontawesome-free-6.4.0-web/css/fontawesome.min.css rel=preload as=style><link href=resources/fontawesome-free-6.4.0-web/css/fontawesome.min.css rel=stylesheet><link href=resources/fontawesome-free-6.4.0-web/css/brands.min.css rel=preload as=style><link href=resources/fontawesome-free-6.4.0-web/css/brands.min.css rel=stylesheet><link href=resources/javascript/material.min.js rel=preload as=script><script defer src=resources/javascript/material.min.js></script><link href=resources/javascript/console_wrapper.min.js rel=preload as=script><script defer src=resources/javascript/console_wrapper.min.js></script><link href=resources/javascript/load_fonts.min.js rel=preload as=script><script defer src=resources/javascript/load_fonts.min.js></script><link href=resources/javascript/load_mono_fonts.min.js rel=preload as=script><script defer src=resources/javascript/load_mono_fonts.min.js></script><link href=resources/javascript/toggle_drawer.min.js rel=preload as=script><script defer src=resources/javascript/toggle_drawer.min.js></script><link href=sainternet.min.js rel=preload as=script><script defer src=sainternet.min.js></script><link href=www.googletagmanager.com rel=dns-prefetch><link href=https://www.googletagmanager.com rel=preconnect><link href=resources/javascript/tag_manager.min.js rel=preload as=script><script defer src=resources/javascript/tag_manager.min.js></script><link href=index.html rel=prefetch as=document><link href=index.html rel=prerender><link href=newsandupdates.html rel=prefetch as=document><link href=newsandupdates.html rel=prerender><link href=dns.html rel=prefetch as=document><link href=dns.html rel=prerender><link href=pokedexoverdns.html rel=prefetch as=document><link href=pokedexoverdns.html rel=prerender><link href=projects.html rel=prefetch as=document><link href=projects.html rel=prerender><link href=sainternet.webmanifest rel=manifest><link href=en.wikipedia.org rel=dns-prefetch><link href=developer.mozilla.org rel=dns-prefetch><link href=bulbapedia.bulbgarden.net rel=dns-prefetch><link href=pi-hole.net rel=dns-prefetch><link href=discord.gg rel=dns-prefetch><link href=docs.pi-hole.net rel=dns-prefetch><link href=github.com rel=dns-prefetch><link href=munin-monitoring.org rel=dns-prefetch><link href=www.reddit.com rel=dns-prefetch><body><noscript><iframe height=0 src="https://www.googletagmanager.com/ns.html?id=GTM-5DT44KL"style=display:none;visibility:hidden width=0></iframe></noscript><div class="mdl-js-layout mdl-layout mdl-layout--fixed-header sainternet-layout"><header class="enlift mdl-shadow--2dp mdl-layout__header"><div class=mdl-layout__header-row><span class="embiggen mdl-layout-title"><a href=index.html class="mdl-color-text--primary-contrast subterfuge">sainternet.xyz</a></span><div class=mdl-layout-spacer></div><nav class="mdl-navigation mdl-layout--large-screen-only"><a href=index.html class="embiggen mdl-navigation__link">Home</a> <a href=newsandupdates.html class="embiggen mdl-navigation__link">News and Updates</a> <a href=dns.html class="embiggen mdl-navigation__link">DNS</a> <a href=pokedexoverdns.html class="embiggen mdl-navigation__link">Pokédex over DNS</a> <a href=projects.html class="embiggen mdl-navigation__link">Popular Projects</a> <a href=debug.html class="embiggen mdl-navigation__link">Debug</a></nav></div></header><div class=mdl-layout__drawer><span class="embiggen mdl-layout-title">sainternet.xyz</span><nav class=mdl-navigation><a href=index.html class="embiggen mdl-navigation__link">Home</a> <a href=newsandupdates.html class="embiggen mdl-navigation__link">News and Updates</a> <a href=#devdiary class="embiggen mdl-navigation__link"> <icon class=material-icons>arrow_right</icon> <b>Dev Diary</b></a> <a href=archive.html class="embiggen mdl-navigation__link"> <icon class=material-icons>arrow_right</icon> Archived Posts</a> <a href=dns.html class="embiggen mdl-navigation__link">DNS</a> <a href=pokedexoverdns.html class="embiggen mdl-navigation__link">Pokédex over DNS</a> <a href=projects.html class="embiggen mdl-navigation__link">Popular Projects</a></nav><nav class="mdl-navigation mdl-layout--large-screen-only"><a href=debug.html class="embiggen mdl-navigation__link">Debug</a></nav></div><div class="blue_grey-ribbon ribbon"></div><main class="mdl-layout__content sainternet-main"><div class="mdl-grid sainternet-container"><div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div><div class="enlift mdl-shadow--2dp content mdl-cell mdl-cell--8-col sainternet-navigation"><div class=sainternet-crumbs><a href=index.html class=embiggen>Home</a> > <a href=newsandupdates.html class=embiggen>News and Updates</a> > <a href=devdiary.html class=embiggen><b>Dev Diary</b></a></div></div></div><div class="mdl-grid sainternet-container"id=devdiary><div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div><div class="enlift mdl-shadow--2dp content mdl-cell mdl-cell--8-col sainternet-content"><h3 class=embiggen>Dev Diary</h3><p class="embiggen sainternet-subheader-centered">Inane Ramblings<p>Often about technical topics.<ul><li><a href=devdiary.html#killinghalfmyuserbaseandwhyiddoitagain class=embiggen id=seriousbusiness>Killing Half My Userbase, and Why I’d Do It Again</a><a href=# class="mdl-tooltip mdl-tooltip--top"for=seriousbusiness>True story.</a><li><a href=devdiary.html#idliketothinkimprettyprogressive class=embiggen>I’d Like to Think I’m Pretty Progressive</a><li><a href=devdiary.html#gottagofast class=embiggen>Gotta Go Fast!</a><li><a href=devdiary.html#goingoffline class=embiggen>Going Offline</a></ul></div></div><div class="mdl-grid sainternet-container"id=killinghalfmyuserbaseandwhyiddoitagain><div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div><div class="enlift mdl-shadow--2dp content mdl-cell mdl-cell--8-col sainternet-content"><h3 class=embiggen>Killing Half My Userbase, and Why I’d Do It Again</h3><p class=embiggen id=datetime>first posted on Thursday, 1 June 2023 01:10+12:00 (NZST)<p class="embiggen sainternet-subheader-centered">It Was a Massacre<p>Making the decision to <a href=newsandupdates.html#everycatdeservesscritchesalways>transition to ECDSA</a> certification wasn't an easy one, but I would do it again in a heartbeat.<p>While overall client connections pretty much immediately halved, the number of unsolicited, malformed, malicious or otherwise junk queries dropped by a much larger amount.<p>Secure connections are faster, while maintaining comparable or better security to RSA certification.<p>Bullshit and general fuckery is low.<p>If I have any regret in this regard, it's not doing this sooner.</div></div><div class="mdl-grid sainternet-container"id=idliketothinkimprettyprogressive><div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div><div class="enlift mdl-shadow--2dp content mdl-cell mdl-cell--8-col sainternet-content"><h3 class=embiggen>I’d Like to Think I’m Pretty Progressive</h3><p class=embiggen id=datetime>first posted on Thursday, 11 May 2023 21:10+12:00 (NZST)<p class="embiggen sainternet-subheader-centered">How 2 PWA/Web APK<ol><li>Have a website.<li>Have HTTPS.<li>Have a <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/blob/master/sainternet.webmanifest>manifest</a>.</li><p>Your site can now be saved to desktop.</p><li>Have a <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/blob/master/.formatted/serviceworker.min.js>service worker</a>.</li><p>Your site is now a progressive web application, it can be "installed".</p><li>Have <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/tree/master/resources/icons/maskable>maskable icons</a> in <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/blob/master/sainternet.webmanifest#L16>manifest</a>.<li>Have <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/tree/master/resources/screenshots>screenshots</a> in <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/blob/master/sainternet.webmanifest#L242>manifest</a>.</li><p>Your site is now a PWA web APK, it can be installed as a native application.</p><li>Collect underpants.<li>?<li>Profit.</ol></div></div><div class="mdl-grid sainternet-container"id=gottagofast><div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div><div class="enlift mdl-shadow--2dp content mdl-cell mdl-cell--8-col sainternet-content"><h3 class=embiggen>Gotta Go Fast!</h3><p class=embiggen id=datetime>first posted on Tuesday, 9 May 2023 07:00+12:00 (NZST)<br>updated on Tuesday, 9 May 2023 21:45+12:00 (NZST)<p class="embiggen sainternet-subheader-centered"id=speedtests>How sainternet.xyz Managed 100%<a href=#gottagofast-disclaimer-1><sup><sub>1</sub></sup></a> on Major Website Performance Tests<p class="mdl-tooltip mdl-tooltip--bottom"for=speedtests>GTmetrix, PageSpeed Insights, Website Speed Test etc.<p>I know the pain of waiting for a website to load.<p>There's no beating about the bush. It sucks. Not only is it frustrating, it can be a major factor in whether or not users stick around and browse a site.<p>That's why I'm always looking for ways to optimise website performance and deliver a faster, smoother experience with clean and striking visuals for everyone who visits my site.<p class="embiggen sainternet-subheader-centered">Sometimes, You Actually Want to Finish Fast<p>The <a href=index.html>Home page</a> reliably provides a sub-second SI (Speed Index) around ~06.s, with an FCP (First Contentful Paint) of ~0.4s and LCP (Largest Contentful Paint) of ~0.7s on a fresh load with no existing cache. Subsequent page loads (with cache) are even faster.<p>I've tried many different tactics to achieve faster load times, but I've found that a combination of strategies works best. For example, self-hosting everything possible, including Google fonts, is a great way to reduce the number of external requests and speed up page load times. I've also embraced modern image and font formats, which can significantly reduce file sizes and improve load times.<p>But it's not just about hosting and file formats. I've also implemented a JavaScript-powered FOUT (Flash Of Unstyled Text) font loading policy (the <i>perception</i> of fast loading is just as important, text should display as quickly as possible) and deferred JavaScript to ensure that my pages load quickly and efficiently.<p class="embiggen sainternet-subheader-centered">Flash<a href=#gottagofast-disclaimer-2><sup><sub>2</sub></sup></a>, Ah-ah, Saviour of the Universe<p>The basic premise with FOUT, is to display the first available font that matches in your list, while promising to load the fonts you actually need, and then swapping fonts as soon as you know they are available. This allows the page to be rendered prior to fonts having loaded completely and provides a significant reduction in perceived load time.<p class="embiggen sainternet-subheader-centered">It’s the Little Things That Count<p>Aggressive CSS, JavaScript and HTML minification has also been a key strategy, as has preloading assets and prerendering pages to speed up subsequent page loads. From anywhere you navigate to on <code>sainternet.xyz</code>, anywhere you could navigate to from there is already preloaded and prerendered, making for a PWA (Progressive Web Application) which feels more like a native application.<p class="embiggen sainternet-subheader-centered">Size Does Matter<p>I have paid close attention to image sizing and scaling, in particular to avoid CLS (Cumulative Layout Shift), which can make for a frustrating user experience with page assets moving around the page as things load. You try and click on one thing, but then something else loads and it's moved. Yeah, nah. No one wants that.<p>By taking all of these steps and more, I've achieved a significantly faster, smoother and more navigable web experience.<p>Overall, optimising <code>sainternet.xyz</code> is an ongoing process, but by staying on top of the latest strategies and testing out new approaches, I'm confident that I can continue to deliver a better, faster web experience for all visitors.<p class="embiggen sainternet-subheader-centered">Disclaimers<ol><li id=gottagofast-disclaimer-1>On desktop browsers. Lighthouse<a href=#gottagofast-disclaimer-3><sup><sub>3</sub></sup></a>'s emulated mobile hardware and connectivity is <s>bulls…</s> a rock, placed vaguely near an FM radio tower.<li class="mdl-tooltip mdl-tooltip--bottom"for=gottagofast-disclaimer-1>It's not even in stereo.<li id=gottagofast-disclaimer-2>Not that one.<li class="mdl-tooltip mdl-tooltip--bottom"for=gottagofast-disclaimer-2>Or that other one.<li id=gottagofast-disclaimer-3>Everything uses Lighthouse.<li class="mdl-tooltip mdl-tooltip--bottom"for=gottagofast-disclaimer-3>Google decides how the Internet works.</ol></div></div><div class="mdl-grid sainternet-container"id=goingoffline><div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div><div class="enlift mdl-shadow--2dp content mdl-cell mdl-cell--8-col sainternet-content"><h3 class=embiggen>Going Offline</h3><p class=embiggen id=datetime>first posted on Friday, 14 April 2023 22:30+12:00 (NZST)<br>updated on Saturday, 15 April 2023 21:30+12:00 (NZST)<p class="embiggen sainternet-subheader-centered">Going Offline<p><code>sainternet.xyz</code> is going offline.<p>Sorry. Rather, <code>sainternet.xyz</code> <i>can</i> go offline, and it isn't a problem. Let me explain.<p>Historically, handling offline in a website or progressive web application was hard, with each service deploying their own workarounds or even just choosing not to handle the case at all.<p class="embiggen sainternet-subheader-centered">At Your Service<p>Enter the <a href=https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API>Service Worker API</a>. Service workers give developers the tools they need to create effective offline experiences.<p>Using a service worker allows for the interception of requests within the service worker's scope, which can then be acted on accordingly. For instance <code>sainternet.xyz</code>'s <a href=https://github.com/saint-lascivious/saint-lascivious.github.io/blob/master/.formatted/serviceworker.min.js>service worker</a> uses both network first and cache first fetch policies depending upon the asset being requested. Objects that are likely to be static (fonts, images, etc.) or change infrequently are fetched by checking the cache first, falling back to network (if available) if the object is not found in the current cache. Dynamic or otherwise frequently updated objects are fetched from network first (if available), falling back to cache if the network request fails. Successful fetches from either case are added to the cache for later use.<p class="embiggen sainternet-subheader-centered">Putting It All Together<p>After visiting any page on this site, if you're running an even vaguely modern browser and have JavaScript enabled, some magic should have happened.<p>Your browser was tested to see if it can support service worker registration, and if supported, a service worker was installed and registered. That service worker then created and populated a cache of critical objects (all those required for <code>sainternet.xyz</code> to function, approximately 4MB), and removed any orphaned caches. At this point you should be able to disconnect from the network or enter Flight Mode, and continue to navigate the site as usual.</div></div></main><footer class="mdl-mini-footer sainternet-footer"><div class=mdl-mini-footer--left-section><ul class=mdl-mini-footer--link-list><li><a href=mailto:saint@sainternet.xyz id=icon-email aria-label="Email Button"rel="noopener noreferrer"target=_blank><icon class="enlift material-icons">email</icon></a><a href=# class="mdl-tooltip mdl-tooltip--top"for=icon-email>Email</a><li><a href=https://discord.gg/NC7taVyn id=icon-discord aria-label="Discord Button"><icon class="enlift fa-brands fa-discord"></icon></a><a href=# class="mdl-tooltip mdl-tooltip--top"for=icon-discord>Discord</a><li><a href=https://github.com/saint-lascivious id=icon-github aria-label="GitHub Button"><icon class="enlift fa-brands fa-github"></icon></a><a href=# class="mdl-tooltip mdl-tooltip--top"for=icon-github>GitHub</a><li><a href=https://www.reddit.com/user/saint-lascivious id=icon-reddit aria-label="Reddit Button"><icon class="enlift fa-brands fa-reddit"></icon></a><a href=# class="mdl-tooltip mdl-tooltip--top"for=icon-reddit>Reddit</a></ul></div></footer><a href=index.html class="enlift mdl-shadow--2dp mdl-button mdl-button--fab mdl-color--accent mdl-color-text--accent-contrast mdl-js-button mdl-js-ripple-effect"id=button_home aria-label="Home Page"><icon class=material-icons>home</icon></a><a href=# class="mdl-tooltip mdl-tooltip--left"for=button_home>Back to Home page.</a></div>