quicktype — Convert JSON into gorgeous, typesafe code in any language.

Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language.

Just paste in some JSON object, choose your output language, and voila!

quicktype — Convert JSON into gorgeous, typesafe code in any language →

How the Web Audio API is used for browser fingerprinting

When generating a browser identifier, we can read browser attributes directly or use attribute processing techniques first. One of the creative techniques that we’ll discuss today is audio fingerprinting.

Using an Oscillator and a Compressor they can basically calculate a specific number that identifies you.

Every browser we have on our testing laptops generate a different value. This value is very stable and remains the same in incognito mode.

And this only takes a few ms to calculate! 🤯

How the Web Audio API is used for browser fingerprinting →

CSS Logical Properties Are the Future of the Web & i18n

Linked below is yet another article urging one to use CSS Logical Properties. What caught my eye in this one is the fact that author Daniel Yuschick reworked his personal website to use them, as shown in this video below.

Impressive!

CSS Logical Properties Are the Future of the Web & I18N →

~

In case you want to watch a talk on the subject I can recommend this video by Elad Shechter.

This pen by Adam Argyle will also come in handy when trying to grasp writing-mode/direction:

See the Pen
logical button demo by Adam Argyle (@argyleink)
on CodePen.

Automatically Generate Regular Expressions from User Input with grex

grex is a library as well as a command-line utility that is meant to simplify the often complicated and tedious task of creating regular expressions. It does so by automatically generating a single regular expression from user-provided test cases. The resulting expression is guaranteed to match the test cases which it was generated from.

As Stefan shows: simply type in some terms into grex that you want to match and the RegExp comes out … 🤯

Also available as a Rust library.

use grex::RegExpBuilder;

let regexp = RegExpBuilder::from(&["a", "aa", "aaa"]).build();
assert_eq!(regexp, "^a(?:aa?)?$");

grex — a command-line tool and library for generating regular expressions from user-provided test cases →

SVG Explained in 100 Seconds

Nice little video explaining SVGs and how the d attribute of paths work.

The aforementioned SVG Path Visualizer might come in handy too.

Highlight columns in HTML tables with <colgroup>

Interesting find by Manuel Matuzovic:

The other day I looked up colgroup on MDN […] the demo at the beginning of the page caught my attention. The author adds a class to the col element, which does nothing with the col element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.

Like so:


See the Pen
Highlight columns in HTML tables with `<colgroup>` by Bramus (@bramus)
on CodePen.

Manuel also shares how to highlight a column upon clicking the table header.

Highlighting columns in HTML tables →

Progress Nav with IntersectionObserver

In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you can not not mention the wonderful Progress Nav by Hakim El Hattab.

~

As Hakim’s demo from 2017 (!!) does not use IntersectionObserver — which was in it’s very early stages back then — Chris hinted that someone should make a version that uses it. Anders Grimsrud took up the challenge, and built it:


See the Pen
Hakim’s Progress Nav Concept using the Intersection Observer API by Anders Grimsrud (@agrimsrud)
on CodePen.

Cool! 🙂

💡 Be sure to check Hakim’s “Building Better Interfaces” talk, which is full of inspiration to make your interfaces more delightful. Recommended stuff!

😊 I was very happy to see Chris including my 2020 Smooth Scrolling Sticky ScrollSpy Navigation in his post too.

Building a Settings Component

In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes.

In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers.

Tons of CSS-knowledge in there:

Building a Settings Component (Demo) →Building a Settings Component (Writeup) →