#buildWithLit
Here's a Connect 4 demo with Preact signals and Lit, based on @jaffathecake's one in Preact (https://piaille.fr/@jaffathecake@mastodon.social/110111677805867133). Zero update after the first render. All changes are direct-to-DOM.
Most of the code is copied from Jake's demo; I added a small Lit directive to achieve the direct-to-DOM that's integrated into Preact.
https://lit.dev/playground/#gist=a95902c8db543d453a66839277052502
/poke @justinfagnani
My base experience with Lit has been OK so far, but integration with #VSCode and #WithAstro seems to be not great -- as code completion for custom properties doesn't seem to work.
The editor treats the web component as just a plain-old component, with nothing custom (and shows warnings about the properties). My searching hasn't provided a way to add extra typing info.
There are an enormous number of moving parts here .... 😖
Anyone here use lit.dev for HTML/web components?
(I don’t know if there’s a hashtag for it)
What’s been your experience? Anything you like better for making the experience of writing a web component just a little nicer with little overhead?
Excited to share a presentation around the ongoing #Vaadin #WebComponents #accessibility project improvements. Do check it out if you are interested in #a11y. There's some groundwork being done and that also gets us closer to
#buildWithLit conversion!
https://docs.google.com/presentation/d/1avZO5MFD5h045C9sxBtj9nuswawMVLJnCaiRlX_TIXU/edit?usp=sharing
Some secrets from the #Vaadin R&D weekly update. Our #designsystem team has been working on really cool stuff lately, including #buildWithLit experiments! Also, do check out eslint-config-vaadin alpha, it's a great #eslint config:
Today has been a good day. Despite russian missile strikes and rolling blackouts, I managed to deliver experimental versions of 5 #Vaadin #WebComponents using #buildWithLit. Don't tell it to my tech lead!
@jyasskin @slightlyoff Here's an example of SSR using #buildWithLit:
New additions to Web Components bookmarks:
- cypress-lit = #Cypress + #buildWithLit 🔥
- query-selector-shadow-dom by #Webdriver
- Shadow DOM support for Capybara 💎
- Shadow DOM with Java #Selenium
Check out the full list of testing solutions:
#WebComponentsAdvent Day 23: Starter Templates.
If you want to start creating #WebComponents, today's update is for you! Meet the list of starters kits with @vite, #buildWithLit, #vue, #svelte, FAST, Shoelace, other libraries and tools.
It's been a month since I joined #fediverse. Time for a proper #introduction 🙃
I'm Serhii from #Ukraine. Not always online due to #UkraineWar (we had a 30 hours #blackout last week after russian missile strikes).
I've been working at #Vaadin for more than 5 years. My main focus is creating #WebComponents using #javascript, #java and #typescript.
Finally, I'm a member of #OpenWC and #ModernWebDev teams. I also do #opensource on my own and I especially enjoy using #buildWithLit 🔥
Today we released React wrappers for #Vaadin web components, powered by #buildWithLit Labs React. Check it out: npm i @hilla/react-components
#WebComponents + #react = 😎
#WebComponentsAdvent Day 10: Codelabs.
If you are new to Web Components and don't know where to start, today's update is for you! Check out codelabs: detailed step by step tutorials created by #buildWithLit, Chrome Developers and #OpenWc teams:
The #BuildWithLit Discord server now has forum channels!
They really look like a much better way to do support, so if you use Lit, head on over and check them out: https://discord.com/invite/buildWithLit
RT @TonySpegel@twitter.com
One component and three ways to compare images:
a slider, an overlay and a split view. Had lots of fun building this 😄 - as always it's @buildWithLit@twitter.com
#webcomponents #buildWithLit
https://github.com/TonySpegel/image-comparison
🐦🔗: https://twitter.com/TonySpegel/status/1569078471581655040
