From c2e146e7bc23be44be7639f35bd0e230d283f687 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Fri, 15 Apr 2022 21:06:28 -0700 Subject: [PATCH] More narrow screen optim for old browsers Some old browser engines don't fully support hyphenation, so they need some extra help. Now, the entire site should fit in a 150 CSS-pixel wide viewport. Clean up some link text too so the text alone is more useful. --- content/about/index.md | 2 +- .../posts/search-engines-with-own-indexes.md | 6 ++-- content/posts/website-best-practices.gmi | 4 +-- content/posts/website-best-practices.md | 28 +++++++++---------- content/resume/index.md | 2 +- layouts/_default/bookmarks.html | 2 +- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/content/about/index.md b/content/about/index.md index 494f0a7..32fcce6 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -18,7 +18,7 @@ This page also exists on the [tildeverse](https://tildeverse.org/), a bunch of \ Content on this site also appears on my Gemini capsule -Location (Rohan, meatspace) +Location (Rohan, meat­space) {#location-rohan-meatspace} --------------------------- Currently living at home in Cupertino, CA diff --git a/content/posts/search-engines-with-own-indexes.md b/content/posts/search-engines-with-own-indexes.md index f9d4fbf..02dd331 100644 --- a/content/posts/search-engines-with-own-indexes.md +++ b/content/posts/search-engines-with-own-indexes.md @@ -73,7 +73,7 @@ These are large engines that pass all my standard tests and more. - Fireball - You.com - Partially powers MetaGer by default; this can be turned off - - At this point, I mostly stopped adding Bing-based search engines. There are just too many. + - At this point, I mostly stopped adding Bing-based search engines. There are just too many. - Yandex: originally a Russian search engine, it now has an English version. Some Russian results bleed into its English site. Like Bing, it allows submitting pages and sitemaps for crawling using the IndexNow API. Powers: @@ -100,7 +100,7 @@ These engines pass most of the tests listed in the "methodology" section. All of FairSearch supports Open Graph and some JSON-LD at the moment. A look through the source code for Alexandria and Gigablast didn't seem to reveal the use of any structured data. -### Smaller indexes, hit-and-miss +### Smaller indexes, hit-and-miss {#smaller-indexes-hit-and-miss} These engines fail badly at a few important tests. Otherwise, they seem to work well enough. @@ -108,7 +108,7 @@ These engines fail badly at a few important tests. Otherwise, they seem to work - [Exalead](https://www.exalead.com/search/): slow, quality is hit-and-miss. Its indexer claims to crawl the DMOZ directory, which has since shut down and been replaced by the [Curlie](https://curlie.org) directory. No relevant results for "Oppen­heimer" and some other history-related queries. Allows submitting individual URLs for indexing, but requires solving a Google reCAPTCHA and entering an email address. -- [ExactSeek](https://www.exactseek.com/): small index, disproportionately dominated by big sites. Failed multiple tests. Allows submitting individual URLs for crawling, but requires entering an email address and receiving a newsletter. Webmaster tools seem to heavily push for paid SEO options. It also powers SitesOnDisplay and [Blog-search.com](https://blog-search.com). +- [ExactSeek](https://www.exactseek.com/): small index, disproportionately dominated by big sites. Failed multiple tests. Allows submitting individual URLs for crawling, but requires entering an email address and receiving a newsletter. Webmaster tools seem to heavily push for paid SEO options. It also powers SitesOnDisplay and [Blog-search.com](https://blog-search.com). - [Infotiger](https://alpha.infotiger.com/): A small index that seems to find relevant results. It allows site submission for English and German pages. It also features a "similarity" search to query pages similar to a given link, with mixed results. diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 8320e4c..089faa9 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -94,7 +94,7 @@ I'm sure you're a great person, but your readers might not know that; don't expe => https://browserleaks.com/javascript JavaScript Browser Information (BrowserLeaks) -Finally, consider using your CSP to restrict script loading. If you must use inline scripts, selectively allow them with a hash or nonce. Some recent directives restrict and enforce proper use of trusted types. +Finally, consider using your CSP to restrict script loading. If you must use inline scripts, selectively allow them with a hash or nonce. Some recent CSP directives restrict and enforce proper use of trusted types: => https://web.dev/trusted-types/ Trusted types => https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types CSP trusted types on MDN @@ -222,7 +222,7 @@ Avoid layout shifts by including dimensions in HTML attributes. The simplest way In-depth server configuration is a bit out of scope, so I'll keep each improvement brief. -Compression--especially static compression--dramatically reduces download sizes. My full-text RSS feed is about a quarter of a megabyte, but the Brotli-compressed version is around 70 kilobytes. Caddy supports this with a "precompressed" directive; Nginx requires a separate module for Brotli compression: +Compression--especially static compression--dramatically reduces download sizes. My full-text RSS feed is about a quarter of a megabyte, but the Brotli-compressed version is around 70 kilobytes. Caddy supports this with a "precompressed" directive; Nginx requires the ngx_brotli module for Brotli compression: => https://github.com/google/ngx_brotli The ngx_brotli module diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 081d8aa..55f16b5 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -116,7 +116,7 @@ Please use progressive enhancement (PEtrips {#round-trips} Download size matters, especially on metered connections. There's no shortage of advice concerning minimizing this easy-to-understand metric. Unfortunately, it alone doesn't give us the full picture: download size is not the exact same thing as time taken to deliver useful content to users. @@ -228,7 +228,7 @@ HTTP/3 uses QUIC instead of TCP, which makes things a bit different; the importa ### The golden kilobyte -Assume that your first impression must fit in the first kilobyte. Make good use of this golden kilobyte; most or all of it will likely be taken up by HTTP headers.[^5] Ideally, the first kilobyte transferred should inform the client of all blocking resources required, possibly using preload directives; all of these resources can then begin downloading over the same multiplexed HTTP/2 connection before the current round-trip finishes! Note that this works best if you took my earlier advice to [avoid third-party content](#third-party-content). +Assume that your first impression must fit in the first kilobyte. Make good use of this golden kilobyte; most or all of it will likely be taken up by HTTP headers.[^5] Ideally, the first kilobyte transferred should inform the client of all blocking resources required, possibly using preload directives; all of these resources can then begin downloading over the same multiplexed HTTP/2 connection before the current round-trip finishes! Note that this works best if you took my earlier advice [to avoid third-party content](#third-party-content). Apply these strategies in moderation. Including extra preload directives in your document markup might not help as much as you think, since their impact on page size could negate minor improvements. Micro-optimizations have diminishing returns; past a certain point, your effort is better spent elsewhere. @@ -240,7 +240,7 @@ Loading content of unknown dimensions, such as images, can create layout shifts; In-depth server configuration is a bit out of scope, so I'll keep each improvement brief. -Compression--especially static compression--dramatically reduces download sizes. My full-text RSS feed is about a quarter of a megabyte, but the Brotli-compressed version is around 70 kilobytes. Caddy supports this with a `precompressed` directive; Nginx requires a [separate module](https://github.com/google/ngx_brotli) for Brotli compression. +Compression--especially static compression--dramatically reduces download sizes. My full-text RSS feed is about a quarter of a megabyte, but the Brotli-compressed version is around 70 kilobytes. Caddy supports this with a `precompressed` directive; Nginx requires the [ngx_brotli module](https://github.com/google/ngx_brotli) for Brotli compression. When serving many resources at once (e.g., if a page has many images), HTTP/2 could offer a speed boost through multiplexing; use it if you can, but expect many clients to only support HTTP/1.1. HTTP/3 is unlikely to help textual websites much, so run a benchmark to see if it's worthwhile. @@ -259,7 +259,7 @@ For one, Tor users are encouraged to set the Tor Browser Bundle's (`, then recent browsers will automatically switch their default stylesheets to dark-mode. Unfortunately, some older browsers (like Firefox-ESR) don't support this directive, and WebKit's default dark stylesheet has [unreadable links](https://bugs.webkit.org/show_bug.cgi?id=209851). WebKit versions in the wild are often out of date, so a fixed stylesheet would need to be out for many years before I would consider using default dark stylesheets. +If you include a `theme-color` directive in your document ``, then recent browsers will automatically switch their default stylesheets to dark-mode. Unfortunately, some older browsers (like Firefox-ESR) don't support this directive, and WebKit's default dark stylesheet [has unreadable links](https://bugs.webkit.org/show_bug.cgi?id=209851). WebKit versions in the wild are often out of date, so a fixed stylesheet would need to be out for many years before I would consider using default dark stylesheets.
{{}} @@ -691,7 +691,7 @@ Some image optimization tools I use: I put together [a quick script](https://git.sr.ht/~seirdy/dotfiles/tree/3b722a843f3945a1bdf98672e09786f0213ec6f6/Executables/shell-scripts/bin/optimize-image) to losslessly optimize images using these programs. For lossy compression, I typically use [GNU Parallel](https://www.gnu.org/software/parallel/) to mass-generate images using different options before selecting the smallest image at the minimum acceptable quality. Users who'd rather avoid the command line while performing lossy compression can instead check out [Squoosh](https://squoosh.app/), a JavaScript app that bundles WebAssembly-compiled encoders; I've heard good things about it. -You also might want to use the HTML `` element, using JPEG/PNG as a fallback for more efficient formats such as WebP or AVIF, but only if the size savings are more significant than a couple hundred bytes. More info in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) +You also might want to use the HTML `` element, using JPEG/PNG as a fallback for more efficient formats such as WebP or AVIF, but only if the size savings are more significant than a couple hundred bytes. More info in the [MDN `` docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) Most of my images will probably be screenshots that start as PNGs. My typical flow: @@ -933,7 +933,7 @@ Designers often use figures to "break up" their content, and provide negative sp Spacing ------- -The previous [small viewports](#small-viewports) section may tempt you to make your content as dense as possible. Please don't overdo it. +The previous ["small viewports" section](#small-viewports) may tempt you to make your content as dense as possible. Please don't overdo it. There's an ideal range somewhere between "cramped" and "spaced-apart" content. Finding this range is difficult. The best way to resolve such difficult and subjective issues is to ask your readers for feedback, giving disproportionate weight to readers with under-represented needs (especially disabled readers). @@ -1207,7 +1207,7 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju 11. Test with unorthodox graphical browser engines, like NetSurf, Servo, or the Serenity OS browser. 12. Try printing out your page in black-and-white from an unorthodox graphical browser. 13. Download your webpage and test how multiple word processors render and generate PDFs from it.[^13] -14. Combine conversion tools. Combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if it's caused by an issue in your markup, or a CSS feature with an equivalent alternative. +14. Combine conversion tools. Combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if it's caused by an issue in your markup, or a CSS feature with an equivalent alternative. 15. Build a time machine. Travel decades--or perhaps centuries--into the future. Keep going forward until the WWW is breathing its last breath. Test your site on future browsers. Figuring out how to transfer your files onto their computers might take some time, but you have a time machine so that shouldn't be too hard. When you finish, go back in time to [meet Benjamin Franklin](https://xkcd.com/567/). I'm still on step 14, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht). diff --git a/content/resume/index.md b/content/resume/index.md index 9e1aeb5..6081b5a 100644 --- a/content/resume/index.md +++ b/content/resume/index.md @@ -3,7 +3,7 @@ date: "2021-01-23T12:21:38-08:00" keywords: intern, python, golang, go, lua, moonscript, shell, bash, zsh, posix, java, haskell, C, influxdb, influxdata, chronograf, grafana, kapacitor, numpy, scipy, pandas, jupyter, docker, podman, buildah, skopeo, kubernetes, openshift, cloud native, physics, jenkins, git, gitlab, github, linux, bsd, red hat, fedora, debian, ubuntu, opensuse, suse title: Rohan Kumar --- - | +[https://seirdy.one](https://seirdy.one/) | [seirdy@seirdy.one](mailto:seirdy@seirdy.one) Detail oriented, committed, self-motivated, open-source enthusiast proficient in Python, Go, Linux/UNIX systems, and cloud-native computing looking for an internship. diff --git a/layouts/_default/bookmarks.html b/layouts/_default/bookmarks.html index e9a7496..6dbf3b9 100644 --- a/layouts/_default/bookmarks.html +++ b/layouts/_default/bookmarks.html @@ -12,7 +12,7 @@

{{- $tags := split $bookmark.tags "," -}}