Syntax - Tasty Web Development Treats

Latest Episodes:

Supper Club × Developer Experience with Shawn Wang Jul 01, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Shawn Wang about his thoughts on developer experience, why DX is important, and the importance of learning in public.

Hasura - Sponsor

With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

00:32 Welcome
01:56 Guest introduction
swyx.io
Why Temporal?
06:09 What is Developer Experience?
Sarah Drasner
08:35 Is VS Code considered DX?
09:28 Why is internal DX important?
Vercel
NextJS
11:44 Is DX helpful to small organizations as well?
15:27 Parsimony
Parsimony
16:43 Is productivity the main focus?
21:09 Sponsor: Hasura
22:48 What are your thoughts on React?
27:31 Designing for API success
30:44 Sponsor: LogRocket
32:07 What is external developer experience?
36:05 Learning in public
40:46 Supper Club questions
dx.tips
Retreon VS Code Theme
Agnoster ZSH Theme
freeCodeCamp
Frontend Masters
QConf
Learn in Public

××× SIIIIICK ××× PIIIICKS ×××

Scott: The Stormlight Archive

Shameless Plugs

Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials

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

Tips for Communicating Jun 29, 2022

Show notes

In this episode of Syntax, Wes and Scott talk about their tips for better communication in email, Zoom calls, code reviews, or asking for help.

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.

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.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

Show Notes

00:10 Welcome
01:39 Furnace wiring fun
Ecobee
Tweet asking for communication tips
05:37 Email communication
SavvyCal
Calendly
15:07 Recognizing a big ask
Simeon Griggs - How to ask for things
24:01 Sponsor: Sentry
25:52 Code review communication
30:39 Sponsor: Sanity
32:22 Sharing information with a video
35:42 In person or one on ones
39:36 Video calls
Storyboard.fm
40:54 Realize it’s ok to stop talking
42:27 Sponsor: Auth0
44:13 Tips from Twitter
53:08 ××× SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Drachinifel
Wes: Lepy LP-2020A Hi-Fi Stereo Audio

Shameless Plugs

Scott: LevelUp Tutorials on YouTube
Wes: Wes Bos Tutorials

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

Browser CSS Page Transitions API aka Shared Element Transitions Jun 27, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

LogRocket - Sponsor

Show Notes

WICG Shared Element Transitions
00:21 Welcome
01:33 Sponsor: Prismic
02:43 Sponsor: LogRocket
04:18 Browser animations on the web vs native apps
06:15 What is the targeted use case for it?
06:56 Shared Element to Root Transitions
11:14 Entry and Exit
17:33 How to enable this in Chrome
Example Code
Shared Element Transition history
Sarah Drasner’s demo

async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // Set up animations using WA-API on the next frame. requestAnimationFrame(() => { document.documentElement.animate(keyframes, { ...animationOptions, pseudoElement: "::page-transition-container(message)", }); }); // Note that when this callback finishes, the animations will start with the tagged elements. }); } 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

Supper Club × Authoring Browser Extensions with Tim Leland Jun 24, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Tim Leland - developer of browser extensions like WeatherExtension and Link Shortener Extension.

Postlight Podcast - Sponsor

Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.

If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.

Listen to new episodes every Tuesday, wherever you get your podcasts.

WP Mail SMTP - Sponsor

Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time.

WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more!

Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.

Show Notes

00:33 Welcome
02:21 Guest introduction
@tim_leland
TimLeland.com
WeatherExtension
Link Shortener Extension
03:40 Why develop browser extensions?
07:58 How did you market your extensions?
09:43 Where is a Chrome extension running?
Caddy
14:29 What’s your URL shortener extension?
18:50 OneLink service
20:30 SSL Domains
21:35 Sponsor: The Postlight Podcast
23:00 Maliciousness with URL shorteners
28:26 How do you come up with ideas?
30:03 Running Chrome extensions as Firefox extensions
34:03 Does blogging still work?
36:38 Sponsor: Sendlayer
37:53 Supper club questions
Tim Leland /uses/
45:12 ××× SIIIIICK ××× PIIIICKS ×××
Tchibo Coffee machine

Shameless Plugs

Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials

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

Home Automation - A Look Ahead Jun 22, 2022

Show notes

In this Tasty Treat, Scott and Wes talk about the current state of home automation, and the kinds of software and hardware they’re using in their homes to automate their lives.

Sentry - Sponsor

Auth0 - Sponsor

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

00:11 Welcome
Syntax Ep181 Automating Stuff
02:18 Protocols
07:35 Software
Homebridge
Hoobs
Home Assistant
11:28 Using Homebridge
16:51 Home Assistant vs Homebridge
24:35 Home Assistant automations
27:26 Wyze cams
33:13 Sponsor: Sentry
34:31 Hardware
Philips Hue
Leviton
Synology
Node-RED
Docker Wyze Bridge
U-Tec
38:00 Bulbs
40:24 Buttons
Lutron Aurora Smart Bulb Dimmer Switch
Flic Button
42:53 IR Blasters
45:57 Sensors
47:56 Motion sensors
52:05 Sponsor: Auth0
53:28 Switched switches
57:36 Sprinklers
58:54 NFC
/r/Homeassistant
Shelly
01:04:03 Sponsor: Freshbooks
01:05:01 ××× SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Severence on Apple TV+
Wes: INKZALL

Shameless Plugs

Scott: LevelUp Tutorials
Wes: Wes Bos Beginner JavaScript

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

New Viewport Units Jun 20, 2022

Show notes

In this episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them?

LogRocket - Sponsor

Sanity.io - Sponsor

Show Notes

00:25 Welcome
01:14 Sponsor: LogRocket
02:24 Sponsor: Sanity
04:19 What are viewport units?
The Large and small and dynamic viewports
05:22 What are the new viewport units?
Large small and dyanmic viewports
07:57 What’s small and large?
11:52 How do viewport units help developers?
12:39 What about the keyboard on mobile?
Keycode.info
16:37 When can we start using new viewport units?

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

Supper Club × Edge Functions and Deno with Eduardo Bouças of Netlify Jun 17, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify.

Hasura - Sponsor

Postlight Podcast - Sponsor

If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.

Listen to new episodes every Tuesday, wherever you get your podcasts.

WP Mail SMTP - Sponsor

Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.

Show Notes

00:36 Welcome
02:31 Who is Eduardo?
EduardoBoucas.com
@eduardoboucas
04:29 What is a serverless function?
06:42 What is the edge and an edge function?
Edge Functions Explained
Deno
08:41 Sponsor: Hasura
09:18 The internet is global, and server locations matter
17:09 Chaining multiple edge functions
20:18 Sponsor: WP Mail SMTP
21:18 Why use Deno?
25:06 What are the limitations of using Deno?
28:12 Why not run NodeJS servers on the edge?
30:02 Do you see a future where people are writing packages that work anywhere?
32:00 Sponsor: Postlight Podcast
32:53 What about databases and serverless functions?
Planetscale
38:14 What language does Netlify use to write apps in?
Netlify Edge Handlers
44:08 Supper Club questions
Warp
S Town Podcast

Shameless Plugs

Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials

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

Potluck - Headless WordPress, Databases, Regex Jun 15, 2022

Show notes

In this episode of Syntax, Wes and Scott answer your questions about headless WordPress, Regex, their health and fitness, CSS custom properties in media queries, and more.

Sentry - Sponsor

Sanity - Sponsor

.TECH Domains - Sponsor

.TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

Show Notes

00:10 Welcome
03:30 If I host a NextJS app on Digital Ocean, should I use a Digital Ocean database?
09:14 Will either of you ever do a regex course?
Regex101
13:58 Is it possible to use the WordPress users database as the same database that the app uses?
WPGraphQL
18:46 Sponsor: Sentry
19:43 How is health and fitness going for the both of you?
26:08 Does Wes know who Gendo Ikari is?
27:36 Dart popularity follow up
29:40 Is it vital that I should learn another programming language?
33:42 Sponsor: Sanity
34:54 If I’m trying to get my first job in web development, do I need to be familiar with design software?
Figma
40:01 Thank you for the confidence to apply for a web dev job
Syntax 463 with Tom Preston-Werner
41:55 What advice will you give in terms of setting up core important things around network, state management, folder structure?
45:37 .TECH Domain Names
46:22 I just had an interview with a “major tech company” and your article on using string templates was really helpful.
Template Strings
48:43 If 80% of the time ew need to use preventDefault on form submission, why don’t the simply change the HTML spec?
50:01 What’s the rationale for not supporting CSS custom properties in media queries when using max/min width?
CSS Env
MDN CSS Env
55:37 ××× SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: * You Must Remember This Podcast
Wes: Tools

Shameless Plugs

Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials

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

I can has() new CSS Selector?! Jun 13, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.

MagicBell - Sponsor

MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.

LogRocket - Sponsor

Show Notes

00:25 Welcome
01:19 Sponsor: MagicBell
02:31 Sponsor: LogRocket
03:40 Don’t say stupid
05:03 :Has
MDN :Has

// Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find

// would not find

06:13 Jargon check
11:01 Some examples
13:25 Nest navigations
13:51 Can I use it?
15:52 Is and Where
MDN :where

In the past we would write

header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; }

:where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer

:where(header, main, footer) p:hover {}

Also super handy in avoiding css blocks being ignored for unsupported features.

// Doesn't work div:has(p), div:some_new_selector(p) // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p))

When to use :Where

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

Supper Club × Is No Code going to take our jobs? with Connor Finlayson Jun 10, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Connor Finlayson about his experience building and teaching no code projects.

Postlight Podcast - Sponsor

If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.

Listen to new episodes every Tuesday, wherever you get your podcasts.

SeedProd - Sponsor

Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster.

You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code.

Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.

Strapi - Sponsor

Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube.

Show Notes