Justin Fagnani's guest appearances

Justin Fagnani

ShopTalk

Modern Web

Syntax - Tasty Web Development Treats

Jason Miller

Adam Wathan

Sara Vieira

Fred Schott

Aimee Knight

Rachel Andrew

Guillermo Rauch

Jessica Ivins

Mina Markham

Jeffrey Zeldman

Wes Bos

Tim Brown

Brent Vatne

Brian Douglas

Kent C Dodds

OwlTail

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 

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? <a></a>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 <a href="https://sentry.io" rel="nofollow" target="_blank">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a></a>Show Notes <ul> <li> <a href="#t=00:49:11" rel="nofollow" target="_blank">00:49:11</a> Guest introduction </li> <li> <a href="#t=01:03:00" rel="nofollow" target="_blank">01:03:00</a> Sponsor: Sentry </li> <li> <a href="#t=02:02:11" rel="nofollow" target="_blank">02:02:11</a> Why do people use React when we have web components and lit? </li> <li> <a href="#t=03:57:14" rel="nofollow" target="_blank">03:57:14</a> Who is Justin Fagnani? </li> <li> <a href="https://justinfagnani.com/" rel="nofollow" target="_blank">Justin Fagnani</a> </li> <li> <a href="https://twitter.com/justinfagnani" rel="nofollow" target="_blank">Justin Fagnani (@justinfagnani)</a> </li> <li> <a href="https://github.com/justinfagnani" rel="nofollow" target="_blank">Justin Fagnani · GitHub</a> </li> <li> <a href="https://fosstodon.org/@justinfagnani" rel="nofollow" target="_blank">Justin Fagnani - Fosstodon</a> </li> <li> <a href="https://twitter.com/buildWithLit" rel="nofollow" target="_blank">Lit (@buildWithLit)</a> </li> <li> <a href="https://lit.dev/" rel="nofollow" target="_blank">Lit</a> </li> <li> <a href="https://en.wikipedia.org/wiki/Google_App_Maker" rel="nofollow" target="_blank">Google App Maker</a> </li> <li> <a href="#t=04:55:02" rel="nofollow" target="_blank">04:55:02</a> What are web components? </li> <li> <a href="https://github.com/extensibleweb/manifesto" rel="nofollow" target="_blank">The Extensible Web Manifesto</a> </li> <li> <a href="#t=05:59:08" rel="nofollow" target="_blank">05:59:08</a> What is the shadow dom? </li> <li> <a href="#t=08:56:02" rel="nofollow" target="_blank">08:56:02</a> Was there an intention for a layer on top of web components? </li> <li> <a href="#t=13:22:09" rel="nofollow" target="_blank">13:22:09</a> What is Lit? </li> <li> <a href="#t=16:19:23" rel="nofollow" target="_blank">16:19:23</a> What are the benefits of using a library for web components? </li> <li> <a href="https://custom-elements-everywhere.com/" rel="nofollow" target="_blank">Custom Elements Everywhere</a> </li> <li> <a href="#t=21:20:14" rel="nofollow" target="_blank">21:20:14</a> Why would write in React and not in web components? </li> <li> <a href="#t=24:24:18" rel="nofollow" target="_blank">24:24:18</a> How does CSS work with web components and Lit? </li> <li> <a href="#t=28:00:14" rel="nofollow" target="_blank">28:00:14</a> Using constructable stylesheets </li> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" rel="nofollow" target="_blank">::part</a> </li> <li> <a href="https://web.dev/constructable-stylesheets/" rel="nofollow" target="_blank">Constructable stylesheets/</a> </li> <li> <a href="#t=29:58:18" rel="nofollow" target="_blank">29:58:18</a> Does Lit do anything with CSS? </li> <li> <a href="#t=32:01:01" rel="nofollow" target="_blank">32:01:01</a> Does Lit do routing? </li> <li> <a href="https://www.npmjs.com/package/@adobe/lit-mobx" rel="nofollow" target="_blank">Lit Mobx</a> </li> <li> <a href="#t=34:06:02" rel="nofollow" target="_blank">34:06:02</a> How does Lit work with state? </li> <li> <a href="#t=34:52:15" rel="nofollow" target="_blank">34:52:15</a> What about signals? </li> <li> <a href="#t=38:49:00" rel="nofollow" target="_blank">38:49:00</a> Is Server Side Rendering possible with web components? </li> <li> <a href="#t=41:03:07" rel="nofollow" target="_blank">41:03:07</a> What websites are using Lit and/or web components? </li> <li> <a href="#t=44:26:08" rel="nofollow" target="_blank">44:26:08</a> What’s the difference between Lit and Polymer? </li> <li> <a href="#t=45:44:17" rel="nofollow" target="_blank">45:44:17</a> What is the future of web components? </li> <li> <a href="#t=48:09:14" rel="nofollow" target="_blank">48:09:14</a> Supper club questions </li> <li> <a href="https://github.com/w3c/csswg-drafts" rel="nofollow" target="_blank">GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts</a> </li> <li> <a href="#t=56:36:20" rel="nofollow" target="_blank">56:36:20</a> SIIIIICK ××× PIIIICKS ××× </li> <li> <a href="#t=55:27" rel="nofollow" target="_blank">55:27</a> SIIIIICK ××× PIIIICKS ××× </li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> <a href="https://www.hbo.com/the-last-of-us" rel="nofollow" target="_blank">The Last of Us | Official Website for the HBO Series | HBO.com</a></li> </ul> <a></a>Shameless Plugs <ul> <li> <a href="https://lit.dev/" rel="nofollow" target="_blank">Lit</a></li> <li> <a href="https://lit.dev/discord/" rel="nofollow" target="_blank">Lit Discord</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

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

In this episode, Rob Ocel, Matthew Pagan, and Luis Aviles sit down with Justin Fagnani, staff software engineer at Google and Lit core team lead, to discuss web components and the recent announcement of Lit 2.0. They discuss the new major features of Lit, such as server-side rendering support and reactive controllers, new documentation, the playground site including the TypeScript support, the community around web components, the future of Polymer and LitElement, and how to build applications from Lit and work around the challenges of Shadow DOM.   Guests: Justin Fagnani (@justinfagnani) - Staff Software Engineer, Google &amp; Lit core team lead   Hosts: Rob Ocel (@robocell) - Architect, This Dot Luis Aviles (@luixaviles) - Software Engineer, This Dot Matthew Pagan (@Mastapegs) - Software Engineer, This Dot   This episode is sponsored by Dexecure &amp; This Dot Labs. 

In this episode, Rob Ocel, Matthew Pagan, and Luis Aviles sit down with Justin Fagnani, staff software engineer at Google and Lit core team lead, to discuss web components and the recent announcement of Lit 2.0. They discuss the new major features of Lit, such as server-side rendering support and reactive controllers, new documentation, the playground site including the TypeScript support, the community around web components, the future of Polymer and LitElement, and how to build applications from Lit and work around the challenges of Shadow DOM. Guests: Justin Fagnani (@justinfagnani) - Staff Software Engineer, Google &amp; Lit core team lead Hosts: Rob Ocel (@robocell) - Architect, This Dot Luis Aviles (@luixaviles) - Software Engineer, This Dot Matthew Pagan (@Mastapegs) - Software Engineer, This Dot This episode is sponsored by <a href="https://dexecure.com/modernwebpodcast/" rel="nofollow" target="_blank">Dexecure</a> &amp; <a href="https://labs.thisdot.co/" rel="nofollow" target="_blank">This Dot Labs</a>.

S08E010 Modern Web Podcast - Web Components Are Lit with Justin Fagnani

Show Description**************** Justin Fagnani from the Polymer Project is our guest and we're taking a deep dive into lit-html and Polymer elements, how those projects are different, and we'll discuss how Web Components is wrapped up in all of this. Listen on Website → Guests****** Justin Fagnani Guest's Main URL • Guest's Twitter Works on Polymer and lit-html at Google  Links*****  lit-html  Sponsors******** Netlify Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it. I heard one developer say "It's like someone actually designed hosting and deployment."

<h2>Show Description ****************</h2> Justin Fagnani from the Polymer Project is our guest and we're taking a deep dive into lit-html and Polymer elements, how those projects are different, and we'll discuss how Web Components is wrapped up in all of this. <a href="https://shoptalkshow.com/348/" rel="nofollow" target="_blank">Listen on Website →</a> <h2>Guests ******</h2> <h3>Justin Fagnani</h3> <a href="" rel="nofollow" target="_blank">Guest's Main URL</a> • <a href="https://twitter.com/justinfagnani" rel="nofollow" target="_blank">Guest's Twitter</a> Works on Polymer and lit-html at Google <h2>Links *****</h2> <ul> <li><a href="https://github.com/polymer/lit-html" rel="nofollow" target="_blank">lit-html</a></li> </ul> <h2>Sponsors ********</h2> <h3><a href="https://www.netlify.com/?utm_source=shoptalk&amp;utm_medium=podcast&amp;utm_campaign=css-0219" rel="nofollow" target="_blank">Netlify</a></h3> Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it. I heard one developer say "It's like someone actually designed hosting and deployment."

348: Getting lit-html with Justin Fagnani