Supper Club × Web Components and Lit with Justin Fagnani of Google

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 31 March 2023

⏱️ 58 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this supper club episode of Syntax, Wes and Scott talk with Justin Fagnani about working with web components, using Lit, how routing and state are handled, thoughts on signals, and what is the future of web components? Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:49:11 Guest introduction 01:03:00 Sponsor: Sentry 02:02:11 Why do people use React when we have web components and lit? 03:57:14 Who is Justin Fagnani? Justin Fagnani Justin Fagnani (@justinfagnani) Justin Fagnani · GitHub Justin Fagnani - Fosstodon Lit (@buildWithLit) Lit Google App Maker 04:55:02 What are web components? The Extensible Web Manifesto 05:59:08 What is the shadow dom? 08:56:02 Was there an intention for a layer on top of web components? 13:22:09 What is Lit? 16:19:23 What are the benefits of using a library for web components? Custom Elements Everywhere 21:20:14 Why would write in React and not in web components? 24:24:18 How does CSS work with web components and Lit? 28:00:14 Using constructable stylesheets ::part Constructable stylesheets/ 29:58:18 Does Lit do anything with CSS? 32:01:01 Does Lit do routing? Lit Mobx 34:06:02 How does Lit work with state? 34:52:15 What about signals? 38:49:00 Is Server Side Rendering possible with web components? 41:03:07 What websites are using Lit and/or web components? 44:26:08 What’s the difference between Lit and Polymer? 45:44:17 What is the future of web components? 48:09:14 Supper club questions GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts 56:36:20 SIIIIICK ××× PIIIICKS ××× 55:27 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Last of Us | Official Website for the HBO Series | HBO.com Shameless Plugs Lit Lit Discord Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	I sure hope you're hungry who I'm starving wash those hands pull up a chair and secure that feedback
0:08.0	Because it's time to listen to Scott Tolinsky and Wes Boss attempt to use human language to converse with and pick the brains of other
0:16.0	Developers, I thought there was gonna be food so buckle up and grab that a
0:21.1	Handle because this ride is going to get wild
0:25.7	This is the syntax supper club
0:31.0	Oh
0:37.0	Welcome to syntax the podcast with tastiest web development trees out there today
0:42.0	We've got a long-awaited show. We've been trying and thinking about doing a show on web components and lit for a long time
0:50.0	We've talked about it here and there and today we have Justin Fenyani on hopefully I said that okay
0:57.3	You got that exactly right. Awesome. Well, thanks so much for coming on really appreciate it. Yeah, thanks for having me
1:02.1	I've been wanting to come on here for a while too, so this is great
1:05.2	Let's talk about one of our sponsors. That is sentry. They have a brand new integration with actually a company that just joined them
1:11.6	It's called CodeCov. It's a code coverage tool and what that means if you've never heard of code coverage before
1:18.4	It will look at your tests and I'll look at your code base and say all right
1:21.8	Well your tests are covering this many lines of your code base
1:25.4	So there's a possibility that there's code in your code base. That is not totally covered
1:31.4	And that's super cool. It's easy setup if you're ready a codeCov and a sentry user
1:36.7	On GitHub the integration is enabled automatically for you
1:40.1	You can see your code coverage directly in your stack trace
1:43.2	So you can see untested partially or fully covered code that may be causing errors
1:48.0	And you can fix your test to avoid any similar errors that pop up
1:52.1	It's free to get started
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.