A rather geeky/technical weblog, est. 2001, by Bramus
In April 2021, Jeremy Keith gave the opening presentation at An Event Apart Spring Summit 2021. In true Jeremy-style this talk starts off with space and the early days of the web, to eventually bring us to the present day. Watch this talk (or read the transcript). And then watch it again. It’s packed with …
<md-block>
To render Markdown on web pages, Lea Verou created <md-block>. It’s a zero-dependency Custom Element that, unlike other solutions, renders the content in the light DOM which allows you to style the output easily. There are many web components these days to render Markdown to HTML. However, all render the resulting Markdown in Shadow DOM, …
Continue reading “Render styleable Markdown in your HTML with <md-block>“
In Michelle’s excellent Guide To Modern CSS Colors, I only found one thing missing: CSS Relative Colors. Plugging that hole is this post by Jim Nielsen. CSS relative colors enable the dynamic color manipulation I’ve always wanted in vanilla CSS since Sass’ color functions first came on the scene (darken(), lighten(), etc.). Allow me to …
Continue reading “Dynamic Color Manipulation with CSS Relative Colors”
container-query-polyfill, a polyfill for CSS Container Queries
Surma has been working on container-query-polyfill, a lightweight polyfill for CSS Container Queries. Let’s take a look at how it works and how it differs from cqfill … What Unlike cqfill —which was covered here before— this Polyfill for Container Queries: Does not require you to declare a separate Custom Property –css-contain that duplicates the …
Continue reading “A first look at container-query-polyfill, a polyfill for CSS Container Queries”
Unstyled, accessible components for building high‑quality design systems and web apps in React. Comes with components such as Dialog, Popover, Dropdown Menu, Toggle, … import * as Popover from '@radix-ui/react-popover'; function App() { return ( <Popover.Root> <Popover.Trigger>…</Popover.Trigger> <Popover.Content>…</Popover.Content> </Popover.Root> ); } Installation per NPM: npm install @radix-ui/react-popover Radix UI → Related: Headless UI — Completely …
Josh W. Comeau shares (and explains) his CSS Reset. /* Josh’s Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, …
Saad Quadri created a handy website that lists all ECMAScript Proposals. On one single page you can get a quick glimpse of all proposals and the current stage they are in. Great to see that the various stages of the TC39 Development Process themselves —something I always mention in my ever-evolving talk on ESNext— get …
Leveraging Chromium’s built-in EyeDroper API —which I wrote about earlier this year— Patrick Brosset created an extension for Chromium that allows you to pick a color from anywhere on your screen. In an accompanying blogpost he also explains how he built it: Back when I worked on the [EyeDroper API] article, I got interested in …
SponsorBlock is an open-source crowdsourced browser extension and open API for skipping sponsor segments in YouTube videos. Users submit when a sponsor happens from the extension, and the extension automatically skips sponsors it knows about using a privacy preserving query system. It also supports skipping other categories, such as intros, outros and reminders to subscribe, …
Continue reading “Automatically skip sponsored segments in YouTube videos with SponsorBlock”
@scroll-timeline (Part 4)
🚨 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 4)“