Category Archives: Elsewhere

“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 …

Continue reading ““Inline Parameters” extension for VSCode”

Read Post →

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

 🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes. Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please …

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

Read Post →

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 …

Continue reading “Natural Shadows in CSS with inlined SVG filters”

Read Post →

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. My favourite is hostnames being valid (and working!) JavaScript. — Ingvar Stepanyan (@RReverser) June 12, 2019 Building further upon that is proxy-www, …

Continue reading “JavaScript: Hostnames as self-executing fetches”

Read Post →

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 …

Continue reading “Using the Specificity of :where() as a CSS Reset”

Read Post →

petite-vue — A 5.5kb subset of Vue optimized for Progressive Enhancement

 Inspired by Alpine.js, Evan You — author of Vue — created petite-vue petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a …

Continue reading “petite-vue — A 5.5kb subset of Vue optimized for Progressive Enhancement”

Read Post →

Custom Scrollbars In CSS

Ahmad Shadeed shows us how to stylize scrollbars in CSS. See the Pen Custom Scrollbar – 2 by Ahmad Shadeed (@shadeed) on CodePen. While I’m no big fan of doing so in general, I can see some specific situations where it might come in handy, such as styling the scrollbars of overflowing tab button bars. …

Continue reading “Custom Scrollbars In CSS”

Read Post →