Dev Roulette Live — Conversations with Frontend Developers

I don’t know exactly how she does it, but apart from all the work on her side projects, newsletter, family, etc. Stephanie Eckles also hosts a show named “Dev Roulette Live”

Dev Roulette is a conversation between Stephanie Eckles and up to two mystery guests about topics that are particularly important to front-end developers including: CSS, JS, and Accessibility.

For the second episode (mid June) I had the honor to join the conversation together with Michelle Barker.

It was great to finally “meet” both Stephanie and Michelle, two persons who definitely are on my “you should follow them on Twitter”-list. In the hour we had we talked about Layout in CSS, Creative CSS, Progressive Enhancement, etc.

I very much like the spontaneous atmosphere that lives during these conversations. Take the topics for example: although they are a pre-defined set of topics, they are not fixed — a spin of the wheel decides what topic will be talked about.

If you can’t join live (on Twitch), you can always watch the recordings afterwards, on YouTube.

Dev Roulette Live →
Dev Roulette Live on YouTube →

Detecting media query support in CSS and JavaScript

Kilian Valkhof recently needed to check if prefers-reduced-data was supported by the browser or not

For this, I couldn’t use just @media (prefers-reduced-data: no-preference) because that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the user wanted to preserve data.

What I needed was a test for the media feature regardless of its value. It turns out we can do that by using the or notation in media queries.

The result is a pretty mind-bending at-rule:

@media not all and (prefers-reduced-data), (prefers-reduced-data) {
  …
}

I don’t fully grasp it but if Kilian says it works, I trust him on that.With a few extra pointers by Kilian on Twitter I get it now. Thankfully the JS version is a bit easier (and that one I do understand entirely).

Detecting media query support in CSS and JavaScript →

“Inline Parameters” extension for VSCode

Inspired by JetBrains’ “Inline Parameter Name Hints” feature, Liam Hammett created an extension for VSCode with the same functionality:

This feature can give you additional context when reading your code, making it easier to understand what different function parameters refer to by showing the parameter’s name inline.

No longer do you have to be confused about whether the needle or haystack comes first, or have to slow down your workflow by going to a function’s source to figure out what it does!

Supported languages are JavaScript, TypeScript, PHP, and LUA.

Inline Parameters for VSCode →

A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline

Using @scroll-timeline from the Scroll-Linked Animations Specification, Fabrizio Calderan has created a very nice demo which shows the remaining reading time. As you scroll down, the time counts down to 0.

📽 Using a browser with no support for Scroll-Linked Animations? Here’s a recording you can watch:

There’s a few tricks Fabrizio uses there to achieve the result:

  1. Two Custom Properties are animated as you scroll: --mm (minutes) and --ss (seconds)
  2. Thanks to Houdini’s Properties and Values API, the values for --mm and --ss can be interpolated between their start and end value.
  3. As it’s not possible to inject the values of Custom Properties using ::after, an intermediate step using CSS Counters is used: the Custom Properties manipulate the CSS Counter values, and the values of those Counters then get injected into the page (similar to what Jhey did in his pure CSS Stopwatch)

Tell your users the remaining reading time, in CSS →

~

👨‍🏫 Unfamiliar with Scroll-Linked Animations / CSS Scroll-Timeline? Here’s two (extensive) articles that explain the whole thing:

Koreless — White Picket Fence

Taken from the album Agor by Koreless is “White Picket Fence”. I really dig the album, and this track (whose music video was directed by FKA twigs). Prepare yourself for an uplifting vibe after about 50 seconds …

Natural Shadows in CSS with inlined SVG filters

Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter.

💁‍♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a TV, where the TV casts a colored light that changes colour depending on the on-screen action. And yes, you can totally throw a video at it too, it’ll work (while melting your CPU)

In the pen above, I’ve tweaked the .natural-shadow class a bit:

  • The shadow now also extends at the top and bottom, by tweaking x="0" y="0" width="2" height="2" on the <filter>
  • The shadow was made bigger, by tweaking the stdDeviation="5" on the < feGaussianBlur>

As Stefan notes, Safari has some issues with the inline filter …

A natural shadow with SVG filters →

JavaScript: Hostnames as self-executing fetches

In a conversation between Mathias Bynens and Ingvar Stepanyan, an idea popped up: what if a hostname — such as www.bram.us — would be valid JavaScript? Using a JavaScript Proxy, that’s perfect possible.

Building further upon that is proxy-www, which creates self-executing fetches from them.

const www = new Proxy(new URL('https://www'), {
    get: function get(target, prop) {
        let o = Reflect.get(target, prop);
        if (typeof o === 'function') {
            return o.bind(target)
        }
        if (typeof prop !== 'string') {
            return o;
        }
        if (prop === 'then') {
            return Promise.prototype.then.bind(fetch(target));
        }
        target = new URL(target);
        target.hostname += `.${prop}`;
        return new Proxy(target, { get });
    }
});

Usage:

www.baidu.com.then(response => {
    console.log(response.status);
})

My inner geek rejoices 🤓

proxy-www →

Using the Specificity of :where() as a CSS Reset

As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0:

:where() works the same way like :is() does, but will always have a specificity of 0. You can cleverly wrap this around other selectors to undo their specificity. Think of :where(:not(…)) for example.

Over at CSS-Tricks, Mojtaba Seyedi details how we can also use this to do more clever CSS Resets

With the power of this selector, libraries can give us style with no specificity. So there would be no specificity to compete with when we as authors write CSS.

Like so:

:where(ul[class]) {
  list-style: none;
}

.list {
  list-style: square;
}

The contents inside :where() is specific enough to remove list-style only when a class is being used on an ul, while the use of :where() does not hinder any further overriding by the CSS developer.

Using the Specificity of :where() as a CSS Reset →

Related: Using the same approach, Elad recently published his opiniated CSS Reset