Alex GrantSep 3, 2025

I wished there was a native todo app web component that you could drop into your web application under construction and test data update and mutation flows.

So I made one.

https://github.com/localnerve/editable-object

#webdev #webdevelopment #WebComponent #HtmlWebComponent #Frontend #HTML #CSS #JavaScript

GitHub - localnerve/editable-object: An editable object web component

An editable object web component . Contribute to localnerve/editable-object development by creating an account on GitHub.

GitHub
InautiloJan 29, 2025

#Development
QR code HTML web component · A handy way to add a QR code to a HTML link https://ilo.im/1622pq

_____
#QrCode #Webpage #Website #WebComponent #HtmlWebComponent #WebDev #Frontend #HTML #CSS #JavaScript

Building a QR Code HTML Web Component | Scott Jehl, Web Designer/Developer

A little while back, a friend mentioned that there really should be an HTML Web Component for QR codes. This is how I'd make one if I needed to.

InautiloJan 19, 2025

#Development #Resources
Action Table · An HTML web component to make your table interactive https://ilo.im/160v1t

_____
#Data #Table #HTMLWebComponent #WebComponent #WebDev #Frontend #HTML #CSS #JavaScript

Action Table: HTML Web Component

InautiloDec 19, 2024

#Development #Techniques
Getting oriented with HTML video · How to serve a clip in portrait or landscape format https://ilo.im/161hb7

_____
#Video #WebComponent #HtmlWebComponent #ResponsiveDesign #WebDev #Frontend #HTML #CSS #MediaQuery

Getting Oriented with HTML Video - HTMHell

A collection of bad practices in HTML, copied from real websites.

Getting Oriented with HTML Video - HTMHell
InautiloDec 19, 2024

#Development #Techniques
Getting oriented with HTML video · How to serve a clip in portrait or landscape format https://ilo.im/161hb7

_____
#Video #WebComponent #HtmlWebComponent #ResponsiveDesign #WebDev #Frontend #HTML #CSS #MediaQuery

Getting Oriented with HTML Video - HTMHell

A collection of bad practices in HTML, copied from real websites.

Getting Oriented with HTML Video - HTMHell
Pelle WessmanDec 8, 2024
Could it possibly be made a #HtmlWebComponent (can't remember if that's still the term we're using @zachleat.com?) by having the stylable one wrap the built in one in a progressive enhancement fashion?
InautiloAug 7, 2024

#Development #Techniques
HTML web component with shadow DOM · Sometimes, a little shadow DOM can be a treat https://ilo.im/15zpwi

_____
#HtmlWebComponent #WebComponent #LightDOM #ShadowDOM #ProgressiveEnhancement #WebDev #Frontend #HTML #CSS #JavaScript

HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer

Shadow DOM and Slots can be part of a progressive enhancement strategy, actually.

InautiloMay 30, 2024

#Development #Suggestions
A common web component learning blunder · Why learning vanilla web components matters https://ilo.im/15z0ws

_____
#ComponentFramework #WebComponent #HtmlWebComponent #Framework #WebPerf #WebDev #Frontend #HTML #JavaScript

A common web component learning blunder

Through stalking the #WebComponents hashtag and my Frontend Masters course, I’m privy to a lot of developers’ first experiences with web components. There’s a wide range of people digging in, but the most common first-time experience I come across is a developer coming from a classical component framework like React with JSX going straight to writing vanilla Web Components, becoming frustrated, and then deeming web components “not ready for primetime.”

daverupert.com
InautiloMay 3, 2024

#Development #Approaches
My approach to HTML web components · Naming, single responsibility, cross-component communication https://ilo.im/15ypqx

_____
#WebComponent #HtmlWebComponent #ProgressiveEnhancement #WebDev #Frontend #DOM #HTML #CSS #JavaScript

My approach to HTML web components

Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.

Show threadJason GarberFeb 23, 2024

Based on feedback yesterday, I've updated the <aria-collapsible> #HTMLWebComponent examples page.

New feature: The component dispatches a `toggle` event similar to the `<details>` element, allowing authors to attach additional behavior based on specific use case and user needs.

💻 Code: https://github.com/jgarber623/aria-collapsible

🧩 Demo: https://jgarber623.github.io/aria-collapsible/example/

📦 Package: https://www.npmjs.com/package/@jgarber/aria-collapsible

#WebComponent #WebComponents #ARIA #accessibility #a11y #ProgressiveEnhancement

GitHub - jgarber623/aria-collapsible: A dependency-free Web Component that generates progressively-enhanced collapsible regions using ARIA States and Properties.

A dependency-free Web Component that generates progressively-enhanced collapsible regions using ARIA States and Properties. - jgarber623/aria-collapsible

GitHub