I made a mistake in my previous post about Web Components, and what began as a correction turned into a fairly detailed exploration of HTML, JSX and XML.

✨ Check out my latest resource-packed post on HTML ✨
🔗 https://dev.to/hasanhaja/web-fundamentals-the-html-jsx-confusion-438p

Previous post:
🔗 https://dev.to/hasanhaja/web-fundamentals-web-components-part-1-3nlh

#html #webcomponents #webdev

I always found the mandatory dash in custom elements from web components to be kind of weird, even though I understand why it's necessary (ie. for future compatibility with HTML tags that don't yet exist.)

If you use web components, I'd be curious to hear how you name your components with the mandatory dash? Do you do x-name or some other common prefix? Or just try to name every tag using two or more words? Or something else?

#javascript #html #css #webcomponents

New liked #link: "Tram-Lite" - Tram-Lite is a lite javascript and HTML library that helps developers build native web-components, and makes building simple native web-applications easier and more elegant!
https://tram-one.io/tram-lite/
#WebComponents • #Otter

Finished migrating my site from @astro to @eleventy 🎈

Plain ol' CSS and zero JS isn't super impressive for a small content site, but I'm happy that I could make some improvements as I went. WebC feels amazing to work with!

🔗 Astro build: https://hasanhaja.com/
✨ New build: https://hasanhaja.netlify.app/

https://fosstodon.org/@hasanhaja/110992427890194932

#HTML #CSS #WebComponents

Quarter-baked #WebComponents #idea: `HTMLElementsTagNameAttrMap`.

This maps a given custom element tag name to its known attributes.

```
class MyComponent extends HTMLElement {
connectedCallback(): void {
console.log(`foo: ${this.getAttribute('foo')}`);
}
}
customElements.define('my-component', MyComponent);

declare global {
interface HTMLElementTagNameMap {
'my-component': MyComponent;
}
interface HTMLElementTagNameAttrMap {
// foo is a supported attribute.
'my-component': ['foo'];
}
}

const el = document.createElement('my-component');
el.setAttribute('foo', 'bar');
// ^ --- editor should be able to auto-complete / type-check `foo`.

// Same for #Preact
renderToString(<my-component foo="bar" />);
```

🔗 “Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component” by @jaredwhite

#WebComponents #WebC

⚓️ https://nicolas-hoizey.com/links/2023/08/25/enhance-vs-lit-vs-webc-or-how-to-server-render-a-web-component/

Made a lot of progress this week migrating my personal site from @astro to @eleventy 🎈

They're looking more and more alike on the surface, but internally I've stripped everything back down to the basics

1️⃣ TailwindCSS to Plain CSS
2️⃣ SolidJS to virtually no JavaScript

Love Astro and Solid (I still use it a lot on other projects), but it made more sense to keep my personal site as simple as possible. It's also been really fun to write CSS from scratch 🤩

#HTML #CSS #WebComponents

Just pushed a release yesterday, now you can define multiple web-components all in a single ComponentDefinition tag in Tram-Lite! This makes defining a lot of tags all at once much easier!

https://codepen.io/JRJurman/pen/xxmOQpy?editors=1000

I added this after seeing someone want to do this with their own project using Tram-Lite. If there's anything you'd like to do with Tram-Lite, reach out, and I'd be happy to discuss and help!

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

#TramLite #WebComponents #HTML #WebDev

For a while now I've been working on the 7GUI Tasks outlined in https://7guis.github.io/7guis/

It's been a great way to vet what is easy and what is difficult to do in Tram-Lite, and a big part of the changes that led to the v3 API.

With all that said, here it is, the 7GUI tasks, in Tram-Lite: https://jrjurman.com/Tram-Lite-7GUIs/

And if you'd like to build something in Tram-Lite, check out the site here: https://tram-one.io/tram-lite/

#TramLite #Frontend #WebDev #7GUIs #Javascript #HTML #WebComponents

@chris_hayes @khoi @zachleat Astro is incredible! I’ve yet to try the view transitions/island persistence feature, but I’ve been using it for a while for both my personal website and as a sandbox tool to test out UI framework features and differences.

I just got on the 11ty, #WebComponents and WebC hype train a few weeks ago, and I’m loving it! I’m in the process of rewriting my personal site with it and it’s been nothing but bliss so far

Super excited to post about the release of Tram-Lite, v3! 🎉

This release is super exciting because it includes a way to make native web-components right in your HTML template! 🥳

No build tools, no compliers, no custom server language. You can even ditch Javascript, if that's your jam 😅.

Check out the documentation, examples, and guides at https://tram-one.io/tram-lite/ 📓

#WebDev #WebComponents #TramLite #Javascript #HTML

Welcome new followers 👋

Please let me know if you have any questions about #enhance #WebComponents or #webdev in general.

Just posted part two of my Web Components Can Be Simple series about adding interactive

https://dryan.com/articles/web-components-can-be-simple-part-2/

#frontendweb #css #webcomponents

learning #webcomponents https://gist.github.com/lindenb/3ac9e7539f7d3900577e92fb7e6282ec #javascript #html #bioinformatics #web
e.g:

<bio-anchor>rs25</bio-anchor> , <bio-anchor >ENSG00000005108</bio-anchor>, <bio-anchor build="hg38">chr1:1234-1235</bio-anchor>

Running WASI binaries from your HTML using Web Components

https://runno.dev/articles/wasi-web-component

https://news.ycombinator.com/item?id=37287339

#WebAssembly #WASI #WebComponents

I've been doing some searching, and it just didn't seem that there were any dead-simple options for importing external HTML content. So, here's my hat in the ring, super simple, and uses native web-components 👏

And for all the people who don't want to bloat with another dependency (no matter how small), I hope this is just a great template for people to copy into their own repos!

https://github.com/Tram-One/html-import-element

#WebComponents #HTML #javascript #WebDev

https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/

Web components and when you should (or shouldn't) use them. Something in the writing style of the author itched me in a wrong way, but I agree with their points about stability (as opposed to breaking changes in web frameworks) and "it just works", regardless of your preferred framework. Fortunately for me, we don't need server-side rendering, so that's one downside we don't care about ✌️.
#web_dev #webcomponents #html #frontend

🔗 “Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component” by @jaredwhite

#WebComponents #WebC

⚓️ https://nicolas-hoizey.com/links/2023/08/25/enhance-vs-lit-vs-webc-or-how-to-server-render-a-web-component/

New blog post: "Catching errors thrown from connectedCallback" https://nolanlawson.com/2023/08/25/catching-errors-thrown-from-connectedcallback/

Probably only interesting to folks who are really working deeply with #webcomponents, but I thought it might be useful to someone.

New blog post day: https://open.substack.com/pub/dougwade/p/creating-your-tybalt-website?utm_campaign=post&utm_medium=web

#tybalt #webcomponents