A rather geeky/technical weblog, est. 2001, by Bramus
Florian Schulz explores a way to define a web component entirely via markup. For me, HTML is sort of a component format. So far we’ve used it to define everything that is required for a website to work. But because components are just smaller versions of that, HTML may be a capable format for authoring …
Continue reading “Why don’t we use HTML to author Web Components?”
Over at CSS-Tricks you can read a min-bending article by Temani Afif Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use. In some cases, I will show you how …
Thomas Steiner has released a tool named SVGcode. It’s a PWA to convert raster images to SVG vector graphics. SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, …
Continue reading “SVGcode: a PWA to convert raster images to SVG vector graphics”
Interesting take by the folks at nystudio107: instead of installing things such as node locally, why not run it in a container with an alias linked to it? Instead of installing all of the tools & packages you’re used to using, we use Docker images that someone else has created that contain these tools & …
Continue reading “Dock Life: Using Docker for All The Things!”
The past few weeks/months Steve Ruiz has been teasing a lot of the work he has been doing on tldraw, an app to draw diagrams. never too late for a second pass on the UI — Steve Ruiz (@steveruizok) November 2, 2021 About two weeks ago he released it, and also made the source code …
<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”
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 …