Player FM рдРрдк рдХреЗ рд╕рд╛рде рдСрдлрд╝рд▓рд╛рдЗрди рдЬрд╛рдПрдВ!
This is going to be Lit ЁЯФе
Manage episode 371782854 series 1391411
Justin Fagnani joins us this week to talk about Lit, a library that helps you build web components. With 17% of pageviews in Chrome registering use of web components, Lit has gained widespread adoption across a variety of companies looking to create reusable components which leverage the power and interoperability of the web platform. Tune in to learn about what makes this tiny library so incredibly lit!
Changelog++ members get a bonus 2 minutes at the end of this episode and zero ads. Join today!
Sponsors:
- Fastly тАУ Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
- Fly.io тАУ The home of Changelog.com тАФ Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
- Typesense тАУ Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally canтАЩt get any faster!
Featuring:
- Justin Fagnani тАУ Mastodon, Twitter, GitHub, LinkedIn, Website
- Amal Hussein тАУ Twitter, GitHub
- Kevin Ball тАУ Twitter, GitHub, LinkedIn, Website
Show Notes:
- Lit docs & examples
- Throwback Lit html episode on the Web Platform Podcast with Amal
- Polymer Library - LitтАЩs predecessor
- Custom Elements
- Shadow DOM
- Templates and Slots
- JS Tagged Template Literals
- Lit Element base class
- AmalтАЩs singing about тАЬdangerously set innerHTMLтАЭ
- Proposal for Scoped Custom Element Global Registries
- Proposal for declarative Shadow DOM
- Proposal for Template Instantiation
- Proposal for DOM Parts
- Proposal for тАЬopen-stylableтАЭ Shadow Roots
- Proposal for JavaScript Decorators
- Lit labs packages
- GoogleтАЩs Wireit - updates your npm scripts to make them smarter
- JustinтАЩs npm cli RFC for adding GoogeтАЩs Wireit script runner to npm
Something missing or broken? PRs welcome!
рдЕрдзреНрдпрд╛рдпреЛрдВ
1. It's party time, y'all! (00:00:00)
2. Welcoming Justin to the show (00:00:40)
3. What is it? (00:02:36)
4. The evolution of the project (00:04:36)
5. How do updates flow in to the DOM? (00:10:02)
6. How it tracks data (00:11:19)
7. Managing references (00:14:38)
8. dangerouslySetInnertHTML (00:17:13)
9. Lit is simple (af) (00:21:25)
10. Absolutely necessary (00:23:54)
11. App frameworks built on Lit (00:26:41)
12. Who's using this? (00:31:33)
13. How Lit is governed (00:34:44)
14. Building for the platform first (00:38:48)
15. Web components aren't sexy (00:40:46)
16. Incorporating shadow DOM (00:43:26)
17. Good role models (00:53:35)
18. Justin's web wish (00:54:53)
19. Closing time (00:57:30)
20. Outro (00:58:46)
337 рдПрдкрд┐рд╕реЛрдбрд╕
Manage episode 371782854 series 1391411
Justin Fagnani joins us this week to talk about Lit, a library that helps you build web components. With 17% of pageviews in Chrome registering use of web components, Lit has gained widespread adoption across a variety of companies looking to create reusable components which leverage the power and interoperability of the web platform. Tune in to learn about what makes this tiny library so incredibly lit!
Changelog++ members get a bonus 2 minutes at the end of this episode and zero ads. Join today!
Sponsors:
- Fastly тАУ Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
- Fly.io тАУ The home of Changelog.com тАФ Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
- Typesense тАУ Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally canтАЩt get any faster!
Featuring:
- Justin Fagnani тАУ Mastodon, Twitter, GitHub, LinkedIn, Website
- Amal Hussein тАУ Twitter, GitHub
- Kevin Ball тАУ Twitter, GitHub, LinkedIn, Website
Show Notes:
- Lit docs & examples
- Throwback Lit html episode on the Web Platform Podcast with Amal
- Polymer Library - LitтАЩs predecessor
- Custom Elements
- Shadow DOM
- Templates and Slots
- JS Tagged Template Literals
- Lit Element base class
- AmalтАЩs singing about тАЬdangerously set innerHTMLтАЭ
- Proposal for Scoped Custom Element Global Registries
- Proposal for declarative Shadow DOM
- Proposal for Template Instantiation
- Proposal for DOM Parts
- Proposal for тАЬopen-stylableтАЭ Shadow Roots
- Proposal for JavaScript Decorators
- Lit labs packages
- GoogleтАЩs Wireit - updates your npm scripts to make them smarter
- JustinтАЩs npm cli RFC for adding GoogeтАЩs Wireit script runner to npm
Something missing or broken? PRs welcome!
рдЕрдзреНрдпрд╛рдпреЛрдВ
1. It's party time, y'all! (00:00:00)
2. Welcoming Justin to the show (00:00:40)
3. What is it? (00:02:36)
4. The evolution of the project (00:04:36)
5. How do updates flow in to the DOM? (00:10:02)
6. How it tracks data (00:11:19)
7. Managing references (00:14:38)
8. dangerouslySetInnertHTML (00:17:13)
9. Lit is simple (af) (00:21:25)
10. Absolutely necessary (00:23:54)
11. App frameworks built on Lit (00:26:41)
12. Who's using this? (00:31:33)
13. How Lit is governed (00:34:44)
14. Building for the platform first (00:38:48)
15. Web components aren't sexy (00:40:46)
16. Incorporating shadow DOM (00:43:26)
17. Good role models (00:53:35)
18. Justin's web wish (00:54:53)
19. Closing time (00:57:30)
20. Outro (00:58:46)
337 рдПрдкрд┐рд╕реЛрдбрд╕
рд╕рднреА рдПрдкрд┐рд╕реЛрдб
×рдкреНрд▓реЗрдпрд░ рдПрдлрдПрдо рдореЗрдВ рдЖрдкрдХрд╛ рд╕реНрд╡рд╛рдЧрдд рд╣реИ!
рдкреНрд▓реЗрдпрд░ рдПрдлрдПрдо рд╡реЗрдм рдХреЛ рд╕реНрдХреИрди рдХрд░ рд░рд╣рд╛ рд╣реИ рдЙрдЪреНрдЪ рдЧреБрдгрд╡рддреНрддрд╛ рд╡рд╛рд▓реЗ рдкреЙрдбрдХрд╛рд╕реНрдЯ рдЖрдк рдХреЗ рдЖрдирдВрдж рд▓реЗрдВрдиреЗ рдХреЗ рд▓рд┐рдП рдЕрднреАред рдпрд╣ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рдкреЙрдбрдХрд╛рд╕реНрдЯ рдПрдкреНрдк рд╣реИ рдФрд░ рдпрд╣ Android, iPhone рдФрд░ рд╡реЗрдм рдкрд░ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЙрдкрдХрд░рдгреЛрдВ рдореЗрдВ рд╕рджрд╕реНрдпрддрд╛ рдХреЛ рд╕рд┐рдВрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╛рдЗрдирдЕрдк рдХрд░реЗрдВред