Syntax – Tasty Web Development Treats
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
Avsnitt
904: React vs Svelte × Windsurf Worth $3B × Typescript as Const × Layout Shift Tricks × More
In this potluck episode of Syntax, Wes and CJ answer your questions about OpenAI’s $3B Windsurf acquisition, the evolving role of UI in an AI-driven world, why good design still matters, React vs. Svelte, and more!
Show Notes- 00:00 Welcome to Syntax!
- 02:35 OpenAI acquires Windsurf for $3B
- 05:20 What is the future of UI now that AI is such a heavy hitter?
- 08:45 Handling spam submissions on websites
- 14:18 Duplicating HTML for desktop and mobile websites?
- 17:03 Is it okay to use a JSON file for simple website data?
- 19:04 How to handle anonymous and duplicate users
- 21:55 Working with TypeScript Object.keys() and “any” vs “@ts-ignore”
- 25:51 Brought to you by Sentry.io
- 26:38 What is the difference between React and Svelte?
- 30:24 How should you name your readme file?
- 31:55 How do you find time to refactor code?
- 35:20 Best practices for testing responsiveness
- 39:19 Avoiding layout shift with progressive enhancement
- 46:56 Sick Picks + Shameless Plugs
- CJ: Portable Chainsaw
- Wes: White Lotus
- CJ: Nuxt
- Wes: Full Stack App Build | Travel Log w/ Nuxt, Vue, Better Auth, Drizzle, Tailwind, DaisyUI, MapLibre
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
903: Fork Yeah! Microsoft open sourcing Copilot
Scott and Wes are joined by Erich Gamma, creator of VS Code, and Kai Maetzel, Copilot Lead, to share some big news about the future of VS Code and Copilot. They discuss what it means for developers, how AI is shaping the future of coding, and why staying open to the community is key.
Show Notes- 00:00 Welcome to Syntax!
- 01:00 The inception of VS Code.
- 02:49 VS Code adoption.
- 04:31 Brought to you by Sentry.io.
- 04:55 Syntax Denver Meetup!
- 05:19 The big announcement.
- 06:25 The current state of Copilot and VS Code.
- 08:31 The challenges with LLMs running outside of the codebase.
- 09:31 How to make a business case for AI.
- 10:47 The maturing of the AI landscape.
- 13:01 The limitations of extensions.
- 14:06 Open source vs closed source.
- 14:49 Copilot’s context is public.
- 19:23 Is context language-specific?
- 21:23 How does this affect paid Copilot features?
- 23:27 Secrets of Copilot’s server-side.
- 28:36 What will be open and what will not?
- 29:03 Is Copilot’s UI influenced by VS Code forks?
- 31:31 Maintaining VS Code identity in forks.
- 33:07 What does open-sourcing GitHub Copilot mean for Cursor and Windsurf?
- 38:42 Were you surprised to see VS Code forks?
- 40:03 Are other extensions able to tap into the AI offerings?
- 43:20 There’s work to be done.
- 44:13 The timeline.
- 45:39 Simulation Tests (S Tests).
- 48:07 How to test LLMs.
- 49:10 The future of software development with AI.
- 52:47 What’s your favorite model?
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
902: Fullstack Cloudflare with React and Vite (Redwood SDK)
Wes talks with Peter Pistorius about RedwoodSDK, a new React framework built natively for Cloudflare. They dive into real-time React, server components, zero-cost infrastructure, and why RedwoodSDK empowers developers to ship faster with fewer tradeoffs and more control.
Show Notes- 00:00 Welcome to Syntax!
- 00:52 What is RedwoodSDK?
- 04:49 Choosing openness over abstraction
- 08:46 More setup, more control
- 12:20 Why RedwoodSDK only runs on Cloudflare
- 14:25 What the database setup looks like
- 16:15 Durable Objects explained – Ep 879: Fullstack Cloudflare
- 18:14 Middleware and request flow
- 23:14 No built-in client-side router?
- 24:07 Integrating routers with defineApp
- 26:04 React Server Components and real-time updates
- 29:53 What happened to RedwoodJS?
- 31:14 Why do opinionated frameworks struggle to catch on?
- 34:35 The problem with Lambdas
- 36:16 Cloudflare’s JavaScript runtime compatibility
- 40:04 Brought to you by Sentry.io
- 41:44 The vision behind RedwoodSDK
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook
Scott and Wes break down the latest in JavaScript news, including new async patterns in Svelte, React Server Component tooling with Parcel, and Redwood’s push into Cloudflare with its new SDK. They also cover what’s new in Storybook 9 Beta, from visual testing to a sleeker, lighter build.
Show Notes- 00:00 Welcome to Syntax!
- 02:50 Brought to you by Sentry.io.
- 03:37 Syntax Meetup!
- 04:09 React View Transitions.
- 08:58 addTransitionType.
- 11:18 Activity API.
- 14:22 Maintaining state in search queries.
- 16:29 Asynchronous Svelte.
- 19:04 Svelte Boundary.
- 25:13 Parcel RSC.
- 27:15 Redwood SDK.
- 30:55 Storybook 9 Beta.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
900: 13 New CSS Features You Can Start Using Today
899: GSAP: Killer Web Animations With Cassie Evans
Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers.
Show Notes- 00:00 Welcome to Syntax!
- 00:59 What is GSAP?
- 01:53 GSAP Rebranding.
- 04:44 GSAP under the hood.
- 05:29 The big announcement!
- 07:19 GSAP Showcase.
- 11:01 Brought to you by Sentry.io.
- 11:26 Why is GSAP easier for animations?
- 12:38 Animating with SVGs.
- 13:33 The love of SVG.
- 14:55 GSAP is performant.
- 16:06 Gotchas to watch out for.
- 18:12 Does GSAP work with canvas?
- 19:02 What GSAP projects are you most proud of?
- 20:30 Does it play nice with web frameworks?
- 22:32 What are you excited about in CSS right now?
- 24:27 Will any of these make their way into GSAP?
- 26:31 Timelines.
- 29:24 Building animations with timelines.
- 34:55 What are the best GSAP plugins?
- 38:44 GSAP docs and philosophy.
- 39:50 Scrubbing animations by frame.
- 41:09 GSAP Video Exporter.
- 41:45 Animating with JavaScript.
- 45:19 JavaScript in unconventional applications.
- 47:56 Is there anything missing in web tech?
- 50:53 What about AI in GSAP?
- 52:40 Sick Picks + Shameless Plugs.
- Cassie: Eyesy Video Synthesis.
- Cassie: Smashing Conf.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
898: Every Developer Needs a 3D Printer
Wes and Scott talk all things 3D printing—from fixing every day items to organizing tools, printing gadgets, and even teaching their kids entrepreneurship.
Show Notes- 00:00 Welcome to Syntax!
- 03:34 Brought to you by Sentry.io
- 05:03 Practical uses of 3D printing
- 07:34 Creating tools for organization
- 10:33 Improving and adapting everyday items
- 14:34 The benefits of printing something vs buying it
- 15:32 Choosing the right 3D printer
- 25:26 Projects and ideas
- 31:33 Filament types and their uses
- 40:05 Finding affordable filament
- 46:07 Where to find 3D models
- 48:08 Creating your own 3D models
- 53:00 Modifying existing 3D models
- 54:30 Coding in 3D printing
- 01:01:25 Sick Picks + Shameless Plugs
- Scott: Alaska Bear Organic Silk Sleep Mask
- Wes: BLV - AMS Riser
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
897: Making Your App Feel Faster Than It Really Is
Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance.
Show Notes- 00:00 Welcome to Syntax!
- 01:12 Brought to you by Sentry.io.
- 02:34 Mousedown or pointerdown events.
- 06:00 UI animations should be fast.
- 08:00 Animations should not block interaction.
- 08:20 Animations should be cancellable / reversible.
- 10:50 Optimistic UI.
- 12:37 Local Data.
- 13:36 Delay loading indicators.
- 14:40 Page loading indicators.
- 15:47 Preload on hover.
- 17:13 Calculate mouse trajectory.
- 18:51 Full page spinner on every change.
- 20:04 Pixelated spinners.
- 20:23 Skeleton loaders.
- 23:43 Photo frames.
- 25:52 Search on input instead of search on click.
- 26:46 Progress loaders than move in between steps.
- 27:31 Community submissions.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More
895: React Server Components: Where are we at?
Scott and Wes break down the current state of React Server Components — what they are, how they work, and why they’re so controversial. From framework support to bundling complexity, it’s everything you need to know about RSC in 2025.
Show Notes- 00:00 Welcome to Syntax!
- 01:01 Brought to you by Sentry.io.
- 01:55 What exactly are React Server Components?
- 09:12 Frameworks and React Platforms.
- 23:39 Why so much hate?
- 25:28 I want it my way.
- 27:46 React Server Components lock-in.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
894: Open Source Matters w/ Chad Whitacre
Wes and Scott talk with Chad Whitacre, the newest member of the Syntax team, about all things open source—licenses, controversies, economics, and ethics. Chad breaks down what most people misunderstand, and how companies can support sustainable software development the right way.
Show Notes- 00:00 Welcome to Syntax!
- 00:39 Meet Chad Whitacre
- 03:39 Chad’s retro headphones
- 05:00 Chad’s role at Syntax
- 09:41 What do people get wrong about open source?
- 11:11 Why is open source so divisive?
- 13:01 The evolution of open source and free software
- 17:55 Single vendor vs. community open source
- 20:22 How do people build businesses off of a GPL license?
- 24:40 What’s the most pure version of open source?
- 26:55 Fair source licensing explained
- 30:30 Brought to you by Sentry.io
- 33:09 Should you be concerned about dependencies in your app in relation to licensing?
- 35:16 What’s the most interesting/unusual open source license?
- 40:00 What is Open Source Pledge?
- 45:41 Choosing the right open source license
- 48:31 Wes’ most popular open source project
- 49:39 Interesting open source projects
- 51:33 Licensing for educational content
- 53:46 The beauty of open source
- 56:12 Scott’s various open source projects
- 56:44 The importance of contributing to open source projects
- 59:16 Sick Picks + Shameless Plugs
- Chad: Save The Cat!
- Chad: Coming soon
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
893: Everyone Is Talking About MCP
Scott and Wes break down the Model Context Protocol (MCP), a new open standard that gives AI agents secure, tool-like access to your dev environment. They cover how it works, why it’s a big deal for AI coding workflows, and real-world use cases like GitHub, Sentry, and YouTube.
Show Notes- 00:00 Welcome to Syntax!
- 00:49 The lore of ICP.
- 03:09 Brought to you by Sentry.io.
- 03:33 What is MCP?
- 05:06 The steps of AI coding.
- 08:24 Why you might want to do this.
- 23:02 Postgres.
- 24:40 Transport protocols.
- 24:49 STDIO.
- 25:19 SSE.
- 25:32 Streaming.
- 26:24 Writing you own MCP server.
- 26:28 FastMCP.
- 27:00 Cloudflare.
- 28:01 Data validation.
- 28:47 Standard schema.
- 29:27 Other parts of MCP.
- 29:35 MCP resources.
- 30:37 MCP prompts.
- 30:48 MCP roots.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
892: The History of Syntax
Wes and Scott talk about the origins of Syntax, sharing how a friendly course name conflict led to a mastermind group, then a podcast, and eventually a full-blown media brand. They also reflect on key milestones, from early episodes and sponsorships to joining Sentry, expanding the team, and what’s next.
Show Notes- 00:00 Welcome to Syntax!
- 00:51 How Wes and Scott met
- 09:31 How Syntax got its name
- 15:30 Getting sponsors
- 18:53 Hasty Treats and expanding the show
- 22:36 Adding interviews to Syntax
- 23:38 Syntax’s first live show
- 27:58 Brought to you by Sentry.io
- 28:34 Acquisition by Sentry
- 33:56 Hiring a producer
- 36:39 Transitioning to video and growing the team
- 41:47 Launching the merch store
- 46:01 The future of Syntax
- 47:23 Sick Picks + Shameless Plugs
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
891: Light and Dark Mode
Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode!
Show Notes- 00:00 Welcome to Syntax!
- 01:05 Brought to you by Sentry.io.
- 02:06 Light and dark mode, things to consider.
- 02:31 Light and dark mode from scratch.
- drop-in.css.
- 04:41 Calculations vs assigned color.
- 05:32 color-mix and relative color.
- 08:15 Foreground and background variables.
- –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%);
- –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%);
- 09:13 Setting color scheme.
- 12:38 light-dark function in CSS.
- 15:48 Manually setting dark mode.
- 19:52 Shoehorning in dark mode.
- 22:25 Other things to consider.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
890: Accepting Money on the Internet in 2025
Wes and Scott talk about the ins and outs of accepting payments online—from choosing processors like Stripe and PayPal to handling fraud, taxes, custom checkouts, and more.
Show Notes- 00:00 Welcome to Syntax!
- 02:34 Payment processors
- 09:29 Checkouts
- 18:22 The checkout flow
- 23:10 Methods of accepting money
- 25:30 Brought to you by Sentry.io
- 28:34 Merchant of Record
- 32:51 Handling fraud, disputes, and refunds
- 41:25 Sick Picks + Shameless Plugs
- Scott: Parcel
- Wes: Parcels App
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
889: Planning A Build
Scott and Wes talk about the planning process for a major redesign of the Syntax.fm website. They share their thoughts on organizing tasks, choosing tech, handling styling, and the debates that come with deciding what to keep and what to change.
Show Notes- 00:00 Welcome to Syntax!
- 01:36 Brought to you by Sentry.io.
- 02:48 Why we need version 3.0 of Syntax.fm.
- 04:41 Project planning and organization.
- 05:53 The codebase.
- 09:50 The CSS changes.
- 12:27 Tooling.
- 15:54 Development process.
- 16:38 Mobile and responsiveness.
- 18:37 Saving VS Code extension into the repo.
- 19:56 Using a dev container.
- 20:53 AI agent rules.
- 21:35 Code styles.
- 23:42 Canadian podcast.
- 24:33 Content storage.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
888: You Need a Monorepo × Client Only React × TanStack + More
887: Vibe Coding Is a Problem
Is Vibe Coding the future of software development or just a fun way to experiment? Scott and Wes talk about coding with AI, the risks of ignoring the details, and the cool (and sometimes cursed) projects they’ve Vibe Coded.
Show Notes- 00:00 Welcome to Syntax!
- 00:31 “Personal Software”.
- 01:30 What exactly is Vibe Coding.
- 02:46 The challenges of coding with AI.
- 04:49 Brought to you by Sentry.io.
- 05:39 Vibe coding quality concerns.
- 07:25 Vibe Coding as a learning tool.
- 10:11 Things we’ve Vibe Coded.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
886: AWS and IAC for Dummies with SST
Wes and Scott talk about Infrastructure as Code and how SST makes deploying to AWS easier than ever. They dive into SST’s features, developer experience, and how it simplifies managing services like databases, email, and more. Plus, insights on Cloudflare integration, auto-scaling, and real-world use cases.
Show Notes- 00:00 Welcome to Syntax!
- 02:37 Brought to you by Sentry.io
- 04:52 Intro to SST config
- 05:40 Overview of Scott’s SST config file
- 12:33 Exploring SST’s endless capabilities
- 15:42 The SST developer experience
- 19:05 SST console and GUI overview
- 22:13 Resource management and pricing
- 24:52 Secrets management
- 27:38 Tunneling and security
- 30:52 Simplifying DNS
- 35:18 Sick Picks + Shameless Plugs
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
885: CSS Fonts Fallbacks, Variable and Trimming
Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type.
Show Notes- 00:00 Welcome to Syntax!
- 01:06 Brought to you by Sentry.io.
- 02:53 @font-face.
- 03:27 Font Display.
- 07:40 Avoiding layout shift.
- 10:45 Variable fonts.
- 16:23 Variable font sizing.
- 17:46 v-fonts.
- 19:10 text-box-trim & text-box-edge.
- 21:28 Browser support.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
884: Typescript Just Got 10x Faster
Wes and Scott talk with Anders Hejlsberg and Daniel Rosenwasser about TypeScript’s leap to native code. They discuss the challenges, trade-offs, and the decision to port TypeScript to Go, unlocking faster compilation, better concurrency, and new possibilities for AI-assisted development.
Show Notes- 00:00 Welcome to Syntax!
- 00:38 TypeScript compiler goes native
- 05:24 Challenges in rebuilding TypeScript
- 08:49 How long has this been in development?
- 10:32 What does porting TypeScript to native entail?
- 16:36 Why choose Go?
- 26:48 The porting process
- 35:02 Brought to you by Sentry.io
- 35:27 Type checking and parallel compilation
- 42:36 Fixing TypeScript’s performance bottlenecks
- 49:09 Large TypeScript codebases
- 54:11 What’s the timeline for the new compiler?
- 58:39 Optimization and AI
- 01:00:32 New features?
- 01:04:15 Sick Picks + Shameless Plugs
- Daniel: pprof-it
- Anders: USB Hand Warmers
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
883: Web Vitals Explained
What are Web Vitals, and why should you care? Scott and Wes break down metrics like LCP, FCP, CLS, and INP, explaining what they measure, how they impact your site’s performance, and how to track them yourself.
Show Notes- 00:00 Welcome to Syntax!
- 03:26 What each web vital means.
- 15:27 How to track this on your own.
- 17:42 Checking the performance of Syntax.fm.
- 21:07 Brought to you by Sentry.io.
- 21:49 Checking the performance of Wes’ site.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
882: Aaron Francis is putting PHP in Your JS Files
Wes and Scott talk with Aaron Francis about Fusion for Laravel, a new way to seamlessly integrate PHP into JavaScript. They discuss how Fusion expands on Inertia, its potential for React support, and how it simplifies full-stack development.
Show Notes- 00:00 Welcome to Syntax!
- 01:22 Aaron’s background in PHP
- 02:27 What is Fusion for Laravel?
- 09:14 How Fusion works
- 13:57 The benefits of Laravel
- 19:18 Invalidation and caching
- 25:20 Brought to you by Sentry.io
- 25:32 Optimistic UI
- 28:28 React integration?
- 31:44 Fusion’s original name (and the naming process)
- 33:30 Laravel’s approach to frontend frameworks
- 37:32 Databases and scaling
- 41:27 Postgres extensibility and hosting options
- 47:44 The vision for Fusion
- 48:31 Sick Picks + Shameless Plugs
- Aaron: Better Display CLI
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
881: What Happened to Remix. Worth Using Axios? Client Only Next.js?
Scott and Wes answer your listener questions! They debate Axios vs. Fetch, discuss whether Next.js is overkill without a backend, talk htmx and Alpine, dive into tech career transitions, and tackle everything from podcast ads to password hashing myths.
Show Notes- 00:00 Welcome to Syntax!
- 00:55 Scott’s health update.
- 04:11 Submit your questions.
- 04:26 Is Axios still worth using over Fetch?
- 10:17 Does Alpine.js solve HTMX’s client-side limitations?
- 16:47 How should I host my database for a local-first app?
- 22:50 Brought to you by Sentry.io.
- 24:14 Should I use Next.js if I want a separate backend?
- 32:08 Are ad networks like BuySellAds worth it for podcasts?
- 36:36 Can I transition from airline pilot to senior software developer?
- 41:23 Is Base64 encoding a valid alternative to password hashing?
- 45:43 How do I use unexported functions from a third-party package?
- 48:09 How do you stay on top of package and browser updates?
- 52:38 Why are Chrome and Firefox’s mobile presets outdated?
- 57:20 Should I give feedback on bad UX/UI designs from agencies?
- 01:01:53 Sick Picks + Shameless Plugs.
- Scott: Nothing Ear (a).
- Wes: SmallRig Phone Cage.
- Wes: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
880: Creator of Home Assistant: Web Components, Self Hosting and Home Hacking
Wes and CJ talk with Paulus Schoutsen, creator of Home Assistant, about the future of smart homes, AI-powered automation, and open-source innovation.
Show Notes- 00:00 Welcome to Syntax!
- 00:29 What is Home Assistant?
- 03:32 Web Components in Home Assistant
- 10:41 Home Assistant’s stability and longevity
- 17:05 Is Home Assistant the biggest open-source project using web components?
- 20:03 How does the native app work?
- 23:34 Code sharing between Android and iOS
- 24:17 Self-hosting Home Assistant
- 28:13 Brought to you by Sentry.io
- 30:47 Bundle size and memory usage
- 32:29 How AI and voice assistants are shaping the future of Home Assistant
- 37:16 How Paulus made it possible to flash microcontrollers directly from the browser
- 43:48 Web Serial and Web Bluetooth APIs
- 47:03 Matter, Zigbee, and Z-Wave – where smart home standards are headed
- 51:17 Paulus’ smart home setup
- 53:16 Sick Picks + Shameless Plugs
- Paulus: Bambu 3d Printer
- Paulus: Nabu Casa
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
879: Fullstack Cloudflare
Wes and CJ break down everything Cloudflare—from Workers and R2 Storage to Hyperdrive and AI Gateway. Get the scoop on what makes Cloudflare tick, the quirks of their ecosystem, and whether vendor lock-in is a real concern.
Show Notes- 00:00 Welcome to Syntax!
- 01:40 Brought to you by Sentry.io.
- 01:58 What we’re talking about today.
- 02:48 Cloudflare Workers.
- 10:26 Cloudflare Pages.
- 12:07 Durable Objects.
- 16:41 Cloudflare Workflows.
- 19:52 How we do something similar on Syntax.fm.
- 20:52 Cloudflare Queues.
- 25:26 Files.
- 26:15 R2 Storage.
- 28:00 The Open Bandwidth Alliance.
- 28:39 Image Pipelines.
- 33:24 Cloudflare Stream.
- 34:24 Data.
- 36:37 Key Value.
- 40:16 Time To Live.
- 41:13 Hyperdrive.
- 44:01 Vectorize Data.
- 45:41 AI Gateway.
- 47:49 Automated Rate-Limiting.
- 48:50 Frameworks.
- 52:13 Analytics Engine.
- 52:52 WebRTC Engine.
- 53:01 Puppeteer API.
- 54:09 Sick Picks + Shameless Plugs.
- CJ: Flush MicroSD Adapter for Macbook
- Wes: Synology.
- Wes: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe
Wes and Scott talk with Daniel Roe about Nuxt and Nitro, demystifying the UnJS ecosystem, serverless deployments, open-source sustainability, and the future of full-stack web development.
Show Notes- 00:00 Welcome to Syntax!
- 02:52 Daniel’s work with Nitro
- 06:01 What’s the connection between Nitro and Nuxt?
- 09:23 What makes something an UnJS package?
- 12:55 Nitro’s built-in features
- 18:21 What would Daniel use to build an app today?
- 28:01 Brought to you by Sentry.io
- 28:36 Nuxt and SST
- 32:25 Nuxt vs. Next.js in 2025
- 40:06 Keeping docs up to date
- 44:46 Who is behind the fantastic design of the Nuxt website?
- 47:27 Why is Vue awesome?
- 52:47 How do you make money in full-time open source?
- 55:32 Sick Picks + Shameless Plugs
- Daniel: DeskPad
- Daniel: React to Nuxt
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
877: Tailwind 4
Tailwind 4.0 is here, and Scott and Wes break down all the spicy new features, from CSS-powered configs to first-class container queries. Plus, they dig into Tailwind Oxide, @property magic, and whether it’s finally time to stop asking, “Why not just use normal CSS?”
Show Notes- 00:00 Welcome to Syntax!
- 00:16 Brought to you by Sentry.io.
- 01:03 Tailwind 4.
- 02:53 Wes’ favorite new feature.
- 05:45 @property.
- 07:28 The config is now a CSS file.
- 08:25 Tailwind Oxide.
- 10:48 P3 color space.
- 12:36 Dynamic Utilities + Variants.
- 13:36 Data attributes.
- 15:32 First class container query support.
- 17:03 Starting Style.
- 19:22 When to use inline styles.
- 20:13 Descendant selector.
- 20:48 Why not just use “normal” CSS?
- 22:03 No text shadow support.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
876: MIDI & Music in the Browser
Wes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started.
Show Notes- 00:00 Welcome to Syntax!
- 01:17 Brought to you by Sentry.io
- 02:04 Fun audio experiments
- 05:32 What is MIDI?
- 14:18 Advanced examples with WEBMIDI.js
- 17:02 Outputting MIDI messages
- 24:40 Exploring the Web Audio API
- 31:20 Audio sampling in the browser
- 37:35 Media Recorder
- 39:21 Fun projects
- 42:08 Sick Picks + Shameless Plugs
- Scott: MX Master 3S
- Wes: Microcontoller
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
875: JavaScript Signals Explained
JavaScript is missing a built-in way to make variables reactive—but Signals might change that. Scott and Wes break down what Signals are, how they compare to React state, and how different frameworks like Preact, Solid, Vue, and Qwik are already using them.
Show Notes- 00:00 Welcome to Syntax!
- 01:49 Brought to you by Sentry.io.
- 02:28 Why JavaScript needs reactive variables.
- 03:16 What exactly are signals?
- 04:02 Understanding computed state.
- 04:59 How signals differ from React state.
- 06:12 How different frameworks handle reactivity.
- 07:09 DOM Parts.
- 07:26 HTML Template Instantiation.
- 09:10 Comparing signals across frameworks: Preact, Solid.js, Vue, and more.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
874: Fast Apps - Easy Perf Wins
Is your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time!
Show Notes- 00:00 Welcome to Syntax!
- 00:58 Brought to you by Sentry.io.
- 02:01 What makes apps slow?
- 02:10 Loading too much.
- 03:26 Slow database work.
- 04:04 Slow server.
- 04:54 Waterfall requests.
- 06:34 How do I know what is slow?
- 06:45 Web vitals.
- 12:50 Streaming.
- 14:05 Network tab.
- 18:18 Performance tab.
- 22:53 Caching.
- 22:59 Client-side caching.
- 23:38 Server-side caching.
- 25:40 Local data.
- 26:11 Gzip.
- 29:23 CDN.
- 30:57 Images.
- 31:08 Serving.
- 34:16 Compressing.
- 35:06 Ship fewer images.
- 35:50 Loading JS.
- 37:00 CSS.
- 38:28 Preloading & Prefetch.
- 39:40 Preloading on hover.
- 41:44 Ship less code.
- 43:49 Icons
- 47:01 Fonts
- 51:13 Sick Picks + Shameless Plugs.
- Scott: Skywalkers on Netflix.
- Wes: Oxo Swivel Peeler.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
873: Standard Schema: The Universal JavaScript Data Interface
Wes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries.
Show Notes- 00:00 Welcome to Syntax!
- 01:24 Brought to you by Sentry.io
- 02:44 What is Standard Schema and how does it work?
- 06:00 Benefits of Standard Schema
- 08:54 Implementation and usage
- 11:25 Is this primarily for end users or library authors?
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths
Wes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech.
Show Notes- 00:00 Welcome to Syntax!
- 01:04 Best container element for a grid of products?
- 04:50 TypeScript null checks
- 09:44 Adapt to AI or get left behind
- 13:13 Why did 3D never take off?
- 18:53 Podcast audio and video in one feed?
- 21:06 Brought to you buy Sentry.io
- 22:30 Best and worst browsers for web dev?
- 27:39 Why use a lock file for managing dependency versions
- 30:34 Should you build your own sync engine?
- 34:21 Best practices when starting a new project from scratch
- 38:33 How to deploy a SvelteKit app on something other than Vercel or Netlify
- 42:54 The reality of online opinions in tech
- 48:10 Spending $120k on an app idea
- 54:12 Sick Picks + Shameless Plugs
- Scott: My Mind
- Wes: Metal Detector
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
871: Coding Agents Cursor + Windsurf Tips
Scott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project.
Show Notes- 00:00 Welcome to Syntax!
- 04:12 What are AI Agents?
- 07:25 Brought to you by Sentry.io.
- 07:50 Chat Mode.
- 08:11 Composer Mode.
- 08:55 Agent Mode.
- 10:03 Inline Chat Mode.
- 11:02 JavaScript Set Methods Demo.
- 16:10 Fire Dispatch Data.
- 20:01 Rules Files.
- 22:37 Use screenshots.
- 23:36 Refactoring to separate files.
- 23:53 Use it to experiment.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding
Wes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development.
Show Notes- 00:00 Welcome to Syntax!
- 00:50 The origins of Windsurf and Codeium
- 03:14 Rethinking IDE UX
- 05:45 Will Microsoft eventually implement these AI features in VS Code?
- 09:27 The "agentic" editor concept
- 17:58 The future of software development with AI
- 24:37 AI in large codebases
- 28:22 Brought to you by Sentry.io
- 28:46 How does AI stay current with frequent language/library updates?
- 33:07 Behind Windsurf's fresh design
- 35:23 Challenges with forking VS Code
- 38:47 AI and future innovations
- 43:04 How Windsurf approaches AI experimentation
- 45:11 Pricing and user segments
- 48:38 Will Windsurf ever run in the browser?
- 50:58 Sick Pick + Shameless Plugs
- Kevin: Ricoh GR IIIx
- Varun: Di2 Shifter
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
869: Node + TypeScript in 2025
Scott and Wes explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno.
Show Notes- 00:00 Welcome to Syntax!
- 00:41 Brought to you by Sentry.io.
- 01:29 Running TypeScript in Node.
- 01:45 Experimental Type Stripping.
- 03:17 TypeScript refresher.
- 04:05 TypeScript can be compiled and/or Type Stripped.
- 05:09 Current Node implementation is only type stripping.
- 05:40 Limitations of no compiling.
- 09:20 Experimental transform types.
- 10:01 Importing types with type keyword.
- 11:17 No need for sourcemaps.
- 11:42 No dependencies.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
868: The State of JavaScript
Wes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks.
Show Notes- 00:00 Welcome to Syntax!
- 00:27 Brought to you by Sentry.io
- 01:16 The state of JavaScript Twitter fantasy football
- 02:27 Syntax features
- 05:27 Logical assignment
- 07:49 Strings
- 08:18 Arrays
- 14:16 Sets
- 16:10 Browser APIs
- 22:50 Library tiers list
- 27:21 Upgrading from M1 Mac
- 30:08 Front-end frameworks
- 32:18 The top front-end frameworks used at work
- 33:49 What is the highest paying framework?
- 35:01 Meta frameworks
- 36:32 Meta frameworks pain points
- 42:33 Testing tools
- 43:58 Build tools
- 44:41 Most used libraries
- 46:33 Back-end frameworks
- 48:34 JavaScript runtimes
- 50:35 Serverless runtimes
- 51:25 Other languages people are using
- 52:49 AI tools
- 53:37 The State of JS Awards
- 57:18 Sick Picks + Shameless Plugs
- Wes: Headted Vest
- Scott: Super Mario Party Jamboree
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
867: Zero Sync is the Future of Data Loading
What’s the deal with Zero Sync? Scott and Wes dive into this cutting-edge database tech, exploring its real-time interactivity, blazing-fast performance, and how it stacks up against the competition. Plus, they break down setup, querying, authentication, and whether it’s ready for prime time.
Show Notes- 00:00 Welcome to Syntax!
- 01:59 Brought to you by Sentry.io.
- 02:21 Today’s agenda.
- 02:52 What is Zero Sync?
- 07:02 Zerobugs loading speed.
- 11:04 Real-time interactivity.
- 11:38 Why is it different?
- 12:11 How to get it set up.
- 20:17 Some extras.
- 21:16 CreateSubscriber.
- 23:08 Can you use this today?
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
866: 2025 Web Development Predictions
Scott and Wes look into their crystal ball to predict what’s coming in web development next year. From the rise of on-device AI to the vanilla CSS comeback, Bun’s big moves, and React’s evolution, this episode is packed with bold predictions and hot takes!
Show Notes- 00:00 Welcome to Syntax!
- 02:00 Brought to you by Sentry.io.
- 03:09 The agenda.
- 03:40 Temporal Javascript api will ship in Safari and Chrome.
- 06:23 On device AI.
- 10:26 Models will plateau.
- 13:40 Web Awesome will become the most used web components library.
- 15:57 We will be using more web components.
- 16:59 A push towards the ‘standard stack’.
- 19:38 We can really use relative color.
- 21:39 Vanilla CSS comeback.
- 23:35 A complete Mixins / Functions API for CSS.
- 24:27 Conditionals will ship in all browsers.
- 25:50 People will still make vertical centering jokes.
- 27:08 VSCode will be feature parity with Cursor.
- 28:22 Framework choice will matter less with AI tools.
- 29:12 OpenAI will launch a browser.
- 37:18 React will drop Babel.
- 38:05 React Server Components will pop.
- 39:46 Remix will relaunch as something entirely different.
- 41:11 React Native will have it’s time.
- 42:06 Svelte will get component-based islands or data loading.
- 44:19 Server Runtimes, Bun will continue to do non-standard, lovable things.
- 44:44 Bun will release a PAS to compete with NPM, Vercel, and Vite.
- 46:06 Laravel will release a CMS.
- 47:57 Vite will stay king.
- 48:03 Rolldown ships in the next version of Vite.
- 49:35 Sick Picks & Shameless Plugs.
- Scott: PHILIPS A19 Ultra Definition Dimmable Light Bulb.
- Wes: Stats App.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd
Scott and Wes challenge each other’s knowledge on everything from array sorting quirks to browser isolation types in a rapid-fire trivia format. They dive deep into performance optimizations, TypeScript type safety, and HTML best practices while uncovering surprising edge cases that every web developer should know about.
Show Notes- 00:00 Welcome to Syntax!
- 00:43 Brought to you by Sentry.io.
- 01:23 Question 1: Array Sort Default Behavior.
- 03:24 Question 2: Splitting Into Individual Words & Characters.
- 06:06 Question 3: NodeJS Stream Backpressure.
- 09:07 Question 4: Custom Middleware Rate Limiting.
- 13:00 Question 5: Transform Function Property Changes.
- 15:18 Question 6: TranslateZ & Will-Change Performance.
- 17:52 Question 7: Table Structure Best Practices.
- 20:23 Question 8: Dialog vs Div with Dialog Role.
- 23:21 Question 9: TypeScript Unknown vs Any & Never.
- 26:31 Question 10: Response Type Safety in TypeScript.
- 29:48 Question 11: Browser Isolation Types.
- 32:54 Question 12: HTML Quirks Mode Behavior.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
864: Durable Objects × Tab State Hacks × Headless CMS Choices + More
Scott and Wes ring in the new year, answering listener questions on the rise of durable objects, handling tricky tab state in e-commerce apps, and their top picks for headless CMS. They also chat about the future of CSS, deployment platforms, and whether Syntax beanies might finally be a thing!
Show Notes- 00:00 Welcome to Syntax!
- 00:52 Brought to you by Sentry.io.
- 03:10 What Are Durable Objects?
- 08:25 CSS Anchor Positioning: Cross-Browser Support Update.
- 12:48 Freelancers: UX and Design Skills vs. Functional Expertise.
- 16:47 Choosing the Best Deployment Platform.
- 20:49 Making Websites WCAG Compliant.
- 22:35 Managing Tab State in Complex Apps.
- 28:43 Will CSS Ever Be Complete?
- 33:21 When Will Syntax Beanies Drop?
- 35:21 The Best Headless CMS for a Tech Blog.
- 42:15 From Many Packages to Monolithic Frameworks.
- 46:41 Sick Picks + Shameless Plugs.
- Scott: The Sheet with Jeff Marek.
- Wes: 28” 4K+ BenQ Programming Monitor.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
863: 2024: A Year in Review
Scott and Wes look back at 2024 and share highlights from a big year for Syntax and the web dev world. They review their 2024 predictions to see what they got right (and wrong), and break down the major moments in web development from CSS improvements to AI editors and beyond.
Show Notes- 00:00 Welcome to Syntax!
- 01:30 Changes to the Syntax podcast.
- 05:56 What happened this year?
- 22:17 What did we do?
- 22:21 React Miami.
- 22:26 JSNation Amsterdam.
- 23:55 JSNation US + React Summit.
- 24:57 Terminal Feud.
- 26:28 Laravel + Terminal basketball game.
- 27:02 Syntax San Francisco meetup.
- 27:23 GitHub Universe.
- 28:07 FITC.
- 28:38 153 Syntax Episodes + Video.
- 29:32 Our 2024 Predictions Reviewed.
- 29:46 Types in JS will have real movement.
- 31:29 Temporal API will ship in 1 browser.
- 32:50 Perf tooling gets easy for everyone to understand.
- 33:29 CSS continues to get better where you need less JS.
- 34:25 Svelte v5 is very fast.
- 34:38 The year of the server in frameworks.
- 35:28 Astro is going to have a good year.
- 36:13 React server components.
- 37:03 Remix moves away from page-based loaders, to component loaders.
- 37:18 Hono will become more ubiquitous.
- 38:28 We will see a route matching Proposal move ahead.
- 39:23 Bun releases full node compat.
- 40:42 We will see a new Linter + formatter entirely replace.
- 42:16 New TypeScript typechecker.
- Ezno.
- 43:40 Lightning CSS pops - or does it?
- 45:10 You’ll hear more about Rspack and Turbopack.
- 45:51 Vite isn’t going to release anything big in 2024.
- 46:24 Relative color will land in all major browsers.
- 48:14 CSS contrast-color will land in chrome.
- 48:48 Scroll animation landing in 2 browsers.
- 50:03 The year of CSS discovery.
- 51:09 Safari will Ship 3 missing PWA Support.
- 52:11 Firefox usage will continue to slip.
- 56:53 Paid Arc features.
- 57:14 More XR web experiences as Apple releases in Vision Pro.
- 59:55 AI Tooling.
- 01:00:57 Small Models that run in the browser.
- 01:01:38 Apps get Sherlocked by OpenAI.
- 01:02:04 On prem corporate AI.
- 01:04:49 Sick Picks + Shameless Plugs.
- Scott: TCGPocket App.
- Wes: Huge Bag of Croc Charms
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
862: Svelte 5 Is Here!
Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains.
Show Notes- 00:00 Welcome to Syntax!
- 01:27 Brought to you by Sentry.io.
- 02:06 What’s new in Svelte 5?
- 36:31 Serif Font on website.
- 40:01 Performance.
- 46:41 Is Svelte becoming React?
- 49:21 Migration.
- 51:41 What’s next and wish list for Svelte.
- 57:12 Sick Picks & Shameless Plugs.
- Scott: Dragon Quest 3.
- Wes: Dresscode.dev.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB
Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure.
Show Notes- 00:00 Welcome to Syntax!
- 00:30 Brought to you by Sentry.io.
- 01:43 Why store data locally.
- 07:08 Where to store data.
- 12:15 BYOJS Storage.
- 13:41 SQlite via WASM.
- 14:12 Penalties of SQLite in browser via WASM.
- 15:29 PGLite.
- 16:23 Dealing with migrations.
- 16:55 The advantages of the approach.
- 18:42 Dexie.
- 19:59 Patch messages.
- 21:25 A few options.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
860: Module Federation Microfrontends with ByteDance’s Zack Jackson
Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.
Show Notes- 00:00 Welcome to Syntax!
- 00:48 Zach background and role at ByteDance
- 03:10 ByteDance’s web and native apps
- 06:48 What is Module Federation?
- 15:49 Evolution from V1 to V2 of Module Federation
- 24:47 When to consider Module Federation
- 29:46 How would you publish a utils package in Module Federation?
- 32:59 How would you do a major upgrade?
- 36:36 Brought to you by Sentry.io
- 37:01 Who owns the update process?
- 39:40 Handling multiple frameworks
- 42:10 ModernJS and Meta frameworks
- 47:20 Does ByteDance have its own JavaScript runtime?
- 50:02 Why Zack built Rspack
- 58:15 The future of Rspack and custom bundlers
- 01:04:24 Module Federation’s major features
- 01:07:29 Sick Picks & Shameless Plugs
- Zack:
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
859: Streaming Video in 2025
Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs.
Show Notes- 00:00 Welcome to Syntax!
- 00:50 Brought to you by Sentry.io.
- 01:15 The history of video streaming.
- 02:10 How video streaming works: The Tech.
- 03:54 How video streaming works: Transcoding.
- 06:37 How video streaming works: Variants.
- 13:13 Dynamic ad insertion.
- 14:29 Bandwidth and hosting.
- Mux.
- 18:03 Cloudflare.
- 19:13 The costs.
- 25:39 Media players.
- 29:42 CDN.
- 32:04 Access control.
- 33:35 Solutions.
- 41:55 Some other features.
- 45:47 Sick Picks & Shameless Plugs.
- Scott: Anker MagGo.
- Wes: PolyCapture.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
858: How to Go Deeper With Your Learning
Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.
Show Notes- 00:00 Welcome to Syntax!
- 02:48 Brought to you by Sentry.io.
- 03:54 How do you go deeper?
- 04:23 Pick a project and build it.
- 06:36 Read the docs.
- 09:07 Read the source.
- 11:19 Consume content: blogs, conference talks, etc.
- 16:24 Discord and Reddit.
- 19:31 Get mentorship and ask questions.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy
Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget.
Show Notes- 00:00 Welcome to Syntax!
- 03:01 Brought to you by Sentry.io
- 04:14 Understanding signal-to-noise ratio
- 06:48 Using de-noise
- 09:12 The importance of mic technique
- 10:28 Dealing with electrical noise
- 11:15 The proximity effect
- 13:01 Sound treatment vs sound proofing
- 23:33 Do egg crates work for sound treatment?
- 25:22 USB mics vs XLR mics
- 27:06 Video composition
- 30:18 How to improve your lighting
- 35:37 Choosing the right camera
- 36:58 The importance of codecs and bitrates
- 38:14 What to look for in a webcam
- 38:50 Randy’s packages for $50, $150 and $500-$1000 budgets
- 40:02 The $50 package/selecting your mic
- 43:53 The $150 package
- 45:32 The $500-$1000 package
- 51:07 Mic stand recommendations
- 56:50 Sick picks & Shameless Plugs
- Randy: etymologynerd on TikTok
- Randy: Randy’s YouTube Channel
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More
Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners.
Show Notes- 00:00 Welcome to Syntax!
- 00:50 Brought to you by Sentry.io.
- 02:23 Apple developer accounts and certificates.
- 06:58 Hono, SvelteKit, and using them together.
- 11:14 Rspack & Rsbuild over Vite?
- 21:01 Quoting projects without seeing under the hood.
- 25:26 HTTP cookies, partitioned cookies, and chips.
- 30:29 Redirect codes; 301, 302, 303, 307
- 36:22 Gaining inspiration for talks and posts.
- 40:02 My loading state is too fast! Should I use setTimeout?
- 42:29 Interviews and landing the job.
- 49:50 Sick Picks & Shameless Plugs.
- Scott: Stainless Steel Cookware.
- Wes: Dim Lightbulbs, steelpan.guy on TikTok.
- Scott: Potluck Submissions.
- Wes: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
855: Fast Websites: The New Speculation Rules API
Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers.
Show Notes- 00:00 Welcome to Syntax!
- 00:49 Pre-loading, prefetching, and pre-connecting.
- 02:06 Brought to you by Sentry.io.
- 03:16 Benefits of pre-loading, prefetching, and pre-connecting?
- 07:02 The Speculation Rules API.
- 08:20 Isn’t that expensive?
- 08:53 Eagerness of the Speculation Rules API.
- 09:55 What is the cost for the site?
- 14:42 What is the cost for the user?
- 15:49 Next Master.
- 18:07 The current prevalence.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
854: Animating the Web With Matt Perry: Exploring motion.dev
Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation.
Show Notes- 00:00 Welcome to Syntax!
- 01:15 The Framer Motion story
- 05:16 What’s the status of Framer Motion today?
- 09:08 What tech is Motion built on?
- 13:40 Is Motion entirely WAAPI?
- 16:06 Why hasn’t the Web Animation API gained more traction?
- 17:46 Does Matt design his demos?
- 19:25 Performance and testing
- 25:34 Brought to you by Sentry.io
- 28:10 Have other animation libraries influenced Motion?
- 31:49 Micro-Optimizations in JS
- 36:02 How do you test frame rates?
- 38:03 Graphics programming and shaders
- 39:58 What is the future of Motion?
- 41:42 What’s the difference between layout animations and the Vue Transition API?
- 46:35 Sick Picks & Shameless Plugs
- Matt:
- Matt:
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
853: The State of Frontend
Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs!
Show Notes- 00:00 Welcome to Syntax!
- 00:53 Brought to you by Sentry.io.
- 01:15 About the survey.
- Follow along! State of Frontend Survey
- 02:10 Frameworks.
- 06:15 Rendering frameworks.
- 07:35 State management.
- 09:14 Other libraries.
- 13:34 Data.
- 16:39 Hosting.
- 19:51 Continuous Integration.
- 21:30 Micro-frontends.
- 23:25 Package Managers.
- 28:35 JS Runtimes.
- 29:47 Typescript.
- 33:13 Browser Technologies.
- 35:05 What is app property?
- 38:20 Progressive Web Apps.
- 40:11 Styling tools.
- 43:17 Testing.
- 45:39 Code editors.
- 49:02 Build tools.
- 49:17 Linting tools.
- 50:26 Operating systems.
- 51:17 The future trends.
- 54:14 Sick Picks + Shameless Plugs.
- Scott: Candle Warmer.
- Wes: Flighty iOS App.
- Scott: Syntax on Bluesky
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
852: Cloudflare Tunnels
Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected.
Show Notes- 00:00 Welcome to Syntax!
- 01:17 Brought to you by Sentry.io.
- 02:09 How do Cloudflare Tunnels work?
- 04:54 Accessing servers when away.
- 07:47 How to set up Cloudflare Tunnels.
- 10:00 Security risks.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
851: The Future of VS Code and Copilot
Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors.
Show Notes- 00:00 Welcome to Syntax!
- 00:32 Cassidy’s keynote at GitHub Universe
- 03:23 New Copilot features
- 04:55 Use cases for prompt engineering
- 09:20 UI and UX enhancements
- 19:18 Copilot Extensions
- 20:38 Brought to you by Sentry.io
- 21:26 Multi-line suggestions?
- 27:00 How do you develop new ideas in this space?
- 35:42 Copilot in Xcode
- 39:16 VS Code experimental features
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
850: Manage State in JavaScript Like a Pro!
Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro.
Show Notes- 00:00 Welcome to Syntax!
- 01:22 Brought to you by Sentry.io.
- 03:10 What is state?
- 03:29 Common state jargon.
- 12:41 Approaches to state management.
- 25:15 Ways to hold state.
- 38:55 Global State vs Component State.
- 40:39 Sharing state.
- 57:02 Sick Picks + Shameless Plugs.
- Scott: Cremo Mens Body Wash, Bentgo Adult.
- Wes: Adult Bento Box.
- Wes: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
849: How to Pick a JS Package
You’ve got a project, and you need the right tool—but how do you know if that JavaScript package is the one? Scott and Wes guide you through finding and validating packages, from checking NPM to scoping out social proof, so you can pick tools you can trust.
Show Notes- 00:00 Welcome to Syntax!
- 00:29 Brought to you by Sentry.io.
- 01:44 How to find a JS package.
- 11:19 Evaluating the quality of a package.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
848: Web Components Can’t Save Us with Scott Jehl
Scott and Wes talk with Scott Jehl about the benefits, challenges, and use cases of web components, particularly in design systems and performance.
Show Notes- 00:00 Welcome to Syntax!
- 00:55 Scott’s background and career
- 06:46 An overview of web components
- 09:06 Why should people care about web components?
- 13:16 Should you write your own web components?
- 14:39 Reactivity in web components
- 15:56 DOM parts
- 18:23 Styling web components
- 22:08 Brought to you by Sentry.io
- 22:33 CSS custom properties
- 24:28 Responsive video
- 28:27 The polyfill use case
- 30:55 Shadow DOM challenges
- 36:04 Web components in design systems
- 41:58 How are people using web components?
- 43:25 Web components and server-side rendering
- 45:00 Scott’s thoughts on build tools
- 47:33 Sick Picks & Shameless Plugs
- Scott: Enhance
- Scott:
- Squarespace is hiring
- Web Components Demystified - Get 30% off with coupon code “syntax”
- Web Components Community Group
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
847: Syntax Holiday Gift Guide
Scott and Wes are back with their annual Syntax Holiday Gift Guide! They’ve curated the best gadgets, tools, games, and even kitchen essentials for the dev in your life — plus a few treats anyone would love to unwrap.
Show Notes- 00:00 Welcome to Syntax!
- 00:46 Brought to you by Sentry.io.
- 01:59 Syntax holiday gift guide.
- 02:25 Our absolute favorites.
- Leatherman Arc.
- Peak Design Everyday.
- 1.5 KG of Maldon, Salt Cellars.
- Anker Cube.
- Anker MagGo.
- Theragun, Off-Brand Massage Gun.
- Subscription to Cursor, Claude, ChatGPT.
- Syntax Swag.
- 13:33 Our (Scott’s) top games.
- 19:01 Gifts under $30.
- Braided USB-C Cables
- Right Angle Thunderbolt.
- Battery Daddy.
- MagSafe Popsocket.
- Hempz Apple Cider + Nutmeg Hand Lotion.
- Mens Cremo Body Wash.
- 27:50 Clothing gifts.
- Uniqlo Stretch Selvedge Denim.
- Naked and Famous Selvedge Denim.
- Scott DU/ER Jeans.
- Wool Toque
- Anything from Huckberry.
- 35:02 Desk item gifts.
- MX3s Master Mouse
- Target Candles
- Candle Melter Wax.
- Laptop Stand
- Rain Design mStand.
- Any Foldable Amazon Stand
- Desk Treadmill.
- Insta360 Link 2.
- Small Rig Rotatable Collar Mount.
- Thermal Printer.
- Cable Management Straps + Clips
- Mini Tripod.
- Super Clamp.
- Fishskyn.
- 45:02 Kids gifts.
- 51:11 Kitchen gifts.
- 59:02 Eatables.
- 01:00:51 Smart home gifts.
- Smart Dimmers
- ESP32 + WS2815 LED Strips
- 01:03:06 Shameless Plugs.
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
846: Talking EVs: Range Anxiety, Charging, and Tech
Scott and Wes unpack their experiences as electric car owners, sharing the highs and lows of making the switch. From range anxiety to charging infrastructure and cost savings, they talk about everything from the tech perks to the unexpected challenges of driving electric.
Show Notes- 00:00 Welcome to Syntax!
- 02:11 Brought to you by Sentry.io.
- 03:14 What cars and how long have we had them.
- 10:41 Range and dealing with range anxiety.
- 11:45 The EPA specs.
- 12:24 Things that affect range.
- 14:46 Charging.
- 17:52 Charging levels.
- 17:56 Level 1 charging.
- 19:01 Level 2 charging.
- 19:39 Level 3 charging.
- 20:10 Charging standards.
- 21:51 Electric car pricing.
- 25:56 Regenerative braking.
- 27:27 General maintenance.
- 29:04 Pricing and expenses.
- 31:48 Machine Gun Kelly Effect.
- 36:46 Would you go completely electric?
- 38:46 Electric-only tech.
- 40:57 Buying a new EV.
- 42:21 Edison Motors website, TikTok.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
845: Are companies hiring? State of the dev job market with Taylor Desseyn
Scott and Wes talk with Taylor Desseyn about the shifting developer job market. Taylor shares practical tips for standing out, building genuine connections, and finding opportunities in a competitive hiring landscape.
Show Notes- 00:00 Welcome to Syntax!
- 01:38 Meet Taylor Desseyn
- 03:51 Is the dev job market as bad as it seems?
- 06:47 How to stand out when applying for a dev job?
- 11:03 Who is getting hired?
- 14:16 What tech/languages are companies hiring for right now?
- 16:37 Is there less work?
- 20:10 The small things that get you hired
- 24:19 What to do when you get laid off
- 27:42 Brought to you by Sentry.io
- 28:07 How to make yourself more appealing to employers
- 32:39 Networking tips and tricks
- 39:01 Remote work and office return trends
- 40:58 Why you should negotiate carefully
- 43:38 What’s the most important thing right now for getting hired?
- 45:48 Should devs understand stakeholders and business goals?
- 46:42 Creating a good resume
- 52:00 Sick Picks & Shameless Plugs
- Taylor:
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
844: TypeScript, Branded Types, Streaming vs Polling + More
Scott and Wes serve up listener questions on everything from SvelteKit’s limits and the quirks of branded types in TypeScript to handling email queues and secure token storage in cookies. Plus, they get into app security, the evolution of checkout flows, and why QA teams can actually be game-changers for dev teams.
Show Notes- 00:00 Welcome to Syntax!
- 00:50 Catching up.
- 01:52 Brought to you by Sentry.io.
- 02:56 What are the limitations of SvelteKit?
- 06:41 Svelte 5 updates.
- 07:53 Branded types in TypeScript.
- 11:56 Queue applications and a ‘poor man’s queue’.
- 17:20 The real value of a functional QA team.
- 21:34 Invoker commands.
- 26:29 Growing security and permissions concerns.
- 33:03 Stripe vs PayPal in 2024.
- 38:24 Christmas gift guide.
- 38:39 Websockets vs streams vs polling.
- 41:04 Storing access and refresh tokens in a cookie.
- 45:41 Shipping with TypeScript errors.
- 49:34 Sick Picks + Shameless Plugs.
- Scott: The Black Stuff Deodorant.
- Wes: Apple Watch Charging Brick.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
843: Copilot Kills Cursor? Reacting to Github Universe Keynote
Scott and Wes react to the big GitHub Universe announcements, recorded live at GitHub Universe. They dive into Copilot’s new features, exploring how its advancements stack up against Cursor AI in the battle for the ultimate AI-driven developer tool.
Show Notes- 00:00 Welcome to Syntax!
- 01:12 Our Syntax Meetup.
- 02:54 AI is everywhere.
- 03:22 Sherlocking and jockeying for position.
- 04:49 GitHub Copilot introduces alternative LLMs.
- 06:31 New tools are build upon existing LLMs.
- 09:14 VSCode reclaiming ground from Cursor.
- 10:31 The new features.
- 10:34 Multi-file editing.
- 10:54 Use-cases for multi-file editing.
- 12:58 Multi-model selection.
- 13:05 Repo indexing.
- 13:50 Copilot instructions.
- 14:34 Examples of Cursor rules.
- 16:39 No mention of multiple-line suggestions.
- 18:02 Multi-file edit?
- 20:26 Code review.
- 22:36 GitHub Pull Requests plugin.
- 24:34 Investing in AI ‘big bets’.
- 26:29 Scott’s mysterious YouTube unreleased feature.
- 27:11 3-minute YouTube shorts.
- 28:29 GitHub Marketplace.
- 32:18 Copilot Workspace.
- 34:53 Copilot Workspace features yet to come.
- 36:25 GitHub Spark.
- 42:44 Final thoughts on Copilot vs Cursor.
- 44:03 What products do you think are in trouble?
- 50:26 Sick Picks & Shameless Plugs.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
842: There's Python in my JavaScript! with Andrea Giammarchi
Scott and Wes talk with Andrea Giammarchi (aka WebReflection) about his projects, including LinkDOM and PyScript, and the exciting future of running Python in the browser via WebAssembly.
Show Notes- 00:00 Welcome to Syntax!
- 01:04 Andrea’s background and early work
- 07:25 Brought to you by Sentry.io
- 09:56 Pyscript
- 14:31 Why run Python in the browser?
- 20:17 Using WebAssembly to run different languages in JS
- 23:33 The advantages of WebAssembly
- 25:55 What excites Andrea about WASM
- 31:10 What is WASI?
- 32:21 Andrea’s experience with IOT and microcontrollers
- 35:35 How can the JS ecosystem be improved?
- 38:07 Should we have reactivity in the browser?
- 41:06 Andrea’s thoughts on server-side APIs
- 43:43 Andrea’s thoughts on TypeScript
- 49:13 Sick Picks & Shameless Plugs
- Andrea: ESP32
- Andrea: Andrea’s X / Twitter
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
841: Spooky Web Dev Horror Stories - PART 2
Scott and Wes continue to share hair-raising developer horror stories submitted by listeners. From accidentally severing access to crucial databases to a limitless coupon code that cost millions, these tales will have you on the edge of your seat. Tune in for more wild mishaps, close calls, and hard-learned lessons from the dark side of coding. You won’t want to miss this second round of spooky web dev stories!
Show Notes- 00:00 Welcome to Syntax!
- 00:49 Brought to you by Sentry.io.
- 01:32 ‘Monkey Business’
- 03:21 ‘Spooky Integration Bug’
- 06:25 ‘Worst Case Wake Up’
- 08:57 ‘Severed Trunk and Missing Backups’
- 11:21 ‘Brute Force Too Brutal’
- 12:30 ‘A Dorm Room Bee Movie’
- 15:46 ‘No Goats’
- 16:45 ‘Pokémon Problems’
- 18:08 ‘Late Night’
- 22:21 ‘Bootcamp Bungle’
- 26:19 ‘Film School F*** Up’
- 30:26 ‘AWS Clusterf***’
- 31:26 ‘Limitless Coupon Disaster’
- 33:55 ‘Ruined Vacation’
- 35:47 ‘Console.swear’
- 37:28 ‘Another Coupon Disaster’
- 40:46 ‘The Doctor’
- 43:01 ‘Marketing Nightmare’
- 45:10 What did we learn this year?
- 53:58 Sick Picks + Shameless Plugs.
- Scott: Nobody Wants This.
- Wes: Truffle Hot Sauce.
- Scott: syntax.fm.
- Wes: syntax.fm/spooky.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
840: Spooky Web Dev Horror Stories - PART 1
Scott and Wes unpack the spookiest web dev stories submitted by listeners in this episode. From forgotten MX records to infinite loops, these real-life coding horrors will have you double-checking your WHERE clauses and git backups.
Show Notes- 00:00 Welcome to Syntax!
- 00:39 Brought to you by Sentry.io.
- 00:48 What is Spooky Stories?
- 02:45 ‘Needs a Coffee’
- 04:43 ‘Deleting Github’
- 07:42 ‘Rejected’
- 09:08 ‘Infinite Loop’
- 09:26 ‘MySqueeel Horror’
- 11:02 ‘Pet Company’
- 12:09 ‘Git Corrupted’
- 12:57 ‘Circular Horror’
- 14:25 ‘The Haunting of the Forgotten MX Records’
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt
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
- 20:47 Serverless challenges and solutions
- 27:11 Cloudflare’s potential to dethrone AWS
- 29:13 Prisma and local-first development
- 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
- Søren: Cursor
- Søren:
- 1: Prisma Optimize
- 2: Prisma Postgres (coming soon)
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
838: Productivity Tools for Web Developers
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.
- 05:18 Password management.
- 08:30 Apple stomping on apps.
- 09:50 To-do applications.
- 18:18 To-do in code.
- 20:21 Snippets.
- 25:55 Mind-mapping.
- 29:01 Note-taking.
- 36:34 Little scripts.
- 39:50 Email.
- 48:11 Some honorable mentions.
- 52:10 Sick Picks + Shameless Plugs.
- Scott: The Legend of SwordQuest.
- Wes: The Economics of Everyday Things.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
837: You Should Drop Express and Try Hono
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?
- 03:21 Syntax Meetup San Francisco.
- 04:02 Why I like Hono, and why you should try it.
- 04:08 Familiar route creation.
- 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.
- 15:46 Defining base type.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
836: Real Talk on Web Accessibility with Marcy Sutton Todd
835: How to Pick a JavaScript Framework
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?
- 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.
- 26:59 Does it have RPC or server actions?
- 34:27 Do you need authentication?
- 38:45 Auth packages.
- 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.
- CJ: Infinite Health.
- Scott: USB A to C adapters.
- Wes: Citric Acid.
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
834: AI Will Improve Your Web Development Workflow
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
833: Next Gen Fullstack React with TanStack
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?
- 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?
- 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
- Tanner:
- Tanner:
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
832: Potluck: When to Use a Framework × Goodbye Webpack × Custom Events in React + More!
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.
- 09:10 Question 2: Working together with QA teams.
- 13:46 Question 3: Benefits of React with Next.js Framework.
- 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?
- 29:34 Question 7: From JR developer to SR developer.
- 31:41 Question 8: Godot and game development.
- 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.
- Scott: audiobookshelf, Plappa App.
- Wes: New Syntax Swag.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
831: Preventing Spam and Fraud
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
830: GitHub and Code Reviews with Sarah Vessels
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?
- 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
- 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?
- 34:35 Underutilized tools
- 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?
- 46:58 Sick Picks & Shameless Plugs
- Sarah: https://github.com/sponsors
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
829: 14 Web Development Tips I Wish I Knew Sooner
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.
- Scott: Glasses.
- Wes: Oxo Whisk, Danish Whisk.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
828: Logging in Verification: Magic Links, 2FA, SMS Codes
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.
- 06:21 Magic Sessions.
- 10:51 Gmail verification options.
- 12:01 OAuth.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
827: Career Development with Topher Martini
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
- 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
- 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
- Topher:
- Topher: Topher’s YouTube Channel
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
826: You Need These 30 Apps - PART 2
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.
- 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.
- 41:34 Development tools.
- 51:42 Sick Picks & Shameless Plugs.
- Scott: Untold Sign Stealer.
- Wes: Magentiles Marble Run.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
825: Syntax Assistant Desktop App
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.
- 08:32 Markdown editor.
- 09:32 Epoch timestamps.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
824: Taylor Otwell's opinions on PHP, React, Laravel and Lamborghini Memes
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
- 07:18 Why don’t we have a “Laravel for JavaScript”?
- 09:02 What parts of Laravel came first?
- 10:07 The Laravel ecosystem
- 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
- 37:30 Taylor’s thoughts on WordPress
- 38:14 Lambo memes
- 43:44 Taylor’s coding setup
- 45:36 Sick Picks + Shameless Plugs
- Taylor:
- Taylor: Laravel Cloud
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
823: Is Cursor AI the VS Code Killer?
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.
- 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.
- Scott: The Iron Historian, Scott’s Salt & Pepper Mills.
- Wes: Oxo Salt & Pepper Mills.
- Scott: Syntax.fm Zed Theme.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
822: Receipt Printer with JavaScript
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.
- 02:40 Why a receipt printer?
- 03:55 How do these printers work?
- 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’.
- 10:48 Back to socket issues.
- 12:18 Integrating with Sentry.
- 15:01 Printing images with Playwright.
- 16:17 Was it worth it?
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
821: Is Tauri the Electron Killer?
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
- 25:05 How does Tauri make money?
- 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?
- 37:00 Some of the apps that have shipped with Tauri
- 43:18 The future of Tauri
- 50:23 Sick Picks & Shameless Plugs
- Daniel: 5secondfilms
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
820: Potluck: 8000 ESLint Errors × HTML Time Tag × 7 Meg React Bundle × CSS Modules
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.
- 29:44 Balancing learning, doing, and teaching.
- 33:04 Making maps local first.
- 36:20 How to pronounce ‘schema’.
- 37:09 HTML tag.
- 40:11 Where to get replacement ear cups for headphones?
- 42:21 ESLint and hiding errors.
- 48:48 Sick Picks & Shameless Plugs.
- Scott: Allen Wrench Set.
- Wes: Clarkson’s Farm – Amazon Prime.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
819: Fun & Profitable Side Projects for Developers
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?
- 20:34 Keeping notes.
- 23:14 Finishing side projects.
- 26:39 Shameless Plugisode!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
818: CJ × Hosting Meetups - Lunch and Learn
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
- 06:35 How do you structure a meetup?
- 09:50 How do you raise awareness for a meetup and get people to attend?
- 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?
- 19:32 Is there a vetting process for finding speakers?
- 24:26 A meetup doesn’t have to be talks
- 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
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
817: You Need These 30 Apps - PART 1
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.
- 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.
- 40:19 Alternatives to popular Mac applications.
- 50:25 Sick Picks & Shameless Plugs.
- Scott: Wilde Chips
- Wes: Apple TV+: The Big Conn
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
816: Why Your CSS Sucks
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.
- 21:16 You aren’t using the right tool for the job.
- 24:15 You’re setting the value in too many places.
- 24:31 You’re scoping to tightly or not tightly enough.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
815: Deno 2 with Ryan Dahl
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
- 28:42 Will we ever see a unified file system API?
- 31:49 Typescript
- 36:12 Jupyter Notebooks with Deno
- 39:11 AI and WASM in JavaScript
- 42:01 Deno 2.0 features and future
- 43:08 Sick Picks & Shameless Plugs
- Ryan: McCarren Park
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
814: Fundamentals: HTML
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
- 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
- 34:16 Form
- 36:56 Button vs Anchor
- 38:22 Headings
- 40:21 Output
- 41:46 Dialog
- 42:04 Tables
- 44:03 Media
- 45:06 Canvas
- 46:07 On graphics programming
- 47:38 Search
- 48:27 Sick Picks + Shameless Plugs
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
813: CSS: Scroll Driven Animations
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.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
812: CSS 4, 5, and 6! With Google’s Una and Adam
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.
- 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?
- 27:33 - New features Una is excited about.
- 29:44 - Select.
- 38:31 - New features Adam is excited about.
- 39:24 - text-box-trim.
- 40:59 - State queries.
- 54:56 - Sick Picks + Shameless Plugs.
- Una: Logitech MX Master 3
- Adam: Teenage Engineering K.O. II
- Una: Una.im
- Adam: The CSS Podcast
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
811: NodeJS Evolves
In this episode of Syntax, Wes and Scott talk about the latest features in Node.js, including native support for TypeScript, .env parsing, a built-in test runner, watch mode, SQLite integration, glob support, and top-level await. They also discuss some wishlist items, and experimental features like WebSocket support and the require module.
Show Notes- 00:00 Welcome to Syntax!
- 01:13 Brought to you by Sentry.io.
- 01:37 Node.js new features.
- 02:51 TypeScript.
- 10:03 SQLite v22.5.
- 14:35 .env support.
- 16:24 Test runner.
- Jest.
- 19:42 Watch Mode.
- 21:22 Glob support.
- 22:48 Top-Level Await.
- 26:40 Experimental require module.
- 29:39 Experimental WebSocket support.
- 30:13 Async local storage.
- 31:43 Single file executables.
- 32:46 Wishlist.
- 41:36 Twitter responses.
- 46:54 Sick Picks + Shameless Plugs.
- Scott: Cascadia
- Wes: Roborock Qrevo
- Scott: YouTube Channel
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
810: Effortless Light and Dark Mode × Theme Styling
In this episode of Syntax, Wes and Scott talk about the latest CSS theming properties and techniques for better controlling light and dark modes, as well as creating comprehensive color systems for applications and websites. Make sure to check out the video version of this episode for practical code examples, and explanations of light/dark function, CSS variables, meta tags for theme colors, accent color, color mix, and upcoming features like style queries and color contrast.
Show Notes- 00:00 Welcome to Syntax!
- 01:36 Brought to you by Sentry.io.
- 03:45 theme-color.
- 10:12 color-scheme.
- 15:14 light-dark().
- 17:44 How to force light or dark mode.
- 23:03 Live debugging box-shadow.
- 28:05 color-mix().
- 29:53 accent-color.
- 31:27 Relative color syntax.
- 35:49 Style queries and color-contrast().
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
809: How To Stay Up To Date with Daily.dev’s Francesco Ciulla
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
- 22:21 Written content vs video content
- 24:29 Tech stack
- 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
- 39:38 Francesco's favorite Rust framework
- 41:18 Sick Picks & Shameless Plugs
- Francesco: daily. dev
- Francesco: Francesco's YouTube Channel
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!
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
- 14:27 - When to use an API
- 17:38 - Where does Scott get his amazing t-shirts?
- 21:33 - Best screwdriver for kids toys
- 24:31 - Strategies for database design
- 30:21 - Do we need frameworks?
- 32:19 - Best tech stack for building a basic login system
- 37:56 - Syntax video episodes
- 40:25 - Component props in JSX
- 45:26 - Sick Picks & Shameless Plugs
- Scott: Loop Quiet Ear Plugs
- Wes: Gecko’s Toes Water Hose Rack
- Scott: Syntax YouTube Channel
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
807: CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!
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
- 21:07 - How is Panda different from style components?
- 00:00 - Utility CSS
- 31:08 - Utility Sprinkles
- 34:13 - CSS variables
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
806: The King of Drag and Drop: Alex Reardon
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
- 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.
- 40:00 How does testing work?
- 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.
- Alex: Coffee, James Hoffmann YouTube Channel.
- Alex: Dom Events.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
805: We React to State of React Survey
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.
- 11:58 Hooks Pain Points.
- 13:11 New API Pain Points.
- 15:19 Libraries.
- 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.
- Scott: Thermacell.
- Wes: Nerf Guns
- Wes: Syntax.fm.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
804: Should Your Website Work Without JavaScript?
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.
- 15:20 Progressive Enhancement.
- 17:24 CSS Page Transitions.
- 19:07 Let’s test websites out.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
803: The SQLite Takeover with Turso’s Glauber Costa
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.
- Glauber: Understanding yourself, What is Aphantasia.
- Glauber: React Rally Park City, UT, Turso, Laravel.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
802: Tree Shaking × useMemo vs useCallback × JavaScript Event Loop - STUMP'd
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.
- Scott: diskprices.
- Wes: Slime Tire Sealant.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
801: 6 New JavaScript Proposals
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
800: Why the jQuery Creator Uses React and Typescript - John Resig
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.
- 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?
- 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.
- John: Khan Academy.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
799: Hot New and Under-Utilized Browser APIs
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!
- 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.
- 11:56 calc-size(auto).
- 16:19 scroll-snap.
- 22:05 View Transitions.
- 33:28 Popover API.
- 41:15 Dialog.
- 48:12 Details.
- 53:26 Sick Picks & Shameless Plugs.
- Scott: Emerge Tools.
- Wes: Apple TV+ Hacks.
- Scott: Local First from Scratch.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
798: Self Hosting: Reverse Proxy Servers
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?
- 15:55 Caddy × websocket support.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
797: Drizzle: The TypeScript SQL ORM
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!
- 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.
- 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.
- 44:00 Being a developer in Ukraine in 2024.
- 51:07 Drizzle is expanding.
- 53:50 Sick Picks + Shameless Plugs.
Andrew - Smart Swim Goggles.
Shameless PlugsAndrew - Savelife, United24. Scott - Syntax × Drizzle Swag.
Hit us up on Socials!Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
796: Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native
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.
- 25:19 Why do we need frameworks?
- 33:05 Handling ad-blockers blocking Sentry and other tools.
- 38:25 Creating sites without JavaScript.
- 42:49 Do I really have to learn all the various developer tooling?
- 44:47 What are the best ways to network and meet other developers?
- 50:16 Sick Picks & Shameless Plugs.
- Scott: Tweek App/
- Wes: Rain-X Waterless Car Wash.
- Scott: Swag Store.
- Wes: Audio Player Updates.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
795: Hosting Private Fonts on the Edge With Cloudflare
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.
- 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?
- 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
794: Prettier JavaScript with Vjeux
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.
- 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?
- 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?
- 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.
- Vjeux: TransformersJS.
- Vjeux: Prettier x Syntax Swag.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
793: The Local First Landscape
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.
- 04:27 Some local first apps we love.
- 05:15 The advantages of local first.
- 06:07 localfirstweb.dev.
- 48:21 Sick Picks & Shameless Plugs.
- Scott: Battery Jump Starter.
- Wes: Battery Tire Pump.
- Wes: Syntax Swag
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
792: Perfect Sitemaps for SEO
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!
- 02:09 Brought to you by Sentry.io.
- 02:39 Sitemaps.
- 04:36 Why do you need a sitemap?
- 06:34 Sitemap file formats.
- 10:50 Fields and metadata.
- 10:58 What fields matter for SEO?
- 14:20 What to avoid in your sitemap?
- 17:07 How do you make a sitemap?
- 20:06 What to do once you have a sitemap.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
791: LLRT The Serverless Runtime w/ Richard Davison
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.
- 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.
- 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.
- Richard: QuickJS Engine, JSLinux.
- Richard: Javascript
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
790: State of JS 2023 Reactions
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!
- 03:04 Brought to you by Sentry.io.
- 03:43 New Syntax Swag!
- 04:42 Front end frameworks.
- 08:30 Front end framework pain-points.
- 12:17 Metaframeworks.
- 17:45 Metaframework pain-points.
- 22:17 Build tools.
- 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.
- Scott: Electric Lighter.
- Wes: Monkey Noodle.
- Wes: Syntax Swag Store.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
789: Do More With AI - LLMs With Big Token Counts
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?
- 04:22 Context window sometimes called “max tokens”.
- 10:42 Understanding input length.
- 11:59 Models + services with big token counts.
- 13:22 Generating open API documentation for a complex API.
- 17:29 Generating JSDoc style typing.
- 21:07 Generating seed data for a complex database.
- 24:34 Summarizing 8+ hours of video.
- 29:35 Some things we’ve yet to try.
- 31:32 What about cost?
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
788: Supabase: Open Source Firebase for Fullstack JS Apps
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?
- 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.
- 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.
- 48:24 Who runs the X account?
- 50:39 Sick Picks + Shameless Plugs.
- Paul: Apple Vision Pro.
- Paul: PostgreSQL.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
787: You Should Try Vue.js
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.
- 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.
- 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.
- 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.
- Scott: Jordan Roam Slides.
- CJ: USB Charging Hub
- Scott: Syntax on GitHub
- CJ: Syntax.fm
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
786: What Open Source license should you use?
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.
- 01:56 What is open source?
- 03:19 This is not legal advice.
- 03:51 Source available ≠ open source.
- 06:39 The benefits of open source.
- 11:29 Types of licenses.
- 26:56 Choosing and acknowledging licenses.
- 29:13 Applying a license to your directory.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
785: What’s Next for Next.js with Tim Neutkens
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?
- 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.
- Tim: Apple TV Sci-Fi.
- Tim: Turbopack, Next.js 15 RC, Sentry NextJS.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
784: Logging × Blogging × Testing × Freelancing
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.
- 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.
- 17:38 Using LangChain when working with LLMs.
- 21:03 CSS Hyphens and 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.
- 43:04 UI libraries for synth/audio plugins.
- 44:02 CSS module scripts.
- 48:39 Sick Picks + Shameless Plugs.
- Scott: Deep Cover Podcast.
- Wes: Pressure Washer Surface Cleaner.
- Wes: Syntax.fm/videos.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax
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.
- 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.
- 26:10 Media score.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
782: The Developer’s Guide To Fonts with Stephen Nixon
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?
- 05:42 What is a type foundry exactly?
- 09:09 Font / type making.
- 09:15 How do you make a font?
- 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.
- 20:28 Do you code your demo sites yourself?
- 21:50 Are variable fonts more complex to design (and develop).
- 27:03 Hand painted fonts.
- 29:39 Creating a monospace font.
- 32:19 Creating fonts with dyslexia accessibility in mind.
- 37:58 Typography for the web.
- 50:34 Supper Club Questions.
- 58:49 Sick Picks + Shameless Plugs.
- Stephen: Children of Time, No-Recipe Recipes.
- Stephen: ArrowType, Skewing Fonts.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode
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.
- 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.
- 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.
- 50:23 Code quality vs tackling tickets.
- 55:36 Sick Picks + Shameless Plugs.
- Scott: Quick Look Plugins.
- CJ: Sony WFC700n-b.
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
780: Cloud Storage: Bandwidth, Storage and BIG ZIPS
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.
- 08:16 Why you may need larger storage.
- 09:49 The big players in this space.
- 14:34 Storage fees.
- 18:31 Why so cheap?
- 20:49 Bandwidth (egress).
- 26:46 Operation fees - costs money.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
779: Why SQLite is Taking Over with Brian Holt & Marco Bambini
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.
Brian: Trainer Road Marco: Tennis
Shameless Plugs Hit us up on Socials!Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
778: 11 Habits of Highly Effective Developers
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!
- 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.
- Scott: Solar Lanterns.
- Wes: Ninja Obstacle Course.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
777: The Modern Dev CMS - Pocketbase
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.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
776: How 1Password Uses WASM and Rust for Local First Dev With Andrew Burkhart
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?
- 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.
- 52:50 Sick Picks + Shameless Plugs.
- Andrew: Nix Mini 3, Asynchronous Programming in Rust.
- Andrew: 1Password.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
775: Components We Need on Every Project
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.
- 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.
- 35:46 Bonus tip on becoming a better developer.
- 36:29 Admin menu.
- 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.
- 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.
- 52:13 Sick Picks + Shameless Plugs.
- Scott: Supercommunicators.
- Wes: Klack, Mech Vibes.
- Scott: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
774: Promise Flow Control, Concurrency, Libraries, TypeScript and Deferreds - Part 3
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.
- 06:10 Fetch.
- 09:04 Flow Control.
- 12:19 Concurrency, Throttling, Queuing.
- 16:13 TypeScript and Promises.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
773: React Native with Robin Heinze
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?
- 07:13 What about Twitter + Facebook?
- 09:15 What is Expo? Is Expo Required?
- 13:27 Does it require a Mac to build an iOS app?
- 14:58 React Native and routing.
- 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?
- 21:02 React Native app styling on Android and iOS.
- 22:20 React Native’s own JavaScript engine.
- 23:30 Does Hermes have full JS support?
- 23:52 What is the new architecture of React Native?
- 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.
- 37:14 State management.
- 39:30 What are some tools + libraries that you install on most projects?
- 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.
- Robin: Awesome Sock Club Wes’ X Post.
- Guest: Infinite Red, ChainReactConf, React Native Radio.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
772: React Server Components with PHP, Selling Accessibility, WTF is Cloudflare + more
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!
- 01:37 Brought to you by Sentry.io.
- 02:38 Rewarding hard work with more work.
- 07:14 April Fools Episode.
- 09:03 Teaching programming to your family.
- 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.
- 45:42 Cloudflare, what the heck is it?
- 50:49 Sick Picks + Shameless Plugs.
You’re looking for this > Swag Drop.
Sick Picks- Scott: Folex.
- Wes: CalDigit TS4.
- Scott: Syntax on YouTube
- Wes: Ditto
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
771: Promises: Error Handling, Aborts, and Helper Methods - Part 2
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.
- 12:08 Error handling strategies.
- 17:30 Promise.race() example.
- 18:54 Static Promise.reject() and .resolve() methods.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
770: Design Systems With Brad Frost (Rereleased)
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.
- 57:12 Sick Picks + Shameless Plugs.
- Brad: Rubblebucket.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
769: React Miami Live Show
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
768: React 19 is here!
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.
- 24:14 Upgrading to React 19.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
767: Local First and TypeScript’s Missing Library with Johannes Schickling
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.
- Johannes: Open Telemetry, Sentry Open Telemetry.
- Johannes: localfirst.fm.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
766: React Server Components: Form Actions + Server Actions
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.
- 11:31 Some examples of actions.
- 12:54 Can these actions be done in a client component?
- 13:40 Where to use actions.
- 17:13 How to actually use an action.
- React Hooks
- 24:38 Action inputs.
- 26:13 Server vs client.
- 28:30 This is not PHP.
- 30:31 What is optimistic UI?
- 37:02 Some final thoughts.
- 40:18 Sick Picks + Shameless Plugs.
-
Good Follows: Alex Katt.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
765: JS Promises Fundamentals - Part 1
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.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
764: Biome JS with Emanuele Stoppa
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
763: Web Scraping + Reverse Engineering APIs
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.
- Scott: KeyboardCleanTool.
- Wes: Yabai.
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
762: What to Steal. Finding Inspiration in Web Development
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?
- 11:20 What is NOT okay to steal?
- 18:48 What we’ve had stolen + how it feels.
- 21:45 Where to find inspiration.
- 35:25 How to capture inspiration.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar
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
- Ben: Randy’s YouTube, Boom.
- Ben: Counterscale.dev
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
760: Pro VSCode Setups
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.
- 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.
- Scott: Syntax Newsletter.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
759: How to Easily Explore Coding Ideas
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.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
758: Web Awesome with Konnor Rogers + Cory LaViska
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.
- Konnor: Enhance.dev, Extism.org
- Cory: Lit.dev
- Cory: Kickstarter
- Konnor: Everyone involved in open UI
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More
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.
- Scott: Hair Powder
- Wes: Mini Grease Gun
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
756: CSS Is Getting Mixins + Functions
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk
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?
- Oliver: Defunctland YouTube, LEMMiNO YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
754: How to Level Up Your Web Development Career
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.
- Scott: Zeiss Lens Care Pack
- Wes: Woosh Screen Cleaner
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
753: Cache Ruins Everything Around Me
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?
- 08:26 Content negotiation.
- 08:54 The solutions.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
752: React vs Vue vs Angular with Corbin Crutchley
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.
- Corbin: Shiki Syntax Highlighter
- Corbin: Framework Field Guide
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI
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?
- 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.
- 26:00 Unstyled components.
- 38:23 What’s up with Google’s design?
- 40:22 Styled Starters.
- 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.
- 59:02 Sick Picks & Shameless Plugs.
- Wes: Battery Daddy
- Scott: Lazy Susan, Rechargeable Batteries, Charger
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
750: New CSS and JavaScript You Should Be Using
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
749: Coding Shopify with Anne and Trudy of Design Packs
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.
- Trudy: Bar of Shampoo
- Anne: Alie Ward Ologies Podcast
- Trudy: 25% off using SYNTAX25 at Design Packs
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
748: Fitness Will Make You a Better Developer
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.
- Wes: Wikday Pull Up Bands
- Scott: Booty Bands
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
747: Middleware Explained
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.
- 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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan
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?
- Turing 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.
- David:
- David:
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
745: Modern JS Toolchains (Biome, Oxc + More)
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.
- 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.
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
744: Docker For Developers
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.
- 05:26 Why would a web developer want to use Docker?
- 08:19 How do you get started with Docker?
- 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
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
743: JavaScript Figma Plugins & Working at GitHub With Cameron McEfee
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.
- Cameron:
- Cameron: GuideGuide 50% off
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
742: Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns
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?
- 04:58 What are the web development fundamentals for beginners?
- 08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks?
- 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?
- 35:59 What is SemVer anyway?
- 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?
- 52:12 Sick Picks + Shameless Plugs.
- Scott: Ellenos Yogurt
- CJ: Flat Iron Pepper
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
741: TypeScript Interview Questions - STUMP’d
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
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
740: Local AI Models in JavaScript - Machine Learning Deep Dive With Xenova
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.
- Xeonva: WebGPU
- Xenova: Xenova on X
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
739: The LoFi Movement: Building Local First Apps
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.
- 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.
- 43:30 Sick Picks + Shameless Plugs.
-
Wes: Dresscode.dev
-
Scott: Monarch Money
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
738: Little Scripts: Coding for your Co-workers
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.
- 22:05 Get in touch with your tips.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
737: JSR: The New TypeScript Package Registry (NPM Killer)
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.
- Luca: Hono
- Luca: jsr.io
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
736: CJ Reynolds is Joining Syntax
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.
- CJ: Ergonomics, More on Ergonomics
- Scott: Project Farm YouTube trash bag comparison
- Wes: Kitchy Pizza Cutter Wheel
- CJ: Coding Garden
- Scott: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
735: The Taliban Stole My Domain
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
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
734: HTMX Web Apps with Carson Gross
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.
- Carson: Hypermedia Systems, HTMX Swag
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
733: Egress, scraping, Safari EU changes, is SetInterval worth it?
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.
- Scott: LED Flashlight
- Wes: Syntax YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
732: Stop going to Spam: DMARC, SPF and DKIM Explained
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
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
731: Client side security, XSS attacks & CSP with Stripe’s Alex Sexton
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
- Alex: Wes Bos’ Instagram
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
730: Own Your Own PaaS
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?
- 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.
- Wes: GripStic Chip Bag Sealer Amazon, GripStic Chip Bag Sealer Aliexpress
- Scott: Caseta Diva Smart Dimmer
- Wes: Syntax YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
729: CSS Native @scope
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.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
728: AI Superpowers with Kevin Hou and Codeium
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
- Kevin: Lapse.com
- Kevin: Codeium.com
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained
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
- 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.
- 55:03 Sick Picks + Shameless Plugs.
- Scott: GreatScottLab, Show #594
- Wes: AliExpress Board, Wes’ Demo
- Scott: Syntax on YouTube
- Wes: Syntax on YouTube
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
726: Is HTMX a Joke?
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.
- 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
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
725: Safari is the New Chrome - Jen Simmons of Apple
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:00 Welcome to Syntax!
- 00:03 Brought to you by Sentry.io
- 01:05 Meet Jen Simmons.
- 03:15 Safari has been killing it lately
- Safari Release Notes
- WebKit Features in Safari 17.0
- WebKit Features in Safari 17.1
- WebKit Features in Safari 17.2
- 10:25 Wes’ cOnSpirACy about Apple and APIs
- 18:18 Where is the best place to report bugs to Apple?
- Bugs.Webkit.org
- Jen on Mastodon
- Web Compat
- 20:35 What’s happening with CSS Color gamuts and models?
- 33:57 Is contrast color ever going to to land?
- 36:25 Where is the CSS Grid and Masonry proposal at?
- 44:20 Will we be able to target a specific row in a grid?
- 46:17 What are CSS switch controls?
- 48:44 How can web devs view their websites in Vision Pro devices?
- Apple Vision Pro
- Running your app in Simulator or on a device
- 54:26 In what ways are HTML / CSS / JavaScript running where we don’t realize it?
- 58:43 Sick Picks
- Jen: Walking.
- Jen: webkit.org X
- Feedback Assistant at Apple
- Sessions - WWDC23 - Apple Developer
- 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
Syntax: X Instagram Tiktok LinkedIn Threads
724: Potluck: Is Virtual DOM Bad?
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
- Scott: Perplexity.ai, Serversideup
- Wes: Zojirushi Rice Cooker
- Wes: Wes Bos Courses
- Scott: Sentry
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Randy: YouTube
723: Svelte 5: Speed Simplicity Size
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
Syntax: X Instagram Tiktok LinkedIn Threads
722: Next Level Web APIs. Bluetooth, File Access, Thomas Steiner - Project Fugu
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
- Laser printers
Syntax: X Instagram Tiktok LinkedIn Threads
721: You should learn Drizzle, the TypeScript SQL ORM
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
- Scott: BlackBerry - Apple TV (CA)
- Wes: Candle Warmer Lamp
Syntax: X Instagram Tiktok LinkedIn Threads
720: Where Does Time Come From?
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
Syntax: X Instagram Tiktok LinkedIn Threads
719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux
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
Syntax: X Instagram Tiktok LinkedIn Threads
718: React Server Components
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
- Scott: ASUS ZenDrive V1M External DVD Drive
- Wes: Leatherman Arc
- Scott: Syntax YouTube
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
717: How to be Productive
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
Syntax: X Instagram Tiktok LinkedIn Threads
716: JS Perf Wins & New Node.js Features with Yagiz Nizipli
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
Syntax: X Instagram Tiktok LinkedIn Threads
715: Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck)
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
- Scott: Sleeping Queens Card Game, 79 Cards : Toys & Games
- Wes: Package drop box
- Scott: Syntax Newsletter
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
714: CSS :has() in Every Browser! 10 Uses
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
Syntax: X Instagram Tiktok LinkedIn Threads
713: The CSS OG Eric Meyer. 1994 CSS, JS in Fridges, Tailwind, and Web Standards
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
Syntax: X Instagram Tiktok LinkedIn Threads
712: 2024 Predictions
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
- Scott: Syntax Newsletter
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
711: The Surprisingly Exciting World of Print + PDF CSS
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
- 14:31:10 Named Pages
- 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
Syntax: X Instagram Tiktok LinkedIn Threads
710: A Passwordless Future Passkeys with Anna Pobletts
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
-
FIDO Alliance - Open Authentication Standards More Secure than Passwords
Syntax: X Instagram Tiktok LinkedIn Threads
709: Potluck × Naming Tech × Generators × Layers Follow Up × Sick Picks Page
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
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
708: How We Made Syntax.fm Faster
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
Syntax: X Instagram Tiktok LinkedIn Threads
707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!
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
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
706: AI and ML - The Pieces Explained
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
Syntax: X Instagram Tiktok LinkedIn Threads
705: Is Running Random Code From npm Safe? With Feross Aboukhadijeh
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
Syntax: X Instagram Tiktok LinkedIn Threads
704: Stump'd JS + CSS Interview Questions
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
- Scott: Pushpin hangers
- Wes: Niimbot Label Maker, Bearclaw Screws)
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
703: The Observer Pattern
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
Syntax: X Instagram Tiktok LinkedIn Threads
702: New + Proposed JS APIs for 2024
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
- Scott: Escaping Twin Flames cult documentary
- Wes: Lao Gan Ma spicy Chili Oil
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
701: A11y Treats - Labels & Roles
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?
- 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?
- 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
Syntax: X Instagram Tiktok LinkedIn Threads
700: Payload is Rails for JS with TypeScript, React and Drizzle (James Mikrut)
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
Syntax: X Instagram Tiktok LinkedIn Threads
699: Potluck × TypeScript's Longevity × Canvas-Rendered Apps × Learning Rust × Executing Untrusted JS Code
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
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
698: Why You Should Be Using CSS @Layers
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?
Syntax: X Instagram Tiktok LinkedIn Threads
697: What is DevRel with Salma Alam-Naylor
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
Syntax: X Instagram Tiktok LinkedIn Threads
696: How to Build a Website or App
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
- Scott: Chip clips
- Wes: Soft close used toilet seat Amazon Warehouse Deals
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
695: 5 New CSS Features You Should Know
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
Syntax: X Instagram Tiktok LinkedIn Threads
694: What's Up With Angular with Mark Techson
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
Syntax: X Instagram Tiktok LinkedIn Threads
693: Lessons Learned & Bugs Fixed from Launching Syntax.fm
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
- Scott: Dog Poop Bags With Dispenser
- Wes: Resistance band
- Scott: Sentry
- Wes: Wes Bos Courses
Syntax: X Instagram Tiktok LinkedIn Threads
692: You Need Stale While Revalidate
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
Syntax: X Instagram Tiktok LinkedIn Threads
691: Cloudflare Workers Are Next Level With Rita Kozlov And Brendan Irvine-Broque
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
Syntax: X Instagram Tiktok LinkedIn Threads
690: How To Dark Mode and Beyond
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
- Scott: Kala (@engineer.everything)
- Scott: Sentry
- Wes: Wes Bos Tutorials
Syntax: X Instagram Tiktok LinkedIn Threads
689: You Should Be Using JavaScript Maps & Sets
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
Syntax: X Instagram Tiktok LinkedIn Threads
688: Ex-npm Employee Making a New Package Manager?! Vlt with Darcy Clarke
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?
- Flat Coat Goldendoodle
- Scientific American
- Nespresso
- BlackBerry (2023) - IMDb
- BlackBerry (2023) Letterboxd
- Matthias Wandel
- Blink-182 Official Site
- Moneen
- Bring Me The Horizon
Syntax: X Instagram Tiktok LinkedIn Threads
687: Hosting NextJS × Spicy Sidedishes × Modern Forms × Abandoning TypeScript
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 ×××
- Scott: Infamous International: The Pink Panthers Story
- Wes: PowerBlock Adjustable Dumbbells For Home Gym & Commercial Use
- Syntax episode 3
- Scott: Syntax on TikTok
- Wes: Wes Bos Tutorials
- 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
686: We Need Your Help With The Secret Sauce
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
- 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
685: Jason Lengstorf on Live Streaming, Creating Content, and Building a Studio Space
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
LearnWithJason.dev: Learn. Build. Grow. Together.
Hit us up on Socials!Syntax: X Instagram Tiktok LinkedIn Threads
684: Spooky Coding Horror Stories 2023 - Part 2
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 ×××
- Scott: Race to the Summit
- Wes: 100LBS Strong Magnetic Hooks
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
683: Spooky Coding Horror Stories 2023 - Part 1
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
- 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
Design Systems with Brad Frost
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 ×××
- 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
681: What's New in AI for Web Developers
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 ×××
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
680: Getting jQuery’d × Honourable Deaths of libraries We Don’t Use Anymore
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?
- 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
679: Creator of Swift, Tesla Autopilot & Tensorflow. New AI language Mojo with Chris Lattner
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 ×××
- Exercise
- 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
678: The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage
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 ×××
- Scott: A Timeline of the 1970s Heavyweight Boxing Division (Boxing Documentary) / Full Boxing Timelines
- Wes: NEIKO 10181A Step Drill Bit Set
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
677: Home Office Tips
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
- 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
676: Google IDX - VS Code in the Browser with David East
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 ×××
CSS
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
675: Potluck × Bun Thoughts × Guesting on Syntax × Why Rust?
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 NotesAttend 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 ×××
- Scott: Glow Up
- Wes: SendCutSend
- Scott: Syntax on TikTok
- Wes: Wes Bos Tutorials
- 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
674: A11y Treats - Heading Design
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)
- 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
673: Getting Hired, Interviewing, and Why Recruiters Suck with Taylor Desseyn
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 ×××
- 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
Reacting to State of CSS Survey
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 ×××
- 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
- 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
Tauri Vs Electron - Desktop Apps with Web Tech
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
- 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
Anxiety and Uncertainty with Dr. Courtney Tolinski
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 ×××
- Learning Differently (@learning.differently) • Instagram photos and videos
- Zarlengo Foundation Learning Evaluation Center| Denver, Colorado
- 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
The Svelte + SvelteKit Show
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 ×××
- Scott: Aqara Smart Lock U100
- Wes: Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral)
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Hacking the Tonal - Proxying, Intercepting + Debugging Traffic?
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
- 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
Supper Club × How To Get Your First Dev Job With Stuart Bloxham
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 ×××
- 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
Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button
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 ×××
- Scott: Syntax on TikTok
- Wes: @WesBos on X.com
- 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
CSS Nesting is Here!
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
- 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
Supper Club × What's New With Astro with Fred Schott
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 ×××
- 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
Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?
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 ×××
- Scott: Surge power bar
- Wes: Little Hippo Alarm
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
JavaScript Closures & Scope Explained
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 ×××
- Scott: The First Cat in Space Ate Pizza
- Wes: Steam cleaner
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Supper Club × Shipping ESM with Mark Erikson
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 ×××
- 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
Anything but Coding - Landscaping, Fitness, and more!
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 ×××
- Scott: The First Cat in Space Ate Pizza
- Wes: Steam cleaner
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
OG Image Options
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
- 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
Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai
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
- 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
- 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
Rust for JS Devs — Part 2
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
- 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
- 49:17 SIIIIICK ××× PIIIICKS ×××
- Scott: Thermacell Patio Shield
- Wes: Magnet Phone Mount
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
8 Tricks When Using the Fetch() API
In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API.
Show Notes // 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
const data = await fetch().catch(err => console.log(err));
- 14:42 6) to awaited - return error and data at top level
- 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
Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski
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 ×××
- 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
6 or so New Approved and Proposed JavaScript APIs
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 ×××
- Scott: Artifact.news
- Wes: LED lights for bikes
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
JS Fundamentals - Decorators
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
Supper Club × Flightcontrol with Brandon Bayer
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 ×××
- 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
Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits
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 ×××
- Scott: MagSafe Charger, Anker 3-in-1 Cube with MagSafe
- Wes: 6amLifestyle Headphone Hanger Stand Under Desk
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Why is Facebook’s HTML + CSS Such a Mess?
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
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Supper Club × Ryan Florence of Remix
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 ×××
- Minivans
- 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
Standard Server JavaScript - Deno, Workers, Bun and More
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 ×××
- Scott: Macro Factor
- Wes: CRP Products
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Rust for JavaScript Developers - Node vs Rust Concepts
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?
- 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
Supper Club × Email Sending, Spam, DMARC, SPF, Styling, and more with Andris Reinman
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 ×××
- 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
Polyfills, Transpiling and Monkey Patching
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 ×××
- Scott: Cable sleeve
- Wes: Air Purifier
- AliExpress
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
User Feedback UI - Toasts, Flash, Validation
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
- 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
Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion
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 ×××
- 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
Potluck × CSS Variables in React × JS Notebooks × Selling a Domain
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 ×××
- Scott: Ancient Architects
- Wes: Small Rig
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Help Me Help You - How To Ask For Help
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
- 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
Supper Club × val.town with Steve Krouse
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 ×××
- 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
Stump’d × JavaScript × GraphQL × Memory Safety × Web History
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 ×××
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Roundup - Sick AI Tools For Developers
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
- 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
Supper Club × Cloudinary with Colby Fayock
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 ×××
- 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
What are Headless Components?
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
- Scott: Hacker News Recap /Hacker News Recap on Apple Podcasts
- Wes: Calipers
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Lightning CSS
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
- 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
Supper Club × Messaging Queues and Workers with Armin Ronacher
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?
- 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
WTF is an ORM
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 ×××
- Scott: I Think You Should Leave with Tim Robinson
- Wes: Wise, Formerly TransferWise: Online Money Transfers
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Where to Register a Domain
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?
- 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
Supper Club × Why Netlify bought Gatsby, GraphQL Data Layer, and Headless CMS with Dustin Schau
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 ×××
- 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
Potluck × Warp × Skeleton UI × Edge Functions × Donut Scoping
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 ×××
- 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
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
AsyncLocalStorage + AsyncContext API
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
- 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
Supper Club × JavaScript on Hardware, Micro Controllers, ESP32 with Nick Hehr
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 (@hipsterbrown@toot.cafe) - 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
- 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
- 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
Electronics for Beginners
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 ×××
- Scott: Syntax Discord
- Wes: Wes’ Instagram
- 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
GitHub Projects, Milestones, Labels, and Actions
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
- 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
Is JSDoc Better than TypeScript?
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 ×××
-
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
- Scott: Watch MerPeople | Netflix Official Site
- Wes: 18V ONE+ 45W HYBRID SOLDERING STATION (TOOL ONLY) | RYOBI Tools
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset
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
- 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
Supper Club × Matt Rothenberg and Idan Gazit on Github Next
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 ×××
- 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
- 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
The New Syntax Site × Ingest, Stack, AI and more
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 ×××
- Scott: Syntax Discord
- Wes: Wes Bos Tutorials
- 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
JavaScript.exe - Standalone Executables
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
- 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
Supper Club × Bramus Van Damme on CSS
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 ×××
- Meetups
- 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
Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit
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 ×××
- Scott: Tales of Taboo podcast Spotify / Apple Podcasts
- Wes: Rubber Flooring
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
Why Is node_modules So Big?
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
- 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
Supper Club × Adam Argyle on What's New in CSS
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 ×××
- 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
Where Should You Host Your App? Hosting Providers Compared
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 ×××
- Scott: Automators - Relay FM
- Wes: Dropbox.com
- Scott: Sentry
- Wes: Wes Bos Tutorials
- 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
WTF Are Signals And Why Is Everyone So Hot On Them All Of The Sudden?
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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Dylan Jhaveri - Video for the Web and MUX
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
UI Elements - Basics, Best Practice, and Built Ins
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 ×××
- Scott: Fishskyn
- Wes: Flavacol & Butter Flavoured Coconut Oil
- Scott: Sentry replays
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Bluesky + AT Protocol
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
- Scott: Sentry)
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Zach Lloyd from Warp
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?
-
03:41 How does Google Sheets work?
-
13:38 What is Warp and why did you build it?
-
16:50 Why did you build Warp in Rust?
-
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
The Syntax Giveaway Site - Codes, Bots, Tech Stack and More!
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
RPC in JavaScript!
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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Privacy, Cookie Banners, GDPR with Donata and Hans Skillrud
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × Crypto × SEO × Status Pages × Learning Tools
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 ×××
- Scott: Project Farm
- Wes: Splatypus
- Scott: Sentry
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
CSS Color Functions
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × ESLint with Nicholas Zakas
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 (@nzakas@fosstodon.org)
- 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Can Vanilla CSS Replace Sass Yet?
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 ×××
- Scott: Solar Lantern
- Wes: Cotton Candy Machine
- Scott: Sentry
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Modals, Popups, Popovers, Lightboxes
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Nate Weinert and Tamagui
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
600th Episode! Major Announcement + SWAG Giveaway!
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 ×××
- 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
oAuth APIs Explained
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Stump’d Gameshow! Answering Coding Interview Questions from AI
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 ×××
- Scott: The Rodge Tapes
- Wes: Shenzhen Rebow Technology - Neon Sign
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
The New Import Map Standard
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Web Components and Lit with Justin Fagnani of Google
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 - SponsorIf 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?
-
04:55:02 What are web components?
-
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?
-
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
-
29:58:18 Does Lit do anything with CSS?
-
32:01:01 Does Lit do routing?
-
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
-
56:36:20 SIIIIICK ××× PIIIICKS ×××
-
55:27 SIIIIICK ××× PIIIICKS ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × Testing Animations × Tools for Learning × Coding Related Injuries
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 - SponsorIf 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 ×××
- Scott: History for Granite
- Wes: GreatScott!, bigclivedotcom
- Scott: LevelUp Discord
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Coding with the Open AI / Chat GPT API
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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × The Role Of UX Designers In Humanizing The Future with Travis Neilson
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × Learning Web Dev × Video Streaming × Mono Repos
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 - SponsorIf 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 ×××
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more!
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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Next.js on AWS + Serverless with Dax Raad
In this supper club episode of Syntax, Wes and Scott talk with Dax Raad about building on serverless infrastructure, Next.js, and SST.
Sentry - SponsorIf 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
New Syntax Website Brainstorm! IRL!
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 - SponsorIf 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 ×××
- Scott: Screen door dog
- Wes: Apple Watch bands
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Web Streams Explained
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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Digital Nomad with Eric Sartorius
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Fundamentals × What Makes a Website Slow?
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 - SponsorIf 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 ×××
- Scott: 3Blue1Brown
- Wes: Suavecito Firme Clay Pomade
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Node in the Browser × WebContainers + NodeBox
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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Visual Coding Languages With Steve Sewell
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
AI and Coding with ChatGPT
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 - SponsorIf 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 ×××
- Scott: Motion sensor
- Wes: Apple Watch Ultra
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Clean vs Sloppy Code
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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Astro 2.0 with Fred Schott
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Warp Terminal × Next Gen Terminals
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 ×××
- Scott: 50 Pokemon Cards for $5
- Wes: iPad Sorter Station
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Logging
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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Solid.js with Ryan Carniato
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × Native Web Components × JS Class Mixins × Application Secrets
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 - SponsorIf 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Save us from Config File Hell
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
- 11:16 Node has failed us
- 13:30 Cosmic config
- Cosmiconfig
- 16:46 File nesting
- 21:01 Standardize on a format
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Qwik framework from Miško Hevery, the Creator of Angular
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Converting JS to TypeScript
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 - SponsorIf 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 ×××
- Scott: Elegrp USB C Walloutlet
- Wes: Barrina Shop Lights
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Polish and Perf
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Rust In Action with Tim McNamara
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
570
In this episode of Syntax, Wes and Scott talk through what ESM is, and why you want to move your projects to ESM.
Sentry - SponsorIf 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 ×××
- Scott: Egg dispenser
- Wes: Pure Cinema Podcast
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
CSS Wishlist
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Caleb Porzio
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
We React to State of JS 2022
In this episode of Syntax, Wes and Scott look through the results of the State of JS survey for 2022.
Show Notes-
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
-
46:41 Backend frameworks
-
47:42 JavaScript run times
-
51:01 TypeScript JavaScript balance
-
52:17 JavaScript flavors
-
57:03 Resources
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Container Queries Explained
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Simen Svale Skogsrud and Espen Hovlandsdal from Sanity
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × JS Modules × HTML Tags × Recession × Budgeting
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 ×××
- Scott: Bundle of Eucalyptus
- Wes: Recycling bin brackets
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Buy It or Build It? A Service is Not a Solution
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Katherine Mello on Liberal Arts → Coding, Bootcamps, and Sustainability
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
2023 Goals × Learning and Doing
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 ×××
- Scott: The Menu
- Wes: JB Weld Clearweld, big version
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
TypeScript Fundamentals × Satisfies and as const
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Sarah Drasner on Engineering Management
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
- 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Our Predictions for 2023
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 ×××
- Scott: Cron
- Wes: Wyze Headphones
- Scott: LevelUp SvelteKit Tutorial
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
TypeScript Fundamentals × Type Narrowing, Guards, and Predicates
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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Polypane with Kilian Valkhof
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Were We Wrong? 2022 Predictions Revisited
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 - SponsorIf 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 - SponsorSanity.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 - SponsorAuth0 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 ×××
- Scott: JADENS Label Maker Machine with Tape
- Wes: Chipolo One Spot
- Scott: LevelUp Svelte Kit Tutorial
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
554: Desktop apps in JS × Electron and Tauri
In this Hasty Treat, Scott and Wes talk about the current state of building desktop apps with Electron or Tauri.
Sentry - SponsorIf 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 - SponsorPrismic 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
553: Supper Club × Switching into Coding and climbing the Pommade ladder with Kenneth Lyerly
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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
552: Potluck × Twitter Thoughts × Business Models × Senior Developer
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 - SponsorWhether 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 - SponsorIf 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 - SponsorGet 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 ×××
- Scott: Sensibo Air
- Wes: We Crashed
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
“Serverless” Databases
In this episode of Syntax, Wes and Scott talk about your options for database when you’re working with serverless.
Prismic - SponsorPrismic 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × React Video Creator with Jonny Burger
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 - SponsorToday’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 - SponsorThis 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
JavaScript in 2022
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 - SponsorAuth0 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 - SponsorIf 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 - SponsorGet 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 ×××
- Scott: White Lotus
- Wes: Ubiquiti
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Rendering Methods Explained
In this Hasty Treat, Scott and Wes talk through the various rendering methods in use today and the pros / cons of each.
Sentry - SponsorIf 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 - SponsorSanity.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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Coding at Disney with Vu Le
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 - SponsorThis 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 ×××
- Garden hose connectors
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Code Styles: Readable Rules and Petty Preferences
In this episode of Syntax, Wes and Scott talk about their preferred coding styles and preferences they use, and why.
Linode - SponsorWhether 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: Video Archives Podcast
- Wes: Ubiquiti Wifi
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
GitHub Next Projects
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 - SponsorWhether 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Bun with Jared Sumner
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 - SponsorThis 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × Twitter Following × TypeScript × Playwright
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 - SponsorPrismic 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 - SponsorSanity.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 - SponsorLogRocket 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 ×××
- Scott: Screwless plates / 4 pack of screwless plates
- Wes: Shoe Boxes for Cords
- Scott: LevelUp TikTok
- Wes: Wes Bos TikTok
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Serverless Limitations
In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project.
Sentry - SponsorIf 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 - SponsorMagicBell 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Anything But Coding with Wes and Scott
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 - SponsorKontent 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 - SponsorThis 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Responsive Design Techniques
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: Lutron Light switches
- Wes: Sunco Lighting BR30
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
React use() hook and Async Server Components Proposal
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 - SponsorIf 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 - SponsorAuth0 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Ryan Dahl and Deno
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 - SponsorToday’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 - SponsorIf 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 - SponsorSanity.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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
CSS Trends Almanac for 2022 Part 2
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 - SponsorPrismic 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 - SponsorSanity.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 - SponsorLogRocket 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 ×××
- Scott: Front Bumper Drillless Plate Holder
- Wes: 1U Server Rack
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Short Form Content with Tiktok, Reels, Shorts, 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 - SponsorIf 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 - SponsorGet 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Open Table LIVE SHOW
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 - SponsorAuth0 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 - SponsorAppwrite 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck × Meeting IRL × SSG vs SSR × Domain Privacy
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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 ×××
- Scott: Air Compressor
- Wes: Blue Flush Cutter Mini Diagonal Cutting Pliers Side Cutter Nippers Wire Cutter
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Zod Schema Validation and Type Generation
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 - SponsorWhether 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Coding with ADHD with Dr. Courtney Tolinski
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 - SponsorLogRocket 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 - SponsorAppwrite 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Spooky Web Dev Stories Part 2
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 - SponsorWhether 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 - SponsorAuth0 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 - SponsorLogRocket 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 ×××
- Scott: Ear foam tips
- Wes: Stepped drill bit / Aliexpress link
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Explained - Buzz Words and Concepts
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 - SponsorAppwrite 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 - SponsorSanity.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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × GraphQL as an Aggregation Layer with Filipe Ferreira of Sky TV
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 - SponsorToday’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 - SponsorRetool 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.
Sponsorname - SponsorStoryblok 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Spooky Web Dev Stories 2022
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 - SponsorIf 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 - SponsorPrismic 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 - SponsorGet 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 ×××
- Scott: PopSocket Wallet
- Wes: Water flosser
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hydration & New Frameworks Like Qwik
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 - SponsorIf 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 - SponsorSanity.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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × tRPC With Alex KATT Johansson
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 - SponsorIf 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 - SponsorIncidents 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 - SponsorKontent 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
2022 CSS Trends and Usage Web Almanac
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: Dawn
- Wes: Flat speaker wire
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Bookmarklets
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 - SponsorMagicBell 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 - SponsorCOPY 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Neovim, Lua, RPC and Twitch with TJ DeVries
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 - SponsorIncidents 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 - SponsorWith 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 - SponsorToday’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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Use The Platform!
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 - SponsorPrismic 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 - SponsorSanity.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 - SponsorLogRocket 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 ×××
- Scott: Cable sleeve
- Wes: Kindling splitter
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntactic Sugar, Declarative and First Class Citizens? What does that even mean?
In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means.
Sentry - SponsorIf 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 - SponsorGet 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × ORMs with Nikolas Burk from Prisma
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 - SponsorWith 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 - SponsorStoryblok 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 - SponsorIncidents 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Using Emoji in Naming × Project Estimates × Goal Planning
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorSanity.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 ×××
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials / Beginner JavaScript
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
How to Get Past the Blahs and Finish Your Project
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 - SponsorWhether 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 - SponsorLogRocket 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”
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Open Sauced With bdougie
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 - SponsorWith 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 - SponsorIncidents 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 - SponsorStoryblok 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
- bdougie: Warp
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Wes’ New Soundproof Office
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: Pretend Podcast
- Wes: Nano Tape
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
WTF Is Enhance Framework?
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 - SponsorIf 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 - SponsorSanity.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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Arc Browser with Hursh Agrawal
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 - SponsorIncidents 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 - SponsorToday’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 - SponsorAuth0 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
The Productivity Episode
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 - SponsorStoryblok 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: USB C Female to USB Male Adapter
- Wes: Measuring tape
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
AI and Coding - Is Github Co-Pilot Worth It?
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 - SponsorSentry 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 - SponsorSanity.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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Raycast with Thomas Mann
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 - SponsorIncidents 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
How To Build an API in 2022
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 - SponsorThere 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 - SponsorLogRocket 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 - SponsorGet 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
- Scott: Sharp Pebble
- Wes: Laser level
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Use Next-gen CSS Today (Post CSS Configs)
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 - SponsorPrismic 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 - SponsorIf 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
- 09:48 PostCSS Nested
- 12:59 Variables (Custom Properties)
- 15:50 Media Query Ranges
- PostCSS Media Minmax
- 17:16 Custom Media Queries
- 18:35 Env Vars
- 20:12 Color Function and Color Function Notation
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × The Primeagan - Vim, Streaming, Rust, all Around Interesting Guy
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 - SponsorWith 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 - SponsorStoryblok 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - How to Pick a Tech Stack × useEffect × setTimeout × Staying Focused
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorAuth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. a0.to/syntax
Show Notes- 00:23 Welcome
- 02:39 What’s the best way of comparing the efficiency of object literals created from a factory function vs objects created by new’ing a class.
- Perf.link
- 06:54 How can I always see the full signature in VS Code?
- 10:40 What’s your process for picking a stack when starting a project?
- 14:41 Sponsor: Linode
- 15:23 Is snapshot testing really worth it?
- TS QuickFixes
- 20:54 What are your thoughts on ISR Incremental Static Regeneration?
- 25:20 Is useEffect public enemy #1?
- Goodbye, useEffect: David Khourshid
- 29:02 Sponsor: LogRocket
- 30:17 Is there any benefit to use uses setTimeout instead of setInterval?
- MongoDB
- Prisma
- 37:13 HTML to PDF a great solution I use is gotenberg.dev
- gotenberg.dev
- 40:12 Although async/await might make for code that is easier to grok, I find it worse for chaining functions.
- Pipeline Operator proposal
- 45:07 How do you guys stay focused for meaningful periods of time?
- 48:36 How should code formatters be configured and combined?
- Prettier
- ES Lint
- Editor Config
- No-Sweat™ Eslint and Prettier Setup
- 51:56 What’s your opinion on the latest Sveltekit changes with load, file based routing, and more?
- Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0
- Astro
- Nano Store
- 55:53 Sponsor: Auth0
- 56:47 SIIIIICK ××× PIIIICKS ×××
Big Deno Changes
In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes.
Linode - SponsorWhether 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Steve Ruiz Building a Drawing App
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 - SponsorToday’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 ×××
- Steve: tldraw.dev
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Highlight
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 - SponsorSanity.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 - SponsorLogRocket 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 - SponsorMagicBell 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 ×××
- Scott: Packing Cubes
- Wes: Volt 1
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Margins
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 - SponsorFind 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 - SponsorAuth0 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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Self Hosted Backend-as-a-service with Brandon Roberts
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 - SponsorWith 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 - SponsorStreamline 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?
-
02:00 What is 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?
-
15:30 Sponsor: Lightstep Incident Response
-
16:36 Appwrite’s focus on developer experience
-
19:56 Realtime database options with Appwrite
-
22:40 Cloud functions in Appwrite
-
26:01 How does Appwrite scale?
-
27:28 Who is Appwrite for?
-
30:03 What is Ionic?
-
32:12 What do you enjoy about working in Angular?
-
35:08 Sponsor: Hasura
-
36:30 Supper club questions
- Guest: React Router
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Fundamentals - Web Workers and Service Workers
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 - SponsorLogRocket 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 - SponsorSanity.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 - SponsorGet 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 ×××
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Episode 500!
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 - SponsorIf 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 - SponsorThere 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Rich Harris, Author of Svelte
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 - SponsorToday’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 - SponsorStreamline 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 ×××
- Rich: Mullvad VPN
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Job Types Agency, Tech, Startup, Entrepreneur VS Tech company VS In House
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 - SponsorStreamline 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax
LogRocket - SponsorLogRocket 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 ×××
- Wes: Soap pump
- Scott: Pro breaking tour
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
CSS Proposals @when, CSS Masonry, Carets
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 - SponsorIf 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 - SponsorSanity.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
- 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 < env(--small_bp)); @media (100px < width < 1000px);
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Headless Ecommerce with Shopify’s Josh Larson
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 - SponsorWith 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 - SponsorStreamline 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - API Fetching × PDF Creation × tRPC × Stripe vs PayPal
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 - SponsorPrismic 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 - SponsorAuth0 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 - SponsorLogRocket 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 ×××
- Scott: Literature and History
- Wes: Kitchen faucet
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Browsers, Engines, Support and the Other Guys
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 - SponsorIf 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 - SponsorMagicBell 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Lee Robinson on React Suspense, Server Components
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 - SponsorStreamline 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 - SponsorToday’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
- 58:57 SIIIIICK ××× PIIIICKS ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Our Web Dev Wish List
In this episode of Syntax, Wes and Scott talk through their web dev wish list of things they want to just work already!
Linode - SponsorWhether 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 - SponsorIf 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 - SponsorGet 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 ×××
- Scott: Arc browser / Video
- Wes: Battery powered glue gun
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
How to Spark your Imagination and Get Excited about Coding
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 - SponsorLogRocket 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 - SponsorWhether 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Syed Balkhi and WordPress
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 - SponsorWith 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck! Node Versions, Old Man Internet, Responsive Design + MORE
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 - SponsorPrismic 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 - SponsorIf 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 - SponsorGet 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
- Scott: Can tumbler glasses
- Wes: Car Sound Deadener
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
What is Bun? The New JS Runtime
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 - SponsorStreamline 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 - SponsorGet 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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Adam Cowley and Neo4j Database
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 - SponsorToday’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 - SponsorStreamline 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 ×××
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Our Code Styles
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax
Sentry - SponsorIf 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 - SponsorSanity.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 ×××
- Scott: Scott’s iPad case for kids
- Wes: Garbage can with custom bags.
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
STUMP’D Interview Coding Questions
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 - SponsorIf 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 - SponsorStreamline 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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × 70,000 Serverless Functions with Kristi Perreault of Liberty Mutual
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 - SponsorWith 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 - SponsorFor 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 - SponsorStreamline 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
- Real World Serverless Podcast
- Serverless Denver Group
- AWS Summits
- @ServerlessCO Kristi Perreault on Medium
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Peer Dependencies × Vitest × NVM and PNPM × Sprites
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 - SponsorPrismic 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 - SponsorSanity.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 - SponsorLogRocket 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 ×××
- Scott: Toto Bidet
- Wes: Sodastream
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Clamp & Interpolate
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 - SponsorIf 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 - SponsorThere 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Voice Coding with Pokey Rule
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 - SponsorFor 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 - SponsorDirectus 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 ×××
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Pokey: YouTube channel, Sponsor Pokey on GitHub
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
10 years of Speaking + Conferences
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 - SponsorWhether 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 - SponsorIf 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 - SponsorGet 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 ×××
- Scott: Risk for iOS
- Wes: Barrina LED T5 Integrated Single Fixture
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
CSS5 Color Functions
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 - SponsorWhether 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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Developer Experience with Shawn Wang
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 - SponsorWith 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 - SponsorLogRocket 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
- Scott: The Stormlight Archive
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Tips for Communicating
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 - SponsorIf 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 - SponsorSanity.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 - SponsorAuth0 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 ×××
- Scott: Drachinifel
- Wes: Lepy LP-2020A Hi-Fi Stereo Audio
- Scott: LevelUp Tutorials on YouTube
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Browser CSS Page Transitions API aka Shared Element Transitions
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 - SponsorPrismic 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 - SponsorLogRocket 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: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Authoring Browser Extensions with Tim Leland
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 - SponsorPostlight 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 - SponsorDid 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Home Automation - A Look Ahead
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 - SponsorIf 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 - SponsorAuth0 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 - SponsorGet 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 ×××
- Scott: Severence on Apple TV+
- Wes: INKZALL
- Scott: LevelUp Tutorials
- Wes: Wes Bos Beginner JavaScript
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
New Viewport Units
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 - SponsorLogRocket 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 - SponsorSanity.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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Edge Functions and Deno with Eduardo Bouças of Netlify
In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify.
Hasura - SponsorWith 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 - SponsorPostlight 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 - SponsorDid 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Headless WordPress, Databases, Regex
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 - SponsorIf 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 - SponsorSanity.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 ×××
- Scott: * You Must Remember This Podcast
- Wes: Tools
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
I can has() new CSS Selector?!
In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.
MagicBell - SponsorMagicBell 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 - SponsorLogRocket 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
- 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)) Tweet us your tasty treats- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Is No Code going to take our jobs? with Connor Finlayson
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 - SponsorPostlight 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 - SponsorOur 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 - SponsorStrapi 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Live at Reactathon
In this episode of Syntax, Wes and Scott are live from Reactathon 2022!
Sentry - SponsorIf 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 - SponsorThere 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes-
00:32 Welcome
-
04:10 Hot Take Tweets
-
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
-
var that = this;
-
Test for Opera var test = /^function \(/.test([].sort);
-
25:09 Sponsor: Payments Hub
-
26:29 Syntax Error
-
31:19 JS or NAY-S
-
39:02 Sponsor: Freshbooks
-
39:23 Q&A
-
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
-
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?
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Stopping Malicious Actors
In this Hasty Treat, Scott and Wes talk about ways to prevent malicious people from using or abusing your app.
Linode - SponsorWhether 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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Coding Burnout and Gardening with Anselm Hannemann
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 - SponsorWith 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 - SponsorStrapi 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 - SponsorOur 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 ×××
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Git in VS Code
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: Espanso
- Wes: AirPod cleaning kit
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Cache Control Headers Explained
In this Hasty Treat, Scott and Wes answer a question about caching, cache control headers, an explanation of the fields for caching.
Sentry - SponsorIf 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 - SponsorLogRocket 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: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Redwood JS with Tom Pretson-Werner
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 - SponsorOur 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) - SponsorWhiskey 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
TypeScript Tooling Explained
In this episode of Syntax, Wes and Scott talk through TypeScript tooling, build tools, configs, and editors.
LogRocket - SponsorLogRocket 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 - SponsorMagicBell 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 - SponsorGet 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 ×××
- Scott: Tonie
- Wes: Burst Toothbrush
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Scott’s New Office × The Levelup Lodge
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 - SponsorIf 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 - SponsorSanity.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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × Turbo Repo with Jared Palmer
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 - SponsorWhiskey 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Protestware × NoSQL × Next.js × ESM × Jest
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorAuth0 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
- Scott: Eons Mysteries of Time podcast
- Wes: Mr Bio Multi cable
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Why do we need Web Interop? Another Standards Body?
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 - SponsorIf 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 - SponsorSanity.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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Supper Club × NX Monorepos with Victor Savkin
In this supper club episode of Syntax, Wes and Scott talk with Victor Savkin about NX Monorepo development.
Whiskey Web and Whatnot - SponsorWhiskey 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 - SponsorStrapi 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
10 Nifty Browser APIs
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorGet 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 ×××
- Scott: RCA to HDMI adapter
- Wes: SlimLED
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
TypeScript Fundamentals × Narrowing, Discriminating Unions, and Type Guards
In this Hasty Treat, Scott and Wes talk about TypeScript Fundamentals, including narrowing, discriminating unions, and type guards.
Sentry - SponsorIf 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 - SponsorThere 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
WTF is the Edge? Edge Compute / Functions
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorGet 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
-
Syntax 310 Serverless, Deno and TypeScript with Brian Leroux
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Why do people still use Axios over Fetch?
In this Hasty Treat, Scott and Wes talk about why people still use Axios over Fetch, and why people wouldn’t use Axios.
Linode - SponsorWhether 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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
JavaScript × STUMP’D
In this episode of Syntax, Wes and Scott ask each other hiring questions asked of JavaScript developers in job interviews.
Kontent by Kentico - SponsorKontent 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 - SponsorLogRocket 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 - SponsorGet 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
- Scott: Who ARTed Podcast
- Wes: Patio furniture
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Building a Coupon Engine
In this Hasty Treat, Scott and Wes talk about the coupon engines they’ve built and use on their courses.
Prismic - SponsorPrismic 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Working on a Team × Dealing with Imposter Syndrome × Animating on the Web × Icon Libraries × Demanding Clients
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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
- Scott: Glass Drinking Straws
- Wes: Lawn Lift
- Scott: LevelUp Tutorials
- Wes: Beginner Javascript
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Svelte Cubed + 3D In Browser
In this Hasty Treat, Scott and Wes talk about Svelte Cubed and working in 3D in the browser.
Prismic - SponsorPrismic 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Multi Tenant Apps, JS Sprinkles, Kids Coding, Server Error Handling
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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
- Scott: Vivid
- Wes: Right angle Lightning cables
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
How To Be Consistent
In this Hasty Treat, Scott and Wes talk about their tips and tricks for being consistent if you’re trying to create.
Sentry - SponsorIf 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 - SponsorMagicBell 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Making Content × What is our Process? Youtube, Blog Posts, Courses, Conference Talks, and Podcasts
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 - SponsorWhether 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 - SponsorSanity.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 - SponsorLogRocket 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
- Scott: ZENOVA Under Desk Treadmill Walking Pad
- Wes: Trader Joe’s Hot Sauce with Yuzu
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Types in JS?
In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript.
Linode - SponsorWhether 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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Highlight
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 - SponsorNEEDS 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 - SponsorLogRocket 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 - SponsorGet 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
- Scott: Bad Vegan
- Wes:
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
What’s Up With Vitest?
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 - SponsorIf 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 - SponsorMagicBell 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Our Stacks Explained
In this episode of Syntax, Wes and Scott talk through the tech stack they use to manage their course websites.
Kontent by Kentico - SponsorKontent 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 - SponsorLogRocket 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 - SponsorDot 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
SSL Certs, Approvals and Cloudflare
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 - SponsorPrismic 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 - SponsorLogRocket 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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Handling Auth × Are Web Dev Real Developers? × Handling Git Conflicts × Converting PNG to Box-Shadow × Bad Docs vs No Docs × Making Shopify Headless
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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
- Scott: Okeeffe’s Lip Balm
- Wes: Okeef’s Working Hands
- Scott: Level Up Course Drop
- Wes: Wes Bos Course player update
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat WTF × SSR vs JamStack vs Serverless?
In this Hasty Treat, Scott and Wes talk about the differences between SSR, JamStack, and Serverless.
LogRocket - SponsorLogRocket 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 - SponsorRetool 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?
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Part 2 of Wes and Scott React to the State of JS
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Sticker Mogul 2022
In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs.
Linode - SponsorWhether 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 - SponsorLogRocket 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Wes and Scott React to the State of JS
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorGet 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
- Scott: Inventing Anna
- Wes:Everlane Crewneck Sweater
- Scott: LevelUp Course Drop Party
- Wes: Wes Bos Tutorials
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
This vs That × map vs reduce, forEach vs for in, and more!
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 - SponsorPrismic 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 - SponsorIf 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Ben Vinegar × Distributed Tracing and TypeScript Migrations
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 - SponsorKontent 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 - SponsorEverything 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
-
Scott: Last Seen
- Scott: LevelUp Tutorials
- Wes: Wes Bos Tutorials
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
JavaScript in 2022 - New, Coming and Proposed Features
In this Hasty Treat, Scott and Wes talk about new proposed features coming to JavaScript in 2022.
MagicBell - SponsorMagic 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 - SponsorIf 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
Tweet us your tasty treats- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Selling Themes × Which Browser Should Devs Use? × Where Do You Keep 2FA Codes? × Remix vs Svelte Kit × Getting Unstuck from Tutorial Hell
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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!
- Scott: The River Runner (2021) - IMDb
- Wes: Mike’s Hot Honey
- Scott: LevelUp YouTube channel
- Wes: Wes Bos on TikTok
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Code Explorers
In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos.
Retool - SponsorRetool 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 - SponsorLogRocket 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Creator of Wordle - Josh Wardle
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 - SponsorIf 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 - SponsorSanity.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 - SponsorGet 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!
- Josh: Tupperware
- Scott: Giant tub of Epsom Salt
- Wes:
- Josh: Wordle
- Scott: KeystoneJS Course
- Wes: All Courses
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Pros + Cons of JavaScript Servers, Serverless, and Cloudflare Workers
In this Hasty Treat, Scott and Wes talk about the pros and cons of JavaScript servers, Serverless, and Cloudflare Workers.
Hashnode - SponsorEverything 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 - SponsorWhether 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Highlight
In this episode of Syntax, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, and more!
Linode - SponsorWhether 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 - SponsorLogRocket 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 - SponsorTabnine 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
- Scott: The Alpinist (2021) - IMDb
- Wes: Instant Pot Air Fryer Lid
- Scott: Astro Course - Sign up for the year and save 50%!
- Wes: All Courses
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Teamwork Makes The Dream Work
In this Hasty Treat, Scott and Wes are inspired by a Reddit post to talk about how to work better with your team.
Sentry - SponsorIf 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 - SponsorSanity.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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Monorepos! Workspaces, pnpm, turborepo + more!
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 - SponsorKontent 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 - SponsorLogRocket 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 - SponsorGet 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
- Scott: Wyze v3, 10 micro sd
- Wes: Tineco A11 Vaccum
- Scott: Astro Course - Sign up for the year and save 50%!
- Wes: All Courses
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Updating Project Dependencies
In this Hasty Treat, Scott and Wes talk about their process for updating project dependencies.
Sponsor - LogRocketLogRocket 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 - MagicBellMagicBell 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
New Year, New You. What to Focus on in 2022.
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 - SponsorIf 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 - SponsorWhether 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 - SponsorGet 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
- 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
CSS + JS Hacks We’re Fine With
In this Hasty Treat, Scott and Wes talk about CSS + JS Hacks that they're ok with using.
Sponsor - FreshbooksGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Sponsor - SentryIf 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck
In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.
Prismic - SponsorPrismic 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 - SponsorRetool 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.
LogRocket - SponsorLogRocket 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
- Scott: Learning Differently
- Wes: Truff Hot Sauce
- 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Remix!
In this Hasty Treat, Scott and Wes talk about Remix!
Sponsor - SanitySanity.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 - SentryIf 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
2022 Predictions
In this episode of Syntax, Wes and Scott talk through their predictions for 2022.
LogRocket - SponsorLogRocket 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 - SponsorEverything 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 - SponsorGet 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
- Scott: A Show About Animals
- Wes: Wise
- 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
JS One Liners
In this Hasty Treat, Scott and Wes talk about some Javascript one liners that speed up your coding experience in one line.
Sponsor - LinodeWhether 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 - SentryIf 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'
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
2021 In Review
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 - SponsorIf 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 - SponsorMux 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
- Scott: Rocket League Sideswipe
- Wes: Home Work on Discovery+
- 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Holiday Snackluk
In this Hasty Treat, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes.
Sponsor - SanitySanity.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 - LogRocketLogRocket 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Gitpod, iPad Coding, Web3, WTF NFT
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Logrocket - SponsorLogRocket 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 - SponsorWhether 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
- Scott: Sweet Bobby Podcast
- Wes: Woosh Cloths
- Pauline Uniqlo
- Geoff Helinox Chair
- 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Gatsby v4
In this Hasty Treat, Wes and Scott talk about what's new in Gatsby v4.
Sponsor - PrismicPrismic 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 - SentryIf 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - enums, WASM, Lighthouse, Redirects
In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.
Sanity - SponsorSanity.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 - SponsorIf 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 - SponsorWhether 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
- Scott: Astro Course
- Wes: All Courses
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
How To Do Things In Svelte
In this Hasty Treat, Wes and Scott talk about how to do things in Svelte.
Sponsor - FreshbooksGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Sponsor - LogRocketLogRocket 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
JavaScript and Hardware × Cars, Factories, Heavy Industry, Robots, and the Internet of Things
In this episode of Syntax, Scott and Wes talk with Anth Rogan about JavaScript and hardware - from cars, to factories, and the internet.
Bryntum - SponsorBryntum’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 - SponsorLogRocket 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 - SponsorWhether 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
- Scott: Spotless for macOS
- Wes: Wago Lever Nuts
- Anth: Daily.dev
- Scott: Astro Course - Sign up for the year and save 50%!
- Wes: All Courses - Black Friday sale!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Meta Tags
In this Hasty Treat, Wes and Scott talk about Meta Tags.
Sponsor - SanitySanity.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 - SentryIf 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Everything in web dev is Amazing!
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 - SponsorIf 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Linode - SponsorWhether 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
- Scott: Tonal
- Wes: Reboot your Portfolio / Canadian Couch Potato
- Scott: Astro Course - Sign up for the year and save 50%!
- Wes: All Courses - Black Friday sale!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Github Co-pilot is Gonna Take ur Job
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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Troubleshooting
In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.
LogRocket - SponsorLogRocket 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Mux - SponsorMux 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
- Scott: Forehead
- Wes: EGO EXINNO 240W/120W Chargers
- Scott: Astro Course - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code 'Syntax' for $10 off!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
The Macbook Pro Show - Wes and Scott Get New Laptops
In this Hasty Treat, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU.
Sanity - SponsorSanity.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 - SponsorIf 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
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Copilot × Glasses × Databases × Dealing with Stress × Employment vs Self-Employment × Auth in GraphQL × Headless CMS × More!
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 - SponsorWhether 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 - SponsorIf 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes03: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
- Scott: myQ Chamberlain Smart Garage Control
- Wes: ATOTO Head Unit
- Scott: Level Up Tutorials Pro - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Next.js 12
In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates!
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes04: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 Tweet us your tasty treats!- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Web Containers, StackBlitz, and Node.js in the Browser with Tomek Sulkowski
In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 - SponsorWhether 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 Show Notes02: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/
- Scott: HaloLock Universal Ring
- Wes: Car LED Light Upgrade
- Tomek: The Dresden Files
- Scott: Astro Course - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Tomek StackBlitz
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - What's the deal with Astro?
In this Hasty Treat, Scott and Wes talk about Astro — what it is and why you should check it out!
Linode - SponsorWhether 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 - SponsorIf 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
STUMP'D Interview Questions - CSS Edition
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 - SponsorSanity.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 - SponsorIf 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 - SponsorCloudinary 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 Notes06: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
- Scott: https://height.app/
- Wes: Anker Mini Car Charger
- Scott: Astro Course - Sign up for the year and save 25%!
- Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - How to Setup a PNPM Monorepo
In this Hasty Treat, Scott and Wes talk about PNPM and monorepos!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 Notes4: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
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Horror Web Dev Stories - 2021
For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition!
LogRocket - SponsorLogRocket 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 - SponsorMux 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 - SponsorWhether 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 Notes02: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
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. 🤦♂️😜
- Scott: Portable Air Compressor
- Wes: ESR Magnet Phone Mount
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Hasty Horror Stories
In this Hasty Treat, Scott and Wes talk about web dev horror stories — real things that have happened to real developers
Linode - SponsorWhether 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 - SponsorIf 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 Notes03: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 Tweet us your tasty treats!- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Coding for Kids × MongoDB Hosting × NoMoreFoo × Best Cities for Dev Jobs × GraphQL Resolvers × Package Security × Prototypes and Portfolios × More!
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 - SponsorPrismic 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 - SponsorIf 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 - SponsorCloudinary 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 Notes04: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
- Scott: The Way Down
- Wes: Wooster Shortcut
- Scott: Modern GraphQL with Prisma - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Handy Utility Functions with Just
In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes03: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
- Why not use typeof?
- 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
A Podcast on Running a Podcast
In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 - SponsorCloudinary 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 Notes01:45 - Recording Setup
- Zoom to chat
- Record on Zoom
- Quicktime
- Logic
- Riverside
- Wes:
- Scott:
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
- 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
- Scott: All Courses - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Neat Things in CSS Color - Current and Coming!
In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!
Sentry - SponsorIf 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 - SponsorSanity.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 Notes04: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
07:34 - currentcolor
08:54 - Profiled color values - 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/
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios
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 - SponsorWhether 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 - SponsorIf 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 - SponsorAuth0 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 Notes02: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 <3
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/
- Scott: LuLaRich
- Wes: Flame Bulb
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Spicy Takeout - PHP Is Good and We’re Just Re-Creating It
In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 Notes03: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
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)
- Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles
- https://vuejs.org/
- https://www.hey.com/
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Changelog Frontend Feud
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 - SponsorLogRocket 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 - SponsorMux 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 Notes02: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
- Scott: All courses - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Desktop Apps + New Tech We Love
In this Hasty Treat, Scott and Wes talk about the hottest new tech they love!
Linode - SponsorWhether 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 - SponsorIf 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 Notes03: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
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
- 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
- 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/
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
From React To SvelteKit
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 - SponsorPrismic 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 - SponsorIf 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 - SponsorCloudinary 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 Notes07:28 - Thoughts
- Apples to oranges, so unfortunately, no super legit ability to compare.
- 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
- Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
- 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?
- Scott: Web Components 101 - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Webhooks
In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.
Linode - SponsorWhether 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 - SponsorLogRocket 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
New to JavaScript — ES2022
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 - SponsorSanity.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 - SponsorLogRocket 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 - SponsorAuth0 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 Notes04: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
- Getters and setters introduced in es5
- https://www.w3schools.com/js/js_object_accessors.asp
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
- Why not use array[-1]?
- We used to use slice(-1)
- What about indexOf?
21:34 - Handy hasOwn method
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
- Scott: Ultraloq Smart Lock
- Wes: Magnatiles
- Scott: Web Components Course - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Starlink Rural Internet
In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up.
Sentry - SponsorIf 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes04: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!
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 - SponsorWhether 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 - SponsorIf 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 - SponsorAuth0 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 Notes02: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/
- Scott: Hot App
- Wes: Pet Food Mat
- Scott: Web Components Course - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - TypeScripts Strict Explained
In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it.
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes02: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 Tweet us your tasty treats!- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
STUMP'D - Coding Interview Questions
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 - SponsorAuth0 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 Notes03: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/
- Scott: Builderment
- Wes: Lawn Mower Blade Balancer
- Scott: All Courses - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Freelance Tips - Toxic Clients
In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them.
Linode - SponsorWhether 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 - SponsorIf 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 Notes05: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.
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Advice for New Devs
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 - SponsorSanity.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 - SponsorIf 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 - SponsorCloudinary 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 Notes01: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
- Scott: Raycast
- Wes: Amazon iPhone Repair Kits
- Scott: Web Components 101 - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Why Do People Hate CSS?
In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.
Prismic - SponsorPrismic 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 - SponsorLogRocket 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 Notes03:20 - Layout is hard
- block vs inline vs inline-block
- Learn what this means!
- 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
Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!
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 - SponsorWhether 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 - SponsorLogRocket 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 - SponsorCloudinary 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 Notes04: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
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - The Weird and Wonderful Link Tag
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 - SponsorSanity.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 - SponsorIf 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 Notes04: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
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
How to Build a Website — The Show For Beginners
In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 - SponsorMux 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 Notes04: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
- Most interaction is done in JavaScript, but CSS has some basics
- 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
- 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - TypeScript Utility Types
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 - SponsorWhether 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 - SponsorLogRocket 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - WordPress × 3rd-Party Cloud Services × Backend Hosting × Drupal × Getting Clients × GPS vs BEM × More!
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorRevenueCat 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 Notes01: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
- Scott: Advanced Svelte Techniques - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More!
In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech.
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
ShopTalk x Syntax
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 - SponsorPrismic 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 - SponsorIf 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 - SponsorCloudinary 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 Notes07: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/
- Dave:
- 1: Haikyu!!
- 2: Nintendo Garage
- Chris: Ray App
- Wes:
- Scott: All Courses - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - The Surprisingly Exciting World of Favicons
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 - SponsorSanity.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 - SponsorLogRocket 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 Notes03: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?
- 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!
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 - SponsorLogRocket 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 - SponsorMux 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 Notes03: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
- Scott: SvelteKit
- Wes: Wyze Sprinkler Controller
- Scott: Svelte Components Course - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Stylelint for Linting CSS
In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!
Sanity - SponsorSanity.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 - SponsorIf 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
React 18 - A Look Ahead
In this episode of Syntax, Scott and Wes talk about everything coming in React 18!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 - SponsorRevenueCat 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 Notes04: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
36:37 - Next.js
- Next.js will probably have support for a lot of these features soon.
- 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
- Scott: Building Svelte Components - Sign up for the year and save 25%!
- Wes: Beginner JavaScript - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Vite + Parcel 2
In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.
Prismic - SponsorPrismic 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 - SponsorLogRocket 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 Notes03: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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Highlight — We Review Your Portfolios
In this episode of Syntax, Scott and Wes review your portfolios!
Sanity - SponsorSanity.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 - SponsorLogRocket 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 - SponsorCloudinary 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 Notes03: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+
- Scott: What Had Happened Was Podcast
- Wes: WAGO Lever-Nuts
- Scott: Building Svelte Components - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers
In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Dev Tools Power — Elements Tab
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 - SponsorWhether 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 - SponsorIf 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 - SponsorMux 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 Notes03: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 ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs- Scott: Svelte Kit - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!
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 - SponsorDeque’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 - SponsorLogRocket 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 Notes03:32 - Seven new JavaScript 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.
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
- Stage 1
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!
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 - SponsorSanity.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 - SponsorLogRocket 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 - SponsorWhether 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 Notes04: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
- Scott: A Death In Cryptoland Podcast
- Wes: Affinity Designer
- Scott: Svelte Kit - Sign up for the year and save 25%!
- Wes: Beginner JavaScript Notes
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - CSRF Explained
In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!
Prismic - SponsorPrismic 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 - SponsorIf 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 Notes05: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
CSS Container Queries, Layers, Scoping and More with Miriam Suzanne
In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more!
Prismic - SponsorPrismic 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 - SponsorIf 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 - SponsorRevenueCat 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 Show Notes02:21 - When did you come on board with container queries?
10:27 - How would you declare specificity?
- Layer example:
13:08 - What is your background?
18:20 - What are container queries?
22:06 - What is the background on contain? How does it work?
29:25 - Is it still under development?
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
- Scott: Reelgood
- Wes: Embroidery machine
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - What is SvelteKit?
In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes03: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:
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 - SponsorCloudinary 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 Notes01: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
- Scott: Contigo Shake & Go
- Wes: Deli Containers
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Making a Vaccine Bot with JavaScript
In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot!
Sanity - SponsorSanity.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 - SponsorIf 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 Notes07: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
React + TypeScript
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 - SponsorWhether 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 Notes04:55 - Components
- Strategies
- Example:
- 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:
- 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:
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)}
- 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:
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
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?
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
- Scott: Obsidian
- Wes: Folding Allen Keys
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - How to Make Money as a Creator
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 - SponsorDeque’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 - SponsorLogRocket 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 Notes06: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
16:00 - Corporation supported
- Display ads
- Sponsored segments
- Corporate sponsors
- Sponsored content
- Interesting collabs
- Stickers
- Syntax 330: React Query + More React with Tanner Linsley
- Syntax 340: Servers with Matt from Caddy
- Wes’ CSS Grid Course
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Bike Shedding — Developer Opinions Explained
In this episode of Syntax, Scott and Wes bike shed some common developer opinions.
Prismic - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorMux 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 Notes04: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
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
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
-
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - JavaScript’s Drag and Drop API
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 - SponsorIf 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 Notes04: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
Links Tweet us your tasty treats!- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
The Surprisingly Exciting World of HTML Elements
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 - SponsorPrismic 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 - SponsorIf 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 - SponsorCloudinary 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 Notes02: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:
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
- 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
- Scott: Hat Washer
- Wes: Netflix's This is a Robbery
- 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!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Stylin the Unstylables
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 - SponsorSanity.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 - SponsorLogRocket 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? Solutions04: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
17:20 - Open UI
- Documenting all the different types of web UI controls
- https://open-ui.org/
- https://twitter.com/stubbornella/status/1384889551924121605
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 - SponsorVonage 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 Notes02: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
- Scott: Wyze Sprinkler Controller
- Wes: Retevis
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Technical Debt
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 - SponsorPrismic 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 - SponsorIf 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!
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 - SponsorSanity.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 - SponsorIf 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 - SponsorCloudinary 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 Notes02: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
- Scott: 3 in 1 Multi USB Charging Cable
- Wes: Milk Frother
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Future Tech We’re Excited About
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - SponsorLogRocket 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 Notes05: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
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
TypeScript Fundamentals — Getting a Bit Deeper
In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.
Deque - SponsorDeque’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 - SponsorLogRocket 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 - SponsorMux 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 stuff03: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
- as keyword (most popular)
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?
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’);
- 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
- Scott: Powerowl 16 Battery Recharger
- Wes: Fairywill Pro P11
- Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
- Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Git Rebase Explained
In this Hasty Treat, Scott and Wes talk about Git Rebase — what it is and how and when to use it!
Sanity - SponsorSanity.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 - SponsorIf 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 Notes05: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 ] [# ]
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Selling and Shipping T-Shirts with TypeScript
In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!
Prismic - SponsorPrismic 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 - SponsorIf 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 - SponsorDeque’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 Notes01: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
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
- 24 different types of shirts
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
- Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Container Queries Are Here
In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes07: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
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
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
- Miriam Suzanne
- Susy
- Miriam’s CSS Sandbox
- https://css.oddbird.net/rwd/query/explainer/
- Canary
- @addyosmani
- The CSS Podcast
- @jon_neal
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Dev Tools Tabs Explained — Plus Tips & Tricks
In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them.
Vonage - SponsorVonage 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 Notes3: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
- Scott: dupeGuru
- Wes: Moccamaster Coffee Maker
- Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - CSS Nesting 1
In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why.
Prismic - SponsorPrismic 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 - SponsorIf 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 Notes04: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
- Component-based — tweet, card, company, Link
and must be the first child of a compound selector
12:44 - @nest rule / media queries
- Mostly just a visual way to show nested
16:30 - How to use nesting today
- Literally any CSS preprocessor
- PostCSS to use spec
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!
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 - SponsorSanity.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 - SponsorIf 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 - SponsorVonage 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 Notes02: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
- Scott: CamLink 4k
- Wes: TS80p Mini Soldering Iron
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - VSCode Extensions and Tips
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 - SponsorLogRocket 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 Notes04:05 - Easy Snippet
05:33 - Add Missing Function Declaration
07:30 - Error Lens
09:08 - Declare Missing Members
10:29 - ES7 React/Redux/GraphQL/React-Native Snippets
11:59 - File Utils:
13:59 - GitLens — Git supercharged
15:15 - ES6-String-HTML
16:41 - Wrap Console Log Simple
17:18 - Text Pastry
19:14 - Better Comments
20:14 - Tip: Use Emmet everywhere
Tweet us your tasty treats!- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Servers with Matt from Caddy
In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, best practices, and more!
LogRocket - SponsorLogRocket 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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Cloudinary - SponsorCloudinary 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 Show Notes02: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 ××× SIIIIICK ××× PIIIICKS ×××- Matt: LG Stick Vacuum
- Scott: Alen Pure BreatheSmart Air Purifier
- Wes: Tello EDU
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - What is the n+1 problem?
In this Hasty Treat, Scott and Wes talk about a common problem you’ll encounter in your development career — the n+1 problem.
Hasura - SponsorWith 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 - SponsorIf 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 Notes05: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Highlight (We Review Your Portfolio)
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 - SponsorSanity.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 - SponsorIf 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 - SponsorMux 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 Notes04: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
- Scott: Walkabout Mini Golf
- Wes: 60w Portable Charger
- Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
- Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen
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 - SponsorLogRocket 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 Notes03: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
- React Query
- Apollo
- Typescript
- Cypress
- https://periqles.herokuapp.com/
- https://the-guild.dev/
- Swagger
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
How To Build Your Own Auth
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorWith 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 Notes01: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
- 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.
- Header
- 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
52:13 - Helper Packages
- NextAuth.js is super easy
- Passport.js
- auth0
- Scott: reMarkable 2
- Wes: Opration Odessa
- Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
- Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Environmental Variables
In this Hasty Treat, Scott and Wes talk about environment variables — what they are, where you should keep them, and more!
Sanity - SponsorSanity.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 - SponsorIf 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 Notes03: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?
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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 - SponsorVonage 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 Notes02: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
- Scott: Tosowoong Enyme Powder Wash
- Wes: Carhartt Gloves
- Scott: Testing with Cypress - Sign up for the year and save 25%!
- Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Ask Us Anything!
In this Hasty Treat, Scott and Wes are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, and more!
Prismic - SponsorPrismic 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 - SponsorLogRocket 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 Notes03: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 Tweet us your tasty treats!- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Syntax Desk Setups
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 - SponsorSanity.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 - SponsorLogRocket 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 - SponsorWith 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 Notes03:36 - Desk
- Scott
- Ikea countertop on Jarvis Legs.
- Four presets - sit, stand, horse stance, lunge
- Ikea countertop on Jarvis Legs.
- 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
15:39 - Display
- Scott
- Wes
22:49 - Headphones
24:58 - Mouse + Keyboard
- Scott
- Wes
29:18 - Laptop
- Both
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
- Wes
44:11 - Microphone + Capture
- Scott
- 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
- 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
- Wes
- Scott: Testing with Cypress - Sign up for the year and save 25%!
- Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Hireable Skills for 2021
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 Notes04: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.
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
React Query + More React with Tanner Linsley
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 - SponsorDeque’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 - SponsorIf 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 - SponsorMux 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 Show Notes01:56 - What do you do?
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
- Tanner: React Query - Essentials Course
- Scott: Govee TV LED Backlights
- Wes: 1Password
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - The Future of Testing with Cypress
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 - SponsorDeque’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 - SponsorLogRocket 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 Notes03: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.
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorCloudinary 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 Notes01: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.
- Scott: Testing With Cypress - Sign up for the year and save 25%!
- Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - TypeScript Compilers and Build Tools
In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript.
Sanity - SponsorSanity.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 - SponsorIf 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 Notes03:38 - What is a TypeScript compiler?
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
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
- To handle different types of files that are non-standard
- 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
We Review Resumes, Websites, and Online Presence
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Linode - SponsorWhether 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 - SponsorIf 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 Notes04: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.
- Pros
- Pros
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
- Pros
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
- https://twitter.com/wesbos/status/1350961135269400580
- Syntax 298: Voice Coding is Really Good with Josh Comeau
- Josh Comeau
- Doug DeMuro
- Scott: Testing with Cypress - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - Keyboard Events Are Surprisingly Interesting
In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them!
Prismic - SponsorPrismic 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 - SponsorLogRocket 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 Notes03: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
- Better Touch Tool
- Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
TypeScript Fundamentals
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 - SponsorSanity.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 - SponsorLogRocket 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 - SponsorCloudinary 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
- A set of named constants
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
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
- Scott:
- 1: LumiPets
- 2: LumiPets Bear
- Wes: Phomemo Label Printer
- Scott: ESM & Snowpack - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - New Level Up Tutorials Site
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 - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 Notes02: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
- API
- ESBuild
- Insane speeds
- Wrote a custom GraphQL importer plugin
- Mercurious / Fastify
- ESBuild
- 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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
The Deno Show
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 - SponsorDeque’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 - SponsorIf 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 - SponsorMux 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 Notes02: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
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/manual@v1.6.3/getting_started/permissions#permissions-list
- You can specify which dirs it can access
33:39 - Run from anywhere
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
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
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - The New AVIF Image Format Is Unreal
In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it!
Freshbooks - SponsorGet a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - SponsorIf 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 Notes03: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
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!
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 - SponsorPrismic 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 - SponsorLogRocket 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 - SponsorWhether 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 Notes02: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 ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs- Scott: All Courses - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - CSS Typography and Systems
In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems.
Sanity - SponsorSanity.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 - SponsorIf 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 Notes05: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:
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Reactathon LIVE
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 - SponsorGet 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 - SponsorMagicBell, 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 - SponsorIf 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 Notes04: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
27:49 - Hot Take Tweets
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?
- 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
- Scott: All Courses - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
Hasty Treat - A Podcast About Nothing
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 - SponsorPrismic 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 - SponsorLogRocket 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 Notes03: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)
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets