screw it, i'm finally gonna make a web component to make PWA Installs FEEL native.
#typescript #litjs #webcomponents
#typescript #litjs #webcomponents
May 30, 2025 at 3:00 AM
screw it, i'm finally gonna make a web component to make PWA Installs FEEL native.
#typescript #litjs #webcomponents
#typescript #litjs #webcomponents
I just love the way #webcomponents simplify creating custom widgets.
My #BbtA / #BitD progress clock widget is in public alpha shape after just a couple of short coding sessions:
cyan-design-system.netlify.app/addons/cn-st...
#litjs #customelements #webdev #rpg
My #BbtA / #BitD progress clock widget is in public alpha shape after just a couple of short coding sessions:
cyan-design-system.netlify.app/addons/cn-st...
#litjs #customelements #webdev #rpg
January 7, 2025 at 12:46 PM
I just love the way #webcomponents simplify creating custom widgets.
My #BbtA / #BitD progress clock widget is in public alpha shape after just a couple of short coding sessions:
cyan-design-system.netlify.app/addons/cn-st...
#litjs #customelements #webdev #rpg
My #BbtA / #BitD progress clock widget is in public alpha shape after just a couple of short coding sessions:
cyan-design-system.netlify.app/addons/cn-st...
#litjs #customelements #webdev #rpg
November 24, 2024 at 4:25 PM
Oh Dear..
Why does Selection.getComposedRanges() have MULTIPLE signatures:
- Safari: Selection.getComposedRanges(shadowRoot)
- Chrome: Selection.getComposedRanges({ shadowRoots: [shadowRoot] })
But hey, now its working in Chrome, Safari (+ iOS), and Firefox!
#webcomponents #litjs #webdeveloper
Why does Selection.getComposedRanges() have MULTIPLE signatures:
- Safari: Selection.getComposedRanges(shadowRoot)
- Chrome: Selection.getComposedRanges({ shadowRoots: [shadowRoot] })
But hey, now its working in Chrome, Safari (+ iOS), and Firefox!
#webcomponents #litjs #webdeveloper
June 27, 2025 at 2:27 AM
Oh Dear..
Why does Selection.getComposedRanges() have MULTIPLE signatures:
- Safari: Selection.getComposedRanges(shadowRoot)
- Chrome: Selection.getComposedRanges({ shadowRoots: [shadowRoot] })
But hey, now its working in Chrome, Safari (+ iOS), and Firefox!
#webcomponents #litjs #webdeveloper
Why does Selection.getComposedRanges() have MULTIPLE signatures:
- Safari: Selection.getComposedRanges(shadowRoot)
- Chrome: Selection.getComposedRanges({ shadowRoots: [shadowRoot] })
But hey, now its working in Chrome, Safari (+ iOS), and Firefox!
#webcomponents #litjs #webdeveloper
April 14, 2025 at 11:53 PM
Wooo high performance number tweening & percentage change badges.
This was done in LitJS as a “drop in” component. Stocks for demo & perf testing (not real prices ofc lol)!
#UIDesign #development #webdev
This was done in LitJS as a “drop in” component. Stocks for demo & perf testing (not real prices ofc lol)!
#UIDesign #development #webdev
January 15, 2025 at 3:23 AM
Wooo high performance number tweening & percentage change badges.
This was done in LitJS as a “drop in” component. Stocks for demo & perf testing (not real prices ofc lol)!
#UIDesign #development #webdev
This was done in LitJS as a “drop in” component. Stocks for demo & perf testing (not real prices ofc lol)!
#UIDesign #development #webdev
Post number 4 about web components: styles, and strategies on how to include them
jschof.dev/posts/2024/3...
#javascript #frontend #webcomponents
jschof.dev/posts/2024/3...
#javascript #frontend #webcomponents
Web Components and You (part 4): Style - Jschof.dev
Let's visit how you would do CSS styles in a web component, and how LitJS includes styles.
jschof.dev
March 17, 2024 at 10:31 PM
Post number 4 about web components: styles, and strategies on how to include them
jschof.dev/posts/2024/3...
#javascript #frontend #webcomponents
jschof.dev/posts/2024/3...
#javascript #frontend #webcomponents
It's been a while! Time for a quick post about `slotchange` and checking the contents of slots in web components!
jschof.dev/posts/2024/8...
#webcomponents #litjs #slots
jschof.dev/posts/2024/8...
#webcomponents #litjs #slots
Web Components and You (part 9): Handling empty slots - Jschof.dev
Sometimes you want to check the contents of slots in the shadow DOM and conditionally do things based on what's in them. Can you do this with slots? Yes! It's a little strange though...
jschof.dev
August 13, 2024 at 2:31 AM
It's been a while! Time for a quick post about `slotchange` and checking the contents of slots in web components!
jschof.dev/posts/2024/8...
#webcomponents #litjs #slots
jschof.dev/posts/2024/8...
#webcomponents #litjs #slots
I'm writing this #PbtA -style story clock for #storygames. It can be used as a form control or as a standalone custom element in HTML.
Now, I'm wondering if I could find some #RPG players or GMs who could help me get the user experience right.
#litjs #webcomponents #BitD
Now, I'm wondering if I could find some #RPG players or GMs who could help me get the user experience right.
#litjs #webcomponents #BitD
January 5, 2025 at 7:38 AM
I'm writing this #PbtA -style story clock for #storygames. It can be used as a form control or as a standalone custom element in HTML.
Now, I'm wondering if I could find some #RPG players or GMs who could help me get the user experience right.
#litjs #webcomponents #BitD
Now, I'm wondering if I could find some #RPG players or GMs who could help me get the user experience right.
#litjs #webcomponents #BitD
Just pushed out the public beta of my #PbtA / #BitD style clock element!
cyan-design-system.netlify.app/addons/cn-st...
#webcomponents ftw! MIT Licensed, based on #litjs.
cyan-design-system.netlify.app/addons/cn-st...
#webcomponents ftw! MIT Licensed, based on #litjs.
January 22, 2025 at 8:01 AM
Just pushed out the public beta of my #PbtA / #BitD style clock element!
cyan-design-system.netlify.app/addons/cn-st...
#webcomponents ftw! MIT Licensed, based on #litjs.
cyan-design-system.netlify.app/addons/cn-st...
#webcomponents ftw! MIT Licensed, based on #litjs.
Right, we're using litjs for reactivity and template. I think I was just considering when properties are instantiated/set by using the element modifier in ember. setter/getter does the trick here, though! I need to check how it happens with litjs. It might just work with lit?
December 21, 2023 at 9:09 PM
Right, we're using litjs for reactivity and template. I think I was just considering when properties are instantiated/set by using the element modifier in ember. setter/getter does the trick here, though! I need to check how it happens with litjs. It might just work with lit?
Tein tossa sunnuntai-iltana sen verran päheän minor-versiopäivityksen tohon mun harrasteprojektiin että oli ihan pakko opetella käyttämään ruudunnauhoitusta.
Oon kyllä iloisesti yllättynyt toolingin tilasta tässä ajassa.
#roolipelitaivas #roolipelit #astro #codemirror #litjs
Oon kyllä iloisesti yllättynyt toolingin tilasta tässä ajassa.
#roolipelitaivas #roolipelit #astro #codemirror #litjs
May 20, 2025 at 5:27 AM
Tein tossa sunnuntai-iltana sen verran päheän minor-versiopäivityksen tohon mun harrasteprojektiin että oli ihan pakko opetella käyttämään ruudunnauhoitusta.
Oon kyllä iloisesti yllättynyt toolingin tilasta tässä ajassa.
#roolipelitaivas #roolipelit #astro #codemirror #litjs
Oon kyllä iloisesti yllättynyt toolingin tilasta tässä ajassa.
#roolipelitaivas #roolipelit #astro #codemirror #litjs
If you haven’t already, I’d challenge you to try LitJS in a small project—you might find the criticisms don’t hold up in practice. Let’s not dismiss tools without firsthand experience letting you make your own decisions :D
November 25, 2024 at 2:15 PM
If you haven’t already, I’d challenge you to try LitJS in a small project—you might find the criticisms don’t hold up in practice. Let’s not dismiss tools without firsthand experience letting you make your own decisions :D
You can just take a function that takes a DOM node though. No abstraction other than functions needed.
Signature would be:
(data, node) => void
Call it with the node you want the "render prop" to render into. Nothing related to Lit at all.
*and it's Lit, not LitJS
Signature would be:
(data, node) => void
Call it with the node you want the "render prop" to render into. Nothing related to Lit at all.
*and it's Lit, not LitJS
November 11, 2024 at 3:31 AM
You can just take a function that takes a DOM node though. No abstraction other than functions needed.
Signature would be:
(data, node) => void
Call it with the node you want the "render prop" to render into. Nothing related to Lit at all.
*and it's Lit, not LitJS
Signature would be:
(data, node) => void
Call it with the node you want the "render prop" to render into. Nothing related to Lit at all.
*and it's Lit, not LitJS
Well this is funny... apparently if you close your web omponent shadow root in LitJS, it's exposed as a publicly accessible property anyway 😂
I totally get why- and I don't think Lit needs to worry about it. But interesting how closed shadow root is so unwieldy.
#webcomponents #javascript
I totally get why- and I don't think Lit needs to worry about it. But interesting how closed shadow root is so unwieldy.
#webcomponents #javascript
[lit-element] Component with closed shadow root still has a public property to access the shadow root · Issue #4020 · lit/lit
Which package(s) are affected? Lit Core (lit / lit-html / lit-element / reactive-element) Description When I create a LitElement component with a closed shadow root, it still exposes a public prope...
github.com
April 15, 2024 at 12:35 AM
Well this is funny... apparently if you close your web omponent shadow root in LitJS, it's exposed as a publicly accessible property anyway 😂
I totally get why- and I don't think Lit needs to worry about it. But interesting how closed shadow root is so unwieldy.
#webcomponents #javascript
I totally get why- and I don't think Lit needs to worry about it. But interesting how closed shadow root is so unwieldy.
#webcomponents #javascript
Essas tecnologias novas são uma merda, é mais fácil fazer uma twla interativa com tenplates django, htmx e litjs do que o mesmo usando qualquer framework bosta que use JSX.
Ao menos usando MCP vc resolve bem a parte de chat
Ao menos usando MCP vc resolve bem a parte de chat
September 11, 2026 at 3:55 PM
Essas tecnologias novas são uma merda, é mais fácil fazer uma twla interativa com tenplates django, htmx e litjs do que o mesmo usando qualquer framework bosta que use JSX.
Ao menos usando MCP vc resolve bem a parte de chat
Ao menos usando MCP vc resolve bem a parte de chat
🔥 Afternoon Hot Take
Treating the AI like a compiler with explicit specs instead of a magic refactor button is what made this work. Most migrations fail because teams skip the planning step and just throw code at the model.
#React #LitJS #AIEngineering #Migration
Treating the AI like a compiler with explicit specs instead of a magic refactor button is what made this work. Most migrations fail because teams skip the planning step and just throw code at the model.
#React #LitJS #AIEngineering #Migration
Using AI to Migrate from Lit to React | Viget
On a recent project, we needed to change from Lit.js to React to meet new infrastructure requirements without changing the launch deadline. We used AI to make the migration, which cut the time from months to a few weeks.
www.viget.com
August 18, 2026 at 7:33 PM
🔥 Afternoon Hot Take
Treating the AI like a compiler with explicit specs instead of a magic refactor button is what made this work. Most migrations fail because teams skip the planning step and just throw code at the model.
#React #LitJS #AIEngineering #Migration
Treating the AI like a compiler with explicit specs instead of a magic refactor button is what made this work. Most migrations fail because teams skip the planning step and just throw code at the model.
#React #LitJS #AIEngineering #Migration
Yep, it's true. You can render props super easily in LitJS. But that's not the point- the point is that you'd have to adopt an abstraction over the web components to do this.
November 10, 2024 at 9:57 PM
Yep, it's true. You can render props super easily in LitJS. But that's not the point- the point is that you'd have to adopt an abstraction over the web components to do this.
Yeah, Lit has a construct in its `html` tagged literal that let's you denote property assignment. But this is an assignment made in the litJS templating framework. I don't think I said setting a property was not possible with web components, it's just awkward without those abstractions 🤔
November 10, 2024 at 9:56 PM
Yeah, Lit has a construct in its `html` tagged literal that let's you denote property assignment. But this is an assignment made in the litJS templating framework. I don't think I said setting a property was not possible with web components, it's just awkward without those abstractions 🤔
Part 3 of my web components series: Reactive state with LitJS: jschof.dev/posts/2024/3...
Web Components and You (part 3): Simplifying with LitJS - Jschof.dev
It can be tedious to wire up reactivity in a web component ourselves. Let's see how easy it can be with LitJS
jschof.dev
March 9, 2024 at 9:01 PM
Part 3 of my web components series: Reactive state with LitJS: jschof.dev/posts/2024/3...
LitJS Skeleton Loader
LitJS Skeleton Loader. GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
February 2, 2025 at 12:09 AM
I think I’ve finally perfected skeleton loaders in LitJS:
- No flickers when content loads quickly
- Skeleton animates in/out
- Efficient reloads built in
- Effective on the DOM: only re-renders upon a state change (eg loading filler text => resolved final text)
AND ITS ALL A DIRECTIVE!!
- No flickers when content loads quickly
- Skeleton animates in/out
- Efficient reloads built in
- Effective on the DOM: only re-renders upon a state change (eg loading filler text => resolved final text)
AND ITS ALL A DIRECTIVE!!
February 2, 2025 at 12:03 AM
I think I’ve finally perfected skeleton loaders in LitJS:
- No flickers when content loads quickly
- Skeleton animates in/out
- Efficient reloads built in
- Effective on the DOM: only re-renders upon a state change (eg loading filler text => resolved final text)
AND ITS ALL A DIRECTIVE!!
- No flickers when content loads quickly
- Skeleton animates in/out
- Efficient reloads built in
- Effective on the DOM: only re-renders upon a state change (eg loading filler text => resolved final text)
AND ITS ALL A DIRECTIVE!!