2022-06-20.01

Spinners; Between The Darkness And The Light; Smarter Encryption

Spinners

Photo by Christophe Hautier on Unsplash

Most of us have blazing fast processors connected to glowing rectangles of various sizes. Similarly, most of us also have wicked fast internet speeds. Yet, we still wait quite a bit when performing any online task. Forms take time for back end systems to process; some resources are ginormous and take forever to load; scads of super fancy models take time to run. For long-running tasks — defined by our modern, collective short attention spans as > 1 second — it's a good idea to provide some indication processing is going on. For anything but a download (which you should, ideally, use a progress bar for if you want to let the user know the download process might be long), spinners have become the default idiomatic way to beg folks to stick around for another second or two (they'll likely leave after ten, though).

Spinners have generally been animated gifs, or HTML elements that incorporate fancy CSS-tricks.

They can also be standalone, minimal SVG files. These SVG spinners rely on
the <animate> tag to specify state transitions over time, like this super minimial (~950 bytes) block shuffling spinner (blocks-shuffle-2.svg in the aforelinked repo):

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
	<rect x="1" y="1" rx="1" width="10" height="10">
		<animate id="a" begin="0;k.end" attributeName="x" dur="0.2s" values="1;13" fill="freeze" />
		<animate id="d" begin="b.end" attributeName="y" dur="0.2s" values="1;13" fill="freeze" />
		<animate id="g" begin="e.end" attributeName="x" dur="0.2s" values="13;1" fill="freeze" />
		<animate id="j" begin="h.end" attributeName="y" dur="0.2s" values="13;1" fill="freeze" />
	</rect>
	<rect x="1" y="13" rx="1" width="10" height="10">
		<animate id="b" begin="a.end" attributeName="y" dur="0.2s" values="13;1" fill="freeze" />
		<animate id="e" begin="d.end" attributeName="x" dur="0.2s" values="1;13" fill="freeze" />
		<animate id="h" begin="g.end" attributeName="y" dur="0.2s" values="1;13" fill="freeze" />
		<animate id="k" begin="j.end" attributeName="x" dur="0.2s" values="13;1" fill="freeze" />
	</rect>
</svg>

These SVGs will be smaller than most animated bitmap equivalents, and can be standalone (vs rely on external CSS frameworks).

Between The Darkness And The Light

Photo by Ian Keefe on Unsplash

If you go back to the GitHub repository where the spinners in the first section live, and happen to have a decent operating system or browser that support dark and light modes, flip said mode to whatever is the opposite of the current setting. You may need to reload the page or view it in a new tab (FWIW Safari on macOS won't require that). You should see the spinners change to the opposite color (white↔black).

I know it's possible to have CSS stylesheets change element behavior based on media queries, but GitHub sanitizes CSS directives in Markdown for "security" purposes, so I was curious how that repository was performing said black/white magic.

Turn out it's by using the <picture> tag. Said HTML element contains two tags: one or more <source> tags and one <img> tag. The browser will look for the first <source> element where the media query matches the target aspect of the current viewport, then display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fall-back option if none of the source tags matches.

A code snippet should make it easier to see:

<picture>
  <source srcset = "/img/dark.png" media = "(prefers-color-scheme: dark)">
  <img src = "/img/light.png" alt = "Alt text">
</picture>

You can see that in action in an example that I made.

Since themes in my {hrbragg} package have a dark/light mode toggle (and an adaptive_color() function, which makes it easier to assign colors based on the set mode). This <picture> tag will enable me to create two versions of the charts and have them adapt to the visitor theme when one hits content on my site/blog.

During my internet travels regarding this <picture> tag, I discovered {preferably} and {sfthemes}, two great R packages by
Amir Masoud Abdol (@amirmasoudabdol). Amir did something I hoped lots of folks would do: clone my {hrbrthemes} package and make something awesome from it. I don't really use {pkgdown}, but if you do, you should check out {preferably}, as it will make supporting dark/light modes in your package documentation painless. Amir has an example, which also shows off this <picture> tag.

Smarter Encryption

Photo by Muhammad Zaqy Al Fattah on Unsplash

DuckDuckGo (DDG) — the "privacy first" search engine — isn't having a great year, but they do have some interesting data.

Last year, the Electronic Frontier Foundation (EFF) incorporated DDG's Smarter Encryption dataset into their HTTPS Everywhere browser extension (which sunsets next year). This dataset has been regularly updated via a Perl web crawler (1990 called, and they'd like their ubiquitous scripting language back), and has ~29 million site entries.

You don't have to do your own crawl to get the data, as DDG makes it available via a 272 MB tgz file that expands to a ~640 MB text file. If you've been looking to poke more at web or certificate content, this is a great seed list to work from. Perhaps carve out time on some long, rainy weekend to take random samples from the DDG provided corpus and compare TLS configuration profiles, or figure out what the HTTP server distribution looks like.

FIN

I'll likely be adding some sections on home automation over the coming weeks, as it's a crazy space, with many attempts at ecosystem lock-in. It's also ripe with cool tech, especially this year.

GreyNoise observes Juneteenth as a company holiday, and I felt compelled to give it the respect it deserves over on the blog, rather than have it be relegated to yet-another opportunity to shill product. ☮