#webComponents

There's a new Slow Animation for Focusing! This one's a rainbow. 🏳️‍🌈

- P3 colors
- Animated with #CSS (instead of Three.js)
- Built with a #WebComponents custom element
- Check it out at https://slaff.netlify.app/

🤪 I just want to transform a single file that uses a JS framework into vanilla JS that registers a #WebComponents custom element. It's basic, so I could use Svelte, Preact, Riot, Vue, Lit... almost anything! But I've spent three hours, and everything insists on Vite/Rollup/SvelteKit nonsense. I just want a CLI that can compile one damn file!

I'm going to try again. I think Riot can do it. Holy hell, the JavaScript ecosystem has become addicted to "starter kits" and tooling overload.

@kizu Scope is going to be awesome for #WebComponents

I'm looking for a new position as a Software Engineer. I have 10+ years expierence, and I'm looking for Senior / Staff Roles, Node.js, React, JavaScript, Typescript! #webdev #software #engineer #jobhunt #hiring #nodejs #javascript #typescript #tech #layoff #programming #career #lookingforwork #coder #coding #nextjs #opensource #webcomponent #webcomponents #webDevelopment #softwareEngineering #react #reactjs #OpenToWork

Question for the @frontend community:

What benefits would you say Web Components have over a framework's components, *besides* not being tied to a framework?

#WebComponents #frontend #webdev #html #javascript

🔗 “Building a modern design system in layers” by @dalmaer

#DesignSystem #WebComponents

⚓️ https://nicolas-hoizey.com/links/2023/05/16/building-a-modern-design-system-in-layers/

GeoServer v2.23.1 released including improved MapML viewer v0.11.0 with lots of new features. #MapML #WebComponents #GeoServer

Kudos to the GeoServer team and community for such a useful and consistent product.

https://geoserver.org/announcements/2023/05/23/geoserver-2-23-1-released.html

But #WebComponents are #JavaScript which they would need to load *somehow*. Assuming we could get them to bundle it they'd still be giving our script free reign to manipulate the page anyway we see fit. We currently rely on some hacks to achieve #CSS isolation without #shadowDOM but other than that I'm not certain a #web #component would improve anything.

I wish if web standard #WebComponents could solve these issues... but it's not, so Riot.js exists to fulfill the need for easy and convenient use of WebComponents the standard is a bit lacking).
I guess Riot.js is a webcomponent that is there to make things easier and more convenient to use.

これとか HTMX とか見てると、なんか Riot.js もやり方・使い方によってはこれからもうちょっとどうにかなりそうな気がするんだよな…

プリコンパイルもインブラウザコンパイルもサーバーサイド用のレンダリングモジュールもあるし（SSR は依存ライブラリによってちょっと遅いという issue 経ってたけど、そうあえばそれはいまどうなったかな…）、こういう世界観ってすでに Riot.js のメンテナーさんがもともと目指してる世界に近いというか。いや、そもそも Web 標準の
#WebComponents がもうちょっとこういう課題感を解決してくれたらいいんだけどな… Riot.js はつまるところ WebComponents 手軽に便利に使いたい（けど標準のそれだとちょっと足りない）を叶えるために存在してるみたいなところあるし。

#webdev #riotjs #javascript

https://github.com/josephernest/Swap

To all those button, cta, and layout #webcomponents. I made you a meme.

#JS that can be replaced with #CSS needs to meet some Bobs.

#WebComponents: My knowledge of them is limited, but the cross-platform story looks relatively good now: https://caniuse.com/?search=web%20components

One important piece is declarative shadow DOM. It enables better server-side rendering and UIs that work without JavaScript. It’s now supported by Chrome and Safari, but not by Firefox.

What is still missing? I remember reading that accessibility was an issue in some cases. Is that still true?

In Chris' Corner, Mr. Coyier looks at Web Components. https://codepen.io/spark/338 #WebComponents

In Chris' Corner, Mr. Coyier looks at Web Components. https://codepen.io/spark/338 #WebComponents

🔗 “Building a modern design system in layers” by @dalmaer

#DesignSystem #WebComponents

⚓️ https://nicolas-hoizey.com/links/2023/05/16/building-a-modern-design-system-in-layers/

This is cool…down the road if you need to get the tag name of a defined custom element, you'll be able to use customElements.getName. For example:

```js
customElements.getName(MyGroovyElement)

// would return my-groovy-element
```

It's landed in Safari TP, other browsers to follow. See:
https://github.com/whatwg/html/pull/9195

#WebComponents #HTML

https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html has been trending on the homepage of HN all day and the comments surfaced a bunch of new libraries to add to https://unsuckjs.com/. 🤩

#javascript #html #webcomponents

Just in time for the weekend, very excited to announce the arrival of Enhance Styles 5.0, a major upgrade to the configurable styling library built into every @enhance_dev project.

Full details in the announcement blog post, but I'll be sharing some highlights here as well 🧵

https://begin.com/blog/posts/2023-05-12-introduce-enhance-styles-5

#webdev #html #css #webcomponents

Tinkering today with a server where you write TSX / JSX and get a single endpoint that can serve just the plain HTML in different ways. For example you can do .htmlwc or .js and get the web component in either HTML format or JS format. Lots of interesting ideas here. #deno #htmx #html #server #webdev #overthewire #webcomponent #webcomponents

https://gist.github.com/reggi/2a49b47d367a31ceb37280f11579825c

@neil really though, I want two things (well don’t we all)

1 – web components (template, slot, etc) should work fully without the help of JavaScript, HTML should offer all the capabilities required to make web components work as is (seriously, any JavaScript is going to be pretty much the same each time, just give HTML the balls to do it itself)

B] in the meantime, make the able to do exactly the job of an include – let me specify a path to a valid well-formed chunk of stuff, let me tell it that it’s to be an include, and then the chunk of stuff appears exactly as if it was actually typed in at that spot in the markup

#HTML #NoJavaScript #Link #Include #WebComponents

WebComponents are awesome!! I just wish they had a mechanism for simple SSR as part of the spec. I mean, there is experimental support for SSR, but the way the spec doesn't define how you should go about creating the HTML. Also, afaik, theres no special lifecycle hook for components that are connected with SSR'd HTML. #webdev #webcomponents

Why do people think progressive enhancement (PE) equals "no JavaScript"?

Genuinely asking. Every time I bring up PE ppl interpret it as saying "zero client JS" which is not PE. Progressive enhancement is additive client JS rather than exclusively JS?

#webdev #webstandards #webcomponents

We need more web components enthusiasm for progressive enhancement.

Making everything require client JS ain't it. Note: I'm not saying no client JS. I'm saying mae it work well without and use client JS to make your app better.

That includes SD for the time being.

#webdev #webstandards #webcomponents

🌶️🥵 shadowdom is awesome but has many tradeoffs that put it in YAGNI territory and should only be a last resort not a default

(lightdom works great ! it got us here) #webcomponents #webstandards #webdev

I keep thinking that #WebComponents are the real solution; they provide CSS isolation with #shadowDOM, and would allow third parties to integrate by simply adding <html-elements>.

Trouble is; any #JS you import runs with full privileges on your user's browsers. What's really needed is a sandbox.

I think it may be a job for #Google's #AMP, but that is so poisoned it'll be a hard sell.

#webDev #customElements

I'm bothered that https://www.webcomponents.org/publish uses NPM packages as the main way to publish a web component. I want a better web-component "package manager", something that's simple, uses module imports, can use Tailwind and TypeScript, and just plops out a URL like Deno packages do. It would support LIT and webc. I'd want a storybook-like UI and sample code. #webcomponent #webcomponents #webdev #javascript #js #software #frontend #css #html

Custom elements give your server the opportunity to describe javascript behavior via HTML. It sounds silly but it is really cool. #webcomponents #JavaScript #html https://github.com/joist-framework/joist/tree/main/packages/di#context

@nosherwan keep state out of components, use attrs instead

#javascript #reactive #state #webcomponents

I'd take a pay cut to work with #webComponents

#webDev #javaScript #web #frontend

🕸️ 📦
Reactive state in Native Web Components:

Anyone not using Lit framework, how do you manage reactive state inside native web components?

I am learning about Astro & Web Components.

I have seen examples where javascript proxy objects can be used to updated reactive state in a native web component.

Are there any elegant solutions being used by anyone in this area?

#webcomponents
#state
#reactive
#javascript

An excellent rebuilding exercise by @shadeed9. Three things stand out. How little custom properties are used. No fluid layout or sizing using clamp and as I use #WebComponents its odd to see class names everywhere. 😅 https://ishadeed.com/article/rebuild-featured-news-modern-css/

It was a tonne of fun hanging with @mhartington this week learning all about **Ionic**. Thanks for hanging Mike!

https://www.youtube.com/watch?v=-QngQ5qu1Yw

**#ionicframework** **#webdevelopment** **#mobileapp** **#webcomponents**

🌐
Why you should Invest in
Web Components:

A very well written article, that argues why it is the best time to invest in Web Components rather than anyone else's flavor of the month Front End Framework.

https://blog.bitsrc.io/web-components-are-dead-long-live-web-components-1de76ab4890d

#webcomponents
#webdev
#javascript
#typescript

How do y’all think about a component having an intrinsic size vs having its container layout determine its size?

For example, should a toolbar set its own height, or should a page’s grid layout manage the toolbar’s height?
#ux #frontend #CSS #WebComponents

I think I kind of see what’s cool about Web Components, but it’s like, also trying to solve a “big picture” problem that I don’t really have. 🥴

Like, yeah it hides all the differences between all these frameworks, but you still have to learn yet another framework to use it. 🥴

Then you have to learn/relearn these standardized components and still have to stress about customizing or extending them.

#WebDevelopment #WebComponents

Playing with #CSS scope and #webcomponents in Chrome with the experimental feature turned on. Still, some behaviour that I'm not sure is correct.
A scope placed in a CSS layer can still be overridden by a simple rule placed outside the layer. And you can place `::part` inside a scope but need to prefix it like this `:scope::part(title){ ... }`.
Also, proximity takes a bit of getting used to but still very cool.

Updated the 'part' about `::parts`

Interesting to find that developers do care about performance when discussing #webcomponents. In the end, it does matter what and how you measure.

https://dutchcelt.nl/posts/web-components-and-three-questions/

@tanepiper @daanderson just noticed Stencil that is also a web component library, has some interesting contributors.

Two of the top contributors are actually from the qwikdev team.

Adam & Manu.

Also the fact that it is hosted under ionic-team on github.

#stencil
#webcomponents
#webdev

Hey there Accessibility Fedizens

I'm looking to consume good podcasts that talk about accessible HTML and CSS development. Bonus would be if they also cover Web Components.

Appreciate any recommendations.

#Accessibility #a11y #HTML #CSS #WebComponents