developer productivity

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, Scott talks with Alex Johansson about his work on tRPC, how it compares to other tools like GraphQL, and what’s next for tRPC?

Polypane - Sponsor

If you want to build a great website or web app, there’s a million things you need to take care of: responsive design, accessibility, SEO, Meta tags and page structure, to name just a few. Polypane is the browser for developers with tools that help with literally every part of modern web development, helping you save hours (and frustration!) with every project. It shows your site in multiple fully-synced viewports at once, Gives you advice on better accessibility and gives you insight into your performance and quality. Go to polypane.app/syntax to start a 14 day free trial and use SYNTAX20 for a 20% discount at checkout.

FireHydrant - Sponsor

Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.

Kontent by Kentico - Sponsor

Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.

Show Notes

• 00:37 Welcome
• 01:56 Guest introduction
• @Alexdotjs on Twitter
• Alex on GitHub
• Katt.dev
• tRPC.io
• 02:47 What is tRPC?
• 06:56 How does type safety work?
• 10:38 Sponsor: Polypane
• 13:20 What is Zod?
• 17:39 How does tRPC relate to GraphQL?
• 23:47 Sponsor: FireHydrant
• 25:25 What about a data loader?
• 29:04 React or NextJS adapters
• 30:41 How does it feel when people start building off your project?
• 33:58 Sponsor: Kontent by Kentico
• 37:34 What’s next for tRPC?
• 42:42 How is error handling done?
• 48:43 Supper Club questions
• 54:42 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Kysely

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 episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

1:26 - Hooks vs Render Props

• Hooks win hands down
• useState
• useReducer
• useRef
• useContext
• useEffect
• Custom hooks to hide and encapsulate functionality

35:06 - How we use them

• Scott

  • Index that imports all custom hooks
  • Babel alias to hooks folder
  • Import { useHook } from ‘hooks’
  • useContextState

• Wes

  • useResizeObserver
  • useForm
  • useGridRower
  • useWickedFavIcon

45:54 - Which built-in hooks do we not use?

• useImperativeHandle
• useCallback
• useDebugValue

48:22 - Are hooks harder to learn?

• Wes: Yes — but easier to maintain after the fact
• Scott: Yes — harder conceptually and initially but easier after concepts are understood

50:29 - Are classes going away?

• Wes: I say yes
• Scott: Double yes

Links

• Syntax Ep 092: React Hooks
• Making setInterval Declarative with React Hooks - Dan Abramov
• babel-plugin-module-resolver
• awesome-uses
• uses.tech

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Ars Technica War Stories
• Wes: Mpow CH1 Kids Headphones

Shameless Plugs

• Scott: All Courses - Sign up for the year and save 25%!
• Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

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