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 →

SSH: Skip Private Keys loaded into ssh-agent

 Note to self: to SSH into a server with a username + password combination only — e.g. skipping any Private Key loaded into ssh-agent — use this command: ssh -o PreferredAuthentications=password user@server The connection will now ask for the user’s password, instead of trying to use public key authentication.

Read Post →

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)

🚨 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 “The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)“

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 →