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

#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.

#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

#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

#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
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?
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.

#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

#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.

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