A rather geeky/technical weblog, est. 2001, by Bramus
<details> with <details-utils>
Zach created a very handy Web Component that augments and wraps around a <details> element. He’s named it <details-utils>. This web component adds five new responsive-friendly enhancements to one or more <details> elements nestled inside: Force open/closed Click outside to close Close on esc Animate open/closed Toggle root element class Using attributes you can control …
Continue reading “Add Responsive-Friendly Enhancements to <details> with <details-utils>“
Originally a Twitter thread and now — thankfully — a blogpost by Cory LaViska on Web Components: Shadow DOM? Light DOM? Slots? If you’ve heard of these but aren’t sure what they are, maybe this will clear things up! A Web Components Primer →
Cory LaViska: Web components are defined and registered with JavaScript. Depending on how and when you load the scripts that perform registration, you may see a brief flash of unstyled HTML where your custom elements should be when the page loads. This is not dissimilar to FOUC, which occurs when HTML is displayed before the …
Continue reading “FOUCE — Flash of Undefined Custom Elements”
Bento is an easy to use component library that helps you achieve a great page experience. Included components are components (such as a Gallery, Accordion, Carousel, …), 3rd party embeds (Facebook, Instagram, …), text-related utilities, etc. The components themselves are (mostly) available as Web Component or a React Functional Component. An Instagram embed for example …
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?”
<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>“
At (the ongoing) Adobe MAX 2021, Adobe announced that Photoshop and Illustrator are coming to the web, with Photoshop already in beta. Your collaborators can open and view your work in the browser and provide feedback. You’ll also be able to make basic edits without having to download or launch the apps. It’s not the …
A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free. Basic component definition is really simple: import Tonic from "https://cdn.skypack.dev/@optoolco/tonic" class MyGreeting extends Tonic { render () { return this.html`<div>Hello, ${this.props.name ?? 'Stranger'}.</div>` } } Tonic.add(MyGreeting); Tonic will automatically convert the CamelCased class name to the proper custom element name. <my-greeting></my-greeting> …
Continue reading “Tonic — A thin wrapper around Web Components”
Earlier this year Dave Rupert spoke at An Event Apart’s Spring Summit with a talk on Web Components: It’s the year 2021. Lots of us are building our websites and apps with components and design systems, perhaps leveraging a JavaScript framework to help glue all the pieces together. The web has matured in the last …
Back in May version 2.0 of Lit — a simple library for building fast, lightweight web components — was released. This little video by Rodrigo Pombo walks you through the syntax and API.