Are web components worth it?

Off The Main Thread

#Tech #Surma #Jake Archibald

1:36:55

What’s up, Tribe, and welcome back to Good Moms Bad Choices! January was amazing, but its time to turn the page on the calendar and embrace beautiful new energy as we enter ‘The Journey of Love February.’ This month is all about the heart - join Erica and Milah to catch up and discuss what’s new in the world of motherhood, marriage, and amor! In this week’s episode, the ladies offer witty and sharp perspectives about personal growth in love, supporting your kids through their friend drama, and how to honor your true needs in a partnership. Mama Bear to the Rescue! The Good Moms discuss protective parenting and helping your kids fight their battles (8:00) Bad Choice of the Week: Help! My kids saw me in my lingerie! (20:00) My Happily Ever After: Erica and Milah discuss the prospect of marriage, dreams of becoming a housewife, and the top 5 ways to be confident in love (32:00) Yoni Mapping: Releasing Trauma and Increasing Pleasure (57:00) Its OK to fuck up, but also, what do you (really) bring to the table: The Good Moms have an honest discussion about finding accountability and growth before love (1:03:00) Watch This episode & more on YouTube! Catch up with us over at Patreon and get all our Full visual episodes, bonus content & early episode releases. Join our private Facebook group! Let us help you! Submit your advice questions, anonymous secrets or vent about motherhood anonymously! Submit your questions Connect With Us: @GoodMoms_BadChoices @TheGoodVibeRetreat @Good.GoodMedia @WatchErica @Milah_Mapp Official GMBC Music: So good feat Renee, Trip and http://www.anthemmusicenterprises.com Join us this summer in paradise at the Good Vibe Rest+Vibe Retreat in Costa Rica July 31- August 5 August 8 - August 13 See omnystudio.com/listener for privacy information.…

about a year ago 43:15

MP3•Episode home

In this episode, Jake and Surma chat about web components. Why they were invented, what they're useful for, and how they would improve.

Resources:

Surma showers his eyeball.
The old custom elements 'v0' spec.
The old shadow DOM 'v0' spec.
The old HTML imports spec.
The initial version of Polymer.
Lit (formally lit-html).
HTML attributes vs DOM properties.
Issue looking at ways custom elements could have behavior.
The ElementInternals API, for making custom elements interact with forms.
The is attribute.
WebKit's position on the is attribute.
Programmatically assigning children to slots.
Issue looking at ways to slot children that aren't direct children of the shadow host.
Declarative shadow DOM.
Custom element support in React 19.
pinch-zoom custom element.

16 episodes

Are web components worth it?

Off The Main Thread

published about a year ago

MP3•Episode home

In this episode, Jake and Surma chat about web components. Why they were invented, what they're useful for, and how they would improve.

Resources:

Surma showers his eyeball.
The old custom elements 'v0' spec.
The old shadow DOM 'v0' spec.
The old HTML imports spec.
The initial version of Polymer.
Lit (formally lit-html).
HTML attributes vs DOM properties.
Issue looking at ways custom elements could have behavior.
The ElementInternals API, for making custom elements interact with forms.
The is attribute.
WebKit's position on the is attribute.
Programmatically assigning children to slots.
Issue looking at ways to slot children that aren't direct children of the shadow host.
Declarative shadow DOM.
Custom element support in React 19.
pinch-zoom custom element.

16 episodes

#Tech #Surma #Jake Archibald

All episodes

1
New View Transition Stuff 49:25

21 weeks ago49:25

49:25

In this episode, Jake goes through some of the newer features of the View Transition API, along with some vaguer ideas that are planned for the future. Resources General view transitions docs Custom entry and exit transitions hasUAVisualTransition so you know when the UA has done its own transition view-transition-class view-transition-types Cross-document view transitions to wait for a particular element The blocking attribute to wait for a particular resource The pageswap and pagereveal events Nested view transitions The match-element vs auto discussion Scoped view transitions attr() in Chrome Safari just went and released view-transition-name: auto…

1
TC39 Roundup Drama Edition Part II: JS0 and JSSugar 31:42

25 weeks ago31:42

31:42

In this episode, Surma talks about a presenation-maybe-soon-to-be-a-proposal "JS0", which explores the idea of splitting JavaScript into two specifications: JS0, focusing on security, performance and capabilties, implemented by engines; and JSSugar, focussing on developer productivity and syntactic sugar features implemented by build tools. Notes & Corrections: Yes, I know, people still do have to step through assembler. But I stand behind the essence of my point: The debug symbols for compiled languages feel very reliable. We should be able to at least match that reliability in JavaScript. Guy Bedford currently works at Fastly. Resources: Previous episode on Shared Structs The infamous slide deck OTMT episode on SourceMaps on source maps…

1
TC39 Roundup Drama Edition Part I: Shared Structs 30:47

27 weeks ago30:47

30:47

In this episode, Surma talks about the Stage 2 proposal "JavaScript Struct", which introduces fixed-layout objects and the ability to share them between realms. Notes & Corrections from Shu : Surma was slightly wrong about why private fields were originally considered problematic for sharability. The problem occurs when a class can be evaluated multiple times: function makeClass() { return class MyClass { #priv; getPrivateField(instance) { return instance.#priv; } }; } const C1 = makeClass(); const C2 = makeClass(); const i1 = new C1(); const i2 = new C2(); // this throws! i1.getPrivateField(i2); This behavior makes it hard to compile private fields just as "slots" on an object, as clearly additional behavior is required. This is somewhat at odds with the goal of achieving a fixed layout. Also, launching is mid-2025 is very optimistic. Resources: SharedArrayBuffer Structs proposal Return overrides Records & Tuples proposal Surma’s buffer-backed-object library for SharedArrayBuffer…

1
More build tools: Nix 41:06

32 weeks ago41:06

41:06

After talking about Bazel in one of our previous episodes, we are now looking at Nix, a build system that has been getting increasing attention lately. Resources: OTMT Bazel episode Surma's video on Nix Eelco Dolstra's PhD Thesis Nix & NixOS A branch of Squoosh using Nix Nixpkgs manual Comparison of size and freshness of different package managers Home Manager Nix pills…

1
The new stylable select element 45:29

35 weeks ago45:29

45:29

We're finally getting a element we can fully control with CSS! A bunch of other stuff needed to be added to the platform to make it work, and the good news is we can use it a lot of them independently of . Resources: Chrome's article on the new , and how you can provide feedback. The CSS appearance property . Nope, I still don't know what it does. The Popover API . "On popover accessibility: what the browser does and doesn’t do" by Hidde de Vries and Scott O'Hara. The CSS anchor positioning API . The previous spatnav spec effort . The hidden attribute until-found value (sorry, I said if-found in the episode). The CSS element function . Timing of cloning for the element . Animating to height auto . The new entry-exit animation feautres . The proposed command and commandfor attributes which give buttons declaritive activation behavior.…

1
Chrome's new LLM AI API OMG 38:23

40 weeks ago38:23

38:23

Chrome is experimenting with exposing an LLM to the web platform. Jake and Surma dig into how the API works, and whether something like this could work on the open web. Resources: The explainer ChatGPT functions Chrome's initial vague docs about the feature Gemini terms of use The EURion constellation WebNN…

1
Chrome’s secretly installed extensions 29:41

44 weeks ago29:41

29:41

Luca found a hidden Chrome extension that is installed by default in Chrome and most Chromium derivatives. Surma and Jake dig into what this extensions does and how reasonable it is to get angry about it. Resources: Luca’s original tweet thread The extension’s source code Discussion on blink-dev The original PR that introduced the extension Brendan Eich’s response Brave PR disabling the extension…

1
Are web components worth it? 43:15

52 weeks ago43:15

43:15

In this episode, Jake and Surma chat about web components. Why they were invented, what they're useful for, and how they would improve. Resources: Surma showers his eyeball . The old custom elements 'v0' spec . The old shadow DOM 'v0' spec . The old HTML imports spec . The initial version of Polymer . Lit (formally lit-html). HTML attributes vs DOM properties . Issue looking at ways custom elements could have behavior . The ElementInternals API , for making custom elements interact with forms. The is attribute . WebKit's position on the is attribute . Programmatically assigning children to slots . Issue looking at ways to slot children that aren't direct children of the shadow host . Declarative shadow DOM . Custom element support in React 19 . pinch-zoom custom element .…

1
Why Source Maps don’t always work 42:59

1 year ago42:59

42:59

In this episode, Surma shares with Jake all the things he learned reading up on source maps and DWARF. Resources: Jake's Jericho triangle source-map-explorer Hacker News comment by Joseph Shorr on the origins of source maps The Source Map "specification" EvanW's source map visualizer Wikipedia: VLQ DWARF specification llvm-dwarfdump gimli addr2line bundlephobia Wasmphobia WebAssembly Debugging Chrome Extensions by Ingvar TC39 source maps spec Squoosh Animal Well .kkrieger: Gameplay video and Wikipedia article "C64 'fast loaders'" "Thank you for playing Wing Commander"…

1
Putting React In The Browser 44:00

1 year ago44:00

44:00

In this episode, Jake and Surma chat about the complexities of adding common framework patterns into the web platform, and work that has been done on that so far. Resources: Michael Jackson's tweet . Is WebAssembly magic performance pixie dust? - Surma's investigation into wasm performance. defaultValue reflects the value attribute . The value property is complicated . HTML template instantiation . DOM parts API . DOM Parts Imperative API . DOM Parts Declarative Template API . Atomic move for elements . Shizo Kanakuri's marathon record…

1
Canvas-based Web Apps 46:08

1 year ago46:08

46:08

In this episode, Surma talks about web apps that (partly) abandon the DOM and use canvas instead, to take rendering matters into their own hands. Figma is one popular app that uses this approach, while Flutter is an entire app platform that went with this technique to provide portability. Jake and Surma discuss the tradeoffs of building apps this way. Resources: AI text-to-speech having a stroke ServiceWorker Static Routes Targeting the browser with Bevy Flutter’s “Showcase” section with a 6MB gif Flutter’s Material 3 Demo w/o Wasm Flutter’s Material 3 Demo w/ Wasm Ian 'Hixie' Hickson’s “Towards a modern Web stack” document HarfBuff…

1
The Apple PWA Ban 51:30

1 year ago51:30

51:30

In this episode, Jake chats about the latest EU ruling that requires Apple to allow other browser engines on iOS, and how Apple is reacting to it. Resources: Microsoft vs the EU Microsoft vs the US BrowserChoice.eu IBrowse Mobile operating system market share Web platform tests dashboard The internal Apple email about HTML5 The Open Web Advocacy group The EU digital markets act Safari is "three browsers" Same Safari, different device Apple's "Using alternative browser engines in the European Union" docs Apple is killing web apps in the EU…

1
TC39 Roundup and Bevy’s ECS 1:20:57

1 year ago1:20:57

1:20:57

In this episode, Surma shares what he learned while getting started with the Bevy Game engine, Entity Component Systems and why they might be useful for the Web. Jake rounds up the newest JavaScript language features that landed in TC39’s Stage 3. Resources: Bevy Game Engine Bevy Rendering Pipeline Buffer-backed Objects , a library by Surma to store objects in ArrayBuffer Surma built Boids with Bevy: Tweet 1 , Tweet 2 When should your alarm go off when daylight savings time kicks in? TC39 Stage 3 Proposals ShadowRealm style API on workers Our previous episode which covers JSON imports. The JSON spec . Pushing up the daisies .…

1
The Big Build Bool Bonanaza II 1:24:17

1 year ago1:24:17

1:24:17

In this episode, Jake investigates whether the existence of build tools is a symptom of the web being underpowered, or if they are part of the solution to make the web better. Surma shares his experience of learning about Bazel and how it can be used to build web projects. Resources: Touching cloth . Emirates silly class . Yes, we have done "The big build tool bonanza" before. Jake: Although "Terry's ringpull museum" isn't a real thing, the closest thing that comes to mind is a site I still use every time I buy a new pair of shoes, it's Ian's Shoelace Site . Jake's 10 year old blog posts on progressive enhancement . NextJS server actions . Rollup's docs . Jake and Surma’s talk on writing custom Rollup plugins. Vite . Some of the issues with HTTP/2 push . HTTP 203 episode on importing JSON . Using import attributes with build tools . Improving TypeScript types for import attributes . Silly view transition demo . Jason Lengstorf video: 4 Web Devs, 1 App Idea . Bazel . Aspect’s Bazel rules for JavaScript . Bazel Remote Caching .…

1
WebGPU and Browser Ideologies 1:18:23

2 years ago1:18:23

1:18:23

In this episode, Surma talks about the “GPU” in “WebGPU” and how this new web standard makes programming for the GPU more accessible. Jake talks about how different browsers approach standards and their perceived ideologies around what they prioritize. Resources: Surma’s blog post on WebGPU A 13-part blog post series on the architecture of GPUs. The OpenGL internal state object explained Dawn , a C++ library that brings the WebGPU API to C++ wgpu , a Rust crate that brings the WebGPU API to Rust. The extensible web manifesto . Edge 'injecting' content into the Chrome download page . -webkit-box-reflect . Is Safari the new IE? Stadia controller flash .…

Off The Main Thread

1
From the Archive — Changing jobs, Deno, and optimizing animations 57:56

2 years ago57:56