Lmst

最近 #HTMLFirst というワードが自分のタイムラインに流れているんだけど、どういう概念か気になっている。
雰囲気で「 #React のデファクトスタンダード化からの揺り戻し的なことかな？」というイメージで英文を眺めている

This was the top performing post on @TheNewStack last week, so it seems there is a tremendous amount of interest in a post-React future among web developers. Maybe my Gmail analogy wasn’t far off after all ;) https://thenewstack.io/from-react-to-html-first-microsoft-edge-debuts-webui-2-0/ #WebDevelopment #javascript #htmlfirst https://mastodon.social/@ricmac/112531029962000384

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

Screenshot of codepen, with HTML panel on the left, and a browser preview on the right.

The code has a template with a custom "word-count" element, which then also has a template with a shadowrootmode. The shadow root template has style tags, a button, and script tags. The script tags have attributes `td-constructor` and `td-connectedcallback`, and use the `this` keyword.

On the right panel, we see a preview of the button, styled as described in the code.

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

Code snippet, there are two script tags, the first one has a comment that says "following script runs on component connectedCallback" and has an attribute td-connectedCallback. The second script has a comment that says "following script runs on component attributeChangedCallback" and has an attribute td-attributeChangedCallback. Inside the script tag is javascript code to query elements, update text content, and add event listeners.

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

I just love it when my browser WORKS. When the website doesn't break my "open in new tab" or my "back" or my "history." And I love when it's a surprize. When I click something that I was sure was going to break stuff, and it worked without breaking! No more stupid JS-only on-click handling with a useless link, etc. #webdev #htmlFirst

Why is this “HTML First” not helpful, and what would true HTML First look like?

https://meiert.com/en/blog/true-html-first/

#html #htmlfirst

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.

“#HTMLFirst” is a fantastic mindset, but https://html-first.com is a disappointment and a distraction.

Not once does that website suggest that #HTML should be #valid (to even constitute HTML), #semantic, or #accessible.

But HTML First thinking starts with actual HTML, used according to purpose, accessible to everyone.

That’s the “HTML First” we need.

(I’m cooking a book about that kind of HTML First, but it’s too early to make announcements.)

One of the downsides of heavy use of UI toolkits and widgetry is that things like the `maxlength` attribute can get forgotten. #UXfail #htmlfirst

ZIP Code field containing "01301-3911", with a validation message of: "Characters used: 10 out of 5."

Guidelines for #webdev that puts html in the right place: at the front and in the middle. Don't keep falling into the escalating frameworks trap. (Please!)
#htmlfirst
https://html-first.com/

I know some of these statements may sound a little controversial at first, but they could be on to something here: https://html-first.com/ #HTMLFirst

#htmlfirst is the way the web was designed to be used.

Start with the content (HTML), then progressively enhance it with style (CSS) and behaviour (JavaScript).

"Modern" build systems lose many of the benefits of this approach.

I agree with these principles, except for inline CSS & JavaScript. https://html-first.com

#Wochenrückblick, Ausgabe 14 (2023-45).

Diesmal mit #Apple #Watch, sechs komplette Jahre Trink-History in #Waterminder („Wie viel Club Mate ballerst du eigentlich die ganze Zeit?“), Herumnerden an der #Wärmepumpe im Haus (ausführlicher Blogpost kommt die Tage!), #HTMLFirst, einer sehr spannenden Karte beim @DeutscherWetterdienst, #Numbat, #NoHello und, wie fast immer, etwas Techno.

https://www.marcusjaschen.de/blog/2023/2023-45/

Tram-Lite v5 is now available 🥳

* new custom element tl-broadcast, that emits events on attribute changes
* new attribute tl-rebroadcast, that can map existing events to new events out from the element

Both of these can emit events up or down the light and shadow DOM, making it possible to define powerful behavior between components, all in HTML! 😮

Check out the docs and examples on the website! 📜

https://tram-one.io/tram-lite/

#TramLite #WebComponents #htmlFirst #WebDev #HTML

Added #CodePen live widgets to the Tram-Lite documentation. It's awesome to be able to embed a live playground in any page, and makes it that much easier for people to kick-start using the project. 🎉

And, since everything is in #html there's no tab switching required 😁

Check it out here: https://tram-one.io/tram-lite/#tl-definition

#TramLite #htmlFirst

Screenshot of the Tram-Lite Website, below the existing documentation there is a head "Live Example" with a codepen widget. The widget has HTML code on the left, and a result pane on the right.

Happy to share that Tram-Lite now supports exporting and importing components! 🎉

This means you can create web-components with Tram-Lite and share them to be used in any project! 🔧

You can read all the details here: https://tram-one.io/tram-lite/#importing-and-exporting

If you haven't already, now is the best time to start building
(and now sharing) components with Tram-Lite!

If you make something cool, you can even make a PR for some hacktoberfest cred 🎃 :github:

#WebComponents #WebDev #HTML #TramLite #HTMLfirst

Excited for the new Tram-Lite v4 - which makes Tram-Lite an HTML-first library for developers that want to build and work with web-components! 🎉

https://tram-one.io/tram-lite/

Attributes for 2-way data binding, and retriggering scripts on attribute changes, all in HTML 😮

Also, a way for developers to build their own custom behaviors for elements! 🔧

This has been in the works for a long while, and there's still more awesome things to come! 😁

#WebDev #WebComponents #TramLite #HTML #htmlFirst

#HTMLFirst

Client Info