Hawk Ticehurst
@hawkticehurst.com
UX Engineer @vscode.dev. He/Him
🕸️ hawkticehurst.com
📍 New York, NY
🕸️ hawkticehurst.com
📍 New York, NY
Video is WIP, but wanted to share a side quest I went on adding some of the ideas from @trueadm.dev's Ripple, esp the control flow
I've never seen anyone support the execution of inline functions in an `html` tagged template (pls correct me), but this is a *really* cool and powerful primitive y'all
I've never seen anyone support the execution of inline functions in an `html` tagged template (pls correct me), but this is a *really* cool and powerful primitive y'all
![VS Code Insiders showing an Example.js file. The file contains:
import { Component, html, defineComponent } from '../../@lib/client.js';
class CounterButton extends Component {
count = 0;
render() {
return html`
<button
onclick=${() => {
this.count++;
this.rerender();
}}
>
Clicked ${this.count} ${this.count === 1 ? 'time' : 'times'}
</button>
${() => {
if (this.count === 5) {
return html`<p>You got to 5! Keeping going!</p>`;
}
if (this.count === 10) {
this.count = 0;
return html`<p>Incredible! You win!</p>`;
}
}}
<ul>
${() => {
const items = [];
for (let i = 1; i <= this.count; i++) {
items.push(html`<li>Item ${i}</li>`);
}
return items;
}}
</ul>
`;
}
}
defineComponent('counter-button', CounterButton);](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:fxipo3ogt5nrxjddervd4hxa/bafkreia7aezm3ow7jg6ofivprxexf5dzowxmoyeevxfafcv5s7emh4i5za@jpeg)
September 9, 2025 at 12:12 AM
Video is WIP, but wanted to share a side quest I went on adding some of the ideas from @trueadm.dev's Ripple, esp the control flow
I've never seen anyone support the execution of inline functions in an `html` tagged template (pls correct me), but this is a *really* cool and powerful primitive y'all
I've never seen anyone support the execution of inline functions in an `html` tagged template (pls correct me), but this is a *really* cool and powerful primitive y'all
How funny! You’re the one who snagged the "ripple" NPM package!
No joke, I was working on component model I was calling Ripple earlier this summer that has a *shockingly* similar shape to your ripple.
I really love how much further you pushed the syntax tho, esp the native JS control flow!
No joke, I was working on component model I was calling Ripple earlier this summer that has a *shockingly* similar shape to your ripple.
I really love how much further you pushed the syntax tho, esp the native JS control flow!
August 29, 2025 at 2:23 AM
How funny! You’re the one who snagged the "ripple" NPM package!
No joke, I was working on component model I was calling Ripple earlier this summer that has a *shockingly* similar shape to your ripple.
I really love how much further you pushed the syntax tho, esp the native JS control flow!
No joke, I was working on component model I was calling Ripple earlier this summer that has a *shockingly* similar shape to your ripple.
I really love how much further you pushed the syntax tho, esp the native JS control flow!
Congrats to @zachleat.com for expanding into the menswear business. Huge!! 🔥
March 29, 2025 at 11:38 PM
Congrats to @zachleat.com for expanding into the menswear business. Huge!! 🔥
The idea of web component “overhead” is overblown — to even my own surprise!
Rendering 1000s of nested WCs is *more* than competitive with the heavyweight champs of the web framework world.
We’re talking S/S+ tier perf depending on the initialization method.
Cont…
Rendering 1000s of nested WCs is *more* than competitive with the heavyweight champs of the web framework world.
We’re talking S/S+ tier perf depending on the initialization method.
Cont…
February 24, 2025 at 3:46 PM
The idea of web component “overhead” is overblown — to even my own surprise!
Rendering 1000s of nested WCs is *more* than competitive with the heavyweight champs of the web framework world.
We’re talking S/S+ tier perf depending on the initialization method.
Cont…
Rendering 1000s of nested WCs is *more* than competitive with the heavyweight champs of the web framework world.
We’re talking S/S+ tier perf depending on the initialization method.
Cont…
Yep agreed. Since last night I realized (really remembered) that the screenshots I've been sharing is only 1 of 3 tables for keyed framework results.
I had totally missed it until now but the third table shows transferred size and first paint so it looks like we do have the ability to disambiguate!
I had totally missed it until now but the third table shows transferred size and first paint so it looks like we do have the ability to disambiguate!
February 3, 2025 at 4:02 PM
Yep agreed. Since last night I realized (really remembered) that the screenshots I've been sharing is only 1 of 3 tables for keyed framework results.
I had totally missed it until now but the third table shows transferred size and first paint so it looks like we do have the ability to disambiguate!
I had totally missed it until now but the third table shows transferred size and first paint so it looks like we do have the ability to disambiguate!
Did another run and definitely feeling even more confident that initial render is being measured. In the benchmark output you'll see logs about first paint / paint metrics.
Makes me think that perhaps the link that @jakelazaroff.com shared is just one component of what is tested?
Makes me think that perhaps the link that @jakelazaroff.com shared is just one component of what is tested?
February 3, 2025 at 5:34 AM
Did another run and definitely feeling even more confident that initial render is being measured. In the benchmark output you'll see logs about first paint / paint metrics.
Makes me think that perhaps the link that @jakelazaroff.com shared is just one component of what is tested?
Makes me think that perhaps the link that @jakelazaroff.com shared is just one component of what is tested?
Update:
I wrapped `customElements.define` in a timeout that runs after 2s to mock a slow initial render (to hopefully test if the benchmark starts after button click or not).
The implementation dropped to 5th place implying that initial render and therefore WC initialization is counted (right?).
I wrapped `customElements.define` in a timeout that runs after 2s to mock a slow initial render (to hopefully test if the benchmark starts after button click or not).
The implementation dropped to 5th place implying that initial render and therefore WC initialization is counted (right?).
February 2, 2025 at 8:57 PM
Update:
I wrapped `customElements.define` in a timeout that runs after 2s to mock a slow initial render (to hopefully test if the benchmark starts after button click or not).
The implementation dropped to 5th place implying that initial render and therefore WC initialization is counted (right?).
I wrapped `customElements.define` in a timeout that runs after 2s to mock a slow initial render (to hopefully test if the benchmark starts after button click or not).
The implementation dropped to 5th place implying that initial render and therefore WC initialization is counted (right?).
Y'ALL.
Portable HTML Web Components are fucking cracked.
It looks like they are **faster** than the fastest Vanilla JS implementation in the JS Framework Benchmark.
I literally reran the benchmark 5 times because I didn't believe it, but every single time they came in first place 🤯
Portable HTML Web Components are fucking cracked.
It looks like they are **faster** than the fastest Vanilla JS implementation in the JS Framework Benchmark.
I literally reran the benchmark 5 times because I didn't believe it, but every single time they came in first place 🤯
January 29, 2025 at 5:30 AM
Y'ALL.
Portable HTML Web Components are fucking cracked.
It looks like they are **faster** than the fastest Vanilla JS implementation in the JS Framework Benchmark.
I literally reran the benchmark 5 times because I didn't believe it, but every single time they came in first place 🤯
Portable HTML Web Components are fucking cracked.
It looks like they are **faster** than the fastest Vanilla JS implementation in the JS Framework Benchmark.
I literally reran the benchmark 5 times because I didn't believe it, but every single time they came in first place 🤯
Also to poke some fun, if you want god tier performance in Solid, just use web components 😉
Context: @ryansolid.bsky.social ranked rendering perf in his last stream. Solid was S tier, but he mentioned the only thing better than S tier is vanilla JS at “god tier”
Context: @ryansolid.bsky.social ranked rendering perf in his last stream. Solid was S tier, but he mentioned the only thing better than S tier is vanilla JS at “god tier”
January 28, 2025 at 9:42 AM
Also to poke some fun, if you want god tier performance in Solid, just use web components 😉
Context: @ryansolid.bsky.social ranked rendering perf in his last stream. Solid was S tier, but he mentioned the only thing better than S tier is vanilla JS at “god tier”
Context: @ryansolid.bsky.social ranked rendering perf in his last stream. Solid was S tier, but he mentioned the only thing better than S tier is vanilla JS at “god tier”
Don’t let anyone ever tell you that web components aren’t performant
They can absolutely flyyy 😮💨
They can absolutely flyyy 😮💨
January 28, 2025 at 9:42 AM
Don’t let anyone ever tell you that web components aren’t performant
They can absolutely flyyy 😮💨
They can absolutely flyyy 😮💨
Nice, all those changes made a huge difference. Now at a weighted geo mean of 1.04
January 28, 2025 at 3:42 AM
Nice, all those changes made a huge difference. Now at a weighted geo mean of 1.04
Lol I couldn't help myself and ran the benchmark myself. Had to fix a few things and did some optimizations but generally seems like this method is sitting in Svelte/Solid territory of perf 👀
January 27, 2025 at 11:04 PM
Lol I couldn't help myself and ran the benchmark myself. Had to fix a few things and did some optimizations but generally seems like this method is sitting in Svelte/Solid territory of perf 👀
My favorite is the skeleton analogy of web development
January 7, 2025 at 11:02 PM
My favorite is the skeleton analogy of web development
The whole family doesn't look too shabby 👀 I'd happily accept your HTML logo as canon @nerdy.dev
December 11, 2024 at 7:02 PM
The whole family doesn't look too shabby 👀 I'd happily accept your HTML logo as canon @nerdy.dev
The web moves quick. New #WebComponents logo just dropped, but instead it's #CustomElements (as it should be) 👀
December 11, 2024 at 5:08 PM
The web moves quick. New #WebComponents logo just dropped, but instead it's #CustomElements (as it should be) 👀
This! Completely agreed that it should be Custom Elements instead.
PSA to Everyone: This is my new proposal.
PSA to Everyone: This is my new proposal.
December 11, 2024 at 5:05 PM
This! Completely agreed that it should be Custom Elements instead.
PSA to Everyone: This is my new proposal.
PSA to Everyone: This is my new proposal.
Option D: I've always thought something like this could be a cool version of a #WebComponent logo that still fits within the larger family vanilla web logos.
December 11, 2024 at 4:05 PM
Option D: I've always thought something like this could be a cool version of a #WebComponent logo that still fits within the larger family vanilla web logos.
Heads up looks like there might be a bug in the dark/light theming (on iOS)
December 9, 2024 at 12:11 AM
Heads up looks like there might be a bug in the dark/light theming (on iOS)
Dev Tools: Zen is built on top of Firefox. I was a bit nervous about the transition from Chrome, but have found the dev tools are excellent and more than competitive with Chrome.
November 11, 2024 at 11:24 PM
Dev Tools: Zen is built on top of Firefox. I was a bit nervous about the transition from Chrome, but have found the dev tools are excellent and more than competitive with Chrome.