The World of CSS Transforms

Another excellent post by Josh W. Comeau, this time covering CSS Transforms.

In this blog post, we’re diving deep into the transform property. I’ll show you some of the cool and unexpected things you can do with it!

As per usual, the post is packed with interactive playgrounds for you to try things out.

The World of CSS Transforms →

Related: What Josh doesn’t tap into are the individual transform properties translate, rotate, and scale which we can use nowadays, something you should definitely check out too.

Talking to the Competition and Markets Authority about Browser Choice on Apple’s iOS

I you want to get the summary about browser choice on iOS, Stuart Langridge has got you covered:

Last week I sat down with the UK Competition and Markets Authority, the regulator, to talk about browser choice on Apple devices, and whether the claims that limiting choice is good for security and privacy actually hold up.

Talking to the Competition and Markets Authority about Apple (Slides) →
Talking to the Competition and Markets Authority about Apple (Blogpost) →

Using Saliency in progressive JPEG XL images

At Google, they’ve worked out a new way to progressively enhance images:

When delivering images over the web, it is now possible to organize the data in such a way that the most salient parts arrive first. Ideally you don’t even notice that some less salient parts have not yet arrived, because by the time you look at those parts they have already arrived and rendered.

Just like Progressive JPEGs the quality enhances as more bytes get load, but with “Progressive JPEG XL” the parts people tend to look at get loaded first. On the image shown above, the heatmap indicates those parts.

Using Saliency in progressive JPEG XL images →

htmlq – Command-line HTML Processor

Similar to how jq allows you to extract content from JSON files on the CLI, htmlq allows you extract content from HTML files.

Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files.

You can pass in a local HTML file, but also pipe it to cURL requests.

For example, to get the links to all last articles on the homepage of bram.us, you can perform this request:

$ curl -X GET https://www.bram.us/ | htmlq "main h2 a" -a href

https​://www.bram.us/2021/09/03/next-js-apollo-server-side-rendering-ssr/
https​://www.bram.us/2021/09/03/multiple-accounts-and-git/
https​://www.bram.us/2021/09/03/random-paint-effects-with-houdini/
https​://www.bram.us/2021/09/02/crafting-organic-patterns-with-voronoi-tessellations/
https​://www.bram.us/2021/09/01/pick-colors-from-websites-with-the-eyedropper-api/
https​://www.bram.us/2021/09/01/the-universe-is-hostile-to-computers/
https​://www.bram.us/2021/08/27/morse-code-translator-html-css/
https​://www.bram.us/2021/08/27/vector-raster-why-not-both/
https​://www.bram.us/2021/08/27/key-data-structures-and-their-roles-in-renderingng/
https​://www.bram.us/2021/08/27/css-shapes-editor-extension-for-chrome-devtools/

Using main h2 a we extract the link elements that we need, and with the -a flag we can opt to only return the specified href attribute from those selected elements.

Installation possible via Brew:

brew install htmlq

htmlq — Like jq, but for HTML →

Next.js + Apollo + Server Side Rendering (SSR)

Interesting video from the CodePen podcast in which Shaw goes over this approach to SSR with Next and Apollo:

A probably-better approach is to use the getDataFromTree method, which walks down the tree and executes the queries to fill up the ApolloClient cache.

  1. Create a shared ApolloClient instance
  2. Render the page using getDataFromTree() to fill the cache with data
  3. Render the page again with that data using Next’s Document.getInitialProps()
  4. Extract the cache to deliver with the page and hydrate the client-side Apollo cache

Nice!

CodePen Podcast #331: Next.js + Apollo + Server Side Rendering (SSR) →
Example Repository →

Multiple Accounts and Git

If you have multiple accounts that you must use with Git — such as a personal and a work account — you can have your Git Config (typically ~/.gitconfig) conditionally include other configs depending on the folder you’re working in. In those extra configs you then can override some settings.

Here’s an example ~/.gitconfig that has two dynamic includes:

[user]
  name = "John Doe"

[includeIf "gitdir:~/repos/personal/"]
  path = ~/.gitconfig.personal

[includeIf "gitdir:~/repos/work/"]
  path = ~/.gitconfig.work

Inside each ~/.gitconfig.XXX you can then list extra config values, here the email address to use for each:

[user]
  email = john@example.org

💡 If you want to use individual SSH keys for each account, there’s some more steps you need to take.

Random Paint Effects with Houdini

Speaking of George Francis in the previous post: in the latest episode of HTTP 203 Jake talks Surma through recreating these Houdini-powered “Fleck Patterns” George created before.

Jake first takes a naive approach, and then polishes the result until he gets a version that plays nice with resizing.

You can see the final result here.

Note to self: I should probably implement some of these adjustments in css-houdini-voronoi 😅

Crafting Organic Patterns With Voronoi Tessellations

Great post by George Francis, in which he leverages the Voronoi tessellation to generate aesthetically pleasing random patterns.

When composing generative patterns, placing objects on a canvas purely at random can feel chaotic, while aligning them to a traditional grid can feel rigid/predictable. While both chaos and exacting precision can both be beautiful qualities in generative art, we rarely — if ever — find examples of either extreme in the natural world.

In this tutorial, we will be learning how to form aesthetically pleasing patterns inspired by nature. Random and unpredictable, yet efficient and harmonious. To do so, we will be using a classic generative tool, the Voronoi tessellation.

Crafting Organic Patterns With Voronoi Tessellations →

Pick Colors from websites your entire screen with the JavaScript EyeDropper API

Mid-August the WICG published a (unofficial) specification for a Native Eye Dropper — a tool you can use to get the color from the pixel that’s underneath the cursor — on the web.

Let’s take a look …

~

Usage

The proposal is pretty straightforward:

This API enables authors to use a browser supplied eyedropper in the construction of custom color pickers.

It describes an EyeDropper and a ColorSelectionResult which you use as follows:

// Create an EyeDropper object
const eyeDropper = new EyeDropper();

document.getElementById("eyedropperButton").addEventListener('click', e => {
    // Enter eyedropper mode
    eyeDropper.open()
        .then(colorSelectionResult => {
            // returns hex color value (#RRGGBB) of the selected pixel
            console.log(colorSelectionResult.sRGBHex);
        })
        .catch(error => {
            // handle the user choosing to exit eyedropper mode without a selection
        });
});

Upon clicking the button in the example above, an EyeDropper will open. After clicking, the color underneath will be captured and its outcome is a ColorSelectionResult, of which you can current get the SRGB Hex Code via colorSelectionResult.sRGBHex

💡 As pointed out by reader Šime Vidas it’s worth nothing that you’re not limited to picking colors from the page itself, but from anywhere on your screen — even outside the browser window.

Live updating the color value as you move the cursor is currently not specced — it is, after all, a very young spec. This is considered a limitation and is being discussed in this GitHub Issue.

~

Demo

See the Pen
EyeDropper API Demo by Bramus (@bramus)
on CodePen.

~

Browser Support

Whilst the API is still unofficial, it’s already supported in Chromium 95 (current Canary). Other Browsers (Firefox, Safari) have no support for it (yet). Relevant Issues to track:

~

Extra: Quick one-liner

To open the EyeDropper with just one line of code you can use this snippet:

await new EyeDropper().open();

Handy for launching it from the Console, as demonstrated in the video below:

~

To help spread the contents of this post, feel free to retweet the announcement tweet:

~

🔥 Like what you see? Want to stay in the loop? Here's how:

🗣 This post originally was a set of tweets.

The Universe is Hostile to Computers

I like this video from Vertiasium on Cosmic Rays and how they can trigger bit flipping in our computers, known as “Single Event Upsets”.

Tiny particles from distant galaxies have caused plane accidents, election interference and game glitches.

Solid buildup, good pacing, and well explained.