TechHub

xoron :verified:JSX-Syntax with Webcomponents.<a href="https://positive-intentions.com/blog/dim-functional-webcomponents" rel="nofollow noopener" translate="no" target="_blank">https://positive-intentions.com/blog/dim-functional-webcomponents</a>I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.<a href="https://infosec.exchange/tags/functional" class="mention hashtag" rel="nofollow noopener" target="_blank">#functional</a> <a href="https://infosec.exchange/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://infosec.exchange/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://infosec.exchange/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://infosec.exchange/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://infosec.exchange/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://infosec.exchange/tags/components" class="mention hashtag" rel="nofollow noopener" target="_blank">#components</a> <a href="https://infosec.exchange/tags/library" class="mention hashtag" rel="nofollow noopener" target="_blank">#library</a> <a href="https://infosec.exchange/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://infosec.exchange/tags/customelements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customelements</a> <a href="https://infosec.exchange/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> <a href="https://infosec.exchange/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> <a href="https://infosec.exchange/tags/polymer" class="mention hashtag" rel="nofollow noopener" target="_blank">#polymer</a> <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a>

Digital Malayali :ve:We are happy to announce our new open-source web template for creating a simple and minimal radio directory - Radiohub! It's powered by the amazing web-component library Shoelace.Feel free to check it out and let us know your feedback.<a href="https://github.com/digitalmalayali/radiohub" target="_blank" rel="nofollow noopener" translate="no">https://github.com/digitalmalayali/radiohub</a><a href="https://techhub.social/tags/digitalmalayali" class="mention hashtag" rel="tag">#digitalmalayali</a> <a href="https://techhub.social/tags/opensource" class="mention hashtag" rel="tag">#opensource</a> <a href="https://techhub.social/tags/webtemplate" class="mention hashtag" rel="tag">#webtemplate</a> <a href="https://techhub.social/tags/shoelace" class="mention hashtag" rel="tag">#shoelace</a> <a href="https://techhub.social/tags/lit" class="mention hashtag" rel="tag">#lit</a> <a href="https://techhub.social/tags/lithtml" class="mention hashtag" rel="tag">#lithtml</a> <a href="https://techhub.social/tags/webcomponent" class="mention hashtag" rel="tag">#webcomponent</a> <a href="https://techhub.social/tags/radio" class="mention hashtag" rel="tag">#radio</a> <a href="https://techhub.social/tags/radiodirectory" class="mention hashtag" rel="tag">#radiodirectory</a>

Puzzle ITCHo. ho, ho - der 🎅 hat zum heutigen Tag den vierten Teil unserer Blogpostserie rund um Web Components mitgebracht! 🚀Nachdem wir im vorderen Artikel den Projektsetup mit Lit angeschaut haben, tauchen wir nun tiefer in Lit 🔥 ein und vergleichen seine Konzepte und Features mit Angular. Du wirst sehen, dass Lit deine Aufmerksamkeit verdient hat und durchaus eine solide und schlanke Alternative zu den populären JavaScript Frameworks sein kann.<a href="https://www.puzzle.ch/de/blog/articles/2023/12/06/web-components-part-4-lit-for-angular-developers" rel="nofollow noopener" translate="no" target="_blank">https://www.puzzle.ch/de/blog/articles/2023/12/06/web-components-part-4-lit-for-angular-developers</a><a href="https://mstdn.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mstdn.social/tags/LitHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#LitHTML</a> <a href="https://mstdn.social/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸"in a way you can think of a lit element is like a computed effect of a signals although our system kinda works like a push system instead of signals that often have a pull system" ~ <a href="https://fosstodon.org/@justinfagnani" class="u-url mention" rel="nofollow noopener" target="_blank">@justinfagnani</a> <a href="https://mas.to/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> <a href="https://mas.to/tags/litHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#litHTML</a> <a href="https://mas.to/tags/litElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#litElement</a> <a href="https://mas.to/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mas.to/tags/javaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javaScript</a> <a href="https://mas.to/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸It's cool that <a href="https://mas.to/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a> is integrating with <a href="https://mas.to/tags/Signals" class="mention hashtag" rel="nofollow noopener" target="_blank">#Signals</a>.It feels like we've been circling around this design pattern for decades; they've been called Observables, Pub/Sub, State, Context, etc. STOKED to hear that there's discussion around standardizing and adding Signals to the <a href="https://mas.to/tags/webPlatform" class="mention hashtag" rel="nofollow noopener" target="_blank">#webPlatform</a>!<a href="https://www.youtube.com/live/ri9FEl_hRTc?si=-oztbFGgLG0f9aXJ&t=1636" rel="nofollow noopener" translate="no" target="_blank">https://www.youtube.com/live/ri9FEl_hRTc?si=-oztbFGgLG0f9aXJ&t=1636</a><a href="https://mas.to/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mas.to/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> <a href="https://mas.to/tags/litHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#litHTML</a> <a href="https://mas.to/tags/litElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#litElement</a> <a href="https://mas.to/tags/buildWithLit" class="mention hashtag" rel="nofollow noopener" target="_blank">#buildWithLit</a> <a href="https://mas.to/tags/javaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javaScript</a> <a href="https://mas.to/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mas.to/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mas.to/tags/preact" class="mention hashtag" rel="nofollow noopener" target="_blank">#preact</a> <a href="https://mas.to/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://mas.to/tags/reactjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactjs</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸It's super cool that <a href="https://mas.to/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a> is supporting standard <a href="https://mas.to/tags/javaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javaScript</a> <a href="https://mas.to/tags/decorators" class="mention hashtag" rel="nofollow noopener" target="_blank">#decorators</a>, but I'm still not going to use them!Maybe one day when they don't need to be transpiled anymore.<a href="https://mas.to/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mas.to/tags/buildWithLit" class="mention hashtag" rel="nofollow noopener" target="_blank">#buildWithLit</a> <a href="https://mas.to/tags/litHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#litHTML</a> <a href="https://mas.to/tags/litElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#litElement</a> <a href="https://mas.to/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸I think that <a href="https://mas.to/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> solves <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a>'s problems and <a href="https://mas.to/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> is right to scope styles to the element.<a href="https://mas.to/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mas.to/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mas.to/tags/litElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#litElement</a> <a href="https://mas.to/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<a href="https://mas.to/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> is getting a "context" api <a href="https://www.npmjs.com/package/@lit/context" rel="nofollow noopener" translate="no" target="_blank">https://www.npmjs.com/package/@lit/context</a>It seems to work like <a href="https://mas.to/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> <a href="https://mas.to/tags/Context" class="mention hashtag" rel="nofollow noopener" target="_blank">#Context</a>, but it's an open standard that other <a href="https://mas.to/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> frameworks can apparently implement.<a href="https://mas.to/tags/javaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javaScript</a> <a href="https://mas.to/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://mas.to/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mas.to/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mas.to/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> <a href="https://mas.to/tags/litelement" class="mention hashtag" rel="nofollow noopener" target="_blank">#litelement</a> <a href="https://mas.to/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a>

Dioramic Life<a href="https://mas.town/tags/solidjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#solidjs</a> take 2, yesterday. Went a lot better. I think I may like it better than <a href="https://mas.town/tags/sveltejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#sveltejs</a> I am on the fence a bit on the conventions for css but I must confess the scopedn styling is nice.For comparison I may try <a href="https://mas.town/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> to determine if that is all I really need.

Ben HollisStarting to play around with Lit for a custom element project I’ve started, but I don’t think I can handle going back to class components after having experienced React hooks. The ability to extract complex behaviors into reusable hooks is just too useful. I would rather avoid class-based code where possible. <a href="https://mstdn.social/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> <a href="https://mstdn.social/tags/customelements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customelements</a> <a href="https://mstdn.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a>

Zarin Loosli<a href="https://fosstodon.org/@hasanhaja" class="u-url mention" rel="nofollow noopener" target="_blank">@hasanhaja</a> that's part of why I'm curious about <a href="https://mastodon.world/tags/hauntedjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#hauntedjs</a> , which brings functional components to <a href="https://mastodon.world/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> . And to be clear, the tooling isn't awful, it's just not as good as you'd expect from the most popular framework (big surprise).However, the devex of vanilla <a href="https://mastodon.world/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> is as least as far behind lit as lit is behind React. If you know you want to be framework-agnostic, lit is a pretty obvious way to go.Personally, I really like the freedom of not being constrained to a (2/x)

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<a href="https://hachyderm.io/@thisismissem" class="u-url mention" rel="nofollow noopener" target="_blank">@thisismissem</a> which part of "the framework around them" do you miss? Like if it's just the declarative DOM manipulation there are many dom-diffing libs. <a href="https://mas.to/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> <a href="https://mas.to/tags/haunted" class="mention hashtag" rel="nofollow noopener" target="_blank">#haunted</a> <a href="https://mas.to/tags/morphdom" class="mention hashtag" rel="nofollow noopener" target="_blank">#morphdom</a> <a href="https://mas.to/tags/virtualdom" class="mention hashtag" rel="nofollow noopener" target="_blank">#virtualdom</a>. <a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

NullVoxPopuliI've personally also seen an adapter for <a href="https://mastodon.coffee/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> / <a href="https://mastodon.coffee/tags/lithtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#lithtml</a> and this whole idea of universal reactivity is so cool. Desperately needed, because... There is too much fragmentation out there, and it's nice to see it all coming together in a way that isn't dogmatic to any one particular framework or programming paradigm.

Recent searches

Search options

Administered by:

Server stats:

#lithtml