Released v3 of Tram-Deco, the declarative custom element library that uses #DeclarativeShadowDOM (which became available in all major browsers this week)!

https://github.com/Tram-One/tram-deco

I also added an import method, which allows you to import definitions from other HTML files (relies on `Document.parseHTMLUnsafe`, so millage may vary).

Planning to present this to Web Components Community Group, so I would love any feedback! ❤️

#WebComponents #WebDev #HTML #HTMLFirst #ShadowDOM

Put together a super lightweight and standard-API-focused implementation of Declarative Custom Elements. 👏

https://github.com/Tram-One/tram-deco

Exclusively implements all the standard Web Component APIs in an HTML-First approach that should be familiar and easy to pick up 😁 - no special syntax or template language here.

Check the repo for live codepens, and would love to hear what people think! ❤️

#WebComponents #WebDev #HTMLFirst #DeclarativeShadowDOM #ShadowDOM #HTML

Working on a way to build Declarative Custom Elements using the newly released Declarative Shadow DOM.

Turned out to only 20 lines of Javascript! I'm surprised how neatly everything kinda works.

https://codepen.io/JRJurman/pen/dyrJWep

There are some gotchas and it certainly could be more elegant, but I think it has the building blocks for building Web Components from an HTML First approach.

#WebComponents #WebDev #HTMLFirst #DeclarativeShadowDOM #ShadowDOM #HTML

There's some interesting thinking going on here: https://html-first.com/

My current website project is a static site generator, so while the output is largely aligned with HTML First principles, the input still goes through a build pipeline (albeit one with very minimal dependencies).

Then I found https://enhance.dev and that is a *very* interesting approach to this.

#HTML #HTMLFirst #NoBuildJS #EnhanceDev #StaticSites #WebDev

#webdev #htmlfirst
TIL why `esm.run/[pkg]/` redirect to `cdn.jsdelivr.net/npm/[pkg]/+esm`

`/+esm` suffix avoid breaking lazy fetch an asset, especially when using wasm module.
example
```javascript
const their = await WebAssembly.instantiateStreaming(
fetch(new URL("their.wasm", import.meta.url)))
```
without `/+esm` suffix, it will point out to `cdn.jsdelivr.net/npm/their.wasm` which is not exist instead of `cdn.jsdelivr.net/npm/[pkg]/their.wasm`

#WebDev #htmlfirst
Building webapp without hot reload is quite something. And I only use basic https server. It also target web api that only works on mobile Android.

My weapons:
- Cloudflare Pages
- alpine-ajax (not htmx) & alpinejs
- eruda (devtool) so I can inspect it on mobile phone
- qrencode (cli)
- httplz (https server)

The good side is I don't need to worry about updating the codebase to fit with the latest toolchains in case I revisit it after long inactivity.