Scott and Wes talk with Søren Bramer Schmidt, Founder and CEO of Prisma, about database best practices, including the latest developments in serverless, local-first, and typed SQL solutions. Show Notes 00:00 Welcome to Syntax! 02:55 Søren’s thoughts on GraphQL 03:53 Brought to you by Sentry.io 06:57 Common database mistakes 08:52 Prisma’s stability and user experience 10:42 Typed SQL and advanced querying Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM Prisma Optimize 20:47 Serverless challenges and solutions Prisma Accelerate 27:11 Cloudflare’s potential to dethrone AWS 29:13 Prisma and local-first development Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024 35:30 Making local-first development mainstream 40:10 Challenges with async 42:43 Søren’s thoughts on Drizzle 43:41 Søren’s favorite database 47:21 The read your writes problem 48:58 Prisma hosted Postgres 51:44 Sick Picks & Shameless Plugs Sick Picks Søren: Cursor Shameless Plugs Søren: 1: Prisma Optimize 2: Prisma Postgres (coming soon) Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Get your productivity game on point! Scott and Wes serve up the best tools for web developers, covering everything from password managers and to-do apps to mind-mapping tools and little scripts that make life easier. Plus, find out what snippet managers they swear by and how they keep their email under control. Show Notes 00:00 Welcome to Syntax! 03:01 Brought to you by Sentry.io. 03:44 Syntax meetup San Francisco. 04:26 Breakdancing update. Kid Cruz Instagram. 05:18 Password management. 1Password. 08:30 Apple stomping on apps. 09:50 To-do applications. Things. Getting Things Done. Tweek. 18:18 To-do in code. Todo Tree. Better Comments. 20:21 Snippets. 25:55 Mind-mapping. MindNode. FigJam. 29:01 Note-taking. Obsidian. Stashpad. ObservableHQ. Jupyter. 36:34 Little scripts. Script Kit. 39:50 Email. Superhuman. 48:11 Some honorable mentions. Habitpath.io. Focus. 52:10 Sick Picks + Shameless Plugs. Sick Picks Scott: The Legend of SwordQuest. Wes: The Economics of Everyday Things. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

CJ joins Scott and Wes to dive into why he’s all-in on Hono, a fast and lightweight web framework for every JavaScript runtime. From familiar route creation to type-safe middleware, find out how Hono keeps things simple, powerful, and ready to use inside Next.js. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 01:11 What is Hono? Watch CJ’s Video Here 03:21 Syntax Meetup San Francisco. 04:02 Why I like Hono, and why you should try it. 04:08 Familiar route creation. Connect: an extensible HTTP server framework for node. 05:45 Supports every JS Runtime. 07:00 How a service worker works. 08:48 Helpers. 09:16 Middleware. 10:40 Sentry middleware. 10:55 JSX support. 13:21 Organizing route handlers while keeping Types. 14:24 Type safety. hono-open-api-starter. zod-openapi. 15:46 Defining base type. Pinojs 17:36 Validation. 18:52 Hono RPC client. 22:09 Hono inside of Next.js. 23:30 Testing. 25:22 The community. 27:34 Type support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Do you really need a framework? Scott and Wes bring on CJ to break down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity. They dive into everything from rendering strategies to auth solutions, deployment options, and how to choose the right tool for the job. Show Notes 00:00 Welcome to Syntax! 01:32 Brought to you by Sentry.io. 03:17 What is a framework? Syntax Meetup San Francisco. 08:21 Examples of frameworks for Vue, Svelte and Angular. 12:39 What questions do you need to answer? 12:44 What or where do you need to ship? 14:12 How do you render it? 18:22 Where are you deploying it? 24:03 How do you store data? 24:09 Existing API. 26:03 Integrated server. 26:22 Database. Supabase. 26:59 Does it have RPC or server actions? 34:27 Do you need authentication? 38:45 Auth packages. LuciaJS. Lucia announcement. Lucia preview. NPM Arctic Oauth. Auth utilities. Better-Auth. Scott’s Drop-In Auth. 42:10 Does it include email? 42:52 What does the TypeScript story look like? 43:32 How does it handle images? 44:35 How do we work with CSS? 46:02 How long has it been around? 47:37 How mature is the ecosystem? 48:35 Is there community support? 50:21 Portability. 51:18 Hiring. 52:17 Sick Pick + Shameless Plugs. Sick Picks CJ: Infinite Health. Scott: USB A to C adapters. Wes: Citric Acid. Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up ways developers can use AI tools like Claude, GitHub Copilot, and more to boost productivity. From error tracing to refactoring code and automating mundane tasks, they break down how AI can handle the heavy lifting so you can focus on the fun stuff! Show Notes 00:00 Welcome to Syntax! 01:23 Brought to you by Sentry.io. 01:43 Using AI tools effectively. 05:29 Stack trace reading and error finding. 08:37 San Francisco Syntax Meetup! 09:19 Research and validation. 12:19 Completing mundane tasks. 14:10 Refactoring. 18:56 Simple typescript. 20:29 Summarizing docs and source code. 23:56 Quick hits. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes talk with Tanner Linsley, creator of TanStack, about the React ecosystem, and the evolution and futue of TanStack’s suite of tools, including TanStack Router and TanStack Start. Show Notes 00:00 Welcome to Syntax! 02:59 What is TanStack Start? UnJS Nitro Vinxi 06:17 What is the Vite Environment API? 07:21 Was it always the plan to use Vite? 08:02 TanStack Router and client-side vs server-side 16:18 How TanStack Start will work 27:26 Moving from Create React App to TanStack 30:42 Brought to you by Sentry.io 31:15 Will TanStack Router ever support other frameworks? 33:54 How will TanStack Start handle forms? 36:13 TanStack Virtual 39:41 What is the future of TanStack? Convex 42:49 How Tanner writes documentation 47:55 Server functions and middleware 54:41 When will TanStack Start be in beta? 57:00 Sick Picks + Shameless Plugs Sick Picks Tanner: LG C4 Ultra Slim Fit TV Wall Mount Shameless Plugs Tanner: TanStack Blog @TKDodo Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes answer your burning questions! They cover everything from moving off create-react-app and the benefits of Next.js, to transitioning from junior to senior dev, working with QA teams, and even dive into game development with Godot. Show Notes 00:00 Welcome to Syntax! 00:31 DenverScript. 03:14 Brought to you by Sentry.io. 03:54 Question 1: Moving off create-react-app. Proposal: TC39 Import Attributes. HTML iframe srcdoc Attribute. 09:10 Question 2: Working together with QA teams. 13:46 Question 3: Benefits of React with Next.js Framework. Svelte Turnstile. Next.js Pages Router vs Next.js App Router. 17:38 Question 4: What are your real names? 19:22 Question 5: Thoughts on RTO and WFH. 27:50 Question 6: Where can I find you Sick Picks? Sick Picks. Sick Picks Scraper. 29:34 Question 7: From JR developer to SR developer. 31:41 Question 8: Godot and game development. Godot Engine. GDScript. Phind. 39:37 Question 9: Inherent advantage between Callbacks and Events. 44:44 Question 10: Transitioning to freelance with corporate experience. 49:44 Question 11: Dealing with negative feedback. 57:05 Sick Picks & Shameless Plugs. Sick Picks Scott: audiobookshelf, Plappa App. Wes: New Syntax Swag. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

From CAPTCHAs to shadow banning, Scott and Wes break down the best strategies for keeping your app safe from spam and fraud. They cover tools like email verification, rate limiting, shadow banning, and more to protect your users and data. Show Notes 00:00 Welcome to Syntax! 00:15 The problem. 02:47 Brought to you by Sentry.io. 04:23 CAPTCHA. 06:24 Data collection. 07:11 Stripe Radar score calculation. 09:12 Rate limiting. 11:34 Shadow banning. 13:53 Email verification. 15:38 Tie to accounts. 16:23 Tied to real identity. 19:36 Manual approval. 21:19 Blocking ASN. 23:17 Honey pot field. 24:28 SMS verification. 25:05 Mechanical Turk. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes talk with GitHub’s Sarah Vessels about the ins and outs of code reviews, their critical role in collaborative development, and tips for making your reviews more effective. Show Notes 00:00 Welcome to Syntax! 00:59 What is a code review? How to review code effectively: A GitHub staff engineer’s philosophy 04:18 Strategies for an effective code review processes 06:59 Should you test and fix in the same pull request? 07:57 How to ask for code reviews 12:12 Feature flags and their role in code management flipper scientist scientist - JS 20:03 Who should do code reviews? 23:34 Should you review your own code? 25:04 Brought to you by Sentry.io 25:29 Code comments vs pull requests 27:35 Dealing with egos in the code review process 30:18 What automations are essential? project-pull-mover 34:35 Underutilized tools GitHub Protips: Tips, tricks, hacks, and secrets from Sarah Vessels 36:25 Commit strategies and squash 39:30 GitHub’s branching system 41:14 Git gone wrong 42:30 What is the correct way to merge into main? 43:47 What was it like working on GitHub Sponsors? GitHub Sponsors thanks.dev 46:58 Sick Picks & Shameless Plugs Sick Picks Sarah: https://store.steampowered.com/steamdeck Shameless Plugs Sarah: https://github.com/sponsors Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes share 14 game-changing tips they wish they’d known earlier in their web dev careers. From embracing tools to learning by doing, these insights will help you level up your skills faster! Show Notes 00:00 Welcome to Syntax! 02:09 Brought to you by Sentry.io. 03:45 13 Web Development Tips I Wish I Knew Sooner. 03:49 Number 1 - No one is all-knowing. 05:39 Number 2 - People with extremely strong opinions. 11:13 Number 3 - Using tools to help you isn’t a bad thing. 12:34 Number 4 - Approach new technology with a mixed dose of skepticism and open-mindedness. 16:05 Number 5 - Things make more sense the more you actually use them. 18:40 Number 6 - Willingness to change your mind is a strong skill. 20:06 Number 7 - Doing is better than reading or watching. 22:29 Number 8 - Asking questions is good. 26:45 Number 9 - Everyone doesn’t learn the same. 30:41 Number 10 - You don’t need a SAAS for everything. 35:53 Number 11 - You don’t need to worry about scale. 37:49 Number 12 - Learning the fundamentals will always pay off. 40:07 Number 13 - Working in public will make you more hireable. 42:48 Number 14 - You can interview without accepting a job offer. 45:29 Sick Picks & Shameless Plugs. Sick Picks Scott: Glasses. Wes: Oxo Whisk, Danish Whisk. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up the pros and cons of modern authentication methods like magic links, 2FA, and SMS codes. Learn how each technique works, the security trade-offs, and what might be the best approach for your apps. Show Notes 00:00 Welcome to Syntax! 00:11 Brought to you by Sentry.io. 00:34 Logging in Verification. 01:09 Magic Links. 01:24 Pros of magic links. 03:50 How magic links work. 04:25 Cons to magic links. 06:21 Magic Sessions. 06:37 Using email verification. 07:12 Using code verification. 07:55 Previously trusted device verification. 08:14 Classic email and verification process. 09:54 Email Code. 10:51 Gmail verification options. 12:01 OAuth. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes talk with Topher Martini, a former Engineering Program Manager at Apple, about his extensive experience over two decades in the tech industry. Topher shares his journey at Apple, from starting as an intern in 2001 to working on groundbreaking products like iPhone, iPad, and Vision Pro. Show Notes 00:00 Welcome to Syntax! 00:40 What it was like working on the first iPhone 04:47 How Topher landed at Apple early in his career 08:40 How Apple’s culture has changed over time 11:03 What makes a great employee? 16:37 Tips for better communication 17:54 Are meetings a good means of communication? 20:05 What makes a bad employee? 22:21 What does it take to get hired at a company like Apple? 26:16 Brought to you by Sentry.io 26:55 The relationship between passion and career 29:08 Topher’s advice for growing in your career 31:50 What is a sabbatical? 33:36 Teaching tech to kids 35:49 Topher’s work on self-driving cars Aurora 39:33 AI’s impact on tech and the future 41:22 What can developers do to stand out and be relevant in a world of AI? 43:30 Topher’s thoughts on career development One Small Step Can Change Your Life: The Kaizen Way Paul Copplestone 44:47 What is a light field camera? 46:47 Spatial media and Vision Pro 48:10 The nifty stuff in Topher’s background 49:53 Something wild that happened while Topher was at Apple 51:34 Sick Picks & Shameless Plugs Sick Picks Topher: Bambu Lab P1S 3D Printer Bento 3D Shameless Plugs Topher: Topher’s YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In part 2 of covering the best apps for web developers, Scott and Wes dive into must-have tools that will level up your workflow. From screenshot utilities to development tools and video production apps, this episode is packed with recommendations to boost your productivity and creativity. Show Notes 00:00 Welcome to Syntax! 01:44 Brought to you by Sentry.io. 02:30 Utilities. 02:48 BetterTouchTool. 09:31 Hyperkey. 11:46 Amethyst. 12:51 Klack. 13:47 Bottom (Btm). 14:54 Pearcleaner 16:40 App Cleaner. 17:35 Rocket Emoji. 20:27 Clippy. 23:37 Screenshots and Screen Recordings. 24:05 Dropshare. 25:29 OBS with Source Record. 29:20 Screen Studio. 30:58 Detail.co. 31:22 Cap. 32:08 Kap. 32:46 CleanShot X 34:15 Video and Production. 34:24 DaVinci Resolve. 37:46 Affinity Pro. 39:42 PrincipleForMac. 40:39 Inkscape. 41:34 Development tools. 41:38 DBngin. 43:12 TablePlus. 45:48 MongoDB Compass. 46:14 Proxyman. 47:00 Wireshark. 47:31 Polypane. 48:30 Setapp. 49:44 SVG Grabber. 51:42 Sick Picks & Shameless Plugs. Sick Picks Scott: Untold Sign Stealer. Wes: Magentiles Marble Run. Shameless Plugs Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott walks Wes through the new Syntax Production Assistant Desktop App, designed to streamline and automate their complex publishing process. From tech stack choices like Svelte5 and Rust to AI-driven features, they dive into how this tool keeps everything consistent. Show Notes 00:00 Welcome to Syntax! 00:44 Brought to you by Sentry.io. 01:37 What was the idea? 05:42 The tech. Svelte5, Tauri, Rust, FFMPEG. 08:32 Markdown editor. ink-mde, Dillinger. 09:32 Epoch timestamps. Epoch.vercel. 10:01 Updating front-matter. 10:10 Dexie.js function. 11:25 Backing up data. 11:58 Rust functions. 12:58 Why a desktop app and not a website? 14:38 Some small AI features. 16:26 Challenges with OAuth. 20:03 Publishing challenges. 23:29 Could this work on Windows? 23:54 Debugging. 26:23 Deciphering Apple logs. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with Taylor Otwell, the creator of Laravel. Taylor shares insights on his journey from creating Laravel in his free time to building a strong community and user base. He discusses Laravel’s growth, including the major features and tools that were developed over the years. Taylor also shares his outlook on the PHP ecosystem, productivity tips, and plans for Laravel Cloud, a new deployment platform for PHP and Laravel applications. Show Notes 00:00 Welcome to Syntax! 00:29 Laracon 03:13 Laravel’s inspiration and features Intertia Livewire 07:18 Why don’t we have a “Laravel for JavaScript”? 09:02 What parts of Laravel came first? 10:07 The Laravel ecosystem Forge Vapor 12:29 Laravel Cloud 14:00 What parts of Laravel are Intertia and what parts are React? 15:57 How many people are using Laravel? 16:59 Taylor’s productivity and development philosophy 24:43 Brought to you by Sentry.io 25:19 What makes a beautiful API? 29:33 Taylor’s thoughts on typing PHP 30:41 Features Taylor would like to see in PHP 33:03 What people get wrong about modern PHP 34:22 PHP stacks and CMSs Nginx FrankenPHP Statamic 37:30 Taylor’s thoughts on WordPress 38:14 Lambo memes 43:44 Taylor’s coding setup Sublime Text Vs Code 45:36 Sick Picks + Shameless Plugs Sick Picks Taylor: Tiny Glade No Man’s Sky Shameless Plugs Taylor: Laravel Cloud Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up a discussion on AI coding assistants with a deep look at Cursor AI, exploring its unique features like multi-line auto-complete and Smart Rewrites. They also discuss why Cursor’s intuitive UI stands out and tackle the big question: is it worth the investment? Show Notes 00:00 Welcome to Syntax! 01:16 Brought to you by Sentry.io. 01:48 Handling objections around AI assistants. 02:55 Context windows and how they’re improving functionality. Syntax.fm Episode 728 with Kevin Hou of Codeium 04:08 Cursor’s UI. 04:51 This is cool, why is it not a plugin? 08:12 What makes the UI interesting. 09:13 Smart Rewrites. 11:44 It can create multiple files. 13:05 Using the chat interface. 16:32 Another chat example. 20:22 The main features of Cursor. 21:55 Multi-line auto-complete. 23:55 Using docs for additional context. 27:26 AI is here to help you, not replace you. 33:27 Is it worth it? 33:55 The pricing. 44:10 Sick Picks & Shameless Plugs. Sick Picks Scott: The Iron Historian, Scott’s Salt & Pepper Mills. Wes: Oxo Salt & Pepper Mills. Shameless Plugs Scott: Syntax.fm Zed Theme. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes unveils his Hack-Week project —a thermal printer controlled by JavaScript that prints out Sentry.io errors in real-time. Scott and Wes dive into the nitty-gritty of how it works, from the ESC/POS protocol to tackling socket issues, and whether the project was worth the effort. Show Notes 00:00 Welcome to Syntax! 00:38 Brought to you by Sentry.io. 01:10 What is Hack Week? 01:41 The project. Follow the posts on X. 02:40 Why a receipt printer? 03:55 How do these printers work? ESC/POS. 05:20 Communicating with the printer. 07:24 ESC/POS Encoder. ESC/POS Encoder. 08:42 Socket issues. 09:56 Using Transformers.js to stop ‘toxic comments’. Xenova’s toxic-bert. Implementation in Wes’ code. 10:48 Back to socket issues. 12:18 Integrating with Sentry. 15:01 Printing images with Playwright. 16:17 Was it worth it? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with Daniel Thompson-Yvetot about Tauri. They dive into what Tauri is, the motivations behind its development, its open-source ecosystem, use cases, and more. Show Notes 00:00 Welcome to Syntax! 02:01 What is Tauri? 02:59 What’s new in Tauri 2.0? 06:41 The benefits of Tauri over Electron 11:28 Can you use Node? 14:21 Mac, Linux, and Windows Verso Servo 25:05 How does Tauri make money? CrabNebula 30:05 Brought to you by Sentry.io 30:30 Accessing Swift from JavaScript 31:44 What’s the hardest part of a project like this? Haptics Plugin 37:00 Some of the apps that have shipped with Tauri Cody GitButler Tauri Discord Awesome Tauri 43:18 The future of Tauri 50:23 Sick Picks & Shameless Plugs Links Rustlings Cassidy Williams Sick Picks Daniel: 5secondfilms Shameless Plugs Guest: Manufacturing European Software (Coming Soon) Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this Potluck episode of Syntax, Scott and Wes answer your questions, from weighing the trade-offs between numerous small npm packages and a few larger ones to managing the challenges of work-from-home life. They also explore CSS modules, strategies for shrinking JavaScript bundles, and even where to find the best replacement ear cups for your headphones. Show Notes 00:00 Welcome to Syntax! 00:38 Commentating basketball. 01:16 Brought to you by Sentry.io. 02:09 The video podcast doesn’t translate well to audio. 04:08 Many small npm packages vs a few large. 09:55 Developers dealing with WFH, ADHD, and kids. 15:59 CSS modules for scoping styles to components. 20:55 Scoped CSS in React? 23:21 Reducing JS bundle sizes. Bundle Phobia. Javascript Bundle Analysis [Beta]. 29:44 Balancing learning, doing, and teaching. 33:04 Making maps local first. 36:20 How to pronounce ‘schema’. Wes Bos Tweet. 37:09 HTML tag. 40:11 Where to get replacement ear cups for headphones? wickedcussions. Scott’s Audeze Headphones. 42:21 ESLint and hiding errors. 48:48 Sick Picks & Shameless Plugs. Sick Picks Scott: Allen Wrench Set. Wes: Clarkson’s Farm – Amazon Prime. Shameless Plugs Wes: Syntax.fm, YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up a hasty discussion on side projects, sharing their latest Hack Week experiments and tips on how to turn fun ideas into profitable ventures. They cover everything from finding inspiration to choosing the right tech, and even offer advice on how to finish what you start. Show Notes 00:00 Welcome to Syntax! 01:11 Brought to you by Sentry.io. 01:27 Wes’ Hack Week project. 02:30 Scott’s Hack Week project. 04:18 Where do you get ideas for side projects? 09:22 End goals for a side project. 14:47 Other end goals. 16:45 What tech should you use? drop-in. 20:34 Keeping notes. 23:14 Finishing side projects. 26:39 Shameless Plugisode! Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with CJ Reynolds about the resurgence of meetups in a post-COVID world. They discuss the benefits of attending and speaking at meetups, and the logistics of organizing them. CJ also shares his experiences running the DenverScript meetup, including sourcing speakers, finding venues, and ensuring a welcoming community. Show Notes 00:00 Welcome to Syntax! 01:35 Brought to you by Sentry.io 01:49 CJ’s history hosting meetups DenverScript Code Talent 06:35 How do you structure a meetup? 09:50 How do you raise awareness for a meetup and get people to attend? Meetup.com Guild 13:27 How to pay for a meetup 15:22 How to get speakers at meetups 16:50 The length of these talks 17:03 Does live-streaming hurt attendance? Syntax 806 - The King of Drag and Drop: Alex Reardon 19:32 Is there a vetting process for finding speakers? Syntax 019 - How to Get Into Speaking at Conferences 24:26 A meetup doesn’t have to be talks Develop Happy Hour 27:48 What’s the worst part about hosting a meetup? 29:37 What was your first meetup like? 33:27 What’s the best meetup you’ve been to and why? 37:10 How to be a good attendee 40:45 Are meetups back? 44:00 Tips for organizing a great meetup 45:29 How to find a meetup 47:37 Sick Picks & Shameless Plugs Sick Picks CJ: Fillo’s Walking Tamales Shameless Plugs CJ: DenverScript You Should Use Hono in your Next Project Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow. Show Notes 00:00 Welcome to Syntax! 01:03 Brought to you by Sentry.io. 01:27 File management applications. 01:43 DaisyDisk. 04:19 Marta. 07:50 EasyFind. 10:16 Czkawka. 12:53 Backblaze. 14:40 Hazel. 17:42 AutoMounter. 18:43 Media applications. 18:52 Automator HIEC to JPG. 20:04 Rant on QuickView. 20:32 DVD idea. 22:06 IINA. 24:07 Capture One. 25:02 YouTube Enhance. 27:16 HandBrake. 28:05 MakeMKV. 30:33 Overkill for Mac. 33:42 Search by Image. 37:09 eqMac. 37:37 Utility applications. 37:52 Stats & iStat Menu. 40:19 Alternatives to popular Mac applications. 40:23 Ice. 41:03 PearCleaner. 43:08 Numi. 44:17 Bottom (btm). 44:53 Sip Color Picker. 50:25 Sick Picks & Shameless Plugs. Sick Picks Scott: Wilde Chips Wes: Apple TV+: The Big Conn Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess. Show Notes 00:00 Welcome to Syntax! 00:33 Breakdancing in the Olympics. 05:29 Brought to you by Sentry.io. 05:44 Why your CSS sucks. 07:01 You’re styling the wrong element. 11:01 Nesting too deep. 12:37 You don’t understand specificity. 14:56 Your classes don’t use a system. 16:24 You’re using values instead of CSS vars. 20:16 You don’t understand block vs inline vs inline-block. CSS Logical Properties 21:16 You aren’t using the right tool for the job. CSS Flexbox, CSS Grid. 24:15 You’re setting the value in too many places. 24:31 You’re scoping to tightly or not tightly enough. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem. Show Notes 00:00 Welcome to Syntax! 00:34 What is Deno? 05:08 Deno 2.0 07:49 NPM compatibility 09:40 What parts of Node aren’t doable in Deno? 11:22 Do we need a hard break from Require? 13:51 Package management 16:25 Security and performance benefits of Deno 20:57 Brought to you by Sentry.io 20:57 Thoughts on Bun and Node additions 26:25 Ryan’s favorite Deno projects Lume Fresh webgpu-examples gpucraft minecraft clone + deno + webgpu gpucraft example Shaderplay Orillusion 28:42 Will we ever see a unified file system API? 31:49 Typescript 36:12 Jupyter Notebooks with Deno Polars 39:11 AI and WASM in JavaScript 42:01 Deno 2.0 features and future 43:08 Sick Picks & Shameless Plugs Sick Picks Ryan: McCarren Park Shameless Plugs Ryan: https://deno.com/enterprise Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more. Show Notes 00:00 Welcome to Syntax! 02:33 Brought to you by Sentry.io 03:25 Why HTML is important 06:52 Semantic vs non-semantic 07:58 The basic structure of an HTML page HTML elements reference The Main element 08:45 Doctype 15:24 Nav 18:47 Section 20:41 Aside 22:09 Article 22:54 Span 27:18 Why use a span when you have a div and a paragraph tag? 29:29 Figure and Caption 31:16 Fieldset 31:53 UL vs OL 32:44 DFN The Definition element 34:16 Form 36:56 Button vs Anchor 38:22 Headings 674 - A11y Treats - Heading Design 40:21 Output The Output element 41:46 Dialog 42:04 Tables 44:03 Media media-chrome 45:06 Canvas https://githubuniverse.com/ https://maximeheckel.com/ 46:07 On graphics programming 47:38 Search 354 - The Surprisingly Exciting World of HTML Elements 48:27 Sick Picks + Shameless Plugs Sick Picks Scott: 2Pack Traditional Natural Bamboo Wok Brushes Wes: Logitech MX Master 3S Shameless Plugs Syntax YouTube Channel The Easiest Way to Infinite Scroll with React | Full Example Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 01:35 Scroll-driven animations. Syntax 695: 5 New CSS Features You Should Know Scroll-driven animations demos and tools. 04:13 @keyframes. 05:22 animation-timeline. 11:35 animation-range. 08:49 View-based timelines. 17:45 Neat uses: Dave Rupert on styling :stuck. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more! Show Notes 00:00 - Welcome to Syntax! 01:43 - Brought to you by Sentry.io 02:19 - The evolution of CSS 04:07 - CSS versioning and spec levels CSS RFC 17:49 - Use-cases for allow-discrete 20:34 - State queries 24:19 - Where does the baseline data come from? 25:17 - Will the RFC become official? The latest in Web UI (Google I/O ‘24) 27:33 - New features Una is excited about 29:44 - Select https://open-ui.org/components/customizableselect https://codepen.io/argyleink/pen/YzoEPOG 38:31 - New features Adam is excited about 39:24 - text-box-trim 40:59 - State queries 54:56 - Sick Picks + Shameless Plugs Sick Picks Una: Logitech MX Master 3 Adam: Teenage Engineering K.O. II Shameless Plugs Una: Una.im Adam: The CSS Podcast Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape. Show Notes 00:00 Welcome to Syntax! 00:36 Brought to you by Sentry.io 01:24 Overview and features of daily.dev 07:05 daily.dev's origin story 10:06 How Product Hunt fueled initial growth 12:21 Monetization and business model 13:53 Content and user experience Syntax Squad 22:21 Written content vs video content 24:29 Tech stack Terraform Pulumi React Vercel Fastify Postgres Go 25:37 Building a positive community 30:32 Moderation and tagging 35:03 Francesco's favorite place to publish right now 36:56 Quadrupling down on Rust Rust 39:38 Francesco's favorite Rust framework Actix 41:18 Sick Picks & Shameless Plugs Sick Picks Francesco: daily. dev Shameless Plugs Francesco: Francesco's YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more! Show Notes 00:00 - Welcome to Syntax! 01:48 - Brought to you by Sentry.io 04:37 - The future of JavaScript frameworks 09:09 - How to use Caddy for local development SvelteKit Vite 14:27 - When to use an API Strapi 17:38 - Where does Scott get his amazing t-shirts? Sentry.shop Syntax Snack Pack 21:33 - Best screwdriver for kids toys PicQuic Sixpac Plus LTT Screwdriver 24:31 - Strategies for database design MongoDB Prisma 30:21 - Do we need frameworks? 796 - Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native Frontend Masters 32:19 - Best tech stack for building a basic login system 336 - How To Build Your Own Auth 37:56 - Syntax video episodes 40:25 - Component props in JSX 45:26 - Sick Picks & Shameless Plugs Sick Picks Scott: Loop Quiet Ear Plugs Wes: Gecko’s Toes Water Hose Rack Shameless Plugs Scott: Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them. Show Notes 00:00 - Welcome to Syntax! 01:30 - Brought to you by Sentry.io. 02:11 - What makes a good CSS component system? 07:54 - Component vs part of a component 13:26 - CSS Modules 15:56 - Scoped CSS @scope - (82% support!) ff behind flag https://developer.mozilla.org/en-US/docs/Web/CSS/@scope 21:07 - How is Panda different from style components? Panda StyleX 00:00 - Utility CSS TailwindCSS Uno 31:08 - Utility Sprinkles 34:13 - CSS variables https://open-props.style Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks. Show Notes 00:00 Welcome to Syntax! 01:18 Brought to you by Sentry.io. 01:51 What Alex does at Atlassian react-beautiful-dnd Pragmatic drag and drop 04:38 What makes drag and drop tricky. 06:38 Use-cases. 10:54 What security is in place? 12:30 How to make it feel native. 19:20 Is the drag and drop spec ongoing? 20:03 How do you build this headless? 21:33 How does drag and drop work with frameworks? 23:48 Making drag and drop feel the same across mobile and desktop. 26:09 What's the key to really good drag performance? 29:58 How do you make drag and drop accessible? 34:57 Pragmatic drag and drop code vs application code. Shoelace shadcn 40:00 How does testing work? Playwright Cypress 43:15 Internal adoption at Atlassian. 44:27 Working on high-impact projects. 49:15 Versioning and internal adoption at Atlassian. 51:29 Sick Picks + Shameless Plugs. Sick Picks Alex: Coffee, James Hoffmann YouTube Channel. Shameless Plugs Alex: Dom Events. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem. Show Notes 00:00 Welcome to Syntax! 01:41 Brought to you by Sentry.io. 02:28 The State of React 2023. 03:11 The Main API Painpoints. 04:31 forwardRef. 05:27 memo. 06:39 Context API. 07:18 StrictMode. 08:45 Double rendering. 09:36 State management. 11:58 Hooks Pain Points. 12:11 useEffect. 12:33 Dependency arrays. 13:11 New API Pain Points. 13:19 React Server Components. 14:40 Taint API. 15:19 Libraries. 17:02 Jotai. 17:45 Apollo Client. 19:05 Redux. 20:57 Redwood. 21:26 React Aria. 21:55 Astro. 22:04 The most negative. 23:35 Component Libraries. 25:50 Other Component Libraries. 25:53 Mantine. 27:47 Details element. Tolin.ski/demos. 28:59 Honorable mentions. 29:07 Animations. 29:28 Data Visualization. 31:26 CSS Tools and Libraries. 33:14 Styled Components. 34:16 Meta Frameworks. 38:50 Hosting. 40:08 Other Services. 40:45 Back-end language trivia. 43:00 State management. 43:40 Data Loading. 44:08 Other Tools. 44:09 Testing Libraries. 44:45 React Renderers. 47:58 Podcasts, thank you! 48:14 Sick Picks & Shameless Plugs. Sick Picks Scott: Thermacell. Wes: Nerf Guns Shameless Plugs Wes: Syntax.fm. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes debate whether your website really needs JavaScript to function. They explore the principles of web standards, progressive enhancement, and test popular websites like Shopify and Netflix to see how they perform without JavaScript. Show Notes 00:00 Welcome to Syntax! 00:11 Take 2 01:43 Brought to you by Sentry.io. 02:19 The clip summarized. 03:16 Your website should load, be readable and be (mostly) styled without JavaScript. 07:32 Web standards first. If it can be done without JavaScript, it should be. 08:09 What if the CSS doesn’t load? 10:20 Linking 10:24 Forms. 12:11 Links (Duh, but also c’mon!) 12:35 Query parameters. 13:57 Server render if possible. 15:20 Progressive Enhancement. 17:24 CSS Page Transitions. 19:07 Let’s test websites out. 19:15 Shopify. 22:16 Syntax.fm. 25:23 Netflix. 27:27 Local first and offline service workers. 29:27 TikTok. 29:33 GitHub. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes chat with Glauber Costa from Turso about the evolution of databases and the fascinating technology behind Turso. They dive into topics like the benefits of massive multi-tenancy, vector search, and why Glauber made the switch from NoSQL to relational databases. Show Notes 00:00 Welcome to Syntax! 00:36 Turso’s relationship with Drizzle. 02:10 What is Turso? 04:23 Brought to you by Sentry.io. 04:48 Using libSQL without Turso. 06:21 An explanation of Vector Search. 07:16 Vector databases are being ‘Sherlocked’ by larger databases. 09:24 Why did you move from NoSQL to Relational? 12:00 Allows for massive multi-tenancy - what does that mean? 15:27 Transactional schema changes. 16:30 Why would you want 10,000 databases? 19:02 What makes SQLite cheaper? 22:59 The strategy for building a business around an inexpensive tool. 26:13 Pull requests and branching within SQLite. 28:52 Database snapshots for rollbacks. 31:14 Driving the cost of a database to zero allows for rethinking architecture. 32:35 SQLite informing Turso’s edge functionality. 36:56 Automatic replica database syncing. 39:10 Is the database a bottleneck? 39:25 Embedded Replicas. 40:04 How do embedded replicas handle conflict resolution from offline users? 41:43 If the server is offline, can the database live in the client or WASM? 43:09 Conflict resolution. 44:47 What makes Turso stand out? 47:51 What was it like working on the Linux Kernel? 51:57 Do you use Linux? 52:46 Sick Picks & Shameless Plugs. Sick Picks Glauber: Understanding yourself, What is Aphantasia. Shameless Plugs Glauber: React Rally Park City, UT, Turso, Laravel. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up a gameshow-style quiz with STUMP’d, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights! Show Notes 00:00 Welcome to Syntax! 01:17 Brought to you by Sentry.io. 02:03 The longest game of Rock, Paper, Scissors. Round 1 03:22 In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other? 05:56 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits? Round 2 09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area. 11:34 What is the “Temporal Dead Zone” in JavaScript, and how does it relate to variables declared with let and const Round 3 13:29 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue. 17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM? Round 4 20:05 Explain the process of Critical Rendering Path optimization in modern web browsers 26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript. Round 5 30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development. 32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores. Round 6 35:26 Explain the concept of “code splitting” in modern JavaScript applications. 37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility. Round 7 45:15 Explain the concept of “Server-Sent Events” (SSE) in web development. 47:37 What’s the difference between contain layout and contain paint? 49:30 Sick Picks & Shameless Plugs. Sick Picks Scott: diskprices. Wes: Slime Tire Sealant. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up six exciting new JavaScript proposals, including Promise.try and Math.sumPrecise. They break down what each proposal means for developers and how these new features could change the way we write JavaScript. Show Notes 00:00 Welcome to Syntax! 01:45 Understanding the stages of JavaScript Proposals. 04:04 Promise.try - Stage 3. 05:39 Math.sumPrecise - Stage 2.7. 07:28 Floating point math. 09:07 ShadowRealm - Stage 2.7. 11:39 Brought to you by Sentry.io. 12:03 Regex Escape - Stage 2. 13:33 Defer Module Evaluation - Stage 2.7. 15:09 Iterator Sequencing - Stage 2. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In episode 800 of Syntax, Scott and Wes sit down with John Resig, the creator of jQuery, to discuss the current state of React and TypeScript. They dive into the evolution of frontend frameworks, the challenges of server-side rendering, and the tech stack at Khan Academy. Show Notes 00:00 Welcome to Syntax! 00:59 Brought to you by Sentry.io. 01:32 What is jQuery? 05:31 Did you anticipate the success jQuery had? 07:16 allow-discrete, @starting-style. Install Nothing: App UIs With Native Browser APIs - Scott Tolinski. 07:54 Building the community around jQuery. 11:16 jQuery plugins. 13:00 Did you ever make money from jQuery? 16:13 What is your role at Khan Academy. 17:58 What is the tech stack at Khan Academy? 21:56 Why do you want to change your CSS and JS framework? 24:03 TypeScript vs Flow. 25:25 GraphQL federation. 28:08 What was your frontend framework journey? 30:23 Is there any part of React you wish would improve? 32:37 Reservations using React Router. 33:14 Khan Academy web platform vs native platform. 35:21 What do you use for state management? 38:48 What’s harder than it should be on the web today? Kilian’s Question On X. Polypane.app. 42:46 Opinions on JavaScript Sprinkles. 44:04 What’s with the $ sign in jQuery? 45:29 The challenges of having your name in such a widely used software. 51:06 Challenges with server-side rendering in React. 52:42 Sick Picks & Shameless Plugs. 54:48 What are the performance issues associated with internationalization? 56:57 Back to Sick Picks & Shameless Plugs. Sick Picks John: Biome, Remix, Lingui. Shameless Plugs John: Khan Academy. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up the latest and most under-utilized browser APIs that are changing the game for web development. From the @starting-style CSS API to scroll-snap and popovers, they break down how these tools can elevate your projects with minimal effort. Show Notes 00:00 Welcome to Syntax! Install Nothing: App UIs With Native Browser APIs – Scott Tolinski. Tolin.ski Demos. 01:03 Brought to you by Sentry.io. 02:15 When to use these tools. 03:45 @starting-style CSS API. 08:23 Transition behavior allow-discrete. Dialog CSS. 11:56 calc-size(auto). 16:19 scroll-snap. Swiper Indicators. Slide Show. Scroll To Options Snap-Additions. Adam Argyle Tweet. 22:05 View Transitions. Cross-document view transitions for multi-page applications 33:28 Popover API. Tolin.ski Demos Popover Basic. Tolin.ski Demos Popover Action. Tolin.ski Demos Popover Anchor. Tolin.ski Demos Popover Compat Tolin.ski Demos Popover Mobile-Nav. 41:15 Dialog. Tolin.ski Demos Drawer CSS. 48:12 Details. Tolin.ski Cool-Treats Accordion. 53:26 Sick Picks & Shameless Plugs. Sick Picks Scott: Emerge Tools. Wes: Apple TV+ Hacks. Shameless Plugs Scott: Local First from Scratch. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up an episode on reverse proxy servers. They discuss popular options like CF Tunnels, Caddy, Nginx, Apache, and more, explaining why you might need one for load balancing, SSL certificates, security, and managing multiple servers. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io. 02:25 What is reverse proxy? 03:16 Some examples of reverse proxies. 05:04 Why do you need a reverse proxy? 05:09 Combining multiple servers. 06:51 Load balancing. 07:23 SSL certificates. 10:30 Security. 10:37 Conceal your true IP. 11:24 Access management. 12:31 Routing static assets. 13:31 CDN / local. 15:55 Caddy × websocket support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes chat with Alex Blokh and Andrew Sherman, the co-founders of Drizzle ORM, about building a modern ORM from the ground up. They dive into the importance of type safety, creating filters with Drizzle, and the differences between Drizzle and other ORMs like Prisma. Show Notes 00:00 Welcome to Syntax! Syntax × Drizzle Swag. 01:15 What is Drizzle? 02:36 The genesis of Drizzle. 04:15 The process of building an ORM. 05:38 ‘100% Type-Safe’ and why that’s not a great goal. 07:50 Who is responsible for writing the complicated TypeScript? 09:40 Is an ORM necessary for anyone working with data? 12:15 Creating a product that fits different complexities. 13:19 Brought to you by Sentry.io. 13:44 Creating filters in Drizzle. Callback-based, or imported. Why? 19:22 Drizzle vs Prisma vs Kysely. 22:45 Are you friendly with Prisma? 23:35 Relational queries. 25:17 Query vs select. 27:42 Maintaining so many different technologies. 30:37 Switching databases. 31:39 Drizzle Studio. Drizzle Studio Syntax Theme. 35:00 Accessing Cloudflare D1 SQLite requires connection through a worker. 37:40 Drizzle Kit. 41:37 Will you ever support MongoDB? 42:10 Supporting PGlite and local data storage landscape. DrizzleORM v0.30.6 release notes. 44:00 Being a developer in Ukraine in 2024. How to support Ukraine: Savelife, United24. 51:07 Drizzle is expanding. 53:50 Sick Picks + Shameless Plugs. Sick Picks Andrew - Smart Swim Goggles. Shameless Plugs Andrew - Savelife, United24. Scott - Syntax × Drizzle Swag. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes tackle a variety of audience questions, from the nuances of over-engineering to the energy consumption of AI LLMs. They also discuss the pros and cons of monorepos, frameworks, and the ever-important question: Do you really need to learn all the developer tooling? Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io. 01:07 Challenges around a resume playback function. 05:56 Why use Google Forms for Potluck questions? 07:57 What constitutes over-engineering and how to avoid it. 13:28 Webview vs native component based mobile apps. 18:06 Running and managing monorepos. 20:59 Energy consumption of AI LLMs vs static web content. A guide to LLM inference and performance. From Words to Watts: Benchmarking the Energy Costs of LLM Inference. 25:19 Why do we need frameworks? Frank M Taylor Blog Post. 33:05 Handling ad-blockers blocking Sentry and other tools. Syntax GitHub. 38:25 Creating sites without JavaScript. 42:49 Do I really have to learn all the various developer tooling? Wes Bos Tweet. 44:47 What are the best ways to network and meet other developers? 50:16 Sick Picks & Shameless Plugs. Sick Picks Scott: Tweek App/ Wes: Rain-X Waterless Car Wash. Shameless Plugs Scott: Swag Store. Wes: Audio Player Updates. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dish out the intricacies of hosting private fonts using Cloudflare Pages. They explore the challenges of font security, the benefits of a font server, and the nuances of caching and whitelisting to keep your fonts secure and efficient. Show Notes 00:00 Welcome to Syntax! 01:53 Behind the Code: Brought to you by Sentry.io. 03:12 The problem with hosting fonts. Scott’s Fonts. 05:42 The solution, a font server with Cloudflare Pages. 09:37 Utilizing a Key Value Store. 10:53 Storing a whitelist. 13:42 Why not just use a bucket? Check out the code. 15:24 Should whitelisting be done in JavaScript or cores? 17:23 How do you cache to multiple origins? 18:15 Multiple URLs in an allow origin. 19:17 Font security and foundry challenges. 21:43 Moving Domains on Cloudflare. Check out the font Syntax uses! MD-IO. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes sit down with Vjeux from Meta to dive deep into the origins and evolution of Prettier, the widely-used code formatter. They discuss the challenges faced, the decision-making process behind its features, and what the future holds for this indispensable tool in the developer’s toolkit. Show Notes 00:00 Welcome to Syntax! 01:45 Brought to you by Sentry.io. 02:19 New swag! 03:25 Who is Vjeux? 06:56 Is management the key to successful projects? 08:50 The genesis of Prettier. 12:08 Why other JS formatters didn’t work. 16:56 Focusing on edge-cases. 17:41 The goal for Prettier. Prettier Philosophy. 18:31 Next step, integrations. 19:37 Should you run Prettier on save or commit? 21:34 Does Prettier’s limitations lead to higher adoption? Prettier Config. 25:01 What was the most controversial default setting? 28:14 Does Facebook use semicolons? 29:18 Getting approval to devote 6 months to Prettier. 31:42 Working with Mark Zuckerberg. 32:43 Was there ever consideration to augment ESLint instead? Prettier vs. Linters. 35:34 What are your thoughts on the Rust-based alternatives? 36:44 Prettier’s $10,000 bounty. 39:32 What is the future of Prettier? 44:54 Prettier is available in almost every language. 47:59 Advice for other open-source maintainers. 53:26 Sick Picks & Shameless Plugs. Sick Picks Vjeux: TransformersJS. Shameless Plugs Vjeux: Prettier x Syntax Swag. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dive into the local first landscape, exploring the benefits and possibilities of local first apps. They highlight some of their favorite tools and discuss why local first is gaining traction among developers. Show Notes 00:00 Welcome to Syntax! 00:27 Behind the Code: Brought to you by Sentry.io. 01:06 Catch up with Wes and Scott. 03:00 The local first space. Scott’s Blog: The Spectrum of Local First Libraries. Syntax 739: The Lofi Movement. 04:27 Some local first apps we love. Linear. Tweek.so. Superhuman. 05:15 The advantages of local first. 06:07 localfirstweb.dev. 09:21 Triplit. 15:33 Evolu. 22:32 RxDB. 24:08 ElectricSQL. 26:57 Pouchdb. 28:46 TinyBase. 32:08 Replicache. 44:31 PowerSync. 48:21 Sick Picks & Shameless Plugs. Sick Picks Scott: Battery Jump Starter. Wes: Battery Tire Pump. Shameless Plugs Wes: Syntax Swag Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes break down the importance of sitemaps for SEO. They dive into the different file formats, essential fields, and common pitfalls to avoid when creating and submitting your sitemap to search engines. Show Notes 00:00 Welcome to Syntax! New Swag Coming Soon. Tolin.ski. 02:09 Brought to you by Sentry.io. 02:39 Sitemaps. 04:36 Why do you need a sitemap? 06:34 Sitemap file formats. 08:31 Choosing a file format. 09:17 Site map file size limits. 10:32 Fully-qualified URLs. 10:50 Fields and metadata. 10:58 What fields matter for SEO? 14:20 What to avoid in your sitemap? 14:23 Dynamic user pages and account pages. 14:43 Parameter-based URLs. 16:01 Redirects, duplicates or disallowed pages. 16:11 Unlisted pages. 17:07 How do you make a sitemap? 20:06 What to do once you have a sitemap. 20:08 Validation. 20:20 Submit to search engine. Bing Webmaster Tools. Google Search Console. 22:11 Cache them! Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes chat with Richard Davison from AWS about LLRT, a new runtime tailored specifically for Lambda. They dive into the benefits of using LLRT, challenges with JavaScript in serverless, and why Rust was chosen for its development. Show Notes 00:00 Welcome to Syntax! 01:07 Who is Richard Davison? 05:11 What is LLRT and what’s the motivation for building it? 08:25 AWS Lambda example. 11:20 What makes LLRT specifically tailored to Lambda? 14:55 Brought to you by Sentry.io. 15:22 Node.js in Lambda. 16:00 What are some challenges that people have with JavaScript in serverless? 17:20 Lambda memory configuration. 19:23 Managing cost of compute. 21:29 Simpler and faster than Node, Bun, Dino, but not a replacement. 22:31 The benchmarks. 27:00 Quick.js, the main reason for the performance gains. Fabrice Bellard QuickJS. 28:03 The Quick.js engine. 30:35 What was the reason behind creating Quick.js? 33:46 What made you pick Rust for LLRT? 36:34 Abstractions and the value of speed. 39:08 The JIT Compiler. 42:38 Compile cache. 43:27 De-optimizations. 44:59 Node.js Compat, what to use and avoid with LLRT. GitHub AWS Labs Compatibility Chart. 47:52 Will you target with WinterCG spec? 50:22 Streams API. 52:06 What about WebSockets? 53:10 Is this going to be promoted from a labs project? 54:49 Sick Picks + Shameless Plugs. Sick Picks Richard: QuickJS Engine, JSLinux. Shameless Plugs Richard: Javascript Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year! Show Notes 00:00 Welcome to Syntax! State of JS 2023. 03:04 Brought to you by Sentry.io. 03:43 New Syntax Swag! Syntax Swag Store. 04:42 Front end frameworks. 08:30 Front end framework pain-points. 12:17 Metaframeworks. 17:45 Metaframework pain-points. 22:17 Build tools. Rolldown. 24:45 Build tool pain-points. 25:54 JavaScript runtimes. 28:19 Edge + serverless runtimes. 29:30 Backend frameworks. 33:17 Non-JavaScript languages. 36:12 Hosting service. 38:50 Usage. 40:05 Javascript usage. 41:03 Missing features. 45:04 Industry sector. 47:37 The awards. 51:34 Sick Picks + Shameless Plugs. Sick Picks Scott: Electric Lighter. Wes: Monkey Noodle. Shameless Plugs Wes: Syntax Swag Store. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs. Show Notes 00:00 Welcome to Syntax! 01:31 Brought to you by Sentry.io. 02:42 What is a token? Quizgecko GPT-4 Token Counter. 04:22 Context window sometimes called “max tokens”. OpenAI Platform Models. Claude Models. 10:42 Understanding input length. 11:59 Models + services with big token counts. Gemini Docs. 13:22 Generating open API documentation for a complex API. 17:29 Generating JSDoc style typing. Drop-In stolinski GitHub. 21:07 Generating seed data for a complex database. bytedash w3cj GitHub. 24:34 Summarizing 8+ hours of video. 29:35 Some things we’ve yet to try. 31:32 What about cost? Google AI for Developers Cost. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads CJ: X Instagram YouTube TwitchTV Randy: X Instagram YouTube Threads

Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values. Show Notes 00:00 Welcome to Syntax! 00:30 Who is Paul Copplestone? 01:17 Why ‘Supa’ and not ‘Super’? 02:26 How did Supabase start? 04:29 How long from inception to joining Y Combinator? 05:10 Was it always intended to be open source? Why Open Source. 07:22 How many users chose to self-host? 07:49 Open source mindset. 08:42 Simplicity in design. 10:32 How do you take Supabase one step beyond the competition? 12:35 How do you decide which libraries are officially supported vs community maintained? 15:17 You don’t need a client library! 16:48 Edge functions for server-side functionality. 18:51 The genesis of pgvector. 20:59 The product strategy. 22:25 What’s the story behind Supabase’s awesome docs? 25:26 The tech behind Supabase. 25:39 What is the UI built on? 27:33 Consolidation follows kaizen. 28:54 What else is involved in the stack? 31:47 Authentication. 32:35 Storage engine. 33:13 For self-hosting. 35:46 How do you balance business goals with open source? 42:01 What’s next for Supabase? 44:15 Supabase’s GA + new features. Top 10 LAunches from Supabase GA Week. 48:24 Who runs the X account? 50:39 Sick Picks + Shameless Plugs. Sick Picks Paul: Apple Vision Pro. Shameless Plugs Paul: PostgreSQL. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads CJ: X Instagram YouTube TwitchTV Randy: X Instagram YouTube Threads

Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 02:24 What is Vue? 04:13 Similar to Svelte, different from React. 05:35 How to get started with Vue. 05:43 Script tag. 06:01 CLI. 07:10 The value of an opinionated CLI. 10:51 Why do you like Vue.js over React or Svelte? 11:03 Less boilerplate. 15:24 Self-closing tags. 16:09 Svelte parsing HTML tags incorrectly. Hacker News Article. 17:08 Easily adding event handlers to elements. 18:20 Conditional rendering. 19:19 What is a directive? 20:29 ‘Borrowing’ from Angular One. 21:07 Styles are built in. 22:11 Tailwind for scoping. 26:08 State management. 30:28 Ref Functions similar to Svelte Runes. 32:03 Global state management. 34:24 Pinia. 36:18 What is the full-stack application platform for Next.js? 38:00 Nuxt auto-imports. sveltekit-autoimport. 39:37 Creating API functions and server side codes. 41:12 The future of Vue and compilers for front end frameworks. 41:43 Vue’s compiler. 44:19 Are people actually using Vue? 46:50 Laravel and Vue. 48:29 Sick Picks & Shameless Plugs. Vue.js: The Documentary. Sick Picks Scott: Jordan Roam Slides. CJ: USB Charging Hub Shameless Plugs Scott: Syntax on GitHub CJ: Syntax.fm Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project. Show Notes 00:00 Welcome to Syntax! 00:54 Brought to you by Sentry.io. Sentry Open Source. Giving away $500,000 to open source projects. 01:56 What is open source? 03:19 This is not legal advice. 03:51 Source available ≠ open source. No Permission. 06:39 The benefits of open source. 07:26 Educational. 07:52 More Secure. 09:32 Community-oriented. Scott’s Habit Path 11:29 Types of licenses. 12:09 Permissive licenses. 12:26 MIT License. 14:37 Apache 2.0 license. 15:31 Copy Left licenses. 15:58 GNU GPLv3. 18:16 Copy Left + permissive. 18:23 (Mozilla Public License) MPL. 19:31 Business licenses. 19:35 Functional Source License. 23:16 Companies using BUSL. 24:41 Server Side Public License (SSPL). 26:56 Choosing and acknowledging licenses. 29:13 Applying a license to your directory. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development. Show Notes 00:00 Welcome to Syntax! 00:30 What does the React Compiler do? 05:04 Will React Compiler help with managing Context? 06:39 What happens if you’re not using a React Compiler? react.dev Playground. 09:30 Will this work on any NextJS version? 12:18 What are React Server Components? 16:28 Shipping all the data inside an encapsulated component. 20:17 Clearing up the frustrations around retrofitting server components. 23:13 Handing migration. 28:30 Is this just a fetch request with props? 36:41 How closely are the NextJS and React teams working? 41:53 Will we ever get Async Client Components? 43:52 Async Local Storage API. 45:31 Turbopack. 57:51 Sick Picks & Shameless Plugs. Sick Picks Tim: Apple TV Sci-Fi. Shameless Plugs Tim: Turbopack, Next.js 15 RC, Sentry NextJS. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood. Show Notes 00:00 Welcome to Syntax! 00:13 How to submit a question for future episodes. Potluck Questions. 02:46 Brought to you by Sentry.io. 03:21 Logging from a site. 08:39 Blogging in 2024. 11:49 Sharing website environmental data. Green Web Foundation. Website Carbon Calculator. Syntax Site Results. Scott’s Site Results. 17:38 Using LangChain when working with LLMs. 21:03 CSS Hyphens and Overflow-Wrap. Hyphens Browser Compatibility. Overflow-Wrap. 25:52 Similarities between WASM, JVM and .NET. 27:25 Writing unit testing and integration testing. 32:00 How can new parents stay current on web development trends? 34:47 Working globally as a freelance developer. 37:26 Scott’s audio setup. Why audio interfaces have DSP built in. ChaseBliss Pedal. 43:04 UI libraries for synth/audio plugins. 44:02 CSS module scripts. CSS Modules in CSS Module Scripts. 48:39 Sick Picks + Shameless Plugs. Sick Picks Scott: Deep Cover Podcast. Wes: Pressure Washer Surface Cleaner. Shameless Plugs Wes: Syntax.fm/videos. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data. Show Notes 00:00 Welcome to Syntax! 02:07 Brought to you by Sentry.io. 02:33 The file system API. 03:08 The Cache API. Mozilla Developer Cache API. Airhorner, a good example. 04:24 Size restrictions per browser. 07:04 How tools like Riverside.fm use IndexedDB. 08:47 Data eviction (too much data). 10:16 What we’re using it for and how. 12:17 How do we do this in code? 14:37 Creating the cache. 16:18 Retrieving from cache manually. 19:00 Adding metadata. 19:37 A live debugging. 22:39 Persistent storage. web.dev Persistent Storage. Hackernoon Persistent Storage. 26:10 Media score. Chrome Autoplay Policy. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web. Show Notes 00:00 Welcome to Syntax! 00:57 Who is Stephen Nixon? Process Type Foundry. Mark Simonson Proxima Nova. 05:42 What is a type foundry exactly? ArrowType. 09:09 Font / type making. 09:15 How do you make a font? RoboFont. Glyphs. 11:58 Fonts vs typefaces. 13:02 How many fonts have you made? 14:17 What are variable fonts and how can web developers utilize them? 19:22 Animating fonts. Variable Fonts. Recursive. 20:28 Do you code your demo sites yourself? 21:50 Are variable fonts more complex to design (and develop). Matthew Carter Adobe Fonts, Matthew Carter Wiki. Multiple Masters Variable Fonts. Just My Type. 27:03 Hand painted fonts. House industries. Golden Sign Co. Gen Ramirez. 29:39 Creating a monospace font. 32:19 Creating fonts with dyslexia accessibility in mind. 37:58 Typography for the web. 38:29 What are some 80/20 rules developers can employ to make more visually appealing typography? 40:58 Type scale calculations. Scott’s Fluid Type Calculator. 45:42 What are your biggest web type pet peeves. 48:46 Do you have any favorite type tools? Wakamifondue. Fixing Variable Font Inheritance. 50:34 Supper Club Questions. 50:44 How do you feel about ligatures in coding fonts? Ligatures In Programming Fonts Hell No. 55:11 What font do you use? Name Sans v05. Name-Mono. 56:43 What is your favorite font of all time? Typotheque. Soehne. Grillitype Typefaces. Phnotype. 58:49 Sick Picks + Shameless Plugs. Sick Picks Stephen: Children of Time, No-Recipe Recipes. Shameless Plugs Stephen: ArrowType, Skewing Fonts. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. 01:49 Today’s format. 02:23 Beginner vs advanced TypeScript. DHH Tweet. 09:23 Does Sveltekit replace Svelte with Astro? 13:09 Handling multiple languages. 19:52 Falling out of love with React. 25:53 Shipping private packages via NPM. npm-install. Working with the npm registry. 29:00 How do you feel about importing packages from a URL? 30:36 VueJS vs Svelte. 36:15 Leetcode type interview questions. 41:58 Learning a new language for personal growth. 46:21 Always starting, never finishing. Scott’s Fluid Type Calculator. 50:23 Code quality vs tackling tickets. 55:36 Sick Picks + Shameless Plugs. Sick Picks Scott: Quick Look Plugins. CJ: Sony WFC700n-b. Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more. Show Notes 00:00 Welcome to Syntax! 01:14 Brought to you by Sentry.io. 02:05 Why you might need a cloud storage provider. 03:07 How we use cloud storage. Dropshare. 08:16 Why you may need larger storage. 09:49 The big players in this space. Amazon S3. Cloudflare R2. Backblaze B2. Synology C2. Google Cloud Storage. Microsoft Azure. Digital Ocean Spaces. Oracle. Bunny.net. Amazon S3 Glacier. 14:34 Storage fees. 18:31 Why so cheap? 20:49 Bandwidth (egress). Cloudflare Bandwidth Alliance. 26:46 Operation fees - costs money. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it! Show Notes 00:00 Welcome to Syntax! 01:20 Who is Brian Holt? 02:26 Who is Marco Bambini? 05:12 Why are people starting to talk so much about SQLite now? 08:47 What makes SQLite special or interesting? 09:46 What is a big misconception about SQLite? 11:13 Installed by default in operating systems. 12:03 A perception that SQLite is intended for single users. 13:36 Convincing developers it’s a full-featured solution. 15:11 What does SQLite do better than Postgres or MySQL? 17:30 SQLite Cloud & local first features. 20:38 Where does SQLite store the offline information? 23:08 Are you typically reaching for ORMs? 25:00 What is SQLite Cloud? 27:29 What makes for an approachable software? 29:18 What make SQLite cloud different from other hosted SQLite options? 32:13 Is SQLite still evolving? 34:40 What about branching? 37:37 What is the GA timeline? 40:04 How does SQLite actually work? 41:19 Questions about security. 44:28 But does it scale? 45:52 Sick Picks + Shameless Plugs. Sick Picks Brian: Trainer Road Marco: Tennis Shameless Plugs Brian: SQLite Cloud, Frontend Masters - Containers. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Today, Scott and Wes dive into the 11 habits of effective web developers, from understanding stakeholder goals to maintaining a work-life balance. We’ll explore the importance of continuous learning, having a problem-solver mentality, and being empathetic towards coworkers and users—let’s get into it! Show Notes 00:00 Welcome to Syntax! Previous Episode: 754. 00:50 Brought to you by Sentry.io. 01:24 Denver weather is something else. 02:15 Habit #1: You understand stakeholder and business goals. 05:34 Habit #2: You’re curious and always learning. 07:43 Habit #3: You have an open mind about new technology. 11:29 Habit #4: You ask for help. 13:43 Habit #5: You help others. 16:51 Chicken drumsticks. 17:35 Habit #6: You have a “problem solver” mentality. 24:44 Hose repair. 26:02 Habit #7: You have fun with what you do. 29:56 Habit #8: You understand work-life balance. 33:18 Habit #9: You are empathetic to your co-workers and users. 37:19 Habit #10: You pay attention to detail. 41:18 Habit #11: You’re part of the community. 45:55 Sick Picks + Shameless Plugs. Sick Picks Scott: Solar Lanterns. Wes: Ninja Obstacle Course. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Today, Scott and Wes are diving into Pocketbase, a fantastic tool for web developers to quickly set up a CMS without breaking a sweat. We’ll cover everything from its Go-based architecture to its slick admin interface and how you can get started hosting it for free on Fly.io. Show Notes 00:00 Welcome to Syntax! 01:34 Brought to you by Sentry.io. 02:26 Overview of Pocketbase. 06:51 Written in Go, but no extending needed. Host for free on Fly.io. 07:37 Hooks. 08:05 Authentication + roles. 09:23 The admin experience. 11:18 Managing export collections. 13:21 Creating your own schema. 13:53 Adding indexes. 14:08 API rules. 15:01 Adding complex roles. 16:15 Full-featured admin with a great UI. 16:59 Collection API preview. 17:41 Docs with app-specific context. 18:54 Logs. 19:02 Settings. 19:42 Executable vs npm install. 20:29 Are the collections fully typed? 21:01 Some more settings. 22:56 One click Coolify install. Svelte Kit / Svelte 5 / Pocketbase Example. Svelte / Pocketbase Starter. Pocketbase Typegen. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Today we’re serving up an episode on 1Password with Senior Rust Developer Andrew Burkhart, delving into how 1Password works, tackling conflict resolution and security challenges, and exploring the benefits of using Rust. Show Notes 00:00 Welcome to Syntax 00:57 Who is Andrew Burkhart? 01:36 How does 1Password work? 03:24 What’s the data flow on creating a new login? 05:40 The conflict resolution challenges of pull first, push second. 06:46 Merging strategies: How do you chose which device wins the conflict? 08:27 1Password’s sync is fast and reliable. 11:20 Nuances of the extension. 12:59 The value of Hackathons. 13:40 What’s the main benefit of 1Password using Rust? 15:41 Watchtower processing. 17:15 1Password SSH. 18:17 1Password env. 19:11 Some other cool tools. 20:33 Does the increased security make developing challenging? 25:26 What’s 1Password’s security onboarding like? 27:47 1Password and WASM. 31:45 Tokio as the asynchronous runtime for Rust. 34:25 Scott’s Rust based video app. 35:03 What is an FFI? 38:13 How did you learn Rust? Jon Gjengset - Rust Nation UK YouTube. Let’s Get Rusty YouTube. 41:13 Why is the 1Password team so big? 42:40 Are there teams that manage individual applications for errors? 43:45 Challenges with WASM. 48:59 Syntax horror stories. Episode 586 with Eric Sartorius. 52:50 Sick Picks + Shameless Plugs. Sick Picks Andrew: Nix Mini 3, Asynchronous Programming in Rust. Shameless Plugs Andrew: 1Password. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons. Show Notes 00:00 Welcome to Syntax! 01:48 Brought to you by Sentry.io. 02:53 Nav / Mobile Nav. 08:43 Header. 10:41 Toast message. Wes’ TikTok Demo. 18:51 Portal. 21:02 Drawer. 22:56 Auth forms. 28:49 Dialog / Modal. 31:30 Whats the difference between popover and dialog? 33:48 Confirm. Scott’s YouSureAboutThat. 35:46 Bonus tip on becoming a better developer. 36:29 Admin menu. Level Up Tutorials - Side Menu Demo. 37:51 Scott’s package directory rant. 40:26 Mobile only / Desktop only. 40:41 Client only. 40:57 Admin table. 41:23 The dump. 43:39 Share / Social links. Syntax ShareWindow. 45:44 Markdown renderer. 45:58 Tabs. 46:08 User menu. 46:18 Icon. 48:07 Loading. 49:21 Drop-down menu. 49:31 Accordion. CSS Tricks - How to Animate the Details Element. 52:13 Sick Picks + Shameless Plugs. Sick Picks Scott: Supercommunicators. Wes: Klack, Mech Vibes. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In today’s episode, Scott and Wes dive into the final part of our JavaScript Promises series, covering deferred promises, fetch, flow control, concurrency with libraries like p-map and p-limit, and integrating TypeScript. Show Notes 00:00 Welcome to Syntax! 00:31 Brought to you by Sentry.io. 01:11 Deferred promises. Promise.withResolvers(). Wes’ TikTok. 06:10 Fetch. 09:04 Flow Control. 12:19 Concurrency, Throttling, Queuing. p-map. p-limit. 16:13 TypeScript and Promises. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project. Show Notes 00:00 Welcome to Syntax! 01:13 Brought to you by Sentry.io. 01:30 React Native is different than Cordova or other webview platforms. 04:18 Is there a ‘write once deploy everywhere’ aspect? 05:48 What are some React Native apps people may not realize? Mercari: Buying & Selling App. 07:13 What about Twitter + Facebook? 09:15 What is Expo? Is Expo Required? expo.dev. 13:27 Does it require a Mac to build an iOS app? 14:58 React Native and routing. Expo Router. 16:56 How do native apps normally work without a URL? 18:35 Can you use CSS with React Native? 20:27 Do React Native or Tamagui translate to CSS or Yoga? Tamagui. Yoga Layout. 21:02 React Native app styling on Android and iOS. 22:20 React Native’s own JavaScript engine. React Native Docs: Using Hermes. 23:30 Does Hermes have full JS support? 23:52 What is the new architecture of React Native? New Architecture. React Native JSI. 26:11 Avoiding translation errors. 27:24 Will this change break a lot of older React Native apps? 28:24 Has React Native improved update stability? 29:55 Where else can React Native run? 32:52 JavaScript on smart TVs and other smart devices. 33:57 Bridging to native APIs. Tauri. 37:14 State management. Redux.js. MobX State Tree. 39:30 What are some tools + libraries that you install on most projects? JestJS. Maestro. Detox. 41:58 How do you manage authentication? 44:55 Does Facebook use React Native? 47:15 Supper Club Questions. 50:29 Sick Picks + Shameless Plugs. Sick Picks Robin: Awesome Sock Club Wes’ X Post. Shameless Plugs Guest: Infinite Red, ChainReactConf, React Native Radio. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this Potluck episode of Syntax, Scott and Wes tackle community questions on handling overwork, teaching programming to family, and React’s Server Components. They also discuss quantifying accessibility improvements, choosing course platforms, and navigating professional growth in challenging workplaces. Show Notes 00:00 Welcome to Syntax! Thanks to Codeium. Syntax Episode 728 with Codeium. 01:37 Brought to you by Sentry.io. 02:38 Rewarding hard work with more work. 07:14 April Fools Episode. Syntax Episode 750 on April Fools. 09:03 Teaching programming to your family. Codespark. 15:56 React Server Components using JS runtime. 19:58 What happened to the intro music? 23:06 How can I quantify my work to the executive leadership team? 29:16 Should I host my own course website or use Udemy? 35:34 Navigating professional growth in toxic workplaces. 40:43 Getting started in native dev with tools like Tamagui. Syntax Episode 601 on Tamagui. 45:42 Cloudflare, what the heck is it? 50:49 Sick Picks + Shameless Plugs. You’re looking for this > https://sentry.shop/products/sentry-aint-broke-tee Sick Picks Scott: Folex. Wes: CalDigit TS4. Shameless Plugs Scott: Syntax on YouTube Wes: Ditto Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

We’re diving into part 2 of our 3-part series on Promises, focusing on error handling, aborts, and essential helper methods. We’ll explore how to manage errors effectively and improve performance with abort signals. Let’s get into it! Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io. 02:00 Cancelling promises. 05:16 Why would you reach for an abort signal? 06:26 Promise helpers. 07:04 Promise.all() vs Promise.allSettled(). 09:12 promiseInstance.finally() 09:26 Promise.any() and Promise.race() 12:08 Error handling strategies. Tuple await-to-js. Youtube - 5 Async + Await Error Handling Strategies. 17:30 Promise.race() example. 18:54 Static Promise.reject() and .resolve() methods. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects. Show Notes 00:00 Welcome to Syntax! 00:49 Brought to you by Sentry.io. 01:14 Introducing Brad Frost. Brad Frost.com. Atomic Design by Brad Frost. Brad (@brad_frost) on Twitter. Brad on LinkedIn. Brad on Mastodon. Brad on YouTube. Brad on GitHub. Brad Frost on CodePen. Big Medium | Design for What’s Next. 06:26 What is a design system? 11:48 How do you keep design and code in sync? Material Design. Shopify Polaris. Carbon Design System. The Design System Ecosystem | Brad Frost. 15:52 How do you use Shopify, WordPress, React, etc. through a design system? 19:19 How is CSS handled? 25:19 What’s the benefit of going all in on web components? 28:49 Do small startups need to worry about design systems? 32:36 How do design tokens work? 37:38 How do you deal with pushback on design systems? 41:05 How do you go outside the guidelines? 44:52 What system do you use for naming things? 49:06 How do you best document your language choices? 50:41 Supper Club questions. Thinking in Systems. Miriam Eric Suzanne. Zeldman on Web and Interaction Design. 57:12 Sick Picks + Shameless Plugs. Sick Picks Brad: Rubblebucket. Shameless Plugs Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Welcome to a special live edition of Syntax, recorded at React Miami! Join Scott and Wes as they dish out games galore, from Spot the Syntax Error to JS or NAYS, all while engaging with the audience in this lively session of coding camaraderie. Plus, who’s the better programmer? Stay tuned to find out! Show Notes 00:00 Welcome to Syntax! 00:54 Meet the Syntax team. 01:22 The plan for today. 02:38 .map() .filter() .reduce() 06:39 Syntax Error. 15:37 JS or NAYS. 21:08 Audience Stump’d. 24:51 Q + EH. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io. 02:03 What’s in the update? React 19 Beta Release Notes. 03:03 Actions + server actions. Syntax Episode 766. 04:54 Using server actions for a checkout. 06:11 Web components. Custom Elements Everywhere. 09:44 use() API. 10:31 With promises. 14:25 With context. 17:32 How does Zustand work? Stately.ai. X @DavidKPiano. 18:26 No more ForwardRef. 20:05 Ref cleanup. 20:43 Document metadata. 24:14 Upgrading to React 19. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality. Show Notes 00:00 Welcome to Syntax! 01:10 Brought to you by Sentry.io. 01:28 What is Overtone? 03:45 Can you explain the experience you’re trying to achieve? 06:43 What makes the best music app? Is it local first? 08:03 Is it best to create a local first app from the ground up? 10:31 What are the considerations when making a local first app? 13:04 What database are you using? Riffle. 16:12 How do you handle authentication? 19:15 Pick the tech based on the problem. 20:40 WASM for Non-JS or heavy lifting tasks. 24:39 How did you get SQLite running in the browser? 27:58 What about WA-SQLite, how does it compare to Riffle? TLDraw Make-real. 29:24 The backstory of Effect for TypeScript. 34:04 What actually is Effect? 39:32 Consolidating tools. 42:30 What’s a cool aspect of Effect that is often overlooked? 45:47 Building a web server with this. EffectTS RPC. 48:16 Will this ever get “Bluebirded”? 50:29 What about promises? Zio World 52:19 Sick Picks + Shameless Plugs. Sick Picks Johannes: Open Telemetry, Sentry Open Telemetry. Shameless Plugs Johannes: localfirst.fm. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications. Show Notes 00:00 Welcome to Syntax! Show 718 React Server Components. 02:04 Brought to you by Sentry.io. 03:04 What are form actions? GitHub Add React.useActionState PR 04:05 Almost entirely React. 04:31 What is the ‘server’ in Vanilla React? 06:10 Would React ever ship their own server? 07:29 What are actions? 08:34 Two huge benefits to actions. 08:45 Avoid custom useEffects or third party libraries. 09:17 Calling server code from the client without any APIS. 11:31 Some examples of actions. 12:54 Can these actions be done in a client component? 13:40 Where to use actions. 13:49 On a form submit. 15:30 In an event handler. 15:57 In a useEffect(). 17:13 How to actually use an action. React Hooks 17:30 useActionState() hook. 18:49 The state of the action. 19:35 The bound action. 19:46 The pending state. 23:16 useFormStatus() hook. 24:38 Action inputs. 26:13 Server vs client. 28:30 This is not PHP. 30:31 What is optimistic UI? 33:26 useOptimistic() hook. 37:02 Some final thoughts. 40:18 Sick Picks + Shameless Plugs. Sick Picks Good Follows: Alex Katt. Scott: Tiny Portable Ultra-Mini Air Pump. Wes: AVerMedia 4k Capture Card. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this 3-course series, Scott and Wes serve up some JavaScript Promises treats. In part 1, they unravel the concept of promises and delve into common examples of their usage, from creating and waiting on promises, to database queries and user permissions. Show Notes 00:00 Welcome to Syntax! 01:27 Brought to you by Sentry.io. 02:32 What is a promise? Promise mdn web docs. 03:27 Common examples of promises. 03:45 A fetch call to an API returns a promise. 05:54 A database query or Insert command 07:18 A request for user permissions. 07:37 A wait function. 08:08 Resolve or rejecting promises. 09:33 Creating promises. 09:46 New promise. 11:09 Promise.withResolvers(). 11:37 An async function. 14:34 Waiting on a promise. 15:09 .then(). 16:50 Await. 17:44 Why use one wait method over the other? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Scott and Wes as they delve into the fascinating realm of Biome.JS alongside Emanuele Stoppa, the mastermind behind it all. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Grab a seat at the table and find out! Show Notes 00:00 Welcome to Syntax! 00:10 Brought to you by Sentry.io. 01:49 Who is Emanuele Stoppa and what is Biome? 03:18 What happened to Rome? 05:49 Who’s paying for Biome to be developed? 07:28 How many people are working on Biome? 09:24 Why do we even need Biome? 11:38 Why are other tools so slow? 12:55 Cost of compute. 14:01 The cache management. 14:30 Why was the decision made to move to Rust? 16:35 The bigger the company, the pricier the compute. 19:49 How to get started with Biome. 23:08 Will Biome offer more features than Prettier? 24:12 Language support. 26:02 A language parser for every language? 27:45 Will plugins need to be written in Rust? GritQL GitHub. 31:25 Ezno, TypeScript Compiler. 33:13 Will we ever see a new TypeScript type-checker? 35:38 What are your thoughts on the types proposal? Proposal Type Annotations. 38:03 What does your average day look like? 41:10 What is your role at Astro? 41:46 What other languages do you know? 43:22 Biome VCS. 45:14 GitHub action setup. 47:04 Supper Club Questions. 47:09 What text editor, theme and font are you using? 48:26 What do you do to stay up to date? 48:54 Sick Picks & Shameless Plugs. Sick Picks Emanuele: Ripley IMDB, Netflix. Shameless Plugs Emanuele: Astro, BiomeJS. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you’ll gain invaluable insights and techniques to scrape (almost) any website with ease. Show Notes 00:00 Welcome to Syntax! 03:13 Brought to you by Sentry.io. 05:00 What is scraping? Socialblade. 08:01 Examples of past scrapers. Canadian Tire. 10:06 Cloud app downloader. 16:13 Other use cases. 16:58 Scraping 101. 17:28 Client Side. 19:08 Private API. Proxyman. 22:40 Server rendered. 23:27 Initial state. 24:57 What format is the data in? Google Puppeteer Extension. 27:08 Working with the DOM. 27:12 Linkedom npm package. 29:02 querySelector everything. 31:28 How to find the elements without classes. 34:08 Use XPath selectors for select by word. 34:53 Make them as flexible as you can. Classes change! 35:10 AI is good at this! 36:26 File downloading. 38:20 Working with protected routes. Proxyman. 40:41 Programatically retrieve authentication keys because they are short-lived. Fetch Cookie. 43:20 Deal-breakers. Mechanical Turk. 44:58 What happened with Amazon? Uniqlo Self-Checkout 46:42 Wes’ portable refrigerator utopia. 47:25 Sick Picks & Shameless Plugs. Sick Picks Scott: KeyboardCleanTool. Wes: Yabai. Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it. Show Notes 00:00 Welcome to Syntax! 01:57 Brought to you by Sentry.io. 02:26 What is okay to steal? 02:57 Color palettes. 03:14 Font stacks. 06:26 Type scales. Warp’s CSS Gradient Border. Sentry’s Date Picker. 08:52 General layout patterns. 10:39 General vibes. 11:20 What is NOT okay to steal? 11:26 Whole site designs. 13:32 Taking too many things from ‘what to steal’ list. 16:30 Text copy. Wes’ Parity Purchasing Power. 18:48 What we’ve had stolen + how it feels. 21:45 Where to find inspiration. 21:56 Code inspiration. CSS Scan Buttons. CSS Scan Box Shadows. Codrops. CodePen 25:18 Design inspiration. Bentro Grids. Dribble. Site Inspire. SaaS Landing Pages. One Page Love. Type Wolf. Mobbin. Syntax Newsletter. Hoverstat.es. Internet Gems. 32:48 UX inspiration. Good UI. The Component Gallery. Open UI. Nicely Done. 35:25 How to capture inspiration. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast. Show Notes 00:00 Welcome to Syntax! 01:17 Who is Ben Vinegar? Episode 434 with Ben. 02:21 Brought to you by Sentry.io. 04:00 Cloudflare analytics engine. Counterscale.dev. Episode 634 with Armin. 09:08 What is clickhouse? 11:01 Can Clickhouse be used for things outside of analytics tracking? 13:46 What kind of events are you able to track? 15:00 How do you assign values to track? Counterscale Schema. 18:40 Data type limitations. 19:55 The troubles with sampling data. 23:57 Sample intervals. 24:24 Pricing for these services. 25:34 How it actually runs. 27:31 Infrastructure costs and pricing models. 30:19 Running production apps in Cloudflare. 31:49 Cloudflare and HonoJS. 32:47 One year with Sentry and Ben’s role with Syntax. Episode 600 with David. 39:33 How does it feel going from a software project to a media project? Syntax Team. 43:00 How do you sell Syntax to Sentry? 48:37 Sick Picks & Shameless Plugs Sick Picks Ben: Randy’s YouTube, Boom. Shameless Plugs Ben: Counterscale.dev Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game. Show Notes 00:00 Welcome to Syntax! 00:47 Brought to you by Sentry.io. 01:44 A recording bug. 03:18 VSCode versions. 05:59 Tabs or no tabs. 10:32 Navigation tips. 11:35 Mouse and trackpad input. 13:43 Move, select and expand by 19:07 Interface tips. 19:17 Sidebars. 24:23 Sticky headers. 26:21 Activity bar. 30:30 Show or hide? 31:35 Profiles. 32:43 Keyboard Shortcuts. 32:49 Renaming. 34:32 Extensions. 34:45 Text pastry. 36:43 Better comments. 39:03 Auto rename tag. 40:02 Change case. 40:25 Permute lines. 41:26 File utils. 43:20 Sort JSON objects. 43:50 SQLite viewer. 44:29 Spell checker. 45:42 APC. 49:19 Themes. Syntax Theme 53:05 Final tricks. Log Wrapper 57:44 What about the AI stuff? 01:00:10 Sick Picks & Shameless Plugs. Sick Picks Scott: Flicker Free Ultra Definition Phillips Bulbs. Wes: Clear Shoe Box Organizers. Shameless Plugs Scott: Syntax Newsletter. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights! Show Notes 00:00 Welcome to Syntax! 02:16 Brought to you by Sentry.io. 03:14 JavaScript Services. 03:43 Valtown. 05:44 Observable. 06:35 Notebooks. 08:23 Deno Juypter Notebooks. 09:51 Svelte Repl. 10:32 Playgrounds: TypeScript, Tailwind, etc… 11:05 CSS Services. 11:10 CodePen. 13:14 Full stack services. 13:47 Your own stack. Hot Tips & Cool Treats. Wes’s Hot Tips. Scott’s Cool Treats. 21:01 Bun file routing. 24:25 Tooling and tips. 26:30 Database. 26:51 Write to a file. 27:40 LowDB. 29:00 SQLite + Drizzle. 29:40 Google Sheets. 30:06 Sheet DB. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. Show Notes 00:00 Welcome to Syntax! 00:47 Brought to you by Sentry.io. 02:49 What is Shoelace? 07:21 What is Font Awesome? 08:07 Font Awesome is getting into Web Components? 11:35 What is Shoelace’s relationship with Web Awesome? 13:33 Is the idea to make it quick to get up and running? 15:46 What is the autoloader? 16:29 Where does Web Awesome fit in the ecosystem? 18:13 What does the styling game look like? 20:33 What is Part in CSS? CSS Part mdn web docs 22:06 The reason we’re so stoked with Web Components. 23:32 Custom elements are a natural progression. 24:51 What are your thoughts on Open UI initiatives? Floating UI Close Watcher Can I Use 27:40 Wes’ escape key conundrum. 30:21 A bug on the Syntax site. 31:19 Let’s talk about Kickstarter. 35:24 Do you know what premium inputs will be available in Web Awesome? 36:12 Rich text editor. 40:18 Setting goals. 41:48 Kickstarter giveaways. 42:47 Have you tried drag and drop? Pragmatic Drag and Drop 44:57 The layout component. 48:50 What are your favorite components? 50:29 Sick Picks + Shameless Plugs. Sick Picks Konnor: Enhance.dev, Extism.org Cory: Lit.dev Shameless Plugs Cory: Kickstarter Konnor: Everyone involved in open UI Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home. Show Notes 00:00 Welcome to Syntax! 00:51 Brought to you by Sentry.io. 01:17 When should I use Light DOM or Shadow DOM? 03:43 Do you know of any good tools for extracting data/content from Markup/HTML? LinkeDOM on GitHub 08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024. LocalFirst.fm MeteorJS UI Updates 15:05 Please get the Goodhertz creator on the pod! Would be a great show. Goodhertz Audio Software 16:34 Effects that involve the JavaScript ‘wheel’ event. Runway.com GSAP Animate Anything CSS Scroll-Driven Animations 23:15 Best tool for rapidly creating UI from the ground up. Episode 751 Thinkmill.com 27:44 Wes, what’s with your frame rate? Frame Rate Testing Results on X 32:31 Is there any way to host a whole website setting on my PC at home? CJ and Self-Host 101 Hetzner.com Cloudflare Docs Create a Tunnel 36:52 Offline functionality like saving data and syncing data to database? Episode 739 Local-First Web Development Syntax Side Dish Explainer Playlist 39:41 Creating a GPT-like tool that can listen to long audio files. OpenAI Speech to Text Insanely Fast Whisper Deepgram 43:51 Sick Picks. Sick Picks Scott: Hair Powder Wes: Mini Grease Gun Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools. Show Notes 00:00 Welcome to Syntax! 01:24 Brought to you by Sentry.io 03:00 CSS Is getting Functions and Mixins! CSS Mixins and Functions Explainer CSS Working Group Discussion 06:19 Functions and mixins, how are they different? 07:26 Don’t get hung up on the syntax, or maybe do. 09:12 CSS Functions. 12:02 Some use-cases. 15:58 CSS Mixins. 16:31 Tailwind-like classes. 17:53 Tailwind-like arbitrary syntax. 20:08 Fluid typography. 21:13 Let’s talk about logic. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization. Show Notes 00:00 Welcome to Syntax! 00:32 Who is Oliver Dunk? 02:00 Brought to you by Sentry. 03:17 Manifest V3. 08:59 How many rules can you add? 09:56 What even is a rule? 10:52 Is Google trying to kill ad blockers? 13:56 What are the bad guys doing with Chrome extensions? 15:17 Can a browser extension access HTTP-only cookies? 16:06 Is Chrome reviewing all of these extensions? 19:06 Is there a way to side-step Google’s review process? Reddit Thread, The real threat of Manifest V3 20:32 Do you see the negative chatter? 21:18 Service workers - how do do you access the DOM? 23:32 Do you think we’ll see more DOM APIs in service workers? 25:58 Do you have a favorite Chrome extension? 28:33 Has Google ever explored something comparable to Boost? SidePanel 33:09 Let’s talk about the development stack. 35:54 1Password and Chrome. 38:39 What is the best way to debug an extension? YouTube Chrome for Developers 40:33 Manifest V3 and the web request blocking API. 41:57 Known tracking payloads. 44:04 Do you think there is a path forward that makes ad-block developers happy? 44:45 Do you run an ad blocker? 45:20 Whitelisting and opt-ins. 46:38 What’s your tech setup? 47:18 What do you do to stay up to date? 47:51 Sick Picks + Shameless Plugs. 51:47 Wait, is Safari adopting V3 as well? Sick Picks Oliver: Defunctland YouTube, LEMMiNO YouTube Shameless Plugs Oliver: Chrome Extensions Getting Started, WebExtension Playground Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career. Show Notes 00:00 Welcome to Syntax! 00:17 How can a front-end developer advance in their career? 01:10 Brought to you by Sentry. 01:30 Syntax newsletter. Snack Pack 02:02 How do you get better at being a developer? 02:22 Asking questions. 08:09 Get your hands dirty. Hot Tips, Cool Treats 14:07 Share what you know. 17:35 Target your skills for what is needed. Ryan Carniato Tweet Episode 577 Justin Fagnani Tweet Episode 595 21:12 Get out of your comfort zone. 26:55 Getting a better job. 27:27 Understand the stakeholders. 29:18 Find the metric the business cares about and do that. 30:01 Make an impression as being the person that gets things done fast and reliably. 31:47 Improve communications. 35:04 Be the person they want to have in meetings. 37:44 Use systems and tools to help your deficiencies. 39:01 Dress to impress. 39:32 Care. 39:40 Cut the cynicism. Energy Vampire 42:16 Don’t put bad stuff out into the world publicly. 44:29 Get your camera + mic dialed in. 46:23 Leveling up at life. 46:32 Take care of your shit. 47:40 Exercise. Episode 748 47:57 Eat well. 48:22 Sleep as much as you can. 48:26 Clean your workspace. 49:17 Learn new skills. 49:31 Take care of yourself. Habit Path 54:09 Sick Picks. Sick Picks Scott: Zeiss Lens Care Pack Wes: Woosh Screen Cleaner Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching. Show Notes 00:00 Welcome to Syntax! 01:22 Syntax is on YouTube. 02:16 Let’s talk about the cache problem. 03:33 User-specific data and caching security. 06:27 Why might this pop up? 06:29 Marketing A/B testing - cookie based. 06:55 User-selected features - such as themes. 06:58 Language or geo-based items - accept language. 07:11 Images - WebP for some browsers, jpg for others. 07:45 JSON/HTML based on accept header. 08:17 Different encoding. 08:26 Content negotiation. 08:54 The solutions. 09:04 Provide different URLs/Query parameter. 11:19 Don’t cache the page, cache the data based on query. 15:01 Implement a “Cache Key” - one render for every option. Netlify Fastly Cloudflare 18:17 Use edge logic. 19:52 Just do it client-side. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development. Show Notes 00:00 Welcome to Syntax! 00:48 Who is Corbin Crutchley? 02:08 Brought to you by Sentry.io. 02:32 Hilton, like the hotel? 05:57 What is the best framework? 07:23 How do you compare these frameworks? 10:00 Do you feel like the metaframeworks are comparable? 11:02 Exciting announcements from ng-conf? 11:42 Are Wiz and Angular merging? 14:17 Angular signals and Vue comparison. PreactJS Signals 17:53 Adding signals to vanilla JavaScript and browsers. 21:02 What is derived state? 23:11 How can we store state within these different frameworks? 24:37 Passing children. 26:40 Which has the best implementation for passing children? 28:52 What’s the approach for building framework agnostic components? TanStack Store 30:31 How much of it is framework specific? 31:35 Headless or DOM-based? 32:48 What are the best practices for writing this? 35:28 What’s the biggest framework pain point? 36:21 Is there a language that requires significantly more code? 38:52 What about Web Components? 39:58 Your book is free? Framework Field Guide Shout-out Eduardo Pratti and Kevin Aguilar. 42:42 What’s the process of writing a book like this? 45:44 Not a physical book? 46:17 Walk us through the tech stack. 48:27 Supper Club Questions. 48:33 What text editor, theme and font do you use? 49:53 What terminal and shell do you use? 50:19 How do you stay up to date? 53:39 Do you have advice for beginners? 55:26 Sick Picks + Shameless Plugs. Sick Picks Corbin: Shiki Syntax Highlighter Shameless Plugs Corbin: Framework Field Guide Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game. Show Notes 00:00 Welcome to Syntax! 02:39 We’re on YouTube. 03:14 The four categories of UI libraries or frameworks. 03:46 What does a UI component need to do? 04:14 Must be functional. 06:20 They must fit styling. 06:33 They must be accessible. 08:09 “Internationalizationable.” 09:29 They must handle theming and variants. 10:05 A few common UI components. 10:14 Date Pickers. 12:10 Dropdowns. 13:21 Toast message. Svelte French Toast 15:11 Some honorable mentions. 16:10 Headless components. 18:54 React Aria. Behavior, Accessibility, Internationalization 19:34 Radix UI Primitives. 20:16 Downshift JS. 21:29 Tanstack Table and Forms. 26:00 Unstyled components. 28:04 Shoelace. 32:47 React Aria Components. 33:00 Headless UI. 33:04 Radix UI. 37:12 Base UI. 38:23 What’s up with Google’s design? 40:22 Styled Starters. React Aria Components Starter ShadCN Tailwind Catalyst MeltUI 47:50 What is the process for overriding with custom elements. 51:10 UI Kits and Design Systems. 53:06 Some things to consider. JS Nation 55:41 A few more options to consider. Pigment CSS Base UI Shoelace BaseLayer JollyUI DraftUI Radix UI PenguinUI Tailwind CSS TailwindUI VerveUI DaisyUI ChakraUI Flowbite FloatingUI Downshift JS Mantine 59:02 Sick Picks & Shameless Plugs. Sick Picks Wes: Battery Daddy Scott: Lazy Susan, Rechargeable Batteries, Charger Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year. Show Notes 00:00 Welcome to Syntax! 01:16 Brought to you by Sentry.io. 02:17 jQuery 1.2 released! 07:38 jQuery Mobile. 09:34 Skeuomorphism. 10:25 How do you slice up your .PSDs? Slicy By MacRabbit 12:34 Cufon, new font method. 14:06 CSS rounded corners. CSS3Please 15:17 Coda Tip. 16:48 Top 5 CoffeeScript Features. 18:44 Conference Talks to Spotlight. BatmanJS, your new favorite JavaScript superhero 20:35 WordPress 2.3! 21:15 PHP 5.2.0 PHP 5.2.0 Release Announcement 21:53 Sponsored by Media Temple. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites. Show Notes 00:00 Welcome to Syntax! 00:59 Who is Anne Thomas? 02:30 Who is Trudy MacNabb? 04:06 Shopify themes, how does one build a theme? 05:34 Do you have enough control with LiquidJS? 07:52 Changing components of a liquid template. 08:58 LiquidJS improving their dev tools. 09:29 LiquidJS email marketing. 10:32 Can you make your own LiquidJS methods? Too Many Tabs 11:34 How would you create a theme from scratch using modern tools? 13:30 What about local dev and live reload? Shopify Tools CLI 15:17 Is Shopify improving? 17:13 What do you hate about Shopify themes? Shopify Tools Theme Kit 18:59 Have you used Hydrogen? Shopify Hydrogen 20:09 Headless has sacrifices. 22:02 Are people building full websites in Shopify? 23:56 Apps and integrations. 25:56 Are people creating businesses around these integrations? 29:16 What are design packs? 31:26 Do you run your own servers? 31:57 How does billing work with clients? 33:18 Apps being ‘Sherlocked’. ‘Sherlocking’ Explained 35:21 Where is the data stored? 36:35 Can you make a custom UI? 38:40 What are the downsides of building apps on Shopify? 39:17 Are you expected to maintain versions? 40:46 Do you manage all the support independently? 42:01 How do you match with their existing themes? 43:54 What are the most popular blocks? 45:17 Does Shopify provide bundlers or compilers? 46:47 Shopify moving to blocks. 47:38 Living as a digital nomad. Syntax Episode 586 on Nomad Developing 49:48 A new app Anne and Trudy launched. 51:35 Limited by block size. 54:08 Sick Picks + Shameless Plugs. Sick Picks Trudy: Bar of Shampoo Anne: Alie Ward Ologies Podcast Shameless Plugs Trudy: 25% off using SYNTAX25 at Design Packs Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements. Show Notes 00:00 Welcome to Syntax! 01:14 Brought to you by Sentry.io. 03:10 A very quick disclaimer. 03:32 A brief view of our fitness history. 06:19 Why is fitness important for developers? 09:12 Setting your goals. 13:06 Getting started with fitness. 13:13 Body-weight. 13:58 Stretching. 16:47 Fun activities that don’t feel like workouts. 17:48 Lifting weights. Stronglifts StartingStrength 25:47 Home gym gear. Rogue Stall Bar 37:14 Fitness programs. 40:53 I guess we have to talk about diet. MacroFactorApp 46:37 Motivation. 47:42 Supplements. BulkSupplements.com Creatine 51:23 Sick Picks. Sick Picks Wes: Wikday Pull Up Bands Scott: Booty Bands Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills! Show Notes 00:00 Welcome to Syntax! 00:41 Syntax on YouTube. 01:28 What is middleware? 05:04 Some real-world examples of middleware. 05:10 Authentication. 07:44 Redirecting users to a specific instance. 08:28 Logging + statistics. 09:41 Debugging. 10:00 Timers. 10:46 A/B testing. 11:59 Error handling + logging. 12:23 Caching. 13:02 Multi-tenant applications. 15:08 Where does it run? 18:07 What are the limitations? 21:52 Next.js middleware is one file only. NextJS Middleware 23:35 Sveltekit solution. Sveltekit Hooks 24:31 Connect style. Fastify Express Fastify Middle 25:28 One last thing, NPM Installing. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work. Show Notes 00:00 Welcome to Syntax! 01:55 Should developers know how to run their own servers? 04:57 What is “bare metal”? 11:49 What the hell is Kubernetes? 12:25 Why would somebody need Kubernetes? 15:37 Using Kubernetes to spin up different instances on cloud providers. etcd 16:43 Kubernetes managing traffic spikes. 18:46 How much downtime can you handle? 22:11 What exactly is a container? 24:06 What containers do you prefer? Docker Containerd 25:28 Some additional terminology. OCI Open Container Initiative 26:43 What about WASM? WASM WebAssembly 29:31 Building a Docker container. 31:11 Why would someone want to use a WebAssembly container? 32:12 Are people shipping this technology? 33:36 What functions would you put in WASM? 36:57 How does someone make a WASM image? 39:22 A little more about Spin. Fermyon Spin 39:56 What type of processors are used in these servers? 42:27 What are home servers running on? Turning Pi 2 Daniel Mangum Universal Blue 46:40 How should someone get started with Kubernetes? Kubernetes.io Rawkode YouTube Kubesimplify Learnk8s 48:51 Infrastructure as code. CDK for Terraform GraalVM 55:19 Sick Picks & Shameless Plugs. Sick Picks David: Golem.cloud Restate.dev Shameless Plugs David: Rawkode YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers. Show Notes 00:00 Welcome to Syntax! 01:37 Syntax is on YouTube. 02:09 Do we really need tooling? 04:02 Popular tools are predominantly plug and play. 06:15 What can tooling do for us? 07:16 The tools in today’s workflow. 07:21 Linters. 11:29 Compilers and transpilers. 13:30 Formatters. 16:18 Tokenizers and Parsers. 16:46 Bundlers. 17:59 Macros. 20:26 The new tools in the space. 20:47 Biome, one toolchain for your web project. 28:27 Oxc, the JavaScript oxidation compiler. 33:01 Deno, code formatting. 34:13 ESBuild, an extremely fast bundler for the web. 34:37 Rolldown, fast Rust-based bundler for JavaScript. 38:34 Ezno, TypeScript type checker. 40:24 UnJS, Unleash JavaScript’s Potential. 41:45 Lightning CSS, CSS parser, transformer, bundler, and minifier. 42:31 Is JavaScript good enough to handle these tools? 43:26 Sick Picks + Shameless Plugs. Sick Picks Scott: Shinobi-Geddon: The 1980s Ninja Craze Wes: Bachans Japanese Barbecue Sauce Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology. Show Notes 00:00 Welcome to Syntax! 01:19 Brought to you by Sentry.io. 02:20 Easily reproducible environments. 02:57 Containerization technology. Containerization OS-level Virtualization 04:42 Docker is brand name containerization, there are others. Podman Containerd Buildah LXD 05:26 Why would a web developer want to use Docker? 08:19 How do you get started with Docker? Download Docker Desktop Start With Docs Docker 101 09:14 How does Docker work? Docker Sentry Docker Registry Docker Layers 16:46 Adding Docker to an existing project. SvelteKit Dockerfile Node.js / Express CLI Runner Twitchbot Development PHP / Mongodb Dockerfile 21:37 What is Docker Compose? Docker Compose 22:50 What are some ‘gotchas’ or things to look out for when setting up a project? Coding Garden Example Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads CJ: X Instagram Tiktok TwitchTV YouTube Randy: X Instagram YouTube Threads

Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, Sentry.io, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director. Show Notes 00:00 Welcome to Syntax! 01:06 Who is Cameron McEfee? 03:00 What does a Creative Director do? 09:47 In a creative and collaborative field, how do you deal with hurt feelings? 12:32 Experiences at GitHub (404/500 pages). 15:35 Who is responsible for all the Octocat variations? GitHub Octodex 17:18 Did you ever get in trouble for using famous IP? 21:07 Working at Sentry.io. 25:08 What is your illustration process? 27:04 What is GuideGuide? GuideGuide Moo Tokenizer/Lexer 33:13 Grid Notation. 36:10 Can ‘good colors’ be calculated, can good design be math’d? 40:46 What was the process of building your own plugin? 43:37 Adding guides with JavaScript APIs. 44:44 Recreating application UIs within plugins. GoodHertz 50:22 How are you architecting these plugins? 52:44 Sick Picks & Shameless Plugs. Sick Picks Cameron: Ember Mug Waterparks Spotify Execute Program Shameless Plugs Cameron: GuideGuide 50% off Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans. Show Notes 00:00 Welcome to Syntax! 01:20 Brought to you by Sentry.io. 02:16 What book changed your life? Whatever you think, think the opposite It’s not how good you are, it’s how good you want to be Crucial Conversations thanks @benvinegar 04:58 What are the web development fundamentals for beginners? Command Line Power User 08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? Chris Coyer’s Post 11:51 Advice for migrating an existing React project to TypeScript. 20:38 Countdown apps, performance vs accuracy. 25:19 Are you listening to podcasts? Which ones? 31:46 With AI on the rise, will free-tier plans become a thing of the past? Coolify Syntax 730: Own Your Own Paas 35:59 What is SemVer anyway? semver.org npmjs TypeScript on Semantic Versioning 40:14 A question on ergonomics, home office aesthetics and productivity. 47:59 Do you ever stop to consider VueJS in 2024? Why or why not? unjs.io 52:12 Sick Picks + Shameless Plugs. Sick Picks Scott: Ellenos Yogurt CJ: Flat Iron Pepper Shameless Plugs Syntax.fm YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records. Show Notes 00:00 Welcome to Syntax! TypeScript 01:05 Brought to you by Sentry.io. 03:20 How do you combine string literal types? Template Literal Types 06:34 What is a TypeScript Generic and why would you use one? TypeScript Generics 08:12 How do you write a conditional type? TypeScript Conditional Types 09:58 Generating TypeScript type from a function. Stricter Generators 14:09 How do d.ts files work? Module .d.ts 16:25 Name one difference between a type and an interface. Types vs Interfaces 19:15 What is a tripple-slash directive and why would you use them? Tripple-Slash Directives 20:52 What is a TypeScript record and what is it used for? Utility Types Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning. Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io 01:05 Who is Xenova? 02:08 What is Hugging Face? 03:29 What is Transformers.js? 06:16 How was the library developed? SponsorBlock 09:04 How is it able to run? 10:09 Do they have to run in Python and how does Onnx work? Onnx.ai Hugging Face Optimum 14:19 What are some things you can do with this tech? 16:15 Vision tools. 17:38 This is actually running locally. 18:35 Doodle Dash 21:09 They currently run on CPU, what is required to make it run on GPU? 24:44 Can you run in JavaScript? 28:32 How it works with image vectors. 34:23 Why would people want to run it in another language? 35:55 Resizing images in the browser instead of on the server. 38:55 Applications distributed on the web vs running locally. 43:54 Electron has Node and Chrome, where would you run Transformers.js? 44:32 The API of Transformers.js 46:30 Object Detection. Semantic Image Search Client Real-Time Object Detection Background Removal Tool 48:33 What is the easiest way to get started? 51:26 Real-time speech recognition on the horizon? 52:08 Will we ever be able to run Stable Diffusion via JavaScript? 56:10 The Web LLM. 57:22 Practical applications for YouTube. 59:39 What we want to build for Syntax.fm. 01:06:43 Mean pooling, why it’s necessary. 01:09:30 Stopping YouTube spam comments. 01:10:34 K-Means Clustering. Text Clustering 01:13:49 Quantization. 01:17:35 Sick Picks + Shameless Plugs. Sick Picks Xeonva: WebGPU Shameless Plugs Xenova: Xenova on X Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights. Show Notes 00:00 Welcome to Syntax! 03:18 Brought to you by Sentry.io. 04:08 What is LoFi? localfirst.dev 05:02 The Seven Ideals for Local-first. 05:29 1: No Spinners. 06:48 2: Your work is not trapped on one device. 07:56 3: The network is optional. 08:50 4: Seamless collaboration with your colleagues. 09:35 Oops, we for got to read 5: The Long Now. 09:37 6: Security and privacy by default. 09:45 7: You retain ultimate ownership and control. Actual Budget Finance App Ink & Switch 13:01 Sounds great, let’s go! Not so fast, this stuff is hard. 14:07 The technology involved. 14:30 CRDT (Conflict-free Replicated Data Types). Wikipedia Definition James Long dotJS 2019 dotconfrences 17:48 How does it prioritize conflict resolutions? 19:36 Websockets. 20:17 IndexedDB + SQLite. 21:23 Service Workers. 22:16 The software involved. 22:24 Replicache. 24:48 YJS. 25:06 Electric SQL. 25:51 The most basic LoFi application. 31:26 Some bigger concepts. 32:34 Answering some common questions. 35:19 Some real-world examples of LoFi. Habit Path by Scott Tolinski 37:18 What about Apple PWA nonsense? 38:20 This seems similar to real-time software and multiplayer. 38:47 Sounds like too much work. Triplit Fullstack Database Electric SQL Evolu 40:46 Some useful links. Local-First Web Development Local-First Lo.fi YouTube Local-First Ink & Switch Local-First Reddit Syntax GitHub Local-First 43:30 Sick Picks + Shameless Plugs. Sick Picks Wes: Dresscode.dev Scott: Monarch Money Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Process is important. This show is dedicated to examples of non-developer tasks that can be improved by coding scripts. Join Scott and Wes for a deep dive into automation magic. Show Notes 00:00 Welcome to Syntax! 02:11 Brought to you by Sentry.io. 03:02 FFmpeg, a tool for video producers. FFmpeg FFprobe 06:35 Markdown validation. Syntax Markdown Validation 09:21 AI timestamps for inform editing process. Episode 456 Transcript 12:19 Generating clips for social media. 13:31 YouTube find and replace tool. YouTube Find & Replace - work in progress 15:03 What other scripts can you create? 16:17 Packaging a tool for a non-developer to use. 16:54 Apple Scripts 17:45 Stand-alone website. 19:25 Script Kit: Shortcut to Everything 20:19 Other ways to run scripts. ZX Dax 22:05 Get in touch with your tips. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Get ready to learn all about the JSR package registry with Wes, Scott, and special guest Luca Casonato of Deno, as they discuss its benefits, share insights on when to use it, and teasing some secret features that promise to enhance your coding journey. Show Notes 00:00 Welcome to Syntax! 00:37 Brought to you by sentry.io. 00:51 Who is Luca Casonato? 01:18 Why do we need another package registry? Wes Bos Tweet 04:35 Is it ESM only? 06:08 What exactly is JSR? 07:22 How do you install things from this registry? 09:38 NPM specifier in NodeJS? 12:18 Why can’t we just fix NPM? 14:28 When you make things easier, people make cooler stuff. 17:49 A little bit about auto-documentation. 21:18 Auto-Types. 22:33 Can’t you just put TypeScript files on an NPM? 24:04 Package Provenance. NPM Package Provenance 25:14 Does JSR have any plans for scanning dependencies? 27:56 GitHub action integration. 30:08 Does JSR replace url imports in Deno? Import Maps, Ep.596 32:15 What about publishing JSX, TSX, CSS, WASM, etc? 34:16 What are Slow Types? 36:34 Do you think we’ll ever see another implementation of a TypeScript type checker? 38:23 Types as comments or adding types to JavaScript. 40:10 What is the anticipated timeline? 41:52 Are there any parts of TypeScript that you don’t like? 43:32 What about when TypeScript breaks? 46:20 JSR community funding. 49:39 Are you planning on pre-registering popular names? 52:26 Super secret new features! 56:39 Sick Picks + Shameless Plugs. Sick Picks Luca: Hono Shameless Plugs Luca: jsr.io Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. 04:39 What got you into web development? 09:23 Does a degree in computer sciences help you in your day to day as a web developer? Bell Curve Meme 11:39 Wes downloads every single .com domain name. 15:19 What was your very first web development job? 18:12 How did you go from C# to websites? 21:12 What is the worst thing you’ve had to do as a developer? 22:31 What are some of your favorite projects? Is It New Years Day Dung Hero 26:32 What tech are you into right now? What inspires you? 27:52 Why do you like experimenting with new technologies? 29:39 Hono v4.0.5. 30:29 HTMZ 31:44 If you were to build a startup today, what would your stack be? 32:39 What’s your tech setup? Coding Garden GitHub RK Royal Kludge Keyboard 37:51 What got you into live-streaming? 40:13 Why do you use a blue screen? 41:19 What’s your philosophy on teaching? Bloom’s Taxonomy 43:56 What are your non-developer hobbies? CJ Skateboarding with Syntax deck CJ’s floofy doggo, Pig Sony VX10000 Sony Mavica 51:00 Sick Picks + Shameless Plugs. Sick Picks CJ: Ergonomics, More on Ergonomics Scott: Project Farm YouTube trash bag comparison Wes: Kitchy Pizza Cutter Wheel Shameless Plugs CJ: Coding Garden Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes shares the story of how the Taliban stole his .af domain. Scott and Wes discuss top-level domain (TLD) best practices, how to find unique custom domain names for your website, and how to avoid having yours stolen. Show Notes 00:00 Welcome to Syntax! 00:16 Brought to you by Sentry.io 01:11 The story of how the Taliban stole my domain. 05:10 When you purchase a domain, does that country receive the registration fee? Country Code Top-Level Domain Infrastructure Top-Level Domain Generic Top-Level Domain Sponsored Top-Level Domain 07:29 Notion lost their .so domain. Notion 09:18 .ai domain names. 09:53 Other popular TLD options. tolin.ski wes.io 12:05 What are the best TLDs? 13:18 iwantmyname Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes welcome HTMX creator Carson Gross to discuss the versatile applications and optimal scenarios for using HTMX, alongside insights into its creation and evolution. Join us as we explore the future prospects and improvements as we look towards HTMX 2.0. Show Notes 00:00 Welcome to Syntax! 00:52 Brought to you by Sentry.io 02:22 Who is Carson Gross? BigSkySoftware GitHub BigSkySoftware 03:53 What exactly is HTMX? htmx.org htmx.org/examples 07:04 What made you want to create something like HTMX? intercooler.js 10:01 Would HTML look more like HTMX if we were to rebuild it today? 12:54 Isn’t HTMX a step backward into old-school AJAX? 16:09 When would you avoid using HTMX? 17:56 Does HTMX put an unnecessary load on the server? 21:46 What are your thoughts on rendering everything on the server? 26:29 What is your favorite stack? 28:49 Things that are lost moving to the JavaScript framework world. 30:16 HTMX coupling your front end and back end. 32:28 How do you feel about web components? 33:40 What are the big templating engines and your top pick? HTMX Essays 36:33 Object-oriented HTML. 37:38 Is there an offline story or a “local-first” story for HTMX? 38:44 What does the future of HTMX look like given its rise in popularity? 40:03 HTMX and X (Twitter). Syntax Show 726 HTMX on X 42:30 The Microsoft story. 45:26 Carson’s thoughts on de-escalating the language around HTMX. 47:44 Sick Picks + Shameless Plugs. Sick Picks Carson: AlpineJS, Datastar Shameless Plugs Carson: Hypermedia Systems, HTMX Swag Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval. Show Notes 00:00 Welcome to Syntax! 01:35 Brought to you by Sentry.io. 02:49 I have over 100,000 user images on Cloudinary. How do I migrate to another service? Cloudflare-Cloudinary Proxy 07:27 Switching from Mac to PC. Figma, DaVinci Resolve 12:32 What’s your take on the Safari 17.4 PWA removal debacle for EU users? Bug Report Fullscreen API Bug Report 19:45 Is there any clear front-runner when it comes to monorepo tools? 23:44 Some big web apps have a div relatively high in the DOM with a class like “scroll-container” or “cursor-events”, why is that? 32:15 Is ChatGPT Plus worth it? I’m trying to avoid death by 1000 subscriptions. ElevenLabs 37:47 Performance vs accuracy when working with timers. 40:37 How do you update the dependencies to work with a current version of Node? Also, if you are building from scratch, how do you determine what dependencies to use? Syntax show 425: Updating Project Dependencies 45:52 Clarification on the browser blocking. Mozilla’s vision for Firefox MV3 49:19 Problems when working with JavaScript’s new Date(). 54:27 Sick Picks + Shameless Plugs. Sick Picks Scott: LED Flashlight Shameless Plugs Wes: Syntax YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott explore the web standards and email authentication methods that keep your email from going to spam; DMARC, SPF and DKIM. If you send email via a custom domain name, you need to listen to this! Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. 02:08 What exactly are SPF, DKIM, and DMARC? 02:53 Different ways that you may want to send email. 03:23 Transactional emails. Resend, email for developers 05:07 Email marketing. 05:47 Anything else that sends email on your behalf. 07:13 SPF (Sender Policy Framework). Postmark defines SPF Postmark SPF in 5 Minutes 08:34 You can only have one SPF record. 10:18 DKIM (DomainKeys Identified Mail). Postmark defines DKIM 13:39 DMARC (Domain-based Message Authentication, Reporting, and Conformance). Convertkit 16:38 RUA Reporting. 18:03 How to set up reporting. 21:08 Does emails marked as spam hurt the IP that sends them? 22:18 Other things to consider. Special thanks to David Flanagan for the help on this! @rawkode Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes are joined by security expert, Alex Sexton of Stripe to cover all things: client security, XSS, attack vectors, and CSP (content security policy). Show Notes 00:00 Welcome to Syntax! 00:31 Brought to you by Sentry.io. 00:57 Who is Alex Sexton? 04:44 Stripe dashboard is a work of art. 05:08 Tell us about the design system. React Aria 08:59 Who develops the iOS app? 09:50 Stripe’s CSP (content security policy). 12:50 What even is a content security policy? Content Security Policy explanation 13:57 Douglas Crockford of Yahoo on security. Douglas on GitHub 15:13 Security philosophy. 16:59 What about inline styles and inline JavaScript? 19:41 How do we safely set inline styles from JS? 20:20 Setting up with meta tags. 22:52 What are common situations that require security exceptions? 26:24 Potential damage with inline style tags. 32:45 Looping vulnerabilities. 36:32 What about JavaScript injection? 37:09 Myspace Samy Worm. Myspace Samy Worm Wiki Sentry.io Security Policy Reporting 42:02 Does a CSP stop code from running in the console? 43:28 What are some general security best practices? 46:35 Strategies for rolling out a CSP. 51:49 Final tip, Strict Dynamic. Strict Dynamic 56:36 Where does the CSP live within Stripe? Original Black Friday story 59:35 One last story. 01:01:20 Sick Picks + Shameless Plugs Sick Picks + Shameless Plugs Alex: Wes Bos’ Instagram Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes talk about the benefits of owning your own PaaS (platform as a service), the main alternatives in the space, and ways to make passion projects more financially viable. Show Notes 00:00 Welcome to Syntax! 01:12 Brought to you by Sentry.io. 01:56 What is a PaaS? NGINX 04:21 Challenges with payment structures. Render 07:02 What is Kubernetes? Kubernetes 07:51 What are the differences between Kubernetes and Docker? Docker Swarm 09:15 Reasons to own your own PaaS. Nelify Bluehost 15:05 “Pokémon or Web Service” Original 150 Pokémon Characters 16:49 The players and their pros and cons. 18:51 Where can you host these services? 19:47 Kubero. Kubero 21:50 Coolify. Coolify Coolify pricing 28:15 Caprover. Caprover 29:03 Dokku. Dokku Shokku Ledokku Atlas Nixpacks 32:53 Piku. Piku 33:24 Cuber. Cuber 34:13 Acorn. Acorn Coolify creator, Andras Bacsai on X 36:44 The challenges of hosting your own PaaS. 38:46 Jekyll ran on a PC under a desk. Jekyll 39:36 Sometimes less is, in fact, more. 40:09 Final thoughts. 45:03 Scott got Bun to work on Coolify. 51:01 Sick Picks + Shameless Plugs. Sick Picks Wes: GripStic Chip Bag Sealer Amazon, GripStic Chip Bag Sealer Aliexpress Scott: Caseta Diva Smart Dimmer Shameless Plugs Wes: Syntax YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations. Show Notes 00:00 Welcome to Syntax! 01:00 Brought to you by Sentry.io. 01:33 Why scope your CSS? 03:21 Scott’s hot take. 05:43 How does @scope CSS work? 07:31 Similar to a component-based workflow. 08:00 Not having to specify a selector for your scope. 09:52 Pseudo inline hover styles. 11:31 Donut scope. 13:01 “Inverted donut-hole scope” 14:50 Browser support + limitations. Mozilla @scope The Style Element Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this supper club, Scott and Wes welcome Kevin Hou, Head of Product Engineering at Codeium, a blazing fast AI-powered code completion and chat tool for developers. Show Notes 00:00 Welcome to Syntax! 05:31 An introduction to Codeium. 07:56 What information are you sending the AI to get such good completions? Codeium compliance 09:15 Codeium runs a 'Language Server'. 11:15 Crawling dependency tree and abstract syntax tree. 12:07 Using Codeium Live. 12:34 How big of a codebase can you run this on? 14:39 Sending select amounts of data to AI. 16:06 Does Codeium maintain codebase preferences and styling (ie. snake case)? 17:39 Will Codeium scan the dependency? 19:23 AI UI, have we found the best format? 21:55 Crazy ideas in tech. 22:53 Additional AI UI inputs. 24:14 How do you make an AI model? 28:42 How does Codeium manage the product roadmap? 32:09 Do AI models get worse over time? How does Codeium validate that it's not? Open AI Evals 35:39 How is Codeium THAT fast? 36:49 What programming langauges does Codeium use? 38:55 Codeium Playground. Codeium Playground 39:15 Caching as a performance improvement. 39:58 What is the pipe between Codeium and editor? 40:17 Codeium chat service. 41:44 A WebSocket system allowing push and pull communication. 43:13 Closed Beta for GPT 4.0. 46:12 The dreaded closing quote bug. 48:26 Sometimes bugs bug Wes. 49:49 Supper Club Questions 51:40 Perplexity.ai 52:35 What editor does Kevin use? 55:31 Sick Picks + Shameless Plugs Sick Picks Kevin: Lapse.com Shameless Plugs Kevin: Codeium.com Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Join Wes and Scott for a 30,000 foot, 'soup-to-nuts' view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting. Show Notes 00:00 Welcome! 00:21 30,000 foot view of web development 02:37 Brought to you by Sentry.io 02:55 Starting with design tools. 06:10 Code Tooling 06:22 Text Editors 09:34 Terminal 14:28 Build Tools 16:07 Browser and dev tools 18:21 Formatter and linter. 21:43 CSS (how you style your website). 25:34 Programming languages. 27:14 Backend with metaframework. 29:36 Backend without metaframework. 32:20 Runtimes (JavaScript). What is Bun? The New JS Runtime The Deno Show 34:02 User interface libraries. Shoelace.style 39:43 Data management: Databases 41:42 Data management: ORM WTF is an ORM You should learn Drizzle, the TypeScript SQL ORM 42:53 Other data management considerations. 43:33 Image pipelines. 45:52 Hosting, CDN, CI. Where Should You Host Your App? Hosting Providers Compared Hasty Treat WTF × SSR vs JamStack vs Serverless? 47:21 Hosting your site. 50:19 The finishing touches. 50:26 Brought to you by Sentry.io 52:18 Captcha 55:03 Sick Picks + Shameless Plugs. Sick Picks Scott: GreatScottLab, Show #594 Wes: AliExpress Board, Wes' Demo Shameless Plugs Scott: Syntax on YouTube Wes: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications. Show Notes 00:00 Welcome 02:07 Brought to you by Sentry.io 02:53 What exactly is HTMX? 04:30 What you need to know before working in HTMX. 04:35 You need a server. 05:35 You’ll most likely need a templating engine. 06:42 You most likely do not need as much client-side JS. 08:33 You don’t work in JSON 11:15 Not something you can swap out your UI with in a SPA. 11:48 Brings back AJAX 13:32 So, what can it do? 15:20 And what it doesn’t do. 18:25 It doesn’t do server-side responses. 19:09 What about animations? 19:20 What about CSS? 19:57 What about Web Components? 20:06 What about third-party client-side JS? 20:18 What about WebSockets and SSE? HTMX WebSockets 20:30 What about extensions? HTMX Extensions 21:00 Wes’ “bomb” question. 24:16 What Scott likes about HTMX. 25:45 What Scott doesn’t like about HTMX. HTMX Multi-Swap 30:33 Hype, Meta Framework. Hype Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott talk with Jen Simmons about the latest updates to Safari, reporting bugs to Apple, understanding color in CSS, new CSS switch controls, and testing your websites in Vision Pro hardware. Show Notes 00:30 Welcome to Syntax! 01:26 Sponsor: Sentry 01:53 Who is Jen Simmons? 04:07 Safari has been killing it lately 11:07 Wes’ cOnSpirACy about Apple and APIs 18:49 Where is the best place to report bugs to Apple? 21:11 What’s happening with CSS Color gamuts and models? 34:32 Is contrast color ever going to to land? 36:55 Where is the CSS Grid and Masonry proposal at? 44:44 Will we be able to target a specific row in a grid? 46:41 What are CSS switch controls? 49:00 How can web devs view their websites in Vision Pro devices? 54:55 In what ways are HTML / CSS / JavaScript running where we don’t realize it? 59:06 Sick Picks Bugs.Webkit.org Web Compat Feedback Assistant at Apple Sessions - WWDC23 - Apple Developer Apple Vision Pro Running your app in Simulator or on a device Safari Release Notes WebKit Features in Safari 17.0 WebKit Features in Safari 17.1 WebKit Features in Safari 17.2 webkit.org Webkit Standards Positions Safari Technology Preview Safari Technology Preview Release Notes What’s new in CSS at WWDC23 Rediscover Safari developer features at WWDC23 What’s new in Web Apps at WWDC23 Meet Safari for spatial computing at WWDC23 Sick Picks Shameless Plugs Guest: Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions. Show Notes 00:08 Welcome 01:27 Syntax Brought to you by Sentry.io 02:45 Welcome Randy, our new Producer! Randy’s YouTube 04:14 A ‘Canadian Podcast’ 04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries? 08:21 What powers the “in-app” browsers and how can we test our sites on it? Inject tracking code Tauri 13:16 A deep dive on generators and iterators. An Insight into Iteration Protocol through Infinite Scroll in Angular 15:25 Video podcast observations 17:18 PROBLEM I need a way of managing state. 22:34 Why is Virtual Dom (a la React) suddenly bad? 28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate. 29:07 Updated logo and monster truck intro. 30:19 Back to OG Images. 31:51 Are “import * as X” exports build stripped? 36:46 What is the difference between S3 storage and a CDN. Backblaze CDN 45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer? 50:04 Sick Picks + Shameless Plugs Sick Picks Scott: Perplexity.ai, Serversideup Wes: Zojirushi Rice Cooker Shameless Plugs Wes: Wes Bos Courses Scott: Sentry Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Randy: YouTube Scott: X Instagram Tiktok LinkedIn Threads

Unveiling Svelte 5! delving into its latest features. From the impressive speed and simplicity to its compact size, discover what makes this new release so exciting. Show Notes 00:00 Welcome 00:39 Syntax Is A Video Podcast! @syntaxfm on YouTube 01:52 Brought To You By Sentry.io 02:42 Svelte 5 Introduction Svelte 5 Intro 05:45 What Are Runes? 06:21 $state() 11:49 $props() Class as a rest prop 16:41 $effect() 21:17 $inspect() 23:03 What Are Snippets? 27:33 What Are Events? 30:02 Built In Functions 32:42 Smaller Output Reddit example 33:31 Speed Benchmarks 35:00 Anticipated Release Try it today Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Thomas Steiner talks with us about Project Fugu, an effort from Google to enable new classes of applications to run on the web. What is Project Fugu? What are some of Thomas’ favorite APIs to use? What is an IWA vs a PWA? And more! Show Notes 00:32 Welcome 01:52 Who is Thomas Steiner? 02:57 What is the overall goal of Project Fugu? 08:17 When might we see these APIs come to all browsers? 14:10 Do you have examples of companies pushing for an API? 18:53 What happens with the face detection API? 28:33 What is an IWA? 35:17 What is the web transport API for? 37:11 What is MIDI? 41:20 Nintendo Joycon hack 45:28 File handlers in a PWA 50:38 File System Observer API coming soon 56:26 Sick Picks Onnx HuggingFace Chrome for Developers Fugu API Tracker Google I/O 2023 LEGO Education SPIKE Igalia CapCut Descript Better Touch Tool Sick Picks Laser printers Shameless Plugs HowFuguIsMyBrowser Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

We’re doing a Tasty overview of Drizzle in this episode. What is Drizzle? What are different types of databases? How do you host databases? What have we built with Drizzle? And how does Drizzle handle relational data, TypeScript, querying, selects, transactions, and more! Show Notes 00:10 Welcome 00:52 Syntax Brought to you by Sentry 01:50 What is Drizzle? 09:11 Different types of databases 17:58 Why pay for SQLite hosting? 20:36 Defining your data structures 24:27 What we’ve built using Drizzle 28:28 Relational data 36:17 TypesScript and Drizzle 40:53 Querying + Selects with Drizzle 46:23 Transactions 47:09 Syntax Drizzle Studio theme 48:27 Sick Picks Drizzle ORM Drizzle ORM - Overview Meet Drizzle Studio Benchmarks Sequel Pro TablePlus phpMyAdmin Cloudflare D1 Bun habitpath.io Chartable Neon Answer Overflow Drizzle Studio Themes Sick Picks Scott: BlackBerry - Apple TV (CA) Wes: Candle Warmer Lamp Shameless Plugs Syntax Tiktok Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

It is time. Wes and Scott attempt to blow your minds by talking about time, who’s tracking time, where does time come from, what time is it in your browser vs someone else’s server, and standards around time. Show Notes 00:25 Welcome 00:55 Thanks to Chris Enns LemonProductions.ca Chris Enns on Twitter Podcast tutorials by Chris Enns on YouTube 03:14 What is time in the browser? 06:27 What are atomic clocks? Atomic Clocks and Cloudflare 08:22 Network time 09:35 Device time 11:11 Why is time so important? 14:35 Epoch time Syntax epoch convertor 16:58 ISO 8601 standard ISO 8601 19:20 RFC 3339 RFC3339 20:35 Time zone support 21:59 The Temporal API Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Wes and Scott talk with Brian LeRoux about not using a bundler, handling TypeScript, live reloading, Enhance being a meta framework, how Enhance handles CSS, his experience at AWS: Reinvent, and the state of JavaScript run times in 2024. Show Notes 00:31 Welcome 01:00 Introducing Brian Leroux 01:32 Syntax Brought to you by Sentry 01:54 You can’t fix bugs you can’t see 03:14 Not using a bundler 05:48 Downsides of not using a bundler 11:13 What about TypeScript? 13:58 Is there a waterfall of imports? 18:29 What happens to live reloading? 22:12 The browser upgrade path 26:39 Is Enhance a meta framework? 29:02 What are you doing about SSR web components? 33:24 Can you refresh part of the application? 36:22 What about state management and Enhance? 42:52 How does Enhance handle CSS? 48:26 How was AWS: Reinvent? 54:47 What’s happening with the Begin CLI? 55:55 Any thoughts on new JavaScript run times? 59:51 Sick Picks brian.io Quickstart - Architect documentation Enhance aws-lite Sick Picks Analogue Pocket Shameless Plugs Begin — The Cloud Platform for Functional Web Apps Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more. Show Notes 00:10 Welcome 00:52 Syntax Brought to you by Sentry 01:39 New Heights with Scott and Wes 04:33 What are React Server Components? 10:52 The difference between server components and client components Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it. 11:37 Why would you want to run something server side? 15:22 Components are server rendered by default 16:40 What is JS sprinkles? 17:29 How do server components work? 18:51 Moving an existing site to React server components take a while 20:27 The rules 27:12 Form Actions + Server Actions 32:07 Buttons can have actions 36:32 React Suspense 39:13 What we like Ryan Florence thread 41:54 What we don’t like 47:13 Design patterns 47:35 Other things RSC Devtools Introducing Waku Mux 49:22 Sick Picks Sick Picks Scott: ASUS ZenDrive V1M External DVD Drive Wes: Leatherman Arc Shameless Plugs Scott: Syntax YouTube Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

We’re kicking off 2024 by talking about productivity tips we’re using to stay focused, to do apps, calendars, focus states, and customizing our code editor. Show Notes 00:25 Welcome 00:46 Syntax Brought to you by Sentry 01:11 Welcome to 2024 Anxiety and Uncertainty with Dr. Courtney Tolinski - Syntax #670 01:42 Getting systems in place 03:30 Examining your current habits 08:14 Tracking habits 12:16 Neural Pathway Chain Breakers habitpath.io/waitlist STREAKS A Passwordless Future Passkeys with Anna Pobletts - Syntax #710 Clerk 14:26 Todos Stronglifts app Getting Things Done Things Height 20:14 The calendar as the ultimate tool Cron Calendar 23:52 Using Focus states Focus App 29:09 Customizing VS Code with an extension Apc Customize UI++ - Visual Studio Marketplace 31:14 Momentum Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Yagiz Nizipli talks about his involvement with Node.js, implementing .env, how he finds areas to improve in performance, the happy path vs the hot path, and new features coming to Node.js. Show Notes 00:32 Welcome 01:01 Introducing Yagiz Nizipli 02:21 What is your involvement in Node.js? 03:27 Implementing .env 07:03 Why was 20,000 lines of C required? 11:00 How do you begin to find performance issues? 15:17 How do you measure improvements? 26:27 The happy path vs the hot path 27:36 Is Rspack ready for prime time? RSpack 28:47 Bundle Size VS runtime perf? Whats more important? 30:51 What’s it like working on a large project like Node? 38:26 Will Node ever get TypeScript support? 40:22 What are loaders? 44:24 Node.js is getting a config file? 51:37 Sick Picks Sick Picks Oxc @Boshen_c Shameless Plugs @yagiznizipli Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

Wes and Scott answer your questions about duopoly in tech, tech stacks for creating content, switching from frontend to full stack, DSA knowledge, email HTML, and more! Show Notes 00:10 Welcome 02:21 Syntax Brought to you by Sentry 03:31 Are you concerned about duopolistic companies taking over the web? 11:29 What stack do you you use for videos and sharing content? 15:02 How do you know once your ready to officially make the switch from frontend to full stack? 17:58 As someone new to tech and looking to apply for junior front end positions, how much should i know about DSA’s? Friends that work at big tech companies - did you need Data Structures and Algorithms to get hired? I get an lots of messages from new devs asking how to learn these things. Many of them say the need it to work at FAANG type companies 21:59 Which tools would you recommend for crafting HTML emails from scratch? Foundation MJML React Email 25:03 Hey are you guys setting up your own CI/CD like github action or gitlab CI? Netlify Vercel 28:25 What do you think about unstyled component libs. Eg: Ark? Ark UI 31:47 Do I need to have every single feature on mobile as I do on a desktop? Obsidian - Sharpen your thinking Missive ‐ Team Email, Chat & Tasks 39:15 How can I get better at planning my code? shaky.github.bushong.net Monodraw for macOS — Helftone Octopus.do, Visual Sitemap Tool, Website Planner, Architecture Mermaid | Diagramming and charting tool 42:32 What exactly makes it so that a piece of logic is client/frontend logic vs backend logic? 46:17 Sick Picks Sick Picks Scott: Sleeping Queens Card Game, 79 Cards : Toys & Games Wes: Package drop box Shameless Plugs Scott: Syntax Newsletter Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

CSS :has() is out in all browsers and Wes and Scott have got the top 10 reasons you should start using :has() now. Show Notes 00:25 Welcome 02:28 Syntax Brought to you by Sentry 03:02 Overview of :has 07:09 The anywhere selector 09:41 Previous element 12:59 Layout targetting 15:45 Form validation styling 17:51 All siblings 21:07 Quantity queries 24:19 Empty children 24:56 Nested dropdown navs 26:36 Attribute matching Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with Eric Meyer about his start on the web, the early days of CSS, where CSS is headed, are we going to lose a browser, and more! Show Notes 00:32 Welcome 01:26 Who is Eric Meyer? 05:44 In the earliest days, what browsers supported CSS? 10:23 The current web platform test suite web-platform-tests 17:59 Are CSS features shipping faster these days? 20:45 CSS learning from preprocessors 26:24 What do you think about Tailwind and inline CSS? 33:26 Alternative spaces where CSS may be used CSS Speech Module Level 1 The World Wide Web Consortium Issues CSS2 as a W3C Recommendation 37:17 Do companies push CSS forward for a business use case? 44:06 Trying to keep up with all the things is difficult 48:19 What’s on Eric Meyer’s CSS wishlist? 54:35 Supper Club Questions Bruce Lawson Firefox Nightly desktop, Android and iOS. SerenityOS The Ladybird browser project Thunderbird — Free Your Inbox. — Thunderbird Arc from The Browser Company Mozilla Foundation - Homepage 01:58 Sick Picks Sick Picks Polypane Shameless Plugs Igalia - Open Source Consultancy and Development meyerweb.com Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

Wes and Scott give their predictions for 2024 in JavaScript, frameworks, server-side JS, tooling, CSS, developer ecosystem, and AI tooling. Show Notes 00:10 Welcome 01:10 Syntax Brought to you by Sentry 02:00 Types in JS will have real movement 05:10 Temporal API will ship in 1 browser 06:38 Perf tooling gets easy for everyone to understand 07:32 CSS continues to get better where you need less JS 08:35 The year of the server in frameworks 10:32 Svelte v5 is very fast SvelteKit • Web development, streamlined 12:04 Astro is going to have a good year Astro 4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello) 14:22 React server components dai-shi/waku: ⛩️ The minimal React framework Waku 19:45 Remix moves away from page-based loaders, to component loaders 20:52 Hono will become more ubiquitous Hono - Ultrafast web framework for the Edges 23:23 Node will introduce TypeScript support via loaders 24:48 We will see a route matching Proposal move ahead URL Pattern Standard 26:34 Bun releases full node compat 27:34 We will see a new Linter + formatter entirely replace Language support | Biome HTML support · Issue #1326 · oxc-project/oxc Prettier · Opinionated Code Formatter 31:44 New TypeScript typechecker 32:42 Lightning CSS pops - or does it? 34:37 You’ll hear more about Rspack and Turbopack 35:55 Vite isn’t going to release anything big in 2024 Vite | Next Generation Frontend Tooling 36:55 CSS contrast-color will land in chrome 37:27 Relative color will land in all major browsers 37:48 Scroll animation landing in 2 browsers 38:40 The year of CSS discovery 41:20 Safari will Ship 3 missing PWA Support 44:10 Firefox usage will continue to slip 47:43 Paid Arc features 47:55 More XR web experiences as Apple releases in Vision Pro 49:07 AI Tooling Galileo AI v0 by Vercel Transformers.js 51:07 Small Models that run in the browser 52:08 Apps get sherlocked by OpenAI 53:24 On prem corporate AI 54:15 Sick Picks Sick Picks Scott: ISO100 protein power, Weekend at Bernie’s Wes: Roborock S8 Pro Ultra Vaccum + Mop Shameless Plugs Scott: Syntax Newsletter Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more. Show Notes 00:25:15 Welcome 01:27:04 Syntax Brought to you by Sentry 01:52:00 Examples of how Wes uses print CSS 03:42:16 Using it for invoices or receipts 05:08:24 Delivering a book as a PDF 05:42:16 How do you load CSS only for printing? 10:41:08 Using units in CSS 11:29:15 CSS Counters MDN: CSS Counters body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 { counter-reset: subchapter; /* set section to 0 */ } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; } 14:31:10 Named Pages @page title { @top { /* no header for title pages */ content: “”; } } @page chapter { @top { content: “This is a chapter page”; } } 15:27:09 Margins, Headers + footers, Page Numbers 18:01:18 Debugging Print CSS 19:57:18 Getting into a PDF Docraptor Playwright Puppeteer JSPdf 24:45:04 Other Things to consider Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with Anna Pobletts of Passage about passkeys, how passkeys work, how to implement passkeys on your website or app, what the recommended UI is for passkeys, what happens to your passkey if you lose your phone, and more. Show Notes 00:32 Welcome 01:36 Why do we need something like Passkeys? 03:34 What are Passkeys for? 10:04 What took us so long to get to Passkeys? 11:07 Where’s the two factor part of Passkeys? 13:08 How are Passkeys phishing resistant? 14:44 What happens to your Passkey if you lose your phone? 18:40 What’s the password recovery workflow like with Passkeys? 23:08 Having a backup device helps a lot with Passkeys 24:58 Why companies should use two factor or Passkeys 29:26 What are the standards and tech behind Passkeys? 32:38 What kinds of companies are implementing Passkeys? 34:34 What is the recommended UI for telling users about Passkeys? 39:17 How do you implement Passkeys on your app or website? 41:47 1Password open sourced low level libraries 47:34 What does the future look like for Passkeys? 51:07 Supper Club questions 53:44 Sick Picks 1Password Have I Been Pwned 1Password Watchtower Passkeys.directory passkeys.dev FIDO Alliance - Open Authentication Standards More Secure than Passwords Sick Picks Cascadia Shameless Plugs Passage by 1Password Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

In this potluck episode of Syntax, Wes and Scott answer your questions about naming things in programming, use case for generators, CSS @Layers follow up, database prefixes, generalist vs specialist, where’s the sick pick page, and more! Show Notes 00:08 Welcome 01:20 Syntax Brought to you by Sentry 01:48 How much of programming is genuine advanced technical stuff vs just fancy complex sounding names for things? 05:10 I found a non-trivial use case for GENERATORS! 11:05 CSS @Layers follow up from 668 Hacking the Tonal - Proxying, Intercepting + Debugging Traffic? - Syntax #668 Allow authors to apply new css features (like cascade layers) while linking stylesheets · Issue #7540 · whatwg/html 15:37 On a previous episode, what did you mention regarding database-prefix? 18:20 Is it better to be a generalist or specialist as a front end dev? 23:20 I can’t find the sick picks page on the new site. Any plans to bring that back? Filtering and Discovery Notes · Issue #935 · syntaxfm/website 24:25 Can you guys give some advice about how to grow and improve as developers while struggling with ADHD? Supper Club × Coding with ADHD with Dr. Courtney Tolinski - Syntax #532 29:55 Any chance you could make an embeddable player? 31:32 Could you have the people behind Cards Against Humanity on a future supper club episode? Cards Against Humanity Poor Charlie’s Almanack: The Essential Wit and Wisdom of Charles T. Munger Cards Against Humanity 99% Sale Warehouse | Blackbox Yowza 34:50 What are some of the differences between being a professional developer in Canada versus the United States? 40:58 Is HTML Over The Wire awesome, or super awesome? 42:52 How can I develop locally with a postgres database and Prisma / Vercel for hosting? Env Variables and Modes | Vite 46:23 Sick Picks Sick Picks Scott: Mother In Law’s Gochujang Fermented Chile Sauce, MIL Kimchi Gochujang and Gochugaru Wes: SEOUL SISTERS Korean Kimchi Powder Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk through the ways they improved performance on the Syntax.fm website, how they knew it was slow to begin with, and the various changes they made to caching, and loading transcripts to improve the speed of the site. Show Notes 00:25 Welcome 01:32 Adding a database requires queries 03:32 How did we know the site was slow? 04:25 Syntax Brought to you by Sentry 07:45 Changing the way transcripts are being loaded 13:41 Caching 21:16 Caching Headers Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more! Show Notes 00:24 Welcome 01:18 Syntax Brought to you by Sentry 02:05 SSR JS sites more the norm solidjs.com Remix - Build Better Websites Next.js by Vercel - The React Framework SvelteKit • Web development, streamlined Astro 04:14 TypeScript Inferred becomes hot 05:20 Types In JS? ECMAScript proposal for type syntax that is erased - Stage 1 07:55 Deno gets hotter 11:12 JS runtimes mature htmx 11:50 We will see a new TS Type Checker written in Rust 14:06 New JS APIs What’s the status of this project? · Issue #1101 · dudykr/stc Wes Bos on X: "Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3 tc39/proposals: Tracking ECMAScript Proposals JS Fundamentals - Decorators - Syntax #653 16:29 Writing towards Winter CG Spec Popular. WinterCG 17:09 Edge Rendering More Common Prettier on X: "We setup a $20k bounty for a rust-based compatible printer with prettier. $20k Bounty was Claimed! · Prettier 18:09 A new JS framework 19:05 Page Transitions API 19:51 Rust becomes more popular 24:00 More WASM Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion - Syntax #643 FFmpeg Fastly 25:11 React Beta Docs launch after 5 year dev cycle 26:47 We start to see CSS Container Queries in production 29:05 CanIUse issues? 31:20 CSS Subgrid 32:56 More AI 34:06 Tooling Vite | Next Generation Frontend Tooling Announcing Biome | Biome Lightning CSS Rspack Turbopack 36:08 People sour on React 36:47 People sour on eslint 37:16 Houdini does nothing CSS Houdini| MDN Is Houdini Ready Yet? 39:57 How’d we do? 40:40 Sick picks Sick Picks Scott: Super Mario Bros.™ Wonder Wes: Tineco Pure ONE S11 Cordless Vacuum Cleaner Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk about understanding the integration of different components in AI models, the choice between traditional models and Language Learning Models (LLM), the relevance of the Hugging Face library, demystify Llama, discuss spaces in AI, and highlight available services. Show Notes 00:25:20 Welcome 00:55:00 Syntax Brought to you by Sentry 01:17:00 Understanding how the pieces fit together 02:31:18 Models or LLM? 04:43:22 What about Hugging Face? 08:05:18 What’s Llama? 08:51:15 What are spaces? 09:29:06 Services available to you 12:26:16 What are tokens in AI? 17:38:18 What is temperature with AI? 20:33:08 Using top_p 21:06:00 Using fine-tuning to extend existing models 22:11:19 Prompts are what you send to the model 23:17:00 Streaming 24:48:17 Embeddings 27:34:17 OpenAI maintains Evals 28:40:14 Different libraries for working with AI Hugging Face Creator of Swift, Tesla Autopilot & Tensorflow. New AI language Mojo with Chris Lattner LLaMA Spaces - Hugging Face OpenAI Anthropic \ Introducing Claude Replicate Fireworks Console gpt-tokenizer playground openai/tiktoken: tiktoken is a fast BPE tokeniser for use with OpenAI’s models. Supper Club × OpenAI, Future of programming, LLMs, and Math with Andrey Mishchenko Raycast Pro Amazon SageMaker (AMS SSPS) openai/evals LangChain PyTorch TensorFlow ai - npm Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this Supper Club episode of Syntax, Wes and Scott talk with Feross Aboukhadijeh about his work on Socket which helps to make sure the code you get from npm is safe and secure. They also touch on his work on Wormhole and Web Torrent. Show Notes 00:30 Welcome 00:57 Who is Feross Aboukhadijeh? 01:33 What is Socket? [Socket.dev](https://socket.dev dominictarr (Dominic Tarr) pull-stream/pull-stream: minimal streams 03:59 Introducing AI package summaries Example of the AI summaries Introducing AI Package Summaries 07:04 Is Socket’s focus on visibility of a open source project? 10:01 What was the inspiration for Socket? Introducing “safe npm”, a Socket npm Wrapper - Socket 16:22 How does Socket detect possible security issues? Removed packages event-source-polyfill protestware attack john wick spam attack 18:55 How many projects are you injesting for Socket to scan? 26:00 What kinds of things are people trying to inject in code? CS253 Web Security 29:54 How do I hook Socket up to my project or GitHub? 32:08 Do we still need to use shrink wrap? 36:34 How did you implement the torrent spec in JavaScript for WebTorrent? WebTorrent Desktop WebTorrent FAQ 43:11 Why did you build Wormhole? Wormhole 47:33 How expensive is it to maintain Wormhole? Riverside.fm - Record Podcasts And Videos From Anywhere 50:37 What do you think of decentralized code repos? Radicle Project Fugu Fugu Tracker 54:29 Understanding passkeys 56:15 Supper Club questions GitHub Theme - Visual Studio Marketplace Web Serial API - Web APIs | MDN 01:03:04 Sick Picks Sick Picks Harry Potter audio books Shameless Plugs ChatGPT Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more. Show Notes 00:25 Welcome 01:31 Syntax Brought to you by Sentry 02:01 Explain CSS Contain and why it exists? 07:27 In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them? Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X 10:31 Which of the following elements are fake? 13:00 Which of the following HTML tags are deprecated? 16:38 What is the samp element? 17:27 Name the 7 parts of CSS Houdini 21:07 In JavaScript for loop with 10 items, how can you exit a loop early? 22:34 What is the difference between a pseudo element and a pseudo class? 25:59 How could you implement CSS :has with JavaScript? 27:56 What are two attributes that would make an SVG more accessible? 29:43 How can you stop your process from exiting if you have an unhandled rejection? 32:27 How do you prevent flex children from getting squished? 34:40 In TypeScript, what does using keyof and typeof together do? 37:19 What does ARIA stand for? 37:39 Name 5 limitations that a serverless or edge function have over tradtional long running server? 40:38 Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size. 42:03 If I’m building an application that needs to announce a change to the user, how would I do that? 43:46 Name the 5 different Git elements methods on a document? 45:39 What does the CSS prospective property do? 48:23 Sick picks Sick Picks Scott: Pushpin hangers Wes: Niimbot Label Maker, Bearclaw Screws) Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott give a high level overview of the observer pattern, what is the observer, what are downsides to too many observers, and more. Show Notes 00:25 Welcome 01:42 Syntax Brought to you by Sentry 02:16 High level overview Syntax 694: What’s Up With Angular with Mark Techson Godot Engine 03:36 What might you observe in game development? 06:50 What is the observer? 08:11 What are some downsides to too many observers? 10:17 IntersectionObserver, MutationObserver, and PerformanceObserver 12:25 ResizeObserver 13:04 What about addEventListener? @BenLesh on Callbacks being faster than observables 16:13 Signals are becoming a big thing Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk through new and proposed JavaScript APIs including ones related to regex, sourcemaps, structured clone, temporal, JSON modules, and more! Show Notes 00:10 Welcome 01:26 Syntax Brought to you by Sentry 02:55 RegExp Escaping Proposal tc39/proposal-regex-escaping: Proposal for investigating RegExp escaping for the ECMAScript standard 05:25 Intl.DurationFormat tc39/proposal-intl-duration-format 07:55 Standardized Sourcemaps tc39/source-map-rfc: RFCs for the source map debug format. 10:43 Structured Clone structuredClone() global function - Web APIs | MDN 12:54 Temporal Hasty Treat - Temporal Date Objects in JavaScript Tracking issue for syncing with IETF standardization work (req’d before implementers can ship unflagged) · Issue #1450 · tc39/proposal-temporal 20:59 FindLast and findLastIndex tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex. 22:27 JSON modules tc39/proposal-json-modules: Proposal to import JSON files as modules 24:46 Regex Modifiers RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online 26:50 Array Grouping tc39/proposal-array-grouping: A proposal to make grouping of array items easier 30:48 Array Methods tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change. 6 or so New Approved and Proposed JavaScript APIs 32:12 Promise.withResolvers 35:08 Function.prototype.memo tc39/proposal-function-memo: A TC39 proposal for function memoization in the JavaScript language. 37:48 Node has a Proposed ESM Detection flag 39:54 Node has navigator.userAgent 41:29 Built in .env support 42:52 Permissions model & test runner continues to be worked on 44:06 HTML Web charts Proposal: Web Charts · Issue #9295 · whatwg/html 45:39 autopause Add autopause attribute to media elements to allow automatic pausing of media · Issue #9793 · whatwg/html 46:30 Meta Tag for AI generated content Proposal: Meta Tag for AI Generated Content · Issue #9479 · whatwg/html Schema.org - Schema.org Syntax × Sentry Swag Store – Syntax × Sentry Shop Syntax - A Tasty Treats Podcast for Web Developers. 50:13 Poster frame HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements · Issue #9812 · whatwg/html 50:57 Popover invoker Popover does not know what triggered it · Issue #9111 · whatwg/html 51:25 Autocomplete on ‘contenteditable’ Elements Autocomplete on ‘contenteditable’ Elements · Issue #9065 · whatwg/html 52:17 Sick Picks Sick Picks Scott: Escaping Twin Flames cult documentary Wes: Lao Gan Ma spicy Chili Oil Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects. Show Notes 00:25 Welcome 01:18 Syntax Brought to you by Sentry 01:44 What is ARIA? WAI-ARIA Roles | MDN An in-depth guide to ARIA roles - The A11Y Project 02:48 What is aria-label? // A button with an ARIA role and label 06:36 What’s the difference between a title and aria-label on a button? 08:34 Are you really going to get sued if your website isn’t accessible? 11:53 What are Roles for? 16:33 6 different types of Roles 21:25 What is aria-labelledby? I agree to the Terms and Conditions. 23:13 Checking your code for accessibility eslint-plugin-jsx-a11y - npm WAVE Web Accessibility Evaluation Tools Polypane 24:31 Feedback and future show ideas Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with James Mikrut about Payload, how Payload isn’t just a CMS, where Payload fits in a tech stack, why they picked Drizzle for an ORM, what Payload Cloud is, and where’s the Rails for JavaScript? Show Notes 00:31 Welcome 02:00 Who is James Mikrut and what’s the idea behind Payload? 05:22 Payload isn’t just a CMS Payload Payload on GitHub Payload on Twitter Payload on YouTube 09:08 Where does Payload fit in the tech stack? KeystoneJS Supabase Retool 11:22 Is Payload using TypeScript? 13:44 Why did you pick Drizzle? Drizzle ORM 18:08 Do you have to maintain MongoDB and Drizzle? SvelteKit 26:31 Does Payload have visual editing elements? 30:34 Do you build a custom UI for users? 35:10 What is Payload Cloud? 38:12 Where is the Rails for JavaScript? Next.js by Vercel Laravel Spark Deploy your Laravel PHP application painlessly RedwoodJS: The App Framework for Startups | RedwoodJS.com 41:39 How do you manage contributions from open source? 43:46 GitHub + AI 48:18 Syntax Brought to you by Sentry Error Management Magic: Introducing the Sentry Plugin for Payload 50:26 Supper Club questions Shameless Plugs Payload on GitHub Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this potluck episode of Syntax, Wes and Scott answer your questions, including: Will TypeScript ever go away? Should I write canvas-rendered web apps? How can I execute untrusted JS code in node? How can I use continuous integration with WordPress? Any advice for learning Rust? Show Notes 00:09 Welcome 01:16 How to ask questions for potluck episodes Ask a question for Syntax potluck episodes 02:19 Syntax Brought to you by Sentry 04:34 Will TypeScript ever go away? Migrating millions of lines of code to TypeScript 08:12 What is your opinion on entirely canvas-rendered web apps, such as those built with Flutter? Flutter on the Web Flutter Gallery html2canvas - Screenshots with JavaScript 13:43 Tailscale VPN is cool Tailscale · Best VPN Service for Secure Networks Tunnel | Zero Trust App Connector | Cloudflare 16:36 What is Bandcamp? Bandcamp Stream and listen to music online for free with SoundCloud 18:56 How can I execute untrusted JS code with node? WebAssembly Cloudflare Workers® Deno, The next-generation JavaScript runtime Fastly 23:46 I’d love to get your thoughts on modern devops and continuous integration for building out WordPress websites. Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields Vite | Next Generation Frontend Tooling Alpine.js 30:39 How do I orchestrate color adapting icons for use inline and in background images? svg.wesbos.com svg.wesbos.com/cat.svg 35:53 Are there any publicly available libraries for web components? Shoelace: A forward-thinking library of web components. Open UI 40:20 What’s a good project idea for learning Rust? Tauri Apps 45:17 Do you ever plan to do more podcasts with Scott’s wife or another psychologist / psychiatrist? 47:02 Have you tried MongoDB vector search for AI embeddings? Atlas Vector Search | MongoDB Vector Database for Vector Search | Pinecone Xata 49:44 Syntax highlighting in VS Code Comment tagged templates - Visual Studio Marketplace 52:38 Sick Picks Sick Picks Scott: The Spider-Man of Paris (2023) - IMDb Wes: Amazon.ca : instant read digital thermometer Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

What are @Layers in CSS, when and where should you be using them, how do you write them, and who’s using them already? Show Notes 00:23 Welcome 01:49 Syntax Brought to you by Sentry 02:55 Where is this supported? 07:21 How do we write layers? 10:47 How do you write your CSS? 16:20 Nesting 20:35 Who else is using @Layer? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with Salma Alam-Naylor all about her role in DevRel, what’s involved in working in DevRel, avoiding burnout, which platforms to focus on, and so much more. Show Notes 00:31 Welcome 01:07 Syntax Brought to you by Sentry 01:52 New jobs and onboarding 03:34 What is Devrel? 11:34 How much of devrel is using your own product? Dogfooding the service? 14:49 What are things devrel people do? 20:32 Devrel burnout issues 24:53 Once you put a number on something, you’re measuring that number 29:31 Is there any way to know if devrel is working? 33:47 How could someone get into devrel? 37:37 What platforms should you focus on? 44:12 What’s something devrel gets wrong? 47:50 What do you think about speaking at conferences? 51:58 What do you use to stay up on with tech? 53:59 Sick picks Sick Picks Wikipedia on Hell.com Web Archive of Hell.com Fffffound https://twitter.com/webdesignmuseum Shameless Plugs Follow Salma on Twitch Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott answer a listener’s question about their process for building a website in 2023. Do you start with design? With code? How do you decide on which CMS or if you need a CMS? How do you choose a backend framework? And where do you host it? Show Notes 00:10 Welcome 02:12 Syntax Brought to you by Sentry 03:06 How do you build a website? 04:57 Start with the design Figma Design Systems with Brad Frost 11:12 Choose a Frontend / Components Pug EJS React Svelte Remix Storybook 25:16 Real data or fake data? Polypane DrizzleORM 29:34 Do you need a CMS or not? Statamic Syntax 254: Headless CMS Break Down & Roundup WordPress.org Astro 35:16 Choosing a backend language or framework 39:56 Testing 44:50 Where do you host your website? Vercel Netlify Drop Glitch CodePen 50:04 Sick Picks Sick Picks Scott: Chip clips Wes: Soft close used toilet seat Amazon Warehouse Deals Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim. Show Notes 00:25 Welcome 01:10 :nth-child(4 of .neat) selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use 06:43 CSS Motion Path 10:38 Scroll Snap Practical CSS Scroll Snapping 14:36 Scroll Driven Animations Scroll-driven Animations Supper Club × Bramus Van Damme on CSS 16:58 Margin Trim Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with Mark Techson about the recent Angular announcements and updates. How did Angular implement signals? What’s new in Angular 17? How does Angular handle CSS or UI component libraries? Show Notes 00:30 Welcome 01:11 Syntax Brought to you by Sentry 01:39 What’s changing with Angular? Special Angular Event Angular 03:19 What happened to Angular.js, and what’s happening now? StackBlitz Analog | Analog Supper Club × Self Hosted Backend-as-a-service with Brandon Roberts 08:19 What makes Angular special? 13:21 How did Angular implement signals? 17:17 What is a computed value? 18:54 What’s new in Angular 17? 25:10 What’s the meta framework story with Angular? Angular Material UI component library CDK | Angular Material Angular - Angular elements overview 27:40 Adding close to the metal if statements 31:03 View transitions 32:34 How does Angular handle CSS? 39:31 How does Angular integrate with UI component libraries? 41:07 What are headless components? 41:45 Does Angular work well with web components? 42:43 Supper Club Questions Accessibility in Visual Studio Code Technology Radar Thoughtworks RedMonk – The developer-focused analyst firm Mermaid | Diagramming and charting tool 49:38 Sick Picks Sick Picks Godot Engine - Free and open source 2D and 3D game engine Shameless Plugs #goodmorningwithmark on Twitter #goodmorningwithmark on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk about the lessons they learned while launching the new Syntax website including launching now, transcription bugs, error monitoring, black text on black backgrounds, and more. Show Notes 00:10 Welcome to Syntax 01:41 Syntax Brought to you by Sentry 02:43 Don’t wait. Launch! 04:28 Transcript bug Most Powerful Speech-to-Text API | Deepgram 09:01 Error monitoring is a must 12:36 Timestamp error 16:20 Black text on black background might hide things 17:33 WASM Vercel file system 21:18 Things have gotten easier to launch PlanetScale: The world’s most advanced database platform — PlanetScale 23:36 Switching from OpenAI to Anthropic Claude and AI Responses aren’t always JSON 25:34 Local dev is fast Navigation API 31:37 Mind your payloads 32:41 GitHub Milestones 33:57 Almost forgot the Robots.txt 36:17 Chron job timeout Inngest 40:06 TypeScript errors don’t need to be zero to launch 42:25 GitHub Actions pipeline bug 43:23 Basic testing will do Playwright 44:56 Have a designer to work with Airbase 52:07 Sick Picks Sick Picks Scott: Dog Poop Bags With Dispenser Wes: Resistance band Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott explain what Stale While Revalidate is, why you should use it, and explore whether you should use it all the time on all the things. Show Notes 00:25 Welcome 01:05 Syntax Brought to you by Sentry 01:34 What is Stale While Revalidate? 03:13 Why is caching important? Max age calculator Can I Use 05:09 Where does a cache live? 07:05 Limit how often an API is being hit 11:51 What about Stale while Revalidate? 18:30 Why wouldn’t you just use Stale While Invalidate on everything? Syntax 484: Cache Control Headers Explained Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with Rita Kozlov And Brendan Irvine-Broque about Cloudflare Workers, Cloudflare AI, browser rendering API, Cloudflare’s D1 database, WinterCG, miniflare, and more! Show Notes 00:32 Welcome 01:53 Syntax Brought to you by Sentry 02:20 What are Cloudflare Workers? Announcing WinterJS Cloudflare Workers® Puppeteer | Puppeteer 06:23 How long did Workers take to ship? 07:31 Can you run your entire business on Cloudflare Workers? 10:52 Interesting use cases for Cloudflare Workers 12:33 What makes the edge important? 18:05 Managing GDPR compliance 19:02 What are the tradeoffs of building with Cloudflare Workers? Cloudflare Queues 20:22 How does Workers pricing work? 26:54 What are situations where you might need longer times? 28:50 Browser rendering API Browser Rendering docs 29:43 What is Cloudflare D1 database product? Cloudflare D1 31:05 Cloudflare Hyperdrive Hyperdrive “Serverless” Databases 34:27 Cloudflare Workers don’t use a Node.js runtime Introducing workerd: the Open Source Workers runtime 37:13 What is WinterCG? WinterCG 45:09 Will we ever see a standard for server routing? TCP sockets · Cloudflare Workers docs 49:30 What is miniflare? 🔥 Miniflare · Miniflare 54:05 Can I run Python on Cloudflare? 55:49 Cloudflare AI Partnering with Hugging Face to make deploying AI easier Cloudflare + AI WebGPU API Cache · Cloudflare Workers docs 57:04 Supper Club questions 59:38 Sick Picks Sick Picks Get a bench scrape Shameless Plugs Cloudflare Discord Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content. Show Notes 00:00 Syntax + Sentry Announcement! 01:35 Welcome 02:23 Syntax Brought to you by Sentry 03:16 How to implement a theme 10:27 Writing the CSS 11:38 Glasses wearers protip 13:02 Class on the body and server side rendering issue 14:02 CSS Variables 15:05 Color variables in CSS 21:07 Working in half pixel sizes 22:40 Variable usage 25:23 Naming variables after what they style 30:42 Component level variables 33:27 Using zones 38:41 Themes should be defined as light or dark 39:20 Issues: Moving from light to dark 42:29 Issues: Drop shadow in dark mode 44:00 Issues: Flash of unthemed content 44:40 Issues: Opacity values 49:45 Issues: SVG need change color 55:56 Help is on the way! 59:57 SIIIIICK ××× PIIIICKS ××× website/src/styles/themes/level-up.css at v2 The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage “color-contrast” | Can I use… Support tables for HTML5, CSS3, etc The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – Bram.us ××× SIIIIICK ××× PIIIICKS ××× Scott: Kala (@engineer.everything) Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott talk about why you should be using JavaScript maps sets, whether you can access them directly, what makes them great, and what weak versions of both are. Show Notes 00:26 Welcome 01:34 Syntax Brought to you by Sentry 01:54 What makes Maps a spicy buffalo object? 07:46 API of Map 08:51 Looping over items in a Map 09:27 Can you change the size of a map after it’s been created? 10:07 Can you access properties directly? 12:13 Where have we used a map as a cache? 13:32 What makes a set an array honey garlic array? 17:28 When should you be using sets instead of an array? Proposed Highlight API is built on Sets 21:47 Can you spread sets like an array? 22:40 Weak versions of map and set WeakMap and Garbage collection Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this supper club episode of Syntax, Wes and Scott talk with Darcy Clarke about his career path in tech, working with Wes back in the day, why he decided to build vlt volt, and the biggest sick pick list yet! Show Notes 00:32 Welcome 01:38 Building a tweet wall back in the day 08:54 How did you land at npm? npm 19:40 Why do we need another package manager and registry? 22:11 What is vlt volt? vlt: a new home for open source vlt /vōlt/ (@vltpkg) / X Shipping ESM with Mark Erikson Bun Yarn Nx 27:18 Do you see a future where we don’t pre-compile before shipping? 29:32 Why would pnpm be faster than npm? 31:14 What are the problems with symlinking? 33:08 What’s happening with Yarn? Verdaccio Cloudsmith jfrong Sonatype socket.dev Snyk.io Dependency Confusion 37:42 What do you think about config files? antfu Config of File Nesting for VS Code The massive bug at the heart of the npm ecosystem WebTorrent 41:02 VS Code tip - file nesting patterns 41:59 How does on-prem registry work? 47:29 Where does Socket.dev and Snyk security fit? 52:46 Sick Picks 04:41 How did you get vlt.sh? 05:30 How did you get @Darcy? Sick Picks Flat Coat Goldendoodle Scientific American Nespresso BlackBerry (2023) - IMDb BlackBerry (2023) Letterboxd Matthias Wandel Blink-182 Official Site Moneen Bring Me The Horizon Shameless Plugs vlt: a new home for open source Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this potluck episode of Syntax, Wes and Scott answer your questions about hosting NextJS, spicy sidedishes, putting forms in modern websites, why is everyone abandoning TypeScript, CSS Survey follow up, do devs need to be into CSS, and more! Show Notes 00:10 How to submit a question to Syntax Syntax Potluck Listener Questions 00:45 Syntax meet up in Toronto 02:11 Syntax Brought to you by Sentry 02:36 Vendor lock in with NextJS? Next.js by Vercel Vercel SST Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589 Cloudflare Pages Netlify Open source Next.js serverless adapter 09:48 🌶️ Spicy Sidedish: Stop calling Firefox the new IE Jen Simmons 16:40 Can you compare Database as a service and provide your recommendation and suggestions? “Serverless” Databases — Syntax Podcast 551 PlanetScale Firebase 20:00 How do I do native forms outside of CMS like WordPress? Builder.io 28:01 Why have Svelte and Turbo abandoned Typescript? 32:17 Why are companies hesitant to migrate to Next? 33:36 Is React Native dead? 38:33 Do I use the keyword “new” when throwing an Error or not? 41:59 touch-action use case Announcing Quina Quina - Menu Announcing Hondo Hondo - a word game in 100 words or less 42:57 Subgrid and the :has selector usage 46:02 Is it okay to be a front end developer and not be as interested in CSS? Tool Academy (American TV series) 51:12 Could you explain what are workers, processes, jobs, tasks, and deamons? 56:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Infamous International: The Pink Panthers Story Wes: PowerBlock Adjustable Dumbbells For Home Gym & Commercial Use Syntax episode 3 Shameless Plugs Scott: Syntax on TikTok 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about the secret sauce that’s going into the creation of the new Syntax.fm website including the styling, search, tooling, database, hosting, and more. Show Notes 00:21:15 Welcome 01:10:11 Where did the name “Secret Sauce” come from? 03:16:00 Syntax Brought to you by Sentry 04:32:11 What Syntax.fm is built in? SvelteKit • Web development, streamlined muxinc/media-chrome: Custom elements (web components) for making audio and video player controls that look great in your website or app. Media Chrome Docs 07:24:01 How we’re doing search flexsearch - npm 12:22:20 Styling Prettier · Opinionated Code Formatter PostCSS - a tool for transforming CSS with JavaScript 16:00:05 Tooling Fast, disk space efficient package manager | pnpm 18:55:11 Database Prisma | Next-generation ORM for Node.js & TypeScript 21:11:11 Services Deepgram OpenAI Anthropic \ Introducing Claude 24:34:11 Hosting Vercel: Develop. Preview. Ship. For the best frontend teams PlanetScale: The world’s most advanced database platform — PlanetScale Cloudflare - The Web Performance & Security Company | Cloudflare 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Jason Lengstorf about his journey in video creation, live streaming, and tech education. What’s up with Jason’s new studio? How does he prep for a live stream? Show Notes 00:32 Welcome 02:21 Syntax Brought to you by Sentry 02:39 Who is Jason Lengstorf? 05:43 Why did you decide to go full time on Learn with Jason? 10:04 Jason’s new YouTube series idea 13:36 Jason gets a special delivery 14:30 What’s in Jason’s new studio? 20:14 What’s the ideal medium for content in 2023? 24:28 Treat decisions as forever, for now. 26:01 Is live streaming as difficult to get into as it seems? 29:21 How do you prepare for a live stream? 32:58 How do you decide what to create? 38:23 How do you feel about React? 40:21 What are your thoughts on AI? 49:08 Supper Club questions 56:25 Sick Picks Sarah Drasner’s Site Animation With Svelte (with Scott Tolinski) — Learn With Jason Gatsby Netlify Jessica Kobeissi ANDREW HUANG Theo Browne Cassidy Williams Bytes - The Best JavaScript Newsletter ZSA Moonlander: ErgoDox EZ Operator Fonts Night Owl SyntaxFM by SyntaxFM MD IO ILME-FX3 | Interchangeable-lens Cameras FE 24-70 mm F2.8 GM Sick Picks Synergy - Share one mouse & keyboard across computers Shameless Plugs LearnWithJason.dev: Learn. Build. Grow. Together. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

In this episode of Syntax, Wes and Scott relate even more spooky listener submitted coding horrors including crypto copy paste, Big Brother bug, losing $50,000, 2,000 SMS, a $20,000 hour, and more. Show Notes 00:09 Velcome to Synax 01:09 Syntax Brought to you by Sentry 01:36 Stories are anonymous! 01:57 Crypto copy + paste 03:48 Big Brother Bug 07:00 One of 6 laptops that can fix npm 07:57 Auto-submitting payments 09:42 40,000 orders shipped and refunded 11:16 Dropping the analytics database 11:40 dev was actually production 12:40 Updating the DNS 13:40 Losing ~$50,000 15:30 Clearing 80 million records 16:21 Web chat DDoS 18:00 URL Shortener #$@%# Ontario’s rejected licence plates for 2022 | CP24.com Boonta Vista: A “political” podcast for “smart” people 21:12 Sending an email to 20,000 users 21:42 Moving code to GitHub 23:32 “Lorem sale” 26:08 2,000 SMS messages 27:00 International shipment of kiosks 28:19 Crashing production Slow DB Queries | Sentry Documentation 31:01 Hitting customers credit card limit 32:01 Infinite redirect loop 32:53 My first commit 33:23 Augmented reality game prize mistakes 35:15 A $20,000 hour 35:57 Site went down for 3 days 37:42 Accidentally truncated the prod database 38:48 Off by one error 40:05 Exposing database credentials 42:08 Delete a temp directory on prod 44:51 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Race to the Summit Wes: 100LBS Strong Magnetic Hooks Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes relate some spooky listener submitted coding horrors including updates for a large furniture retailer, pull request oversights, disallowing everything in a robots.txt, massive email fail, and more. Show Notes 00:21 Welcome 01:22 Whetting your whistle 01:52 Syntax Brought to you by Sentry 02:13 Site updates for one of the largest furniture retailers in my country 04:18 The Embarrassing Test Page Incident 05:54 The Pull Request Oversight 08:02 Making changes to a JSON file 13:11 Deploying a “disallow everything” robots.txt 14:45 GDPR Deletion 16:11 Dropping the backing disk for the production postgres 17:05 Accidentally pushing staging code as an update 18:34 Email fail 19:25 Hot mobile app prayers 22:28 Bogus ACH info 23:51 Wiring money error 26:44 Payment gateway test not production 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects. Show Notes 00:32 Welcome 01:02 Syntax Brought to you by Sentry 01:34 Introducing Brad Frost Brad Frost.com Atomic Design by Brad Frost Brad (@brad_frost) on Twitter Brad on LinkedIn Brad on Mastodon Brad on YouTube Brad on GitHub Brad Frost on CodePen Big Medium | Design for What’s Next 06:43 What is a design system? 12:12 How do you keep design and code in sync? Material Design Shopify Polaris Carbon Design System The Design System Ecosystem | Brad Frost 16:13 How do you use Shopify, WordPress, React, etc. through a design system? 19:41 How is CSS handled? 25:40 What’s the benefit of going all in on web components? 29:13 Do small startups need to worry about design systems? 33:03 How do design tokens work? 38:17 How do you deal with pushback on design systems? 41:46 How do you go outside the guidelines? 45:24 What system do you use for naming things? 49:34 How do you best document your language choices? 51:09 Supper Club questions Thinking in Systems: International Bestseller: Donella H. Meadows, Diana Wright: 9781603580557: Amazon.com: Books Miriam Eric Suzanne Zeldman on Web and Interaction Design - Famous for stating the obvious. 57:54 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Rubblebucket Shameless Plugs Frostapalooza! | Brad Frost FROSTAPALOOZA - A Concert Party Happening On August 17th 2024 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk through recent developments in AI and how they might be useful for developers, whether AI is still worthy of the hype, and whether developer jobs are at risk from AI. Show Notes 00:10 Welcome 03:10 Syntax Brought to you by Sentry 03:49 v0.dev v0 by Vercel 09:28 Anthropic and Claude Claude Syntax Listener Survey 18:02 Facebook’s Meta AI AI at Meta 18:48 Cloudflare AI Large language model (LLM) Speech to text Translation Sentiment Analysis Image classification Embedding 27:24 AI Hardware announced Rewind 29:39 Cloudflare Hugging face Hugging Face – The AI community building the future. StarCoder: A State-of-the-Art LLM for Code Vectorize: a vector database for shipping AI-powered applications 36:28 OpenAI Function calling Function calling and other API updates 38:55 GPT-4V GPT-4V(ision) system card 42:36 GitHub CoPilot 44:03 Are we still on the AI hype train? 48:27 Are our jobs at risk as developers? 52:24 Spotify DJ AI Spotify Debuts a New AI DJ 53:29 ChatGPT plugins ChatGPT plugins 55:19 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Coding App for Kids | codeSpark Academy Wes: Peter Santenello, Roblox Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about all the libraries we don’t need to use anymore thanks to their features being built into the browsers now. Show Notes 00:24 Welcome 01:55 Syntax Brought to you by Sentry 02:17 Why did people use jQuery? jQuery lukeed/polka: A micro web server so fast, it’ll make you dance! 05:12 Writing our own jQuery plugins 07:23 AJAX requests jQuery.ajax() 08:29 Express Migrating to Express 5 14:58 Underscore.JS Underscore.js 19:27 Require.js RequireJS 21:06 LeftPad Coder unpublished 17 lines of JavaScript and “broke the Internet” | Ars Technica 23:13 Grid systems 960 Grid System Susy | OddBird 26:24 Sass, Less, etc. Can Vanilla CSS Replace Sass Yet? — Syntax Podcast 603 26:58 Sockets.io Socket.IO 29:50 What else is going to get jQuery’d? 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Chris Lattner about Mojo, a new programming language for AI developers. Should developers learn Python? Where does Mojo run? What is Chris excited about in AI’s future? Show Notes 00:31 Welcome 01:05 Introducing Chris Lattner Chris Lattner’s Homepage Chris Lattner on Wikipedia Chris Lattner on GitHub Chris Lattner on Twitter Modular (@Modular_AI) / X Modular: AI development starts here Swift.org - Welcome to Swift.org 03:50 What’s the history behind the hardware? 08:10 What’s the difference between a compiled language vs an interpreted language? 12:13 Is Mojo a programming language? Mojo 🔥: Programming language for all of AI 15:12 Are Python libraries compatible with Mojo? 15:26 Why did you choose Python? 16:49 Why is AI so Python focused? 19:19 Should web developers learn Python? 21:40 Where does Mojo run? 25:05 How did you use the flame emoji for the Mojo file extension? 29:05 How does machine learning actually work? 37:36 Will Mojo be open source in some way? 39:16 How do you start developing a new programming language? 43:14 What is the future of developer jobs? 45:30 What are you excited about with AI in the future? 47:24 Supper Club questions Welcome to a World of OCaml 52:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Exercise Shameless Plugs Mojo 🔥: Programming language for all of AI 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, it’s part 2 of Wes and Scott’s reactions to the 2023 State of CSS survey including CSS frameworks, tooling, browser usage, SVG and CSS, and the CSS Awards. Show Notes 00:10 Welcome Reacting to State of CSS Survey — Syntax Podcast 672 State of CSS 2023 01:15 Syntax Brought to you by Sentry 01:29 CSS Frameworks Bootstrap · The most popular HTML, CSS, and JS library in the world. Open Props: sub-atomic styles Lightning CSS 10:57 How happy are you with CSS frameworks? 17:21 Other tools CSS Analytics - Project Wallace 19:34 Top utilities in use 24:48 Browser usage 29:01 CSS usage 33:25 Browser incompatibilities 36:42 SVG and CSS 44:28 Resources for learning CSS Kevin Powell | CSS Evangelist Fireship - Learn to Code Faster LeveUp Tutorials 46:55 Awards Panda CSS - Build modern websites using build time and type-safe CSS-in-JS 50:48 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: A Timeline of the 1970s Heavyweight Boxing Division (Boxing Documentary) / Full Boxing Timelines Wes: NEIKO 10181A Step Drill Bit Set Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk through tips for upping your home office vibe, including cable management, lighting, ergonomics, and even roller blade wheels. Show Notes 00:18 Welcome 00:46 Syntax Brought to you by Sentry 01:13 Creating a great home office Scott’s New Office × The Levelup Lodge — Syntax Podcast 461 Wes’ New Soundproof Office — Syntax Podcast 516 03:22 Lighting 06:08 Clutter and cords Alex Tech 25ft - 1/2 inch Cord Protector Wire D-Line CC-1 Light Duty Floor Cord Cover/Cable Protector Cable Clips WireRun Under Desk Cable Manager 14" 10:33 Clean 13:42 Sound absorption Bose QuietComfort 35 II review Wyze Noise-Cancelling Headphones 19:26 Ergonomics VIVO Single Monitor Height Adjustable Counterbalance Pneumatic Arm Desk Mount Stand 23:17 Roller blade wheels for your chair Office Owl Caster Wheels 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk with David East about Google’s new cloud based full-stack, multiplatform app development workflow, Project IDX. Show Notes 00:22 Welcome 01:31 Browser in the car 02:16 Syntax Brought to you by Sentry 02:24 Who is David East? David East David East David East (@_davideast) / X Learn from David East’s courses | Frontend Masters Firebase | Google’s Mobile and Web App Development Platform 04:32 What is IDX? Project IDX Flutter - Build apps for any screen Welcome to nix.dev — nix.dev documentation 13:15 What’s the experience of IDX? Nx: Smart, Fast and Extensible Build System 16:42 IDX isn’t just a toy - it’s a dev machine 20:29 What’s the offline mode like? 23:30 How are VS Code extensions handled? 27:03 Is multiplayer or project sharing on the road map? 28:45 How is latency taken care of? 31:43 This could be faster than local dev environment 36:18 Portability of your projects 42:25 What do you think about iPad coding? 44:28 Phone testing with IDX Firebase Test Lab 46:59 How is AI being integrated? 50:23 Supper Club questions Introducing Operator | Fonts by Hoefler&Co. MD IO by Mass-Driver - Future Fonts 55:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× CSS Shameless Plugs The Bad At Css Podcast 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott answer your questions about Bun, using custom auth headers, the difference between trpc, REST, or GraphQL, documenting your code, why learn Rust, and more! Show Notes Take the Syntax Survey Attend the Syntax Meetup Oct 10th in Toronto 00:00 Syntax Survey 00:24 Syntax Meetup 01:02 Welcome 01:24 Scott’s macOS bug Tauri Apps 02:19 Syntax Brought to you by Sentry 02:40 What are your thoughts on Bun? Bun — A fast all-in-one JavaScript runtime Zig Programming Language Deno, The next-generation JavaScript runtime Cloudflare Workers Netlify Connect Storybook Histoire 11:25 How can I add custom auth header for image requests done by the browser? 17:32 What are the differences between trpc, REST, and graphql? 24:48 What kind of teams would use trpc, REST, or graphql? 27:12 Are there any podcast guest opportunities on Syntax? 32:21 With no initial documentation, how do you suggest we document our intricate code, business logic, and integrations? 38:53 Rust didn’t invent this, they’re common paradigms in languages 41:05 Why Rust? Rust Programming Language 43:52 Is Scott still using his Tonal? Tonal 44:42 What did I do to make Fetch rebel against me? Proxyman 50:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Glow Up Wes: SendCutSend Shameless Plugs Scott: Syntax on TikTok 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website? Show Notes 00:26 Welcome 01:21 Syntax Brought to you by Sentry 01:41 Why do we care about Headings? How-to: Accessible heading structure - The A11Y Project 03:12 Heading design provides an outline for your website 08:45 Using H1 classes? 10:28 Is the logo an H1? 13:03 Giving an ARIA level 17:14 Can headings be visually hidden? 21:00 Benefits of good heading design 22:27 Tooling Heading outlines - ADG HTML Standard Polypane, The browser for ambitious web developers HeadingsMap - Chrome Web Store HeadingsMap – Get this Extension for 🦊 Firefox (en-US) 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Taylor Desseyn about his work as a job recruiter, how hiring has changed over the last few years, what soft and tech skills developers need, what not to do when applying, and how AI is affecting the hiring process. Show Notes 00:35 Welcome 01:10 Syntax Brought to you by Sentry 01:35 Who is Taylor Desseyn? taylor desseyn (/tdesseyn) Taylor Desseyn on LinkedIn World-class technical talent on tap | Gun.io taylor desseyn (@tdesseyn) / X Taylor Desseyn 03:49 Why are recruiters just sending emails? 05:26 How much does a recruiter make? 06:44 How have things changed in the last couple of years? 09:22 How can developers stand out when applying? 13:52 What do developers do that cost them jobs? 28:46 What soft skills are employers looking for? 32:01 What tech skills are showing up in job postings? 34:57 Are resumes dead? 40:16 How does Gun.io vet people? World-class technical talent on tap | Gun.io 43:15 How is AI changing hiring? 46:03 What’s working on social media marketing in hiring? 48:33 Supper Club questions 53:39 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Group Chat - Dee Murthy - Watch Painkiller | Netflix Official Site Shameless Plugs Guidance Counselor 2.0 | Podcast on Spotify The Unicorn Finders | Podcast on Spotify 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about the building desktop apps using Electron vs Tauri. Show Notes 00:26 Welcome 00:55 Syntax Brought to you by Sentry 01:15 Check my hair app Tauri Apps Electron Hand Mirror on the Mac App Store SoFriendly/2fhey 04:19 What is Tauri? 08:23 The experience of writing apps in Electron vs Tauri 16:17 Electron Forge 20:02 Building the same app in Electron vs Tauri 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about signs and symptoms of anxiety, what the long term effects are of anxiety, how to know if you need help, and what kinds of things you can do to deal with anxiety and uncertainty. Show Notes 00:35 Welcome 01:11 Syntax Brought to you by Sentry 02:23 Introducing Dr. Courtney Tolinski Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout — Syntax Podcast 236 Supper Club × Coding with ADHD with Dr. Courtney Tolinski — Syntax Podcast 532 04:13 What is anxiety? 06:44 Is there a difference between anxiety and just not wanting to do something? 08:58 What kinds of physical symptoms are there? 15:43 What are the longer term effects of anxiety? 17:34 How do you know if you need help with anxiety? 21:05 What can I do to solve my anxiety? Psychology Today Canada: Health, Help, Happiness + Find a Therapist Obsidian - Sharpen your thinking How We Feel Apple Reveals More iOS 17 Features Not Available Until Later This Year - MacRumors Meditation and Sleep Made Simple - Headspace Bearable Symptom Tracker, Mood Journal, & Health App BreathingApp — Personal breathing trainer for a better health 30:15 How can we recognize anxiety triggers? 33:26 What advice do you have for dealing with uncertainty? 37:54 How can I deal with keeping up with everything and feeling like I’m falling behind? 43:02 Navigating big life decisions 51:39 Supper Club questions Being Well Podcast with Dr. Rick Hanson and Forrest Hanson Celebrity Book Club with Steven & Lily on Apple Podcasts Criminality 58:01 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Fullstar Compact Vegetable Chopper - Vegetable Cutter, Food Chopper, Veggie Chopper, Onion Chopper, Vegetable Chopper With Container, Vegetable Slicer, Vegetable Cutter, Mandoline Slicer (6 Inserts): Home & Kitchen Shameless Plugs Learning Differently (@learning.differently) • Instagram photos and videos Zarlengo Foundation Learning Evaluation Center| Denver, Colorado 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes reviews his experience building with Svelte and SvelteKit including templating, data fetching, actions, managing state, request handlers, and more. Show Notes 00:10 Welcome 01:12 Syntax Brought to you by Sentry 02:11 What is Svelte vs SvelteKit From React To SvelteKit — Syntax Podcast 390 Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173 Svelte • Cybernetically enhanced web apps SvelteKit • Web development, streamlined 05:59 Templating in Svelte 18:20 Data fetching in SvelteKit 25:23 Actions 28:58 State 32:41 Binding values 36:18 Hooks 37:25 Request handlers Special elements • Docs • Svelte website/src/actions/anchor.ts at v2 · syntaxfm/website website/src/actions/click_outside.ts at v2 · syntaxfm/website 39:23 Svelte Actions 42:26 Popover API 45:33 Routing 47:22 Layouts 50:08 Styling 57:09 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Aqara Smart Lock U100 Wes: Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral) Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more! Show Notes 00:25:21 Welcome 01:31:22 Soccer update 03:52:05 Syntax Brought to you by Sentry 04:03:18 StateOfCSS.com State of CSS 2023 04:21:11 Top 5 Most Used Features 09:13:09 Drop-shadow 13:00:11 Subgrid 18:31:21 Logical properties 20:11:20 Media range 20:52:11 Object view box 23:10:14 Anchor positioning 28:21:09 Intrinsic sizing keywords 29:32:00 View Transitions API Can I use… Support tables for HTML5, CSS3, etc Astro Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580 31:43:18 Updates to colors in CSS 35:07:05 Accent color, current color 36:36:11 Scroll snap and overscroll behaviour 39:04:22 Touch action 40:16:01 Line clamp or variable font Variable Fonts 45:28:11 Accessibility features 48:33:12 :Has has jumped 49:32:11 @Property 53:52:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6) Wes: Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers Shameless Plugs Scott: Syntax Podcast (@syntaxfm) | TikTok Wes: Web Unleashed 2023 - FITC 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about how you can intercept and debug traffic going out from your computer or other internet connected devices in your home, or your garage! Show Notes 00:25 Welcome 01:55 Syntax Brought to you by Sentry 02:17 Scott’s story of wanting to intercept data Tonal 06:36 Other examples 08:38 Different types of traffic 14:52 TCP vs UDP 16:07 Why would you want to run a proxy? 24:20 Applications to use Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy Proxyman · Native, Modern Web Debugging Proxy · Inspect network traffic from Mac, iOS, Android devices with ease Intercept, debug & mock HTTP with HTTP Toolkit mitmproxy - an interactive HTTPS proxy Wireshark · Go Deep Little Snitch Capturing Modes - Fiddler Everywhere Hacksore on Twitter How I Hacked my Car :: Programming With Style 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Stuart Bloxham about how he learned to code, what his interview process was like when applying for a job, how he found the time to make it all work, and his thoughts on bootcamps and ways to learn. Show Notes 00:36 Welcome Stuart Bloxham on GitHub Stuart Bloxham on LinkedIn 02:09 How did you decide to be a web developer? 08:22 Did you have clarity when your kid was born? 10:20 What was the interview process like? 18:25 What and how did you learn? 20:28 What’s the state of bootcamps in 2023? 22:03 How important have soft skills been? 25:14 How do you know when you’re ready to apply for a job? 35:24 Do you like coding? 37:49 How did you find the time to make it all work? 41:42 How did you deal with burnout? 43:06 Supper Club questions 45:34 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Flowerhorn cichlid Shameless Plugs Stuart Bloxham’s Portfolio 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott review the projects they built during Sentry’s Hackweek: a realtime Markdown multiplayer editor, and a hardware recording button. Show Notes 00:11 Welcome 00:57 What is a hack week? 01:55 Syntax Brought to you by Sentry 03:42 Scott’s project: a multiplayer editor Liveblocks | Collaborative experiences in days, not months PartyKit | Everything is better with friends BlockNote - Javascript Block-Based text editor | BlockNote Dev toolkit for building collaborative editors – Tiptap microsoft/monaco-editor: A browser based code editor syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub Convex | The fullstack TypeScript development platform The Everything App 13:57 Multiplayer is so much easier 19:56 Wes’ project: A recording button Oracle VM VirtualBox Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac Karabiner-Elements folivora.ai - Great Tools for your Mac! Home Assistant The World’s Leading 2D and 3D Platform | Unity Pro Free Trial SendCutSend | Online Laser Cutting and Waterjet Cutting blender.org - Home of the Blender project - Free and Open 3D Creation Software 42:31 Learning to skateboard 43:59 F1 documentary follow up 45:30 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: BetterDisplay: Unlock your displays on your Mac! Wes: LOVIMAG Magnetic Hooks Heavy Duty Shameless Plugs Scott: Syntax on TikTok Wes: @WesBos on X.com 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers? Show Notes 00:24 Welcome 02:31 What’s up with CSS nesting? "CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works 👇 04:10 How does CSS nesting work? 09:23 What the ampersand does in nesting 21:05 It works with media queries 25:29 How does it work on all the browsers? 29:32 Lightning CSS Lightning CSS 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Fred Schott all things Astro with the announcement of Astro version 3, marketing open source projects, Starlight docs, keeping up to date, and making major version numbers less scary. Show Notes 00:35 Welcome 3x guest Fred Schott! Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580 Pika Pkg — Syntax Podcast 212 05:11 What is Astro? 07:37 What’s new in Astro v3? Astro 3.0 | Astro 14:18 Behind the scenes improvements in Astro v3 18:17 HMR Enhancements 20:10 What’s the hosting partner deal with Vercel? Vercel: Our Official Hosting Partner | Astro 28:04 Docs template Starlight announcement Starlight 🌟 Build documentation sites with Astro 31:28 How often do you release updates? 33:47 Marketing open source Time to suit up | Astro Shop SvelteKit • Web development, streamlined 36:18 Making major version numbers less scary 40:04 Does Astro use Vite? Vite | Next Generation Frontend Tooling 42:01 Is it different working on a framework than a tool like Snowpack? 43:53 Thoughts on cloud text editors Project IDX 47:02 How do you keep up to date? 48:43 Do you write in TypeScript? 51:31 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Factorio Shameless Plugs Astro (@astrodotbuild) 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more! Show Notes 00:11 Welcome 01:42 Scott’s butt pincher Affenpinscher 06:08 You keep missing my favorite thing about Civet Civet 07:31 What soft skills can I learn to help me in my career? HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks 12:42 Have you thought about release notes or a what’s new section? Conventional Commits How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium 15:57 Can you explain headless CMS and what the use-cases/implementations are? 19:24 Any suggestions for dealing with web components and the client’s tracking scripts How to Read Flamegraphs 🔥 Chromium F12 Profiler: The Main Thread Pane Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto 25:27 Why do we need .d.ts files in TypeScript? 30:15 What is inset in CSS? inset - CSS: Cascading Style Sheets | MDN 35:06 Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation? Anthropic \ Home Getting Started 🚀 Astro Documentation ChatGPT Plugin - AskTheCode | GPTStore.ai ChatGPT Plugin - Scraper | GPTStore.ai Overview | TanStack Query Docs Custom instructions for ChatGPT 40:59 why is the following true: the string “undefined”.includes(undefined)? 43:27 How do you organize your code directories? 48:50 Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element? 54:32 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Surge power bar Wes: Little Hippo Alarm Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about concerts, getting tired because of being old, landscaping, spinning on your head, gym updates, awful search engines and awful ethics for YouTubers, rewiring old engines, and what’s being streamed. Show Notes 00:10 Welcome 01:49 Being tired The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre 05:08 Landscaping 10:53 Gym updates 23:01 House projects 28:39 Why are search engines so awful these days? 39:20 Internet routing 45:17 Linus Tech Tips ethics and issues 48:29 Rewiring a kid’s ATV 50:49 What we’re watching The Stronger By Science Podcast Watch Full Swing | Netflix Official Site Break Point | Official Trailer | Netflix Watch Formula 1: Drive to Survive | Netflix Official Site 58:37 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The First Cat in Space Ate Pizza Wes: Steam cleaner Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Mark Erikson about his work in helping others understand shipping ESM, how to deal with permutations, whether default imports are helpful, whether TypeScript has made it easier, and what Mark’s tool stack is for building. Show Notes 00:36 Welcome 01:45 Introducing Shipping ESM with Mark Erikson Mark Erikson (@acemarke) Wes Bos on Twitter: “publishing packages that work in esm and cjs is such a nightmare. I’ve run into so many issues today and took forever to get the proper package.json exports. I can’t wait until we’re 100% esm. I think I have every single combo covered.” Mark’s Dev Blog Blogged Answers: My Experience Modernizing Packages to ESM Greatest Hits: The Most Popular and Most Useful Posts I’ve Written arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages publint 07:01 How did we get to this space in modules? 16:30 How do you deal with permutations? 22:13 Do bundlers get in the way or helping? 26:16 Are default imports useful? 30:35 Are the types wrong errors 33:41 Has TypeScript made this easier? 37:56 What’s your tool stack for building? 39:32 How do you test? 41:35 Will we ever stop bundling? 48:03 What about source maps? 52:32 Supper Club Questions What is Windows Subsystem for Linux Eagle Oceanic Next DroidSansMono NF Font 55:18 React Types has more downloads than React? 59:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Shirley Wu—Taking up space (Keynote, Outlier 2023) Shameless Plugs Replay (@replayio) Replay - The time-travel debugger from the future. 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about concerts, getting tired because of being old, landscaping, spinning on your head, gym updates, awful search engines and awful ethics for YouTubers, rewiring old engines, and what’s being streamed. Show Notes 00:10 Welcome 01:49 Being tired The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre 05:08 Landscaping 10:53 Gym updates 23:01 House projects 28:39 Why are search engines so awful these days? 39:20 Internet routing 45:17 Linus Tech Tips ethics and issues 48:29 Rewiring a kid’s ATV 50:49 What we’re watching The Stronger By Science Podcast Watch Full Swing | Netflix Official Site Break Point | Official Trailer | Netflix Watch Formula 1: Drive to Survive | Netflix Official Site 58:37 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The First Cat in Space Ate Pizza Wes: Steam cleaner Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them. Show Notes 00:11 Welcome 02:18 What are OG images? 06:19 Testing OG images Polypane, The browser for ambitious web developers Meta Tags — Preview, Edit and Generate Sharing Debugger - Meta for Developers Card Validator | Twitter Developers 08:27 Creating an OG image vercel/satori: Enlightened library to convert HTML and CSS to SVG Open Graph (OG) Image Generation | Vercel Docs Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel 09:41 Dynamically generating OG images wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses 21:16 Using Puppeteer Puppeteer | Puppeteer Puppeteer · Browser Rendering docs Cloudinary - Image and Video Upload, Store ad Monetization Fast and reliable end-to-end testing for modern web apps | Playwright 28:47 Canva API Build The Tools Behind Great Design | Canva Developers 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Aiden Bai about his work on Million.js that aims to make React a lot faster. How does Million.js make React faster? And most importantly: has Aiden ever used a VCR? Show Notes 00:35 Welcome 00:57 Introducing Aiden Bai Aiden Bai aidenybai on GitHub @aidenybai on Twitter Aiden Bai on YouTube Million.js 01:57 What is Million.js? 03:20 How does React do rendering now? 04:31 How does Million.js make it faster? 07:37 What goes into creating a compiler? 08:24 How do you go from learning JavaScript to writing compilers? 11:05 Wyze WebRTC stream work 13:13 What are you using to benchmark and test? solidjs.com js-framework-benchmark xkcd: Compiling 18:19 What does a slowly rendering site look like? 23:54 How do you handle find on page with large amounts of code? 25:32 What does 70% faster with Million.js mean? Hyper™ Warp: Your terminal, reimagined 26:44 Why are maps slow? Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion — Syntax Podcast 643 28:19 Benefits of the Macro API 31:12 Does Million.js work across the board? 33:03 Does it ever break projects? How do you test Million.js? 35:35 How do you keep up on your GitHub issues? 37:40 What other areas of tech are you interested in working on? partytown 39:32 What was the inspiration for your website? 43:52 Supper Club questions Gruvbox with Material Palette iTerm2 - macOS Terminal Replacement ××× SIIIIICK ××× PIIIICKS ××× Barbie (2023) directed by Greta Gerwig • Reviews, film + cast • Letterboxd Teenage Mutant Ninja Turtles: Mutant Mayhem (2023) directed by Jeff Rowe • Reviews, film + cast • Letterboxd Shameless Plugs Million Kitchen Sink 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott jump into part 2 of their look at Rust for JavaScript developers, including variables in Rust, type systems in Rust, signed and unsigned integers, and more. Show Notes 00:10 Welcome 00:43 Audio issue bugs 03:17 Building decks 06:06 Variables in Rust Syntax 647: Rust for JavaScript Developers - Node vs Rust Concepts let x = 5; // x is immutable let mut x = 5; // x is mutable const MAX_POINTS: u32 = 100_000; // must be defined at compile time 10:42 Type System in Rust 15:52 Types in Rust 19:06 Why does Rust have signed and unsigned integers? 23:35 Slicing strings with &str 27:35 enum 27:55 struct 28:19 Vec 29:33 HashMap and HashSet 33:00 Converting Signed to Unsigned Numbers let unsigned_value: u8 = 200; let signed_value: i8 = unsigned_value as i8; 36:12 What’s up with &str? 43:31 Rust error messages 45:28 What is a Struct? struct User { username: String, email: String, sign_in_count: u64, active: bool, } // You can create an instance of a struct like this: let user1 = User { email: String::from("[email protected]"), username: String::from("someusername123"), active: true, sign_in_count: 1, }; impl User { fn login(&mut self) { self.login_count += 1; } } 49:17 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Thermacell Patio Shield Wes: Magnet Phone Mount Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API. Show Notes 00:23 Welcome 02:14 1) Stream The Result // Create a new TextDecoder instance const decoder = new TextDecoder(); // Make the fetch request fetch('https://api.example.com/streaming-data') .then(response => { // Check if the response is valid if (!response.ok) { throw new Error('Network response was not ok'); } // Stream the response data using a TextDecoder const reader = response.body.getReader(); // Function to read the streamed chunks function read() { return reader.read().then(({ done, value }) => { // Check if the streaming is complete if (done) { console.log('Streaming complete'); return; } // Decode and process the streamed data const decodedData = decoder.decode(value, { stream: true }); console.log(decodedData); // Continue reading the next chunk return read(); }); } // Start reading the chunks return read(); }) .catch(error => { // Handle errors console.log('Error:', error); }); 06:05 2) Download Progress Download progress example 09:40 3) Cancel Streams - Abort Controller // Create an AbortController instance const controller = new AbortController(); // Set a timeout to abort the request after 5 seconds const timeout = setTimeout(() => { controller.abort(); }, 5000); // Fetch request with the AbortController fetch('https://api.example.com/data', { signal: controller.signal }) 11:32 4) Testing if JSON is returned 13:18 5) async + await + catch const data = await fetch().catch(err => console.log(err)); 14:42 6) to awaited - return error and data at top level const [err, data] = collect(fetch()) if(err) // .... await-to-js - npm 16:58 7) Dev tools - Copy as fetch 17:54 8) You can programatically create a Request, Response and Headers objects const myRequest = new Request('https://traffic.libsyn.com/syntax/Syntax_-_641.mp3', { headers: { 'Content-Type': 'text/plain', } }); fetch(myRequest)

In this supper club episode of Syntax, Wes and Scott talk with Andrew Lisowski about working on Descript, web streams vs local storage, using state machines, writing CSS with Radix, monorepos, and more. Show Notes 00:35 Welcome 01:07 What is Descript? Descript | All-in-one video & podcast editing, easy as a doc. Work — Sandwich 02:21 Who is Andrew Lisowski? Andrew Lisowski (@HipsterSmoothie) / X hipstersmoothie.com Descript (@DescriptApp) / X devtools.fm 04:51 How does Descript interact with the webcam? 08:52 Web streams vs local first Web Streams Explained — Syntax Podcast 587 10:06 How are you exporting video? GitHub - Yahweasel/libav.js: This is a compilation of the libraries associated with handling audio and video in ffmpeg—libavformat, libavcodec, libavfilter, libavutil, libswresample, and libswscale—for emscripten, and thus the web. Riverside.fm - Record Podcasts And Videos From Anywhere 14:40 How does Descript deal with recording fails? 17:17 How does Descript design and build the UI? 19:37 What did you like about state machines? XState - JavaScript State Machines and Statecharts 24:12 How are you writing your CSS with Radix? Themes – Radix UI Home | Open UI 30:30 How does the marketing site’s tech stack compare? 31:44 Playwright vs Cypress Fast and reliable end-to-end testing for modern web apps | Playwright JavaScript Component Testing and E2E Testing Framework | Cypress 36:26 What tech do you use for monorepos? 37:01 What’s your build tool? Workspaces | Yarn - Package Manager Turbo webpack 40:18 Moving to the web means moving things to the backend 41:37 Descript focuses AI tools on helping creators Eye Contact: AI Video Effect | Descript 50:50 Supper Club questions Topre Switch Mechanical Keyboards REALFORCE | Premium Keyboard, PBT, Capacitive Key Switch Iosevka Github Dark High Contrast - Visual Studio Marketplace 56:21 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Lexical shadcn/ui Shameless Plugs devtools.fm 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about new approved and proposed JavaScript API changes including Promise.withResolvers, .at(), Immutable Array Methods, Array.fromAsync, and more. Show Notes 00:10 Welcome 04:55 What are we going to cover? 06:10 Promise.withResolvers 09:40 .at() You probably knew about JavaScript’s new .at() method for accessing array items. Did you know it works for strings too? @IAmAndrewLuca 15:59 Immutable Array Methods Wes Bos: "🔥 Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3. .toReversed() .toSorted() .toSpliced() - remove items .with() - replace items 21:48 Array.fromAsync Proposal for array.fromAsync 27:15 Array Grouping Proposal for Array grouping 31:04 Observable Events? Observable Events? 35:28 Import Attributes 39:21 v.emplace method 41:15 Decorators Proposal for Pattern Matching 45:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Artifact.news Wes: LED lights for bikes Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is. Show Notes 00:25 Welcome 01:00 Are decorators finally here? TC39 proposal How this compares to other versions of decorators 06:47 What are use cases for decorators? 10:55 How do you define a decorator? 14:20 Auto Accessor on classes @loggged class C {} on fields class C { @logged x = 1; } Auto Accessor class C { accessor x = 1; } sugar for below class C { #x = 1; // # means private get x() { return this.#x; } set x(val) { this.#x = val; } } Can be decorated and decorator can return new get and set and init functions function logged(value, { kind, name }) { if (kind === "accessor") { let { get, set } = value; return { get() { console.log(`getting ${name}`); return get.call(this); }, set(val) { console.log(`setting ${name} to ${val}`); return set.call(this, val); }, init(initialValue) { console.log(`initializing ${name} with value ${initialValue}`); return initialValue; } }; } // ... } 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

Can you have a Vercel like experience on your own AWS? Scott and Wes talk with Brandon Bayer about Flightcontrol - what it is, how to use it on your app, pricing, and more. Show Notes 00:32 Welcome 01:28 Who is Brandon Bayer? Brandon 🚀 Flightcontrol (@flybayer) / X Flightcontrol (@Flightcontrolhq) / X Blitz.js - The Missing Fullstack Toolkit for Next.js Flightcontrol — AWS Without Pain Tailwind Connect 2023 | Tailwind CSS Live Event 03:00 How do you fly? 06:10 What is Flightcontrol? 10:00 Why doesn’t Amazon make it easier? 11:34 Which parts of the AWS stack should I use? 15:08 Creating the infrastructure 19:01 Ongoing deployment 20:05 What languages does Flightcontrol support? 23:35 How are events or cron handled? 25:24 What is Temporal? Open Source Durable Execution Platform | Temporal Technologies 29:05 What are Nixpacks? GitHub - railwayapp/nixpacks: App source + Nix packages + Docker = Image 35:50 How is Flightcontrol priced? How To Get Free AWS Credits - Flightcontrol 44:44 How does Flightcontrol help with scaling? Serverless Compute Engine – AWS Fargate – AWS 46:11 What are your thoughts on ReactJS, Server components? 49:57 Supper Club questions Keychron K3 Ultra-slim Wireless Mechanical Keyboard (Version 2) Learn to Code - for Free | Codecademy 57:20 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× EAA AirVenture Oshkosh | Oshkosh, Wisconsin | Fly-In & Convention Ko Tao Ko Lanta Yai Shameless Plugs Flightcontrol — AWS Without Pain 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about TypeScript just being fancy duct tape, dealing with back pain while coding, rate limits on cloud services, what to use for email provider, is Firebase a legit platform, and more! Show Notes 00:11 Welcome 03:11 The Sunday scaries 06:03 Is TypeSctipt just a bunch of fancy Duck Tape? Is TypeScript saving us? 12:29 How do you go years into programming without back pain? Hasty Treat - Stretching For Developers with Scott — Syntax Podcast 293 23:51 Why don’t cloud services provide an option to shut off services when a spending limit is reached? DigitalOcean | Cloud Hosting for Builders Vercel: Develop. Preview. Ship. For the best frontend teams 28:41 How do you choose a CSS library for any project? The most advanced responsive front-end framework in the world. | Foundation 960 Grid System 38:26 What’s happening to Level Up Tuts? Level Up Tutorials - Learn modern web development Wheels - Skateboard Wheels - 60mm Cali Roll - Shark Wheel 43:43 Not a sponsored Yeti spot 45:16 What do you do for email hosting? Google Workspace TechSoup Canada Proton Mail: Get a private, secure, and encrypted email account Outlook Microsoft 365 Plans Scheduling Software Everyone Will Love · SavvyCal Synology Photos 50:34 Is Firebase ok to run an app long term with? Firebase 58:57 Am I wrong to not do productive work intensely? 01:34 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: MagSafe Charger, Anker 3-in-1 Cube with MagSafe Wes: 6amLifestyle Headphone Hanger Stand Under Desk Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about why Threads, Instagram, and all things Facebook have what seems like really messy HTML and CSS? Show Notes 00:10 Welcome Scott on Threads Wes on Threads 00:35 Threads has got divs 02:42 Tight scoping 09:44 Avoids specificity 10:37 Dealing with ad blockers and scraping 15:45 Divs are free, what’s the big deal? 20:19 Facebook is tracking everything 27:57 React Native Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Ryan Florence about Remix, working at Shopify, the history of licensing and pricing, quitting Twitter, the state of React Server components, and more. Show Notes 00:35 Welcome Ryan Florence Ryan Florence (@ryanflorence) / X React Training React Router Docs Moved ryanflorence (Ryan Florence) · GitHub 01:42 Collarbone update 06:47 What is Remix? Remix.run 11:43 Server actions 15:33 What was the history around licensing? 20:30 Open source is weird now 22:21 Working with Shopify and Hydrogen Remixing Shopify | Remix CSS Zen Garden: The Beauty of CSS Design The Zen of CSS Design: Visual Enlightenment for the Web: Shea, Dave, Holzschlag, Molly E.: 9780321303479: Amazon.com: Books 28:04 On quitting Twitter 35:33 What’s coming up with v2 of Remix? 40:30 The reality of breaking changes 44:18 What’s the status of React Server components? 49:46 Will Remix ever have React Server components in it? 50:55 How should we be fetching our data? 53:04 Do you have a wishlist for JSX? 58:45 Supper Club questions Strapi - Open source Node.js Headless CMS 🚀 Sidekiq GitHub - i-tu/Hasklig: Hasklig - a code font with monospaced ligatures GitHub - sindresorhus/terminal-snazzy: Elegant Terminal theme with bright colors 08:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Minivans Shameless Plugs Shopify 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about JavaScript runtimes available to use, what to consider, and packages to use. Show Notes 00:10 Welcome 01:00 Scott’s glasses 03:46 All the runtimes Bun — A fast all-in-one JavaScript runtime Edge Functions Supabase Docs Edge Functions Netlify Docs Deno — A modern runtime for JavaScript and TypeScript Fast and low overhead web framework, for Node.js | Fastify What Is Edge Computing? Alibaba 05:15 A note for anyone new to JavaScript 08:40 Winter CG WinterCG 11:05 Fetch sindresorhus/ky: JavaScript HTTP client based on the browser Fetch API website/src/routes/shows/+page.svelte 14:53 URL 20:02 addEVentListener whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api · GitHub 22:53 Web streams Web Streams Explained — Syntax Podcast 587 26:03 Structured Clone Structured JSON | Worker Tools 33:43 What does JSON 5 do? 34:48 Markdown flavors 36:46 File 40:32 AbortController and AbortSignal DOM Standard DOM Standard 42:45 Packages for building linkedom - npm 44:05 Honking the Hono.dev Itty Router Itty Dev Hono.dev 55:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Macro Factor Wes: CRP Products Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about Rust, and how the concepts might translate for JavaScript developers looking to try writing in Rust. Show Notes 00:26 Welcome 01:08 Wes’ big beer bottle and Red Green RedGreenTV on YouTube 05:03 Thrift store finds 06:19 Rust in JavaScript TOML: Tom’s Obvious Minimal Language 11:07 Documentation Docs.rs Practice.rs 16:46 Memory safety 17:43 What about promises in Rust? 19:24 Error handling in Rust 27:39 What’s with the double colon? 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Andris Reinman about his work on all things email - spam, DMARC, SPF, why there’s no good CSS in email, and his current project: Email Engine. Show Notes 00:36 Welcome 01:56 Introducing Andris Reinman Andris Reinman on GitHub Andris Reinman (@andrisreinman) Nodemailer :: Nodemailer 04:34 Why is email so difficult? Free DMARC Monitoring from Postmark ConvertKit: The creator marketing platform 09:48 What has changed in email? 10:52 What are DMARK, SPF and BIMI? 18:48 Is Mailtrain an open source alternative to Mailchimp? Mailtrain-org/mailtrain: Self hosted newsletter app 22:52 Why can’t we use CSS in email? 29:05 Why is email so expensive? 32:39 How do you keep your emails out of the spam folder? 35:42 What is Email Engine? EmailEngine Email API 40:16 Is Email Engine self hosted? 41:01 How does Ethereal email work? Ethereal Email 46:16 What email client do you use? 49:44 Are any email clients harder to send to? 55:23 Supper Club questions iTerm2 - macOS Terminal Replacement 59:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Programming Internet Email: Mastering Internet Messaging Systems: Wood, David: 9781565924796: Books - Amazon.ca Shameless Plugs EmailEngine Email 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about what polyfills, transpiling, and monkey patching mean, how and when to do it, and libraries that can help you out. Show Notes 00:10 Welcome 01:07 Toast follow up 02:45 What are transpiling, ponyfill, polyfill, and monkey patching TC39 Proposals Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3 11:18 Transpiling unsupported CSS 15:11 Polyfills Popover polyfill 19:22 Polyfilling CSS 21:06 HTML polyfills 27:47 How to transpile and polyfill Babel TypeScript: JavaScript With Syntax For Types CoffeeScript Civet cronn/jsxtransformer: Pipeline for transforming JSX files using Babel.js and Uglify.js Svelte • Cybernetically enhanced web apps Polyfill.io core-js - npm 35:46 Shiv and shims Shim vs Shiv 38:16 Monkey patching 49:08 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Cable sleeve Wes: Air Purifier AliExpress Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about toast messages for validation, errors, confirmations, and more. Show Notes 00:24 Welcome 01:04 Why use these types of notifications 03:34 Old school checking stories 05:35 What kinds of toast messages are there? 10:02 Why toast? 11:38 Best practices for toast messages 17:09 Timeouts and manual close auto close 19:38 Multiple messages stacking on top of each other 22:56 Using a toast library Building a toast component react-hot-toast - The Best React Notifications in Town Real-time notification system for products | MagicBell 28:29 Form validation Form validation with HTML5 and JavaScript 33:36 HTML inputs 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Jake Champion about his work with Fastly and Polyfill, the difference between WASY and WASM, what Winter CG is, and what makes Fastly different. Show Notes 00:35 Welcome 02:06 Who is Jake Champion? Jake (@JakeDChampion) JakeChampion on GitHub 04:31 How long as Polyfill been around? 06:11 What is Fastly? Fastly Polyfill WASMTime SpiderMonkey JavaScript/WebAssembly Engine 12:09 What are people running on the edge with Fastly? 16:29 What is Winter CG compliance? Winter CG proposal 17:55 What about node API’s being in platforms 21:18 What is WASY vs WASM? 24:37 Who is Web Assembly for? 31:34 Is there anything WASM is not good for? 41:39 What makes the Fastly runtime different from others Hono Smashing Mag - Web Workers Worker Tools 47:07 Supper Club questions iTerm2 Zsh for Humans 50:26 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Luther TV Series Forrest Gump Shameless Plugs Fiddle on Fastly js-compute 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about Prisma, CSS variables in React components, JS notebooks, transcribing podcasts, keeping up with dev skills, selling a domain, and more. Show Notes 00:10 Welcome 00:42 Harassed by a big truck 03:20 Corrections and omissions Syntax 627 - Electronics for Beginners 05:57 Should I be using $executeRawUnsafe with Prisma? 09:48 unset and initial 11:54 true and false outside ARIA attributes 14:56 Is there a way to modify the CSS variables from the React component? 18:58 How do you feel about the JS notebooks landscape? Jupyter yunabe/tslab: Interactive JavaScript and TypeScript programming with Jupyter Val Town The notes app for your working memory - Stashpad Obsidian - Sharpen your thinking Light Table 27:39 Is it possible to transcribe your podcasts? World’s Most Powerful Speech-to-Text API | Deepgram 29:05 Any tips for keeping my developer skills up without burning out? 36:35 Any advice for selling a domain? Escrow.com | Never buy or sell online without using Escrow.com. 42:13 How do you update and future-proof project dependencies? Syntax 425 - Updating Project Dependencies 47:14 When I write TypeScript code, I always wonder if it’s a generally good practice to use Type-Only import when importing types? 53:54 How would you go about conditional wrapper tags in Astro, Svelte or React? 56:07 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Ancient Architects Wes: Small Rig Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about how to get help for a bug or error you’re getting in someone else’s code. Show Notes 00:26 Welcome 01:54 Building a reproduction of the error 03:55 Creating a gist Gist 04:48 Be responsive. Be ready. 08:03 Where do you go first for support? 09:44 Search for your issue first GitHub Issues 10:53 Be nice 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Steve Krouse about val.town, what it is, his philosophies on teaching people to code, the tech stack for val.town, and the benefits of inspiring kids to learn to code. Show Notes 00:36 Welcome 01:27 Who is Steve Krouse? Steve Krouse Future of Coding stevekrouse (Steve Krouse) · GitHub Steve Krouse (@stevekrouse) on Twitter Coding Classes for Kids & Teens | Coding for Kids | The Coding Space 03:06 What is Val.town? Val Town 08:35 Where did the inspiration for social dev environments come from? 12:52 WYSIWYG code vs being code first 16:30 How does val.town inspire people? 20:26 How do you prevent people abusing val.town? 24:57 What’s the UI story for snippets on val.town? 27:31 Do you plan to support express? 29:03 What’s the tech stack behind the front end of val.town? 30:35 What’s the tech stack for the back end of val.town? 34:37 How do you measure for pricing? 37:07 Who is using val.town? 42:00 What’s your methodology for teaching kids to code? 47:44 Supper Club questions GitHub - pomdtr/sunbeam: Generate powerful TUIs from simple scripts written in any language. Deno — A modern runtime for JavaScript and TypeScript A Small Matter of Programming The Unison language CodeMirror A Small Matter of Programming: Perspectives on End User Computing Stripe Press — Ideas for progress pomdtr/sunbeam: Generate powerful TUIs from simple scripts written in any language. Seymour Papert woofjs.com Bret Victor Welcome | Future of Coding Tom MacWright (@tmcw) 55:54 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× SwitchBot Wi-Fi Smart Lock Shameless Plugs Val Town 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott try to stump each other with questions about JavaScript, HTTP status error codes, memory safety, and a bit of web history thrown in. Show Notes 00:11:07 Welcome Displaced Gamers 00:46:00 In which year was JavaScript introduced? 02:59:16 What status code is returned by server when a resource isn’t found? 03:32:00 Which http status code indicates the client must authenticate itself? 04:34:17 What is a pseudo class and give an example? 05:15:11 What JavaScript function allows you to delay the execution of a function? 06:02:06 Who first proposed using separate style sheet language for the web? 08:08:14 Which of the following statements about JavaScript strict are true? 08:50:11 What is event driven programming in Node.js? 10:26:08 In GraphQL, how do you mark a field as deprecated? 10:47:24 How does xHTML differ from HTML? 11:48:21 Which of the following statements is true about objects in JavaScript? 13:20:19 What is a type erase in TypeScript? 14:21:23 In TypeScript which syntax can be used to define a user defined type guard? 16:02:12 What is a closure in JavaScript? 17:40:00 Which node.js module provides asynchronus file I/O? 18:54:08 What does memory safety mean? 21:57:11 What does http2 introduce to improve speed? 23:58:05 What are strategies for optimizing HTML5 video? 26:28:11 Which of the following is not a correct way to create a new object? 28:13:20 What is the difference between function declaration and function expression? 30:49:11 What is the value of this inside an arrow function defined in a non-arrow function? 31:22:11 What is a type guard? 33:03:11 What is the order of execution in JavaScript? 35:11:01 Which version of ecmascript was scrapped? 39:41:00 What is the result of the following comparison in JavaScript? 41:37:21 What were the major criticisms of CSS in it’s early days? 46:48:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Projector Wes: USB plug Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about various AI tools for developers that are available. Show Notes 00:25 Welcome 01:36 AI creeping into real life 04:03 Cody AI Cody - Business AI Employee Trained on Your Knowledge Base Sourcegraph 06:24 How AI coding help works 09:57 Amazon Code Whisper AI Code Generator - Amazon CodeWhisperer - AWS Amazon Code Whisperer VS Github Copilot 10:44 Copilot Labs GitHub Next GitHub Next | GitHub Copilot Labs 14:25 LintRule Lintrule 18:06 Open Commit di-sukharev/opencommit: Auto-generate impressive commits with AI in 1 second 24:03 Code Geex CodeGeeX - A Multilingual Code Generation Tool - CodeGeeX Ghostwriter - Code faster with AI - Replit Meaningful Code Tests for Busy Devs | CodiumAI 30:20 Tab9 and Kite AI assistant for software developers | Tabnine Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More! — Syntax Podcast 364 33:06 Sloppy prompt example 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Colby Fayock about Cloudinary’s new AI tools, media flow, removing backgrounds, using AI for video templates, and Colby’s stack for creating YouTube content. Show Notes 00:36 Welcome 01:11 Who is Colby Fayock? ColbyFayock.com Colby Fayock (@colbyfayock)on Twitter ColbyFayock - Twitch colbyfayock on GitHub Colby Fayock (@colbyfayock) • Instagram 01:57 What is Cloudinary? Image and Video Upload, Storage, Optimization and CDN 03:03 What’s with the space jellyfish? 03:52 How is Cloudinary using AI for the web? Developer resources for using images and videos in your apps 09:54 What is media flow? 13:00 Who is the target audience for AI tools from Cloudinary? 17:03 Removing backgrounds Remove Background from Image for Free – remove.bg iPhone Messages stickers: How to make and use them - 9to5Mac 21:14 Cloudinary’s Video API ascorbic/unpic-img: Multi-framework responsive image component 22:44 Function calling in OpenAI 26:22 How do you deal with the random generation of AI? 29:00 What are the community SDKs for Cloudinary? 37:04 What’s your process for creating content for YouTube? 42:49 Supper Club Questions Open Broadcaster Software | OBS Facecam Pro – Elgato Recut — Automatic Video Editor Night Owl - Visual Studio Marketplace iTerm2 - macOS Terminal Replacement Oh My Zsh - a delightful & open source framework for Zsh 51:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Ready To Drink Cold Brew Coffee | Trader Joe’s Shameless Plugs Colby Fayock on YouTube 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about what headless components are, the why and when to use headless components, and how to best implement them. Show Notes 00:07 Welcome 02:33 Tailwind Connect Tailwind Connect 2023 | Tailwind CSS Live Event 04:37 Headless component overview Downshift Headless UI 06:57 A country dropdown component 12:52 Possibly like Svelte actions? 18:46 What do headless components provide? 19:13 Examples of headless component projects Microsoft Edge Demo 24:24 How does this compare to web components? Tanstack Table Tanstack Virtual 26:29 Checking out Shoelace Shoelace 28:42 Figma announcements What’s New in Figma 31:21 What does headless mean? 36:24 SIIIIICK ××× PIIIICKS ××× 41:20 AI Voices ××× SIIIIICK ××× PIIIICKS ××× Scott: Hacker News Recap /Hacker News Recap on Apple Podcasts Wes: Calipers Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about what Lightning CSS is, how it works, and why you should consider using it in your projects. Show Notes 00:25:22 Welcome 01:04:11 Overview of Lightning CSS Lightning CSS Devon Govett (@devongovett) Parcel 04:56:11 What’s in Lightning CSS? OKLCH 21:39:11 CSS Layers 24:57:14 Text decoration 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Armin Ronacher about his contributions to open source, queues and messaging in apps, scaling up a queue, and how it all works at Sentry. Show Notes 00:35 Welcome 01:49 Who is Armin Ronacher? Armin Ronacher mitsuhiko (Armin Ronacher) Armin Ronacher (@mitsuhiko) Armin Ronacher Armin Ronacher Apache Kafka 04:11 What are queues and what are they used for? 08:02 Do you listen or poll for updates in the queue? 12:49 Does this help when a provider goes down? 18:31 How do you architect a queue? 20:20 How does it scale up? 27:05 How does Sentry manage all the data flowing in from events? Redis Message Broker | Redis Enterprise Messaging that just works — RabbitMQ Using RabbitMQ — Celery 5.3.1 documentation 33:45 How do you visualize the data? 37:15 Edge case that Sentry had to fix 40:22 How are you using Rust? Rust Programming Language 43:32 Why is Python so popular in the AI space? 45:17 What do you think about JavaScript on the server? 48:02 Supper Club questions 50:44 How do you stay motivated with programming? ××× SIIIIICK ××× PIIIICKS ××× Bilderbuch Bilderbuch on Spotify Shameless Plugs Rye - An Experimental Package Management Solution for Python 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about the benefits and potential drawbacks of using an ORM on your next project, as well as what some of the popular ORMs are. Show Notes 00:10 Welcome 00:39 Dental cleanings 03:00 What’s an ORM? 05:51 Benefits of using an ORM 12:54 Validation in ORM 19:18 What about Types? 23:44 Popular ORMs Prisma Sequelize Objection.js Knex.js DrizzleORM - next gen TypeScript ORM Mongoose ODM v7.3.1 TypeORM waterline.js 42:41 Potential downsides to using an ORM 45:53 Database schemas 52:30 Hooks or events 55:27 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave with Tim Robinson Wes: Wise, Formerly TransferWise: Online Money Transfers Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about where you should register a domain name, explain DNS, and the process for moving a domain from one registrar to another. Show Notes 00:25 Welcome 02:04 Domain name registration vs DNS 03:58 Domain name flattening 05:07 Domain name privacy 05:31 Proxy registrations 06:44 Bait and switch registrars 11:56 Domain registrars we found 13:09 NameCheap and Spaceship Namecheap Spaceship 17:42 GoDaddy GoDaddy 19:26 Ghandi Gandi.net 21:16 Porkbun Porkbun 22:18 Hover Hover.com 24:24 Name Name.com 26:24 Cloudflare Cloudflare 28:04 What’s the process for moving d iwantmyname DNSimpleomains to a new registrar? 30:38 I Want My Name and DNS Simple 33:05 Finding domain names 37:28 What would you pick to register a domain today? 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Dustin Schau about Netlify Connect, Gatsby, GraphQL, and more. Show Notes 00:35 Welcome 01:20 Who is Dustin Schau? Dustin Schau (@SchauDustin) Develop and deploy websites and apps in record time | Netlify 02:49 Is Valhalla from Gatsby? How to Source Content from a Headless CMS | Gatsby Valhalla Content Hub | Gatsby Netlify Connect Brings All Content Sources & CMS Apps Together 05:41 Valhalla is now Netlify Connect 09:32 How often should you scrape or cache from another API? 10:36 What about auth? 13:41 Will Netlify Connect be open source or paid? 18:48 Is GraphQL it? Overview | urql Documentation GQty 22:35 What odd data sources are you trying to connect? 26:06 How does Gatsby send out to APIs? 29:00 What CMS should people use? The Markdown CMS | Tina The platform to bring your best ideas to life | Contentful The Composable Content Cloud - Sanity.io 31:22 What do you think of component based CMS? SEO Enterprise Rank Tracker - A Keyword Rank Tracking Tool Like No Other | Nozzle.io 35:36 What are your thoughts on the React ecosystem? 43:33 What’s the future for Gatsby? 46:14 Supper Club questions folivora.ai - Great Tools for your Mac! Noodlesoft – Noodlesoft – Simply Useful Software Dank Mono: The coding typeface for aesthetes DSchau/dotfiles: :wrench: .files, including ~/.macos — sensible defaults for macOS development (catered to Node.js) Deploy app servers close to your users · Fly Hono - Ultrafast web framework for the Edges Stream Movies & TV Shows | Plex The Free Software Media System | Jellyfin 56:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Arc Browser Resend React Email Shameless Plugs Netlify Netlify Connect 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about rate-limiting an API, using Wasp, Enums in TypeScript, styling React projects, using Edge functions, and more. Show Notes 00:11 Welcome 01:53 Connecting at conferences JSNation – the main JavaScript conference of 2023 RenderATL 2023 | May 31 - June 2, 2023. | 80+ Speakers 04:10 What technique do you use for consuming a rate-limited API? 07:58 Is Wasp-lang.dev ticking all the boxes for an awesome full-stack JavaScript framework? Wasp 14:36 How do you guys feel about skeleton UIs? Skeleton | Open UI 19:10 How can i forward my http only auth cookies to my backend API? 22:28 What’s your opinion on using Enums in TypeScript? 29:46 How much off the clock time away from coding related activities do you have in a typical week? 37:10 What’s the best approach for styling React projects? 42:49 Donut scoping Scope donuts | Stubbornella 45:21 How do I add user registration and content uploading features to a website? Next.js by Vercel - The React Framework Laravel - The PHP Framework For Web Artisans Image and Video Upload, Storage, Optimization and CDN RedwoodJS: The App Framework for Startups | RedwoodJS.com SvelteKit • Web development, streamlined Learn Node — The best way to learn Node.js, Express, MongoDB, and Friends AdonisJS - A fully featured web framework for Node.js 53:25 Do you see any benefits in using edge functions if your audience is local? 59:20 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: * BOJACK 37 Values 480 Pcs Electronics Component Fun Kit with Power Supply Module, Jumper Wire,Precision Potentiometer,830 tie-Points Breadboard Compatible with STM32,Raspberry Pi,Arduino : Electronics Wes: * Local and regional eSIMs for travellers - Airalo Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about AsyncLocalStorage, why more frameworks aren’t using it yet, some examples, as well as some footguns. Show Notes 00:22 Welcome 01:44 What is AsyncLocalStorage? 03:14 What is context? 07:49 Why aren’t more frameworks using AsyncLocalStorage for context for middleware? 10:16 Examples of usage 14:20 Footguns 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Nick Hehr about the fun ways to get started with micro controllers, writing JavaScript for hardware, and ideas for projects to build involving hardware and software. Show Notes 00:36 Welcome to Syntax 01:04 Introducing Nick Hehr Nick Hehr (@hipsterbrown) HipsterBrown (@[email protected]) - Toot Café HipsterBrown HipsterBrown (Nick Hehr) Nick Hehr on CodePen 03:58 Running JavaScript on microcontrollers 06:20 What was your first project that got you into this? 12:12 Is the ESP32 the most popular controller? 14:12 Where do you buy hardware? Arduino - Home Adafruit Industries, Unique & fun DIY electronics and kits AliExpress - Online Shopping for Popular Electronics, Fashion, Home & Garden, Toys & Sports, Automobiles and More products - AliExpress SparkFun Electronics Introduction 🚀 xs-dev Documentation Welcome to Robo Wizard | Robo Wizard 16:52 What are people building with boards? 18:30 What does the JavaScript look like? 22:16 Can you make a Fetch request? 25:45 What about Arduino? 31:54 What’s a good starter project? Johnny-Five: The JavaScript Robotics & IoT Platform meganetaaan/stack-chan: A JavaScript-driven M5Stack-embedded super-kawaii robot. TC53 - Ecma International dtex/j5e: Framework for embedded devices using ECMA-419, the ECMAScript® embedded systems API specification, based on Johnny-Five’s API HipsterBrown/on-air-light: An offline-first IoT on-air light for video meetings, using ESP32 & JS ESPHome — ESPHome Being in the video game with Augmented Climbing | The Kid Should See This 36:03 Emulation and debugging 39:13 What else have you made? 44:31 ESP Home 54:35 SIIIIICK ××× PIIIICKS ××× 00:32 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× The Opus Intro Kit – Fellow jdxcode/rtx: Runtime Executor (asdf rust clone) Code: The Hidden Language of Computer Hardware and Software: Petzold, Charles: 9780137909100: Books - Amazon.ca Shameless Plugs Introduction 🚀 xs-dev Documentation 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk through an introduction to electronics that you can do in your own home with microcontrollers. Show Notes 00:08 Welcome 00:52 What we’re talking about Arduino - Home ESP32 – The best products with free shipping | only on AliExpress 02:15 Airtag Sidebar 04:05 Projects We’ve Worked On 06:34 How do you run software on the microcontroller 08:50 Microcontrollers are extendable 12:05 Fixing a dryer 14:06 Sprinkler system 15:48 Microcontrollers 20:28 AC and DC Voltage 25:45 Amperage and watts 28:19 Extension cords ideally would have fuses 31:18 What’s the risk of not having enough power? 32:09 GPIO 35:45 Resistance How Resistors Work - Unravel the Mysteries of How Resistors Work! 41:12 Capacitors 42:02 Sensors 5/1pcs HLK LD2410C 24G mmWave FMCW Millimeter Wave 5M Human Presence Status Radar Sensor Motion Detection Modul High Sensitivity 46:47 Relays 48:33 Coding microcontrollers Web Serial API ESPHome — ESPHome Johnny-Five: The JavaScript Robotics & IoT Platform Espruino - JavaScript for Microcontrollers Introduction - The Rust on ESP Book Welcome to Quick.js! - quick.js 52:32 A note on Soldering 53:12 Projects for kids 54:31 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Razor blade Wes: ESP32 – The best products with free shipping | only on AliExpress Shameless Plugs Scott: Syntax Discord Wes: Wes’ Instagram 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about some of the GitHub features you may not have used very much including projects, milestones, labels, and actions. Show Notes 00:26 Welcome 01:53 That’s sick 04:05 What we’ve used in the past Trello Jira | Issue & Project Tracking Software | Atlassian 06:13 Working with Github Projects About Projects 11:57 Milestones About milestones 14:35 GitHub Labels Managing labels 19:51 GitHub Actions Features • GitHub Actions Level Up Tutorials - Learn modern web development 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Andrey Mishchenko about working at OpenAI, getting started in machine learning, what RLHF is, the impact of plugins on ChatGPT, and what the future holds for developers in a world with ChatGPT tools. Show Notes 00:33 Welcome 00:59 ChatGPT introduction 02:17 Who is Andrey Mishchenko? 03:17 What is circle packing? 05:04 When did you start at OpenAI? 06:21 Levels of interaction 08:39 How do you train the model to understand? 11:13 What’s RLHF? 13:56 What are plugins for ChatGPT? 16:11 What languages are you using to code for AI? 19:15 Did you have any idea ChatGPT would be so popular? 21:13 Did your math degree help get into language modeling? 28:34 Do Wes or Scott worry they’re going to lose their job? 33:24 How has farming been shaken up by AI? 34:59 Do you think the pace of AI will continue? 35:30 Will plugins change how people use AI tools? 41:21 What does AI do better than anything else? 49:11 Supper Club questions 55:04 SIIIIICK ××× PIIIICKS ××× Andrey Mishchenko - Member of Technical Staff - OpenAI Bing Chat (GPT-4) in Google - Chrome Web Store ChatGPT plugins Introduction - OpenAI API ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott use the fact that Svelte is being converted from TypeScript to JavaScript with JSDoc to talk about the benefits of working that way, why they are doing it, and what you can do with JSDoc that TypeScript alone doesn’t let you do. Show Notes 00:10 Welcome 01:12 Roof update 02:15 TypeScript haters need not apply 03:17 What is JSDoc? 04:27 What is our history with JSDoc? 06:37 Why is Svelte moving to JSDoc? 08:11 Why is JSDoc better than TypeScript? 12:31 You can type things you can’t in TypeScript 16:37 Param, Function and returns Descriptions 21:32 Spoiler - it’s still TypeScript 33:23 SIIIIICK ××× PIIIICKS ××× Get Started With TypeScript the Easy Way TypeScript without TypeScript – JSDoc superpowers TypeScript: Documentation - JSDoc Reference Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team Svelte repo is finally being converted from Typescript to Javascript with JSDoc If you are on a JS project and are missing the TypeScript hinting in your editor, you can still type your code with JSDoc syntax comments and VS Code will detect and use it! Sprinkle in a little JSDoc on top of your TypeScript when needed - helpful to adding descriptions to returned values, or marking things as deprecated TypeScript to JSDoc ××× SIIIIICK ××× PIIIICKS ××× Scott: Watch MerPeople | Netflix Official Site Wes: 18V ONE+ 45W HYBRID SOLDERING STATION (TOOL ONLY) | RYOBI Tools Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about all the nothing in CSS: 0 vs 0px, no, none, hidden, initial and unset. Show Notes 00:22 Welcome 01:50 The @ property 03:33 Hiding Things 10:07 Ghost Spaces 17:47 Collapsing margins 18:33 0 units vs 0 23:42 Unset and initial 27:42 HTML Bonus 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Matt Rothenberg and Idan Gazit from GitHub about GitHub Next, Copilot, AI based projects at Github, and what the future is for developers with AI. Show Notes 00:38 Welcome 01:23 Who are Matt and Idan? Matt Rothenberg @mattrothenberg Matt Rothenberg on CodePen Matt Rothenberg on GitHub) Idan Gazit @idangazit Idan Gazit vis.social Idan Gazit on GitHub 02:22 What’s the history of GitHub Next? GitHub Copilot · Your AI pair programmer ChatGPT | OpenAI 05:18 How do you come up with new ideas? 06:37 Did GitHub Copilot blow up fast? 13:18 Do we need powerful models for all situations? 16:40 How does Copilot know my codebase? Inside GitHub: Working with the LLMs behind GitHub Copilot | The GitHub Blog 21:34 What’s Copilot X? Introducing GitHub Copilot X 24:57 What is it like to have a hit like Copilot? 31:27 What is the future for developers due to AI? 35:11 What other AI based projects are you working on? 42:10 Are there any flops from GitHub Next? 46:59 How do you think about Code Brushes? GitHub Next | Code Brushes 48:46 Supper Club questions Breeze | Afternoon Labs Introduction - The Rust on ESP Book Recursive Sans & Mono Bearded Theme - Visual Studio Marketplace Zed - Code at the speed of thought Warp: The terminal for the 21st century 59:16 SIIIIICK ××× PIIIICKS ××× Shameless Plugs GitHub Next githubnext/githubnext: A public point of contact for GitHub Next Ariakit - Toolkit for building accessible UIs Liveblocks | Collaborative experiences in days, not months 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk through the work in progress on the new Syntax website, how to tackle all the moving parts, what stack they picked, AI, and more. Show Notes 00:10 Welcome 00:56 Leaky roofs 02:18 How we divided the workload for the new Syntax site Issues of Syntax v2 V2 of the website 02:55 Dark mode vs light mode 04:46 Our project management stack 06:36 High school dances 08:36 Tech stack for Syntax v2 Prisma | Next-generation ORM for Node.js & TypeScript PlanetScale: The world’s most advanced database platform 16:44 PostCSS and Sveltekit SvelteKit • Web development, streamlined Vercel: Develop. Preview. Ship. For the best frontend teams 17:57 Auth Authorizing OAuth Apps oAuth APIs Explained — Syntax Podcast 599 23:15 Transcription Otter.ai - Voice Meeting Notes & Real-time Transcription Amazon Transcribe – Speech to Text - AWS Introducing Whisper WhisperX: Automatic Speech Recognition with Word-level Timestamps (& Diarization) Speech-to-Text: Automatic Speech Recognition Google Cloud Deepgram: World’s Most Powerful Speech-to-Text API 35:54 Theming system CSS Zen Garden: The Beauty of CSS Design 43:38 AI Shownotes 53:02 Ingest process 00:24 Markdown as the source of truth 01:50 AI Embeddings Vector Database for Vector Search | Pinecone Introducing Ask Netlify: a new way of engaging with Netlify Docs with AI-Powered interactions 09:22:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Jury Duty Wes: Ted Lasso Shameless Plugs Scott: Syntax Discord 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about JavaScript executables - what is it? What’s the benefit of them? And what kind of tooling exists to support them? Show Notes 00:25 Welcome 01:12 What are JavaScript executables? 04:39 Deploying tooling 06:01 Running on a USB stick 07:57 The size 12:19 Fastly The edge cloud platform behind the best of the web | Fastly Deno — A modern runtime for JavaScript and TypeScript Bun — A fast all-in-one JavaScript runtime 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Bramus Van Damme all about CSS, what the CSS Working Group is, how he got good at blogging, setting custom property types in CSS, view transition API, and so much more. Show Notes 00:35 Welcome Bramus Van Damme 02:29 Who is Bramus? Bramus Van Damme - Developer Relations Engineer - LinkedIn Original Content – Bram.us Bramus on Twitter (@bramus) bramus on GitHub (Bramus!) 03:33 What is the CSS Working Group? CSS WG Blog w3c/csswg-drafts: CSS Working Group Editor Drafts 11:18 How did you get so good at blogging? CSS Trig functions 14:02 Scroll Driven Animations Bram.us: Scroll linked animations with scrolltimeline and viewtimeline/ Chrome Dev blog: Scroll driven animations/ MDN Animation timeline Scroll-driven-animations.style 25:53 What’s going on with Houdini? IsHoudiniReadyYet.com CSS Props and Vals 27:09 Why do you need to set a custom property type in CSS? 29:08 How do you debug values in CSS? 30:12 What is Scope Styling? 34:50 But when can I use it? 36:18 What’s the status of the view transition API? View Transitions 40:53 What are you looking forward to in CSS? 42:19 Would CSS ever get a strict mode? 47:05 Supper Club Questions ZSH - THE Z SHELL zsh-users/antigen: The plugin manager for zsh. web.dev Blog - Chrome Developers Welcome to Feedly 52:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Meetups Shameless Plugs Scroll-driven-animations.style 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about not becoming dependent on Copilot, CSS variable limitations, finding Sick Picks, lodash hate, and more! Show Notes 00:11 Welcome 00:55 Ice, ice baby 02:01 Reactathon Reactathon returns May 2-3, 2023 The edge cloud platform behind the best of the web | Fastly 04:49 Submit your question for our next potluck 05:24 How do you suggest adding form / database to Svelte? Svelte • Cybernetically enhanced web apps Astro 08:18 What can’t go into a CSS custom prop? 12:42 Are there any really good certifications for Javascript or general full stack development? 16:21 What is the most exciting thing about teaching programming for both of you? 19:37 What is the most challenging thing you have ever overcome in this field? 21:55 How can junior to mid-level devs make the most out of GitHub Copilot while avoiding getting dependent on it and hurting their abilities in the long run? 26:23 Any tips on driving a culture of code quality in a team? 30:28 How soon should Sentry be brought into a new project being built from scratch? 33:11 Is there a place where I can search through all the Sick Picks? Syntax Sick Picks 34:40 Why is box-sizing: border-box; not the default? 37:51 Is using lodash in a NextJS web application a terrible idea nowadays? 40:42 What is the best practice for storing JWT token? 43:53 Any tips on converting ajax requests to use Fetch API? patch-package - npm 45:11 Any suggestions for tips for updating a very dated React Native codebase? 50:56 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Tales of Taboo podcast Spotify / Apple Podcasts Wes: Rubber Flooring Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about the reasons your node_modules folder gets so large, and what you can do to help keep the file size down. Show Notes 00:24 Welcome 00:51 The punching bag of Javascript DaisyDisk 02:03 Spoiler alert - it’s text 04:49 What actually increases the size? 07:29 Types 09:27 Polyfills 11:09 Raycast Snippets and BetterTouchTool 12:44 Babel 15:08 Markdown 15:52 Translations 18:23 What is the solution? Raycast Bundlephobia | Size of npm dependencies Better Touch Tool Fast, disk space efficient package manager | pnpm 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style. Show Notes 00:34 Welcome 01:05 Guest introduction Adam on Bluesky Adam on Twitter 01:48 CSS buckets New CSS Relative Units · January 6, 2023 03:16 rex rch ric rlh 08:06 Gradient.style CSS HD Gradients Open Props: sub-atomic styles 13:49 What are style queries vs container queries vs state queries? una.im | Style Queries Getting Started with Style Queries - Chrome Developers CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc 18:09 Trig functions Trigonometric functions in CSS CSS Trigonometric Functions: cos() and sin(): dots on a circle 19:57 Live transitions Understand Disney’s 12 principles of animation | Creative Bloq 25:08 View transitions View Transitions Demo View Transitions API - Web APIs | MDN 26:01 Text-wrap balance CSS text-wrap: balance - Chrome Developers 26:45 Text-wrap pretty 27:44 What’s the future of the browser landscape? 31:44 nth-child(An+B [of S]) 33:06 Cascade layers 34:40 CSS Nesting 38:03 Animate discrete properties 39:42 Linear function Linear easing generator 41:33 Media query range syntax 42:04 Subgrid everywhere 44:41 Media query range and variables? UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612 45:32 env variables Hasty Treat - CSS Nesting 1 — Syntax Podcast 343 46:59 Animation composition 49:50 Select menu HTML element 52:16 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Onewheel // Future Motion Adam Argyle 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about your options for hosting your app including some of the big players, but also others you may not have heard of. Show Notes 00:11 Welcome 01:06 Explaining basic concepts in hosting providers 07:55 How is hosting priced? 10:09 The big names in hosting Amazon Web Services Google Cloud Microsoft Azure DigitalOcean | The Cloud for Builders Sales Cloud Flightcontrol — AWS Without Pain Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589 16:29 Render Render 23:50 Vercel Vercel: Develop. Preview. Ship. For the best frontend teams 28:04 Heroku Cloud Application Platform | Heroku 31:58 Digital Ocean 36:10 Linode Create your account - Linode 38:34 Netlify Develop and deploy websites and apps in record time | Netlify The Deno Show — Syntax Podcast 322 Decap CMS | Open-Source Content Management System 46:30 Fly Deploy app servers close to your users · Fly Railway 54:19 Cloudflare Cloudflare - The Web Performance & Security Company | Cloudflare 00:43 Deno deploy Deno Deploy | Deno 03:04 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Automators - Relay FM Wes: Dropbox.com Shameless Plugs Scott: Sentry 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about Signals - what are signals and why is everyone talking about them suddenly? Show Notes 00:25 Welcome 01:40 Chipping away at projects 03:20 WTF are signals? Signals Framework reimagined for the edge! - Qwik SolidJS · Reactive Javascript Library Zone Vanilla 09:03 What are the boundaries on signals? 10:49 Why are signals so popular now? 15:57 When wouldn’t you use signals? 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 Dylan Jhaveri about his work at Mux, how Mux ingests and spits out video, and where Mux fits in a tech stack for developers working with video and audio. Show Notes 00:36 Welcome 01:27 Who is Dylan Jhaveri? Dylan (@dylanjha) The Internet’s video infrastructure | Mux Mux Player 03:04 Why did you build Mux Player? FFmpeg FFmpeg WASM 06:19 How did you chose to go with web components? CanIUse Mediasource 09:36 What is Mux? 15:20 Can you stitch or clip video via the API with Mux? 18:07 Do you think hls will be supported in Chromium or Firefox? 21:56 How does Mux process videos into 5 versions? 26:35 Is Web assembly in use for video? 27:55 Has Mux researched AI for video? 31:13 Building a podcast transcription video 36:49 Do you have to use MP4? What about webM? 39:36 Media Chrome video player Elements for building media players 44:58 What’s Mux Data? Mux Data 49:33 Slick Mux website Mux.com 52:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Cruise 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, Wes and Scott talk about UI elements and best practices with UI elements, as well as UI elements that exist in browsers. Show Notes 00:10 Welcome 01:10 Making demos for fun 02:47 Why we’re talking UI elements 03:48 Bad UI elements in the browser Syntax 602: Modals, Popups, Popovers, Lightboxes Progress 10:47 Decent UI elements in browser 19:49 Enter Open UI Open UI 34:39 Accordion hunks 38:15 Pop overs 42:15 Focus group 46:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Fishskyn Wes: Flavacol & Butter Flavoured Coconut Oil Shameless Plugs Scott: Sentry replays 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

In this episode of Syntax, Wes and Scott talk all things Bluesky, the AT Protocol it’s built in, the terminology of Bluesky, and how the API currently works. Show Notes 00:07 Welcome 00:53 Welcome to the Bluesky Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky 03:14 What could the new Twitter be? 07:56 What is Bluesky? Nostr Bluesky Twitter Blue Bluesky Staging Bluesky FAQ 10:25 Why is social media important? 14:01 What is AT Protocol? 22:06 Lexicon for Bluesky 28:10 Small group of devs building Bluesky Cravings by Chrissy Teigen | Fun Recipes & Cookware 29:54 Blocking issues 31:53 Bluesky API Samy on Darknet Diaries ep61 Shameless Plugs Scott: Sentry) 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

In this supper club episode of Syntax, Wes and Scott talk with Zach Lloyd about how Google Sheets works, why Zach wanted to build Warp, why did they use Rust to write Warp in, is Warp going to come to Windows, and more! Show Notes 00:20 Welcome 01:12 Who is Zach Lloyd? Zack on Twitter Zack on LinkedIn Warp Terminal × Next Gen Terminals — Syntax Podcast 579 Warp: The terminal for the 21st century 03:41 How does Google Sheets work? GWT 13:38 What is Warp and why did you build it? Introducing Warp 16:50 Why did you build Warp in Rust? Rust Programming Language Harfbuzz Adventures in Text Rendering: Kerning and Glyph Atlases 23:20 How would you move Warp to Windows? 26:02 How would you run Warp on the web? 31:24 How are the blocks done inside Warp? 36:23 Would Warp ever add a shell? 40:04 Is better completion support coming to Warp? 44:42 Warp AI features 52:08 Supper Club questions 56:52 SIIIIICK ××× PIIIICKS ××× Oh My Zsh - a delightful & open source framework for Zsh ××× SIIIIICK ××× PIIIICKS ××× Tonal | The World’s Smartest Home Gym Machine For Strength & Fitness Shameless Plugs Join Us | Warp 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, Wes and Scott talk about the tech stack they used to create the Syntax giveaway site for the Sentry + Syntax announcement week. What were the features of the site, how’d they generate proper codes, and how’d they stop developers from hacking the system? Show Notes 00:07 How to do a giveaway and distribute it? 04:26 Building in the spirit of Syntax 05:44 The tech stack SvelteKit • Web development, streamlined Prisma | Next-generation ORM for Node.js & TypeScript Syntax × Sentry MMXXIII | Product Blog • Sentry PlanetScale: The world’s most advanced database platform My Places - Google My Maps sveltekit-basic-auth/hooks.server.ts at main · ghostdevv/sveltekit-basic-auth Voucherify: Free Random Codes Generator 09:48 Hosted on Vercel Vercel 13:04 What are the features of the site? 19:10 Generating the codes properly 26:48 Releasing locked coupon codes 29:13 Client to server side connections 32:56 Stopping developers from gaming the giveaway 46:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Super Mario Bros. Movie (2023) - IMDb Wes: The Strong National Museum of Play Shameless Plugs Scott: Application Performance Monitoring & Error Tracking Software | Sentry 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

In this Hasty Treat, Scott and Wes talk about RPC, what it means, why are we talking about it now, tRPC, and will RPC take off? Show Notes 00:22 Welcome 01:51 What does RPC mean? 04:52 Why are we talking RPC now? 10:27 Hype around RPC Supper Club × Solid.js with Ryan Carniato — Syntax Podcast 577 11:05 Isn’t this just a REST endpoint? 13:23 Considerations around RPC 16:11 What about tRPC? Supper Club × tRPC With Alex KATT Johansson — Syntax Podcast 526 18:08 Will RPC take 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

In this supper club episode of Syntax, Wes and Scott talk with Donata and Hans Skillrud of Termageddon on GDPR, privacy policies, cookie pop ups, and the various legal and ethical reasons to implement them properly. Show Notes 00:36 Welcome 01:47 Who are Donata and Hans? Donata Stroink-Skillrud Esq., CIPP on Twitter Hans Skillrud on Twitter Termageddon Termageddon on Instagram Termageddon on LinkedIn 03:39 What are privacy policies and a terms of service? 4 Things to Look for in a Privacy Policy Generator - Termageddon Why accessibility is important when it comes to cookie consent - Termageddon 09:15 Does scrolling to the bottom and pretending to read terms work? 10:49 Do people ever read the terms of service? 15:57 Do companies ever actually get in trouble for violating privacy? 20:06 What is GDPR and the impact on small business owners? 32:30 Cookie war and pop ups 35:40 Essential cookies 42:42 Alternatives to Google Analytics The Google Analytics alternative without compromise - Fathom Analytics Self-hosted website analytics | Ackee 43:39 Denying cookies, but still able to create accounts? 48:57 Is there legal concerns with AI? Can ChatGPT (AI) write your Privacy Policy? - Termageddon 56:25 What is Termageddon? 58:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× EPIX From TV Series 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 potluck episode of Syntax, Wes and Scott answer your questions about type guards vs type casting, crypto usage, feedback for Syntax, custom status pages, SEO and metadata, uploading images, home automation, and more! Show Notes 00:12 Welcome 01:23 Scott’s new gear MT-48 Volt USB Audio Interfaces 07:36 Are type guards safer and superior to type casting? 13:51 I know you guys (lightly) rag on Crypto, but do you see any use-case there for proof-of-personhood? 23:34 Where do I give feedback outside of Twitter? User Feedback | Sentry Documentation 27:19 Do you have custom status pages created for your platforms? UptimeRobot: Free Website Monitoring Service Privacy Badger Status.io - Hosted Status Pages Statuspage | Atlassian DigitalOcean Status 35:12 Is metadata only good for SEO? Does SEO matter on pages you can only view if you’re logged in? 39:00 How do you upload images from authenticated users? 46:30 What do you think of Zed? Zed - Code at the speed of thought 53:21 I’ve got ADHD - any tips for focusing and staying on track? 56:54 How do I convince my partner to accept more home automation? 02:15 What kind of tools and processes do you use and find effective when learning? Obsidian Mind Map & Brainstorm Ideas - MindNode 06:42 Would it make any sense to use the Fetch API with a long running stream? 08:31 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Project Farm Wes: Splatypus Shameless Plugs Scott: Sentry 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

In this Hasty Treat, Scott and Wes talk about CSS Color Functions, the benefits of dynamic css color, relative color syntax, color contrast, and color mix. Show Notes 00:26 Welcome 00:49 Why we’re talking CSS Color Functions 01:57 Benefits of dynamic CSS color 03:14 Relative color syntax 06:51 Color contrast 09:26 Color mix 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 Nicholas Zakas about his creation of ESLint, what’s coming up in ESLint, and his work as a coach and mentor for programmers. Show Notes 00:34 Welcome 01:20 Guest introduction Human Who Codes Nicholas C. Zakas (@[email protected]) Twitter @slicknet nzakas on GitHub @humanwhocodes) on Instagram Human Who Codes on YouTube 04:24 Why did you want to build ESLint? 09:08 How does ESLint work? 13:25 How do you work on a project for a decade? 17:12 At what point do you pay attention to JavaScript proposed changes? 20:37 Config systems in JavaScript 31:18 ESLint in Rust? 41:07 Are we going to see ESLint for more languages? 47:06 What kind of coaching do you do for programmers? 02:46 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Apollo Neuro Shameless Plugs Understanding JavaScript Promises 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, Wes and Scott go through all the features of Sass and decide where we are at with Native CSS alternatives, giving each feature a rating of replaceable, plausible, or missing. Show Notes 00:11 Welcome 01:17 Easter updates 04:17 Getting into Sass 06:03 What is PostCSS? 09:52 CSS Variables 13:49 CSS Nesting CSS Nesting - Chrome Developers postcss-plugins/plugins/postcss-nesting at main · csstools/postcss-plugins 23:13 Colors CSS5 Color Functions — Syntax Podcast 479 29:08 CSS Looping 34:20 Mixins or extends 39:34 CSS Partials Features - PostCSS Preset Env - CSSTools 44:29 CSS Math 49:40 Functions Is Houdini Ready Yet? 52:04 Firefox and Safari support 55:08 Back to Functions 56:21 BEM Syntax 58:51 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Solar Lantern Wes: Cotton Candy Machine Shameless Plugs Scott: Sentry 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

In this Hasty Treat, Scott and Wes talk through the differences between modals, popups, popovers, lightboxes, and dialog boxes. Show Notes 00:31 Welcome 02:25 What’s popping up? 02:59 What’s a modal? 08:33 Pop overs and lightboxes 10:41 Explicit dismiss and light dismiss 11:30 Inert property inert 16:30 Backdrop pseudo element Dialog with animation 19:26 Dialog 28:12:11 Making accessibility easier const showButton = document.getElementById('showDialog'); const favDialog = document.getElementById('favDialog'); const outputBox = document.querySelector('output'); const selectEl = favDialog.querySelector('select'); const confirmBtn = favDialog.querySelector('#confirmBtn'); // "Show the dialog" button opens the modally showButton.addEventListener('click', () => { favDialog.showModal(); }); // "Favorite animal" input sets the value of the submit button selectEl.addEventListener('change', (e) => { confirmBtn.value = selectEl.value; }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', () => { outputBox.value = `ReturnValue: ${favDialog.returnValue}.`; }); 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 Nate Weinert, creator of Tamagui, about what Tamagui is, how styling works in React native, building and designing the Tamagui website, and more. Show Notes 00:29 Welcome 01:22 Who is Nate Weinert? Nate (@natebirdman) natew on GitHub Tamagui — React Native + Web UI kit tamagui: The worlds fastest React UI kit also happens to work on Native + Web seamlessly 🙏 02:34 What is Tamagui? 04:02 How does styling work in React native? 05:35 What is React native web? 08:27 What does Tamagui do besides styling? 14:38 How did you build and design the Tamagui website? Stitches — CSS-in-JS with near-zero runtime Next.js by Vercel - The React Framework 16:50 What are the docs made with? 20:25 What are Atomic Styles? 26:16 How is layout handled in react native? 29:26 Where are things going in the React world? App.js Conference 2023 react-native-reanimated - npm 37:45 Supper Club questions iTerm2 - macOS Terminal Replacement 47:15 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× ABEO Footwear - Shop Biomechanical Sandals, Shoes and Orthotics Shameless Plugs foobully - Twitch Tamagui — React Native + Web UI kit 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 the 600th episode of Syntax, Wes and Scott talk about the big announcement about Syntax’s future, exciting new opportunities coming for the show, and more! Show Notes 00:11 Scott’s big announcement 00:58 Our big announcement 01:39 Guest introduction David Cramer (@zeeg) Application Performance Monitoring & Error Tracking Software | Sentry Sentry (@getsentry) 02:28 Background on how we got here 05:53 What does this mean for the podcast? 08:58 Why did Sentry want to partner with Syntax? 15:39 What does this mean for more + better Syntax? 18:56 We want to hear from you 23:17 Clarifications 23:42 What’s David Cramer’s background? 31:44 Helping spread the Syntax vibe World Famous HOTBOYS 35:40 Silly questions 37:52 What’s the ROI on Wes’ TikToks? 38:37 Is Syntax going to become purple? 40:46 The new Syntax website 47:16 Giveaway coming! 51:32 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× David Cramer: Vitest | A blazing fast unit test framework powered by Vite Scott: Valley Heat Podcast - A Podcast About The Neighborhood Wes: CCS - The Premier Online Skate Shop for Skateboards & Skate Gear 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

In this Hasty Treat, Scott and Wes talk all things oAuth - what is oAuth? What terms do you need to understand when working with oAuth? And tips for working with oAuth. Show Notes 00:26 Welcome Office Space HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more! — Syntax Podcast 590 01:56 What is oAuth? 05:30 Terminology in oAuth 07:52 Once you have a client ID 09:41 The callback URL 12:11 The refresh token 14:09 How a token could be stolen 17:43 State token 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 Fabian Kägy about modern WordPress development, including what the local dev experience is like, changes to the block editor, how version control is handled, and more! Show Notes 00:34 Welcome 01:20 Who is Fabian Kägy? Fabian Kägy Fabian Kaegy (@fabiankaegy) Fabian Kägy (@fabiankaegy) on Instagram fabiankaegy on GitHub 10up | finely crafted websites and tools 03:32 What is the local WordPress development workflow like in 2023? @wordpress/env Free Local WordPress Development 05:35 Why do people still want to use WordPress? Builder.io - Drag & Drop Headless CMS Website Builder — Create a Website in Minutes — Squarespace Website Builder | Wix.com Build optimized websites quickly, focus on your content | Docusaurus 09:08 Changes because of the block editor 11:50 Using a JSON file to configure design styles for your site 13:48 What is it like to develop with headless WordPress? 10up/10up-toolkit: Official 10up asset building toolkit. 16:59 Are people using WordPress for applications besides websites? 19:20 What does version control look like in WordPress? 21:57 Are plugins using the database or the file system? 23:38 Is jQuery still a must have for WordPress? 25:30 How do you enqueue JavaScript? 27:56 Does WordPress support live reloading? 28:22 How can you host WordPress on the web? WordPress Hosting | WP Engine® WordPress for the Enterprise | WordPress VIP 29:11 What is the editing experience like in WordPress in 2023? The Composable Content Cloud - Sanity.io WPML - The WordPress Multilingual Plugin Polylang – Making WordPress multilingual 34:01 How is WordPress handling CSS in 2023? 41:44 How do you make WordPress fast? Simplenote Tumblr Pocketcasts 47:23 Where can you learn about WordPress development? Learn WordPress - There’s always more to learn | Learn WordPress 10up - Gutenberg Best Practices | 10up - Gutenberg Best Practices 50:12 With blocks, do you write less PHP? ACF | Advanced Custom Fields Plugin for WordPress 50:59 Supper Club Questions 55:09 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Watch Shrinking | Apple TV+ 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, Wes and Scott answer coding questions posed by ChatGPT like what’s the difference between rem and em in CSS, the difference between a callback function and a promse in Node, what are Fastify plugins, and more! Show Notes 00:19 The premise for this Stump’d 05:46 Scott’s weekend story 09:36 What is the difference between a for loop and a while loop in JavaScript? 11:11 What is the difference between the “em” and “rem” units in CSS, and when would you use each of them? 13:15 What is the difference between a callback function and a promise in Node.js? 14:57 In JavaScript, what is the difference between a function declaration, a function expression, and an arrow function, and how do they affect the concept of hoisting? 18:39 How do you define a custom scalar type in GraphQL? 21:30 With Deno, can you provide an example of an experimental API that requires the “–unstable” flag and explain its purpose? 26:59 What’s the difference between a div and a span? 28:01 What is aspect ratio? 29:07 If it’s not supported by all browsers, how could you maintain aspect ratio? 30:11 Can you explain the purpose of the beforeUpdate lifecycle function in Svelte, and provide a simple use case for it? 32:33 What is the difference between unknown and any in TypeScript, and when should each be used? 34:42 In TypeScript, what is a mapped type, and how can you use it to create a new type that makes all properties of an existing type optional? 36:21 What are Fastify plugins, and how can they be used to extend the functionality of a Fastify application? 37:57 In React, what is the purpose of the React.memo higher-order component, and how does it help improve the performance of a functional component? 39:53 How would you create a custom HTML element that is styled with CSS and has dynamic behavior using JavaScript? 41:57 What is the Intersection Observer API, and how can you use it to implement infinite scrolling in a web application? 49:00 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Rodge Tapes Wes: Shenzhen Rebow Technology - Neon Sign 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

In this Hasty Treat, Scott and Wes talk about the fact that import maps are in Safari Technical preview, and what that means for web developers. Show Notes 00:26 Welcome 02:16 Import maps just dropped 04:09 Which browsers support it? 06:01 What is a map? 06:40 How does the syntax work? 09:35 What about dependency resolution? 10:25 What about bundlers? 13:17 How does this work with Deno? Deno — A modern runtime for JavaScript and TypeScript Import Maps | Manual | Deno whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api 20:12 What about with node? Support import maps and bare import specifiers · Issue #43326 · microsoft/TypeScript Policies | Node.js v17.9.1 Documentation 21:22 What about Typescript? 22:43 Downsides to import maps 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? 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 potluck episode of Syntax, Wes and Scott answer your questions about what to do with client projects, testing animations, evaluating front-end frameworks, tools to use when learning, and coding related injuries. 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:10 Welcome 00:25 Sponsor: Sentry 01:22 Landscaping update 02:27 What do you do when you are done a client project? 10:09 Should I keep animations in our tests so our tests match prod behavior? 14:05 How does ChatGPT fill the responses to the prompt? 17:14 What is the best way to evaluate and choose a front-end framework for a project? 21:10 Should functions only be used strictly for code that is going to be re-used? 26:03 What kind of tools and processes do you use when learning? Obsidian Roam Research – A note taking tool for networked thought. 30:19 What are your opinions on using “display: grid” simply to be able use the gap property on the elements inside? 33:57 What do you guys think of being a 1-language dev? 36:38 What are some tips you have to push back on requirements from clients? 41:11 Have you guys ever had any coding related stress injuries, like back issues or carpal tunnel? MoErgo Glove80 Wireless Split Ergonomic Keyboard GitHub Next | Hey, GitHub! 48:41 What do you think of using “Feature Flags” in the codebase to enable / disable features at runtime? 51:19 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: History for Granite Wes: GreatScott!, bigclivedotcom Shameless Plugs Scott: LevelUp Discord 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

In this Hasty Treat, Scott and Wes talk about what can be done with the OpenAI API, how to get started with it, pricing, tuning your model, and gotchas for getting started with the OpenAI API. 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:26 Welcome 01:17 Sponsor: Sentry 02:39 What is the OpenAI API? 05:11 Getting started with the API 07:41 How run OpenAI OpenAI API 14:16 GPT4 update 17:58 Tune your models 19:46 Generating questions with ChatGPT 24:30 Speech to text Otter.ai - Voice Meeting Notes & Real-time Transcription Descript | All-in-one video & podcast editing, easy as a doc. 26:12 Related API 27:33 LangChain 32:12 Save your replies 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 Travis Neilson about his work at Google, YouTube music, and where AI is at now, and where it’s headed in the future. Show Notes 00:37 Welcome 00:55 Guest introduction Travis Neilson (@travisneilson) Travis Neilson dot com Travis Neilson on Skills Gap, Design, Focus and Working at Google — Syntax Podcast 142 Awwards Conference talk https://www.youtube.com/LittleMusicBoxes 06:29 Convos about AI 07:49 How do we keep humanity with AI? 15:42 Is this the printing press or is this putting everyone out of a job? 19:21 What is Google using AI for these days? 25:59 How do we keep human interface via AI? 31:18 What is the evolution of AI chat windows? 34:05 How do you nourish your AI with data? 39:59 Halluncinations in AI 47:46 What models are exciting to you? 52:01 We’re building the window for the next generation 54:55 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Age of Spiritual Machines The Singularity is Near The Shape of Design Shameless Plugs 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, Wes and Scott answer your questions about learning web dev at an older age, making your apps look better, building a video streaming site, mono repo vs regular, and more! 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:11 Welcome 00:31 Sponsor: Sentry 01:43 DST update Tales of Taboo 03:45 Is it too late to learn web dev at an older age? 10:20 How do people produce work so quickly? 13:47 How can I make my web apps look better visually? Dribbble - Discover the World’s Top Designers & Creative Professionals Tailwind UI - Official Tailwind CSS Components & Templates CSS · Bootstrap 18:41 Not losing the niceties with not having to do a full page load 22:23 Should I use a script to generate an index JS/TS file? 24:55 If you were going to make a video streaming website, what technologies would you use? The API to Video | Mux Vimeo – Video Experience Platform Live Streaming on AWS | AWS Solutions Video on Demand | AWS Solutions Cloudflare Stream | Video streaming made easy and affordable at scale 29:11 What should I do if my boss wants me to move up the business ladder? 31:58 I’m confused about hydration in frameworks like SvelteKit. 37:07 What’re the advantages of a mono repo over a regular one? 39:50 Is it better to stay put at a place even if you’re unhappy right now? 43:13 How should I ingest tv scripts into a database? 46:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Stronger By Science Podcast Wes: Merten and Storck Carbon Steel 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

In this Hasty Treat, Scott and Wes talk about why you might need to tunnel to your local computer, and how to set that up securely. 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:24 Welcome 01:09 GitHub tarball web streams 05:09 Sponsor: Sentry 05:48 Why would I need security locally? Caddy Server 11:23 Cookie issues 13:04 Examples of things that need a secure context MDN Features restricted to secure contexts 14:58 What is tunneling? 19:22 Cloudflare Tunnels Cloudflared Cloudflare Tunnel 20:50 nGrok ngrok 23:22 Local tunnel Local Tunnel 24:55 Tunnel to Tunnel to dev - Expose your local web server to the internet with a public URL 26:02 Cloudflare subdomain 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 Dax Raad about building on serverless infrastructure, Next.js, and SST. 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:36 Welcome 01:05 Sponsor: Sentry 02:05 Who is Dax Raad? Dax on Twitter thdxr.com Tomorrow.fm Podcast SST.dev 04:22 Why doesn’t AWS have a simple way to build on top of it? 07:46 What is Open Next? Vercel Next.js Open-Next.js 10:25 How many people are involved in building Open Next? 11:14 Mapping Next.js to Amazon products 14:25 What is the edge? 18:56 Pricing in serverless 23:33 What about image assets? 25:02 Is the CDK a layer on top of something Amazon is doing? Amazon CDK 27:23 What is terraform? Terraform 28:50 What is SST and why SST? 30:54 Do I build with SST or on top of SST? 32:06 How do you do local development with SST? 37:01 What about databases with SST? 40:12 What about build pipelines? 42:28 What is Seed? Seed 43:52 Any advice for someone learning AWS? SST on YouTube 46:05 Supper Club questions Neovim Toyko Night theme Nerd Fonts Astro TypeScript Alacritty i3 Cloudflare Inside the Meteoric Rise—and More Epic Flop—of HQ Trivia 52:45 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Planetscale Shameless Plugs Rebase.tv @RebaseTV on Twitter Tomorrow.fm episode on Rebase.tv 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, Wes and Scott are in the same room together brainstorming new ideas for the Syntax.fm website: search, transcripts, video, tags, audio player, podcast hosting, and more! 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 01:08 Sponsor: Sentry 01:43 Brainstorming for Syntax’s new website 02:27 Are there good podcast websites out there? 03:26 Homepage design 07:33 How would you handle login? 09:40 Search on the site SvelteKit docs Flexsearch 13:59 Transcripts Open AI Whisper Whisper AI for podcasters 18:25 The player 21:11 Tagging 23:45 Video Linus Tech Tips - WAN Show 27:45 Show notes 29:57 Surfacing good content on the podcast 35:30 Interactions 36:25 Deploy to Podcast Host Libsyn Editor Chris on Mastodon 38:43 Code base Syntax website on GitHub 45:21 Listener feedback 46:27 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Screen door dog Wes: Apple Watch bands 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

In this Hasty Treat, Scott and Wes explain the what, why, and how of web streaming, and some of the jargon you might encounter with web streams. 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:26:11 Welcome 00:59:07 Sponsor: Sentry 01:39:17 What are Web Streams? 03:15:11 Why are web streams picking up steam lately? 04:41:21 How are web streams streaming? 09:28:11 Searching a database can use streaming 13:07:11 Web stream jargon 18:06:11 FileReader is a Stream 19:31:05 Other Types of Streams Cloudlfare HTML Rewriter 21:50:05 ReadableStream and Writable Stream 27:23:00 Creating a Writable Stream 28:39:11 TextDecoderStream 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 Eric Sartorius about his life as a digital nomad - including recently climbing Kilimanjaro, his tips for travel deals, crazy experiences while travelling, and what he brings on the road with him. Show Notes 01:02 Guest introduction EricSartorius.com Eric on GitHub PureFunc Train Surfing Get Stream 02:51 Where have you travelled? 04:27 What are the challenges of being a digital nomad? 09:08 How do you research before travel? 13:04 How do you approach applying for a job? 21:10 Do you travel with other digital nomads? R16 video 22:43 What are the best locations you’ve been? 24:21 What about health and insurance? Tiny Toones TSA post raw meat on carousel 28:21 What motivated you to want to climb Kilimanjaro? 41:14 What gear do you travel with for web dev? Osprey Talon 33 Packing cubes Outlier Google Fi Google Flights explore 51:12 Using credit card points for flights 54:45 How do you handle customs? 00:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Comfort 2.0 Czech sock shoes Shameless Plugs PureFunc @TheEpicLife on Instagram Pamoja Safaris 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, Wes and Scott talk through all the reasons your website might be slow, and how you can troubleshoot a slow website such as issues on the server, large assets, caching, CSS, JavaScript, latency, and more. 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:11 Welcome Glove 80 keyboard Raycast 03:06 Sponsor: Sentry 05:15 What makes a website slow? Uses.tech 06:29 Server Generation Times 13:33 Large payloads Redis Gzip Brotli compression Cloudflare Cloudinary 18:13 Assets being too large 23:01 Caching assets 28:25 CDN 30:35 Caching 101 37:04 Render blocking requests 40:01 CSS 42:25 JavaScript 44:51 Latency 49:17 Flash of dark mode or unsigned out 55:00 Data uris Content-visibility vite-plugin-singlefile Pool in your URL 58:11 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: 3Blue1Brown Wes: Suavecito Firme Clay Pomade 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

In this Hasty Treat, Scott and Wes talk about two new services that allow you to run Node in the browser, WebContainers + NodeBox. Why Node in the browser? How does it work? And what are the differences and limitations of the services? 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:25 Welcome 01:14 Sponsor: Sentry 02:45 Webcontainers and NodeBox Introducing WebContainers Code Sandbox CodePen Replit GitHub Codespaces 06:42 Why Node.js in the browser? 11:08 How does it work? 13:10 Clientside APIs 14:27 Using iFrame to proxy messages 17:39 Are these open source? 19:22 Differences between the two services 21:10 Wes to Figma, Scott to Penpot Figma Penpot 24:51 Limitations 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 Steve Sewell about Builder.io, Qwik, Partytown, and the tricks and tips he’s learned in building apps for the modern web. Show Notes 00:37 Welcome 01:14 Guest introduction Steve on Twitter Steve on GitHub Builder.io Builder.io/demo 04:07 Builder works with any tech stack? 06:29 Where is the structure of the site coming from? 07:28 What is Builder.io? 11:34 What’s the workflow for updating content? 13:03 What is Builder built in? Mobx 14:36 Moving from Figma to HTML 18:41 Is an app like this divs all the way down? 24:55 Stories of browser gremlins building? 26:29 Advice for anyone building drag and drop Fullstory 29:04 Does FPS play a part in development? 33:31 Do you use SVG? 36:15 Where does Qwik and Partytown fit into all of it? Qwik Partytown 46:45 How does accessibility play into Builder? 49:44 Supper club questions 54:30 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Dead Space Remake 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, Wes and Scott talk about the current landscape of AI, how AI is trained, is AI going to take your job, who’s going to train AI, and adding AI to your applications. 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:11:10 Welcome 01:58:01 Sponsor: Sentry 03:16:05 What this episode is not going to be 07:36:11 The current landscape Chat GPT GitHub Copilot Warp Completions Midjourney Bing AI From Bing to Sydney Why a Chat with Bing Left Me Deeply Unsettled Tensorflow Stable Diffusion Amazing AI Dall E 15:26:11 Timeline of growth of AI AI Timeline 16:24:11 What is a model for AI? 24:20:11 How do you use AI? 33:14:00 Code brushes 35:57:18 Midjourney Yandex 40:13:18 Is it going to take your job? Canva Cal 50:22:19 Cost prohibitive 52:26:20 Who’s going to train the robots? 57:29:12 Adding AI to your apps 58:50:11 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Motion sensor Wes: Apple Watch Ultra 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

In this Hasty Treat, Scott and Wes talk about the difference between sloppy code and clean code, how to establish rules for your code base, and how to enforce your rules. 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:24 Welcome 00:46 Sponsor: Sentry 01:51 Uses performance issues Uses.tech 04:23 Understand Sloppy Code 10:17 Syntax website timestamp issue 12:56 Establish rules to fix sloppy code 16:35 Adding a feature, do you refactor an unrelated function? 23:07 How do you enforce rules? GitHub Actions 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 Fred Schott about all things Astro v2.0. What is Astro and why should you use it? How do islands work? Images, edge, AI, error overlays, hybrid rendering, and more! Show Notes 00:40 Welcome 01:08 Guest introduction FredKSchott.com @Fredkschott on Twitter Fred on GitHub 02:17 What is Astro and why should someone use it? 04:57 What can you build with Astro? 06:11 What’s an island in content? 09:43 How do routes work with Astro? 12:30 How is Markdown handled in Astro? mdxjs 14:32 How does Astro work on the edge? 18:15 How does Astro v2 handle data fetching? 23:25 Integrations with Astro 26:38 Astro AI bot? AI Langchain 30:40 Error overlay design 36:10 What are some of the most important upgrades in v2? 37:18 Hybrid rendering 40:27 Astro’s image component Squoosh 44:39 What happened to snowpack? Pikapkg? 46:48 What is the financial model for Astro? 50:28 Supper Club questions Obsidian ××× SIIIIICK ××× PIIIICKS ××× Chat Langchain Shameless Plugs Astro Astro 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 episode of Syntax, Wes and Scott talk about why they’re digging Warp as their terminal app of choice, what the terminal is, and some of their wishlist items for Warp. Show Notes 00:09 Welcome 02:11 Disclaimers 04:17 What is the terminal? 06:54 What we’ve used for terminal Get Warp Hyper Terminal iTerm Alacritty 11:14 Terminal terminology CommandLinePowerUser.com WSL OhMyPosh OhMyZsh Starship Ion 17:35 The basic features of Warp 20:45 Autocomplete issues Fig 25:06 Sticky header 26:13 Blocks 29:17 The prompt 30:38 Sharing blocks and live sessions 32:29 AI Command Search AI Command search 35:51 Remote SSH 37:53 Window management Launch configurations 38:42 Workflows 40:19 The command palette 42:36 How does Warp make money? 43:54 Warp requires an account 46:09 Annoyances and wishlists 58:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: 50 Pokemon Cards for $5 Wes: iPad Sorter Station 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

In this Hasty Treat, Scott and Wes talk about the reasons why you should log errors, how it’s not just for debugging, where to save logs, and apps and packages to help with logging. 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:25 Welcome 01:37 Sponsor: Sentry 02:16 What is logging? Why log? 04:59 Logging isn’t just for debugging 08:22 What do we log? 13:34 What not to log 14:58 Development, staging, and production 17:36 Logging bots 19:33 Where to put logs 20:59 How to log Log Tail Paper Trail Sematext Logs DataDog Winston Pino 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 Ryan Carniato about Solid.JS, SolidStart, how web components work with Solid, why he chose JSX, and what the future of Solid is. Show Notes 00:37 Welcome 01:38 Who is Ryan Carniato? @RyanCarniato on Twitter Ryan on Dev.to Solid.JS 02:37 Why did you build Solid? Knockout.JS Marko JS 09:15 What is Solid? 12:55 What does it mean to compile to vanilla JavaScript? SolidStart Tanstack Query 19:39 What are observables and signals? 27:17 How are web components used inside of Solid? 29:38 Why aren’t we using web components more? 32:37 Why would someone pick SolidStart vs Solid? 39:07 Why did you choose JSX? 44:45 How did you build live code examples into documentation? SolidJS Docs Solid-Movies.app 47:19 What is Solid.JS built on? 53:36 What is the future of Solid? 00:39 Supper club questions 02:57 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Alice in Borderland Shameless Plugs Ryan on Twitch Ryan on YouTube 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 potluck episode, Scott and Wes talk home electicity, and then answer your questions about native web components, JS class mixins, JavaScript for marketers, managing application secrets, and more! 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:10 Welcome 01:09 Sponsor: Sentry 02:18 Electrical house update Klien Wirestrippers 07:45 Custom Syntax podcast browser Custom Syntax browser 09:29 When using browser native web components (i.e. extends HTMLElement), should the whole application be wrapped in a component tree similar to how React apps do it? Deno Using Web Components with Next or any SSR Framework 16:12 Should I avoid JS/TS class mixins? 21:07 Is it acceptable to have any string value as a value for a CSS custom property? 26:48 Should agencies consider building marketing sites with JS frameworks or is Wordpress still the best option here? 33:56 What are the main things to think about when laying the foundations for an app or project that will hopefully grow into something big? 41:24 Will Javascript skills give me an edge over other local digital marketers? WordPress Ghost 46:00 What tool, if any, do you use for publishing packages? 50:19 Do you have any suggestions on how I can find time to code more? Bit 54:17 how do you both manage your application secrets (API keys, database credentials etc) when deploying to Digital Ocean or Linode? 58:52 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Physical 100 Wes: Leviton D23LP-2RW Decora Smart Wi-Fi Mini Plug-In Dimmer 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 Hasty Treat, Scott and Wes talk about what you can do to better organize your config files. Show Notes 00:21 Welcome 02:20 Electric car ski tripping 05:01 Why config files? 07:47 Custom Vite config files Wes’ Vite config define: { __VERSION__: JSON.stringify(process.env.npm_package_version), }, 11:16 Node has failed us 13:30 Cosmic config Cosmiconfig 16:46 File nesting 21:01 Standardize on a format 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 Miško Hevery about why developers should check out Qwik, the benefits of lazy loading, sharing state between components, and other Builder.io projects like Partytown and Mitosis. Show Notes 00:35 Welcome 01:19 Guest intro Miško Hevery @MHevery 01:58 What is Resumability? 05:06 What is Qwik? Qwik Qwik City 07:03 Why would you want to make a component resumable? 12:08 Qwik code can be lazy loaded 15:28 How is server side rendering handled? 18:12 How does Vite help? 22:40 A bit more about hydration 31:03 How does the server collection information? 32:11 How do you share state between components? 34:45 How is data fetching handled? 37:47 Why are you using JSX? 41:53 Dealing with components in other frameworks Mitosis 49:21 What is Partytown? Partytown 54:30 Supper Club questions ××× SIIIIICK ××× PIIIICKS ××× Thinking Fast and Slow Shameless Plugs Builder.io 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, Wes and Scott talk about their respective processes for converting JavaScript to TypeScript in their projects, why you might want to, and tooling for moving to TypeScript. 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:10 Welcome 00:36 Sponsor: Sentry 02:23 Electrical updates 08:16 Moving to TypeScript 09:34 What are you doing with GraphQL? GraphQL Codegen 11:35 Why move to TypeScript? 12:00 Refactoring is easier 14:58 Better DX 18:42 Adding a tsconfig.json file 22:43 Figure out your tooling 23:50 Type Checker 25:13 MongoDB to TypScript Generator 26:44 Eslint-Typescript 28:03 Deprank Deprank 29:18 Refactor and rename to .ts 32:40 Typing your code 43:04 Utilities and unions 46:11 Where do you put your types? 49:29 Typing Dependencies Definitely Typed Raycast Search npm 54:26 Global types 01:08 Now what? 03:58 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Elegrp USB C Walloutlet Wes: Barrina Shop Lights 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

In this Hasty Treat, Scott and Wes talk through quick tips to improve performance of your website, and the tools available to help diagnose and fix perf issues. Show Notes 00:25 Welcome 00:50 Polish And Perf explained 02:05 What kinds of tools are available to improve performance Lighthouse in Chrome PageSpeed 09:32 Identify route caching and http caching 14:25 Partytown Partytown 15:19 Unnecessary network calls 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 Tim McNamara, author of Rust in Action about what Rust is, how to get started learning Rust, and ideas of good projects to begin learning Rust with. Show Notes 00:37 Welcome 01:26 Guest introduction Rust in Action Tim on Twitter Tim on YouTube 03:51 What was it like to write a book on Rust? 07:52 What drew you to Rust? 13:01 The approachability of Rust 21:41 What’s a good introductory project with Rust? 25:15 Why would someone learn Rust? It’s time to try WASM 40:23 What is a crate and cargo in Rust? 44:17 Running Rust in various places 50:53 Should the average web developer try Rust? 52:13 Supper club questions 54:17 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× kokako Shameless Plugs Tim McNamara - How to learn Rust 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, Wes and Scott talk through what ESM is, and why you want to move your projects to ESM. 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:10 Welcome 00:51 Sponsor: Sentry 02:32 Our experiences with ESM 06:54 Why ESM? 11:42 Top Level Await 16:16 Assert Import type eventually Scott’s Vite chunk import map 21:00 Converting code to ESM 27:22 .JS on end of files 32:12 Imports and exports 37:52 TypeScript 40:24 Bundling / Transpiling Vite Node 43:42 Dependencies Sindre thread 45:16 Publishing 53:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Egg dispenser Wes: Pure Cinema 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

In this Hasty Treat, Scott and Wes talk through their wishlist for CSS in 2023 including mixins, range selectors, fit text, robust color functions, overflown, and more. Show Notes 00:26 Welcome 01:09 Snow skate update 03:01 Mixins 05:06 Range selector 09:36 :first-of-column :last-of:column / row Ability to target items in nth-row of autofilled, implicit grid 11:43 Fit Text 13:34 Overflow-x, overflow-y control 15:36 Full support for CSS with Inline Styles 16:24 nth-of-found() 18:18 Robust Color functions 22:19 resize: both but no overflow or scroll 23:39 Animate height auto 23:57 Full attr() support 25:07 CSS References CSS References 26:59 overflown + :stuck 28:56 Multi-line selectors 30:35 Container Queries - select the container itself 32:04 :is-scrolled - select a container when it’s scrolled 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 Caleb Porzio about Livewire, Alpine.js, what is it with PHP devs making cool stuff, TypeScript thoughts, and more. Show Notes 00:36 Welcome 01:05 Buffalo and Canada History of Target in Canada 06:23 Who is Caleb Porzio? @CalebPorzio on Twitter 09:26 What is Livewire? Livewire Alpine.js HotWired 12:58 Are these MVC frameworks? 18:11 What is the process behind the scenes? 20:36 How does Hotwire handle rendering? 25:38 What is Alpine.js? 33:19 Why are PHP devs making interesting things? Laravel Tailwind 40:32 What is a nextTick in JavaScript? Microtask Guide 46:20 TypeScript thoughts 48:05 Server side rendering? Morph 49:25 Supper Club questions Ergodox Keyboards Glove 80 Keyboards Natty Theme MonoLisa 59:40 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Ugmonk Analog Shameless Plugs Make VS Code Awesome Alpine.js Livewire 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, Wes and Scott look through the results of the State of JS survey for 2022. Show Notes State of JS 2022 00:26 Welcome 01:24 Thoughts on the survey in general 04:24 Country of origin 05:53 Salaries 08:14 Higher education 08:58 JavaScript features 15:41 Browser APIs 21:15 Library Usage 26:11 Interest in frontend frameworks 28:40 Framework usage 31:41 Rendering frameworks 34:57 Build tools usage over time 39:37 Monorepo tools Moon 46:41 Backend frameworks Civet 47:42 JavaScript run times 51:01 TypeScript JavaScript balance 52:17 JavaScript flavors 57:03 Resources Fireship Dev 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

In this Hasty Treat, Scott and Wes explain what container queries are, use cases for them, new units of measurement, and possible issues with container queries. Show Notes 00:28 Welcome 01:46 What are Container Queries? Tweet about Container Queries 03:28 Use cases for Container Queries Home Assistant Can I Use? 06:11 The syntax of container queries 13:42 New units 22:27 Old iOS versions may cause issues 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 Simen & Espen from Sanity about what Sanity is, who uses Sanity, what is a content lake, how Sanity works with React or TypeScript, what GROQ is, how portable text works, and of course, the supper club questions. Show Notes 00:36 Welcome 01:37 Who are you and what is Sanity? 04:04 What kinds of services use Sanity? 06:18 What is a content lake? 07:26 Enabling code access to Sanity Studio 13:12 Implenting Sanity into a React app 14:49 What is GROQ? 21:04 Is GraphQL still the best way to query data? 25:32 Workflows in Sanity 27:48 What is portable text? 35:19 How does Sanity work with TypeScript? 38:51 Ecommerce options with Sanity 41:29 Supper club questions 50:33 SIIIIICK ××× PIIIICKS ××× Syntax 533 - Zod Schema Elden Ring Risk of Rain Sharp Syntax 526 - Supper Club with on TRPC ××× SIIIIICK ××× PIIIICKS ××× Espen bread Medium Tall Shameless Plugs Sanity Syntax code 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 potluck episode of Syntax, Wes and Scott answer your questions about HTML tags, budgeting, recession proofing your business, software dev vs software engineer, taking payments, and more. Show Notes 00:11:11 Welcome 01:29:11 When should you use article and section in HTML? 08:03:08 Does your business suffer from the economic recession? 15:47:18 How do you manage your money or budget? PlainTextAccounting YNAB Copilot 20:51:11 What should I consider using? There’s a lot of options. CommonJS, AMD, UMD, es modules? 26:30:09 What’s the difference between a software developer and software engineer? 30:36:11 How do you handle payment for your course platforms? Braintree Gumroad Paddle Stripe 38:33:23 Why is this false? “I’m a string” instanceof String 40:38:22 Do you all use Mac spaces for organizing windows? Arc 45:55:21 Do you have any tips that would help my front end team avoid rendering a DOM with invalid element nesting? 48:48:14 Would you do an episode commenting on the CSS Nesting survey released this week? Help Choose CSS Nesting Syntax 53:57:01 How do you guys go about prioritizing your work? Height.app Things 58:50:19 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Bundle of Eucalyptus Wes: Recycling bin brackets 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

In this Hasty Treat, Scott and Wes talk about the differences between building it yourself vs paying for a service to do it for you, such as cron jobs, checkout, hosting, images, video, and more. Show Notes 00:24 Welcome 03:19 Buying vs building topic 07:09 Strategy 09:50 Escapability 14:56 Services You Could Use Sentry Postmark 16:34 Efficiency of using a service 18:08 Cron jobs 20:43 Checkout Recurly Lemon Squeezy Stripe Braintree 24:29 Hosting 26:00 Screenshots and open graph images Cloudinary Vercel OG Puppeteer 29:25 Search Algolia Elastic MongoDB 33:32 Auth PasswordJS 36:55 Images 39:46 Video Hosting Vimeo Mux Amazon Kinesis 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 Katherine Mello about her journey into coding from liberal arts to bootcamp education, data visualization, and coding for a sustainable focused company. Show Notes 00:34 Welcome 01:10 Guest introduction Rolling With Kat 03:05 Bag milk? 04:34 What is Tangible Materials? Tangible Materials 07:27 How did you end up at Tangible? Full Stack Academy 10:05 Are bootcamps worth it? 14:46 How important were in person classes to you? All We Can Save Braiding Sweetgrass 20:46 What do you enjoy about data visualization? D3 Data visualization society Three.js Observable Color Wheel 27:21 Working at WeWork WeWork: Or the Making and Breaking of a $47 Billion Unicorn • Official Trailer 34:14 What is your tech stack at Tangible? 38:26 What backend would Wes use for a project? Svelte Kit Supabase Super Bass 42:10 Is there environmental web hosting? 43:47 Supper Club Questions Uplift Desks 50:22 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Climavores Shameless Plugs Drinking from the Garden Hose Hiring at Tangible Materials 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, Wes and Scott talk through their goals for 2023 including coding, tooling, courses and platforms, social media, and fitness. Show Notes 00:17 Welcome 02:38 What’s a cantina? 06:33 Scott’s coding goals Animated grid layouts Tauri 14:39 Wes’ code goals Uses Stripe Stripe Elements Shoelace 23:17 Tooling Vite Plugin List Directory Contents 26:39 Scott’s courses and platform LevelUp.video 29:36 Wes’ courses Wes Bos Tutorials 31:11 Scott’s fitness goals 35:55 Wes’ fitness goals 39:44 Apple Watch for fitness 41:54 Syntax podcast goals 50:13 Scott’s social media goals Scott on TikTok LevelUp Newsletter 52:35 Wes’ social media goals Wes on TikTok 58:02 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Menu Wes: JB Weld Clearweld, big version 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

In this Hasty Treat, Scott and Wes talk about Satisfies and as const. Show Notes 00:25 Welcome 02:04 Xmas recap Peloton 04:09 Satisfies and as const 06:16 What is const? 10:30 Helping with currency 12:44 Bos monster server update 14:13 Satisfies export const currencies = { USD: 'US Dollars', CAD: 'Canadian Dollar', EUR: 'Euro', } as const; export type Currency = typeof currencies; export type CurrencyCode = keyof Currency; 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 Sarah Drasner about her new book, Engineering Management for the Rest of Us, what it’s like moving from management to coding and back, the book writing process, and her Fortnite VS Code theme. Show Notes 00:36 Welcome 01:59 Who is Sarah Drasner? @Sarah_Edo on Twitter @Sarah_Edo on Mastodon @Sdras on CodePen @SDras on GitHub SarahDrasnerDesign.com Google Engineering Management for the Rest of Us Amazon: Engineering Management for the Rest of Us Netlify 05:25 How did you figure out what to do in management? 07:20 How do you get out of engineer’s way? The Engineer Manager pendulum 09:39 Do you spend time on making the person happy in the job? 15:51 Should managers code? 19:16 Was it difficult to step out of coding? 21:07 Why do people leave jobs? 24:04 Dealing with conflict and reorgs 28:36 What makes a good retro? 31:25 What was your process for writing a book? SVG Animations: From Common UX Implementations to Complex Responsive Animation Scrivener Egghead Mayfly Design Sarah Drasner’s articles on CSS Tricks Sarah Drasner’s articles on Smashing Magazine 43:44 Supper Club questions Sarah Drasner’s VS Code snippets and themes Creating a VS Code theme Wes Bos Cobalt 2 VS Code theme Partytown beta 53:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Paper Koi Lantern: a DIY Kit Shameless Plugs Engineering Management for the Rest of Us 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, Wes and Scott talk about their predictions in web development for 2023. Show Notes 00:07 Welcome 01:25 SSR JS sites more the norm 03:32 React doing forms 05:39 TypeScript Inferred becomes hot 08:11 Deno gets hotter 12:51 JS Runtimes Mature HTMX 15:00 We will see a new TS Type Checker written in Rust 19:20 New JS APIs 23:37 Writing towards Winter CG Spec Popular. “Worker Ready” script STC 27:05 A new JS framework SolidJS Qwik 29:44 Page Transitions API 32:40 Scott was right / Scotts gonna be right 34:06 Rust becomes more Popular 36:00 React Beta Docs launch after 5 year dev cycle 37:45 CSS Container Queries in Production 41:07 Svelte and Sveltekit Glow Up 43:38 CSS Subgrid 49:19 WASM 51:51 AI Open AI 53:16 Houdini 54:30 People souring on React, Eslint 57:47 Machine learning 01:08 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Cron Wes: Wyze Headphones Shameless Plugs Scott: LevelUp SvelteKit Tutorial 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

In this episode of Syntax, Wes and Scott talk through some TypeScript Fundamentals around type narrowing, type guards, and type predicates. Show Notes 00:24 Welcome 01:40 Rocking predicates 02:54 What is a type in TypeScript? 04:11 Type Narrowing 08:18 Type Guard 16:19 Type Predicates 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

In this supper club episode of Syntax, Wes and Scott talk with Kilian Valkhof about his work on Polypane, a browser for developers. How is Polypane built? Why does he have a focus on accessibility in Polypane? Show Notes 00:39 Welcome 01:48 Who is Kilian Valkhof? kilianvalkhof.com @kilianvalkhof on Twitter 04:50 What is Polypane? Polypane @Polypane on Twitter FromScratch 09:31 How is Polypane built? 14:18 What about the Dev tools tab? 20:15 Outline tab 23:23 Color picker 27:33 Canvas rules and guides 32:16 Accessibility background and tools 40:28 How do you parse the CSS? 42:51 What else do you want people to know about Polypane? 44:42 Supper Club questions 53:59 SIIIIICK ××× PIIIICKS ××× Shameless Plugs Fix Contrast Superposition 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, Wes and Scott revisit their 2022 predictions and see which ones they got right, and which they got wrong. 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:09 Welcome Syntax 420: 2022 Predictions 01:44 Svelte popularity Svelte Svelte Kit 04:09 Next.js data layer 05:06 Web components UI Open UI 06:19 Rust popularity Rust 10:07 Serverless and Cloud functions 10:42 Tailwind popularity 16:20 Sponsor: Sentry 17:59 Next gen dev tools 19:46 CSS Container queries 21:45 GraphQL 26:26 Deno 29:44 TypeScript 34:28 Sponsor: Sanity 35:07 Server comeback 36:21 Checkouts and payment processers Lemon Squeezy 43:05 Sponsor: Auth0 44:18 Temporal API 46:44 Remote dev thin client popularity 49:49 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: JADENS Label Maker Machine with Tape Wes: Chipolo One Spot Shameless Plugs Scott: LevelUp Svelte Kit Tutorial 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

In this Hasty Treat, Scott and Wes talk about the current state of building desktop apps with Electron or Tauri. 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. 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. Show Notes 00:33 Welcome 01:18 Sponsor: Sentry 02:47 Sponsor: Prismic 04:01 Our experience with building desktop apps Level Up Tutorials: Level 1 Electron Hair.WesBos.com 10:04 Frameworks for building apps 10:56 Tauri vs Electron Tauri Electron 23:38 Tooling vite-plugin-electron 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 Kenneth Lyerly about his career path into coding, and how he manages to hold two jobs. Show Notes 00:38 Welcome Ken.dev Ken on Github 01:59 How do you have two jobs? 09:46 When did you start a second job? 16:02 Any tips for someone wanting to switch into coding? 24:03 Do you have advice for people trying to market themselves? 31:38 What is working these days for marketing efforts? 34:47 Where can devs learn about marketing? 35:50 Barbershop culture 39:47 Supper club questions Snazzy Labs custom Touch ID button Tech Meme Ride Home podcast 44:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Traeger Grills Shameless Plugs Suavecito ResortPass 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 potluck episode of Syntax, Wes and Scott answer your questions about how to give feedback on the podcast, deciding on a business model for courses, what to do about Twitter, 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:51 Podcast feedback 04:46 Can you talk about how you made the decision to re-write LevelUp? Strangler Fig 13:54 How did you get a score for your website? Google Pagespeed 19:30 Where will we move to when Twitter implodes? Twitter Blue 26:29 Sponsor: Linode 27:06 How did you arrive at your business model? 33:15 Advice for getting into freelancing web dev? 38:49 Sponsor: Sentry 40:07 How to feel more “senior” as a developer 43:30 How do you manage notifications between various apps? Hazel 50:46 Label makers Nimbot label makers 54:14 Sponsor: Freshbooks 54:45 How are people testing node apps? JestJS Vitest Mocha ChaiJS 56:38 What are your thoughts on the TanStack Router? Tanstack Astro SvelteKit Nozzle 01:09 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Sensibo Air Wes: We Crashed 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

In this episode of Syntax, Wes and Scott talk about your options for database when you’re working with serverless. 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 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:25 Welcome 00:51 Sponsor: LogRocket 01:44 Sponsor: Prismic 03:17 Why Serverless and related databases? 07:45 Deploying on Deno Deno 08:44 Using a database with serverless functions Syntax 542 - Serverless Limitations 11:53 Using purpose built databases Planetscale Supabase Cloudflare D1 Cloudflare Key Value Store AWS DynamoDB AWS Auroa FaunaDB Neon Railway MongoDB Serverless Redis Cassandra 15:01 The results of the test 17:35 Solutions 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 Jonny Burger about why and how he built Remotion, his app that lets you create MP4 videos using React. 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. ⚡️ Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Show Notes 00:36 Welcome 01:24 Who is Jonny Burger? Jonny.io Jonny on GitHub Jonny on Twitter 03:51 Why did you create Remotion? Remotion.dev 07:36 What types of videos are people making? 10:53 What is the tech stack? Puppeteer Lottie 18:31 What is Idempotence? 19:50 What is lottie? 22:56 Motion blur trail Motion blur trail demo 25:17 Sponsor: Gatsby 26:12 Chrome rendering 29:58 When would you choose JPG or PNG? 31:43 Are you using ffmpeg in the browser? ffmpeg 36:00 Sponsor: Tuple 37:43 What player do you use for playback? 39:54 How did you take this idea to a product? 44:05 Supper Club questions LG C9 TV iTerm 50:12 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Yoga with Adriene Cosmic Kids Yoga Shameless Plugs Toopo.art 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, Wes and Scott look at the the Web Almanac’s report on the role of JavaScript on the web in 2022. 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 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 01:17 College football update 04:07 Web almanac for 2022 JavaScript in the 2022 Web Almanac 06:25 Unused JavaScript 07:47 JavaScript requests per page 09:38 Bundlers 14:01 Pages using Babel 16:01 How JavaScript is requested 19:22 Sponsor: Sentry 20:56 Loading render blocking tags 22:48 Dynamic import, web workers, source maps 24:33 Libraries and frameworks Owl Carousel Lazy Sizes 29:30 Websites using web components 31:35 Websites with JavaScript security issues 32:43 Sponsor: Auth0 33:58 Jamstack 37:09 JavaScript used by Jamstack sites 38:03 Jamstack hosting 39:46 Popular Static site generators 44:49 Progressive web apps and service workers 50:29 jQuery inside WordPress themes WeCrashed 51:13 Project Fugu Project Fugu 52:51 Web push notifications 55:49 CMSs 00:45 Sponsor: Freshbooks 01:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: White Lotus Wes: Ubiquiti 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

In this Hasty Treat, Scott and Wes talk through the various rendering methods in use today and the pros / cons of each. 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. Show Notes 00:26 Welcome 01:31 What is rendering? 02:41 Sponsor: Sentry 03:58 Sponsor: Sanity 04:55 Rendering methods 05:48 Single page application (SPA) 07:36 Multi-page Application 09:14 Static Site Generation (SSG) 11:10 Service Side Rendered (SSR) 13:08 Partial hydration 14:03 Progressive hydration 15:38 Island architecture 16:25 Progressive enhancement 18:18 Incremental Static Generation 19:12 Streaming SSR 19:53 Resumability 21:51 Edge rendering 23:11 Missing from the list 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 Vu Le about his path to working at Disney. How did he learn to code? How do you get a job at Disney? What’s the tech stack inside a Disney team? Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Show Notes 01:40 Who is Vu Le? 03:33 How did you learn to code? 04:57 How do you get a job at Disney? 09:01 Internal CMS development at Disney 10:19 What types of languages do you use internally? 15:22 Do you have a design system? 19:52 How do you handle versions and updates? 22:42 Sponsor: Tuple 23:37 Do you get involved in testing? Vitest 25:06 What are you using for GraphQL? GraphQL 25:34 How are you handling CSS? Theme UI 31:43 Does Disney do remote work? 34:38 Perks of working at Disney 38:16 Supper Club questions GMMK Pro Keyboard Santa Cruz bicycles JetBrains Mono 45:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Garden hose connectors 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, Wes and Scott talk about their preferred coding styles and preferences they use, and why. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 02:35 Function definition 06:43 File path aliases 09:36 Implicit vs Explicit Return 13:49 Array.reduce() VS literally anything else 17:37 Loop vs array method 22:55 Sponsor: Linode 23:37 Updating vs creating a new var 30:36 Iterable to Array 34:46 Sponsor: LogRocket 36:16 Destructuring vs Object.property 39:22 Destructuring Arrays vs Reference by index 41:40 Number(string) vs +string 43:35 Incrementing 45:06 Multiple ifs 47:48 Multiple ifs vs switch vs Ternary 51:05 Promises / Error Catching 53:50 if(falsy) block VS return false; 55:51 Sponsor: Freshbooks 56:26 Spaces vs tabs 58:39 Trailing commas 00:40 Semicolons 02:49 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Video Archives Podcast Wes: Ubiquiti Wifi 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

In this Hasty Treat, Scott and Wes talk about new features coming to GitHub including Hey, GitHub!, GitHub Blocks, GitHub Copilot CLI, 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. Show Notes 00:23 Welcome 01:49 Responsive web design update 03:12 Let’s go 05:32 Sponsor: Linode 06:01 Sponsor: LogRocket 07:23 GitHub Next GitHub Next 08:17 GitHub Copilot for the CLI 11:52 Synthesizing results Syntax 540 - Responsive Design Techniques 13:31 Hey GitHub Syntax 481 - Supper Club Voice Coding with Pokey Rule 16:55 GitHub Blocks 18:58 GitHub Code search 21:36 GitHub Collaborative workspaces 23:43 GitHub Copilot for your own codebase 25:10 GitHub Copilot Radar 29:15 GitHub AI Pull Requests 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 Jared Sumner about why and how he created Bun, what Zig is, and the future of Bun. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Tuple.app. Show Notes 00:37 Welcome 01:44 Who is Jared Sumner? Jarred Sumner on Twitter Bun Bun Discord Bun on GitHub 02:31 Why did you make Bun? 09:43 Using web API vs Node modules? 13:25 Do we still use npm? 15:42 Support for HTML Rewriter 16:46 Where do you see Bun being used? 19:25 Do you think someone will write a type checker? 21:18 Sponsor: Tuple 22:07 What is Zig? 24:57 Did you have a history of learning languages? 28:16 Have you ever thought of putting Bun on hardware? 29:59 Is there a package.json file in Bun projects? 31:34 What can’t Node just get faster? 32:16 What is the future of Bun? 36:27 Thoughts on types in JavaScript? 41:16 Why did you build an SQLite client into Bun? 42:54 Supper Club questions Starship Warp 48:52 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Bun meme 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 potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more! 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. 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 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:10 Welcome 01:53 TikTok update 02:46 What strategies do you use to find the good stuff? Tweetdeck 11:17 What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? 15:56 Should we use TypeScript for a new blog? 20:45 Sponsor: Sanity 21:45 Is there any reason to still use string concatenation over template literals? 26:13 What should React devs use to get initial scaffolding in place? Create React App Vite Turbo Pack 29:38 What’s the deal with Playwright? Playwright 34:28 Sponsor: LogRocket 35:19 What separates a “scripting” language from a “programming” language? 39:37:14 Sponsor: Prismic 40:23:02 Do you have any tips on how to change a defeated programmer mindset? Partydown 47:34:07 How has your use of and work in the browser changed with Arc? Arc Browser Syntax 514 - Supper Club × Arc Browser with Hursh Agrawal 49:18:15 Why would I attach an event listener with the useCapture argument as true? 51:33:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Screwless plates / 4 pack of screwless plates Wes: Shoe Boxes for Cords Shameless Plugs Scott: LevelUp TikTok Wes: Wes Bos TikTok 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, Wes and Scott talk through some of the limitations of using serverless in your project. 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. 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:23 Welcome 01:08 Sponsor: Sentry 01:59 Sponsor: MagicBell 03:11 Topic introduction 04:44 Function limit Puppeteer 08:51 Node support 10:00 Cron jobs 11:12 Local development Miniflare 11:45 Database access SQLite 12:42 Sharing code 13:07 Environmental variables Netlify environmental variables 14:37 Timeouts 15:47 Sass is expensive 17:26 Infastructure as code 19:02 Search Algolia 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

In this supper club episode of Syntax, Wes and Scott talk with Scott and Wes! Talking about BBQ, electric cars, workout equipment, home renos - but they do sneak in a bit of coding talk! 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. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. https://tuple.app/syntax Show Notes 00:37:11 Welcome 03:18:10 Saskatchewan and Saskatoon Berries Saskatoon Berry Barn 05:02:14 TV shows we’re watching Amazing Race Canada America’s Dance Crew Lakefront Luxury 12:49:12 New house vibe 18:29:06 Sponsor: Kontent 19:13:20 Sauna thoughts 22:58:24 Home gym thoughts Woodupp Tonal 40:22:16 Sponsor: Tuple 41:17:11 3D printer 44:11:09 How many things can you take on? 48:23:11 BBQ talk Amazing Ribs 55:26:11 Electric car update Ioniq 5 57:45:07 Supper Club questions Level Up Tutorials VS Code Theme Quokka VS Code Extension Quokkajs Console-Ninja 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, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:47 Clean Talk 03:55 The menu of responsive design Syntax 154 with Sara Soueidan 06:52 Responsive design basics 11:54 What should you build for first in 2022? 16:15 Shrink and grow until it looks bad 21:36 Menus in responsive 23:43 Sponsor: Linode 24:13 Grid systems 28:08 Grid and Flexbox CSS Grid Course Flexbox Course Can I Use 35:02 Sponsor: LogRocket 36:00 Container queries 45:56 FitText 49:12 How do you test these types of things? 51:15 Future techniques coming 53:28 Sponsor: Freshbooks 53:56 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Lutron Light switches Wes: Sunco Lighting BR30 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

In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up. 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. 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:13 Welcome 01:39 Sponsor: Sentry 02:41 Auth0 03:57 A bit more auth 05:24 New RFC RFC: First class support for promises and async/await 08:30 What are the basics of this proposal? 10:12 Scott gets a little Svelte-y 11:44 Why is this being proposed? 17:14 Infinite loop possibility 18:44 Why is Svelte API better in this use case? Tanstack Smooshgate 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 Ryan Dahl about Deno. Why was Deno created? What is Deno written in? How is Deno so much faster? And what’s the future of Deno? 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. ⚡️ 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. Show Notes 00:36 Welcome Tinyclouds.org Ry on GitHub Deno Deno Discord 01:18 The introduction of Node 02:51 Why are you still betting on JavaScript for the web? 05:34 Why did you make Deno? 09:04 How does TypeScript fit into the landscape? 11:40 How is Deno so much faster? 13:28 Sponsor: Sanity 14:17 What is Deno written in? 15:56 Should developers be learning Rust? 18:27 Will libraries that work on npm eventually work in Deno? 21:52 Are we going to use Node API’s or web spec? 24:31 Sponsor: Sentry 25:31 What is tooling like for Deno? WinterCG Deno VS Code Extension 29:27 What is Deno deploy? Deno Deploy 34:01 Deno’s framework Fresh 38:56 Client side vs server side rendering 41:27 Sponsor: Gatsby 42:28 What’s the future of Deno? 43:39 Supper club questions 53:30 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

In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties 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. 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 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:06 Welcome Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1 01:22 Smart home updates 04:05 Box sizing: border box 06:57 CSS Columns 09:20 Aspect Ratio Can I Use CSS Properties Rotate 09:53 Transitions and animations 13:36 Transition time 17:05 Steps as a timing function 19:01 Sponsor: Prismic 19:43 Blend modes 23:57 Responsive web design 26:31 Prefers Color Scheme 27:48 Popular breakpoints 30:57 Sponsor: LogRocket 32:06 Feature queries and @ supports 34:59 Logical and physical properties 37:59 css-in-js Sam Magura - Why We’re Breaking Up with CSS-in-JS Brad Frost - Why We’re Breaking Up with CSS in JS 42:28 Sass 43:20 Print styles 45:38 Sponsor: Sanity 46:38 Longhand properities 48:21 Non-existant properties 52:06 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Front Bumper Drillless Plate Holder Wes: 1U Server Rack 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

In this Hasty Treat, Scott and Wes talk about creating short form content for TikTok, Reels, Shorts, and tweets. What are some of the benefits and limitations of creating for vertical video, and what tools are they using to create videos. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:39 Sponsor: Sentry 02:40 Sponsor: Freshbooks 04:05 Short form content intro WesBos.com/tips Wes on TikTok LevelUp Tutorials on TikTok Scott Stolinski on TikTok 07:16 The good and the bad of short form content 17:13 Repurposing content 18:36 Content that works 21:12 Tips for making short form content 24:19 Limitations of short form content 31:49 Tools for editing Screenflow Descript Detail.co 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 recorded a live open table episode with guests calling in to talk about Wasm, building Riverside.fm, home networking, getting a job at Microsoft, Svelte and Sveltekit, htmx, and more! 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 Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch! Show Notes 00:30 Welcome 01:49 Safari aspect ratio bug 04:17 Thoughts on Vercel announcements? NextJS Conf 10:07 Gideon Riverside CTO Riverside.fm Careers 14:44 Do JS devs need to branch out? 16:52 Wasm Web Assembly (WASM) Rustlings 19:46 Sponsor: Auth0 21:03 Which company will Vercel aquire next? Guillermo Rauch Akamai Acquires Linode 27:12 Svelte Kit and Vercel 30:20 Why don’t you terminate your own ethernet cables? 30:58 How does Fly.io compare to Vercel? Fly.io 31:36 Did Wes learn Vue? 32:10 Brad jumping on the Remix train Remix 34:18 Layout shift caused by images in Markdown 38:30 Maintaining home networking Ubiquiti 44:44 Taking a course lead to a job with Microsoft Soumya’s YouTube - Geekysrm / website / Twitter 47:38 Sponsor: Appwrite 48:39 Are you still using your Synology NAS? Synology 53:53 Is Svelte ready for smaller team projects? Svelte Kit Wyze 56:03 HTMX htmx Alpine.js 01:49 Docker Wasm preview Introducing the Docker+Wasm Technical Preview WebAssembly System Interface 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 Potluck episode of Syntax, Wes and Scott answer your questions about meeting IRL, bookmarks, SSG vs SSR, domain privacy, deploying monorepos, and more. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:08 Welcome 01:20 Weather updates 02:21 How often have you gotten together in real life? Jamstack Conf Reactathon 05:33 What are people using to bookmark sites? Arc Browser 09:03 When not to use Static Site Generation (SSG), and when to use Server-side Rendering (SSR)? Svelte Kit 13:53 How do you do correct error handling to catch everything? Sentry.io 21:13 Sponsor: Sentry 22:50 Is there any benefit to using getters and setters in classes set them over plain methods? 27:47 Will there ever be a js framework that can SSR on a non-JS backend? Render pnpm 32:40 Have either of you thought about learning and teaching Python or Django? 34:56 What is your opinion on purchasing “Domain Privacy” with each domain? 37:49 Sponsor: Sanity 38:44 Domain privacy continued 39:22 How you deploy monorepo packages? Tanstack Vite 43:48 As a member of a non margin group should I avoid applying for jobs when they say they welcome applicants who are of a marginalized group to support diversity? 46:12 When would you, if ever, choose good-old React over something like Next JS? 53:24 Sponsor: Freshbooks 54:16 Is it preferred to import via absolute reference or relative reference? 00:23 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Air Compressor Wes: Blue Flush Cutter Mini Diagonal Cutting Pliers Side Cutter Nippers Wire Cutter 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

In this Hasty Treat, Scott and Wes talk about Zod, a TypeScript-first schema validation with static type inference. How are we using Zod? What do we like? And our thoughts on the Zod ecosystem. 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. Show Notes 00:24 Welcome 01:48 Sponsor: LogRocket 02:54 Sponsor: Linode 04:07 Minecraft thoughts Minecraft 06:25 Scratch Scratch 07:19 What is Zod? Zod Zod comparison 10:05 Features of Zod 13:24 How we’re using Zod 14:40 How Zod works with MongoDB 15:51 3rd party plugins 19:35 Zod ecosystem Zod Ecosystem 22:22 Asynchronous validation 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 Dr. Courtney Tolinski about ADHD, how to tell if you have ADHD, issues related to ADHD for computer workers, anxiety vs ADHD, and more. 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. Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch! Show Notes 00:36 Welcome 02:11 Guest introduction 03:00 Do I have ADHD? CHADD 09:12 What is the threshold for diagnosis? 11:43 Are there other issues for computer workers? Arc Browser Syntax 513 - The Productivity Episode 15:27 Avoiding difficult or boring things 17:04 Structuring your day 18:41 Sponsor: LogRocket 20:12 Any tips for working in a distracting environment? MyNoise.net Headspace 23:40 Can I learn to deal with things? 27:28 How can I support a team member with ADHD? Missive 31:51 Sponsor: Appwrite 32:47 Any lifestyle changes to help with ADHD? 38:26 How do you find medical help? 42:39 How do you tell the difference between discipline vs ADHD? 47:05 Anxiety vs ADHD? 48:36 Dyslexia and ADHD 53:31 Inheritable or genetic 54:50 Don’t rely on self-diagnoses Psychology Today 55:48 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Taking Charge of Adult ADHD Bird feeder 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, Wes and Scott tell more of your scary web dev stories including lorem ipsum mistakes, naming something Skynet, blackouts, Twitch streaming, 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. 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 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:12 Weeeeeelcome 02:11 Slipsum mistake Slipsum 03:40 Brotli scaling explosion When JavaScript Bytes 05:14 Email loop Breaking Production with 56,000 emails 05:36 DevOops Magento store Example.com 08:26 Scary animal stories 11:09 Naming something Skynet 11:58 2003 Blackout 13:16 ExtJS error binding 17:09 Sponsor: Linode 17:55 Lead gen forms and captcha Issue Renaming upper-case ‘Sirupsen’ to ‘sirupsen’ Follow up 19:51 Scarlet Letter 21:51 MongoDB achievement story Adam Coster 26:14 Sponsor: Auth0 28:11 Drupal and mysql database fun 30:10 Nervous Twitch 34:03 FTP access story 37:24 Sponsor: LogRocket 38:53 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Ear foam tips Wes: Stepped drill bit / Aliexpress link 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

In this Hasty Treat, Scott and Wes explain more buzz words like schema, promises, async, sync, dom vs shadow dom vs page HTML, props, and more. Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch. 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. Show Notes 00:21 Welcome 01:17 Sponsor: Appwrite 03:16 Sponsor: Sanity 04:08 Schema Zod Apollo GraphQL 07:25 Promises 08:47 Async, Sync, Parallel and Concurrent 13:15 Dom vs Shadow Dom VS Page HTML 16:21 Methods vs Functions 18:18 Props 20:27 HTTP Requests are Stateless 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 Filipe Ferreira of Sky TV about the tech stack used to deliver streaming TV content, build Apple TV apps, host media, 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. ⚡️ Sponsorname - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. retool.com/syntax Sponsorname - 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:36 Welcome 02:15 Guest introduction fbritoferreira.com @SkyShowtime Peacock 04:13 What do the systems look like inside of Sky? GraphQL Redis Apollo GraphQL 06:26 Do you use federation? 07:50 How do you handle caching? 11:24 What’s the tech stack for the front end? 13:30 Do you cache on client side? 15:27 How long has Sky been serverless? 16:55 Sponsor: Gatsby 18:05 How was Sky’s Apple TV app built? 21:17 Where did you host media? AWS Streaming Mux 24:37 Supporting live events 28:03 Sponsor: Storyblok 30:05 What language are you writing the GraphQL layer? The Guild 32:22 How do you define your types? 36:40 Supper Club questions Apple Magic Keyboard with Touch ID Magic Keyboard with Touch ID and Numeric Keypad 44:28 Sponsor: ReTool 45:22 AppWrite AppWrite 48:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Anker 733 Power Bank (GaNPrime PowerCore 65W) 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, Wes and Scott tell your spookiest scary web dev stories including spooky render times, push notification hell, dark Friday, and more! 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:15 Welcome 03:00 Spooky Render Times React Virtualized React Window 09:19 Push Notification Hell 13:11 Dark Friday 14:19 Tiny Ints with Big Problems 16:57 A/B Testing 18:47 Confirm Purchase button mistake 21:21 Sponsor: Sentry 22:34 Dike Leak 25:14 A Steep Grade 32:41 Falkland Islands mixup 33:40 Conference mixup 36:34 Sponsor: Prismic 37:58 Doctor Who Ipsum 43:55 Marketplace payouts 46:38 Sponsor: Freshbooks 47:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: PopSocket Wallet Wes: Water flosser 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

In this Hasty Treat, Scott and Wes talk about Qwik, a new framework designed for the edge. How are things like hydration, lazy loading, rendering, and optimization handled by Qwik? 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. Show Notes 00:18 Welcome 01:25 Sponsor: Sentry 02:47 Sponsor: Sanity 04:50 What is Qwik? Qwik 08:05 What is SSR? 09:25 Working with hydration 15:31 Lazy loading, reduced rendering, and Qwik optimizer 17:30 Edge first 18:55 Data loading or data actions issues 20:49 Qwik City Qwik City 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, Wes and Scott talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way. 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 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 02:15 Cleaning Sick Pick Bar Keepers Friend 04:40 Web Almanac Web Almanac 08:23 CSS stylesheets size grow 09:49 Popular CSS Class names 15:29 How many websites use !important? 18:11 Popular pseudo classes 20:27 Sponsor: Prismic 21:38 CSS Attribute Selectors 27:03 Most popular units 32:23 calc properties 33:13 Sponsor: LogRocket 35:15 Top operators when using calc 36:21 Custom Property Names 37:39 Property Value types 38:00 Functions 39:27 Color names 42:02 Format of color 43:50 Most popular gardient on the web 47:27 Sponsor: Freshbooks 47:57 We don’t know the web 50:39 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Dawn Wes: Flat speaker wire 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

In this Hasty Treat, Scott and Wes take Matt Busche’s suggestion and talk all about bookmarklets and scripts to modify or manipulate web pages. 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. NAME - Sponsor COPY HERE Show Notes 00:25 Welcome 02:02 What are bookmarklets? Matt Busche’s fav bookmarklets Gist Bookmarklet Maker CSS Tricks - Web Development Bookmarklets 04:49 Using an Immediately invoked function expression 09:22 Greasemonkey Greasemonkey 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 TJ DeVries about his work on Neovim, programming in Lua, the benefits of RPC, live streaming your work day, and PDE. 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. 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. 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:36 Welcome 01:13 Guest introduction Teej_dv on Twitter TJ Devries Teej_DV on Twitch TJ on YouTube Telescope on GitHub Neovim on GitHub Syntax 508 with The Primeagan 03:15 The difference between Vim and Neovim 06:14 Why did you choose to write in Lua? Lua Luajit 13:26 What is adapative UI in Neovim? 17:38 Lunarvim and alternatives Fvim LunarVim 20:24 Personalized development environment PDE PDE Firenvim 22:40 Sponsor: FireHydrant 23:21 Benefits of RPC 30:34 Is working on Neovim your job? Sponsor Neovim Sourcegraph 31:30 What is your approach to streaming? 34:11 Did you go to school for computer science? 39:12 Sponsor: Gatsby 39:46 Supper Club questions System76 Pop Dactyl Manuform Keyboard Kit Jetbrains Mono 49:52 Sponsor: Hasura 50:47 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

In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about. 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. 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 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:11 Welcome 01:15 Fogging the boats 04:25 Use the platform 06:32 URLSearchParams 10:04 Pushstate and History API Pushstate 13:46 Internationalization API Internationalization API Syntax episode 153 16:03 FormData API MDN Docs Clipboard API tutorial 20:31 Sponsor: Prismic 21:23 All of the DOM API 24:12 Vanilla JS 26:06 Localstorage and IndexDB 29:18 Web Animations API 31:10 Sponsor: LogRocket 32:39 Endless other browser apis 38:22 Shadow DOM and Web Components Web Components for beginners 42:57 CSS variables 46:05 HTML 47:27 Sponsor: Sanity 49:19 More HTML 54:12 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Cable sleeve Wes: Kindling splitter 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

In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:25 Welcome 01:06 Sponsor: Sentry 01:59 Sponsor: Freshbooks 02:27 What does that even mean? 02:55 Everything in JavaScript is an Object! 04:43 X is just Syntactic Sugar 09:00 Functions are first class citizens 10:04 Object Literals or Template Literals 11:12 Declarative vs Imperative 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 Nikolas Burk from Prisma about the role an ORM plays in a tech stack, how Prisma has changed over the years, ways to query data in Prisma, and how migrations work with Prisma. 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. 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. Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax. Show Notes 00:35 Welcome 01:30 Guest intro @NikolasBurk on Twitter 04:56 How has Prisma evolved? Prisma Keystone GraphQL 10:44 What was Prisma V1? 17:04 Is there any GraphQL specific functions in Prismic? 21:26 Sponsor: Hasura 22:26 What role does an ORM play in a tech stack? 29:54 What is Planetscale? Planetscale The T3 Stack 32:22 Where does TRPC fit? tRPC 33:46 Sponsor: Storyblok 35:28 What is an ORM? Prisma VS Code plugin 42:00 How do migrations work with Prisma? 45:58 Query your data with Prisma client 49:43 Have you looked into alternative JavaScript environments? 55:16 Sponsor: FireHydrant 57:05 Supper Club questions 58:50 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Lichess Shameless Plugs Prisma blog 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, Wes and Scott answer your questions about whether you should use emoji in naming grid elements, how to estimate project times, responsive design tips, animating gradient backgrounds, 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. 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. Show Notes 00:10 Welcome 01:22 Shooting some pucks at the football game 04:06 Should we use emoji naming conventions for our grid template areas instead of just words? Screenshot of Grid question 08:38 How do you estimate a reliable timeline for a project? 12:18 Do you think about sustainable web development? 16:24 What kind of tips and tricks around responsive design do you have? 18:22 Sponsor: Linode 18:55 How would you go about documenting your achievements throughout your career to reflect on during interviews and employee reviews? 23:33 How do you plan long term for projects or goals? Forever Jobless Goals worksheet 28:22 Can you please make a fundamentals episode that only cares about clarifying the terms everyone assume to be well known to even beginner devs? 22 Buzzwords Explained 31:01 Sponsor: LogRocket 32:20 How would one go about animating a gradient background based on mouse movement? JavaScript 30 38:13 Is there any way using the children API to render the close button and menu items in different locations in the menu component? @Luke_lafr come on the show! 42:04 Where should I begin with design systems? 48:10 Sponsor: Sanity 49:24 Is JSON always safe? 55:01 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Thorn Razor, Rockwell Blade Bank Wes: Milwaukee 48-22-1902 Fastback II Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials / 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

In this Hasty Treat, Scott and Wes talk about the ways they get unstuck when working on the last bit of a project to help push it over the finish line. 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. Show Notes 00:26 Welcome 02:05 Sponsor: Linode 02:59 Sponsor: LogRocket 03:48 The last 10 percent 05:25 Break those things into Tasks 08:11 Just do it 09:10 Rewards 11:25 Be ok with good enough 14:21 Keep the end in sight 15:00 Do it “Quick a minute” 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 bdougie about his work on Open Sauced, thoughts on getting into open source development, and his live streaming set up. 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. 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. Get started at Firehydrant.com/syntax 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:36 Welcome 01:52 Guest introduction OpenSauced.pizza @Bdougieyo on TikTok bdougie on Twitch Open Sauced on YouTube bdougie on YouTube Jamstack Netlify 03:36 What was the inspiration for Open Sauced? 08:23 GitHub GraphQL API 13:22 What are your thoughts on GraphQL? GraphQL 14:36 What is the T3 stack? 16:30 Sponsor: Hasura 17:53 What is the goal for Open Sauced? Open Sauced Beta for Hacktoberfest 20:08 What is your focus with live streaming? T3 Stack Vite The Primeagan on Syntax Episode 508 Octoverse Hot Open Sauced Pizza 21:39 What hardware and software do you live stream with? Rode Procaster Wave XLR GoXLR OBS 25:26 Should adults be on TikTok? 30:31 How do you build an algorithm? 32:44 Sponsor: Storyblok 34:01 Supper club questions Keychron K2 Warp Ghostwriter from Replit A first look at GitHub Copilot Stable Diffusion Fig 43:17 Sponsor: FireHydrant 44:36 Interviews with open source maintainers 45:55 How should maintainers get paid? Patreon GitHub Sponsors Neovim Vim Adventures Lunar Vim 47:47 SIIIIICK ××× PIIIICKS ××× 51:34 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× bdougie: Warp Shameless Plugs bdougie on Twitter saucedopen on Twitter 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, Wes talks through all the gear, renovations, and upgrades he’s made to his new home office. Lighting, soundproofing, desk, windows, and more! 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 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:38 Welcome 02:24 Scouting a house with an office 03:54 Why didn’t you hire someone? 08:50 Goals for the office 10:30 Soundproofing 19:49 Decouple the ceiling 25:52 Sponsor: LogRocket 26:54 The door 33:23 Sponsor: Prismic 33:59 The desk 40:40 Cable management 47:12 Lighting 49:03 The room and windows 51:22 Flooring 55:12 Sponsor: Freshbooks 55:47 Things yet to be done 01:03:49 Costs 01:06:10 SIIIIICK ××× PIIIICKS ××× Desk Haus Apex Pro Max Alien Tape ××× SIIIIICK ××× PIIIICKS ××× Scott: Pretend Podcast Wes: Nano Tape 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

In this Hasty Treat, Scott and Wes talk about a new framework called Enhance. What is Enhance and how does it differ from other new frameworks like Astro? 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. Show Notes 00:27 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:40 What is Enhance? Enhance.dev 06:17 Singe file components export default function HelloWorld({ html, state }) { const { attrs } = state const { greeting='Hello World' } = attrs return html` body { color: #222; } ${greeting} ` } Astro 09:23 State and Props 14:01 CSS 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 Hursh Agrawal of The Browser Company about Scott’s favorite browser, Arc. How do you make a browser in 2022? Will there be a Windows version? And who is the target market for Arc? 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. 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. ⚡️ 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:34 Welcome HurshAgrawal.com @Hursh 02:53 What is Arc and why create another browser? Arc browser The browser company 05:36 What is different about Arc? 08:20 Who is the target market for Arc? 09:30 Sponsor: Auth0 10:39 How do you make a browser? 13:38 Will there be a Windows version of Arc? 15:57 Where did the CMD-T functionality come from? 19:27 Sponsor: FireHydrant 20:39 How do you build on top of the Chrome engine? 24:17 How does The Browser Company make money? 27:26 Do you mess with the user agent? 29:05 Why do you require account set up to use Arc? 32:58 Sponsor: Gatsby 33:59 How did you come up with your theming engine? 36:15 Supper Club Questions Warp Hacker News Changelog Every Ben Thompson Bundling and Unbundling 42:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Jabra speakerphone 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, Wes and Scott talk through what they do to get things done - apps for to do list tracking, calendar blocking, and how they determine a productive day. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 02:49 What is a productive day? 04:56 What’s an unproductive day? 07:43 Techniques for work Getting Things Done Eat That Frog Height 14:57 Weighting tasks 18:29 Pomodoro technique 20:53 Sponsor: StoryBlok 22:46 The hard schedule 29:24 Blocking out distractions Focus Self Control 32:20 Sponsor: LogRocket 33:34 Tips We Have 42:55 Sponsor: Freshbooks 43:32 Software to help get things done. Things Todoist Omnifocus Transmit Savvycal Centered Remarkable 56:21 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: USB C Female to USB Male Adapter Wes: Measuring tape 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

In this Hasty Treat, Scott and Wes talk all about GitHub Co-Pilot and whether it’s ethical, secure, worth it, gonna make you dumb, just going to get in your way, or the greatest thing for programmers to use. Sentry - Sponsor Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. 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. 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 Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. 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. Show Notes GitHub Copilot Code Whisperer 00:29 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:07 GitHub Co-Pilot is now paid 05:51 Is it ethical? 08:02 Is it secure? 10:16 Is it going to take our jobs? 13:34 Is it worth it? 16:21 Does it make you dumb? 17:53 Does it get in the way? 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 Thomas Mann about Raycast - an app that can replace Spotlight on your Mac, and do so much more. 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.  Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax   Show Notes @ThomasPaulMann 01:49 What is Raycast? Raycast Raycast Store 08:11 Do you have designers on your team to help guide UI? 10:13 Why build it native instead of HTML and CSS? 13:12 Why did you choose React? 21:54 How do you figure out what’s possible in system level APIs? 26:40 Snippets make use of SQLite SQLite 29:05 Encrypted local storage data 33:11 Any plans for theming for Raycast? 35:20 What is the pricing model? 37:06 What was your Y combinator experience like? Y Combinator Careers 42:08 Any plans for future features? 44:08 Supper Club questions Leopold FC660C Black 65% Dye Sub PBT Mechanical Keyboard iTerm Starship 51:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Nothing Ear Buds 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, Wes and Scott talk about what APIs are, the API standards that exist, and walk through the various layers of what goes into making an API. 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! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 02:40 What are APIs? 06:09 API Standards 13:56 What about GRPC? 15:52 What is TRPC? 19:19 Sponsor: Payments Hub 20:25 API Cake Layers mySQL Postgres Mongo DB SQLite SQLizer 26:51 Server layer 33:28 Sponsor: LogRocket 34:36 Authentication layer 43:28 Caching layer 46:09 Sponsor: Freshbooks 46:38 Client layer Prisma: Package, but also a service keystone: Package Strapi: Package Sanity: Service Prismic: Service Hasura: Open Source and Service Contentful https://hygraph.com/ 48:01 Should I use x or y? 51:35 Tools GraphQL Playground Graphiql Postman Insomnia TablePlus Studio3T 56:27 SIIIIICK ××× PIIIICKS ××× 00:20 Knife Talk ××× SIIIIICK ××× PIIIICKS ××× Scott: Sharp Pebble Wes: Laser level 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

In this Hasty Treat, Scott and Wes talk about next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, and more. 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. 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:27 Welcome 01:30 Sponsor: Prismic 02:54 Sponsor: Sentry 03:53 Do we use Post CSS? 05:22 Presets and plugins 06:19 Plugins we’re using "postcss-import" @import './elements/headings.css'; 09:48 PostCSS Nested 12:59 Variables (Custom Properties) 15:50 Media Query Ranges PostCSS Media Minmax 17:16 Custom Media Queries "postcss-media-minmax" @media screen and (width >= 500px) and (width "postcss-custom-media" @custom-media --below_small (width 18:35 Env Vars "postcss-env-function" env(--small_bp) 20:12 Color Function and Color Function Notation /* color-function */ p { color: color(display-p3 1 0.5 0); color: color(display-p3 1 0.5 0 / .5); } Syntax 479: CSS Color Functions Post CSS Color Functional Notation Post CSS Preset Env 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 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

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 ×××

In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes. 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. 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

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

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 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. 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

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 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: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

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 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. 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

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 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. 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. 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

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

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 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. ⚡️ 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:33 Welcome 02:10 Who is Rich Harris? Rich Harris on Twitter 02:55 What is Svelte? Svelte Vercel Svelte Kit 06:52 What influenced the template language for Svelte? 10:03 What do you use the const tag for? 10:49 Sponsor: Gatsby 12:04 What about immutability issues? 17:49 What about web components? 21:51 Why does Svelte not need the virtual DOM? 27:34 Sponsor: Lightstep Incident Response 28:45 What is your favorite part of working in Svelte? 32:31 Why are companies switching to Svelte? 34:35 What is the SvelteKit timeline? 38:52 What’s the next version of Svelte include? Motion 41:36 Any thoughts on new backend JavaScript environments? Web Interoperability 45:39 Supperclub Questions 52:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Rich: Mullvad VPN Shameless Plugs Svelte Origins 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 Hasty Treat, Scott and Wes talk about their thoughts on the different types of tech jobs you can get, and the pros and cons of each style of job in tech. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax 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:10 Welcome 01:47 The types of jobs Wes’ tweet about developer jobs 03:02 Our experiences 05:58 Tech company 09:46 Freelancer or Entrepreneur 11:14 What are the pros of working at a agency? 18:38 Cons to agency life 26:19 Sponsor: Lightstep Incident Response 27:49 Pros of tech company jobs 30:47 Cons of working at tech companies 37:46 Sponsor: Freshbooks 38:51 Pros of in house tech jobs 46:01 Cons of tech work 51:29 Sponsor: LogRocket 52:28 Pros of freelance or entrepreneur 57:20 Cons of entrepreneur life 00:03 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Wes: Soap pump Scott: Pro breaking tour 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

In this episode of Syntax, Wes and Scott talk about proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges. 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. Show Notes 00:11 Welcome 00:58 Sponsor: Sentry 02:17 Sponsor: Sanity 03:32 CSS @when and @else CSS When and Else @when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ } 05:42 CSS Grid 3 Masonry CSS Grid .grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; } David Desandro Rachel Andrew 09:00 CSS Caret CSS Caret 10:32 CSS Nesting CSS Nesting Syntax 343 CSS Nesting Postcss-preset-env 13:14 ENV Vars ENV Variables 14:58 Media Query Ranges MDN Media Queries @media (width @media (100px 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 Josh Larson from Shopify about headless ecommerce, including Hydrogen from Shopify, how integrations work with Shopify, and what the tech stack is behind Hydrogen. 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. 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:38 Welcome 01:12 Guest introduction 03:16 What is Hydrogen from Shopify? Hydrogen Shopify Oxygen 11:23 Why would you want to go headless? 15:26 Sponsor: Hasura 16:56 Where does custom logic fit? 18:45 What is the stack behind Hydrogen? 24:16 Sponsor: Lightstep Incident Response 25:33 How much code is JavaScript vs React? 33:43 How do integrations work? 38:28 Supper Club Questions In Bed By 7pm VS Code Theme Zsh Hyper Laravel Vite Cloudflare Workers Rust Rust for JS 48:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Story Of by Vice Shameless Plugs @JPLHomer Shopify Editions 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 potluck episode of Syntax, Wes and Scott answer your questions about middleman for API fetching, when to introduce SvelteKit, generating PDFs serverside, trade offs of being an entrepreneur vs employee, and more! 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. 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 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:18 Welcome 02:50 Is there a way to create a “middleman” to fetch data from an API once a day? Redis 06:53 Should I wait before introducing team members to SvelteKit? SvelteKit V1 issues 10:28 What options do we have for generating PDFs serverside? WKHTML to PDF Puppeteer PhantomJS html2canvas Generate Invoice Workers 15:47 Sponsor: Prismic 17:08 How do you say thank you to sponsors? 18:32 How would you compare the tradeoffs of working at a tech company vs. an agency vs. freelancing vs. entrepreneurship? 20:47 What’s the best way for an oldie like me to catch up? CSS Grid.io Modern CSS Layouts 26:08 I’m wondering what do you think about tRPC? trpc.io Create t3 app 29:00 Sponsor: LogRocket 30:03 PDF creator Cloudflare worker 32:50 How do you feel about keeping separate accounts for things like Twitter? 37:28 Does using prototypes mean you are not doing functional programming? 42:09 PHP vs JavaScript based CMS Ghost Keystone Strapi 45:15 Sponsor: Auth0 46:21 Why do you think this mindset that with age comes an inability to learn? Syntax 44 How to Learn New Things Quickly 51:32 Are there other payment providers you guys recommend or should I stick with Stripe and hope for the best? Stripe Paypal 56:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Literature and History Wes: Kitchen faucet 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

In this Hasty Treat, Scott and Wes talk about the various web browers that might show up in your analytics and whether you need to worry about supporting them or not. 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. 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:25 Welcome 01:19 Sponsor: Sentry 02:29 Sponsor: MagicBell 03:51 Big browsers and their engines 05:29 Cloaked browsers 08:16 What’s so great about Arc? Arc 11:33 JavaScript engines 13:30 iOS Browsers Open Web Advocacy 15:07 Android browsers 18:04 The rest of the browsers 19:24 Tor browser 20:20 Opera mini 22:48 UC browser 23:42 Opera mobile 24:57 KaiOS 26:26 Ringtone memories 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 Lee Robinson from Vercel about React Suspense, server components, the edge, and more! 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. 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:35 Welcome 01:34 Guest introduction LeeRob.io Vercel 02:25 Syntax hosted on Vercel 04:08 What is suspense? 06:50 Benefits of selective hydration 13:15 Sponsor: Lightstep Incident Response 14:24 How does suspense know you’re doing something inside of it? 18:02 How does this connect to server components in React? 22:00 How do we use this in NextJS? 24:32 NextJS routing future Layouts RFC 33:11 Will I ever be able to use web components inside NextJS? 36:12 Sponsor: Gatsby 37:14 What’s happening with the Edge? Edge Runtime 47:37 What should we use for databases? 50:39 Supper Club dessert questions OhMyPosh Hyper Warp Svelte Hackernews Reddit 58:57 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× AirPods Shameless Plugs Careers at Vercel 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, Wes and Scott talk through their web dev wish list of things they want to just work already! 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 02:20 Write Custom animation transitions 03:32 date input translate to JavaScript date 06:48 Smooth and animated drag and drop 08:35 TypeScript Interfaces are faster than Types 10:35 Request animation frame 12:52 Custom Elements / Web Components 13:52 Authentication Web Authentication API 16:12 Sponsor: Linode 17:48 useIsomporphic vs useLayoutEffect 19:48 useEffect dependency array 21:27 fragments without fragments 24:46 Overflow hidden without hiding shadows 27:11 Fluid text 28:52 Sponsor: Sentry 29:34 translate3d vs translate 30:59 Gradient borders 33:33 Independent transforms 36:16 animate height auto 38:40 Sponsor: Freshbooks 39:02 Auto synced deps when changing package file 40:36 Peer dependencies 42:32 VS Code Reload after plugins install is kinda annoying 43:04 Safari updates 44:20 Apps checking for passwords 45:02 File name casing as changes 45:56 Better sounding commit names 46:33 Test runner that is the same and just works 47:32 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Arc browser / Video Wes: Battery powered glue gun 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

In this Hasty Treat, Scott and Wes talk the appreciation of coding projects that supposedly serve no purpose, but can be great ways to learn something new. 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. 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. Show Notes 00:39 I am excited about coding 02:40 Sponsor: LogRocket 03:58 Sponsor: Linode 04:24 Projects that serve no purpose Bookit 05:46 Scratching your own itch 10:06 Discount finder 11:20 Webcam or audio manipulation 12:43 TTFS Parcel Vite 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 Syed Balkhi about his experiences blogging and developing plugins in the WordPress ecosytem. 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. Sponsorname - Sponsor Show Notes 00:32 Welcome 01:52 Guest introduction WPBeginner WP Beginner YouTube CSS Tricks Smashing Magazine 04:33 What tips do you have for blogging and audience building? AnswerthePublic 09:09 How do you manage so many people? 13:07 What was your background before this all got big? 13:43 Sponsor: Hasura 15:01 How do you design your products? 18:40 YouTube, TikTok, and video 25:12 Why the WordPress hate? 29:03 What types of websites are being created in WordPress? Easy Digital Downloads WooCommerce MemberPress 34:13 Sponsor: Lightstep Incident Response 35:26 What schools are you building? Balkhi Foundation Pencils of Promise 40:51 Supper Club questions Copyhackers Swiped Uncanny Automator 53:07 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Streaks App Ready Player Two WP Forms AwesomeMotive 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 Potluck episode of Syntax, Wes and Scott answer your questions about resolving node version errors, using social media, bundler for building React component, and how does Syntax get made? 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes OhMyPosh OhMyZ.sh Warp 02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile? 07:50 Any advice for using social media to network? 16:44 What bundler are you reaching for when building a React component library? tsdx Vite 18:37 Do you have experience with optimizing third party scripts like Google Analytics? Partytown 21:37 What’s your opinion on a “offline-first” mentality? PouchDB CouchDB Supabase MongoDB Realm 25:09 Sponsor: Prismic 26:48 How do you make web components with Svelte? Build web components in Svelte Using custom elements in Svelte 30:35 When talking about “responsive” web design do people generally mean using flexbox or grid? Responsive Design at 10 Responsive Web Design A Book Apart - Responsive Web Design 35:24 Sponsor: Sentry 36:53 Do you have any tips for staying in React-land for just spinning up a fresh site quickly? 40:47 Who or what helps you produce and distribute the podcast? Lemon Productions Chris Enns on Twitter 46:08 Should a majority of _lodash functions be considered deprecated follow up 48:18 Sponsor: Freshbooks 48:52 Do you have any tips or tricks to deal with backend data date issues? 52:23 Is the “col” system the peak of how we handle CSS, or should we start using more built-in functions? 55:25 Why you you need CSS Color Functions at runtime instead of just pre-calculating these values once as a build step using LESS or SASS? 58:58 SIIIIICK ××× PIIIICKS ××× 03:12 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Can tumbler glasses Wes: Car Sound Deadener 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

In this Hasty Treat, Scott and Wes talk about Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What’s on Bun’s roadmap? And why do we need another JavaScript runtime? 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:21 Sponsor: Freshbooks 02:07 Sponsor: Lightstep Incident Response 03:20 What is Bun? Bun Deno 08:20 Why is Bun so fast? Zig 12:32 Module support 15:11 What’s not implemented yet in Bun? What’s not implemented in Bun yet 17:01 Config file in toml 18:08 Bun roadmap Bun roadmap 20:27 Why do we need another JavaScript environment? 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 Adam Cowley about how Neo4j Database can help when working with data for your next app. 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. ⚡️ 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:15 Welcome 01:24 Guest introduction 03:15 Browser innovation and testing 05:01 What is a graph database? Neo4j Cypher Sanity Groq 08:11 Is there a specific type of data that works best in a graph database? 11:57 Sponsor: Lightstep Incident Response 13:14 What’s AuraDB vs Neo4js? 15:01 Whiteboard friendly data model 19:52 How are GraphQL and graph related? 23:08 Can you sync with MongoDB? 24:41 How do you pull data into a div on the web? 29:19 Why are you used for data science a lot? 30:43 Sponsor: Gatsby 31:51 Is visualization an important part of Neo4js? Neo4j Bloom 36:01 Do you have to think about indexing with graph databases? 39:43 Are there uses Neo4j isn’t as good for? 40:22 Do you have to cache queries? 41:26 Dessert questions Intellijet Idea Cobalt 2 Theme 50:36 Shameless Plug Neo4j Desktop Neo4j Cloud 54:45 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Hue Lights 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, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax 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. Show Notes 00:07 Welcome 01:56 Functional vs object oriented 03:49 Interfaces vs types 05:38 Tabs vs spaces 07:02 Semicolons vs no semicolons 08:10 Let vs const 09:33 Do you explicitly type or allow TypeScript do it’s magic? 11:26 Naming variables Naming convention for programming 15:13 Methods of looping 18:03 if statement curlys 20:57 Naming files 24:46 Inline testing vs running test as a process 25:31 Sponsor: Freshbooks 26:37 CSS property:val; or property: val; 27:40 CSS nesting? 29:49 Alphabetizing CSS properties 31:11 Rems, Ems, PX, Etc… 33:37 How do you center something in CSS? 35:22 How do you make something 100% height? 36:52 Sponsor: Sentry 37:30 Should comments exist? Better Comments Wes’ custom parser for VS Code Todo Tree 42:31 Creating HTML 45:28 Components in app or in isolation? 47:41 Sponsor: Sanity 48:45 Single component per file vs multiple Storybook 50:22 Naming components 51:19 General stuff 53:55 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Scott’s iPad case for kids Wes: Garbage can with custom bags. 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

In this Hasty Treat, Scott and Wes try to stump each other with coding interview questions like what is a higher order component? What is functional programming? And more! 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. 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:26 Welcome 01:47 Sponsor: Lightstep Incident Response 03:00 Sponsor: Sentry 04:10 What is a higher order component? 05:34 What is functional programming? 09:00 What’s the purpose of cache busting and how do you achieve it? Wes’ course for Beginner JavaScript 10:37 What is short circuit evaluation? 13:19 What is a closure? 15:49 What is the reason for wrapping the contents of a JavaScript source file in a function that is then invoked? 17:30 Can you describe how CSS specificity works? 20:15 How does prototypal inheritance differ from classical inheritance? 23:56 What is the difference between a parameter and an argument? 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 Kristi Perreault of Liberty Mutual about why they’re using serverless functions, what languages they write in, managing security and montoring, and Kristi’s journey into tech as a career. 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. Stack Overflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. 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:33 Welcome 03:24 Guest introduction @kperreault95 Kristi Perreault on Dev.to Kristi Perreault AWS Hero Liberty Mutual 04:55 Developers at Mutual Liberty 07:05 What did you do before serverless functions? 08:36 Why are you using serverless functions? 12:39 What languages are you writing for serverless functions? 15:53 Sponsor: Hasura 17:22 Where does all the code live? 20:58 AWS CDK AWS CDK CDK Workshop 25:55 Sponsor: Lightstep Incident Response 27:07 How did you get into tech? 31:44 How do you organize all the functions? 33:51 How important is security? 35:23 What are IM roles? 36:16 How do you deal with spiking and monitoring? Datadog Splunk 41:20 Sponsor: Stackoverflow Podcast 42:02 Have you used Edge functions? 42:50 Supper Club Questions Off by None newsletter Ready Set Cloud ××× SIIIIICK ××× PIIIICKS ××× Loki on Disney+ Shameless Plugs Real World Serverless Podcast Serverless Denver Group AWS Summits @ServerlessCO Kristi Perreault on Medium 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 potluck episode of Syntax, Wes and Scott answer your questions about peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, and more! 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. 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 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:03 Welcome 01:53 Configuring home internet routers 04:42 Scott’s Home Assistant update Mushroom Theme 07:52 Could you explain to me peer-dependencies and how does it work? 13:24 Using Vitest do you still have to transpile code? 16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD. 18:49 How can I update the “updatedAt” field of the document on every save automatically? 20:40 What is aggregation, and when do you use it? 25:33 Sponsor: Prismic 27:27 How does NVM relate to PNPM? pnpm nvm 30:45 I’m looking to upskill from front-end JavaScript? 33:53 Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly? Creating a private npm package 37:51 Sponsor: LogRocket 39:14 Should a majority of lodash functions be considered deprecated? angus c just 42:36 Please do an episode on programming/learning with ADHD. 44:04 Should I still be putting images in sprites? 49:20 Does Mux have a simple mechanism for adding auth to each video or group of videos? Mux Create playback restriction 53:48 Sponsor: Sanity.io 55:02 Is there copyright issues with using public APIs? Moneypuck 59:38 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Toto Bidet Wes: Sodastream 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

In this Hasty Treat, Scott and Wes talk about clamp and interpolate and how you might want to use them in your next project. 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. NAME - 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:25 Welcome 00:52 Sponsor: Sentry 01:31 Sponsor: Payments Hub 02:40 Topic introduction 05:05 What is Clamp? CSS clamp: font-size: clamp(1rem, 10vw, 2rem); JavaScript Clamp: const clamp = (num, min, max) => Math.min(Math.max(num, min), max) 09:12 What is Interpolate? D3 Interpolate 12:56 Interpolate in colors 14:37 Quantize D3 Quantize 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 Pokey Rule about using his voice to code, and the current state of voice coding software. Stackoverflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. directus - Sponsor Directus is an open-source data platform that instantly layers on top of any SQL database. Our Data Engine empowers engineers with dynamic REST+GraphQL APIs, workflow automation, built-in auth, caching, and asset transformations. And the included Data Studio democratizes your database, allowing even non-technical users to browse, manage, and visualize database content through a no-code data collaboration app. Get started in minutes with a free Directus Community Cloud project. Show Notes 00:33 Welcome 01:35 Guest introduction Con 2021 - Cursorless: keyboards and mice are sooo last year!! by Pokey Rule Emily Shea 05:12 How does coding with your voice work? Talon Voice Cursorless Talon 09:45 How do you handle triggering wrong words? 11:41 Sponsor: The Stack Overflow Podcast 12:26 Example of voice coding Parrot 14:21 What are the noises you make for? 24:29 Working on multiple lines at the same time 27:37 How do you decide where the hats go? 31:18 Sponsor: directus 32:59 What is the community of users like for this? Tree Sitter “Incremental, zero-config Code Nav using stack graphs” by Douglas Creager 35:20 Does eye tracking work? 36:48 What kind of mic do you use? DPA Microphone The Voice Book 39:25 Supper Club questions Dark Abyss VS Code theme Kinesis Freestyle 2 Charybdis Nano keyboard Nexstand Arxiv Sanity Subvocal Recognition Imagen Research Midjourney 54:11 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Git Imerge Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Pokey: YouTube channel, Sponsor Pokey on GitHub 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, Wes and Scott talk about their experiences speaking at conferences, why they’ve done it, how they prepare talks, and tips for anyone interested in wanting to give talks. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:02 Welcome 01:38 Stanley Cup update 03:13 Legoland update 04:09 Topic introduction Nicole Sullivan Tweet looking for questions 05:03 Why speak at conferences? 08:56 Travelling for free 09:50 Getting paid to speak at conferences 12:23 Doing in person workshops 14:55 How do you get into speaking? 19:25 Meetups 20:30 Sponsor: Linode 21:15 What should you speak about? 26:27 Something you did a deep dive on 29:21 Sponsor: Freshbooks 30:04 Flight protection and travel insurance 32:59 Idea: update to a library 33:28 How to get conferences to invite you to speak? 36:03 How do you prepare for a talk? 42:40 How to find conferences looking for speakers 44:09 How to create a topic that will get picked 46:59 Sponsor: Sentry 48:06 Software for your slides Slides.js Slides.com MDX Deck Notion Figma Google Slides Lydia Hallie Keynote 56:28 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Risk for iOS Wes: Barrina LED T5 Integrated Single Fixture 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

In this Hasty Treat, Scott and Wes talk about new CSS color functions, and tips for viewing the different options and ways of presenting color that are coming. 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. Show Notes 00:25 Welcome 01:35 Sponsor: Linode 02:22 Where the CSS spec for Color functions are at the moment 05:13 New CSS Color mix function 10:29 Color for the color challenged 12:53 Color contrast function 15:06 Programatically alter colors Anyone have a really great CSS Variables color system strategy? Color for the color challenged Better color tools the color-contrast() function Benjamin Moore Paints as CSS Colours 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 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

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

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 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 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

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

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 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. 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 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

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 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. Sanity.io - 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. 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

In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify. 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. 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: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

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 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. .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

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 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: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 Hi // would not find hi 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

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 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. 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 00:38 Welcome to Syntax 01:54 Guest introduction Unicorn Factory ConnorFinlayson.com Connor’s YouTube channel 04:49 What is no code? 10:57 Is no code going to replace programmers? 14:57 Sponsor: Postlight Podcast 15:59 What are your favorite tools for no code? Zapier Webflow Make.com Airtable Memberstack Jetboost Bubble 19:23 When do you need to use real JavaScript? 23:23 Where do you find information about no code? 25:26 Sponsor: SeedProd 39:25 How do you handle version control? 43:26 Are there native apps in no code land? Notion Editor X 46:16 What is AirTable? 49:36 Cost of no code tools 52:45 Sponsor: Strapi 53:45 Supperclub Questions 06:42 Shameless Plugs CodeMeetsNoCode 09:49 Sick Picks Flowbase Relume 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

In this episode of Syntax, Wes and Scott are live from Reactathon 2022! 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. 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! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes Live video version 00:32 Welcome 04:10 Hot Take Tweets What is your JavaScript Hot Take or unpopular opinion? 05:42 Semi colons are not optional 06:11 For loops are not needed 07:19 People forget about ES Harmony 08:11 Sponsor: Sentry 09:23 A good website should function without JavaScript 10:28 Classes were a mistake 10:54 Stay as close to the platform primatives 11:36 TypeScript is overrated and overhyped 11:50 Kickin it old school PNG Fix MM Swap image Rounded Corner images (sliding Doors) var that = this; IE CSS Hack Test for Opera var test = /^function \(/.test([].sort); 25:09 Sponsor: Payments Hub 26:29 Syntax Error Mercurius Library 31:19 JS or NAY-S 39:02 Sponsor: Freshbooks 39:23 Q&A Syntax episode with Josh Wardle 39:57 Using Array methods or for loops 41:12 What web tech is overhyped and what’s under hyped? 43:01 Would you rather use Dvorak or Mac butterfly keyboard? 43:41 Name all provinces and territories in Canada 44:39 Fav Syntax.fm episode 45:38 How did Wes and Josh meet? 46:52 What’s your favorite Trader Joes snack? 47:29 Would you hire a European or American developer? 49:04 How would you validate a product idea for Saas business? 49:48 What podcasts do you listen to? Steve O 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

In this Hasty Treat, Scott and Wes talk about ways to prevent malicious people from using or abusing your app. 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. 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:26 Welcome 01:04 Sponsor: Linode 02:06 Sponsor: Sentry 02:59 What kind of bad things can happen to your application? 06:24 How do you stop bad actors? 12:20 Nonce tokens 14:10 CSRF CSRF Explained 14:50 Captcha hCaptcha 17:06 DDOS Cloudlfare DDOS 17:38 Ban known bad ASNS 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 Anselm Hannemann about burning out, trying out gardening, and how getting away from the screen can help restore your creative energy. 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. 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. 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. Show Notes 00:39 Welcome 01:58 Guest introduction HelloAnselm.com Anselm on Twitter Web Development Reading List Newsletter 10:04 Doing things yourself as a form of therapy 14:33 Sponsor: Hasura 16:34 Rules for digital usage? 19:25 How do you learn you’re burned out? 26:30 Sponsor: Strapi 28:10 Gardening Gardening site Garden on Instagram The Post Apocalyptic Inventor 29:46 What do you feed your plants? 34:09 Irrigation issues 35:52 Sponsor: SeedProd 38:03 Dealing with weeds 40:54 What about chickens? 44:20 Farming as a business 45:39 Incorporating tech into the gardening 54:06 Supper Club Questions Today I Learned Stefan Judis Web Design Weekly 59:09 ××× SIIIIICK ××× PIIIICKS ××× 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

In this episode of Syntax, Wes and Scott talk all about how they use Git inside of VS Code, extensions they use, and the various ways to interact with Git in VS Code. 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. SPONSOR - 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. SPONSOR - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:21 Recording Syntax in Riverside Riverside 01:22 Welcome 04:57 CLI vs VS Code VS Code 07:27 Git Jargon 11:50 UI tools we’ve used Git Tower Git Kraken GitHub for Desktop iTerm Warp Git SCM 14:09 Ways to interact with Git in VS Code 19:41 Source control tab 26:28 Sponsor: Linode 27:47 File History 30:29 Diffing or Compare 36:24 Conflict resolution 42:56 Automation with post-commit commands 46:10 Sponsor: LogRocket 47:14 Extensions GitLens Git History Git Graph Conventional Commits 53:59 Git config tip 55:24 Sponsor: Freshbooks 56:02 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Espanso Wes: AirPod cleaning kit 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

In this Hasty Treat, Scott and Wes answer a question about caching, cache control headers, an explanation of the fields for caching. 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. 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 Time to live calculator Reminx Conf Opera The United States of Insanity - Official Trailer 00:24 Welcome 01:11 Sponsor: Sentry 02:28 Sponsor: LogRocket 03:08 My struggle has been with caching, cache control headers and would love a better explanation on some of the fields? 04:48 What is a header? 06:05 What is caching? 08:21 Time to live (TTL) 09:08 Benefits of a cache 10:03 Specifying how long to cache 11:06 max-age 12:45 stale-while-revalidate 16:17 stale-if-error 16:54 must-revalidate 17:21 private 18:03 immutable 19:29 no-transform 20:45 Cache Control Request Directives 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 Tom Pretson-Werner about his work on RedwoodJS, the importance of documentation, and the new Redwood Startup Fund. AIOSEO - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, AIOSEO, also known as All in One SEO for WordPress. It’s becoming one of the most powerful SEO toolkit and is now used by over 3 million websites to improve search rankings. Shipshape (Whiskey, Web and Whatnot) - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Show Notes 00:34 Welcome 01:36 Guest introduction Tom Preston-Werner on Twitter Kai’s Power Tools 04:23 Math is weird 07:21 User interface design 08:53 Sponsor: AIOSEO 10:24 What is RedwoodJS? RedwoodJS Chatterbug 15:31 Is JavaScript the stack you should be using these days? 18:40 Freedom vs decisions in software Where Good Ideas Come From 23:10 RedwoodJS docs and video strategy RedwoodJS Docs Readme Driven Development 29:13 The tech behind RedwoodJS Apollo Storybook 36:20 Sponsor: Shipshape (Whiskey, Web and Whatnot) 36:58 Redwood Startup Fund The Redwood Startup Fund 42:28 Supper club questions VS Code Netlify Hacker News RedwoodJS on Discord RedwoodJS Discourse RedwoodJS on Twitter 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

In this episode of Syntax, Wes and Scott talk through TypeScript tooling, build tools, configs, and editors. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:08 Welcome 01:57 Tooling tsc esbuild swc bun Zig 13:45 LogRocket 15:01 Server side or node-ish Deno ts-node wds 26:09 MagicBell 27:42 Build tools Vite Parcel Nextjs Svelte Kit Rome 33:25 Configs tsconfig typescript-eslint 39:08 Sponsor: Freshbooks 40:00 Editors VS Code Webstorm 44:58 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Tonie Wes: Burst Toothbrush 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

In this episode of Syntax, Scott talks about his new office setup where he records videos and podcasts, writes codes, and gets his steps in. 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. Show Notes 00:15 Welcome 01:24 Office ideas Heat pumps on Technology Connections Neewer lighting 05:00 Sponsor: Sanity 06:10 Sponsor: Sentry 07:37 Levelup Lodge tour 09:40 Lighting 13:57 The desk Karlby Countertop Fully Jarvis legs Desk Haus 19:32 Audio gear M-Audio BX8 Gik Acoustics Nero Scarlett 2i2 Caldigit TS3 Plus Electrovoice RE20 Cloudlifter cL1 DBX 286s Sony Alpha 7 III Audeze LCD 1 25:25 Tech setup 33:00 Misc items 35:43 Movie posters Shaw Brothers posters 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

In this supper club episode of Syntax, Wes and Scott talk with Jared Palmer about Turbo Repo, how it fits in your tech stack, and what it was like being acquired by Vercel. Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Show Notes 00:35 Welcome Jared Palmer 02:15 What is Turbo Repo? Turbo Repo Vercel tsdx 03:27 Where does Turbo Repo fit in your stack? 06:04 What are Google, Meta, or Twitter doing? 15:35 Sponsor: Whiskey, Web and Whatnot 16:45 What’s the cost of adding Turbo Repo to a project? 21:19 Changing based on environmental variables 23:18 Does this replace how you define your workplace? 24:08 How do you share the cache? 25:25 What don’t you cache? 27:35 What about Gatsby images? 28:44 Can Turbo Repo help with re-running compiles? 36:54 Supper Rapid Fire Questions Oceanic Next GitHub Dark Kotlin 52:47 Selling Turbo Repo to Vercel 55:49 Shameless Plugs 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

In this potluck episode of Syntax, Wes and Scott answer your questions about protestware, NoSQL, Next.js, the Syntax.fm website, ESM, Jest, and more! 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 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. https://a0.to/syntax Show Notes 00:10 Welcome 01:30 What are the good reasons to use nextjs apart from personal preference? 05:15 How did you decide to build Syntax.fm? Uses.tech 09:09 Why does my M1 Mac feel slower than my Intel Mac? 14:44 Do you alphabetize your larger javascript objects by key name? 17:14 Sponsor: Prismic 19:06 Why did you choose noSQL database over SQL databse? 25:13 What does it mean to support ESM? 30:23 Sponsor: LogRocket 31:35 Are open source maintainers doing harm by inserting protestware into packages? Protestware found lurking in popular npm package 40:30 Should I write the game logic on the backend or on the frontend? 46:30 Sponsor: Auth0 48:20 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Eons Mysteries of Time podcast Wes: Mr Bio Multi cable 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

In this Hasty Treat, Scott and Wes talk about why we need Web Interop? Yet another standards body? Our thoughts on Serverless, Edge Compute, and more. 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. Show Notes 00:23 Welcome 01:25 Sponsor: Sentry 02:25 Sponsor: Sanity 04:10 The Syntax Lift adventure 06:04 A new Community Group for Web-interoperable JavaScript runtimes. 07:07 JavaScript environments 09:19 What’s bun? Bun 13:28 Are we excited about this? 16:27 What’s the future of this? 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 Victor Savkin about NX Monorepo development. Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Visit whiskeywebandwhatnot.fm or find them wherever you listen to podcasts. 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 channel. Show Notes 00:29 Welcome 02:42 Guest introduction 04:07 What tools did Google use? 10:49 What do bigger companies use for version control? 14:40 What is Nx? Nx 21:02 How does Nx help you upgrade projects? 27:42 Sponsor: Whiskey Web and Whatnot 28:33 How does Nx fit into the existing tooling? 37:27 Sponsor: Strapi 39:02 Caching and skipping builds 44:50 The problem with caching 48:44 Is it used for images or video? 51:40 Small projects can benefit as well 53:13 Lightning questions Happy Hacking KB IntelliJ LunarVim VS Code 02:23 Shameless Plugs 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

In this episode of Syntax, Wes and Scott talk about 10 browser API’s you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more! 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 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:13 Welcome 01:05 Dishwasher talk 04:30 getUserMedia Hair.WesBos.com Javascript 30 07:22 FileSystem Level Up Tutorials: Browser APIs Electron 12:50 Geolocation 15:07 Sponsor: Prismic 16:41 Permissions 22:36 Web Animations Web Animations API Framer Motion Motion One 26:31 Resize Observer Resize Observer API 29:33 Sponsor: LogRocket 30:45 Clipboard Clipboard API 34:10 Web storage Web storage 37:11 Sponsor: Freshbooks 38:09 SpeechSynthesis 41:32 SpeechRecognition 46:14 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: RCA to HDMI adapter Wes: SlimLED 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

In this Hasty Treat, Scott and Wes talk about TypeScript Fundamentals, including narrowing, discriminating unions, and type guards. 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. 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:24 Welcome 01:35 Sponsor: Sentry 02:23 Sponsor: Payments Hub 05:21 Intro to TypeScript fundamentals 06:28 What is Type Narrowing? 09:32 typeof 11:58 instanceof 13:29 Custom typeguards 16:12 this is 17:59 discriminated unions 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, Wes and Scott talk about what edge functions are, the upsides and downsides of edge functions, and what they’re used for. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Show Notes 00:10 Welcome 01:56 A big announcement 04:33 What is the Edge? 08:27 The upsides of edge functions 12:13 Cold start 18:21 Sponsor: Linode 19:24 What are downsides of edge functions? 27:27 Sponsor: LogRocket 28:35 What is the use case for an edge function? 34:52 Authentication 37:23 Caching 40:51 Are there flavors of edge functions? 44:00 Sponsor: Freshbooks 46:06 What are edge functions not used for? 47:39 What companies offer this? 50:58 Sick Picks Netlify announcing serverless compute with edge functions Syntax 310 Serverless, Deno and TypeScript with Brian Leroux Vercel Middleware AWS Lambda ××× SIIIIICK ××× PIIIICKS ××× Scott: Patented History of Innovations Wes: Fastmov Precut Parchment Paper 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

In this Hasty Treat, Scott and Wes talk about why people still use Axios over Fetch, and why people wouldn’t use Axios. 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. 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:22 Welcome Twitter thread of questions from listeners 01:25 Sponsor: Linode 02:07 Sponsor: Sentry 03:04 What’s Axios? Syntax 224 - Serverless Cloud Functions 04:10 Why someone wouldn’t use Axios? 07:06 Interceptors 09:30 Catching expired JWT and renewing it 10:26 Upload or download progress events 12:03 Valid status API 13:45 Defaults 15:32 Custom timeouts 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, Wes and Scott ask each other hiring questions asked of JavaScript developers in job interviews. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes JavaScript Interview Questions 00:13 Let’s get STUMP’d 01:08 Cleaning out the garage 05:05 What are 4 methods available on weakmap? 07:07 How do you make an object iterable in JavaScript? 09:29 How do you make the first letter of a string into uppercase? 10:26 What is the typeof operator? 11:53 What are classes in ES6? 13:21 How do you enumerate key and value pairs of an object? 15:44 Kontent by Kentico 17:08 What is an event queue? 21:05 Why do you need JSON? 24:49 Why do you need a promise? 25:45 Explain the range overflow property 28:21 How do you return all matching strings against a matching expression? 30:14 Sponsor: LogRocket 30:51 What is a thunk function? 33:46 Can you redeclare let or const variables? 34:17 What are enhanced object literals? 35:56 What is the difference between call, apply, and bind? 38:52 Sponsor: Freshbooks 39:57 What are benefits of modules and why would you need them? 43:50 ××× SIIIIICK ××× PIIIICKS ××× 48:47 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Who ARTed Podcast Wes: Patio furniture 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

In this Hasty Treat, Scott and Wes talk about the coupon engines they’ve built and use on their courses. 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 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:26 Welcome 01:12 Sponsor: Prismic 02:32 Sponsor: LogRocket 04:06 What we use for coupons Stripe Braintree 06:27 Structure of our coupons 10:43 Products and carts 13:59 Country validation 15:11 Affiliate codes 16:36 Chaining rules together 19:41 Tracking coupons 20:54 Automatically applied coupons 22:12 Quick tips for coupons 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 potluck episode of Syntax, Wes and Scott answer your questions about working on a team, dealing with imposter syndrome, animating on the web, using the table element, landing pages for apps, and building full stack apps with NextJS. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Show Notes 00:10 Welcome 01:05 The mustard bandit podcast 02:54 How can Developers work with designers and Product managers seamlessly? 06:37 How do I deal with imposter syndrome? 10:46 Any good coffee shops in Denver? 17 of Denver’s Best Coffee Shops 11:38 Do you use Table element or CSS Grid for tabular data? 13:18 How do you manage animations without a library? Greensock 17:05 Sponsor: Sentry 18:01 What do you use for icon libraries? Icons8 Font Awesome Icons React Icons Flat Icons 25:10 How do you unregister the service worker to clear site data? Syntax 346 - Selling T Shirts 29:15 Sponsor: Sanity.io 30:47 Since NextJS has API routes, could you build a full-stack application using just NextJS? 35:41 Do you keep your landing pages and home pages seperate from your app? 37:35 Where’s the line for moving something hosted on a developer server to moving it to production? CodePen Replit Netlify 41:44 How do you deal with ignorant or demanding clients? 45:54 As a JS/TS developer, which other language should I learn to compliment my skills? Rust PHP 50:58 Sponsor: Freshbooks 51:49 ××× SIIIIICK ××× PIIIICKS ××× 58:41 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Glass Drinking Straws Wes: Lawn Lift Shameless Plugs Scott: LevelUp Tutorials Wes: 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

In this Hasty Treat, Scott and Wes talk about Svelte Cubed and working in 3D in the browser. 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 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:21 Welcome 01:00 Sponsor: LogRocket 01:41 Sponsor: Prismic 02:45 Intro to 3D in the browser Svelte Cubed Getting started with Svelte Cubed 03:49 Declarative vs imperative 07:43 How does Three.JS work? ThreeJS 12:28 Orbit controls 15:47 Svelte Cannon Svelte Cannon Blender 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, Wes and Scott answer your questions about multi tenant apps, JS sprinkles, kids coding, server error handling, and more. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:26 Welcome 01:01 Buying a new car Hyundai Ioniq 5 08:20 What would you recommend old-school jQuery folks, external agency vendors, and modern devs that want to work together? 11:59 Are React dumb/presentational components only possible at the leaf components of an application? 15:35 How old should a kid be to learn programming? Scratch Minecraft 20:28 Sponsor: Sentry 21:34 Without pointing me to a paid error program like sentry, how do you guys manage this rabbit hole? 27:05 How do you judge how much server you need? MongoDB Atlas Google Pagespeed 31:57 For websites that aren’t applications how would you best organize your JavaScript? 35:17 How do you diagnose slowdowns and bad user experience? 41:31 Sponsor: Sanity 43:13 Do you default export your React components when using TypeScript? 47:42 Besides web sockets or polling at a predefined interval and refreshing the page to fetch new data, can you think of any Next-specific solutions or recommend any packages that could help make this relatively simple? Supabase Firebase Meteor 52:13 We should look into ‘tunneling’. 56:42 How do I build a multi-tenant app? Caddy Server nginx Approximated.app Vercel offers this via a middleware Cloudflare SSL for SaaS 00:56 Sponsor: Freshbooks 01:34 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: Vivid Wes: Right angle Lightning cables 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

In this Hasty Treat, Scott and Wes talk about their tips and tricks for being consistent if you’re trying to create. 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. 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:44 String cheese theory 01:49 Sponsor: Sentry 03:41 Sponsor: MagicBell 05:26 Being consistent is the key to success 07:12 Commit to it 09:13 Plan and schedule 13:42 Being accountable to someone 18:11 Break things down into smaller tasks 20:25 Measure goals 22:14 Revise the plan 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, Wes and Scott talk through their process for making content on the internet for their YouTube channels, blog posts, courses, conference talks, and podcasts. 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. 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 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:09 Welcome 03:02 Creating YouTube videos Scott’s YouTube channel 09:42 Conference talks Notion Stackblitz Reactathon Raycast 17:05 Sponsor: Linode 17:32 Tech for making slides 19:37 Courses - how to decide what to do? 26:44 How Wes breaks down a course topic 30:00 Arranging a course layout 33:19 Sponsor: LogRocket 34:17 Writing blog posts 41:58 Sponsor: Sanity 43:32 How we organize the podcast 51:10 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: ZENOVA Under Desk Treadmill Walking Pad Wes: Trader Joe’s Hot Sauce with Yuzu 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

In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript. 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. 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:25 Welcome 01:13 Sponsor: Sentry 02:03 Sponsor: Sentry 02:44 The proposal announced A proposal for type syntax in JavaScript Proposal types as comments 03:24 What are types? 08:33 Types as comments 10:51 Why not JS Doc? 13:39 What it looks like 19:02 Possible downsides 21:37 Why not define a type system for JS in TC39 instead? Why not define a type system for JS in TC39 instead? 22:41 The Proposal vs Typescript 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, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more. Prismic - Sponsor NEEDS AUDIO RECORDING FIRST 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 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes Uses.tech 00:10 Welcome 03:35 How to submit your site for highlight 04:11 bald.design https://www.bald.design 10:38 Anh Hoang Nguyen https://www.hoanganh.dev 15:08 kennytye.com https://www.kennytye.com 22:42 Sponsor: Freshbooks 24:10 rubenoliveira.tech http://rubenoliveira.tech 28:47 abgn.me https://abgn.me 32:02 Sponsor: LogRocket 33:19 bradleyshellnut.com https://bradleyshellnut.com 41:11 hunterjennings.dev https://www.hunterjennings.dev 46:19:16 Sponsor: Prismic 47:42:19 matthewfarlymn.com https://matthewfarlymn.com 55:00:01 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: Bad Vegan Wes: 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

In this Hasty Treat, Scott and Wes talk about Vitest, how testing is handled, how code coverage works, and whether they think they’ll use it. 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. 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:21 Welcome 02:47 Sponsor: Sentry 03:48 Sponsor: MagicBell 04:55 What’s is Vitest? 09:06 How is testing handled? 10:59 HappyDOM 14:13 Code coverage baked in 16:25 Files acting as folders 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, Wes and Scott talk through the tech stack they use to manage their course websites. 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. 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. .TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc. Show Notes 00:10 Welcome 02:50 CSS Redesign of LevelUpTuts 03:56 Overview of our platforms 06:06 The API ExpressJS MongoDB GraphQL Fastify Mercurius Mongoose 15:13 Sponsor: Kontent by Kentico 17:07 Customer dashboard Svelte Kit 21:21 Viewing experience React GitHub VideoJS Mux Vimeo 30:53 Hosting 35:51 Sponsor: LogRocket 36:45 Admin tooling Flexbox Postmark Drip Pancake Charts 47:37 Authentication PassportJS 50:30 Transactional Email Nodemailer Pug Inky mjml 52:36 Checkout Stripe Stripe Checkouts Stripe Elements Braintree Paypal 55:58 Hosting Digital Ocean Digital Ocean Platform Render Cloudflare 57:48 Sponsor: .TECH 59:39 Other parts ××× SIIIIICK ××× PIIIICKS ××× Scott: Toniebox Audio Player Starter Set Wes: Vissles v84 Keyboard Shameless Plugs Scott: LevelUp Tutorials - Svelte 3D Course 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

In this Hasty Treat, Scott and Wes talk about getting SSL certificates set up between your hosting, Cloudflare, and other web apps you may use. 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 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:21 Welcome 01:13 Sponsor: LogRocket 02:06 Sponsor: Prismic 03:23 Wes’ story of SSL Render 05:43 How LetsEncrypt works LetsEncrypt 08:32 What is Cloudflare? Cloudflare 10:33 The problem Wes ran into 12:27 Support is tricky 13:54 What is Cloudapp? Cloudapp Vercel 15:34 Two SSL Certs are needed 16:41 First solution 17:36 Second solution 22:36 What about A Records? 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 potluck episode of Syntax, Wes and Scott answer your questions about handling auth, are web dev real developers, handling Git conflicts, converting PNG to Box-Shadow, bad docs vs no docs, making Shopify headless, and more. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:32 Fool’s winter 03:25 How do you handle authentication in an app? 09:42 Responding to people who don’t think developers are real developers? 12:21 How do you handle git conflicts in package-lock.json and/or yarn.lock files? 14:42 I built a small project which converts .png images to CSS box-shadow values. Img to Box Shadow 16:37 January 19th, 2038 at 03:14:08 is the end of epoch Office Space 20:31 Sponsor: Sentry 22:44 Should I begin to add PropTypes to my packages and projects? 25:59 What’s worse: bad documentation or no documentation? 27:37 How do you find the motivation or discipline to follow through in side projects? 29:48 I need to take an existing Shopify site and make it headless - what should I use? 37:55 Sponsor: Sanity 39:18 You have a ?token= query param and some token value for it. Could you explain a bit more on what is that for? 44:05 Have you thought about selling Syntax.fm shirts? 46:05 Can I migrate my Express routes to Next.js’ API and get the same httpOnly cookies workflow? 52:03 Sponsor: Freshbooks 52:52 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Okeeffe’s Lip Balm Wes: Okeef’s Working Hands Level Up Course Drop - https://youtu.be/LATf_lVYoMQ?t=829 Shameless Plugs Scott: Level Up Course Drop Wes: Wes Bos Course player update 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 Hasty Treat, Scott and Wes talk about the differences between SSR, JamStack, and Serverless. 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. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. Visit Retool.com/syntax for more information. Show Notes 00:21 Welcome 01:20 Sponsor: LogRocket 02:26 Sponsor: Retool 03:49 What exactly is server side rendering vs. tech like Jamstack and serverless? Cloudinary Mux 12:15 Why use one or the other? Svelte Kit Syntax.fm 16:55 Where does Serverless fit into this? 19:12 What’s the ideal scenario? 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 second part episode of Syntax, Wes and Scott continue talking about the 2021 State of JavaScript survey: mobile and desktop libraries, testing, monorepo, runtimes, flavors of JavaScript, and more! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:20 Scott’s new sound panels 03:32 Instacart 2021 State of JS Survey Tauri 07:46 Mobile and Desktop libraries 13:50 Testing Vitest Playwright Cypress 19:48 Sponsor: Sentry 21:26 Monorepo tooling 27:00 Sponsor: Sanity.io 28:18 JavaScript Runtimes 30:51 JavaScript Flavors 32:32 Non JavaScript Languages 39:38 Utilities Syntax 401: Monorepo pnpm Turborepo 40:19 Resources Syntax.fm 403: JavaScript in 2022 - New, Coming and Proposed Features 43:18 Opinions 47:21 Features missing from JavaScript 49:30 Awards 52:58 Sponsor: Freshbooks 53:38 SIIIIICK ××× PIIIICKS 56:41 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: StoryPal Wes: Heartbeat Hot Sauce Matty Matheson on Hot Ones Gordon Ramsay on Hot Ones 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

In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs. 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. Show Notes 01:26 Sponsor: LogRocket 02:15 Sponsor: Linode 03:51 How Wes sells stickers Syntax 346: Selling And Shipping T Shirts with TypeScript 04:27 Where the stickers are printed Zigpac 06:30 How the stickers were designed 07:38 How do you ship them anywhere in the world for $5? 10:46 Packing the stickers 13:58 How did Wes sell the stickers? 16:51 Any concern about two people ordering at the same time? 17:13 One thing that did break Pushover 18:13 How the stickers were shipped Stallion Express APC 25:42 Costs for stickers 28:37 TypeScript sticker logo 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, Wes and Scott take a look at the 2021 State of JS survey that was recently published, including demographics, salary, browser APIs, overall happiness, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 2021 State of JS Survey 01:51 Winter birthday fun 05:38 The State of JS survey 07:37 Demographics 09:18 Salary range 09:58 Language features 14:05 Browser APIs 17:36 Custom elements and Shadow DOM 18:18 Page visibility API 19:28 File system API 19:58 Web share API 22:15 Sponsor: Linode 23:12 Libraries 27:30 Stimulus 29:21 Trends 31:32 Happiness with the state of front end frameworks 32:28 Sponsor: LogRocket 34:04 Backend Frameworks 38:16 Backend tool satisfaction 44:35 Happiness of build tools 46:32 Sponsor: Freshbooks 48:27 The best podcast in web development 49:05 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Inventing Anna Wes:Everlane Crewneck Sweater Shameless Plugs Scott: LevelUp Course Drop Party 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

In this Hasty Treat, Scott and Wes do a little this vs that with map vs reduce, forEach vs for in, .hasOwnProperty() vs in vs .hasOwn(), CSS absolute + left/right/top/bottom vs transform, and more. 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. 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 01:30 Sponsor: Prismic 02:58 Sponsor: Sentry 04:21 .filter() and .map() (every, one, etc…) VS Reduce 09:17 .forEach() vs for in / for of 15:52 .hasOwnProperty() vs in vs .hasOwn() 19:37 CSS absolute + left/right/top/bottom vs transform 22:54 Object.assign({}, obj) vs {…spread} Animal Friendly idioms 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, Wes and Scott talk with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites. 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. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Show Notes Ben Vinegar 00:20 Guest introduction 05:58 Seeing bug reports from Sentry 07:38 Distributed tracing for full stack developers 12:16 Amazon X Ray AWS Xray 15:32 Using Tracing 19:40 Sponsor: Kontent by Kentico 20:58 Cloudflare Worker Integration 22:30 How does Sentry have open source and a business? Heroku App Platform Media Temple Dreamhost WordPress Calypso 32:30 Sponsor: Hashnode 34:07 What is the tech stack of Sentry? 38:20 Sentry switching to TypeScript Sentry switching to TypeScript 44:36 Running JavaScript on other websites 51:24 Sponsor: Sentry 53:08 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Last Seen Wes: SEOUL Sisters Korean Kimchi Seasoning Ben: Worst Scene / Best Scene I Was There Too 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  

In this Hasty Treat, Scott and Wes talk about new proposed features coming to JavaScript in 2022. MagicBell - Sponsor Magic Bell 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. 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:23 Welcome 01:25 Sponsor: MagicBell 02:50 Sponsor: Sentry 04:20 Weird audio tics 05:19 Fetch in Node.js 09:54 URL imports in Node.js 11:41 JSON Modules 15:01 Node in import url scheme 17:30 Pipeline Operator 21:21 Reversible String Split 23:56 JavaScript Module Blocks 25:22 String.cooked 26:34 BigInts Math URL imports in Node.js @MylesBorins Pipeline Operator String.cooked BigInts Math 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, Wes and Scott answer your questions about selling themes, which browser to use, where to keep your 2FA codes, Remxi vs Svelte Kit, and more! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Show Notes 00:11 Welcome 02:10 Can you explain import.meta? 07:20 What are your thoughts on publishing and selling HTML & CSS/SASS templates/themes? 12:00 When is it best to use a semantic menu vs a nav? 16:14 Sponsor: Sentry.io 17:36 As a newbie in web dev., which browser do you recommend, Chrome or Firefox Dev. Edition? 20:25 Are TypeScript types are like creating models in Mongoose? 26:16 If you use 2FA, where do you store your recovery codes? 1Password 29:32 Do you know a programming language which similar syntax to js and without the need of a runtime-framework? Syntax 429 - Cloudflare Workers 32:54 I am not feeling the hype for Remix. I would rather put my energy into SvelteKit. Remix Svelte Kit 36:41 Sponsor: Sanity 38:09 Do you guys have any advice on getting unstuck from tutorial hell and at what point do you think someone is ready to apply for junior web dev jobs? 41:36 Do you feel frameworks like Next.js, Remix, etc. abstract too much the complexity that it takes to build full-stack web apps? 44:19 How do you keep up on new technologies? Swyx Scott’s Newsletter Intent to Ship 54:04 Sponsor: Freshbooks 55:06 Sick Picks! ××× SIIIIICK ××× PIIIICKS ××× Scott: The River Runner (2021) - IMDb Wes: Mike’s Hot Honey Shameless Plugs Scott: LevelUp YouTube channel Wes: Wes Bos on TikTok 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 Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. Visit retool.com/syntax. 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:25 Welcome 01:42 Sponsor: LogRocket 02:54 Sponsor: Retool 04:33 Topic introduction 06:44 How to get a handle on something new in a library? 10:27 How to contribute to comments 12:55 Looking through Issues 15:01 Looking at Pull Requests 15:43 Check Milestones 17:58 Look at Files Changed tab 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, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work? 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Show Notes 00:27:02 Guest introduction Wordle 02:45:13 How did Wordle go viral initially? 05:27:14 Where did the idea for Wordle come from? 07:07:06 What's your background? Reddit.com 12:52:23 Writing just HTML CSS and JavaScript 15:58:24 Wordle has 2 external dependancies 16:41:06 Sponsor: Sentry 17:40:23 The tech stack of Wordle Lit Elements just-merge gzip Cloudflare AWS S3 22:21:04 Would you use web components again? 29:36:08 How much did hosting cost? 29:55:01 How does Wordle remember my streak? 33:56:07 Do you play Wordle everyday? 36:28:11 Sponsor: Sanity 37:16:07 How do you land on internet hits so often? 40:33:15 Are you aware of the clones? Gordle 44:33:15 Sponsor: Freshbooks 45:17:10 Selling Wordle to the New York Times 49:05:20 Dealing with the domain name 54:15:09 What's his opener word? 56:03:03 Juice Juice it or Lose it talk 59:10:06 Sick Picks! ××× SIIIIICK ××× PIIIICKS ××× Josh: Tupperware Scott: Giant tub of Epsom Salt Wes: Shameless Plugs Josh: Wordle Scott: KeystoneJS Course Wes: All Courses 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 Hasty Treat, Scott and Wes talk about the pros and cons of JavaScript servers, Serverless, and Cloudflare Workers. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! 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. Show Notes 00:26:13 Welcome 01:12:15 Sponsor: Hashnode 02:27:10 Sponsor: Linode 03:30:09 Topic introduction Netlify Functions Fastify AWS Lambda 09:46:02 Hosted Linux servers 13:41:11 Serverless functions MongoDB SvelteKit 16:34:02 Connecting to a database in serverless 20:14:14 Cloudflare Workers Cloudflare Workers Works with Workers 25:39:09 What do we recommend? Render.com 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 review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, 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. Tabnine - Sponsor Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code. It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours. Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams. Show Notes 00:11 Welcome 01:05 This chapter is mid Wes does TikTok 04:28 Harry xli Harryxli 15:00 AustinBaird.software AustinBaird.software 19:45 Sponsor: Linode 21:10 ognjenbostjancic.com ognjenbostjancic.com 28:19 ndo.dev ndo.dev 35:37 Sponsor: LogRocket 37:02 jacksportfolio.com JacksPortfolio.com 41:51 einargudni.com einargudni.com 43:22 Kids advert break 46:05 Back to einargudni.com 48:24 Sponsor: Tabnine 50:41 cyrillappert.ch hslu.cyrillappert.ch 54:30 Sick Picks 59:02 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: The Alpinist (2021) - IMDb Wes: Instant Pot Air Fryer Lid Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses 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 Hasty Treat, Scott and Wes are inspired by a Reddit post to talk about how to work better with your team. 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. Show Notes 00:24 Welcome 01:57 Sponsor: Sentry 03:26 Sponsor: Sanity 04:48 Summary of the Reddit post 06:46 We are a team 09:05 Coding with ego 12:32 Follow the leader 13:59 Getting better at asking questions 15:01 Ask for clarity 15:43 Understanding the guidelines 18:12 Interpersonal tips 19:49 Celebrating wins 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 all about monorepos - the why's and the how's of using them on your projects. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11 Welcome 01:46 Our experiences with monorepos 05:04 Why use monorepos? 09:37 How long have we been using monorepos? 10:16 Tools for starting a monorepo pnpm Nom link 16:22 Sponsor: Kontent by Kentico 17:33 What's the process for managing libraries? 20:10 Installing / uninstalling things 21:07 Shared dependencies 27:45 Sponsor: LogRocket "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", "update": "pnpm recursive up -L -i" 29:23 Turborepo Turborepo 39:32 nX nx 45:38 Sponsor: Freshbooks 46:32 Lerna Lerna 48:09 Rushjs Rushjs 52:35 Sick Picks 59:17 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze v3, 10 micro sd Wes: Tineco A11 Vaccum Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses 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 Hasty Treat, Scott and Wes talk about their process for updating project dependencies. Sponsor - LogRocket 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. Sponsor - MagicBell 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:25 Weeeeelcome 00:52 Sponsor: LogRocket 01:29 Sponsor: Magic Bell 03:32 What are dependancies? 04:04 Wes updates all the things 05:30 How to check if there are any updates 07:05 Upgrade isolated, Minor deps first. 09:16 Upgrade Minor groups after that 09:56 Then upgrade Major dependencies 14:47 Finally upgrade any stand along dependencies 15:44 Test test test 16:19 Watch error logging 17:05 Pray 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 through what to focus on at a beginner, intermediate, and advanced levels of coding skills. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 02:30 Semantic HTML 07:36 JavaScript Data 08:54 Issues & technical workflow 11:40 Emailing People Syntax 117: How to Email Busy People 13:49 Make something animated with CSS Open Props Style 16:04 Make a full stack contact form in a framework 16:52 Sponsor: Sentry 18:59 CSS Variables 22:36 Server Side fundamentals 24:28 Meeting Skills 28:36 Help organize a codebase or repo. 30:26 Make something animated with JS 31:40 Write a bot 33:35 Sponsor: Linode 34:51 Write CI / CD actions / tools 37:55 Advanced Typescript 38:32 Teach at your company 39:35 Speak at a conference 40:45 Make something 3D Frame 3D React 3 Fiber Svelte Cubed 42:03 Scrape and write something to collect data 44:15 Sick Picks! 48:43 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: 14 Peaks: Nothing Is Impossible - Netflix Wes: Booty Slippers Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 Hasty Treat, Scott and Wes talk about CSS + JS Hacks that they're ok with using. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Sponsor - Sentry 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:53 What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do? 02:09 Sponsor: Sentry 03:12 Sponsor: Freshbooks 05:32 Negative margins in CSS 07:53 Not Passing a radix to parseInt() 10:17 -50% translation 50% direction 11:27 Overwriting Arguments in a function 13:20 non-standard-element 17:26 Button must have a type 18:56 Triangles out of borders 20:40 Overflow:hidden to clear a float 20:55 Always pass noopener to links! 22:16 Inline styles 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 answer your questions on a Potluck episode of Syntax. 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. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. retool.com/syntax 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:11 Intro 01:10 Watching movies with kids 02:49 How do you protect images on your website? 07:21 How did you guys learn Typescript? 13:26 Should I worry about learning Typescript now or stay focused on mastering JS first? 18:16 Sponsor: Prismic 20:03 How do you decide what to learn? 26:26 I want to become full stack and learn a backend language, which one should I choose? 28:07 Do Svelte components not support media queries? 29:30 Any advice or suggestions on how to approach Auth or Payment? 32:53 Sponsor: LogRocket 33:59 Any experience working with a team on a different time zone? 42:49 Do you have any experience or recommendations for introducing prettier late in a project? 48:57 What are your thoughts on monorepos? 52:57 Sponsor: Retool 55:14 What does it mean to know JS? 59:39 What would you do if you had to start over? 03:49 Sick Picks 07:09 Shameless Plugs Paw Patrol Movie Encanto Luca Tweet: When should a JR dev learn typescript? Typescript Handbook Selling and Shipping T-Shirts with Typescript Svelte Kit Remix Height Clocker iState Menus Turborepo Nx ××× SIIIIICK ××× PIIIICKS ××× Scott: Learning Differently Wes: Truff Hot Sauce Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 Hasty Treat, Scott and Wes talk about Remix! Sponsor - Sanity 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. Sponsor - Sentry 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:32 Rrrremix Remix 02:03 Sponsor: Sentry 03:48 Sponsor: Sentry 05:51 What is Remix? 07:51 Built on Fetch 12:28 Frameworks are getting so good 13:30 Data loading 14:36 Actions 19:09 Error boundary and catch boundary differences 20:15 Differences between Remix and Gatsby, and other SSG 21:33 What about hot reloading? 22:47 Nested layouts and nested routes 24:25 Typescript support 26:33 Hosting anywhere Remix Docs Remix on GitHub Remix on Twitter Remix on YouTube 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, Wes and Scott talk through their predictions for 2022. 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. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11 Welcome... 01:31 Svelte is king Svelte Svelte Kit 03:57 Next.js Next.js Next.js Live 06:40 Web components Open UI Syntax 353 Stylin the Unstylables 11:42 Rust popularity Rust Rome 15:58 Sponsor: LogRocket 17:12 Serverless and Cloud Functions 18:19 Cloudflare becoming a major player Cloudflare Pages 20:05 Tailwind Tailwind Open Props 24:10 Glow Up 24:35 Next gen dev tools OhMyZsh Warp Fig iTerm Starship 27:32 Sponsor: Hashnode 29:48 CSS Container queries, Layers, and More! 31:45 GraphQL 34:13 Deno Deno 37:41 Typescript 43:36 Server come back 45:13 Sponsor: Freshbooks 46:02 Checkouts and payment processors Wise 51:30 Temporal API 53:20 Remote Dev / Thin Client 55:16 Sick Picks 00:16 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: A Show About Animals Wes: Wise Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 Hasty Treat, Scott and Wes talk about some Javascript one liners that speed up your coding experience in one line. Sponsor - Linode 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. Sponsor - Sentry 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:24:12 Welcome 01:24:11 Sponsor: Linode 02:11:02 Sponsor: Sentry 03:54:18 Twitter ask for One Liners 04:24:05 Math random const getPsuedoID =() => Math.floor(Math.random() * 1e15); 05:43:09 Random color Paul Irish random color '#'+Math.floor(Math.random()*16777215).toString(16); 06:41:06 Console.log as an object. console.log({ dog, person }); VS Marketplace Link 08:29:17 Edit anything document.designMode = "on" 10:15:15 Temporal date export const today = Temporal.Now.plainDateISO(); 11:44:05 Console(log) const myFunc = (age) ⇒ console.log(age) || updateAge() 13:26:13 Remove a prop const { propToRemove, ...rest } = obj; 15:29:01 PHP style debugging preElement.innerText ={JSON.stringify(val, '', ' ')}` 16:31:00 First and Last Destructure var {0: first, length, [length - 1]: last} = [1,2,3]; 17:34:17 Speed up audio video document.querySelector('audio, video’).playbackRate = 2 Overcast 19:44:15 Sleep function let sleep = (time = 0) => new Promise(r => setTimeout(r, time)) 20:26:00 If statements on one line If (!thing) return 'something' 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 review their predictions and highlights for 2021. .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". 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:21 Wes highlights 05:33 Scott's highlights 07:42 Writing admin tools for fun 13:33 Sponsor: .TECH Domain Name 14:30 Tech that was hot in 2021 17:18 Sveltekit Pancake by Rich Harris Svelte Svelte Kit 19:54 Remix Remix 20:36 Astro Astro 22:51 NextJS 11 and 12 NextJS 25:14 Vite and Parcel 2 Vite Parcel 26:52 Web3 28:00 Prisma Prisma 30:35 Typescript Typescript 33:08 Sponsor: Sentry 35:25 Reviewing past predictions 36:54 ESM 39:47 Remote work will grow up Discord Notion Height 40:38 Deno 45:11 React 46:02 Tooling fade away 47:29 Rome Rome 48:47 Rust 49:36 Programming communities Twitter Spaces Clubhouse Circle Github Discussions Tiktok Benawad on TikTok Wes Bos on TikTok 51:08 Wasm 51:26 Typescript 52:35 React 53:40 More web component frameworks 56:43 Gatsby 57:26 CSS updates Syntax 354 with Miriam Suzanne 01:00:06 Serverless 01:01:13 Enterprise jamstack 01:02:01 Sponsor: Mux 01:03:05 Sick Picks 01:08:03 Shameless Plug ××× SIIIIICK ××× PIIIICKS ××× Scott: Rocket League Sideswipe Wes: Home Work on Discovery+ Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 Hasty Treat, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes. Sponsor - Sanity 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. Sponsor - LogRocket 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:54 Luks of the past 03:19 Sponsor: Sanity 04:26 Sponsor: LogRocket 05:04 Has package-lock.json ever saved your bacon? 08:27 Why do you not talk about Angular? 11:28 How do you handle package updates? Wes Bos tweet on npm-update 17:43 How do you keep learning in your career? 21:02 How does the movie selection work on planes? Emby 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 with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. 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. 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. Show Notes 01:20 Guest introduction 02:46 Coding in the browser anywhere Gitpod JetBrain 04:58 How does GitPod work in the browser? NoYaml Cobalt2 Finding VS Code Extensions for Gitpod 09:27 How does GitPod actually work? 10:57 What is Kubernetees? 13:11 Is there a full VS Code environment? 18:21 Sponsor: Linode 19:01 Who are the heavy users of Gitpod? 24:32 Teams on Gitpod Gitpod Roadmap Centered.app 30:11 Do the developers of Gitpod use Gitpod to build Gitpod? Gitpod Careers 32:51 What language is Gitpod written in? 33:15 Sponsor: Logrocket 34:10 Living in a van coding 38:16 How do you stay productive on the go? 40:18 What was The NFT Bay? The NFT Bay 44:54 Is there any good in Web3 ideas? Lularoe Documentary 49:42 Sponsor: Freshbooks 50:13 Selling NFTs is difficult 51:34 Sick Picks! 58:40 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Sweet Bobby Podcast Wes: Woosh Cloths Pauline Uniqlo Geoff Helinox Chair Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 Hasty Treat, Wes and Scott talk about what's new in Gatsby v4. Sponsor - Prismic 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. Sponsor - Sentry 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:26 Welcome 01:41 Sponsor: Prismic 02:35 Sponsor: Sentry 03:26 Gatsby v4! Gatsby What’s new in Gatsby 4 04:26 Any node version requirements? 05:22 Three rendering options 15:47 Parallel Queries 16:28 Data sync 16:57 Gatsby admin deprecated Nextjs 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 answer your questions on a Potluck episode of Syntax. 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 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. 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. Show Notes 02:07 Google Chrome to start measuring user experience beyond the completion of page load 05:47 How can I ensure that I am executing npm commands safely? 07:58 How should I prefix booleans? 09:46 How do I decide between using an enum vs a union type in Typescript 13:40 What is Web Assembly? 18:34 Sponsor: Sanity 19:45 what happened to Scott using Linux? PopOS 22:44 Sponsor: Linode 23:57 How do you batch requests in nodejs to an api? 26:15 What are micro-frontends? 29:55 Sponsor: Sentry 31:16 Since Astro seems so amazing, aren’t you tempted to rebuild your site now in Astro instead of Sveltekit? Astro 33:04 Can you please shed some light on redirects in express/ koa? 36:41 How do deal with ADHD? 41:52 Should I repeat the name of the issue in the commit message or just "Resolves #$issue-number"? 44:21 Do browsers update automatically? 47:52 What do you do when working on a big project? 49:55 Can you guys help to breakdown and explain jargons and differences of RPC, REST, gRPC, GraphQL? 53:25 How to ask a question 53:42 Sick Picks 56:17 Shamless plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Satechi 3-in-1 Magnetic Wireless Charging Stand Wes: The Always Sunny podcast Shameless Plugs Scott: Astro Course Wes: All Courses 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 Hasty Treat, Wes and Scott talk about how to do things in Svelte. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Sponsor - LogRocket 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:28 Welcome 02:18 Lead pipe talk 04:33 Sponsor: Freshbooks 05:05 Sponsor: Logrocket 06:34 Intro to Svelte 07:44 Get Local State running Writable-stores 10:47 Arrow functions 11:53 Functions that update state React Hooks in Svelte React Use Svelte Store 14:36 Live / Reactive Variables 17:03 Context 20:45 Conditional rendering 24:57 Input binding 28:02 Should Wes rewrite his video player in Svelte? 30:07 Child elements 32:10 Vercel hires Rich Harris 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 with Anth Rogan about JavaScript and hardware - from cars, to factories, and the internet. Bryntum - Sponsor Bryntum’s suite of web components help developers quickly add powerful project and resource scheduling capabilities to their React, Angular, Vue or vanilla JS apps. The SDKs include extensive API docs and plenty of examples. Try them online at bryntum.com/examples/gantt or bryntum.com/examples/scheduler-pro. Visit Bryntum.com/syntax for a 45-day free trial. 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. 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. Show Notes 01:02 Guest introductions Anth Rogan on LinkedIn 05:44 What kinds of things did you work on at Nissan? 09:02 Why are car head units based in the past? 11:35 What are cars running for UI? 14:04 What are PLC's? 17:02 What kinds of regulations exist for automotive software? 22:28 Sponsor: LogRocket 23:03 Deeper look at PLC's 26:56 What's Node-RED? Node-RED 29:37 JavaScript is popular in industry? What else is used? 31:06 Sponsor: Brymtum Products 32:57 How do you learn about this tech? PLC Subreddit 35:24 What were you doing with Nissan head units? OBD2 Scanner 37:15 Web bluetooth API research 39:13 What's MQTT? MQTT 41:29 Sponsor: Linode 42:14 Using IoT and machine learning to find issues 46:53 New opportunities in industry tech coming 52:40 Cottage IoT dreams 56:27 Relaxing in Minecraft 57:42 Sick Picks - Anth 58:38 Sick Pick - Scott 59:49 Sick Pick - Wes 02:12 Shameless plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Spotless for macOS Wes: Wago Lever Nuts Anth: Daily.dev Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! 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 Hasty Treat, Wes and Scott talk about Meta Tags. Sponsor - Sanity 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. Sponsor - Sentry 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:25 Welcome Syntax 379 - The Link Tag 01:24 Sponsor: Sanity 02:50 Sponsor: Sentry 04:28 What are Meta Tags? 05:01 What is charset? 07:41 The viewport tag That’s a Nice Touch on TikTok 10:25 SEO and page data 12:03 Browser display tags 14:20 Dead tags 16:24 Robot tags 17:53 Adult ratings tag 18:18 Google site verification tags Google Verification tags 19:35 Open Graph social tags Facebook Meta tags Open Graph 22:54 Generator tag 25:54 http-equiv tag http equiv 27:20 Apple specific tags Apple specific tags 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 all the things that have improved the lives of web developers over the years. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. 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. Show Notes 00:16:18 Topic introduction 01:03:00 Leaf blowing and house updates 02:57:01 We complain a lot 04:13:22 Typescript improvements 06:20:00 Optional chaining 07:01:06 Async, Await and Promises 07:57:05 Array methods and tools for immutability 09:13:16 DOM interactions with getElementBy 10:34:10 Arrow functions 11:13:06 Classes! + All of ES6 was a huge breath of fresh air 12:18:07 Looping 13:22:00 Prettier Code is a huge game changer Prettier ESLint 15:51:00 Sponsor: Freshbooks 17:04:15 CSS updates 17:41:11 CSS Variables 18:41:15 Flexbox and Grid 20:16:10 VH, VW units 20:47:24 Overflow scroll on mobile 21:54:10 Color formats 23:08:06 Sticky headers 23:45:06 HTML 5 Introducing HTML5 By Bruce Lawson and Remy Sharp A Book Apart 27:54:00 Web components 28:29:09 Sponsor: Sentry 30:01:17 Tooling Syntax 12 Why Is Everyone Switching to VS Code? 31:28:13 Speed of latest crop → ESBuild, Vite, Snowpack, parcel Vite Snowpack 33:33:03 Image compression 37:08:21 Hot module reloading 39:11:09 Image resizing, video hosting, accepting credit cards Gatsby Cloudinary Spritecow SmushIt Stripe Braintree Entrepreneur friendly licensing 39:48:18 Entrepreneur friendly licensing 40:43:18 Sponsor: Linode 42:11:10 Developer Tools in the browser Tweet from @Bentlegen Chris Coyier - Let’s Suck at Github Together Chrome.io 43:52:17 Insights into errors and troubleshooting 44:49:13 Cross browser and cross device testing 47:12:19 Hosting and SSL Certificates 48:14:08 Scaling up 49:53:13 Scaling with containers 50:14:09 When did we start using Github? 53:52:12 ××× SIIIIICK ××× PIIIICKS ××× Scott 59:42:22 ××× SIIIIICK ××× PIIIICKS ××× Wes ××× SIIIIICK ××× PIIIICKS ××× Scott: Tonal Wes: Reboot your Portfolio / Canadian Couch Potato Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! 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 Hasty Treat, Wes and Scott talk about their experiences using Github Co-pilot. Show Notes 00:58 Wake up early and let's go 02:19 Sponsor: LogRocket 03:21 Sponsor: Freshbooks 03:56 What is Github Co-Pilot? GitHub Co-Pilot 06:01 Scott is a GitHub Star 07:03 Examples of GitHub Co-Pilot usage 09:43 Writing pseudo code Emmet 12:51 Using it for loop callbacks 13:52 What langauges does GitHub Co-Pilot work with? 14:54 It plays nice with HTML files 15:48 Svelte component example 16:31 Benefits for course creators 17:35 Some scary things 21:04 Could GitHub start charging for this? 22:30 Good at writing types 23:59 Gripes 24:54 Converting code to Parcel 2 Parcel 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 ways they troubleshoot issues with their code. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 01:13 Furniture shortages 02:29 Managing stuff 03:05 Basic troubleshooting skills are missing 06:09 Sanity check CodePen Codesandbox 08:05 Isolate the issue 08:57 Commenting out code is free 12:17 Replicate the issue 15:07 Svelte and VS Code error Svelte VS Code 17:02 Wes' course upgrades Parcel 2 Patch package 18:07 Sponsor: Logrocket 19:15 Rollback 20:30 Reading the error message Syntax 47 - How to Get Better at Debugging Syntax 152 - Debugging Tools 23:59 Crack open the node modules directory 26:06 Sponsor: Freshbooks 27:29 Write step by step comments to the code 29:01 Consider outside sources 30:56 Using the right tools for the job 33:19 Rubber ducking it 34:16 Wes' Big Mouth Bass story 37:20 Scott's blown away by his leaf blower 39:56 Copy paste a message into Google Twitter - What are your tips for troubleshooting code or a system that doesn't work? 41:33 Logs and metrics 42:36 CI CD issues and Error Handler 43:41 Using a step debugger 44:24 Explain what's happening to someone else 45:31 Read the documentation 47:05 Take a break, have a cuppa 48:42 Sponsor: Mux 50:57 SIIIIICK PIIICKS 57:05 Shamless plugs Links @jimbomoso - Do you know of any resources for developing/improving code trouble shooting? ××× SIIIIICK ××× PIIIICKS ××× Scott: Forehead Wes: EGO EXINNO 240W/120W Chargers Shameless Plugs Scott: Astro Course - 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

In this Hasty Treat, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU. 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 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 04:30 The last time we upgraded 07:05 Initial thoughts on new MacBook Pro Apple MacBook Pro 09:23 How much RAM you might need 11:33 M1 Pro or M1 Max? 12:37 Justification as a business expense Figma Sketch We recently found that the new 2021 M1 MacBooks cut our Android build times in half. VS Code Microsoft releases M1-native Visual Studio Code for developing apps Notion Height Sublime Text 14:52 Shortening the feedback cycle 15:57 Using VS Code 21:20 Video editing on M1 MacBook Pro Mkbhd - M1 Macbook Pro review Synology Syntax.fm Ep220 The Synology Show Recut Davinci Resolve 24:27 Screenflow export comparison Screenflow 29:32 VS Code improvements SWC pnpm 32:57 The tools are no longer the bottleneck 33:37 Hardware upgrades 34:10 The notch Bartender 36:11 macOS icons have more padding 37:03 Charging and battery TS3 Plus 38:32 Fans and heat 39:18 Touch bar is gone 39:36 External displays 41:03 Battery 41:54 LG Display issue 42:51 Touch ID reader in a better spot 43:25 What's happening to your old MacBook Pro? 45:21 Ports and keyboards 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off? 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!! 11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks. 16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener. 21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this? 24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.? 27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go). 31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming! 38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for creating new content types or adding new features? Or do they only see the input fields of all the contents that can be added to a specific page? Thank you! 42:14 - Dave: Hey guys, love the podcast! I understand that CORS prevention is in place in the browser to help improve security/prevent malicious requests across domains, but I don’t understand why you can get around this by performing the request server side, for example via cURL? If I were a malicious actor, surely I could just send my cross domain request through a proxy to avoid the CORS issue? I’m sure I’m missing something obvious here, can I please get your thoughts on this? 44:48 - Lemon: How do you implement authentication with GraphQL? Especially in Fastify, I know Scott recently moved over from Meteor to Fastify, so I too was checking Fastify but couldn’t find a satisfying auth solution that fits well with GraphQL. 48:08 - Zack Vogel: I love when you play games on the podcast. I’m a high school technology teacher and I play a game with my students called the 5 Second Rule. It’s based on a board game, but I have changed the topics to technology-themed questions. The game works like this. One person reads a topic “Name Three VS Code Extensions” and the other person has five seconds to respond with three correct answers. I think this could be a fun game to play on the podcast. Links http://www.seeeyewear.com/ https://www.warbyparker.com/ https://www.costco.com/ MariaDB dynamic columns https://en.wikipedia.org/wiki/Grok https://twitter.com/argyleink https://remarkable.com/ https://figma.com/ https://graphql.org/ https://www.meteor.com/ https://www.fastify.io/ https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing ××× SIIIIICK ××× PIIIICKS ××× Scott: myQ Chamberlain Smart Garage Control Wes: ATOTO Head Unit Shameless Plugs Scott: Level Up Tutorials Pro - 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

In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates! 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 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 04:00 - Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds 06:25 - Middleware (beta): Enabling full flexibility in Next.js with code over configuration 08:16 - React 18 Support: Native Next.js APIs are now supported, as well as suspense 09:56 -  AVIF Support: Opt-in for 20% smaller images 11:58 - Bot-aware ISR Fallback: Optimized SEO for web crawlers 13:10 - Native ES Modules Support: Aligning with the standardized module system 14:39 - URL Imports (alpha): Import packages from any URL, no installs required Links https://twitter.com/mattgperry Introducing Middleware 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 with Tomek Sulkowski about web containers, StackBlitz and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. 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. Guests Tomek Sulkowski Show Notes 02:45 - What is StackBlitz? 05:28 - What makes it different? 08:20 - How does offline work? 12:18 - What are web containers? How does this fit in? 17:45 - How does this all work (WASM, Node.js in the browser, etc.)? 21:00 - What does performance look like? 31:06 - What about VS Code extensions? 32:48 - Monorepos? 35:12 - Databases? Sqlite? 35:36 - Are there any limitations? 37:02 - What is Turbo? 40:58 - How is this different from similar apps? Links https://stackblitz.com/ https://jsbin.com/?html,output https://jsfiddle.net/ https://codepen.io/ https://code.visualstudio.com/ Fugu API Tracker (fugu-tracker.web.app) https://www.docker.com/ https://spidermonkey.dev/ https://github.com/chakra-core/ChakraCore https://sli.dev/ https://vscode.dev/ https://codesandbox.io/ https://www.gitpod.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: HaloLock Universal Ring Wes: Car LED Light Upgrade Tomek: The Dresden Files Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tomek StackBlitz 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 Hasty Treat, Scott and Wes talk about Astro — what it is and why you should check it out! 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. 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 03:08 - What is it, what does it do? Framework for server-first static apps Use any front-end framework Does not ship JS unless you explicitly define a component to ship JS 05:20 - The syntax .astro files is a mash-up of Svelte and React Frontmatter for server-side JS Template syntax is basically JSX TS baked in --> --> --> --> --> 07:48 - State management In client-side JS only, no state in .astro files 10:50 - CSS Svelte style Local, scoped tags SCSS baked in 11:16 - Data fetching Fetch in frontmatter via fetch() 12:06 - Vs React? Vs Next? Vs Gatsby? Vs Svelte? 15:24 - Tooling There is a Syntax highlighter Uses Snowpack under the hood 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 are back with another edition of “Stump’d!” where they try to stump each other with interview questions. 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 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 06:05 - Which property allows you to control the shape or appearance of the marker of a list? 06:33 - What is a pseudo element? What is a pseudo class? 09:15 - What is the difference between block, inline and inline-block elements? 10:15 - What is a combinator selector? 11:12 - What is specificity? How do you calculate specificity? 14:37 - True or False — The translate() function can move the position of an element on the z-axis? 16:44 - What is the difference between “resetting” and “normalizing” CSS? 17:51 - How can you load CSS resources conditionally? 19:45 - Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? 22:30 - When to use CSS grid vs flexbox? 25:12 - What are all eight @-rules in CSS? 28:01 - Which property is used to underline, overline, and strikethrough text? 29:52 - What is DOM reflow? 32:14 - How do you serve your pages for feature-constrained browsers? What techniques do you use? 34:00 - What is the property for controlling image-scroll? 36:23 - What are the three different types of CSS gradients? Links https://github.com/sudheerj/javascript-interview-questions https://github.com/learning-zone/css-interview-questions ××× SIIIIICK ××× PIIIICKS ××× Scott: https://height.app/ Wes: Anker Mini Car Charger Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: Advanced React Course - 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

In this Hasty Treat, Scott and Wes talk about PNPM and monorepos! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 4:40 - What is pnpm? https://pnpm.io/ Performant npm https://www.youtube.com/watch?v=hiTmX2dW84E Find and remove node modules find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 08:30 - Why monorepo? Internal packages all in one place Forks and custom packages easier Commands that control everything at once 10:33 - Workspaces Not exclusive to pnpm Yarn, npm, pnpm all have them now Different syntax packages: - "packages/**" 12:48 - How it works in practice All commands run through root Use in host, hook up my monorepo to render run commands Filter and recursive "install:all": "pnpm recursive install", "clean": "pnpm recursive exec -- rm -rf node_modules; rm shrinkwrap.yaml; rm -rf node_modules", "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", 16:35 - Using submodules https://paigeniedringhaus.substack.com/p/march-2021-git-submodules Why submodules? Public and private Links https://www.npmjs.com/package/npx https://yarnpkg.com/ 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

For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition! 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. 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. Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could useEffect be right?) Next thing you know, they ended up bringing in a guy with an angle grinder to get access to the server cage. 04:15 - No one from Denver can buy 06:38 - Bug accidentally gives $90 million to users https://www.cnbc.com/2021/10/01/defi-protocol-compound-mistakenly-gives-away-millions-to-users.html 08:34 - Share Pointy Knives Hi! I’m a developer at a consulting firm in Sweden, writing C# on the backend and using React with either JavaScript or TypeScript and hosting things in Azure 99% of the time (and 1% in SharePoint). I was in my last week at my last job before I was due to start my new job. Worked 12 h/day to keep up with all the handovers etc. to colleagues so they would have a chance to continue working on the solutions I have taken care of. One project was a process tool hosted in SharePoint Online. The guy who would oversee it had -1% experience with SharePoint (which I pointed out to my bosses). But to make things a bit easier, I wrote a deploy script to ease things a bit. Starts the terminal and runs the script towards the acceptance environment. Umpteen million errors appear… Which is strange, because there would only be about 20 commands (which can cause errors like these). I log into the environment to double check if I now accidentally entered the wrong values in the script (which looked okay according to me). But I get a 404 error when I try to reach the environment… I log into the admin interface; I discover that the site is gone… Also checking the trash can, there are no things there. Very strange. I find that I’m in a different folder than the one where I saved my script… In that folder there is an old deploy script that was used when the project was started a thousand years ago (which was not used after the project was “finished”). The first thing the script does is force delete the site and then try to create a new empty site… The site is gone with lists and everything (lists are a SharePoint thing, think of it as sql-lite), there are no backups of the acceptance environment (although it is very important). I just feel a little panicked about how I’m going to solve this. However, I remember testing a tool six months ago to copy entire environments. Where the first attempt was made on the acceptance environment. Finds the cloned environment and can use the same tool to clone it back. It took only 8-12 hours of work to create all the new things done in the environment in the last 6 months instead of X number of hours to build everything from scratch. Once I updated a feature that saves accessories on orders (same solution). However, I failed to add all the new fields to the production environment. Which meant that accessories were not saved at all… Which was discovered after a week… I fixed the error in 5 minutes and the sellers had to contact x number of customers to double check what kind of accessories they would have for their orders… 11:22 - External HD One time I needed to format a server. It was an outdated Windows server. I selected all the files and copied and pasted to an external hard drive. My drive was pretty fast and it took like a minute. I was like: “Wow! That’s a great external hd”. Formatted the server and, as soon as I realized it didn’t copy 10% of the files, I had that face. We all know that face. Anyways. Tried to restore the files using some HD recovery tools but they were all corrupted, not by the formatting itself but for the installation of the new OS. My boss was pissed! I was very young so I blame it on the server. I’m not proud of it. But why the heck they would ask a developer to format a server in the first place? By the way, my birthday is on Halloween. Spoooky. 13:07 - Hey Loser I was testing new code to automate mass-mailings to our customers. Who knows what demon drove me but I wrote the “test” mailings like ransom notes: “Dear loser! Fork over all your $$$ or else!” Well, all was looking great and I wa s feeling pretty pleased with myself. Progress bars were sliding and counters were spinning. But I could hear a rising commotion from the marketing guys behind me. Phones ringing, voices raised. Turns out I had moronically wired myself to the production database! Even worse for me, I’d only been at the company a month or two. I thought my goose was cooked and the Big Boss was plenty mad, but I owned up right away and apologized. We put out a cover story that we’d been hacked and all was forgiven. 15:01 - HE HATE ME I was part of the developer team that accidentally leaked the 8 cities the XFL, an alternate football league, a week before their press conference. ewrestling.com/article/wwe-ac… We were using Contentful and Gatsby. A junior dev entered the information into the prod space instead of the UAT space and when we released some bug fixes, it picked up the contact us content update. I found out after seeing stories pop up in Google News when I was about to go to sleep. Was taking the content down when we started getting calls from the CIO of the WWE. The league went bust because of COVID. 19:23 - I Don’t Have Memory of This I had two pretty bad code changes that only showed their problems when they went live in production. Around 6 years ago, I was running into a large performance issue with some of our queries running slowly against this giant DB. We were using JPA/Hibernate and we had a bunch of joins that were done lazily. I switched a few of them to eager so that they would create a single SQL statement instead of a bunch (or thousands). The change worked fine on my dev environment, QA, and staging. Staging was supposed to be representative of production. So we went live and within minutes the entire system went down because of out of memory errors. We quickly switched back to the lazy joins. We found out that staging had more memory and fewer DB records than production though they were supposed to be exactly the same. 21:05 - Your Performance is Slowing us down Back when VMWare was becoming a thing, like 2010 or so. I was working at an ecomm site and we were seeing slow performance between the app server and some data services. I decided to build a little multithreaded logger that could track when a query to Oracle Financials was running too slow and generate a warning. Oracle Financials was doing the credit card transactions, orders, and all the rest of the sites DB work. The code had no impact on my dev, QA, and staging environments. We were hitting well over our minimum number of concurrent users. We deployed it to production and then the system got slower and slower, but never crashed. Again, production and staging were set up differently. Staging was a bare-metal server. Production was running on an ESXi server on a host that was split 4 ways. The multi-threaded code meant to detect performance degradations was slowing the whole system down when it tried to synchronize data across threads. I was pretty embarrassed by both these two issues. It went to show that production is its own special thing and that you really don’t know if your server-side code is really going to work until it starts running there. 23:15 - Dead Button Way back when mainframes were king, a guy I worked with pushed a button in, that if released, would immediately take down the entire company. He stood there for 4 hours, holding the button in, until we could let it crash after business hours. We gave him a chair after 2 hours. 25:12 - No Deploys on Fridays I was a junior dev working on our company’s website. They were HTML + nunjucks templates that were later being integrated with the backend using some Python witchcraft. There was also a metric ton of JS libraries added (like Babra for page transitions, threejs for a cool interactive animation on the landing page etc.). Didn’t really get much of all this package.json stuff at that seniority level. So after running yarn or npm or whatever, and seeing some warnings about a couple packages being outdated, I decided to update some of them. It ran great locally, but I didn’t build the prod version, as I didn’t know there could be any differences. I was working on some minor feature (or maybe even some minor bug) and the PM decided there’s no time for code review. So I pushed it to the repo, the backend guy did his integration, and launched it on prod. As it turned out, there were some breaking changes in one of the libraries I decided to update. It crashed the entire site. On Friday. At 4:30PM. And that, kids, is why you don’t deploy on Fridays. 27:33 - Stupid Selfie Horror story for you Wes. I work for one of the biggest retailers in the UK and we were working on an app that would go on a ‘media wall’ in their flagship store in London. Basically a giant 200-inch screen in the middle of the store that social content can go on. Turns out that I left my local Dev version connected to the production API when I uploaded a couple of stupid selfies of my big head in the office. Get a call the next day to ask why my face is on the medial wall. 28:37 - Soda I was a computer operator back in the late 1960’s, operating a Honeywell mainframe. The consoles were huge, about the size of a dishwashing machine, with the console typewriter and printer inset in the middle, on top. I had a soft drink on the console, next to the typewriter mechanism. We were told never to bring a drink into the room but we all did it, especially on third shift. Long story short, someone called my name, I turned around and knocked the glass of soda into the console. Had to be completely replaced – machine was down for two days. My boss was not happy. 31:22 - Oof A bigger horror story. I had my own software company in the 90’s and was in Singapore, customizing my software package for Johnson & Higgins Insurance Brokers – I had their Asian contract for my Insurance Broker/Accounting package. I spent a good 40 hours on Saturday and Sunday, making all the changes they asked for, getting ready for a demo on Monday morning. I finished up about 4am on Monday morning and was cleaning up my files. All this work was done on a Novell server. Print files had an extension of .prt and I had a ton of them in the main directory from all of the testing I had done. I was cleaning out old files, getting ready to back everything up and I thought I would delete all of the print files. I mistakenly keyed in erase *.prg, instead of erase *.prt (or whatever the delete command was – can’t remember it now). Programming files have a .prg extension – I had deleted all of my updated files from the weekend. In desperation I called Novell in Utah, hoping they could help me recover the files, but no-go. The demo Monday morning was not fun. 33:24 - Young Dev I was a young dev right out of college. My first job was at a child support company where we had desktop apps that would handle case information more efficiently than using Excel. My first project was to write a POC that would later be implemented into a new, bigger app that consolidated all the “POCs” for various parts of the child support process. For some odd reason, I still don’t know why to this day, my boss wanted me to write this “new” app on top of an old app with a bunch of legacy code. I never understood why but as a young dev fresh out of school, you tend to just do what you’re told. In school, I mainly used PHP/HTML/CSS for learning how to work with a database; this job however used C#/.NET for their desktop apps so I was doing a lot of learning as I went. I remember finally learning how to connect to the database and run some SQL after fighting with this old pile of legacy code. In early versions, I chose to handle creates/updates for these records in the same function. My young, dumb self wrote a try catch statement that would attempt to create the record and if it failed, it would try to update the record. Before the first production release, I updated the flow to handle creates/updates in separate functions - but never removed the update in the catch block of the original function now used for creates only. Somehow I, or any PM/QA, never failed on a create and hit this catch block while testing. Fast-forward probably 9-12 months later, I got a ticket to investigate why every case’s data looked the same in Production. I login to the app, search a few case numbers and sure enough, every case’s data is the same. I began freaking out as I had no clue how this could’ve happened. I mean it had never happened in all the dev work, testing, and months of live Production use. After I investigated with a senior dev, we realized the try block had failed and the update query in the catch block ran for that record - we also realized that I left off the where clause in the related SQL query to specify which record needs updating - so ALL records got updated with this data. Thankfully, we kept regular back-ups and were able to restore the data to a recent timeframe without users losing a ton of work. We commented out that database update call and redeployed the code ASAP. Also the senior dev was cool about it and was like “hey, it happens to all of us at some point”. Let’s just say I’ve learned a ton since then and definitely steer clear from writing code like that. You live and you learn I suppose. 38:40 - Where Wolf Here’s my development tale of terror: One night I was burning the midnight oil trying to get caught up on a never-ending workload. At the time I was working for an online travel booking site. It was after 11, and the last thing I had to do for the night was to rename one of the hotels in our production database. So I wrote my query: UPDATE hotels SET name=‘Some Hotel Chain’; One problem, I FORGOT THE WHERE CLAUSE. Suddenly, over 5,000 hotels in our production database all had the same name. This was around 2003, so well before the time of point-in-time restores, and we were only backing up the database every week at that point. I was panicking. Fortunately, I had a dump of the production database that I had created only a couple of hours earlier sitting on my local hard drive. So thankfully, I was able to restore almost all of the hotel names, save for a couple that signed up after that data dump, and my boss was none the wiser. That’s when I learned that working late hours is not worth it, because at some point you are so tired that you can no longer make good decisions. 41:19 - I Want Your Job When I first started out I worked for a consultancy and they trained us in sales meetings to help managers get promoted because we were coming in to make them “look good”. This was okay b/c obviously, we were coming in as a contractor; however, after being laid off due to 9/11 (yes, this was about 20 years ago), I was looking for a new job and during an interview when asked where I’d like to be in X years, I mentioned to the hiring manager that I wanted to eventually do what he was doing. Well, I guess he didn’t take it that I wanted to make him get promoted to then take his spot. Safe to say I didn’t get hired. 🤦‍♂️😜 ××× SIIIIICK ××× PIIIICKS ××× Scott: Portable Air Compressor Wes: ESR Magnet Phone Mount Shameless Plugs Scott: Latest courses on Prisma and Astro - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about web dev horror stories — real things that have happened to real developers 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. 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 03:36 - https://twitter.com/CameronPak/status/1445051951843061767 04:48 - https://twitter.com/susanlangenes/status/1445049321871712257 05:29 - https://twitter.com/DevJordanW/status/1445052979644706823 06:12 - https://twitter.com/HerbieDuah/status/1445088892177108994 07:04 - https://twitter.com/bbbryan14/status/1445400072921956357 07:43 - https://twitter.com/stephendennis30/status/1445074683062362114 07:59 - https://twitter.com/Tim__Moran/status/1445102727701221377?s=20 08:37 - https://twitter.com/SoyAlejandroAl/status/1445063677896450048 09:34 - https://twitter.com/sudonetizen/status/1445132694531231760 11:09 - https://twitter.com/chrislaughlin/status/1445049210840178690?s=20 11:58 - https://twitter.com/sbitaxi/status/1445208793072156675 12:44 - https://twitter.com/AlexHBruns/status/1445067663919755269 13:05 - https://twitter.com/costerad/status/1445069263568580616 14:02 - https://twitter.com/gcnx86/status/1445045635250638853 14:25 - https://twitter.com/JustMetMe_app/status/1445041678167920640 14:47 - https://twitter.com/alanshortis/status/1445048899899645959 15:50 - https://twitter.com/Swizec/status/1445191324215353347 16:17 - https://twitter.com/_RobJohansen/status/1445137057236467722 17:14 - https://twitter.com/fienen/status/1445040513678196743 17:57 - https://twitter.com/TechBill777/status/1445172824822452226 18:54 - https://twitter.com/Zircoz/status/1445041440770252806 Links https://twitter.com/wesbos/status/1445039778035032068 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much more! 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks! 06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like. 11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I’m curious what you think about hosting your own MongoDB server? I’m relatively new to Mongo but want to start working with it for smaller projects. I’ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I’m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it’s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work. 14:42 - Mike: Not a question but more of a rant… It’s 2021, almost 2022, can we all stop using ‘foo’ and ‘bar’ and ‘baz’ when teaching a programming concept? I applaud both of you because I don’t recall seeing any of your content ever using such atrocious terms, however, I’m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ‘foo’ is just confusing to beginners. That’s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo 18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs? 23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don’t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that’s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this? 27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I’ve read about these topics and watched videos but haven’t really seen how to implement these things. Any good resource recommendations? 31:57 - Matt: How do you know if you can trust an NPM package, from an unknown developer, that does not have many GitHub stars and has relatively few downloads? (The repo that made me ask this question is https://github.com/Wondermarin/react-color-palette). NPM audit automatically runs when you install a package, do any of you ever use additional security checks? 38:32 - Yosef: Hi I’m a beginner front-end developer and I heard you saying that being able to copy prototypes is a valuable skill, so I found some Figma free template and I copied them, the question is can I put them in my portfolio or deploy them? 40:00 - Nick: Hey dudes! I picked up a freelance project to make a brochure-style website and found myself having trouble to decide on what tools to pick for this site. I wanted to ask you and get your take, what tools/tech would you use to build a brochure site? By this, I mean the site should have mainly company information that is ideally editable by the stakeholders and has a contact form. Thanks! 44:22 - Casey: Hi Scooter and Wild Wes! Why do I feel so dirty when I’m forced to use negative values in CSS? 45:45 - Gnommer: Do you use some cloud sync service to backup your directory with projects? I mean OneDrive, Dropbox etc. I tried to use it alongside with Git, and it just messed my files so badly. On the other side I feel very uncomfortable without any backup apart from Github. BTW, according to last Potluck: polish ‘ł/Ł’ is pronounced like ‘w’ in ‘what a sick podcast you have’. Best from Poland ;) Links https://www.ryzerobotics.com/tello https://www.mongodb.com/cloud/atlas https://snyk.io/ https://deno.land/ https://kit.svelte.dev/ https://astro.build/ https://www.gatsbyjs.com/ https://www.dropbox.com/ https://www.backblaze.com/ https://www.synology.com/ https://support.apple.com/en-us/HT201250 ××× SIIIIICK ××× PIIIICKS ××× Scott: The Way Down Wes: Wooster Shortcut Shameless Plugs Scott: Modern GraphQL with Prisma - 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

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just! 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 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 03:44 - What is Just? https://github.com/angus-c/just No dependencies It’s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5 06:46 - Some nice ones just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake just-compare 10:54 - Why? This is the NPM install of Stack Overflow copy+paste Handy as hell Battle-tested Lots of ways to do simple stuff Sometimes the simple stuff has weird edge cases - these are caught Sometimes your checks can be messy Check if an object is empty 25 lines Just install it 12:05 - Other Great to learn and test yourself There are tests for each function Run them See them fail Try and make it so all the tests pass without looking at the source Links https://github.com/angus-c/just https://github.com/antony 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 running a podcast — recording, sponsoring, where to start, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:45 - Recording Setup Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter dbx 286s 09:13 - Notes Shows begin as a Notion doc Big outlines with a point-based outline to where to go Sometimes points are detailed, other times are just one-word reminders as to what to hit Sponsors pulled from a Notion relational table Shows are created in a kanban board but moved to a calendar view 12:37 - How do you find stuff to talk about?! Technical skills Hasty Tasty Potluck Game shows Collabs ShopTalk Collab Changelog Collab Soft skills Productivity Apps We Cooked It: Explainer Episode Add ideas to the list anytime it pops into your head 21:02 - Editing Podcast Royale We record a clap for syncing Upload to Dropbox for our editors 22:07 - Hosting Libsyn Archaic feeling, but covers everything 22:36 - The website Next.js Open source PRs are submitted adding the latest episodes 24:10 - Transcripts Generated 24:40 - Would you still start one? Podcast vs YouTube vs Twitch 29:20 - Getting popular / Marketing How do you do it? Consistency is key Need external audience 35:34 - Sponsors Five to six hours per week in prep Most of our sponsors are products we already used We sell and manage all our sponsors ourselves 42:17 - What about Patreon? Ad-free version? 46:04 - Live shows Confs Livestream Links Delicious Brains Syntax Ep 004: JavaScript Tooling LulaRich ××× SIIIIICK ××× PIIIICKS ××× Scott: Untold: Crime & Penalties Wes: Roadrunner: A Film About Anthony Bourdain 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

In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon! 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. Show Notes 04:39 - color-contrast() Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. 06:01 - Accent color https://davidwalsh.name/css-accent-color 07:34 - currentcolor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword 08:54 - Profiled color values - color() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() 11:00 - color-mix() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix() The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Would be handy for programmatically generating colors - 10% more blue for a border? Sure! 14:18 - Space-separated functional color notations rgba(255 255 255 0) instead of rgba(255,255,255,0.5) 15:28 - RGB and HSL with Alpha rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5) 18:22 - Hex + Alpha values RRGGBBAA How do you remember?!?! Transparent 21:49 - lch(), lab(), hwb() notation CIELAB color space aka Lab is a color space. A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color Lab is intended as perceptually uniform Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ Links https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://twitter.com/argyleink 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, 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. 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. 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 02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why not? 06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app? 11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It’s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I’m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is…it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I’m afraid they’ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I’ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers! 16:14 - Scott, I just finished your “SvelteKit” course and now I’m working on “Building Svelte Components”. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it’s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I’ve only ever written unit tests with Jest in Vue. I’m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you’ve got on testing with SvelteKit would be much appreciated. I’ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you’ve both taught me so much! Thank you, peace, love, and happiness 20:25 - Hi Wes and Scott, I am weak when it comes to dev ops. I would like to confidently set up and deploy my applications on AWS and manage dev/prod environments. Any course recommendations to learn how to do this and how it all works so I really understand? If you don’t personally, can you tweet this out so other developers can share their thoughts? 22:30 - You both have praised MDX in the past but why would you use it? I understand that it lets you put JSX in your Markdown, but that seems counter to the purpose of using Markdown files for content. Markdown is a portable format for static content and independent of any front-end framework. That makes it a good choice for writing posts and rendering them in any site. Once you inject a React component into it, doesn’t that eliminate the portability and the static nature of Markdown? At that point, why not just have a dynamic website where you have complete control of how content is rendered? What are your thoughts? 27:14 - Hey Scott and Wes! I, like you both, am a developer with young kids (I have 3 boys age 6 and under). Needless to say, my house has a lot of energy in it. My job is quite flexible, which I appreciate, because it gives me some freedom to structure my day in a way that helps out my family. My question for you both is this: as a web developer with a spouse and young kids working from home, how do you both maintain a healthy work-life balance (avoid working too much, find time for yourselves, family time, etc.) Thanks so much! 33:46 - Should I write a portfolio site using just the three fundamentals (HTML, CSS, JS) or should I write them in something I am comfortable with such as Angular/React? Unsure if using a framework for a portfolio site is a good idea. 36:38 - How do you handle hosting when using WordPress as a headless CMS with something like Gatsby? WordPress needs good PHP hosting, while Gatsby needs good CI integration. 38:52 - How frequently do you use div tags, versus trying to find a ‘better’ tag? Love the pod btw. 40:48 - This is less of a question and more of a heads up for other listeners. Beware of scam job opportunities. I recently encountered a scam where they used a website that seemed like a very normal and reasonable job board for a major company. I went through the whole process until they asked for personal info, and I asked for verification of their person. They couldn’t provide it so I left. But they had profiles matching the actual employees at the company. They had emails. They had an HR department and employees. They had a very legitimate operation going on. Make sure to take a second and verify with the company before giving away personal information or depositing any of their money into your account. 47:38 - What percentage of North Americans keep their mobile device longer than three years? Five years? Eight years? I am a freelancer and I want to put a clause in my contract of what age of device my app will support, but I can’t seem to find this information. Just more general answers like “most people expect a phone to last two-three years.” Links https://kit.svelte.dev/ https://www.cypress.io/ https://www.svelteradio.com/ https://www.digitalocean.com/blog/ https://caddyserver.com/ https://daringfireball.net/ ××× SIIIIICK ××× PIIIICKS ××× Scott: LuLaRich Wes: Flame Bulb Shameless Plugs Scott: Web Components For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - 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

In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 03:56 - Why much of modern web development is just recreating PHP Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP 05:44 - Mixing templating and logic We do this with JSX 07:39 - Each request has its own scope 08:57 - Massive standard lib Format a date? No sweat! Image resizing? Sure! Audio bindings? Sure! 10:16 - URL-based routing Next.js pages Serverless functions 11:13 - Server-rendered Hotwire 11:38 - $_GET, $_POST, are just available Next.js hooks 12:29 - Variable interpolation 12:59 - All-in-one frameworks Laravel did it CakePHP CodeIgnighter 13:32 - Direct DB access SQL statements 14:37 - Why do people hate PHP? WordPress Inconsistent API Their first code was PHP and they sucked PHP has come a long way It used to not be safe Blocking by default - no async/await 17:48 - Why is JS still better? Shared code between frontend and backend Single language Huge ecosystem (could be a con) Links Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles https://vuejs.org/ https://www.hey.com/ 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 do a crossover episode with Changelog’s JS Party! Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin! .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”. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:49 - Frontend Feud Rules 04:06 - Round 1 10:28 - Round 2 17:26 - Round 3 25:37 - Round 4 35:15 - Round 5 42:03 - Round 6 Links Changelog JS Party Chris Coyier Dave Rupert Wes Bos Scott Tolinski Jerod Santo Amelia Wattenberger Divya The Feud At The Seventh Mountain Amelia’s repo visualizer CSS-Tricks freeCodeCamp Wes Bos’ courses Changelog Merch Level Up Tutorials 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

In this Hasty Treat, Scott and Wes talk about the hottest new tech they love! 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. 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 03:30 - Lucy Language https://lucylang.org/ A concise language for describing Finite State Machines 06:10 - MDSvex https://github.com/pngwn/MDsveX Mdx for Svelte Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities https://github.com/rehypejs/awesome-rehype 09:56 - RECut https://getrecut.com/ 12:26 - Fig https://fig.io/ It’s an app you install on your computer, it adds autocomplete to your terminal Works with most popular terminals Autocompletes git commands NPM commands + tons more - npm install ___ works Adds descriptions of what each command does Mac only - again another reason why Mac is best! Themeable Why not use Fish/ZSH? This isn’t a replacement for anything, it’s just autocomplete on top These fish plugins are to vim, as Fig is to VS Code Better UI is KEY 15:56 - Warp https://www.warp.dev/ Rust-based termnial Very fast Extensions and themes Share commands and sessions Great for remote server dev Share terminal state - with share links 19:33 - Raycast https://www.raycast.com/ App launcher File Finder Workflow runner Everyone is asking why is it better than Alfred better UI Better outputs math Better defaults - currency conversion Fast as hell Better integrations More Flexible 21:26 - Table Plus https://tableplus.com/ Fantastic little DB tool 23:59 - Obsidian Update https://obsidian.md/ Wes: I haven’t got into it - find myself still going back to VS Code 26:50 - Descript Update https://www.descript.com/ All-in-one audio and video editing, like a doc Links https://chriscoyier.net/ https://hyper.is/ https://www.alfredapp.com/ https://strapi.io/ https://studio3t.com/ https://www.mindnode.com/ https://remarkable.com/ https://www.notion.so/ https://joplinapp.org/ http://www.telestream.net/screenflow/overview.htm https://shinywhitebox.com/ 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 talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more! 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:28 - Thoughts Apples to oranges, so unfortunately, no super legit ability to compare. SvelteKit isn’t analogous with a custom React setup that uses CSR SSR is usually going to be faster - we can ship less JS Some big things changed beyond React → SvelteKit Apollo → GFetch Plyr → Vime HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer. Whole conversion took a couple of months. Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough 16:14 - Converting React components to Svelte useState becomes just a straight-up variable Graphql calls were hooks now just imported generated functions Remove extranous fragments Convert {things && } to {#if thing}{/if}  becomes  24:06 - Spark joys State Our checkout flow became way more transparent, way easier with Svelte stores Render flow Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to Overall developer experience It’s honestly a joy to work in and I don’t want to go back Making a library Package dir, new SvelteKit project, svelte-kit package I made svelte-toy - https://github.com/leveluptuts/svelte-toy svelte-element-query - https://github.com/leveluptuts/Svelte-Element-Query svelte-simple-datatable fork Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props Animations are all done with Svelte’s internal animations lib 32:45 - Hosting adapter-node Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU, Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere 35:50 - Things to do Admin tools Pancake lib for charts 37:00 - Challenges ESM is not always smooth sailin Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod. Solution was to use lodash.has as the dependency Apollo included all React as a dep unless you import from @core TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible Drag animations Cloudinary 42:46 - Wes’ questions What about the ecosystem? What about forms + DOM data? Serverless functions? Do you always bind to state? Or just access directly? formData = writable({ title: "yo" }) {$formData.title} Is it stable? Deno - Snel Links https://leveluptutorials.com/ https://vitejs.dev/ ××× SIIIIICK ××× PIIIICKS ××× Scott: The Skeptics Guide To The Universe Podcast Wes: Pressure Washer Nozzle Shameless Plugs Scott: Web Components 101 - 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

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is. 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. Show Notes 03:42 - What are webhooks? User-defined HTTP callbacks When something happens, ping this URL with this data Examples: When something sells, ping this URL When someone reverses a charge, lock their account Trigger a build of the website when the content changes Then someone buys a shirt, generate a shipping label and save it to the DB 07:57 - Sending End Can be a great way to hook two services together 09:13 - Receiving End Often you will be the one that accepts the webhook ping In this case, you set up an endpoint 11:00 - Payloads Almost all will send a JSON body that you parse out The method send is variable 11:51 - Auth On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not. On the sending end, you can often set up headers with auth - same with the method Can be a replacement for a serverless function 13:18 - Testing webhooks Can be a pain in the ass ngrok - expose locally localtunnel Insomnia Postman Stripe has a great VS code extension Snipcart has an awesome dashboard Will also tell you when one failed webhook.site https://expose.dev/ IFTTT Zapier 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 all the new stuff in ES2022 — what it is, why you might need it, and how to use it. 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 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: https://a0.to/syntax. Show Notes 04:50 - Regex indicies New d flag in a regex https://regex101.com/ This will tell you the indexes (indicies) of the regex matches Handy if you need to highlight or replaces matches in a string We can ask for the start and end positions of each matched capture group 07:16 - Class updates Private fields Properties and Methods to be kept private Prefix them with a # =Helpful for internal state and methods which should not be accessed directly or at all by external In React how we have __INTERNTAL_NEVER USE THIS class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside Getters and setters introduced in es5 https://www.w3schools.com/js/js_object_accessors.asp class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works 09:07 - Class fields This may seem super old because we have been polyfilling it forever Right now if you want an instance field on a class, you need to declare it in the constructor Now we can just declare them inside the class 10:36 - Static fields and methods As above can also be static with the static keyboard Works for methods too Explain what a static method is 13:17 - Top level await So handy in modules. Need to pull in some data? Simple. 15:19 - Ergonomic brand checks for private fields Used for checking if a private field on a class exists using the in keyword 16:00 - .at() method Strings and arrays - we can use square brackets to reference items of the array Super handy for grabbing the last item of an array // 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B Why not use array[-1]? We used to use slice(-1) What about indexOf? 21:34 - Handy hasOwn method https://github.com/tc39/proposal-accessible-object-hasownproperty 24:51 - Class static block A static block allows you to run code before creating an optional static property during initialization https://github.com/tc39/proposal-class-static-block Links https://github.com/tc39/proposals/blob/master/finished-proposals.md ××× SIIIIICK ××× PIIIICKS ××× Scott: Ultraloq Smart Lock Wes: Magnatiles Shameless Plugs Scott: Web Components Course - 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

In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 04:06 - Rural internet is huge for: Access to information Remote work Opens up job opportunities for many residents who can’t relocate due to family Home values Big city folk moving into rural areas and driving prices up is another issue altogether Smart rural home 05:46 - Previous setup We have a cottage LTE Routers Yagi Antennas Worked well, but slow $4/gig over 100gb Grey market - one went up/down Alternatives WISP - no access XPLORNET @ (hughesnet) - BRUTAL Bell LTE - $$$ - slow 08:35 - The signup, install, price $129 CAD Deposit ($100 USD) $650 for the dish $120/month Unlimited bandwidth Needs a clear view of the northern sky Clear from obstructions is key Every 1 foot up is 2 foot of obstructions cleared I put it on a 25ft piece of wood Bought a pipe adaptor from Starlink 09:59 - The performance These numbers are not impressive to anyone with fiber, but are LIFE CHANGING to rural folks From 30mbps - 200mbps down - some users posted ~350 down Upload from 25mpbs - 80mbps (better than you can pay for where I live in the city) Ping is around 40ms Downtime is measured in seconds Youtube streams super smoothly Zoom works great Facebook + Instagram issues Many reported changing DNS fixed it 14:21 - The equipment Starlink comes with a router Does not support bridge mode Doesn’t have WPS Only one hard-wired port POE-only UniFi Dream Machine Three access points POE switch for Starlink Router Gives you stats The ethernet is hard-wired into the dish, so you have to drill a huge hole in the house Links Starlink Wyze UniFi Dream Machine 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, 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. 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide 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 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project? 05:26 - What ever happened to CSS Houdini? 08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it. 11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud? 15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career? 18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation? 22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription! 29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers. 32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier? 37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript. 40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any! 43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed? Links https://sass-lang.com/ https://postcss.org/ https://ishoudinireadyyet.com/ https://astro.build/ https://kit.svelte.dev/ https://www.widevine.com/ https://frame.work/ https://www.prisma.io/ https://www.mongodb.com/ https://www.postgresql.org/ https://mongoosejs.com/ https://keystonejs.com/ https://frontity.org/ https://webpack.js.org/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Hot App Wes: Pet Food Mat Shameless Plugs Scott: Web Components Course - 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

In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it. 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 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 02:50 - What is it? Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior. 03:26 - noImplicitAny The any type in TypeScript is exactly that - it can be anything. TypeScript will try to infer the type. When it can’t it will be any. Sometimes you need any, but if that is the case, you must explicitly type it as any. If something is implicitly any - it might be a mistake, or you forgot to type it. Risky! 06:01 - noImplicitThis You must type this - it can’t be implicitly inferred. 06:47 - strictFunctionTypes If you have a type that is a function and it doesn’t 100%. 07:44 - alwaysStrict Always turns on strict mode. You can’t do things like redeclare var variables. 09:25 - strictNullChecks Makes you check that the item is actually there before accessing a value or method from it. Imagine you filter or find on an array, or query selector a DOM element. There is a possibility that nothing is there. strictNullChecks makes you check that it’s there - like an if statement. Optional chaining is super handy here. 11:18 - strictBindCallApply 12:38 - strictPropertyInitialization 13:37 - useUnknownInCatchVariables Links https://www.typescriptlang.org/tsconfig#strict 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 are back with another edition of Stump’d! where they try to stump each other with interview questions. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 provide 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 03:10 - What is STUMP’D? 04:27 - What is a first class function? 06:27 - What is the purpose of using object is method? 09:31 - What is the purpose of Error object? 11:00 - What are the advantages of minification? 12:37 - How do you declare namespace? 15:38 - What are JS labels? 19:20 - List the methods that are available on a WeakSet? What is the difference between a set and a WeakSet? 23:33 - What is the use of preventDefault method? 26:15 - What is a spread opperator? 27:35 - What is the output of below spread operator array? [...'John Resig'] 30:19 - How do you load CSS and JS files dynamically? 32:00 - What are tasks in event loop? 34:15 - What is a WeakMap? 37:35 - How do get query string values in JavaScript? 40:50 - What is the purpose of some method in arrays? 42:15 - How do you delete a cookie? Links https://30secondsofinterviews.org/ https://www.interviewbit.com/javascript-interview-questions/ https://github.com/sudheerj/javascript-interview-questions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label https://es6.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Builderment Wes: Lawn Mower Blade Balancer 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

In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them. 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. 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 05:33 - Warning Signs of a potential toxic client Doesn’t have project well thought out. Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget. Ill Communicator Contacts you at odd times. Thinks that you should answer every email in an hour. Contacts you in inappropriate ways, via text message, social media. OR doesn’t respond to emails in a timely manner giving you blockers. Jerk The rude client Thinks they can be rude because they are giving you money Hundreds of emails Tries to be flashy upfront (dinners, etc.) Scatterbrain or way too big. Facebook for nurses 18:06 - What to do about toxic clients Communicate your needs clearly. Set expectations. “I work best when…” “I answer emails once every two days” Set clear deadlines for deliverables, feedback and revisions (one revision backed in, more at x hourly rate, etc.). Just be VERY clear. If something doesn’t work for them, they will hopefully tell you. Get things in writing. Put things clearly in a working agreement for your client to approve. That way you have something to show in case things go south and you can say, “You agreed to the following things”. Fire them You can fire clients. Honestly, some of them just aren’t worth the time and effort. It’s usually the cheapest clients who demand the most from you. Don’t let them take more of your time and energy than they are paying for. Firing clients is very simple. Hi so and so, I don’t feel like we’re a good match for this project, so I’ll be canceling our work agreement. Good luck on your project. 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 advice for new devs, our advice and opinions for how new devs can level 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:59 - Get comfortable with your code not working All of our code is broken much of the time. 02:40 - Compound learning and momentum is your biggest tool There is no formation without repetition. It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs. 04:05 - Learn to read error messages Is this error coming from my code? Is this coming from the library? If so, maybe the library wasn’t expecting that. Is this coming from the browser? An extension? Is it even related? Stack trace is a treasure map 09:42 - Take the time to learn the concepts that scare you They are often easier than they seem (though not every time). 10:40 - We all struggle This stuff is hard — give yourself a break. 12:56 - Taking a walk is good for solving bugs It’s hard to walk away from broken code, but it really helps. 14:33 - Get comfortable with the command line You’ll need it 18:09 - The ability to replicate a design pixel perfect is a valuable skill You will be shocked at how many devs can’t or don’t do this. If you want to avoid spending extra time on something, don’t make the designers tell you to go back and fix simple spacing, color, and detail things. 21:26 - You are on a team Don’t get stuck in the "us vs them" mentality of internal company teams (e.g. devs vs designers). You are all working together to make something. 24:10 - You are not an expert Even if you think you are an expert, you should always be seeking out alternate viewpoints and ideas. You are a student forever in this game. 26:14 - Scaffold with comments It helps keep you organized once you get into the mess 28:30 - From Twitter Tweet thread - https://twitter.com/wesbos/status/1417139639861735424 29:30 - Ben Newton Soft skills are about as important as coding skills if you want to go far. https://twitter.com/BenENewton/status/1417140062211526658 32:46 - Eric McCormick Don’t be afraid to push yourself beyond your comfort zone. https://twitter.com/edm00se/status/1417140503527792640 33:31 - Jason Liggi You don’t have to code for fun. https://twitter.com/Liggi/status/1417141600124346371 35:34 - Andrew Nickerson Start by building a project that’s interesting to you. https://twitter.com/Nickvisual/status/1417140742531674118 37:15 - Michael Powers Ask questions, break things once in a while, learn vanilla everything even if it feels like a waste of time. https://twitter.com/mgrpowers/status/1417141364525912064 39:33 - Jason Liggi Doesn’t matter how long you do this job, MOST stuff out there will probably be unknown and confusing. https://twitter.com/Liggi/status/1417141322478235653 40:14 - Swashata Learn to read documentation https://twitter.com/swashata/status/1417142055436910598 49:59 - Max Stoiber Know your tradeoffs. https://twitter.com/mxstbr/status/1417142461709828101 43:34 - Pat Clarke Build a rapport with PMs/clients beyond the technical. https://twitter.com/LeftShotDev/status/1417142505494269954 44:21 - Musa Barighzaai Leave things better than you found them. https://twitter.com/mbarighzaai/status/1417142734993907715 45:20 - David Moore Build things that excite you. https://twitter.com/DavidIMoore/status/1417145783581741067 Links https://johnlindquist.com/ https://github.com/albertlauncher/albert ××× SIIIIICK ××× PIIIICKS ××× Scott: Raycast Wes: Amazon iPhone Repair Kits Shameless Plugs Scott: Web Components 101 - 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

In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up. 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 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 03:20 - Layout is hard block vs inline vs inline-block Learn what this means! Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid Avoid floats Wes’ Flexbox Course Wes’ CSS Grid Course Scott’s Modern CSS Layouts Course 07:43 - I can’t get my thing to get the right style Use a scoping system like BEM, CSS in JS, CSS Modules Don’t style via IDs Avoid !important 11:00 - My thing isn’t looking the way it’s coded Dev tools Write CSS in the browser Check class names 12:11 - I don’t know if I can delete this CSS Use tools like https://purgecss.com/ http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ 15:51 - Look at things holistically 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:07 - Can you explain the concept of memoization in JS? 07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”? 09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it’s very close, and I never looked at their code base, so there’s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else’s design. I’m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this? 16:36 - How do you decide how specific a (React) component should be? 22:03 - My question is about the npm run eject feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists? 24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on leveluptutorials.com using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique? 31:13 - I’m setting up a webinar. I’m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I’m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they’re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I’d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover? 33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site? 38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What’s your approach? 41:07 - Can you disable local fonts from the OS and check if the site actually loads them? 46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do? 49:09 - Question to Scott: Have you ever thought of calling your students Scott’s Tots? Links https://mux.com/ https://vimeo.com/ https://github.com/cure53/DOMPurify https://wesbos.com/sanitize-html-es6-template-strings https://svelte.dev/ https://vercel.com/ https://begin.com/ https://en.wikipedia.org/wiki/Scott%27s_Tots ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave Season 2 Wes: Underground Wire Locator Shameless Plugs Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author 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

In this Hasty Treat, Scott and Wes talk about the  tag — why it’s weird and wonderful, and what you can do with it! 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 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 04:16 - What is it? https://ryanflorence.dev/p/ship-weird The link tag is weird. First, it’s not for links! It’s for establishing a relationship between the current HTML document and a resource. 05:11 - CSS / Media attr 07:13 - Web fonts 08:09 - Favicons Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons 08:36 - Preload + Prefetch Resource Audio, document, fetch, font, image, script, style, track, video, worker + more 10:15 - Fetch request (shoutout Ryan) 11:27 - Preconnect Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. 13:01 - Module 13:30 - Integrity SHA 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 the basics of building a website — how to get started for beginners! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:20 - HTML HTML is the language you write to get text and elements to show up on the screen Elements can describe the content they contain p img Or be structural and describe the areas of the website div h header, footer Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements HTML elements have default styling applied to them before you write any CSS This comes from the browser and can be manipulated However, by default all elements are either block or inline-display 08:11 - CSS If HTML is the bones, CSS is the clothes and skin CSS dictates how a website looks Without CSS, you have text on a blank page and images CSS stands for Cascading Style Sheets (“cascading” being the key word) Adding CSS to a page Link tag Style tag Inline styles Selectors You can select an element on the page via element, class, id, attribute Syntax is selector, brackets, property, value Property A property is what you are changing (e.g. background-color) Value determines how the thing looks background: red; Specificity Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS. People develop systems like BEM to organize this General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling. !important exists to override everything, but as a general rule, NEVER use it. Seriously. Some interaction Most interaction is done in JavaScript, but CSS has some basics hover, active, focus Pseudo selectors You’ll often see people reaching for libraries to make CSS easier and more consistent Common examples are Bootstrap, Foundation, and TailwindCSS For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS. In addition to properties, you can now write your own custom properties for CSS. While this could be seen as an advanced technique, I believe the new normal is CSS variables first. CSS variables are indicated by —variableName: value; where variable name takes the place of a property. You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet. 37:08 - JavaScript JavaScript is used to add interaction to a website It makes your website dynamic JavaScript the Language We have a base programming language that has nothing to do with HTML It has things like: Variables - ways to store things Numbers + Math Data Containers - Objects and Arrays Functions - Code grouped together to achieve a certain purpose It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things: Formatting time + money Alerting the user Logging a value to developer tools Capitalizing things Sorting lists of things Round or randomize numbers Fetch data Talk to a sever Promises Logic and flow control JavaScript the DOM When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model) Events JavaScript is mostly event-driven - when something happens, do something else When you click something and want something else to happen There are lots of events mouse, touch, pointer Ready Forms Submit, change, keyboard, etc. Can be used to fetch data fetch() - you’ll often hear it called Ajax, or XMLHttpRequest Can be used to make more HTML Whole set of APIs for creating elements The DOM can be traversed Links https://css-tricks.com/ https://getbootstrap.com/ https://get.foundation/ https://tailwindcss.com/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Tony Hawk’s Pro Skater 1 + 2 Wes: Mini Split Air Conditioner Shameless Plugs Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author Wes: 1: All Courses - Use the coupon code ‘Syntax’ for $10 off! 2: Javascript Notes & Reference 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 Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, 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. Show Notes 03:35 - Levels of using TypeScript Typing your code Typing your code, but getting a little bit more dynamic using utility types Creating your own utility types! TypeScript is a language in itself Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/ https://www.typescriptlang.org/docs/handbook/utility-types.html 07:29 - Partial 08:23 - ReadOnly 09:00 - Required 09:33 - Record A record is an object type that is a bit more restrictive Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk. 10:47 - Omit I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field 11:34 - Pick Given a type, pick these properties 12:39 - Return Types Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function. 13:30 - Case These case types are useful for when you are doing template literal types Uppercase Lowercase Capitalize Uncapitalize 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you’re just starting out, scoped CSS, and more! 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 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. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Show Notes 01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance. 08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and how would you decide which to use? 16:03 - I recently took Wes’ Advanced React course and went on to build my first custom React app! Thanks Wes! When the time came to deploy the app, I was surprised by the asymmetry in hosting options for the front vs. backend. It seems that there are 1000 slick, free-teir options for hosting my front-end. But finding a host for my Keystone backend: barf. I messed around with Heroku but troubleshooting was a nightmare, and I eventually settled on a Digital Ocean droplet. My inner system admin is secretly happy to have another OS instance to manage, but I hate paying 5 dollars a month to host a silly project that will probably never be seen by anyone, and I’m already irritated with the amount of care and feeding the backend needs. What gives? Why are there so many choices for frontend hosts and so few for the backend? Are there hosted backends that have auth, database, image hosting, etc and take care of the nitty-gritty with a newbie-friendly free-tier? Maybe I should I be looking into serverless? 23:21 - Since Drupal has evolved beyond awkward kloog of v7 entity/ctools/json-services/phptemplate erc into v9 with excellent graphql/json/rest support and tomb(?) for non drupal web would you recommend Drupal as for a blogger/businesses’ internal network doc/publishing/communications system (ie Drupal not as website itself)? 29:43 - I have just started my web development freelancing business and I feel like I am having a hard time getting a lot of response from small business who currently don’t even have a website (or have a terrible one). Is there any advice you can give about talking people into hiring a web developer when they CLEARLY need help? I plan to use NextJS and Sanity for all of my sites. My first client project is already built using it and it was a great developer experience! 34:30 - What would you guys consider the best alternative to the BEM naming convention? I personally follow a method with very few classes (I’ve seen this called GPS) which takes advantage of the CSS cascade, but I do think it may suffer from readability problems if I handed my stuff to another developer to work on. Interested to hear your thoughts. 39:16 - I have been self teaching myself web development for a little over a year now and your show has been a big help! I am getting to the point now where I feel I am nearly qualified for jobs and will be starting the application journey soon. I currently work in supply chain management at a big corporation with a background in industrial engineering (of which I hold a Bachelors degree). My question for you is - seeing that I have work experience at a big company and a STEM background, do you think this holds any weight in terms of being qualified for a dev job? What I am mainly wondering is how much I should leverage this during interviews and on my resume. Links https://www.gatsbyjs.com/ https://tina.io/ https://vercel.com/ https://www.netlify.com/ https://circleci.com/ https://github.com/Nexedi/renderjs https://keystonejs.com/ https://www.drupal.org/ https://medium.com/@jescalan/bem-is-terrible-f421495d093a ××× SIIIIICK ××× PIIIICKS ××× Scott: I Was There Too Podcast Wes: Mattias Random Stuff YouTube Channel Shameless Plugs Scott: Advanced Svelte Techniques - 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

In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 03:47 - GitHub CoPilot AI-powered autocompletion Not going to take your job 07:18 - Next.js 11 Image updates Multiplayer 08:20 - Astro Build faster websites with less client-side JavaScript 09:50 - Notion API Get database Query database Pages Block children 11:27 - Petite Vue Petite Vue is an alternative distribution of Vue optimized for progressive enhancement Similar to Alpine.js Without a build step 13:58 - Stackblitz Node in the browser Not in the cloud Rolled 15:22 - Solid.js Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs. 16:37 - Stately From the company that made xState 18:05 - Web3 Let us know if you want a show about it Ethereum JavaScript API Apps that run on the Blockchain Links https://alpinejs.dev/ https://svelte.dev/ https://xstate.js.org/ 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 do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more! 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:23 - What’s your favorite stack right now? 28:52 - What are your thoughts on WordPress? Do you still use it? 33:59 - What do you want for listeners of Syntax? 38:21 - How do you deal with FOMO / the pressure to learn new tech? Links https://shoptalkshow.com/469/ Chris Coyier Dave Rupert Syntax 372: CSS Container Queries, Layers, Scoping and More with Miriam Suzanne https://svelte.dev/ https://kit.svelte.dev/ https://mercurius.dev/ https://www.prisma.io/ https://keystonejs.com/ https://graphql.org/ https://redwoodjs.com/ https://nuxtjs.org/ https://astro.build/ https://vercel.com/ https://wordpress.org/ https://dayoneapp.com/ https://automattic.com/ https://mongoosejs.com/ https://www.blink182.com/ https://newsroom.spotify.com/2021-02-22/a-new-era-for-podcast-advertising/ Chase Reeves YouTube Channel https://xdebug.org/ ××× SIIIIICK ××× PIIIICKS ××× Dave: 1: Haikyu!! 2: Nintendo Garage Chris: Ray App Wes: 1: Connor Ward YouTube Channel 2: Ryan Knorr YouTube Channel 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

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don’t talk about that often. 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 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 03:48 - What are favicons? Requesting favicons by default /favicon.ico 07:38 - Sizing favicons 16x16 is OG - don’t do that now You can specify multiple sizes 09:41 - File formats .ico files .png favicons 13:40 - Animated favicons Canvas Base64 11:36 - SVG favicons 17:19 - Dark mode favicons 18:55 - App Coloring Isn’t there a new Safari version? Links https://en.wikipedia.org/wiki/Favicon https://caniuse.com/ https://keycode.info/ https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons https://fav.farm/ https://deno.land/ https://uses.tech/ Missive 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more! .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”. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3? 8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project. 11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong? 19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?) 25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward. 27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this. 30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated. 34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions? 40:21 - What are your thoughts on ReScript as an alternative to TypeScript? 44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything! 48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance! 52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction. Links Svelte Create React App Next.js Vercel iShowU Descript Screenflow Aria Air FitBit Apple Health https://www.gov.uk/ Keystone rescript TypeScript Angular Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript Puppeteer uses.tech wes.tech ××× SIIIIICK ××× PIIIICKS ××× Scott: SvelteKit Wes: Wyze Sprinkler Controller Shameless Plugs Scott: Svelte Components Course - 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

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it! 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 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 03:15 - What is a linter anyway? Why do you want to lint your CSS? Does stylelint fix errors or just tell you errors? 04:42 - Getting setup .stylelintrc stylelint extension Sass High perf animations stylelint order Max nesting depth Declaration strict value { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links https://github.com/stylelint/awesome-stylelint JSLint JSHint ESLint VS Code 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 everything coming in React 18! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Show Notes 04:32 - Automatic Batching Don’t worry about re-renders 08:32 - New Render API const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!) 10:44 - Suspense }> Suspense is basically a promise resolver component - nothing inside will render until promise is resolved. SuspenseList lets you coordinate the order in which loading indicators show up. 16:43 - StrictEffects Mode https://github.com/reactwg/react-18/discussions/19 Will allow components to mount, unmount, and mount again Will help with fastrefresh and really good dev experience 18:43 - useTransition() Hook Not an animation hook. They named it this because of the future ability to add animations to React core. Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete. We classify state updates in two categories: Urgent updates reflect direct interaction, like typing, hover, dragging, etc. Transition updates transition the UI from one view to another. 23:11 - SSR Improvements React.Lazy will work on the Server Finally! https://github.com/reactwg/react-18/discussions/37 Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs. React Server Components 34:45 - ELI5 https://github.com/reactwg/react-18/discussions/46 36:37 - Next.js Next.js will probably have support for a lot of these features soon. Links https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj https://github.com/reactwg/react-18 https://github.com/reactwg/react-18/discussions Svelte Syntax 127: Hasty Treat - React Suspense Deno ××× SIIIIICK ××× PIIIICKS ××× Scott: SoundSource App Wes: The Changelog 443: Exploring Deno Land Shameless Plugs Scott: Building Svelte Components - Sign up for the year and save 25%! Wes: Beginner JavaScript - 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

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level. 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 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 03:08 - Next Gen Bundlers are here! They are easy They are fast They are bundlers They are code splitters They are dev environments HMR / Fast Refresh 07:13 - What do they use under the hood? Parcel uses SWC (Rust) Vite uses esbuild (Go) 10:29 - How do you use them? Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there They have adaptors for different types of files CSS Images Etc. You can also point it directly at files 14:59 - Common use-cases React / JSX OOTB Vue Svelte TypeScript Both just work Custom Babel config Plugins for both Sass Vite: Detects it, asks to install it Parcel: Detects it, installs it for you PostCSS Processors 20:29 - Custom API Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed. Example use-case: a really nice WordPress dev package. 20:57 - Which one? Both are really good! Parcel 2 has been in dev for 2+ years - unsure when it will launch. Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev. Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.) Life is good! Links Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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 review your portfolios! 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 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 03:59 - cudd.io Shared component animation between home / about really nice Readable, clear Simple Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2 Nice SSR from Next.js CSS vars Very tall cards without much text, looks like a mistake Better on a short browser window - peep the tall and skinny Card heading should be h3 or h4 10:35 - damonbolesta.com Nice design = super fun! Good color palette Shows your skills straight up Animation Not accessible - EASY fixes with Axe Dev Tools Text on background images hard to read White text on buttons Bold some words in your bio Border radius 21:52 - walterkjenkins.com Map is fun Contrast issues with the color choices Transparency not needed on body content Cursive font for links / buttons is a no for me dog Labels on social media icons Hero overlaps section below it Maps data processing should be h4 29:40 - suhit.me This is an example of a really good one Wicked domain name Design is ON POINT, like this is the type of polish I like to see - I’d hire on this Can’t get enough Inter font Fun little animation I’d go a little easier on the box-shadow Github even has a custom readme Resume Very modern - JS, TS, Bootstrap TypeScript A+ Drop the “5” and “3” from “HTML” and “CSS” I’d add color to the resume, its likely not printed Don’t need to say Github and LinkedIn in front of the URLs 37:20 - jacobpawlak.com Initial loading is great - transitions are hot Typography looks nice - not sure about those serif all-cap nav items Slider not very usable View circle on hover is cool, but I’m not sure about following your mouse, covers text T-shirt portfolio is awesome Fun little bits in the footer SSL is broken - fix that sh!t Links don’t show over background images - common issue today External links should probably be indicated as such HTML, paragraphs as h3 & h4, h5, should be - (i.e. “here are a few of my recently completed…” should be a ) Design of resume is KEY - different colors, eh? 47:04 - mrtnvh.com This is a good example of subtle flex of skills FAST AF Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites) Personal Photo A+ Position sticky Love the skills layout on the about page Email is a button I can’t copy your email We have mailto links - don’t reinvent A+ Links Top Chef Syntax 354: The Surprisingly Exciting World of HTML Elements ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: WAGO Lever-Nuts Shameless Plugs Scott: Building Svelte Components - 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

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 03:24 - Synchronous / Async 05:23 - Multi-threaded JavaScript has a single “main thread” But you can have more threads with web workers 08:12 - Blocking JavaScript can stop other things on the page from running A script tag can block HTML from being parsed Most stuff in JavaScript is non-blocking Node.js write to filesystem can be blocking 10:27 - Concurrent + Parallel JavaScript start/stop are concurrent The API runs on a different thread Doesn’t REALLY matter https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html 13:22 - Consecutive / Waterfall One after another 13:48 - Callback A function to run when this thing happens or is done Click event callback Websocket on data callback Like a tweet stream Data fetch callback Almost entirely replaced with async + await http://callbackhell.com/ https://caolan.github.io/async/v3/ 17:56 - Script Tag Async + Defer Doesn’t block other content Runs when ready - doesn’t care about DOMcontentLoaded Wait until the page is loaded before running If the script tag is above content, don’t wait for it Good for things that aren’t called on page load 21:54 - Lazy Load it in later - maybe when it’s scrolled into view, or as needed Not mission-critical 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 the Dev Tools Elements Tab — all the features, and when you would use them! 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. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 03:13 - Elements Learn to open the Elements panel and the console right away — right-click inspect element is weak! Drag-and-drop elements Edit as HTML Click to select use in JS console $0 → Add Attribute Breadcrumbs Flex (Chrome now!) Break on → Node removal Scroll into view Expand / Collapse 16:59 - Styles :hov .cls Element style Layout - Box Model Layout - Grid Layout - Flexbox Toggle Print/Light/Dark 25:03 - Panel Escape to open close No longer has to be JUST Console Computed Styles Great to find out what value it’s actually using without scrolling through the cascade Toggle browser styles on and off Fonts Tab Super handy to find the used font, spacing, size, weight, etc. You can also see all fonts used on a page Animations Tab Changes Shows the CSS that has changed since you have been goofing around. 38:18 - Settings Show what’s new https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo Experiments 43:39 - Compatibility Links Firefox Chrome Canary Brave Can I Use ××× SIIIIICK ××× PIIIICKS ××× Scott: Problematic Roller Coasters Wes: Scrapyard Finds! Repair-A-Thon! Cordless Tools Galore! Shameless Plugs Scott: Svelte Kit - 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

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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 03:32 - Seven new JavaScript proposals https://github.com/tc39/proposals 06:25 - JSON Modules https://github.com/tc39/proposal-json-modules Builds on the import assertions No named exports Not executed, to avoid security issues Not in Node yet 09:55 - Array Find From Last https://github.com/tc39/proposal-array-find-from-last The problem: you need to group together async code.The only way to do that right now is to wrap it in a function. 11:40 - Async Do https://github.com/tc39/proposal-async-do-expressions Async do will allow you to group together a block of code and mark it as async. No need for an iife Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level. Promise.all([ async do { let result = await fetch('thing A'); await result.json(); }, async do { let result = await fetch('thing B'); await result.json(); }, ]).then(([a, b]) => console.log([a, b])); 14:33 - Change Array By Copy https://github.com/tc39/proposal-change-array-by-copy Like old array methods, but returns a new array rather than mutating 17:48 - Temporal https://github.com/tc39/proposal-temporal Stage 3, looking good! Amazing, large, very good Date API Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript 18:35 - As Patterns https://github.com/zkat/proposal-as-patterns Scott don’t get it Stage 0 when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … } 20:47 - Pattern Matching https://github.com/tc39/proposal-pattern-matching VERY Rust-like https://doc.rust-lang.org/1.6.0/book/patterns.html Stage 1 {props => match (props) { when ({ loading }) { ; } when ({ error }) { ; } when ({ data }) { ; } }} 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, 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 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. 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. Show Notes 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component? 11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev? 22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development. 26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos. 32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated. 37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine? 39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app? 43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation? 47:18 - Is there any benefit to using prop types in TypeScript for React projects? 48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts? Links https://www.npmjs.com/package/react-to-webcomponent https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 LearnNode.com Transistor.fm ××× SIIIIICK ××× PIIIICKS ××× Scott: A Death In Cryptoland Podcast Wes: Affinity Designer Shameless Plugs Scott: Svelte Kit - Sign up for the year and save 25%! Wes: Beginner JavaScript Notes 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 Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)! 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. 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 05:40 - What is it? https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute Someone can submit a form FROM or TO your domain, automatically. 07:50 - Solutions SameSite Cookie https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6 Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link. Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent. None — Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests. CSRF Token Check Origin / Referrer Headers Captcha Ask for Password Token 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 with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more! 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. 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. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Guests Miriam Suzanne Show Notes 02:21 - When did you come on board with container queries? 10:27 - How would you declare specificity? Layer example: @layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } } 13:08 - What is your background? 18:20 - What are container queries? 22:06 - What is the background on contain? How does it work? https://developer.mozilla.org/en-US/docs/Web/CSS/contain 29:25 - Is it still under development? https://www.igalia.com/open-prioritization/index 33:51 - Have you tried the EQ polyfill from Johnathan Neal yet? 35:21 - How far out are we? 38:10 - What is Scope? 44:00 - How will MQ and CQ work together? 45:49 - Do you use inline and block? 48:44 - What browser do you use? Links OddBird Susy Jonathan Neal FireFox Codepen https://github.com/w3c/csswg-drafts https://twitter.com/TerribleMia ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Embroidery machine Shameless Plugs Miriam: OddBird Scott: 1: SvelteKit 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 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

In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it. 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 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 03:28 - What is it? Total platform for building Svelte apps Built in Vite.js Includes all of the Vite goodness but it hides behind the scenes for the most part Host anywhere 05:16 - Is it CSR, SSR, SSG, WTF?! All of the above. Uses adapters to control the output: kit: { // hydrate the element in src/app.html target: '#svelte', adapter: adapter() } 09:45 - What you get out of the box File-based routing API routes Layouts and layout resets Fancy file titles [slug] __layout Code splitting & preloading PostCSS TypeScript support 17:03 - Neat small things Glob import https://github.com/svelte-add/svelte-add Links SvelteKit Next.js Gatsby.js Sapper tailwindcss @chriscoyier 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Coudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes? 06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding? 12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file? 21:41 - I am new to using CMSs and I was wondering for applications that require a lot of content management where a CMS or headless CMS such as Contentful is ideal but also requires dynamic queries such as recommended content to the end-user based on browsing history. How do you approach integrating the user data in combination with the data being received and handled from the CMS? A separate API and database? Or is this a scenario that a CMS doesn’t fit? 25:56 - When solving a problem, do you do it through trial and error? Or do you carefully think through every solution and choose the best one before actually implementing it into code? 28:14 - How can we take advantage of this new partnership between 1Password + SecretHub! I feel like this is getting into DotEnv but sounds so much more interesting. 32:34 - When creating types in TypeScript, when should someone use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. I am struggling to understand why I would ever use a type. 36:34 - I’ve recently started using TypeScript in React, and typically I’m just using function components. I’ve seen some people saying that classes are really great with TypeScript in React but I haven’t found any real use case/benefits myself yet. How about you guys, do you use classes in React/TypeScript? 38:17 - What are your opinions on generators like Yeoman? 44:26 - I’ve been looking for a career in web for a couple of years now and I’ve recently landed a job with a small agency getting paid hourly making WordPress websites, that I’ll be starting in two weeks. I’m worried that I’m going to get stuck pushing Divi sites all the time. I know this is a good opportunity for me but I was hoping you guys can shed some light and give me some tips on how I can put my skills to good use. 48:35 - What are your approaches for caching a GraphQl API? 52:30 - You mentioned in an earlier Potluck that Svelte is probably the easiest framework to learn. How confident can one be to start a new project with Svelte? Being a technical lead, can I propose our team to work with Svelte? Are there enough material/solution on the web and is the community established? Links ZMA Supplement Tina https://twitter.com/gusfune/status/1372243283758419977 1Password SecretHub TypeScript Syntax 348: TypeScript Fundamentals — Getting a Bit Deeper Syntax 042: Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman https://www.npmjs.com/package/zx Yeoman Mercurius Apollo Svelte ××× SIIIIICK ××× PIIIICKS ××× Scott: Contigo Shake & Go Wes: Deli Containers Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 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

In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot! 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 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 07:32 - First step Finding the data. Open up dev tools. Copy as Node.js Fetch in Chrome Two ways to do this - Puppeteer, or raw requests, or a mix. 11:03 - Variablizing it Store IDs Booking form IDs Vaccine IDs 12:56 - Finding out any restrictions Is there a cookie? Is there an XSRF? Do these things change? How often can you hit it? 15:20 - Caching Array variable 16:59 - Delivering the notifications Telegram Links https://github.com/wesbos/vaxbot 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 using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. 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. Show Notes 04:55 - Components Strategies Example: type Props = { value: string; } const App = (props: Props) => div /> Return type? JSX.Element FC or FunctionComponent It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to It could be useful for a return type 12:13 - Props Default props: const defaultJoke: JokeProps = { joke: 'LOL JOE', id: 'YEAH', status: 200, }; function JokeItem({ joke = defaultJoke }: JokeProps): JSX.Element { return ( {joke.joke} = {joke.id} ); } Because props are always destructured, you often have to make a new type for your props. You can’t just type each argument by itself. 18:38 - State Just like Generics, State can be inferred If your type is simple and you’re using useState, it just works: const [user, setUser] = useState(null); 22:27 - useEffect Nothing special required Good use of void: If you want to use a Promise function but not worry about await or .then(), you can pop a void in front of it: useEffect(() => { console.log('Mounted'); // getJoke().then(console.log).catch(console.error); void getJoke(); }, [getJoke]); 26:09 - Refs Very similar to state however some interesting things with null: const ref1 = useRef(null!); “Instantiating the ref with a current value of null but lying to TypeScript that it’s not null.” 29:33 - Custom Hooks This is a great use case for Tuples 31:00 - Context This is probably the most complex thing in this list First define the types Use generic to pass in types OR null This can also be non-null if you have default values in createContext: const AppCtx = React.createContext(null); 35:21 - Events The React events system is better than Vanilla JS Can handle them inline and have it inferred: onClick={e ⇒ yeah(e.target)} const onSetType = (e: React.ChangeEvent) => setType(e.target.value) React has a bunch of events built in — many of them take a Generic argument so you can specify the type of element that triggered it. Handy for native API methods like play and pause. 39:27 - ForwardRef Again use of <> to pass in forwarded ref type as param 1, Props types as param 2: type Props = { children: React.ReactNode; type: "submit" | "button" }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); 41:30 - ESLint Typescript-react is good Extend your own Most JS rules apply to TS 46:20 - React as Global React 17 Also add JSX: True to eslint globals for typing things like JSX.Element global.d.ts import * as react from "react" import * as react_dom from "react-dom" declare global { type React = typeof react type ReactDOM = typeof react_dom } 48:08 - TSConfig jsx: "react" React emit .js files with JSX changed Preserve .jsx file output React-native → .js files with jsx not changed 53:05 - Frameworks? Next.js makes this a TREAT Gatsby just use .tsx extensions https://www.gatsbyjs.com/plugins/gatsby-plugin-ts-config/ Links https://github.com/typescript-cheatsheets/react Tanner Linsley https://github.com/wesbos/eslint-config-wesbos Deno Architect https://fav.farm/ Snowpack Vite Parcel 2 Foam ××× SIIIIICK ××× PIIIICKS ××× Scott: Obsidian Wes: Folding Allen Keys Shameless Plugs Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: SvelteKit Course Wes: Beginner Javascript Course - 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

In this Hasty Treat, Scott and Wes talk about making money as a creator — how to do what you love, make money doing it, and not feel yucky about it! Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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 06:37 - Community supported Sell licenses Premium plugin Single payment $x per year Sell training Online In-person Sell support Donation-supported Patreon (usually has bonus content) Tips Open Collective Sell merch Teespring 16:00 - Corporation supported Display ads Sponsored segments Corporate sponsors Sponsored content Interesting collabs Stickers Links Syntax 330: React Query + More React with Tanner Linsley Syntax 340: Servers with Matt from Caddy Wes’ CSS Grid Course 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 bike shed some common developer opinions. 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 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:27 - Event params e, evt, ev, or event? 06:36 - CSS variables —red or —primary? 09:31 - CSS colors https://twitter.com/rem/status/1386694431710007298 RGB, HSL, HEX? 11:52 - Default exports vs named exports 14:45 - JavaScript import ordering 17:09 - Foo / Bar / Baz in examples 21:18 - Light vs dark themes 24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x 26:54 - VScode vs WebStorm (IDE) vs Vim 31:12 - TypeScript Generics: vs 34:39 - Indentation-base syntax https://twitter.com/LeahLundqvist/status/1386693374305095680 37:37 - Max line length 40:21 - One reduce, vs multiple .map()/flat(),filter() async function getStatus() { const res = await sendCommand('AT!GSTATUS'); const result = res.result .split('\n') .map((x: string) => x.split(`\t\t`)) .flat() .filter(Boolean) .map((x: string) => x.trim()) .map((x: string) => x.split(` \t`)) .flat() .filter((x: string) => x.includes(':')) .map((x: string) => x.split(`:`)) .map(([prop, val]: [string, string]) => [prop, val.trim()]) return Object.fromEntries(result); } 42:50 - index.js files https://twitter.com/sevilhelm/status/1386693971112562694 ComponentName.js vs ComponentName/index.js https://twitter.com/rleggos/status/1386694773021552641 48:20 - Ligatures and fancy fonts https://twitter.com/badsyntax/status/1386695010859507713 50:30 - Regular functions vs anon functions in a variable vs arrow functions function hey() {} const hey = function() {} const hey = () ⇒ {} 52:44 - Explicit return vs implicit return ××× SIIIIICK ××× PIIIICKS ××× Scott: Ego Mower Wes: Pass-Through Socket Set Shameless Plugs Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: Github Actions with Brian Douglas 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

In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more! .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”. 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 04:45 - What is it? Drag and drop is really for desktop apps You can drag and drop anything from any browser to any browser The important thing here is that this is a set of browser standards that allow different apps to communicate 07:50 - How to implement Make an element draggable Listen on elements for drag events The events bubble up, so you can listen on the parent element as items are added/removed 09:06 - DataTransfer API You can store anything you want in it getData / setData API Reference strings 11:35 - Accepting drops When you dragOver, you need to preventDefault() Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location 13:01 - Drop Image Set whatever you want 16:00 - Drop Effect What does it look like when you drop it? Does it go back? dataTransfer.effectAllowed e.dataTransfer.setDragImage(nothing, 0, 0); 18:02 - Security concerns 20:34 - Shortcomings: Edge cases out the WAZOO Margin caused dragout events Lots of if statements It’s up to you to do EVERYTHING CSS, classes, hover styles, etc. Accessibility Inaccessible by default, unless using mouse keys Have to announce everything Mobile 26:14 - Lbs Transmat API Links Figma Notion Missive 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 HTML — interesting HTML elements, things you might not know, wish lists for the future, and more! 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:34 - What is semantic HTML? What is the content? HTML should describe the content first and foremost. 04:04 - Why semantic HTML? Accessibility SEO Styling is easier HTML tags that have meaning: Almost all of them Common ones: / and to 20:04 - Structural / Layout tags You can have more than one header Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know / and strike? / / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. and While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range). 32:12 - Visual vs Semantic tags Almost all tags in HTML are semantic vs and vs and are NOT deprecated like many have said The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important. 35:40 - HTML tags with no meaning: 37:51 - Some elements have special functionality or styling and tag + 40:59 - What elements would we like to see? Modal element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog Textarea that grows with content Animated accordion A better table One that works with grid/flex/modern CSS, auto-sizing, max/min widths From Twitter: VirtualList Carousel - HOT DRAMA Date range Hero tag that figured its level out by itself. Useful for components that can go anywhere Icon tag Cookie banner tag that shows HTML elements without encoding You can kinda do this with display block on script and style tags Links Sara Soueidan ××× SIIIIICK ××× PIIIICKS ××× Scott: Hat Washer Wes: Netflix's This is a Robbery Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - 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  

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for! 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 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 Can it be styled? Solutions 04:28 - Just style the defaults Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style. This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs. Select Input - number, date, etc. Very hard to style Often need appearance: none; for mobile Checkbox / Radio Generally speaking, these CSS Properties can be applied to all inputs: font-size color padding margin background / images outline (remember focus) border 08:20 - Overlap with more dom elements, set background images Checkbox / Radio / Toggle buttons Often used :before and :after along with labels — e.g. label + input:checked Select can have element overlap 14:13 - Re-implement the UI with JavaScript Video / Audio HUGE rabbit hole of things to code Very important to maintain accessibility 15:46 - Use a UI Library Bootstrap Foundation Ant Design Carbon Design Fast Lightning Design System Material Design Chakra 17:20 - Open UI Documenting all the different types of web UI controls https://open-ui.org/ https://twitter.com/stubbornella/status/1384889551924121605 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”? How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience? 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work. 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful. 12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish? 18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use? 23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this? 28:28 - Why are radio buttons called radio buttons? 30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible: Could make me money now Help me to hit the ground running when I graduate Get me a job easily Make me all kinds of cash Thoughts? 35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js? (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) ) 39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well? 45:31 - What’s the best way to be able to host personal projects (frontend + backend) for free on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway. Links https://type-scale.com https://www.leveluptutorials.com/tutorials/modern-css-design-systems https://www.npmjs.com/package/soap Vercel Glitch Codepen Code Sandbox PM2 ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze Sprinkler Controller Wes: Retevis Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - 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

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it. 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. 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 03:17 - What is technical debt Outdated or hard to update code If you groan when you have to work on it, it might be a sign of technical debt Brittle code, easily breakable Quirks and features 06:55 - Why does it occur Over time, any garden left un-pruned will become overgrown Many people, many code styles Using hot new frameworks / techniques This is why seasoned developers don’t jump on new things You allow users to do literally anything 13:18 - Techniques for avoiding it Deny your FOMO of new things Abstract Write good tests Don’t put off refactors Update dependencies frequently Good standards Etsy has thousands of devs 20:08 - Examples in the real world Airline websites open in new windows all the time Cellphone carrier flashes the screen 100x 22:15 - Unfixable technical debt Agency work sometimes Links Next React Router TailwindCSS Redux Etsy Dave Ramsey 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, 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 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website. 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line? 18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support? 07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular 22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money. 30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch? 36:52 - Do you guys ever see your premium courses pirated on sites like Udemy, Skillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this? 39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it? 42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys! 50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work. 54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice? Links Fastify RedwoodJS Keystone.js 10up Vite Safari + Dev tools Browsersync localtunnel ngrok Xcode simulator Mike Birbiglia Brian Douglas YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: 3 in 1 Multi USB Charging Cable Wes: Milk Frother Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - 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

In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 05:20 - Astro What it is: astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React. https://twitter.com/georges_gomes/status/1380801812656226304 Why we’re excited about it: Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data. Scoped CSS by default (a la Svelte). Sass out of the box. Collections import for .md files // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- main> h1>Blog Postsh1> {blogPosts.map((post) => ( PostPreview post={post} /> )} main> 12:06 - ViteKit What it is: Framework-agnostic API routes Pages (frontend, optional hydration) Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit. 15:58 - Svelte Kit What it is: https://kit.svelte.dev/docs https://svelte.dev/blog/sveltekit-beta New framework for building Svelte apps 19:07 - Remix.run What it is: Remix.run Fullstack React framework Why we’re excited about it: Made by Michael Jackson, Ryan Florence License-based React-based Caching-focused, uses “the platform” Centralized data loading, works without client JS if needed Better nested routing Links Sapper Vite Snowpack 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 continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes Deep end stuff 03:30 - any vs unknown 06:20 - never https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts Definition files Usually for existing libraries that don’t have types Can be generated or hand-written Also really handy for pure JS projects, you still get good autocomplete because of these 13:25 - Type generation Can be generated from GraphQL, or Schemas, or from JSON Output 17:20 - TypeScript generics (variables) Kind of like functions, they return something different based on what you pass it makeFood makeFood This function makes food and shares lots of the same functionality between making a pizza and sandwich If the only thing that differs is the type returned, we can use generics You often see this as a single char T It can be anything Promise is a generic querySelector uses generics 21:48 - Promises / Async + Await Functions now return a Promise type, but with a generic Promise Promise Promise>, Request, Request stringified added headers 29:48 - Type assertion (type casting) Type assertion is when you want to tell TypeScript “Hey I know better than you”. Two ways: as keyword (most popular) someValue as HTMLParagraphElement Tagged before someValue 34:14 - TypeScript without TypeScript (JSDoc / TSDoc) Really nice! You can also add comments / descriptions https://github.com/developit/redaxios/blob/master/src/index.js 40:08 - Interfaces vs Types Interfaces have better perf https://twitter.com/wesbos/status/1362418379919937545 https://blog.logrocket.com/types-vs-interfaces-in-typescript/ What do you default to? How we write TypeScript 44:27 - Interface or Types Scott - Types Wes - Interfaces 44:50 - any vs unknown Scott - any Wes - unknown / any 46:52 - Any (No Implicit or Implicit Allowed) Scott - No implicit any Wes - No implicit any 48:31 - Return types (Implicit or Explicit) Scott - Explicit always Wes - Not always 50:49 - Compile (TSC, Strip TS) Scott - Strip Wes - Both 52:38 - Type Assertion (as or ) Scott - as Wes - as 53:09 - Arrays (Dog[] or Array) Scott - Dog[] Wes - Dog[] 54:02 - Assert or Generic (if both work) querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’); Scott - querySelector(’.thing’); Wes - querySelector(’.thing’); Links Syntax 324: TypeScript Fundamentals Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools Axios VS Code Syntax 310: Serverless, Deno and TypeScript with Brian Leroux Cloudinary Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Powerowl 16 Battery Recharger Wes: Fairywill Pro P11 Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

In this Hasty Treat, Scott and Wes talk about Git Rebase — what it is and how and when to use it! 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 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 05:12 - Why and when to rebase? git rebase -i is interactive Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits. Common uses: Squash all commits into one or multiple commits Reword commits These lines can be re-ordered — they are executed from top to bottom. p, pick = use commit r, reword = use commit, but edit the commit message e, edit = use commit, but stop for amending s, squash = use commit, but meld into previous commit f, fixup = like “squash”, but discard this commit’s log message x, exec = run command (the rest of the line) using shell b, break = stop here (continue rebase later with ‘git rebase --continue’) d, drop = remove commit l, label = label current HEAD with a name t, reset = reset HEAD to a label m, merge [-C | -c ] [# ] Links Git Rebasing 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 selling and shipping t-shirts, and how to do it all in TypeScript! 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. 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. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. Show Notes 01:58 - T-Shirts 101 T-Shirts are cool I sold 100 right away to get the kinks out Then I did pre-order The stack TypeScript React Next.js 09:08 - Selling: Front-end Snipcart It’s a button When Someone buys, they scrape the site for the HTML If you only have a client-side rendered button, you use the JSON API instead Integrated into Gatsby pretty easily Wrote one custom hook to count inventory and disable when sold out I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment. 10:10 - Selling: Shipping Quotes Snipcart has integration for USPS, etc. You can also do custom shippers It’s a webhook They also take care of customs declaration 13:30 - Selling: Backend Next.js Dashboard Integrate with ChitChats, Stallion Express, and SnipCart. The tech Shipping Labels Packing slip 18:05 - Fulfilling Printing labels Designed with CSS + React Print CSS is wild Fan Fold labels were way better I switched to Stallion Express Cheaper Printing packing slips Batch scanning Scanning → Mark as shipped Started with webcam Bought scanner for cheap QR code was better because my tokens were long Data matrix is often better Sending notifications Hit the endpoint via Snipcart 28:48 - The physical part T-Shirts printed from local supplier U-Haul to get them here Bags printed in China (about 40 cents each) I wrote a bunch of code to organize by size This cut down on moving around (14 hours if you save 30 seconds per shirt) Some got stickers Multiples were the hardest 24 different types of shirts some wanted 4xl some wanted tall 36:30 - Common questions Why did you do this yourself? Fun project I learned a ton This is how you don’t burn out Why not print-on-demand? (DTG) Tonal Embroidery Quality Money Pay people in my community Control Bags, stickers, etc… stickermule Why not $companyThatHandlesIt I want to do stickers I want to do decks Why not Shopify Large orders still need major fulfillment strategies Code has to be written or money spent 44:16 - Other lessons learned Queues would be good here Sometimes you had to wait 3+ seconds for the confirmation of shipping No one reads, it was pre-order Don’t buy shipping right away — people email about incorrect addresses Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds) Pre-order is great because you can offer many sizes Async JS to do things at most 50 at a time Links Wyze Plug ××× SIIIIICK ××× PIIIICKS ××× Scott: Pixeleyes AutoMounter Wes: Baratza Encore Conical Burr Coffee Grinder Shameless Plugs Scott: Level 2 Node Authentication - 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

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them. 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 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 07:22 - Why? Container queries are media queries for components (e.g. they are based on the element’s size, not the browser). This is in line with how we write components. It will change the way we write CSS. 08:49 - The Syntax Containers need to be defined as containers via containment context .container { contain: size layout; } New contain value: .inline-container { contain: inline-size; } This is the same as the logical properties. Assuming you read LTR, or RTL: size - width and height inline-size = width block-size = height /* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } } 18:49 - How to try them today Download and/or update Chrome Canary Go to chrome://flags Search and enable “CSS Container Queries” Restart the browser 19:27 - Demos Need Chrome Canary + Flag https://codepen.io/collection/XQrgJo https://codepen.io/una/pen/LYbvKpK?editors=1100 Links Miriam Suzanne Susy Miriam’s CSS Sandbox https://css.oddbird.net/rwd/query/explainer/ Canary @addyosmani The CSS Podcast @jon_neal 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 dev tools tabs, what each tab does and how you can use them. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 3:50 - Network See all requests, filter by type or name Used to understand all requests coming or going Turn off caching View timing See the true GZIP size Slow down network speed See time for page load Copy as fetch or CURL View request, response, and headers See CORS issues See which requests have happened See if an asset is cached (both in dev tools, also Cloudflare) See blocked requests because of extensions Tip: You can see the network info from the console in Firefox 22:03 - Memory See what is taking up memory Strings DOM nodes Objects Actual .js 26:44 - Performance Click record and use the site Flame chart useful for finding slow functions and debugging janky animations Get FPS in coordination with flame chart Save performance recording data to be able to share for debugging You can also upload saved data to debug without using the site 30:48 - Console Interfaces with the JS runtime Shows errors, warnings, and logs Tip: Negate noisy warnings/errors that clutter your console with - Tip: Use $0 to select current element $1 for second last $r for current React element Tip: Use $$ to shortcut Query SelectorAll and Array.from Tip: Use $ to shortcut Query Selector 40:28 - Storage / Application Working with LocalStorage, Cookies, Index DB, and Session Storage 44:56 - Audit / Lighthouse (Chrome and Firefox) Run lighthouse to check for performance, accessibility, and UI stuff Not the silver bullet audit that many people think it is Colors are sometimes like “Really?!” Can be helpful regardless 50:28 - DOM Tab Firefox only Shows everything that is in the scope of the browser Links Adam Wathan Ben Vinegar ××× SIIIIICK ××× PIIIICKS ××× Scott: dupeGuru Wes: Moccamaster Coffee Maker Shameless Plugs Scott: Node Fundamentals Authentication - 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

In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why. 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. 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 04:22 - What is it? https://drafts.csswg.org/css-nesting-1/#nest-prefixed https://twitter.com/argyleink/status/1371874777548267520 06:02 - Why nest? Easier to read Easier to write Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up. 08:13 - When to use nesting Nesting is often overused Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it) .container .item {} .container .item a {} Use it for scoping 10:06 - Nesting prefixes In order to nest CSS, you must first start it with a nesting selector .tweet { & > p { } &.media-included { color: green; } & + .tweet { } // sibling & p { } // descentang } Component-based — tweet, card, company, Link article{ color: blue; & { color: red; } } and must be the first child of a compound selector 12:44 - @nest rule / media queries Mostly just a visual way to show nested .foo { display: grid; @media(orientation: landscape) { & { grid-auto-flow: column; } } } .foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } @media (min-inline-size > 1024px) { & { max-inline-size: 1024px; } } } } /* equivalent to .foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-inline-size > 1024px) { .foo { max-inline-size: 1024px; } } */ 16:30 - How to use nesting today Literally any CSS preprocessor PostCSS to use spec Links Syntax 274: How does stuff get added to CSS? Adam Argyle answers! Sass PostCSS CSS Variables 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 how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, 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 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it? 06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts. 15:22 - I’m trying to teach myself web development and I’m having problems making up the logic for my personal projects. I would have to watch YouTube tutorials or look at other people’s code in order to implement simple features to my website and I’ve been feeling pretty stupid for not spending the time to think of it. I feel like I’m missing out on knowing how to problem solve for myself whenever I copy other people’s code and try to understand them afterwards. 19:27 - I just landed my first web development job after following The Odin Project and building personal projects for about a year. It tripled my income so I am incredibly excited! I have been using a PHP framework which was developed by one of my coworkers and has no documentation. In order to understand the code, I either have to read a bunch of source code or ask one of the other developers questions. While I am doing well, I can’t help but feel as if I am working way too slow and asking way too many questions. I assume this is imposter syndrome and lots of people deal with it, but how would you suggest dealing with this type of anxiety? 25:11 - Monorepos, yes or no? 29:43 - As a brand new self-taught web developer, how would you know if you’re ready to apply for junior positions? 32:03 - Will there ever be a .eat domain or are the pre-order sites just ripping you off? Would like to know who decides what TLDs are possible or not. 35:26 - I’m currently employed as a fullstack developer but want to build a portfolio for future job hunting. Would you say it’s ok to reference a project or two from an employer? My problem is that the only projects I have outside are mostly just smaller tools built for myself for fun. 39:29 - Should developers always use their real first and last name when presenting themselves as a professional online (e.g. Twitter, LinkedIn, Github, personal site). Or is it acceptable to use a fake last name for example? My wife is quite conscious about privacy online, so would prefer I retain some anonymity. But also, my last name is a bit generic, and not very Googleable. I thought having a more snappy and interesting name would help me stand out, and be easier to find with a quick Google. You guys both have awesome names that are very unique and are hard to forget. 43:59 - How do you find time to work and keep up with updates and libraries etc. having a wife & kids? 46:06 - I am a beginner in making course content. I am trying to create a programming tutorial, but every time I try to record some tutorials I have to compromise on audio quality. Lots of background noises get captured on audio. Can you both share some tips to make soundproofing room? What tricks do you both use? 53:33 - As someone who recently learned/is learning how to build websites using express/node/react, with a little know how with Python and Django too, how do you start building a portfolio that isn’t just a bunch of practice/show-pieces? How do I get a client? 59:53 - Should I be using multiple web apps on a single site or try to make them all one? If I have a site that displays blog posts about parks for example, then a page with all the parks listed out that link to a page about each single park’s details, should I be making the entire thing in one app? Or make a blog app and publish it, then make a different app for the other content and publish it using a subdomain? Links Syntax 266: Video for the Web 2020 and Beyond Cloudinary Mux Vimeo LesMills Bitmovin Brightcove Wista Cloudflare AWS MediaLive Keystone.js Gatsby Syntax 331: Hasty Treat - Hireable Skills for 2021 ICANN dbx 286s Electro-Voice RE20 reMarkable ××× SIIIIICK ××× PIIIICKS ××× Scott: CamLink 4k Wes: TS80p Mini Soldering Iron Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Fullstack Advanced React & GraphQL - 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

In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows! .TECH - 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”. 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 04:05 - Easy Snippet https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet 05:33 - Add Missing Function Declaration https://twitter.com/wesbos/status/1369393437062074377 07:30 - Error Lens https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 09:08 - Declare Missing Members https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension 10:29 - ES7 React/Redux/GraphQL/React-Native Snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 11:59 - File Utils: https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils 13:59 - GitLens — Git supercharged https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 15:15 - ES6-String-HTML https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html 16:41 - Wrap Console Log Simple https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple 17:18 - Text Pastry https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry 19:14 - Better Comments https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments 20:14 - Tip: Use Emmet everywhere https://emmet.io/ 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 Matt Holt about Caddy, SSL, web servers, best practices, and more! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Guests Matt Holt Show Notes 02:08 - Who are you and what do you do? 03:22 - Why would you want to build a web server? 08:45 - How do SSL certs work? 14:03 - Why do you even need a web server? 23:03 - Is it better to have a web server serve your images? 20:31 - What is load balancing and why might you need it? 31:35 - Is server administration a lost art? 38:03 - What is a sidecar proxy? 38:50 - How do chron jobs work? 39:50 - Why is GO so fast? Why is it good? 46:32 - Should every website have an SSL certificate? Links Floss Weekly 364 Caddy Let’s Encrypt Certbot PM2 https://doesmysiteneedhttps.com Tello Drone ××× SIIIIICK ××× PIIIICKS ××× Matt: LG Stick Vacuum Scott: Alen Pure BreatheSmart Air Purifier Wes: Tello EDU Shameless Plugs Matt: Matt Holt Sponsorships 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

In this Hasty Treat, Scott and Wes talk about a common problem you’ll encounter in your development career — the n+1 problem. 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. 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 05:00 - What is the n+1 problem? The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships. 09:33 - The solution The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids. 11:11 - Should you care? Sometimes no: its often fine to do multiple DB Calls Facebook DataLoader Mercurious Many ORMs take care of this for you These then break it down into my appropriate SQL MongoDB Ruby: eager loading Laravel ORM does it Aggregation pipelines Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en Mongoose Populate Apollo Studio 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

It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager. 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 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:50 - https://shaquilhansford.com/ Not optimized for desktop Lots of spacing issues overall Too many accordions - could be lists in multiple columns Social links could be in the footer Twitter is on point - iwantyoutohire.me Phone number on website is good 11:31 - https://www.benlammers.dev/ Gimmy dat yellow The design and polish is really good Data URI images can overload CPU Semantic headings, but HTML should use some work Four H1s on the page 20 H2s 40 H3s Main tag 20:28 - https://www.zubairaziz.com/ Lots of empty space Photo is key Not sure what to do when I land on the page Blog is nice, but two posts from May - add more or drop it Portfolio is just enough Nav animation should only happen on initial load 29:39 - https://codebyfil.dev/ This is a great example of something that is good, but needs a bit of polish Tone down the border radius Tone down the box shadow Border and drop shadow Images aren’t links Footer padding or space - contact is ridding the bottom Scott’s HTML breakdown Four H1s Six H2s Four H3s 18 H4s Five H5s 37:39 - https://www.johngeorgesample.com/ Clean but maybe too clean Nav is too distractingly too big Need active link indicator in main nav div div div div - take a look at those semantic HTML tags No H1 or H2 HTML needs work brother Use × instead of X Asterisk doesn’t work on mobile 46:52 - https://stordahl.dev/ Great images Nice typography Sign-up for newsletter is great Store = A+ Scott’s HTML breakdown Two H1s, one of which is just nice to meet you Zero H2s Articles should be articles No section 1px move on hover is nice - could use a transition Links Axe Accessibility Testing Gatsby Next.js https://feathericons.com/ Snipcart GeoGuessr ××× SIIIIICK ××× PIIIICKS ××× Scott: Walkabout Mini Golf Wes: 60w Portable Charger Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL. .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”. 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 03:38 - What is it? https://graphql-code-generator.com/ Code generation for GraphQL APIs 04:34 - What can it do? Generate React hooks for any of the major player Apollo client (urql) Types for the full stack — resolvers, mutations 07:49 - How we use it Generate a schema file to keep client and server in sync in mono repo Creates all React Hooks Generates all types for both resolvers, and anything client-side Links React Query Apollo Typescript Cypress https://periqles.herokuapp.com/ https://the-guild.dev/ Swagger 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 building your own authentication — diving deep into JWT, sessions, tokens, cookies, local storage, CSRF, and how it all works! 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 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. 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. Show Notes 01:51 - Overview Level Up uses a JWT & secure cookie-based authentication and tracks sessions via a db table. Accounts.js 05:13 - JWT Base 64 encoded (not encrypted) token that contains data. We have both accessTokens and refreshTokens. JWT has three parts: Header What kind of algo was used Payload Data about the user Email Username UserID refreshToken, authToken, sessionId Signature This ensures that no one monkeyed with the above parts. If you change your email in the payload, the signature is not invalid, because in order to generate the signature, it uses the header and payload as part of it. accessToken A short lived JWT that contains the sessionToken, userId and expires after 90min. refreshToken A long lived JWT that contains just the sessionToken and doesn’t expire. JWT can be decoded and read, but you have to encode them with your secret. JWT can be stored anywhere, there are two main places: 20:26 - Cookies We use httpOnly, secure cookies to store the accessToken and the refreshToken. The accessToken is a session cookie and is removed whenever the browser is closed. The refreshToken is valid for 100 days but is also re-created and revalidated for 100 more days each time the accessToken is generated. Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server. Note: Safari has stricter rules than others for same domain cookies (e.g. localhost won’t work). 34:26 - Sessions Sessions are when a user logs in on a device. If you open a phone and log in and a computer and log in, those will create two different sessions. A session contains information about the user’s connection (like their IP) but it also contains the userId which allows us to create new accessTokens from a valid session. Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false. Sessions also have sessionToken which are generated on authentication or create account. 38:10 - CORS Cross-origin-resource-sharing Can be super tricky to get working cross-domain You usually have to actually visit the website for the cookie to be set, even with lax cors 46:06 - CSRF 48:47 - Authentication process bcrypt.js 52:13 - Helper Packages NextAuth.js is super easy Passport.js auth0 Links Caddy Fastify ××× SIIIIICK ××× PIIIICKS ××× Scott: reMarkable 2 Wes: Opration Odessa Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about environment variables — what they are, where you should keep 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 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 03:54 - What are they? API Keys Secrets Database URLs NODE_ENV 06:16 - Type of env variables Plain text Encrypted Frontend Backend .env files .env is a good package for all langs .env.local Framework env variables System env variables Host-provided variables 16:20 - Where should you keep them? 1Password 1Password CLI 17:34 - Other gotchas Netlify Limit is 4096 Netlify needs a clear cache before it works THING=yo node index.js cross-env NODE_OPTIONS="–inspect" Require before run Links Digital Ocean App Platform Render Vercel Netlify 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

It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file? 04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects? 10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks! 18:32 - Should a model name be singular or plural? 22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app? 25:46 - What’s the difference between adaptive and responsive design? 32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier? 36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching. 42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in? 45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks. 48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this? Links VSCode Peek Definition Obsidian Render Adam Wathan Gumroad Braintree MJML https://github.com/unlayer/react-email-editor Redwings shoes ××× SIIIIICK ××× PIIIICKS ××× Scott: Tosowoong Enyme Powder Wash Wes: Carhartt Gloves Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: Advanced React Course - 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

In this Hasty Treat, Scott and Wes are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, and more! 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 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 03:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed? 05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast? 09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects? 10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses) 12:48 - Could you all talk about protected/private routes in Next.js? I’m coming from create react app type routing. 16:07 - What would be doing for a living if not a developer? 17:50 - What do you think about Clubhouse? Are you guys planning to talk over there some time? 24:18 - Vue or React? Which do you think will be the top? And should developers learn both? Links https://twitter.com/aaronendsley/status/1361375032342110210 Svelte 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 their desk setups and how they’ve evolved, both as coders and video and course creators. 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 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. 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. Show Notes 03:36 - Desk Scott Ikea countertop on Jarvis Legs. Four presets - sit, stand, horse stance, lunge Wes 8" Ikea Butcher Block countertop on legs LackRack on wheels underneath Desk at cottage is Maple Live Edge Slab on Hairpin Legs 09:01 - Chair Scott Steelcase Gesture Wes Polished Aluminum Herman Miller Aeron Roller Blade Wheels! 15:39 - Display Scott Vivo Stand 38" LG Curved Ultrawide Vissles-M, Portable Touchscreen Monitor BenQ Monitor Light Wes LG 32" 4k Ultra HD Dell Ultra HD 4k Monitor Rain Design 10032 mStand Laptop Stand 22:49 - Headphones Scott Ultrasone Wes QC35s w/ Wicked Cushions - wish they charged over Wireless 24:58 - Mouse + Keyboard Scott Keychron K3 with optical Apple Magic Trackpad Wes Apple Magic Keyboard - extended in Space Grey Logitech Mx2 29:18 - Laptop Both MacBook Pro 33:43 - Dock + Connecting it all together Scott Caldigit TS3+ Satechi USB-C Slim Multi-Port with Ethernet Adapter Under desk rack Wes Everything is in a Lackrack Caldigit TS3+ Single Cable Hookup Two monitors 6+ webcams Elgato CamLink 2 HDDs Microphone Amazon Powered USB Hub Startech Rack Mounted Power Strip 41:36 - Camera + Capture Scott Sony a7 iii Elgato CamLink Wes Sony RX100 iii 44:11 - Microphone + Capture Scott Audient Nero Monitor Controller M-Audio BX8 EV RE20 Focusrite Scarlett 2i2 dbx 286s Cloudlifter CL-1 BSW RE320POP Wes Heil PR40 + shock mount, boom arm, pop filter Focusrite Scarlett 2i2 ART EQ 351 dbx 286s BSW RE320POP 49:06 - Lighting Scott Neewer Bi-Color 480 LED Traditional three-point lighting (key, fill, backlight) Philips Hue above for color pop Wes Neewer Bi-Color 480 LED on a Wyze Plug Two Backfill LED Color lights BenQ Screenbar 55:22 - Storage / Backup / Home Server Syntax 220: The Synology Show - Backups and Home Server Scott Synology DS918+ 8TB Wes Synology DS918+ 16TB (DS920+ is the latest) 16TB of drives - I don’t use anywhere NEAR that LaCiE Rugged or WD Passport for Time Machine 57:50 - Other / Wish list Scott ReMarkable 2 tablet Apple Pro Display XDR Wes Mindnode Elgato Stream Deck LG 5K2K Curved Display Links GraphQL Code Generator KeystoneJS BSW Ikea Lack Side Table Better Touch Tool Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about hireable skills or 2021 — what you need to know to get a job and grow in your career this year! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 04:17 - Code in general Clean, commented, organized Take the extra hour before an application and polish it 06:10 - JS Basics of the language - storing data in Arrays and Objects Looping and flow control Array methods Promises + async await DOM basics - select an element, listen for clicks, update elements Node basics Most of your JS basics apply here Read Files, write files Fetch data and return it 08:38 - CSS Attention to detail - pixel-perfect replication of designs Works well on mobile No reliance on libraries - complete reliance on Bootstrap or Tailwind is a red flag. If you use these things, explain clearly why they are useful to you (e.g. augment your skills, not relied on). 12:54 - Real-world libraries One of the following: React, Vue, Angular Node.js - sending Server data as a response JSON Express, Next.js Popular helper libs Date functions / Moment (Moment is old but its still 2x more popular) Lodash CSS Scoped CSS Pattern libraries 17:15 - What about data structures and algorithms? Yes you obviously need to know about arrays and objects - probably maps and sets too Links lists? Tree structures? Traversal? https://twitter.com/wesbos/status/1353729683486076930 20:26 - Soft skills Know how to talk to PMs and other devs. Know how to stay on top of timelines and schedules while communicating. You won’t last long in any work environment where you aren’t able to fit in. Many devs sometimes get a big head about doing tech - this is not something you want to emulate. Ignore any kind of internal “us vs them” attitude. It’s about the big picture and you’ll go further. Write good, short, emails that don’t sound like you are mad. Links LeetCode Syntax 117: Hasty Treat - How To Email Busy People 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 with Tanner Linsley about React Query, how it works, why you might want to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Guests Tanner Linsley Show Notes 01:56 - What do you do? nozzle.io React Query 06:04 - What is React Query? 24:19 - How does React Query use dev tools? 31:20 - What about React Context? 36:59 - Server-rendered components? 42:40 - Thoughts on static sites? 50:38 - What is the stack? Links Redux Axios Syntax 206: State Machines, CSS and Animations with David K Piano RTK Query Relay Remix Twin.macro Tailwind CSS React Static Next TanStack ××× SIIIIICK ××× PIIIICKS ××× Tanner: React Query - Essentials Course Scott: Govee TV LED Backlights Wes: 1Password Shameless Plugs Tanner: Nozzle.io Scott: Testing with Cypress - 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

In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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 03:55 - What Is Cypress? A visual testing studio that uses a jQuery-like syntax to test your application in browser. Very modern testing solution. 07:36 - Used to be only Chrome Now available for Safari, Firefox, Edge, etc. ??? - What frameworks is it for? Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results. Can also run on ci/cd via a headless mode. React component testing is experimental. 10:58 - Automation Cypress studio new feature that writes tests for you. 12:37 - Data Intercept + Fixtures or through plugins 15:01 - Cost? It’s free! There is a paid product called Cypress Dashboard that allows you to record tests long-term. Links Cypress bos.af Jest Better Touch Tool 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

It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more! 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 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected. 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions? 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee? 12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over! 18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this? 22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it? 29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new? 35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem. 42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue? Links SnipCart Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More! FileReader API Syntax 322: The Deno Show Syntax 044: How To Learn Things Quickly Twilio Postmark Begin.com RabbitMQ Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry. ××× SIIIIICK ××× PIIIICKS ××× Scott: Hario Filter-In Cold Brew Tea Bottle Wes: Slonik USB Headlamp Shameless Plugs Scott: Testing With Cypress - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript. 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 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 03:38 - What is a TypeScript compiler? Do we still need Babel / WebPack? 07:49 - Babel Transpiler It doesn’t do typechecking New JS features that aren’t in TypeScript yet 10:22 - SWC Rust based compiler Doesn’t do type checking (yet) https://github.com/swc-project/swc/issues/571 13:03 - Deno Uses tsc right now Might move to Rust https://github.com/denoland/deno/issues/5432 13:36 - Surcase https://github.com/alangpierce/sucrase#transforms 14:46 - ESBuild Compiles, but doesn’t do any type checking Fastest 17:39 - What about bundlers? Parcel Snowpack Webpack ESBuild When might you still need a bundler? To handle different types of files that are non-standard Like importing CSS and images Treeshaking Smaller bundle files Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that Polyfills Typescript does convert to syntax, but will not polyfill features Something like Promise Syntax can be transpiled to old code Methods like allSettled aren’t Links Syntax 324: TypeScript Fundamentals Syntax 322: The Deno Show 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 review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. 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 04:32 - Why does an impression matter? All of this stuff comes together to work in your favour when you are hunting for a job. 05:14 - What goes into an online presence? Twitter Share what you know Online website Design Messaging Effort Personal life Blog Resume It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them. 07:25 - A couple stories @HenriHelvetica You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries. I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work. I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.” 09:40 - Ash Connolly https://ashconnolly.com/ https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0 Software Engineer Using new tech with high end clients Review Pros Clean, simple design, but doesn’t feel like it’s missing something Animations are a nice touch Easy to see their work (e.g. photo, title, short paragraph, link) Testimonials is good, I might change the word testimonials, but that’s small Cons Nitpick - footer emphasis color looks like a link HTML is good, but missing some semantic tags like , , , too reliant on divs Resume Pros Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog). Work history - good way of describing what he did. “Carried out performance audits and site speed improvements” Links to writings and side projects Cons Lists Brad Frost as someone who shared his post. This feels a little weird. Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS. Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that. 20:48 - Matthew Bidwell https://matty.dev/ Backend dev Not focused on dev Review: Banging domain It’s clear who he is, what he is about Links to Twitter, Github and LinkedIn right away Blog posts showing he knows what he’s talking about 24:42 - Leah Lundqvist https://leah.link Review: Pros Fantastic aesthetics on site Good lead paragraph Cons I’m not sure what work she actually does Github pages are great for digging but not curation or showing off Same with Twitter For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone. Don’t make them hunt for it Twitter review: Unreal Pinned tweet 31:04 - Ismail Ghallou https://smakosh.com/ Best one yet Clear explanation right off the bat Dribbble - shows me he’s up on the latest Open source Testimonials Talks Blog https://twitter.com/smakosh - Twitter lines up Most recent tweets about tech 40:18 - Jhey Tompkins https://jhey.dev/ Whimsey Sound! Good use of CSS and SVG animation 46:28 - Wes’ website websos.com Can’t view source Whimsey The right kind of animation The link to the Syntax podcast has no indication that it’s going to take you offsite. The background image is good, but not as good with a wide browser. Custom scrollbars are nice Overall the site is a delight 53:25 - Scott’s website scotttolinski.com Font’s a little big Link to documentary is great Bio should include links Page animations are great Showing personal life / interests is good Super fast Links https://twitter.com/wesbos/status/1350961135269400580 Syntax 298: Voice Coding is Really Good with Josh Comeau Josh Comeau Doug DeMuro ××× SIIIIICK ××× PIIIICKS ××× Scott: Swedish Dishcloths Wes: Paper Wheels Knife Sharpening System Shameless Plugs Scott: Testing with Cypress - 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

In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them! 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 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 03:04 - The Events http://keycode.info/ keydown beforeInput Keypress - deprecated inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc. keyup change event - only fires when you focus out https://github.com/w3c/uievents/issues/220 08:02 - Event meta data "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale .repeat 16:46 - Media keys https://developers.google.com/web/updates/2019/02/chrome-73-media-updates play, pause, ect Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow 18:32 - When might you use key codes? Space bar to stop a video on a page Building a game Making a web app feel more like an app Links Better Touch Tool Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management 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 TypeScript fundamentals — what it is, how you use it, why people love it so much, 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 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes What is TypeScript? 03:12 - Types? What are types and why should you care? JS is a typed language, it’s just not strongly typed JS does not care about reassignment of a variable to a new type Does not care about your types, but they do exist 06:34 - The Fundamentals You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like. Create a variable: Will it be a string? A number? A custom type of show? Create a function: What params does it take? What type are they? What does it return? Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed. This can allow you to prevent shipping code that has these errors by checking your code. Some of the biggest benefits here come via errors in your text editor 13:30 - Explaining the types You can create your own types Strings Numbers We only have numbers in TS, no floats/ints We do have BigInt though, but not something most people will use Arrays Will be a list of another type Unions This type will be one of the possible options String of DRAFT PUBLISHED or ARCHIVED Intersections An intersection type combines multiple types into one Objects These are custom types where each property is its own type Any Explicit any Implicit any Language types These things are technically just Objects, but they have their own types Dates Timeouts DOM Elements / Nodes Void When a function returns nothing — usually used with side effects like click handlers Enum A set of named constants Used when you have a select amount of values — I like to think of these as the select lists of TS String unions are also used for this same thing 30:28 - Inference Automatic detection of types Typescript will try to infer your types based on their definition Not every type can be inferred, leading to implicit anys and the need for explicit types 33:25 - Getting types Most popular packages already have types — you install them like npm i @types/whatever If a package doesn’t have types, you have to create them yourself, which can be annoying MakeTypes Console log a JSON.stringify(obj), and pipe it in Node has types Vanilla JS has types, for the language and all of the DOM - HTMLInputElement React has types Typing Node modules that don’t have types Overall benefits 40:39 - Type hinting With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect This seems like a small deal but in practice leads to being much more efficient 42:50 - Refactoring Rename a function, type, or variable and it will be updated everywhere in the project! Moving a function to a new file is actually part of TypeScript Drag + Drop file, update imports 48:10 - Compiling TSC vs Babel / Esbuild Only TSC type checks Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD Links Snipcart GraphQL Snowpack ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: LumiPets 2: LumiPets Bear Wes: Phomemo Label Printer Shameless Plugs Scott: ESM & Snowpack - 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

In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 02:55 - Previous iterations Originally on Drupal 7 Full re-write to Meteor + Blaze Two sites — store.leveluptutorials.com and leveluptutorials.com Meteor + React Meteor + Apollo Combine store and site Move to TypeScript NOW 05:30 - Big choices No Babel up and down the stack UI Mostly unchanged — React + Styled Components + SCSS Moving more to SCSS, CSS vars Build and dev done via Snowpack 50ms hot reloadin’ Mega fast development workflow has been a huge plus Errors in the UI via Snowpack Wrote a custom GraphQL importer plugin API ESBuild Insane speeds Wrote a custom GraphQL importer plugin Mercurious / Fastify Codegen GraphQL code gen to create everything we need for a fully typed codebase Auto-generated React Hooks Hosting render.com for both CLI Custom avalanche CLI that removes the guesswork and makes bulk operations easy Caddy server for easy leveluptutorials.dev in local environments Testing Jest → API Cypress → UI Links Digital Ocean app platform https://beta.leveluptutorials.com/ 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 bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:13 - What is it? A secure runtime for JavaScript and TypeScript Built by Ryan Dhal — same guy who initially built Node.js API is JS or TS out of the box 04:55 - Does it replace / what is it in relation to? Node It’s a replacement for Node.js Express Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs https://github.com/oakserver/oak Serverless Deno can be used for anything, so it can be used for serverless functions, or a traditional web server Serverless, Deno and TypeScript with Brian Leroux React / Vue / Svelte These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until. https://alephjs.org/ SSR It comes with all browser APIs out of the box! Fetch Window + Add Event listener Webpack / Parcel / Snowpack Deno is a bundler Prettier Deno is a formatter TSC Deno is a TypeScript compiler and runtime ESLint Deno is a linter Jest Deno is a Test Runner NPM Deno is a package manager - it pulls in packages from URLs 14:51 - Modules ES modules from the start Modules are loaded from URLs Why? No package registry to worry about This is how the browser works Import from URL You can also specify it in the json file https://github.com/oakserver/oak/blob/main/deps.ts https://deno.land/ Fetch is built in! It’s a browser API, but who cares?! Browser APIs window.add event Listener Deno is event based, like the browser 20:10 - A nice standard library https://github.com/denoland/deno/tree/master/std 22:14 - WASM Deno can run WASM with the same APIs that the browsers can Node is doing this too (experimental) 25:06 - Multi-threading with Web Workers 26:13 - Speed It’s fast! They took everything they learned from Node - good and bad Built in Rust From what we understand: V8 is written in C++ Node is written in C, C++ and JavaScript How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two. https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs 29:44 - Security Sandboxed —allow-read —allow-net -allow-write https://deno.land/[email protected]/getting_started/permissions#permissions-list You can specify which dirs it can access 33:39 - Run from anywhere https://www.npmjs.com/package/npx Deno run https://cool.com/whatever.ts 37:43 - Async out of the box Everything is based on async + await / promises right away. No callback APIs, no promise wrapping. Top level await 38:53 - Node Compatibility Node APIs are being filled This means if a browser package ships an ES module of a package, we can just import it 42:21 - What we’ve built A bunch of sample scripts Lots of simple demos Very intuitive Fetched and downloaded every single Syntax mp3 https://twitter.com/wesbos/status/1326345600141582336 46:54 - Hosting Literally any linux server (Linode, Digital Ocean, etc.) https://begin.com/ https://fly.io/ 48:29 - Final thoughts Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source. Wes: If You know JS or TS, you are already 90% there. The package ecosystem isn’t there yet Battle-tested ××× SIIIIICK ××× PIIIICKS ××× Scott: Boom/Bust: The Rise and Fall of HQ Trivia Wes: Orthopaedic Pillow Shameless Plugs Scott: Deno 101 For Web Developers - 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

In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 03:10 - What is AVIF? AVIF is derived from the keyframes of an AV1 video Royalty free (big deal) What about WebP? Basically half the file size of a WebP for free, which was already about half the size of a jpeg It’s a lossy format — ie it inherently will degrade the image https://jakearchibald.com/2020/avif-has-landed/ No animation 10:53 - How to implement Cloudinary is in beta, but you can try it Gatsby supports it https://squoosh.app/ Imagemin https://github.com/nucliweb/imagemin-avif https://avif.io/ https://github.com/dreampiggy/AVIFQuickLook https://github.com/vercel/next.js/pull/20765 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

It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, and more! 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 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. 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. Show Notes 02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more. 04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice? 11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it? 18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical? 22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects! 25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch? 30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc. 35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal? 40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose? 47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming? 55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users? Links Syntax Listener Questions Bundle Phobia Shopify Snipcart Styled Components BEM Mux ××× SIIIIICK ××× PIIIICKS ××× Scott: Double Sided Mounting Tape Wes: Secret Aardvark Habanero Hot Sauce 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

In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems. 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 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 05:00 - How do you define type at the start of a new project? 15:03 - How do media queries and screen sizes affect your system? 16:58 - Why are systems in type important? 20:21 - How do you design a type system? Scott’s type system: /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links https://type-scale.com/ 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 are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Magic Bell - Sponsor MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks. 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 04:17 - All I Want for Christmas in React is: Suspense for data fetching On mount animations Unmount for me Single file components preventDefault shortcut Input to state mapping 09:45 - JS or Nay-s (or Both) Shout out to Pigeonhole Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python? Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces? Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines? Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri? Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger? Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors? Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte? Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine? 18:44 - Overrated / Underrated Deno ESM import from URL (no npm) Remix.run Xstate 27:49 - Hot Take Tweets https://twitter.com/wesbos/status/1336367385683636225 34:34 - Listener Questions Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance? Q: TypeScript all the things? Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.? Q: Can you share some exclusive BBQ tips? Q: What do you expect of Blitz.js in the next few years? Q: What’s the first node module you install in a brand new React project besides React itself? Q: Thoughts on using languages other than JS and TS with React like Kotlin? Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website? Links Watch the live recording of this episode: https://www.youtube.com/watch?v=8xJpxj6T1BQ Formik Mux Syntax Ep 206: State Machines, CSS and Animations with David K Piano Check My Hair - Wes Bos Houdini.How Rust Cloudinary LockPickingLawyer YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: VS Code color conversion extensions Wes: Acrylic lock picking kit 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

In this Hasty Treat, Scott and Wes talk about nothing — null, undefined, void, false, 0, ‘’, NaN, [], {}, never — all sorts of values that could mean the things that do not exist. 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 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 03:35 - Undefined Implicitly nothing A variable declared, but not set is undefined 04:25 - Null Explicitly nothing 04:41 - Null vs Undefined Null has a value of nothing Undefined does not have a value You can set variables to either If you want to set a score variable to nothing, set it to null If you want to un-set a value, set it to undefined == will check if a value is either null or undefined 05:35 - Void In Javascript You can pop void in front of calling a function and it will return undefined (even if that function returns a value) I’ve seen it on links that go nowhere (don’t do this — use a button) To prevent an arrow function from leaking onSubmit="javascript:void()" is a quick-n-easy prevent default on forms In Typescript Void is when you don’t care about what is returned from a function, or if nothing is returned A click handler that goes off and does stuff (side effect) can return void 09:15 - Never (in Typescript) Some functions will never return: Functions that throw errors Functions that have infinite loops Also, unreachable variables have a type of never if(true == false) { let var = 'this will never be true'; } 11:05 - Falsy values 0, -0, 0n false ‘’ (empty string) Empty array Is a value Its .length can be falsy Empty object Is a value Its object.keys(object) length can be falsy (0) 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 their predictions for 2021! 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 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. 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. Show Notes 02:06 - ESM Scott: It’s going to be big Snowpack Wes: Everything going forward should be ESM 05:44 - Wes: Remote work will grow Whole new talent pool opens up Whole new living situations open up 08:23 - Scott: Deno will grow Deno 101 for Web Developers 11:12 - Wes: Tooling will fade away Less setup, more behind the scenes Rome Deno Linter Formatter Transpiler Tester Parcel2 Snowpack Nextjs 14:14 - Scott: Greater usage of other languages to build Javascript esbuild Rust Go 19:35 - Wes: Programming communities will gain traction Github Discussions Forem Circle spectrum Discourse 23:25 - Scott: More WASM Mongo Spline 27:19 - Typescript Wes: Typescript will become more popular Scott: Tooling will get better VS Code 29:37 - React Scott: Scoped CSS in React will evolve SSR and hydration will be better Wes: People will fall out of love with React Or more magic will get added to React 32:52 - Scott: More web component frameworks Stencil 33:17 - Scott: Markdown and mdx-like frameworks will skyrocket in use 33:59 - Wes: Gatsby Hosted GraphQL / SSR / Render on demand Solve the pain of long build times Syntax 308: Gatsby vs Next.js in 2021 Next.js 35:24 - Scott: AR tech will grow Target AR app 36:38 - Wes: AI will become accessible Something as easy as a search result RTX Voice 38:43 - VS Code Scott: It will continue dominating Cloud and shared coding env will become better Figma Wes: Github Codespaces 40:18 - CSS Wes: Color functions More use of built-in features Scoped CSS Scott: People are going to love and use CSS variables Modern CSS Design Systems Course 42:39 - Serverless Scott: Ease of use will get better and better Wes: Netlify Vercel 45:30 - Wes: Enterprise Jamstack will become a thing Cloudflare hosting Next.js Gatsby Sapper SvelteKit 46:30 - PWAs might become more popular Apple will never want you to go around the app store ××× SIIIIICK ××× PIIIICKS ××× Scott: Ted Lasso Wes: Neewer Dimmable Bi-Color LED Shameless Plugs Scott: Deno 101 for Web Developers - 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

In this Hasty Treat, Scott and Wes talk about keyboard shortcuts, window management, and how to stay productive. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 03:54 - Karabiner-Elements 06:11 - Better Touch Tool 13:55 - ScreenFlow 17:52 - VS Code Shortcuts 21:20 - Text Expander 23:00 - Clipy Links Davinci Resolve Divvy Uberlayer Elgato Stream Deck iShowU Rocket Clipy source 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 2020 in review — predictions, hits and misses, hot tech, what they worked on, and more! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:43 - Predictions from 2020 CSS Subgrid CSS Houdini CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot’s of mobile issues. position:sticky - no IE at all NPM tink Installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need Yarn PnP / Yarn 2 Hard links to eliminate package duplication Shared cache across all projects Pika & Snowpack Deno React Suspense in more libraries Suspense for Server Rendering Meteor New ownership. v1.9 just dropped with lots of promise for future growth Svelte 3 Vue 3 Apollo 3.0 came out Fine grain cache control Hooks API Custom logic over how things are read and merged New dev tools Next.js 10.0 came out Images! Gatsby A single useQuery (made possible by suspense) Serverless Going to get easier Begin Next.js / Now Functions Headless CMS Thunderdome Sanity WordPress WPGraphQL Keystone Strapi RedwoodJS Blitz.js Cypress End to end testing We got Firefox support in 2020 Modulz Exports to JS component Figma Was already amazing in 2019 Constantly improving and adding new features Can import from Sketch Auto Layout Spline 42:24 - What other tech was hot in 2020? ES Modules is king We’re ready in the browser Node shipped stable Deno has it Snowpack Bundlers and tools Snowpack Vite Rollup made gains Rome GraphQL got way easier Battle of the Types Typescript Flow Reason Rust Wasm Viable to use Starting to exist in more real ways 52:53 - Working from home Remote work is hotter than ever Starlink is coming Webcams - Cam Link Discord Remote Pairing Live Share - I used VS Code with Jed from Keystone Tuple 57:13 - Code libraries React Query Alpine.js Stencil 59:25 - Personal / Professional updates Hard year for productivity Published more than 100 episodes of Syntax Links Syntax 216: Tech To Watch In 2020 Adam Argyle https://ishoudinireadyyet.com/ Syntax 212: Pika Pkg Fred Schott Level Up Tutorials: Deno 101 For Web Developers React Suspense Sapper How to Supercharge Your Productivity with GraphQL Tooling by Scott Tolinski Wes’ Master Gatsby Course Syntax 308: Gatsby vs Next.js in 2021 Syntax 299: Hasty Treat - Bundlers in 2020 https://github.com/ffmpegwasm/ffmpeg.wasm ××× SIIIIICK ××× PIIIICKS ××× Scott: Innr Bulbs Wes: Pendleton Weighted Blanket 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

In this Hasty Treat, Scott and Wes talk about how hosting and web services pricing works, and how to figure out what you need, and what you don’t. 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 01:55 - Per minute Spin up, do the work, spin down Popular in serverless space Can apply to other types of computing such as graphics, AI, machine learning, etc. 03:49 - By resources Ram CPU Disk space 06:02 - Per “dyno” These are Heroku Linux servers You can add more dynos and make your app faster They scale it for you 08:54 - By bandwidth Sitting files Inbound (ingress) Output 12:24 - By DB calls or entries Databases 14:04 - By users This is more of a Sass thing, but can bleed into hosting too Seat-based - Netlify does something like this 17:23 - By apps Digital Ocean app platform Each app is $5 21:22 - By “work” Cloudinary does transforms on images Mux Links Heroku AWS Digital Ocean Meteor Galaxy Linode Rackspace MediaTemple GoDaddy Bluehost Backblaze B2 Mux GraphQL Github Netlify 1Password Cloudinary Firefox Containers Chrome grouped tabs Brave Digital Ocean app platform Cloudflare Vercel Prisma 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

It’s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 00:47 - Roch Tolinski — You guys are doing a downtown job!!! 02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition? 10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro? 13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute. 19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains. 24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses? 31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version? 35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients? 39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen? 42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time. 44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this. 47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do? 53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved? Links https://isapplesiliconready.com/ https://github.com/ThatGuySam/doesitarm https://www.electronjs.org/blog/apple-silicon#how-does-it-work Missive VS Code Screenflow Figma Sketch Brew MongoDB iTerm2 Hyper Davinci Resolve https://remix.run/ React Router ExpressionEngine Keystone.js Advanced Custom Fields Dreamweaver Sapper Svelte https://svelte.dev/blog/whats-the-deal-with-sveltekit Rollup https://www.snowpack.dev/ Udemy Laravel https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys Vercel Netlify Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills? Design is a Job by Mike Monteiro ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Chameleon: Hollywood Con Queen 2: Q Clearance: The Hunt for QAnon Wes: truLOCAL Shameless Plugs Scott: Deno 101 For Web Developers - 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

In this Hasty Treat, Scott and Wes talk about the PS5 bot debacle, and how they would do it differently! 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 03:12 - Scott’s strategy Go to Reddit and refresh until someone posts a link and then GO GO GO Don’t buy on sites that allow simple bots to work TBH I don’t know how to code this type of bot and would prob end up accidentally buying a ton of stuff 05:06 - Wes’ strategy https://mcbroken.com/ You need a way to find out of there is stock Find out of there is an API endpoint you can hit (inspect element) If there is not, you’ll need to scrape the site. Fetch(url). text() Regex Cheerio Puppeteer (slower, easier to run) Save any data that you want in a database. Text-based database is great. Lowdb SQLite DynamoDB (if doing serverless) Re-run the scrape every N mins When there IS a match you can: Send a text message - Twilio Send an email - Postmark Try to fill out the form and submit it yourself document.querySelector() 11:35 - Things that get in the way Blocked IP Use a VPN Captcha or Cloudflare Run it on your local computer Use Puppeteer to get all cookies and headers Links https://twitter.com/bahamagician/status/1329430249151533066 stocktrack.ca 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 with Brian Leroux about severless, Deno, Typescript, and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. 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”. Guests Brian Leroux Show Notes 02:17 - What’s your background? 06:18 - What is serverless? Why is serverless so awesome? 14:07 - What changes from moving from an existing app to a new app? 16:15 - What is a cold start? 17:46 - What languages are suitable for serverless? 19:14 - What do you think about Deno? 24:23 - How does Architect work? 31:14 - What do you think about Typescript? 40:35 - Do you think websites should work without JavaScript? 44:51 - What about sharing code? Links Begin Architect Scott Tries Begin Lambda https://alephjs.org/ Deno Typescript Digital Ocean Azure Remix Svelte Puppeteer Yumda DynamoDB ××× SIIIIICK ××× PIIIICKS ××× Brian: Begin Fingerprinting Scott: Been Here For Too Long Wes: Grabber Tool Shameless Plugs Brian: Begin Proxy 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

In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it. 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 02:15 - The things we tried Zoom Breakout rooms Hopin - $$$ Streamyard 04:24 - What we used Discord Room as a waiting room Roles to give access An a/v room where Wes and Scott were hanging Lots of questions about Slack vs Discord OBS ObS to stream to three locations ObS Streamlabs does this easily Screen capture did a better job than using the video source from Discord Youtube, Youtube, and MUX Streamlabs can stream to 4 sources at once MUX How we got Syntax.fm/live to work Create a new live stream on Mux via their UI Get stream address and key Point Streamlabs to it HLS m3u8 address from Mux into a HLS react player Looping intro video Principle for mac Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY Music Song Scott wrote Recording Audio Wes recorded two streams locally All audio on stream was piped through BlackHole on Scott’s machine Used Loopback to pipe Discord audio into an input Scott + Guest were on the same channel, possibly compressed Sounded good! Links Zoom Hopin Streamyard Discord OBS MUX Slack Spectrum Streamlabs VLC Twitch react-hls-player Principal BlackHole Loopback 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 Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true? 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 03:34 - Server-rendered Both do server rendered Gatsby is gone at build time Next is done at build and on deploy 05:26 - Static generation getStaticProps() getServerSideProps() 08:25 - Re-rendering pages Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed. Gatsby-cloud Next.js has the revalidate flag that will re-render when stale 18:54 - Data management Gatsby has a built in GraphQL API feature with Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want. 23:16 - Client-side data Neither do anything, next. 26:33 - Dynamic Pages List of 100 shoes, each one gets a page List of four types of shoes: basketball, runners, casual, bowling, etc. List of 10 colors: each color gets its own page. List of 12 sizes, each size gets its own page. Now it gets complicated when you do this: Show me basketball shoes, in red, in size 5 600 pages minimum What about size 6+7? Then you get into having to fetch data on the client side - but all your data is in GraphQL?! The queries are different! Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794 30:41 - Routing Neither do nested routing still Both do folder based wrapper 34:50 - Hosting Anywhere 35:54 - Images Compression/resize Lazy loading SVG Blur up Next 10 released first revision of Next.js image It’s not as good as Gatbsy-image Must specify width and height, whereas gatsby has fixed and fluid Compression No blur up Yes lazy loading both don’t support gifs Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it Not for long! https://twitter.com/ascorbic/status/1320770231657238529 Next.js is just  Next does remote images Neither have quality or format auto like Cloudinary does Gatsby images have to be compressed at build time Next.js can do it on the fly assuming your server has the right tooling installed The GOLD STANDARD - https://gridsome.org/docs/images/ Lib authors need to give this a look https://twitter.com/mxstbr/status/1323279745275101184 https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image 46:20 - Server or Serverless Gatsby - none. You can do it with Netlify, Begin, AWS, Gatsby doesn’t care. Next.js - can do server with API routes. Can do serverless if you host on Vercel. 49:44 - SEO Tags Gatsby - Helmet Next - Head Sitemap Plugin for both 49:55 - Plugin Ecosystem Gatsby has lots of plugins that you install Next.js has some too. Seems Gatsby is easier in this regard because plugins can manage and normalize data into the GRaphQL Layer. 53:10 - Auth Neither do auth The first to do baked-in auth solution could get big gains. See Scott’s Svelte Meteor accounts set up. It good. https://github.com/leveluptuts/svelte-accounts-ui 55:00 - E-commerce Gatsby - options are mostly limited to Snipcart and Shopify like iframe drop in solutions where the majority of operations take place on another site and service. Next.js - hey released a starter boilerplate that leans on an existing headless cart https://rainierwatch.com/ Links Syntax 120: Gatsby vs Next Gatsby Next.js Svelte Meteor Vercel GraphQL https://www.swyx.io/react-sfcs-here/ React Query SWR React Router gatsby-image Cloudinary imgIX Begin Netlify https://reactioncommerce.com/ Shopify SnipCart WooCommerce ××× SIIIIICK ××× PIIIICKS ××× Scott: Cobra Drain Zip It Wes: Deli Containers: Mixed Boys Small Boys Medium Boys Large Boys Shameless Plugs Scott: Animating Svelte - Sign up for the year and save 25%! Wes: Advanced React Course - 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

In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components. 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 03:54 - Decouple the UI from the logic This wasn’t impossible with class-based components, but we started using HOC to do this. With hooks, it makes you decouple what it does and how it looks. Makes things like GraphQL code gen possible Multiple pieces of state or functionality Share commonly used functionality among projects and components 10:31 - Reduction in code Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.” 13:30 - useEffect’s dependencies These give you access to targeted control over side effects rather than just something changed. 14:15 - Easier to grok What happens? When? Where? It’s mostly in the hook. 16:09 - Simplicity in usage Thing, updateThing is more targeted than set state Ref makes way more sense with useRef String refs weren’t great, the function ref thing was obnoxious 21:07 - Gripes about Hooks Naming is kind of odd Vue did a better job with the names Links https://github.com/pmndrs/jotai https://github.com/rehooks https://twitter.com/youyuxi/status/1327328144525848577/photo/1 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

It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:17 - Home + Cooking Cold Brew Maker 1 Gal - https://amzn.to/3pcKkKM 2 Quart - https://amzn.to/3eIV921 Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit Precut parchment - https://amzn.to/35dtWld Gaffers Tape - https://amzn.to/3lfH7aG Tineco Pure S12 - https://amzn.to/3kelPsX Instant Read Thermometer - https://amzn.to/3k9VNHf Tea Haus - https://teahaus.com/ Whetstone - https://amzn.to/32nYi2z Re-usable Silicone Mats - https://amzn.to/35dtWld Air Fryer - https://amzn.to/38uX4X1 13:27 - Games Baba Is You Untitled Goose Game Hades Jackbox Party Pack 17:16 - Tech Headphones Sony WH1000XM4 - https://amzn.to/2Ube8c8 Bose QC35 - https://amzn.to/3lrKrQp Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html USB-C Hub - https://amzn.to/3keljem Black Camo Wicked Cushions - https://amzn.to/3eGQA8q Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3 Braided USB Cables Lightning: https://amzn.to/2IkqLiT USB-C: https://amzn.to/3lfrBeX 25:24 - Smart Home Wyze Cams - https://amzn.to/2UmPINf Light Switches Lutron Dimmer - https://amzn.to/2U7OBk2 Leviton Dimmer: https://amzn.to/3pbzaFZ Google Nest Hub 33:22 - Desk Stuff Fatigue Mat - https://amzn.to/3eIXXw5 Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ MX3 Mouse - https://amzn.to/3lg8SQn Wireless Charger Pad - https://amzn.to/36gIdNj Anker USB charging Hub - https://amzn.to/3n7IGYV 36:43 - Live Streaming / Sick WFH Setups Elgato Stream Deck - https://amzn.to/35ehXnk Elgato Camlink - https://amzn.to/3kih6Gl Knockoff Camlink - https://amzn.to/3eIX0Ux Husky Adjustable Desk: https://www.homedepot.com/p/Husky-62-in-Adjustable-Height-Work-Bench-Table-HOLT62XDB12/301810799 Neewer Dimmable Bi-Color LED Studio Key - https://amzn.to/32rYAVX RGB LED - https://amzn.to/3kg1LWZ Vivo Pneumatic Mic Arm - https://amzn.to/2Ube8c8 49:07 - Fitness Concept 2 Rower Powerblocks Cheap bands - https://amzn.to/35cZ1W4 Kettle Bells - https://amzn.to/3eFocnc 51:44 - Clothes https://www.dvlpr.io/ Naked and Famous Super Guy Jeans https://huckberry.com/ https://shop.lululemon.com/p/men-joggers/Abc-Jogger/_/prod8530240?color=29283 Everlane Uniform Crewneck Levis Denim Shirts: Barstow Western Fjallraven Flannels Links https://www.eufylife.com/ 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

In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages. 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 03:46 - What are conventional commits? https://www.conventionalcommits.org/en/v1.0.0/ 04:55 - How do you keep track of all the details? https://commitizen-tools.github.io/commitizen/ https://github.com/commitizen/cz-cli https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits 07:42 - How does it relate to SemVer? Links https://github.com/conventional-changelog/conventional-changelog https://github.com/netflix/unleash Deno 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

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, 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 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow. 03:20 - Which JS library/framework do you think beginners might find the easiest to understand? 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere? 09:23 - My question is about the difference between a framework and a library. Should we have two separate words? 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas. 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library? 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects? 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored? 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something? 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website? 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER. 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.) 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev? 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)? 54:20 - What’s your approach for handling padding + margin with components? 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do? 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines? Links Syntax 002: Webcam and audio access with WebRTC and getUserMedia() Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy Daily.co Twilio Svelte https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case Master Gatsby Syntax 292: How to Make Freelancing Easier https://github.com/formium/tsdx https://nx.dev/react https://github.com/lerna/lerna https://www.npmjs.com/package/babel-plugin-module-resolver Deno Rust wasm-pack https://rocket.rs/ Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More! Modern CSS Layouts Modern CSS Design Systems Digital Ocean App Platform ××× SIIIIICK ××× PIIIICKS ××× Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook Wes: Levi’s Barstow Western Shirt Shameless Plugs Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%! Wes: Master Gatsby - Black Friday Sale: All courses 50% 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

In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:49 - Wes’ story 06:28 - What is the role of client-side validation? Help the user input the correct data as they type it. Show correct data in UI. Show correct UI. Just about all of these things are for the user’s benefit, and how they feel when using the site. 11:10 - What is the role of server-side validation? Validate that all the data is correct before it’s saved to the database Security first and foremost 15:03 - What process should a store follow to validate on the server? Check that correct types are coming in. Very easy with Graphql. Get current stock and price information from unique ids from the database. Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user. 17:17 - What do you do if you don’t want people messing with your React state? @fvilers/disable-react-devtools if (process.env.NODE_ENV === 'production') disableReactDevTools() We do this on LUT. Why? Because it’s a deterrent. Links uses.tech Flipp App GraphQL 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 with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Guests Benjamin Dunphy Show Notes 03:48 - How do you get started running a conference? 10:05 - Which conferences have you run? 18:05 - How do you get speakers? 23:21 - What about paying speakers? 28:26 - Speaker goody bags? 32:40 - You started your own catering company? 35:32 - How has Coronavirus affected the conference space? 43:06 - Should online conferences try to replicate live conferences? Links Reactathon Jamstackconf Epicodus Meetup Flutter Lifted Plate DevRelCon EventLoop Modern Web Summit @Swizec Sanity Review Changes @tylermcginnis Syntax 250: Scott Teaches Wes Svelte and Sapper ××× SIIIIICK ××× PIIIICKS ××× Ben: Serverless Handbook for Frontend Engineers Scott: Tineco Pure One S12 Wes: Chromecast Shameless Plugs Ben: EventLoop Modern Web Summit Scott: Animating Svelte - Sign up for the year and save 50%! 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

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long. 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 04:33 - The spec https://drafts.csswg.org/css-grid-3/ https://twitter.com/wesbos/status/1320735900343668738 06:10 - How it works masonry-auto-flow: next; It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry. 09:06 - The implicit grid https://drafts.csswg.org/css-grid-3/#%23implicit-grid The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis. Interesting in a column situation (see images). 13:25 - Thoughts Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS. Links David DeSandro https://metafizzy.co/ Chris Coyier https://caniuse.com/ Isotope Flickity 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

It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners. 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”. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 03:30 - How is this going to work? Ask a Potluck Question Do a Sick Pick Take on a Stump’d Question Do a Shameless Plug 04:45 - Brad https://bradgarropy.com/ Sick Pick: Rogue Fitness Weighted Vests Shameless Plug: Murphy 11:54 - Brittany Shameless Plug: ZTM Academy Andrei Neagoie 16:43 - Jesse Stump’d Question: What are portals in React? Shameless Plug: codeSTACKr YouTube Channel Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount 23:44 - Henri Shameless Plug: https://twitter.com/HenriHelvetica Shameless Plug: JamstackTORONTO 31:27 - Jason Stump’d Question: What does “use strict” do and what are the benefits? 36:48 - Spence mdx-embed https://github.com/PaulieScanlon/mdx-embed 41:33 - James Potluck Question: How do you keep people engaged in a workshop? Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators? Shameless Plug: YouTube for Developers Shameless Plug: James Q Quick YouTube Channel 54:24 - Austin Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together Shameless Plug: https://erickka.art/ 66:21 - Dave Sick Pick: mmhmm Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS? 78:56 - Gareth Potluck Question: What do you think about the future of mobile development vs traditional mobile app development? Sick Pick: https://darkreader.org/ Shameless Plug: Level Up Tutorials Discord 89:51 - Ackzell and Lewis Ackzell: Sick Pick: JSConf Mexico Shameless Plug: Ackzell YouTube Channel Lewis: Potluck Question: What is your daily routine like, and you do you decide to prioritize projects? Links What Syntax 300 live on Twitch Discord Mux React HLS Player https://30secondsofinterviews.org/ https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek https://madewithsvelte.com/mdsvex OBS Streamlabs ESLint Prettier Missive Shameless Plugs Scott: Level Up Pro - 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

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more! 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 02:39 - What is a bundler? On the one hand, you can write HTML, CSS and JavaScript and open it in the browser On the other hand, your build could be super complex 03:24 - What goes into configuring a bundler? Templating language you use (Jsx, Pug, Vue, etc.) JavaScript you write and compile to: ES6/7/8/9 Typescript CoffeeScript Polyfills Environmental variables CSS loading Image compression Asset Chunking Tree shaking 05:12 - Webpack Hardest to learn, most used currently 07:38 - Rollup Scott’s pick as best option for most features vs ease of use Very powerful Mmmr, tree shaking, plugins, esm 09:52 - Parcel Scott’s simplicity winner pick Easiest to get started with It’s a bundler, but also a dev tool Hot reload Local server Config is done via your package.json Lots of plugins available 12:01 - Npm, Yarn and Yarn 2 It’s a dependency installer rather than a bundler 13:27 - Snowpack Scott’s speed pick of the week Uses ESM by default Like Sonic after a triple shot of espresso HRM Perfect for dev builds, as well as production builds 15:51 - Isobuild / Meteor Scott’s underdog pick of the litter 16:48 - Rome Scott’s mystery pick of the week New tool to do it all Bundler, but also a linter 17:54 - Deno Linter Typescript formatter Bundler (bundle into a single .js file) 20:44 - Let your tool take care of it Gatsby (webpack) Next.js (webpack) Gridsome Create React App Vite (Rollup) Broccoli.js Links Babel Gulp Syntax 212: Pika Pkg Fred Schott Pika Rust Go Software Engineering Daily: Deno and TypeScript with Elio Rivero 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 with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, 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”. Guests Josh Comeau Show Notes 01:48 - What is your background? 04:33 - Coding with your voice 08:32 - How do you code for a living if you can only do it for a few minutes a day? 21:56 - How has it impacted your productivity? 22:46 - Is it easier with a typed language like Typescript? 26:05 - What about accessibility? 27:14 - How good is the eye tracker? 29:30 - What got you into animation? 35:29 - Favorite app for animations? 40:12 - Being a teacher 41:44 - Is it worth going to a bootcamp? 44:57 - Interactivity in teaching Links joshwcomeau.com @concordia_btcmp @gatsbyjs @khanacademy @unsplash Talon Using Python to Code by Voice Neuralink Tobii 5 Moleskine Apps VLC VSCode freeCodeCamp Syntax 246: Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne https://joshwcomeau.com/css/full-bleed/ Nintendo Switch Navigator.vibrate Voice Driven Development ××× SIIIIICK ××× PIIIICKS ××× Josh: The Utterly Uninteresting and Unadventurous Tales of Fred, the Vampire Accountant Scott: The Neighborhood Listen Wes: Every Tool’s a Hammer by Adam Savage Shameless Plugs Josh: CSS for Javascript Developers | An online course that teaches the fundamentals of CSS for React/Vue devs Scott: Animating Svelte - Sign up for the year and save 25%! Wes: Master Gatsby - 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

In this Hasty Treat, Scott and Wes talk about web dev certifications — are they worth it, or a waste of time? 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 02:12 - Certifications 05:30 - We have standards, and people move faster than standards. jQuery moved faster than vanilla JS Typescript is sometimes preferred over regular JS We have universities that offer web developer certs and many of them are a joke The point is that programming is the wild west — it’s far too broad and moves far too fast for us to try and fit it in a box 10:28 - Do certifications mean anything? 14:30 - How do you know if you have enough skills (when you’re job hunting)? 19:04 - Some jobs do require a certification AWS Google Links https://openjsf.org/certification/ https://www.sentiatechblog.com/imposter-syndrome-how-to-display-front-end https://twitter.com/wesbos/status/1318192217824124928 https://twitter.com/photonstorm/status/1318193404312944641 https://twitter.com/Ky1e_S/status/1318193954085634048 https://twitter.com/ArleyM/status/1318194323821912067 https://twitter.com/ajitbohra/status/1318194600335470592 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 are back for another episode of spooky web dev stories — listener-submitted stories about web dev gone wrong. 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. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 03:28 - Jack Rhysider Story 06:28 - Dirty Dicks JSON 08:23 - CMS Disaster 10:58 - Oh No Hotel 11:19 - FTP 12:19 - Push Notification Hell 13:16 - DVD Nightmare 15:15 - Bad Words Again 16:23 - Mo Money 17:01 - Bass Ackwards 18:17 - Taxi Coding 19:36 - Bad Env 21:30 - Login As 21:50 - Email Subscribers Plugin 22:33 - 1 in 300 Chance of the C-Word 24:24 - Production Target 26:12 - A Happy SEO Ending 28:26 - Just Oof 29:48 - I’ve Fallen and I Can’t Get Up 30:54 - Crypto 32:34 - rm -rf 33:42 - Never Deploy on Fridays 35:31 - Million Dollar Scramble 36:22 - Deleting Production 37:11 - 500,000 Concurrent Problems 39:14 - Deleting a Government Website 40:36 - You Ruined the Surprise! 45:23 - Mr. D Hole 46:48 - One Expensive Race Condition 48:43 - Yikes 51:11 - Always Be Closing 51:44 - Adidas - All Day I Delete A Site Links @JackRhysider Darknet Diaries Podcast ExpressionEngine #ghosts chefkoch.de Sendgrid Magento Evite ××× SIIIIICK ××× PIIIICKS ××× Scott: Fastify Wes: 🇨🇦 Mr Chefer Meat Thermometer 🇺🇸 Mr Chefer Meat Thermometer Shameless Plugs Scott: Level Up Pro - 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

In this Hasty Treat, Scott and Wes talk about Temporal Date Objects in JavaScript — a WICKED AWESOME API for working with times and dates. 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 05:11 - Temporal Now You can get now Temporal.now.___ 07:58 - Temporal Instants A Temporal.Instant represents a fixed point in time, without regard to calendar or location. Most common way to show it is nanoseconds since unix epoch. Can be formatted a few different ways. 09:59 - Calendar Support for different types of calendars 11:43 - Durations Temporal.Duration There are .from and .add and subtract() methods 12:47 - Other interesting parts Timezones Temporal.ZonedDateTime Temporal.YearMonth - represents a ym = new Temporal.YearMonth(2019, 6) // => 2019-06 14:51 - Polyfill (unstable) Links Fixing JavaScrip Date - Maggie Pint https://github.com/tc39/proposal-temporal https://github.com/tc39/proposal-temporal/blob/main/docs/calendar.md#methods https://github.com/tc39/proposal-temporal/blob/main/docs/duration.md 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 spooky web dev stories — listener-submitted stories about web dev gone wrong. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. 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 03:12 - The Most Expensive Boolean Ever 06:19 - An Actual Logging Issue 09:37 - Snitches Get Stitches 10:41 - The Spooky Office Skeleton 12:04 - Prevent the Default of Making Money 13:52 - Computer Magic Trick 14:42 - Update Score 15:59 - Change Reaction 19:30 - Personal Mongodb 20:26 - Hello Rob! 22:08 - SSN Regex 23:06 - WordPress Plugins 23:52 - Loggin Ya In, Ya F’in Dummy 24:58 - A Hostel Coding Environment 25:59 - A Graceful Exit 27:27 - Favicon DDOS 28:07 - Common Cents 29:03 - Open Source Vendors 33:04 - Don’t Leave the Country 35:09 - Apostrophe Catastrophe 35:43 - Env 36:05 - A Christmas Miracle 36:43 - The One Million Dollar Bill 39:00 - The Hacker Who Dropped the DB 40:19 - The Tech Lead Who Uses Alert Statements 46:14 - Lorem Ipsum 46:58 - Malicious Compliance Links Indigo.ca r/MaliciousCompliance ××× SIIIIICK ××× PIIIICKS ××× Scott: Hades Game Wes: LED Flame Bulb Smaller LED Flame Bulbs Shameless Plugs Scott: Animating Svelte - Sign up for the year and save 25%! Wes: Master Gatsby - 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

In this Hasty Treat, Scott and Wes talk about stretching for developers — techniques, misconceptions, and how to feel better. 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 03:21 - Devs do the following Head forward looking at screen Shoulders forward Sitting a lot Weak core Carpel tunnel from typing 06:02 - Stretching misconceptions Static holds Dynamic controlled movements first and foremost 07:52 - Stretches to help Dynamic twists Cat / Cow Flat down / Curl up spine Arm hang to decompress spine Wrist stretches and strengthening for carpel tunnel Horse stance at standing desk to be office weird person Shoulder circles Doorway stretches 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 how to make freelancing easier — how to avoid burnout, and tips and tricks to make it successful. 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”. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:15 - Code Use starters and resets and component libraries Don’t build in something you don’t know, unless you have time and budget to do so — WP is good enough for most projects Feel free to go over time on projects if you are learning something new Re-use code from project to project Target similar types of clients 13:09 - Communication Often, clear and frequent People won’t be mad for being too informed — just know when to leave out the technical jargon Clients typically don’t care about Git, React, etc. — they care about results Don’t overwhelm them Train your clients that you aren’t available 24/7 22:19 - Time management Set calendar alerts early and often to not miss communications Set meetings at 9am, don’t wait around all day for meetings Block off large amounts of time for dev — you won’t be able to get meaningful work done in one-hour slots 27:54 - Contracts + quoting Have a boilerplate contract that you can just fill in Same for a quote Value-based billing 33:47 - Billing + taxes Don’t be shy when talking about money. Be clear on what you need, when you need it, and on what terms. This is business. This is your art, but it’s also your business Pay quarterly taxes - most likely Or don’t and take the small hit — then you can pay once a year Put taxes into another account if you aren’t good with money Get a billing management system or get an accountant — you need to focus on working on code Wave Apps, Xero, Freshbooks 42:03 - Marketing Be loud — people need to know what you offer The best marketing is a referral from a previous client If you show up, return emails and do a good job, you’ll kill it Show people what you are excited about: blog posts, videos, tweets, etc. Go where your clients are: Do you want to be serving small businesses? Family and friends Do you want to be a hired gun for a technical team? Conferences/Twitter, blog posts 48:25 - Final thoughts Scott — It’s ok if freelancing isn’t for you. Not everyone is great at all of these factors, myself included. However, with practice, you can be your own boss, work on your own terms, and make money. Also, don’t be afraid to take on longer contracts with established teams and companies. Wes — Freelancing can be a great filler between jobs or career transitions. Links Syntax 117: Hasty Treat - How To Email Busy People Freshbooks - Breaking the Time Barrier Design Is a Job - Mike Monteiro Wave Xero Freshbooks ××× SIIIIICK ××× PIIIICKS ××× Scott: Displaced Gamers YouTube Channel Wes: Battery Adapter for DeWALT 20V Max 18v Dock Power Connector Shameless Plugs Scott: React For Everyone - Sign up for the year and save 25%! Wes: Master Gatsby - 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

In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them. 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 01:54 - The problem This only affects the client-side 05:28 - What are some solutions: Do nothing and hope the user refreshes. Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available: Prompt the user to refresh Just refresh the user (store current state in localstorage and restore) Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link. Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user. Hot code push. Vuepress has “hot reloading” baked in. Links https://twitter.com/wesbos/status/1306969658751361024 Notion Vuepress Meteor 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

It’s another potluck! In this episode, Scott and Wes answer your questions about getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, 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 01:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack? 03:48 - Why did you not mention Stencil when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it? Example of a stencil component: import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-first-component', }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() { return ( My name is {this.name} ); } } 06:12 - Is https://www.syntax.fm supposed to not work? I get a 404. 07:34 - I’m wondering what advice you’d have for someone self-taught switching from a totally non-tech industry (non profit arts, in my case) where I work in a tech role. I’ve hustled and built a portfolio of projects and learned a ton from both of your courses, but I feel that my experience is seen as less valuable because I don’t work in a traditional software/web development environment. Any tips for getting over the final hurdle of getting a dev job? 11:11 - What makes a software engineer senior? 13:08 - I have a Gatsby / Netlify client project about to launch. What’s the best approach in handing over to the (non technical) client? Do I keep in my Github account and just give the client the Netlify CMS login, or create the a Github account for the client that I can access for any maintenance? What do other devs do? 17:55 - I recently blocked all cookies on my mobile browser (Google Chrome), and I noticed something weird. A couple of sites that I know for a fact to have been built using NextJS weren’t working as expected (surprise surprise). They would load as usual, and after a second or so, all the content on the page disappeared, with the error message “sorry: an unexpected error has occurred”. In some cases, the error was printed in the site’s font, and with the same background color on the body. Why does blocking cookies do this to NextJS sites? 21:21 - How often do you make commits? I always hear, “commit often”, but I am hesitant because I feel like I may change my code later on before I make a pull request? I really liked your episode on Git Fundamentals, I would love to see a tutorial/deep dive into Git workflows and practices (when to commit / how often) Should I commit even though I know what I’m working on isn’t complete or I need to refactor it?? What is code review etiquette? 26:59 - Wes, how do you handle captioning and transcripts on your courses? Do you use some tool or service for that or do you do it by hand? 31:11 - I am a recent graduate of a code school that focused on React and Rails. The company that I currently work for uses Angular for part of their stack. I eventually would like to move into a dev spot, but I am finding that Angular feels a bit stuffy and I am not as excited about it as React, Svelte, Vue, etc. I am afraid that if I dive into Angular, I will become less relevant down the road. I want to learn everything, but I only have so much time and don’t want to stunt my growth as a developer. Any thoughts or advice on this would be sick! 36:38 - How do you handle SVGs in React? I know that SVGR exists, but I’d like to avoid adding another dependency if it’s something I can roll on my own. In the past, I’ve created functions that take parameters like fill or stroke to control color, and return a string of SVG code with the arguments interpolated in. Then I place that string into a component using dangerouslySetInnerHTML. I haven’t seen this method used anywhere else, and is probably not best practice. But also, it works, so maybe it’s fine? 39:52 - What social media platforms should you use as a Dev? What is cool to have? What are their benefits? 48:14 - Have you tried an ultrawide monitor for coding, such as 34" or 38"? I feel the extra width would be great for a single monitor setup, but haven’t been able to see one live where I live. Links Syntax 269: Hasty Treat - Target=_blank security issue? What’s the deal with noopener and noreferrer? Syntax 280: Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More! 8 Mile Syntax 286: Git Fundamentals Rev Angular React Svelte SVGR LevelUp Tuts Discord Dev.to freeCodeCamp ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Knife Cleaner 2: Scraper 3: Chainmail Scrubber Wes: Scriptable App Shameless Plugs Scott: ReactJS For Everyone - Sign up for the year and save 25%! Wes: Master Gatsby Course - 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

In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in JavaScript. 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 03:11 - What are enums? A type restricting variables to one value from a predefined set of constants Direction = UP / DOWN / LEFT / RIGHT Role = ADMIN EDITOR AUTHOR VIEWER Day of the Week 05:12 - In GraphQL enum Role { ADMIN EDITOR AUTHOR VIEWER} Then 07:05 - In TypeScript First, declare the type: enum direction = { UP, DOWN, LEFT, RIGHT } Then when you defined your function, use that type type User { role: Role } or type User { role: [Role] } 08:49 - In JavaScript Not in JS yet There is a proposal in stage 1 https://github.com/rbuckton/proposal-enum And a babel plugin: https://www.npmjs.com/package/babel-plugin-const-enum Can use case/switch Can use Object or Map keys Links Syntax 287: Hasty Treat - Records and Tuples in 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

In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, 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. 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. Show Notes 03:00 - iFrames Sidebar menu target 05:42 - JavaScript image hovers Dreamweaver Photoshop Slice and Select Tool 08:24 - CSS Pie 09:42 - Animated gifs of people and construction http://textfiles.com/underconstruction/ 11:20 - CSS Zoom 1 / IE CSS Hacks Forced IE 7 to redraw floats 13:42 - Layout trends 800x600 fixed websites 960gs Golden Grid 12-col grid creators 16:26 - Sprite maps Spritecow ☠️ Killed icon fonts ☠️ Killed by SVG icons 18:40 - Firebug and Firebug Lite Lite was a bookmarklet 20:14 - Image maps / Background gradients 1px wide and 2000px tall image to make repeating gradients Squidfingers Subtle Patterns Hero Patterns CSS3 Patterns 25:53 - Web rings 27:41 - Glossy buttons 28:09 - Flaming text FlamingText.com 30:01 - Marquee tags Staggered Speed attribute 31:26 - Spacer gifs 34:30 - AngelFire / GeoCities 36:11 - Xanga / LiveJournal 37:29 - Above the fold content Abovethefold.fyi 39:36 - Homestar Runner Links Drupal Omega theme Syntax 032: Designing, Templating, Inlining and Sending Email Mailchimp Litmus Email on Acid Herman Miller Aeron ××× SIIIIICK ××× PIIIICKS ××× Scott: New Rustacean Podcast Wes: Autonomous Ergo Chair Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Master Gatsby - 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

In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more! 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 ??? - 02:42 - Immutability 05:08 - Records Immutable object Syntax #{x: 1, y: 2} 05:56 - Tuples Immutable array Syntax #[1,2,3,4] 07:18 - For both Referred to as a compound primitive Can contain only primitives, not objects They are compared deeply by their contents rather than their identity assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 }); Potential for optimizations Optimizations for making deep equality checks fast Optimizations for manipulating data structures Works well with type systems Better integration with the debugger Accessed through normal record.scott object like syntax 13:39 - Stage 2 Links https://github.com/tc39/proposal-record-tuple 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 Git fundamentals — what it is, why you need it, best practices, and more! 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”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - What is Git? 04:16 - Why do you need it? 06:31 - UI vs command line 09:03 - Commands 101 https://git-scm.com/ init .gitignore file is key right off the bat add add -p - quick review of all the changes you’ve made commit Multiple adds and commits Commit messages should be descriptive push What are origins? pull clone checkout merge fetch stash fork Merge vs pull request Git vs GitHub / Alternatives Bitbucket GitLab 44:25 - Common issues Merge conflicts Files being tracked unintentionally “How do I delete file from GitHub?” git rm -r alias gri="git ls-files --ignored --exclude-standard | xargs -0 git rm -r" Databases in Git? 49:10 - Git clients https://git-scm.com/downloads/guis CLI “Hub” Github CLI GitHub desktop app VS Code integration Source tree Kraken Tower Links VS Code GitLens GitHub Bitbucket GitLab Drupal GitKraken Tower ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: Yeti Products Shameless Plugs Scott: React For Everybody - Sign up for the year and save 25%! Wes: Master Gatsby - 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

In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically. 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 Wes: First money: check for $300 First website: Pool company First ad sense income: Craigonomics First YouTube: import large SQL database with bigdump First online Product: Sublime Text - Ryan Christiani First in-person teaching: HackerYou First project at agency: Jet Cooper Scott: First dev gig: parents tea store First design gig: Perpetual First YouTube video: Adobe Premier 101 First BIG YouTube video: Sass Tutorials First ad sense income: scotttolinski.com blog post about music promotion sites First online product: Sass Mastery First project at agency: Nu Step Links https://twitter.com/wesbos/status/1276500155789910016 Audiojungle Themeforest Juno College @steveschoger Smashing Mag Css Tricks Packt Publishing 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 writing good CSS. 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. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:11 - Frameworks Utility: Tailwind, Taycons, Bulma Frameworks: Foundation, Bootstrap Classless base starters: https://github.com/dbohdan/classless-css HTML5 UP / A template 13:37 - Preprocessors Sass Stylus Less Regular CSS Variables Color functions - not yet 19:42 - Tools PostCSS is like Babel for CSS. Some good plugins: https://github.com/postcss/postcss#plugins CSS min/max for clamp Autoprefixer Autoreset - reset a component Gap instead of grid-gap Simple-vars Postcss-modules SugarSS Preset env 34:19 - Stylint Stylint More than just a basic linter Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable 36:37 - Removing unwanted CSS PurgeCSS - Tailwind uses this PurifyCSS 41:17 - Writing maintainable CSS / scoping solutions Component-based CSS Modules Naming Convention Based BEM SMACSS CSS Variables Powerful when utilized with things like calc() to avoid out of sync values Know which browsers you need to support Links Syntax 197: Hasty Treat - Tips For Writing Good CSS Compass Susy Grunt Gulp Linaria Astroturf Houdini Svelte Syntax Highlight Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Rustlings Wes: Class Action Park Documentary Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Master Gatsby - 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

In this Hasty Treat, Scott and Wes talk about time block planning — what it is and how it can help you increase your productivity! 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 01:50 - What is time block planning 03:12 - How TBP has helped Scott stay focused 04:46 - How it helps family life 05:57 - How to plan your week 11:00 - How to deal with setbacks Links Cal Newport Todoist Deep Work Deep 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

In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, 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 04:28 - Float-based layouts Clearfix ☠️ Killed by Flexbox, and then Grid 09:29 - Loading Screens: Two websites - one flash and one HTML Splash screen 11:22 - Hit counters 12:28 - Guestbooks 13:28 - Flash 3rd party player Media dragged its feet FOREVER ☠️ Killed by Steve Jobs 18:46 - Fonts The Golden Layout Cufon / sIFR / Images of text Typekit ☠️ Killed by font-face 24:15 - Folder-based version control ☠️ Killed by Git 26:22 - FTP ☠️ Killed by Git, then many other things 28:40 - CSS Zen Garden CSS Zen Garden ☠️ Killed by CSS being better 32:02 - TextMate Coda Notepad++ Adobe GoLive FrontPage Macromedia / Dreamweaver ☠️ Killed by Sublime Text, then VSCode 33:58 - Sliding doors A technique for rounded corners on buttons ☠️ Killed by CSS 35:29 - PNG Fix ☠️ Killed by the death of IE6 37:53 - 9-Panel layouts ☠️ Killed by CSS 39:20 - CSS 3 Please CSS 3 Please Paul Irish ☠️ Killed by modern CSS Links Silverlight Chris Coyier ××× SIIIIICK ××× PIIIICKS ××× Scott: Fancierstudio 600 LED Light Panel Kit Wes: Allen Key Drill Bit Set Shameless Plugs Scott: React 3D and Advanced Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Master Gatsby Course - 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

In this Hasty Treat, Scott and Wes talk about home offices, backyard offices, costs, and pros and cons! 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 03:40 - Structure options: Existing sheds Build your own likely not allowed Drop-in offices Rubbermaid shed 07:18 - Electrical 07:58 - Insulation 09:01 - Heating 11:30 - Cooling 16:01 - Interior 16:42 - WiFi 17:12 - Costs ~ $4k Electrical - $2k Flooring - $600 Paneling- $900 AC - $1000 Fan - $100 Links https://twitter.com/bradwestfall/status/1284299864210210817 https://bradfrost.com/blog/post/brad-frost-web-headquarters/ Technology Connections - Space Heater Nonsense Technology Connections - Personal “air conditioners” aren’t what they seem Technology Connections - Cassette adapters are remarkably simple Caldigit Ubiquity Outdoor Access Point 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

It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, and more! 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”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:15 - What are your guy’s thoughts on Mozzila’s layoffs and how it will affect developers? 08:42 - Right now I am a math teacher. I am married with 2 kids (3 and 1) so finding time to code is difficult. My current situation includes waking up at 4:30 am everyday just to get in some time before the kids wake up. Do either of you have any tips about finding a balance between raising kids, getting stuff done around the house, having a full time job and trying to teach yourself web development to transition into a different career? 13:23 - If you had to use a drag-n-drop framework using React, which one would you choose? 15:49 - E2E vs Visual Regression Testing? At which web-app development cycle to implement each? Best tools open source vs purchase? 20:36 - I teach a Highschool course in web development. For a group of students who have a solid knowledge of HTML/CSS and a decent understanding of JavaScript, would Svelte be a good framework for entering into component-based development for the first time? 22:33 - What’s a good Google Analytics alternative in 2020? I have a site on Netlify that the $9/mo seems a bit steep for, for what the site is, and flipping the domain through Cloudflare just for the analytics seems crazy; but is it worth it? Alternatives would be awesome, as I’d love to get off the Google overlords. 29:22 - I have noticed about a dozen to 100 unique clones of my git repos after each push. It doesn’t matter if the repo is initialized, picture added or the readme updated. The repos are still cloned. The traffic section shows the views to my repo at 1 sometimes 2. Is this normal? Is this how interested employers keep tabs on you? Are there a lot of malicious git users? What is happening? 32:30 - With Apple switching to their own processors is it silly for anyone to buy a Mac for development before that releases? Do you guys have experience with Windows, and which would you still prefer today if you needed to buy? 40:28 - Have you ever been approached by or heard of GitAds.io? They’re trying to pay developers to put ads onto popular open source libraries on Github, and they approached me recently, and I wasn’t sure what to think about them. What do you think? 45:16 - I just listened to your TLD game. It made me wonder your opinions on personal site domain names? Should it always try to be yourname.dev? What about .me or other domains? 47:53 - What’s the best way to introduce new technology or processes to a team? Links Rust Firefox MDN Jen Simmons Safari React DnD React Beautiful DnD React Spring Framer Motion Cypress Percy.io Svelte Heap Fathom GitAds.io .TECH Syntax 179: Hasty Treat - The TLD Game Javascript30 Syntax 206: Hasty Treat - The New MacBook Pro for Web Development ××× SIIIIICK ××× PIIIICKS ××× Scott: Turbo Boost Switcher for Mac OS X Wes: Roller Blade Wheels for your chair Shameless Plugs Scott: React 3D - Sign up for the year and save 25%! Wes: Master Gatsby 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 Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming. 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 01:32 - Plans for the Fall 06:59 - Fav Hasty Scott Ep 161: Hasty Treat - VSCode Extensions & Themes Ep 165: Hasty Treat - VSCode Treats Part 2 Ep 167: Hasty Treat - VSCode Love Part 3 Ep 277: Hasty Treat - 5 Things That Make Your Site Slow Wes Ep 211: Hasty Treat - Modules in Node 08:55 - Fav Tasty Scott Ep 236: Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout Ep 250: Scott Teaches Wes Svelte and Sapper Wes Ep 224: Serverless / Cloud Functions - Part 1 Ep 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy 10:22 - Top Episodes of 2020 10: Ep 214: 2020 Fitness 09: Ep 228: More on Severless - Databases × Files × Secrets × Auth × More! 08: Ep 220: The Synology Show - Backups and Home Server 07: Ep 222: Are Web Dev GUIs Going to Replace Us? 06: Ep 210: Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More! 05: Ep 212: Pika Pkg 04: Ep 224: Serverless / Cloud Functions Part 1 03: Ep 218: Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More! 02: Ep 226: Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More! 01: Ep 216: Tech to Watch in 2020 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

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it. 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind? 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions? 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why? 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :) 30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out. 34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again? 38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects? 40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc. 46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful? 48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness? Links https://github.com/jxnblk/mdx-deck https://mdsvex.com/ Spectacle MDsveX Vue.js Redux VueX Better Comments Kap Redwood.js Blitz.js GraphQL https://github.com/ryanmcdermott/clean-code-javascript ××× SIIIIICK ××× PIIIICKS ××× Scott: Easy Snippet Wes: WOW Pool Noodles 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

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. 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 03:28 - What is the difference between HTML and React event handling? 05:55 - What are JavaScript data types? 07:00 - In which states can a Promise be? 07:48 - Discuss the differences between an HTML specification and a browser’s implementation thereof. 09:14 - What is a stateless component? 10:10 - What is a pure function? 10:51 - What is the output of the following code? const a = [1, 2, 3] const b = [1, 2, 3] const c = "1,2,3" console.log(a == c) console.log(a == b) 13:35 - What is memoization? 15:15 - How do you pass an argument to an event handler in React? 15:59 - What is HTML5 Web Storage? Explain localStorage and sessionStorage. Links 30 Seconds of Interviews 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

It’s another potluck! In this episode, Scott and Wes answer your questions about React subscriptions, ES Modules in Node, how to cook a chicken thigh, being a good dad and more! 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”. Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That’s why Stackbit is the best way to Jamstack. stackbit.com. Show Notes 02:11 - What are “subscriptions” in React, or in programming in general? The React docs mention that setting up a subscription is an example of a side effect, but what exactly is a subscription, and how do you set one up? 05:43 - Using the latest node esm imports, is it possible to use aliases? Using the old require() syntax I used the npm package module-alias (https://www.npmjs.com/package/module-alias), but I cannot seem to find a solution for node v14 imports. In a deeply nested file, I find the import ‘…/…/…/some/folder’ syntax to be awful compared to require(’@/some/folder’). 09:20 - I’ve been a full-time developer for over 10 years and my company has a fairly flat hierarchy. I want to take on more responsibility (and salary) but my company doesn’t have anything like a “lead developer” position. Any ideas for how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I’m already doing it all. 12:59 - In Wes’ website episode, he mentioned using Gatsby Parallels for images. Why not git LFS? 17:25 - For Wes: Any Big Green Egg tips for beginners? I just ordered a kamado style grill and I’d appreciate any tasty tips you’ve got. 22:45 - Inline code is considered harmful because of potential XSS attacks. Lighthouse recommends inlining critical CSS to improve page speed. What do you think about this tradeoff? 26:30 - What advice would both of you have for being a first-time father, and how can I best prepare? My wife is pregnant, and we are both very excited! I want to do the best I can at being a good father. Our baby is due in January. As both of you are fathers (multiple times), I would love to hear your thoughts. 32:58 - Are present web developers merely crud bastards for corporate culture? If not, What entrepreneurial opportunities are open with Javascript and hooking up React with backend Node/Laravel and reading the Google Map docs? Of course the list isn’t exhaustive but you get my point right? Note: I’m not interested in selling courses and creating frameworks. 37:08 - Do you have any use for ES6 Generators and yield? It seems that they are a mechanism for async-await “under the hood,” so using ‘async-await’ is probably sufficient. 39:10 - With a legacy project that has old build dependencies how do you decide when to retool and fix all the npm audit issues? 46:10 - In what instances do you prefer to use rem vs em vs pixels for font size? I usually think about it like so: if I’m okay with an element’s font size being sized based on the parent, then I’ll use em. If not, then I’ll use rem. I almost never use pixels anymore except sometimes on the html element. But even then, I usually use a percentage. In practice, I’ve found it a bit hard to gauge what to expect with ems because of nesting issues. So, I’ve mostly been leaning towards rem. Though I also understand that using rems can be less modular. How do you guys make the decision? 52:49 - Hello chaps. Thank you so much for the show, I’ve learned an awful lot through listening. I’ve been dabbling in development for some time now and have taken on a project for an Express site which aside from a few static pages will include a shop with a small number of items ( Links Meteor Babel https://nodejs.org/api/esm.html#esm_transpiler_loader Gatsby Parallel Runner Git LFS Syntax 247: Hasty Treat - Wes’ New Personal Website Big Green Egg Mongoose Obsidian Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Foam Wes: How to use a multimeter Shameless Plugs Scott: Modern Design Systems - 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

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects 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 02:02 - React Helmet Make a re-usable SEO component that sets defaults. Spread children to override. 04:27 - When in doubt, stop the build and restart Gatsby clean Nuke node_modules + package-lock 05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser 06:44 - Run the build command locally to troubleshoot prod Dev mode isn’t SSG’d - people overlook this 08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser wrapPageElement and wrapRootElement 09:50 - Consider just adding the layout component manually to each page This will allow you to skip the layout if you need to have a page that isn’t typical 11:21 - Layout is not suitable for unmount animations Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components. 12:59 - use onCreatePage to pass context to the layout exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions; if (page.path.match(/thumbnail/)) { page.context.layout = 'thumbnail'; createPage(page); } }; 14:03 - You don’t have to query for everything Hard-coding data in html/jsx is super valid 15:32 - Gatsby Parallel Runner For lots of images Links Gridsom Google Cloud Cloudinary Sanity Image 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 with Adam Argyle about how stuff gets added to CSS. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Guests Adam Argyle Show Notes 01:48 - Who are you and what do you do? 04:13 - How does stuff get added to CSS? 06:44 - Github issue proposal or public document Shares use case Problem made succinct StrawMan solution JS demo 10:12 - Time Multiple proposals Comments Back and forth Bikeshedding 20:00 - Editor’s draft spec (Stage 1) CSS typed Examples Provided code logic Implementor interest Can go stale Explainer Implementor Prototype behind flags in browser Intent to Prototype (I2P) 24:42 - Working Draft (Stage 2) WPTs Prototype behind flags in browser Needs two or more to graduate Intent to Ship (I2S) 24:54 - Conference Calls Around 10 items to discuss Issues or proposals Flexible list Things can be injected as emergency Things can get punted to the next call 25:26 - Face 2 Face (F2F) Four times a year Presentations Breakout sessions Houdini focus groups, etc Try to resolve as many Github issues as possible 27:34 - Candidate Recommendation (Stage 3) Could still be behind a flag Edge cases are being worked through WPTs and standards are being nudged into a final state 44:20 - Roles Spec author Community Member Print Color Internationalization Box Model AOM JS APIs Renderers etc Implementor It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real 46:32 - Questions What language is CSS written in? What's the deal with Houdini? Links https://github.com/w3c/csswg-drafts @rachelandrew @hj_chen Incomplete List of Mistakes in the Design of CSS 10 Things I Regret About Node https://ishoudinireadyyet.com/ ××× SIIIIICK ××× PIIIICKS ××× Adam Wok Scott: Balance Pad Wes: Security Bit Set Shameless Plugs Adam: The CSS Podcast Scott: CSS Design Systems - 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

In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, and more! 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 04:18 - Find slow process Getting through email Cleaning my desk 06:29 - Set clear goals (smart goals) Is my inbox less crazy? Don’t spend too much time Do a 30-day challenge 09:46 - Ask around What are people you know using and why Time-blocking Batching Eat that frog Links Streaks Matt Cutts — Try something new for 30 days 1Writer Notable Dropbox Notion Obsidian Todoist 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 State libraries, should you use them, pros, cons, 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 01:24 - Context Have we used? Scott: Yes Wes: Yes Pros Built into React As simple or complex as you want Cons Takes effort to optimize Takes effort to plan and organize aka can get out of hand quickly 08:49 - Redux Have we used? Scott: Yes Wes: Yes Pros Huge user base Legacy of growth and improvements Modern API Even though it’s hard to learn, it has a clear “how to build with it” path Dev tools Cons Complex Thing that calls a thing that calls a thing that calls a thing Confusion around what additional packages are needed, e.g. ducks, saga, whatever 17:08 - XState Have we used? Scott: Yes Wes: No Pros Enforces solid design patterns Very safe Awesome tooling like UI to see state machines https://xstate.js.org/viz/ Cons Knowledge overhead - having to understand state machines Complex syntax 23:26 - Zustand Have we used? Scott: Yes Wes: No Pros Fast, scalable, easy to use Simpler No context providers Cons Smaller community 2.6k stars on Github Can inform components transiently (without causing render) 27:04 - Apollo Client Have we used? Scott: Yes Wes: Yes Pros Fits in well with your GraphQL API Dev tools Cons Complex, large syntax for simple operations Dev tools SSR story is really complex. It’s hard because they aren’t also the framework. 31:35 - RXJS Have we used? Scott: No Wes: No Observable based 33:02 - React Query Have we used? Scott: No Wes: Pros Fast growing community Awesome dev tools Cons Not sure if this can be used for application state or just data 35:37 - Recoil Have we used? Scott: Yes Wes: No Pros Very good for complex, splintered state needs Cons Overly complex for most use cases 38:34 - MobX Have we used? Scott: No Wes: No Pros Big community Not just React Powerful Observable capabilities Cons Uses decorators, but doesn’t have to? 43:15 - Easy Peasy Have we used? Scott: No Wes: No Pros Simple API (easy peasy) Redux dev tools supported 45:06 - Meteor ReactiveDict / ReactiveVar Have we used? Scott: Yes Wes: No Pros Very simple Get, set Is Reactive Cons Lock-in to Meteor 46:19 - Final Thoughts On State Wes: Go for simpler solutions Scott: I think application state should be separate from application data, but maybe that’s because there isn’t a solution that does both how I want Links Svelte Meteor Syntax 206: State Machines, CSS and Animations with David K Piano Syntax 268: Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More! Zustand CodeSandbox swr ××× SIIIIICK ××× PIIIICKS ××× Scott: Becoming Bond Wes: IRWIN VISE-GRIP GrooveLock Pliers Set Shameless Plugs Scott: Modern CSS Design Systems - 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

In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes. 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 02:26 - The old Syntax site Next.js Custom server for API - shows, Latest shows, sick picks On-demand page builds Custom routing 06:41 - The new Syntax site Next.js has solved those things now, no need for a custom server. API Routes On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose Custom routing is now done with [pages] Very fast to load Very fast to build Very fast to deploy It’s now a “dynamic static site” Zeit Now 1 to “Vercel” Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen. 13:23 - Why not: Gatsby Entire site would need to be regenerated exactly at 9am eastern API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes Sapper Links Next.js Gatsby Sapper Vercel 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 with Filipe Névola about Meteor and the exciting things happening in the Meteor world! 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. 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”. Guests Filipe Névola @filipenevola Show Notes 01:20 - What is your background? 03:41 - What exactly is Meteor? 12:00 - What are the biggest misconceptions of modern meteor? 18:20 - What do you say to people who think Meteor is dead? 21:33 - How does data get from your Meteor into your React app? Example of getting data on client side import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => { const { user, isLoggedIn, page } = useTracker(() => { // The publication must also be secure const subscription = Meteor.subscribe('page', pageId) const page = Pages.findOne({ _id: pageId }) const user = Meteor.user() const userId = Meteor.userId() const isLoggingIn = Meteor.loggingIn() return { page, isLoading: !subscription.ready(), user, userId, isLoggingIn, isLoggedIn: !!userId } }, [pageId]) if (!isLoggedIn) { return Create an Account Log in } return {page.title} {page.content} { e.preventDefault(); Meteor.logout(); }}>Log out ({user.username}) } 27:50 - What do you think is the ideal usecase for Meteor? 31:09 - Why did Meteor 1.0 fail to maintain hype? 36:41 - What does Meteor’s future look like? 45:27 - Are there any plans to integrate serverless into Meteor? 46:55 - Any little known features of Meteor that people might be interested in? Links Meteor Tiny Capital Deno Meteor Galaxy Mongoose Parcel Apollo MongoDB Svelte Meteor repo Meteor Up https://howtocreateanapp.dev/ https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A Cordova Missive Meteor Forums ××× SIIIIICK ××× PIIIICKS ××× Filipe: 1: Galaxy 2: Terere Scott: Amplifi Alien Router Wes: Parcel - Global Package Tracking Shameless Plugs Filipe: @filipenevola 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

In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets. 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 03:35 - What’s the big deal? If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer” Retail Me Not uses it Valid use cases: Same domain change the page from a popup Cross domain changing page data Example: https://mathiasbynens.github.io/rel-noopener/ 05:39 - Why doesn’t the browser just fix it? Safari did - You can use rel=“opener” to allow it Firefox did Chrome hasn’t yet https://twitter.com/HugoGiraudel/status/801475801397030912 10:48 - Does this hurt SEO? It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead. Links @argyleink 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

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more! 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. 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 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”? 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips. 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel). 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level? 18:01 - Why should you choose Styled Components over other ways of writing CSS? 22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa. 26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better? 31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal. 37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do. Links inputmag.com Focus app TSdx Rollup Webapck Parcel Beginner Javascript Typescript Darknet Diaries ××× SIIIIICK ××× PIIIICKS ××× Scott: Malicious Life Podcast Wes: LaCie Rugged USB-C External HDD Shameless Plugs Scott: Modern CSS Design Systems - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, and more! 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. Show Notes 02:50 - What is turbolinks? Generate HTML on the server Send it over the ajax request Load it in the page 03:55 - Who is using Turbolinks? GitHub Basecamp Hey.com 05:24 - Turbo Links javascript browser bundle Intercepts any link click Fetches the page HTML 09:19 - JS Sprinkles Vanilla JS jQuery Stimulus Alpine JS Links Turbolinks Syntax 254: Headless CMS Break Down & Roundup pjax Svelte Next.js 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 the future of video for the web! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 08:19 - Scott’s Background in video Started editing in middle school Worked professionally as an editor and production assistant for magazine Created specialty flash video players Have been hosting video content since the start of my web career 09:12 - Terminology Transcoding - digital to digital conversion of one format to another Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server) 10:51 - Streaming vs Downloading Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing. 11:16 - Formats MP4 WebM DASH HLS (HTTP Live Streaming) m3u8 21:35 - Players shaka-player - https://github.com/google/shaka-player/ hls.js - https://hls-js.netlify.app/demo/ dash.js - https://github.com/Dash-Industry-Forum/dash.js video.js - https://videojs.com/ jw player - https://www.jwplayer.com/ Bit Movin player - https://bitmovin.com/docs/player Ooyala Brightcove - https://www.brightcove.com/en/ 27:48 - Services Roundup 🐴 YouTube - free Vimeo - $ MUX - $$ Wistia -  Cloudflare - $$ JW Player - $ Cloudinary - $$$ Brightcove - $$$ Azure - $$ Bit Movin - $$ AWS - $$ 46:59 - What Scott did and how/why upchunk Mux Video.js Custom uploader Using polling Links Basecamp Hey Inbox YouTube Wistia Drip ConvertKit Vimeo https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski https://www.vidbeo.com/blog/hls-vs-dash HLS Can I Use youtube-dl Syntax Ep 254: Headless CMS Break Down & Roundup Cloudflare Mux Framer Motion Cloudinary upchunk ××× SIIIIICK ××× PIIIICKS ××× Scott: Flexibility Focus Podcast Wes: Mustie1 YouTube Channel Shameless Plugs Scott: CSS Variables Course - 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

In this Hasty Treat it’s another edition of the Top Level Domain Game! 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 02:25 - How it works We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? +5 points What country, business, or type of business is it for? +5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ https://www.101domain.com/ Is scott._ and wes._ available? -10 points for each 04:00 - .sd Scott: 5 + -5 + -126 + -10 + 10 = -126 05:46 - .ong Wes: 5 + -5 + -30 + 20 = -10 07:53 - .koeln Scott: 5 + -5 + -20 + 20 = -126 09:23 - .co.ke Wes: 10 + -15 + 0 = -15 11:00 - .tr Scott: 5 + -5 + 0 + 0 = -126 12:25 - .ist Wes: -5 + 5 + -10 + 0 = -25 13:57 - .xn—45q11c Scott: 5 + 5 + -295 + 10 = 20 = -401 16:40 - .reit Wes: 10 + -1460 + 10 = -1465 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 with Jerome Hardaway about web dev, vets who code, diversity in tech, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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”. Guests Jerome Hardaway Show Notes 01:50 - Captain America of Tech 03:25 - Where do you work and what type of stuff do you work on? 08:03 - What was your introduction to programming? 15:46 - When did you start Vets Who Code? 24:13 - What is the stack behind Vets Who Code? 29:56 - How do you help prep vets to get jobs? 41:32 - How can you be an ally and amplify black voices in tech? 50:05 - Everybody against racism Links Vets Who Code Quicken Loans Eventbrite Animate.css Laws of UX react-spring General Assembly Code Bootcamps uses.tech keycode.info Tech Talent Pipeline @vetswhocode ××× SIIIIICK ××× PIIIICKS ××× Jerome: 1: HBO’s Watchmen 2: https://vidr.io/ Scott: Explained on Netflix Wes: Jeremy Fielding YouTube Channel Shameless Plugs Jerome: Vets Who Code Scott: Design Systems with CSS Variables - 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

In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, and more! 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 02:00 - So you made a form: Contact form Sales form Email signup for newsletter Bug report Sign up for an account Password reset 03:00 - Now someone is going to: Have a bot that submits it Maliciously write a bot that submits thousands 04:14 - So what can you do? 4:54 - Honey pot This is a field that is either hidden or you tell the user not to fill in Can goof up autofill Works in many cases 07:37 - IP Throttle Only allow each IP to do an action a certain number or times inside a window You may only try signing up once per 10 mins 09:48 Block known ASN 12:37 - Captcha Soft captcha: “What is 1 plus 1?” Annoying captcha: Type these letters Google captcha: Train our self driving cars Hidden captcha Cloudflare hCaptcha Links Cloudflare Digital Ocean Google reCaptcha Cloudflare hCaptcha Cloudinary 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 what they wish existed in React! DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes React 03:53 - Unmount delay for animation 06:20 - Suspense with SSR released (or not because I think they are shelving it) Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858 09:24 - File based components Like Svelte and Vue This would look like a file with a special scoped tag per page. 11:50 - Prevent Default shortcuts 13:00 - No more useIsoLayoutEffect useLayoutEffect on SSR should just work without a custom hook Simple data fetching strategy based on promises 15:52 - Recommended hooks E.g. "here is the best way to do things" Official list of best practice hooks 18:25 - A good form strategy Bind inputs to state directly without any change handlers Inputs and forms all around need more magic - it's painful 20:43 - Write once deploy everywhere Not likely ever E.g. automatic transformation into react-native (obviously not going to happen) 22:28 - Compile time directives https://github.com/bukharim96/directive-x 25:11 - Slots instead of children Allows for things like named slots more explicit than children JSX 26:44 - Removal of htmlFor, className and all other abominations of html 29:09 - Import Raact from React for JSX to work Soon will be fixed https://github.com/babel/babel/pull/11154 react-require 32:31 - Better conditional / if statement syntax 33:09 - Fragments by default Just do it for us - the error message already knows 33:54 - Automatic key ids If mapping an object, check for common _id or id 36:36 - Simple scoped CSS built in 37:29 - Short hand for props with same name is prop={prop} 39:00 - Prop interpolation without backticks: name="$first $last" Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}} Tooling 39:43 - Story for typescript/prettier/babel 40:11 - Automatic a href client side routing 41:51 - Scaffolding and component generation Links Svelte Vue React Native NativeScript react-spring Paul Henschel Scream Sneeze: https://twitter.com/morganc_smith/status/1235332301044801538 ××× SIIIIICK ××× PIIIICKS ××× Scott: Software Engineering Daily Podcast Wes: PicQuic Screwdriver Shameless Plugs Scott: Sapper For Everyone - Sign up for the year and save 25%! Wes: Wes' New Gatsby Course - 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

In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of. 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 05:04 - Satellite High latency Satellite congestion Oneweb Starlink 08:43 - WISP Can be different techs - LTE, LOS, Long range WiFi Local towers put up in town 900mhz, 5 + 2.5gz Pretty cowboy 12:09 - Cellular LTE Goes over the cell signal Can be super fast or slow depending on your reception Cell plans can be rate limited 12:52 - Routers WE826-T2 Rooter / Golden Orb / Wifix Based on Open WRT https://www.ofmodemsandmen.com/ Nighhawk M1 ZTE MF288 17:03 - Modem Two types of modems: Host modems PCI-e / M2 Cards Sierra Wireless AT Commands Band locking Enable carrier aggregation Get detailed values on modem power See cell tower IDs 23:16 - Antennas Omni Yagi Gotta get them high Lots of connectors - Type N, SMA, RP SMA 25:47 - Boosters Adds noise 26:04 - Plans Some plans are phone only Some plans are tower restricted Most Hot spot plans are a rip off Calyx Institute Canada: Bell Internet Five Telus Smart Hub 29:27 - Speeds Depends on tower, congestion Depends on pre paid, post paid or first responder Depends on if you hit the cap or not 30:15 - Tools: Cell Mapper LTE Hacks Facebook group LTE Fix website Links Syntax 169: Hasty Treat - Remote Internet 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

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:37 - Q: Why does React bill itself as a library instead of a framework? 03:14 - Q: Are y’all still using Firefox now that it has been six months? 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace! 09:34 - Q: Who would win in a thumb war, Wes or Scott? 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache. 14:53 - Q: Should I start a new project with jQuery or React? 17:21 - Q: I’m a young teen (npm install can be agonizing sometimes, not to mention the amount of space node_modules take up on a device with 16GB of storage! So basically, any pointers on getting income (and practice!) in the web development field when your under 16? And just in general, what advice do you have to young teen learning to code? Thanks in advance! P.S. You know you’ve got something going when a teenaged boy would rather listen to your podcast than watch Star Wars or Marvel with his friends! ;) So keep up the amazing work. 22:12 - Q: Is it worth my time to learn design patterns in JavaScript? 24:28 - Q: I have a question regarding Figma design to HTML/CSS conversion. When translating the design into code, do you keep the font-size, padding, height of images the same as defined in design or do you take something different? Let’s suppose top nav bar is 115px, then do you make it the same as well, or something else? 29:03 - Q: You both are great at technical communication — how do you get better at technical communication when self-learning? 33:06 - Q: What tools (or other methods) do y’all use to manage spinning up new projects with all the assorted directory structures, tools, and configs, you prefer? For example, when I start a new project, these days I like TS, Prettier, ESLint, and want those to play nicely together. I find I’m constantly copying files from one project to the other but haven’t found a good abstraction that allows me to setup a new project with the assorted files. Bonus points for a solution that can keep shared configs and deps up to date. 36:10 - Q: I am 26 years old and working a full-time job. I am currently looking at the possibility between work and spending time with my partner. I get maybe an hour a week (maybe two) to focus on learning Javascript. I feel like it is taking me literally forever to get anywhere, and when I do learn something, there is always a better way of doing it! And then when I do sit down and get the time I just feel like I have no direction. Your podcast has been giving me small boosts of motivation, so thanks for that. But is 26 too old to make a move into development? 39:39 - Q: How do you step up a web development project to an enterprise-level? There are so many simple tutorials and quick wins all over the internet, but how do you get more knowledge about bigger enterprise-ready technical stuff. E.g. How to organize a Vue app with >60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management? 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it? Links React Firefox Brave CodeSandbox VS Code in the browser CodePen Source Making Design Patterns Figma Auto Layout ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Myths and Legends Podcast 2: Fictional Podcast Wes: Parchment Paper Baking Sheets Shameless Plugs Scott: Sapper For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - 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

In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, and more! 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 02:13 - attr() 04:14 - calc() 06:05 - :is() 07:20 - sin, cos, tan, acos, asin, sqrt, pow 08:52 - clamp() 12:13 - minmax() 14:24 - fit-content() 15:35 - filter blur() grayscale() sepia() opacity() contrast() url() Links https://twitter.com/wesbos/status/1256229763225657348/photo/1 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 continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, 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 03:17 - Typing Take an online typing test or skills - https://www.keybr.com/ 07:02 - Bash / Terminal WSL What directory am I in? SSH How to copy / paste / remove files and folders z Nice prompt (ZSH or fish) Know how to get out of VIM/VI and how to use it for fast editing Know how to make an alias 13:19 - Text editors Command Palette Keyboard shortcuts (just look them up!) Click through to source Multiple cursors Find/replace master Find and replace across files 18:37 - Regex Regex101 https://regexone.com will teach you just enough 22:03 - OS Basics Switching apps Unzipping File organization Searching for/in files 28:50 - Googling Learn how to google well What words to use and what not to Basic operators “-”, ", Use Reddit: for opinions Add dates - example: Library has been out for 6 months, and you can filter out 33:08 - Navigating GitHub Explore for finding interesting projects and creators Know how to clone a repo Create repo and push to it https://octolinker.now.sh/ to click through to files Use Octotree to navigate 36:20 - Navigating source View source Where to start in a repo (ie the entrance to a project) Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills Access to the minds of other developers 37:31 - Knowing how to pick the right dev tools pane Is it network based? Does it happen once you click something? Toggling CSS on/off When console logging makes sense vs using a better tool Links TypingTest.com Wes’ Command Line Power User Karabiner BetterTouchTool Alfred ××× SIIIIICK ××× PIIIICKS ××× Scott: The Fabric of the Cosmos Wes: Cosmonaut Stylus 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

In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, and more! 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 01:38 - Why? 04:20 - What is System76? System76 Lemur Pro 08:53 - What is Pop OS? Pop OS 09:41 - How has Linux compared to Mac? Pop OS is a great distro with lots of features, but command line knowledge is still necessary 10:07 - I can still run: Alfred Figma VSCode DaVinci Resolve Zoom Brave Chrome Firefox 10:43 - I can’t run: ScreenFlow Logic Sketch 13:46 - What do I miss? Trackpad gestures It’s not as polished of an experience Links Dell Toughbook 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 with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way. 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”. Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com Guests Ian Ramzy Show Notes 02:08 - Who are you and what’s your background? 05:34 - Why did you build this? 13:55 - What is it built in? Express server Web sockets 16:10 - Why is there no tooling? GetUserMedia WebRTC Twilio STUN/TURN/ICE infrastructure https://www.twilio.com/docs/stun-turn/faq VideoChat.peerConnection = new RTCPeerConnection({ iceServers: token.iceServers, }); 24:31 - How does your server deal with an influx of users? 27:11 - How do each of these features work? Auto-scaling video quality Text chat Screen sharing Picture in picture Live captions Loading animation No download required, entirely browser based Direct peer to peer connection ensures lowest latency Single use disposable chat rooms 41:32 - Have you looked into any of the recording APIs? Links ZipCall Zoom jQuery WebTorrent Heroku Adopter.js Figma ××× SIIIIICK ××× PIIIICKS ××× Ian: Notion Scott: Summoning Salt Wes: 4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module Shameless Plugs Ian ZipCall 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

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections. Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%. Show Notes 03:27 - Images Resize client-side when uploading Lazy load or progressive JPG Width + height so the content doesn’t shift with placeholders Compress your images - lossless and lossy Use SVG where possible 08:33 - Scripts + CSS assets Hasty Treat - 5 Things That Make Your Site Slow Hasty Treat - 5 More Things That Make Your Site Slow 08:51 - Video Variable-rate video is key 09:13 - Connections that go in-n-out a lot Save form state on page refresh Show UI when user goes offline window.addEventListener('offline', updateOnlineStatus); window.addEventListener('online', updateOnlineStatus); Retrying in _____ 10:27 - Service workers! Serves up local cache initially 12:05 - Fonts Font-display CSS https://css-tricks.com/font-display-masses/ Sometimes possible: tree shake your fonts - load only the characters you need font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 14:04 - CSS tricks Text over background image — make sure you also set a color so the text will show while the image is loading 14:37 - Testing slow connections Dev tools Mimic a speed, or 3G Links ImageOptim Slack Discord Cloudflare Workbox by Google Chrome Dev Tools Firefox Dev Tools 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 headless content management systems — why you might want to use one, things you should take into account, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 02:38 - What and why A headless CMS doesn’t mean you have to use a static site generator A headless CMS has an API: REST GraphQL GROQ A headless CMS can pipe its content into: Static Site on build - like Gatsby An app on run/refresh An existing website - widget What makes a CMS? Do you need a UI? What is the threshold? Is a hotdog a sandwich? Things to think about when choosing an API Auth - Rules + roles + levels How easy is it to create new data types? Is it code or UI? Can my mom use it? Can you create one-off content types? (e.g. settings pages) Custom workflows dRafts, revisions, roll backs How are images handled? Do you need another service for that? Pre-determined UI Is custom UI possible? Two-way relationships? Tags? Data validation? UI + API? Hosting? Pricing? Content movability? Can you get your data out? Schemas Users Revisions CORS or realtime API? APIs Can you insert data via the API? (or just pull) Node API Importing data 24:37 - Hosted Sanity Prismic Contentful Dato CMS Storyblok 8Base Agility CMS Seems to be making a big corporate play 36:59 - Self-Hosted WordPress WordPress REST API GraphQL API WP GraphQL Advanced Custom Fields for custom UI Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced The theme UI from plugins is often lost Drupal contentacms.org Craft CMS Ghost Strapi Keystone Joomla (JK!) 44:33 - API (BYOUI) Hasura Prisma Firebase 47:37 - Git Based Netlify Forestry 50:30 - Other Google Sheets Sheety Airtable Tina CMS Not a CMS Markdown under the hood Notion Links https://twitter.com/wesbos/status/1254772936935739393 Pixel & Tonic GraphCool GraphCMS Sapper ××× SIIIIICK ××× PIIIICKS ××× Scott: DEWALT Random Orbit Sander Wes: Shelf Brackets Shameless Plugs Scott: New course on Sapper - Sign up for the year and save 25%! Wes: Wes’ YouTube Channel 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 Hasty Treat, Scott and Wes talk about how to develop for slow internet connections. 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 02:26 - Types of Slow connections Slow upload Slow download This could be that your kids are watching a show and your partner is on a zoom call High latency Intermittent 07:47 - Loading UI Show loading UI for everything, but after X seconds Page transitions on SPAs Form switches - enter country, get list of provinces/shipping/whatever 11:58 - Account for XHR failures Sometimes I’m in a loading state forever State machines will account for this 13:26 - “Still working” timeouts Some sort of timeout so the user can get feedback Links Sentry Sapper Backblaze 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

It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more! 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. 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. Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future? 16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog? 11:13 - Q: Do my students NEED to understand recursion to be effective JS devs? 15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser. 22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that? 26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids? 30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs? 33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy? 36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”? 41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication? 45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used .env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example. 48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale? 55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: https://twitter.com/remix_run. This of course is in addition to Redwood and Blitz. Links Prism VS Code gatsby-remark-vscode CodeSandbox vscode-textmate System76 Linux Laptop JS Refactor ScratchJr Javascript30 GraphiQL Pokedex AWS Auth0 Okta mLab Jetpack Backup Remix Redis Redwood Blitz Next.js Encarta ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO battery-powered lawn gear Wes: AmazonBasics Notebook Laptop Stand Arm Mount Tray Shameless Plugs Scott: Level Up Tutorials Pro - 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

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision. 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 03:21 - When was IE11 made? 03:48 - When is it deprecated? 04:44 - How to make the decision? Look at your analytics Look at your users Is a 2% drop in sales worth it? 09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone? Modern Flexbox CSS Grid CSS Variables 10:26 - Can you partially support it? Major features Progressive enhancement Gracefully degrade Polyfill 11:16 - What about testing? Links wesbos.com VirtualBox modern.ie IE11 Surface Book 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 teaches Wes about Svelte and Sapper — general premise, best practices, 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. Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com Show Notes 03:14 - General premise Sapper compiles away, removing framework code from build Component & Props based Easy reactivity Built-in tools like animation Template-based 07:57 - Svelte 101 .svelte files Files can include , , and straight-up CSS Variables are used in templates via {var} - even works Import component and use just like React and Vue 10:49 - Stylin’ All styles are scoped by default global() to wrap around global declarations Language type sass to use sass 12:22 - Reactivity Baked in let count = 0 count = count + 1 will reactively update in template variables are essentially state $: double = count + 2 - to create a reactive variable that updates when another variable updates $: console.log(count) = will run whenever count is update a-la useEffect $: if (count >10) = same… reactive if  updates let name in script 15:55 - Props Same was React, but need to be exported before they can be used Seems counterintuitive, but you get over it quickly EZ defaults export let answer = 'a mystery'; import Nested from './Nested.svelte'; export let answer = 'a mystery'; The answer is {answer} 20:08 - Template logic If statements {#if user._id} {/if} Loops {#each cats as kittens} Promise tags {#await promise} ...waiting {:then number} The number is {number} {:catch error} {error.message} {/await} 23:12 - Events On directive Functions can also be inline Modifiers Click me 26:11 - Baked-in goodies Animation Dimensions {text} Lifecycle methods Advanced State Via Stores A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes. import { writable } from ‘svelte/store’; export const count = writable(0); count.update(0) Slots React helmet like stuff, ie 36:39 - Sapper Similar to Next.js Folder routes Static export with all of the good stuff like service workers and preloading Links Svelte Sapper r/webdev Vue.js ScottTolinski.com WesBos.com Next.js ScottTolinski.com Github Repo Gatsby.js Shawn Swyx ××× SIIIIICK ××× PIIIICKS ××× Scott: Lewisia Battery Backup Solar Fountain Pump Wes: Firefox Containers Shameless Plugs Scott: LevelUpTuts YouTube Channel Wes: Wes’ New Website 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 Hasty Treat, Scott and Wes talk about Scott’s new website! 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 02:25 - Relaxed fit development Not concerned with it being perfect Will act as a loose digital garden, so it needs to be flexible Keep my talks and podcast appearances somewhere 04:40 - The stack Svelte / Sapper CSS variables Static generation with markdown No API Hosted on Netlify 08:15 - Why? I dropped that db life in 2015 and never looked back I’m a developer - markdown is good for me I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself. Full page animations. Orchestration. Fully SSG. Code is painless to add to — adding a blog post is as easy as creating a markdown file Links ScottTolinski.com Svelte Sapper Maggie Appleton Shawn Swyx 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 what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes ES2019 04:03 - Array.flatMap() 05:30 - Array.flat() 07:37 - Array.fromEntries() 09:50 - String.trimStart() and String.trimEnd() 11:23 - Function.toString() 11:57 - Object Key Order Integer keys in ascending order (and strings like “1” that parse as ints) String keys, in insertion order (ES2015 guarantees this and all browsers comply) Symbol names, in insertion order (ES2015 guarantees this and all browsers comply) ES2020 14:50 - Big int 18:09 - Nullish coalescing 20:57 - Optional Chaining 24:55 - promise.allSettled 25:33 - Dynamic import 27:14 - string.matchAll(regex) and string.replaceAll 29:30 - globalThis 30:44 - Module Namespace Exports 33:11 - Navigator.share() API 36:34 - Async Hooks 37:39 - Pipline Operator 39:59 - Top Level Await Links https://twitter.com/wesbos/status/1181584047144878080 https://twitter.com/wesbos/status/1238472679893671938 https://twitter.com/wesbos/status/1230515254687301635 Regex101 Regexr https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare Sketch CloudApp Figma https://nodejs.org/api/async_hooks.html Gulp https://v8.dev/features/top-level-await https://github.com/tc39/proposal-pipeline-operator ××× SIIIIICK ××× PIIIICKS ××× Scott: Sapper Wes: Dewalt Oscillating Multitool Shameless Plugs Scott: Level Up Tutorials Pro - 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

In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014! 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 05:04 - The stack Gatsby Styled components React MDX 07:04 - The content Blog posts Twitter Hot Tips 09:54 - Styling Styled components Less 16:54 - MDX 17:45 - Serverless functions Links wesbos.com bos.af WordPress ACF Netlify Gatsby React MDX My New Website! Here are the deets Next Operator Mono Mono Lisa Puppeteer gatsby-image Jason Lengstorf gatsby-plugin-prettier-build Cloudinary 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 with Heather Payne about bootcamps — how to get the most out of them and what to look out for! 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”. Guests Heather Payne Show Notes 07:52 - Bootcamps What do you teach in the bootcamp? How long is it? SHow do you validate and pick topics? What makes a good bootcamp student? Do bootcamps work? How do you get the most out of a bootcamp? 20:45 - Finding a job How do you prepare for an interview? What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp? Do you see any common traits in the few that don’t get jobs? What about getting a job in the current climate? 43:30 - Other How do income share agreements work? Pay what you can income share agreements How do you tell if a bootcamp is good? Links Heather Payne Juno College WordPress React Council on Integrity in Results Reporting Zoom ××× SIIIIICK ××× PIIIICKS ××× Heather: Whereby Scott: Original Grind Coffee Co. Cold Brew Coffee Maker (1 Gallon) Wes: iStat Menus Shameless Plugs Heather: Juno’s Continuing Education Online Courses Scott: Design Systems In Figma - Sign up for the year and save 25%! Wes: Wes’ New Website - 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

In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls! 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. Show Notes 02:23 - Event bubbling Some events bubble, some don’t Clicks bubble Mouseevents bubble Focus doesn’t bubble 04:10 - Event capturing Capture: down, bubble up Canceling: prevent default target` vs currentTarget currentTarget is what got clicked target is what you listened for the click on event.isTrusted addEventListener once: true Links Javascript30 BeginnerJavascript 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

It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, and more! 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”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service. 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)? 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them. 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team? 23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using? 27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code. 29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each? 33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved. 38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components? 42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework? 46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file? 51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects? 55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice? Links imgIX Netlify Sass Less Bootstrap Stylus PostCSS WordPress Reddit StaticGen Gridsom Vue Laravel Hugo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jelle’s Marble Runs Wes: Hyundai HHC2GNK Vertical Style Electric Air Compressor Shameless Plugs Scott: Level Up Tutorials Pro - 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

In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools. 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 02:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.” This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here. 05:03 - Lots to unpack here Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here. Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code. 08:20 - So what can you do? Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already Show the dev that even though it looks weird, it’s better for readability. Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier). Put together a solid argument for it, written down. Use it in a smaller project. Everyone is against prettier at first, but once they use it, they realize how amazing it is. Can you just Prettier the code yourself and then format it otherwise before you check it in? This depends on if you have existing formats. Links Prettier js-beautify 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

It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms and more! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt. 08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around? 13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future? 19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers? 21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json? 27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app? 30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype? 34:34 - Q: When you are looking to refactor code, do you have a process you like to follow? 41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why? 46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here? 49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down? 51:51 - Q: Should I use the mongoDB or mongoose node module in my project? What are the differences? 55:48 - Q: Is it a bad practice if I mix up React Bootstrap and Material UI in one React project? Links gqless Prisma The Blitz.js Manifesto (A New Fullstack React Framework) Begin Shopify Snipcart Magento Sanity Gatsby Syntax 157: Hasty Treat - What is a Headless CMS? @dog_rates Wondery - Joe Exotic ××× SIIIIICK ××× PIIIICKS ××× Scott: Jackbox Games - Murder Party Two Wes: Tiger King Shameless Plugs Scott: Custom React Hooks - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off! 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

In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow! 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 03:01 - Shipping too much JS Code splitting Webpack Bundle Analyzer Look at dependencies of libraries Use fewer libraries 06:38 - Not bundling code Build process 08:24 - Not compressing code Google Closure Compiler Gzip via your server serving assets Minify CSS + JS 11:45 - Loading JS asynchronously Where should I put tags in HTML markup? Solution: Lazy load JS as needed Solution: Show HTML first, load JS in the footer Solution: Use Async + Defer 16:42 - Missing indexes on DB What is a DB index? Where should you add them? MongoDB Compass Links Syntax 239: Hasty Treat - 5 Things That Make Your Site Slow Google PageSpped 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 emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website? 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 5:40 - Banners and popups Interfere Static Dismissible Cookie/localstorage When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated. Private client-side-only PWAs are hard 14:35 - Good styling What happens if they add an image? Do they have access to the branded fonts and colors in their WYSIWYG? Can you revoke 100px red Times New Roman? 18:32 - Page alerts Yellow, green, red Alerts on existing pages 21:08 - New pages Is there a good template for new pages? Can they easily set the slug? whatever.com/covid19 Can they add it to the nav? 23:52 - Google’s “Hours of Operation” Is that easy to change? Meta tags: https://schema.org/OpeningHoursSpecification 25:43 - Other Own your audience! Email newsletter ready to rock Online pickup? Basic scheduling software https://www.cityhive.net/ https://snipcart.com/ Live streaming - have a YouTube account ready to go, even if empty 34:38 - Deployment Detail how to deploy everything It might have been years and the CSS will only compile on Node 6 and Gulp 3 Do any caches need clearing? Does the CSS need to be cache busted? Links 1Password Cloudflare ××× SIIIIICK ××× PIIIICKS ××× Scott: Mellow Groovy Sounds YouTube Channel Mellow Grovvy AOR / West Coast Mix #4 Wes: Used projectors are cheap and can be a great deal Shameless Plugs Scott: All Courses - 50% everything! 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

In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow. 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 3:00 - TTFB Slow DNS lookup Server on the other side of the world Slow server processing Network speed back to the browser 6:21 - Requests Too many requests Too large Waterfalling your requests 9:44 - Assets are too large Images are the biggest bloat in a site Compress and optimize via build tool or ImageOptim Make smaller Picture fill for mobile 14:48 - Lazy loading lazy=“true” Intersection observer Preload slider images two ahead 18:03 - Not using a CDN What is a CDN? Cloudflare is free, others are very cheap - we used Cloudfront Netlify is free and comes with a CDN Links WordPress Webpack Gulp gatsby-image Cloudinary Cloudflare Cloudfront Netlify 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 working from home. How do we do our best in these unprecedented times? Here are our tips for working from home and staying productive and sane! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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. Show Notes 2:39 - Your space You need a table Card table or dining room table Keyboard + monitor Don’t work from your bed or couch Headphones can get you in the zone (noise-canceling ftw) 16:36 - Routine Shower, shave, makeup Clear start and stop times - even if that means it’s 5am to 11am because you are splitting Taking breaks is important 25:24 - Focus TODO list - write a list of what you hope to do at the start of the day, check things off, feel good about yourself Eat That Frog - for the 100th time Don’t watch or check the news during work hours Block the terms related to the pandemic or politics on social media - you don’t need that info there DOOM Scrolling 30:11 - Self care Video games or relaxing things post work Exercise Kettlebells, spin bike, bodyweight workouts Stronger by Science has a great episode about this - https://www.strongerbyscience.com/podcast-episode-38/ Zoom Happy Hours Don’t overly rely on substances to get you through Get your VD (vitamin D) Don’t stress out yourself at night - don’t look up news before bed 43:20 - Managing kids and sharing time with your partner First of all, props to you all - this is really hard, mentally and physically This will vary greatly depending on your SO’s job, number and age of kids Our SOs have work and jobs of their own Watching young kids is hard work Give each other 30 min brakes Kids need routine - put something in place Some times Uncle Mickey needs to take over, and that’s ok Communication is key Schedule Examples: 6-12 and 12-6 4 hours each 2 hour trade off Focus time (calls, deep work) and half-focus time (emails, etc.) Have empathy with everyone: co-workers, SO, kids Check in on your peeps Keep an eye on your co-workers, even the extroverted ones Links Super Strong Neodymium Magnets Elgato Cam Link 4k Keychron K1 Eat That Frog! uses.tech Animal Crossing Love Is Blind Powerblocks Peloton Strange Brew Wes’ Twitter thread - How are you managing child care? Syntax Twitter thread - Send us your work from home tips! ××× SIIIIICK ××× PIIIICKS ××× Scott: Oculus Quest Wes: Slumberpod Shameless Plugs Scott: All Courses - 50% off! 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

In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming. 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 1:48 - What the heck is abstraction? I like to think of it as sweeping under the rug Vue and React devs should be very familiar with the concept 4:44 - When to abstract When things are getting too heavy Personal preference Some people have an arbitrary line limit 7:25 - When not to abstract When savings are minimal When it just adds a pointless layer 9:40 - Personal code abstractions vs public My personal focus is on API simplicity and baked-in smart defaults More specific Public APIs need to be more flexible or at least for some components Links React Vue Svelte Max MSP chakra UI 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 with Dr. Courtney Tolinski about mental health and web development. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:20 - Depression Honestly just explaining depression would be great. Too many times I’ve heard “but you don’t look sad” As someone who struggles with depression, what are some things I can do to rekindle and things I enjoy like developing and hobbies? This would greatly benefit me for learning more dev related things outside of doing it for work. My depression is due to some other cause in personal life - two years into it. Coding has bought me little life back as this is the only thing I have to do. What can we do from an outsider's view to someone who might have depression? 12:23 - Anxiety Imposter Syndrome x 1000 How to deal with increased anxiety during these times? How to avoid anxiety and feel useless when working products that you don’t appeal to you? Wanted to ask the Dr about why do I feel that I have to work on 1000 projects that seem to never finish? 😣This is inducing a lot of anxiety sometimes. I am on depression medication. Sometimes, I feel scared that I am so slow and don’t feel accomplished enough like people working at FANG, etc, being a SE. How to deal with the anxiety caused by today’s events around the world and the need to isolate yourself from society even though we crave human interaction? 29:12 - Focus and job performance How to keep motivation and focus? I find myself enjoying work but having a hard time focusing on it. All the “distraction-free” apps don’t work because I can turn them off and I feel they literally have no power over me. Hardcore mode Pomodoro technique 35:10 - Motivation and remote work Bore-out Burnout How do you deal with loss of focus and happiness in web development (especially on remote jobs)? Working for yourself at home, you don’t get a chance to bounce ideas and encouragement from others in an office. What’re some good ways to compensate for that to ensure you maintain a positive mindset? Work on new things Find ways to try new things 40:38 - Stress Correctly identifying source of (negative?) stress. Not lashing out when under stress. How to avoid eating to cope with stress? Links Eat That Frog! - Brian Tracy Pomodoro technique Healthline How to Talk so Little Kids Will Listen: A Survival Guide to Life with Children Ages 2-7 ××× SIIIIICK ××× PIIIICKS ××× Courtney: Animal Crossing: New Horizons, How to Talk So Kids Will Listen & Listen So Kids Will Talk, The Whole-Brain Child: 12 Revolutionary Strategies to Nurture Your Child’s Developing Mind Scott: The Engineering Mindset YouTube Channel Wes: Toca Boca Shameless Plugs Scott: All Courses - Sign up for the year and save 50%! Wes: All Courses - Eveything is 50% off! 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

In this Hasty Treat, Scott and Wes talk about security and how to get good at passwords. 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 7:35 - Setting passwords Absolutely 100% must be unique for EVERY SINGLE WEBSITE 9:38 - Generated passwords Make a sentence: lovetoEatPizza Decide on casing Make your own algorithm: 3rd letter replaced by 4th letter of domain number on end is double the number of chars in the domain 13:52 - Use a password Manager Have the password manager generate the password for you Get it on your phone You must go 100% all in 1password Dashlane Bitwarden - open source version of Dashlane LastPass - awful 17:45 - Password manager tips Turn off your browser password manager - this is a crutch and causes them to become out of sync and this is why I see people annoyed by them For the love of god, make you master password something you can remember You can add family members to your plan that will approve it 1password’s Watchtower feature 20:50 - Biometrics Face ID, Touch ID Blood 21:37 - 2FA codes Authy Google Authenticator Authenticator + 1Password for 2FA codes Backup codes You can also backup the QR code 29:55 - Text message codes Don’t My sister got sim jacked, PayPal drained, phone number was gone for 7 days Lock transfer - ask your phone provider - mine has voice recognition Links Have I been pwned? Shop Talk Show: One on One with a Hacker Mailchimp 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

It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode? 5:36 - The dreaded monitor question, flat or curved? 8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first? 12:35 - What is AMP and should I be using it? 16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js? 21:46 - Would you ever consider moving from Mongo / Mongoose? 24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program. 33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill? 36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity. 40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using utils or utilities inside src, but curious if there is a more common way. 44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new. 48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it. 53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will github.com/webruin map to github.com/newname? Links Cloudflare AMP Blitz.js Brandon Blitz Meteor Mongoose DynamoDB uses.tech Course Report - Modern Labor Passport.js Syntax 058: Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More Syntax 015: Advice for New Developers, Imposter Syndrome and Interviewing at Google Syntax 075: Hasty Treat - Feedback and Criticism Brendan Eich ××× SIIIIICK ××× PIIIICKS ××× Scott: Stronger by Science Podcast Wes: iStat Menus Shameless Plugs Scott: Animating React with Framer Motion - 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

In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website. 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. Show Notes 2:36 - What is it? 5:43 - How do you calculate it? Big Mac Index Purchasing Power Parity Spotify Pricing Index Glassdoor Just ask developers what they make 8:04 - How do you implement it? Cloudflare headers Dealing with VPNs Does it work with sales? 16:09 - Is it client-side only? Links country-emoji npm package 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

In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer. 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 2:34 - Finding someone Virtual Assistant Offset timezones can be handy Flexible is great - two hours here, two hours there 5:55 - Types of tasks to delegate Support Email replies Mail and shipping items Invoicing Expenses Research - find emails for X Blog post edits Sponsorships 14:50 - Standard Operating Procedures If something happens more than once, make an SOP Common questions that come up 18:07 - Tools 1Password Missive Custom backend tools for: Managing courses Issuing refunds Chromebook Google Docs 21:52 - Hours Links 1Password Missive Notion Freshbooks Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase 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 soft skills tips — productivity, planning, communication, and more. 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”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:20 - Productivity Make a todo list and prioritize Get ideas out of your brain Use a tool like Notion as a second brain Batch related things together Recharge when you need it Have a system and stick to it 16:34 - Finishing projects Start Do a little every day Go all-in for a few days Clearly identify what needs to be done (Github issues, todo app) 23:30 - Planning tips I use Mind Node Whimsical Write it down when you have an idea Put everything in a calendar 30:24 - Communication Be honest and upfront with deadlines Give yourself padding — many people are overly optimistic Don’t let people expect communication from you, at all, or at all times Assume good intentions Don’t be a jerk to clients or coworkers 40:28 - Skill and career advancement FDD — fun driven development Share what you learn Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff Solve your own problems Apply and interview for anything that’s interesting Track your progress I want to ___, I wish I could ____, You are lucky that you get to _____ Just start! Seriously. Plan on doing something. Links Todoist Things Notion Evernote Notable Beginner Javascript Level 1 Electron uses.tech Rework Jason Freid David Heinemeier Hanson It Doesn’t Have To Be Crazy At Work Mind Node Whimsical Javascript30 CodeSandbox Streaks Xerf Xpec YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: Katsumi Horii Project - Sky Cruisin’ Album Wes: AmpliFi ALIEN Router Shameless Plugs Scott: Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more! 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 2:45 - What do you personally use Cloudflare for? DNS provider Domain registration at cost Caching DDoS protection Hiding server IP address Free HTTPS Firewall rules Scrape shield Lightweight stats Serverless functions DNS Cloudflare Warp 16:40 - What are you not using? KV storage Video streaming Deep customization around blocking/errors 19:49 - How do you set it up? Links Cloudflare Beginner Javascript Digital Ocean DNS Simple Let’s Encrypt Syntax Ep 224: Serverless / Cloud Functions - Part 1 Begin 7-Eleven hit “Dance The Slurp” 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 do a part 2 about Serverless — databases, files, secrets, auth, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:47 - Wes tried Cloudflare Workers Also this is so cool: Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc. A word on Digital Ocean Kubernetes + FAAS allows you to scale up/down 13:54 - Secret management Some have a great UI Some have a CLI Some only have production Some have dev/staging/prod 16:24 - Vendor lock-in Two kinds of vendor lock-in Lock into a low-level provider (Like AWS, or MongoDB) Lock into a framework Questions to ask: Can I go, take my app as-is, and host it on another provider? Can I refactor the config and run my code as-is? Do I need to refactor my code for it to run on other platforms? Next.js will only run on Now There is a community package Begin all runs on Arc.codes Firebase is locked in? 25:12 - Sharing dependencies Each function will have its own package.json, which can be a pain Publish utils a private module AWS Layers Import/export Bundle and tree shake 30:26 - Local development Now dev NPX sandbox Wrangler for Cloudflare workers 36:40 - Existing applications Difficult to move with many routes, but easy to move a Graphql API that has one single route Maybe do piece by piece instead of all at once Begin has http express method 45:21 - Data Any DB you want Dynamo DB integrated into many Firebase KV Storage for Cloudflare workers Fauna 48:14 - File storage Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary Many also have this integrated as well 52:18 - Auth Serverless is ephemeral and stateless JWT likely as sessions will work, but doesn’t really make sense Links Cloudflare Workers Akamai MongoDB Stitch Hitler uses Kubernetes Digital Ocean Kubernetes Firebase Google Cloud Architect Next.js Now.sh Begin Netlify Now Wrangler Apollo Federation Monaco Postman Codesandbox DynamoDB Amazon S3 Backblaze B2 Cloudinary ××× SIIIIICK ××× PIIIICKS ××× Scott: The Power of Bad by John Tierney Wes: Socket Organizer Shameless Plugs Scott: Animating React with Framer Motion - 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