Syntax - Tasty Web Development Treats

Latest Episodes:

Supper Club × The Primeagan - Vim, Streaming, Rust, all Around Interesting Guy Sep 09, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with The Primeagan about his streaming set up, how he decides what to stream, why he makes the kind of content he does, and why he loves Vim.

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.

Storyblok - Sponsor

Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.

Show Notes

00:35 Welcome
01:48 Guest introduction
ThePrimeagen on YouTube
ThePrimeagen on Twitch
@ThePrimeagen on Twitter
Why I Make Content
03:53 Dropping in on skateboarding
Tony Hawk’s Pro Skater
05:43 What do you do?
07:17 How do you plan your live streams?
10:05 Sponsor: Hasura
11:27 Do you do interactive content via OBS on stream?
OBS
16:22 What languages do you use on stream?
Bun
Zig
22:03 What do you try to build on stream?
24:53 Sponsor: StoryBlok
25:45 Why do you use Vim?
38:42 Do you ever have to do pair programming with Vim?
40:43 What kind of hardware are you playing with?
Arduino
42:52 Supper club questions
Lemur
Pop
Kinesis Advantage 2
56:20 SIIIIICK ××× PIIIICKS ×××

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 - How to Pick a Tech Stack × useEffect × setTimeout × Staying Focused Sep 07, 2022

Show notes

In this episode of Syntax, Wes and Scott answer your questions about picking the right tech stack, whether useEffect is still useful, benefit to use uses setTimeout, and more!

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

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.

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. a0.to/syntax

Show Notes

00:23 Welcome
02:39 What’s the best way of comparing the efficiency of object literals created from a factory function vs objects created by new’ing a class.
Perf.link
06:54 How can I always see the full signature in VS Code?
10:40 What’s your process for picking a stack when starting a project?
14:41 Sponsor: Linode
15:23 Is snapshot testing really worth it?
TS QuickFixes
20:54 What are your thoughts on ISR Incremental Static Regeneration?
25:20 Is useEffect public enemy #1?
Goodbye, useEffect: David Khourshid
29:02 Sponsor: LogRocket
30:17 Is there any benefit to use uses setTimeout instead of setInterval?
MongoDB
Prisma
37:13 HTML to PDF a great solution I use is gotenberg.dev
gotenberg.dev
40:12 Although async/await might make for code that is easier to grok, I find it worse for chaining functions.
Pipeline Operator proposal
45:07 How do you guys stay focused for meaningful periods of time?
48:36 How should code formatters be configured and combined?
Prettier
ES Lint
Editor Config
No-Sweat™ Eslint and Prettier Setup
51:56 What’s your opinion on the latest Sveltekit changes with load, file based routing, and more?
Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0
Astro
Nano Store
55:53 Sponsor: Auth0
56:47 SIIIIICK ××× PIIIICKS ×××

Big Deno Changes Sep 05, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes.

Linode - Sponsor

LogRocket - Sponsor

Show Notes

00:24 Welcome
01:37 Sponsor: LogRocket
02:34 Sponsor: Linode
03:18 Standing and getting mic’d
04:20 What is Deno?
Deno Changes
07:13 What were they doing before this?
How could we support typescript without vendoring it?
21:22 Enterprise support and search

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 × Steve Ruiz Building a Drawing App Sep 02, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, and more.

Gatsby - Sponsor

Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️

Show Notes

00:34 Welcome
03:23 Who is Steve Ruiz?
Steve Ruiz
04:45 What is tldraw and what was your inspiration for it?
tldraw
Globs
Excalidraw
tldraw on GitHub
11:04 Why didn’t you use canvas?
16:15 How do you make an algorithm?
Perfect Free Hand
19:33 Do you use pointer events?
23:44 What are you using to manage state?
29:42 How do you handle zooming?
Creating Zoom UI
32:28 Where do you store the data for tldraw?
Project Fugu
37:08 Why use indexdb?
38:05 Sponsor: Gatsby
39:49 How difficult was it to make it work on mobile?
React Use Gesture
41:59 Does it work offline?
43:25 Supper Club Questions
Monokai Pro
Framer Classic
Hacker News
One Lone Coder on YouTube
Displaced Gamer
Coding Secrets
52:28 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Last Call BBS

Shameless Plugs

Steve: tldraw.dev

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

Syntax Highlight Aug 31, 2022

Show notes

In this episode of Syntax, Wes and Scott review the websites you’ve submitted including Ruben Oliveira, Adam Collier, Consolecmnd, Brad Preston, 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.

LogRocket - Sponsor

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.

Show Notes

00:16 Welcome
02:05 Setting up Wes’ new office
06:18 rubenoliveira.tech
Ruben Oliveira
17:22 adamcollier.co.uk
Adam Collier
22:56 Sponsor: Sanity
24:13 Consolecmnd.com
ConsoleCMND
32:37 sz-development.tech
SZ-Development
44:07 Sponsor: LogRocket
44:57 Richardcarrigan.com
Richard Carrigan
49:52 Bradpreston.dev
Brad Preston
54:18 Sponsor: MagicBell
55:17 Mikemneves.com
Mike Mneves
01:05 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Packing Cubes
Wes: Volt 1

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

Margins Aug 29, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about margins. There are a lot of techniques for dealing with margins - padding instead of margin, only margin or padding bottom, Flexbox for everything, Grid for everything, or a spacing Div.

Sentry - Sponsor

Find out about Sentry’s Dex Conference.

From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness.

This is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. Whether you join us in-person in San Francisco or virtually from your home, you’ll have the opportunity to share your thoughts, engage with other developers, and walk away with your own personal madness sorting algorithm.

Auth0 - Sponsor

Show Notes

00:30 Welcome
01:39 Sponsor: Sentry
02:50 Sponsor: Auth0
04:25 Introduction to margins
08:28 Margin vs padding
11:46 New techniques
14:32 The spacer div
17:36 Why do it as a component vs a class?

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 × Self Hosted Backend-as-a-service with Brandon Roberts Aug 26, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Brandon Roberts about Appwrite, how Appwrite works, who it’s for, as well as his thoughts on Angular, Remix, and more.

Hasura - Sponsor

Lightstep Incident Response - Sponsor

Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.

Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.

Show Notes

00:36 Welcome
01:10 Who is Brandon Roberts?
@BrandonTRoberts
02:00 What is Appwrite?
Appwrite
Getting started with Appwrite
03:17 What database layer does Appwrite use?
08:17 Is this working client side or server side?
09:54 Great docs and examples
12:55 How is deployment handled?
Appwrite on Digital Ocean
15:30 Sponsor: Lightstep Incident Response
16:36 Appwrite’s focus on developer experience
Appwrite to do with Svelte
19:56 Realtime database options with Appwrite
22:40 Cloud functions in Appwrite
26:01 How does Appwrite scale?
Docker Swarm
27:28 Who is Appwrite for?
Flutter
30:03 What is Ionic?
Ionic
32:12 What do you enjoy about working in Angular?
Angular
35:08 Sponsor: Hasura
36:30 Supper club questions
Night owl

Shameless Plugs

Guest: React Router

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

Fundamentals - Web Workers and Service Workers Aug 24, 2022

Show notes

In this episode of Syntax, Wes and Scott talk through the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, and more.

LogRocket - Sponsor

Sanity - Sponsor

Freshbooks - Sponsor

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

Show Notes

00:11 Welcome
04:34 What are threads?
06:12 Concurrent vs parallel
09:22 Green screen web cam example
13:02 Examples of what you could use web workers for
Party Town
Deno
19:52 Sponsor: LogRocket
20:42 Post Message API and Web Workers
25:57 What about WASM?
27:28 Offline sync
28:14 What are service workers?
31:20 How do you caching sites for offline use?
32:39 Web worker vs service worker
34:12 Sponsor: Sanity
35:40 What is the lifecycle of a service worker
38:18 Possible issues with Service Workers
42:46 Debugging service workers
Svelte Kit Service workers
Workbox
43:04 Testing and local development
Service Workers notes from Wes’ Workshop
46:45 Sponsor: Freshbooks
49:59 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads
Wes: Samsung Frame TV

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

Episode 500! Aug 22, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about the past 499 episodes of Syntax, what have been the most downloaded episodes, their favorite episodes, and the sickest of sick pics.

Sentry - Sponsor

Attend Dex

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.

Payments Hub - Sponsor

There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!

Show Notes

00:28 Welcome
01:44 Sponsor: Sentry
03:28 Sponsor: Payments Hub
04:36 20 million!
05:57 Our current recording process
Libsyn
09:09 Top 10 episodes
162 - The Fundementals JS
92 - React Hooks
158 - The Fundamentals HTML + CSS
66 - The React Episode
44 - How to Learn New Things Quickly
198 - How to Get Better at Problem Solving
20 JavaScript Array and Object Methods to make you a better developer
188 - The Fundamentals - Server Side
174 - How to Build an API
120 - Gatsby vs Next
18:00 Our favorite episodes
193 - Spooky Stories
400 - Horror Stories 2021
250 - Scott Teaches Wes Svelte and Sapper
60 - Undocumented Web
23:00 Questions from Twitter
Twitter questions

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 × Rich Harris, Author of Svelte Aug 19, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with the author of Svelte, Rich Harris, about what influenced the creation of Svelte, his thoughts on web components, the virtual DOM, why companies are switching to Svelte, and what’s next for Svelte.

Gatsby - Sponsor

Lightstep Incident Response - Sponsor

Show Notes