Mon, April 28, 2025

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. Hit us up on Socials! Syntax: X <a href= "https://www.instagram.com/syn

Wed, April 23, 2025

896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More

Mon, April 21, 2025

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? 02:18 Server components rendering. 03:17 Server components are async. 03:45 Server components can be suspended. 05:05 Server components send RSC payloads to the browser. 06:08 This feels like HTMX? 06:54 Client components are still server rendered. 07:58 Server Functions. 08:52 useActionState. 09:12 Frameworks and React Platforms. 09:16 NextJS. 09:42 Waku. 12:26 candycode.com Daishi Kato 14:23 React Router. Michael Jackson Tweet . 19:29 Vite. <a href= "https://github.com/nicobrinkkemper/vite-plugin-r

Wed, April 16, 2025

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 Retrospekt 05:00 Chad’s role at Syntax https://syntax.fm/oss Open Path 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? Fair Source 35:16 What’s the most interesting/unusual open source license? <a href="h

Mon, April 14, 2025

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. Wes MCP Shirt . 03:09 Brought to you by Sentry.io . 03:33 What is MCP ? 05:06 The steps of AI coding. 07:11 MCP hosts. 07:28 MCP clients. 07:35 MCP servers. 08:24 Why you might want to do this. 10:39 How this works in VS Code. 14:10 Wes built an MCP server. SVGL . 14:57 Playwright. 17:24 Sentry’s implementation. Building Sentry’s MCP with David Cramer . 18:54 YouTube implementation. 21:19 DaVinci Resolve implementation. Smithery . <a href

Wed, April 09, 2025

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 Scott Tolinski & The Origins of LevelUpTuts LevelUpTutorials WesBos.com 09:31 How Syntax got its name Episode 001: React Tools 15:30 Getting sponsors Delicious Brains FreshBooks 18:53 Hasty Treats and expanding the show 22:36 Adding interviews to Syntax SVGs with Sara Soueidan 23:38 Syntax’s first live show Live at JAMstack_conf 27:58 Brought to you by Sentry.io 28:34 Acquisition by Sentry 600th Episode! Major Announcement and Swag Giveaway! <li

Mon, April 07, 2025

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. 18:43 The challenges with shared caching. 19:33 Tailwind CSS implementation. Tailwind dark-mode . 19:52 Shoehorning in dark mode. 22:25 Other things to consider. 22:28 Color contrast. <li class="has-line-data" data-line-start=

Wed, April 02, 2025

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 Stripe PayPal Square Authorize.net 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 Lemon Squeezy Gumroad Paddle Beacons 32:51 Handling fraud, disputes, and refunds 41:25 Sick Picks + Shameless Plugs Sick Picks Scott: Parcel Wes: Parcels App Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Mon, March 31, 2025

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 . Level Up Tutorials , Travis Neilson . 04:41 Project planning and organization. 05:53 The codebase. 09:50 The CSS changes. Episode 770: Design Systems With Brad Frost . 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. Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/

Wed, March 26, 2025

888: You Need a Monorepo × Client Only React × TanStack + More

Mon, March 24, 2025

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. Levelsio Airplane Game . 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. Scott’s Piano UI on X . Episode 876: MIDI & Music In the Browser . Wes’ Roomba on X . Wes’ Roomba on YouTube . Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: <a href="https:/

Wed, March 19, 2025

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! Supper Club × Next.js on AWS + Serverless with Dax Raad 02:37 Brought to you by Sentry.io 04:52 Intro to SST config SST AWS 05:40 Overview of Scott’s SST config file 12:33 Exploring SST’s endless capabilities SST’s docs Cloudflare 15:42 The SST developer experience Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan Supper Club × Flightcontrol with Brandon Bayer 19:05 SST console and GUI overview 22:13 Resource management and pricing 24:52 Secrets management 27:38 Tunneling and security <li class="has-line-data" data-line-start="21" data-line-end="

Mon, March 17, 2025

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 . Damnit Sans . 02:53 @font-face. 03:27 Font Display . 07:40 Avoiding layout shift. Fallbacks . 10:45 Variable fonts. Fontaine . font-kit Wakamai Fondue . Syntax Ep. 782 . Font Variation Settings . 16:23 Variable font sizing. 17:46 v-fonts . 19:10 text-box-trim & text-box-edge. text-box-trim examples . 21:28 Browser support. Hit us up on Socials! <p class="has-line-data" data-line-start="25" data-li

Tue, March 11, 2025

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 Sick Picks Daniel: pprof-it Anders: USB Hand Warmers Shameless Plugs TypeScript Hit us

Mon, March 10, 2025

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. Web Vitals Playground . 03:38 LCP - Largest Contentful Paint. 05:04 FCP - First Contentful Paint. 06:07 CLS - Cumulative Layout Shift. 10:58 INP - Interaction to Next Paint. 13:43 Measuring the impact. 14:22 TTFB - Time to First Byte 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 . Sentry Web Vitals . 21:49 Checking the performance of Wes’ site. Hit us up on Socials! Syntax: X Instagram Tiktok Linked

Wed, March 05, 2025

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 Yii Laravel 02:27 What is Fusion for Laravel? 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 Livewire 37:32 Databases and scaling 41:27 Postgres extensibility and hosting options Crunchy Data Xata 47:44 The vision for Fusion <li class="has-line-data" data-line-start="24" data-line-

Mon, March 03, 2025

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? shiki . xior . ky . 10:17 Does Alpine.js solve HTMX’s client-side limitations? Syntax Ep. 868: The State of JavaScript . Server Driven Web Apps With HTMX . Syntax Ep. 568: Supper Club × Caleb Porzio . Alpine.js . Inertia.js . 16:47 How should I host my database for a local-first app? Neon Tech 22:50 Brought to you by Sentry.io . 24:14 Should I use Next.js if I want a separate backend? Create Vite Extra . <li class="has-

Wed, February 26, 2025

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 Home Assistant Frontend 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 Talking with Home Assistant 37:16 How Paulus made it possible to flash microcontrollers directly from the browser Open Home Foundation 43:48 Web Serial and Web Bluetooth APIs 47:03 Matter, Zigbee, and Z-Wave – where smart home standards are headed Matter <a href="https:

Mon, February 24, 2025

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. 03:06 How Cloudflare Workers… work. 04:39 How Cloudflare Workers run. 06:05 Workers size limitations in JavaScript. 07:37 Cloudflare has their own way. 08:13 Potential vendor lock-in. 08:51 You pay based on CPU time, not wall time. 10:26 Cloudflare Pages. Compatibility Matrix 12:07 Durable Objects. Zeb X Post . PartyKit.io , tldraw . 16:41 Cloudflare Workflows. 19:52 How we do something similar on Syntax.fm . 20:52 Cloudflare Queues. 25:26 Files. <li class="has-line-data"

Wed, February 19, 2025

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 Nitro 06:01 What’s the connection between Nitro and Nuxt? Nuxt 09:23 What makes something an UnJS package? UnJS 12:55 Nitro’s built-in features 18:21 What would Daniel use to build an app today? Cloudflare Vercel Netlify 28:01 Brought to you by Sentry.io 28:36 Nuxt and SST SST 32:25 Nuxt vs. Next.js in 2025 Next.js 40:06 Keeping docs up to date 44:46 Who is behind the fantastic design of the Nuxt website? Anthony Fu Rmoon <

Mon, February 17, 2025

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. Tailwind CSS V4.0 Blog . 02:53 Wes’ favorite new feature. 05:45 @property. CSS Houdini API . 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. Styling Descendants . 20:48 Why not just use “normal” CSS? 22:03 No text shadow support. <

Wed, February 12, 2025

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 Bebot 05:32 What is MIDI? Web MIDI API 14:18 Advanced examples with WEBMIDI.js WEBMIDI.js 17:02 Outputting MIDI messages 24:40 Exploring the Web Audio API webmidirtc 31:20 Audio sampling in the browser 37:35 Media Recorder 39:21 Fun projects MIDI chord machine 42:08 Sick Picks + Shameless Plugs Sick Picks Scott: MX Master 3S Wes: Microcontoller Shameless Plugs <a href="h

Mon, February 10, 2025

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? Signals Proposal . 04:02 Understanding computed state. 04:59 How signals differ from React state. 06:12 How different frameworks handle reactivity. 07:09 DOM Parts. Pull Request . 07:26 HTML Template Instantiation. Template Instantiation . 09:10 Comparing signals across frameworks: Preact, Solid.js, Vue, and more. PreactJS Signals . Hit us up on Socials! Syntax: X Instagram <a href= "https://www.tiktok.

Wed, February 05, 2025

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. Valkey.io . Redis.io . 25:40 Local data. 26:11 Gzip. 29:23 CDN. 30:57 Images. <li class="has-line-data" data-line-start="25" data

Mon, February 03, 2025

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? Standard Schema Spec Fabian Hiller Valibot David Blass ArkType Colin McDonnell Zod 06:00 Benefits of Standard Schema 08:54 Implementation and usage 11:25 Is this primarily for end users or library authors? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn

Wed, January 29, 2025

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 Syntax Episode 870 13:13 Why did 3D never take off? three.js React Three Fiber Rep Fitness Rack Builder Maxime Heckel GitHub Universe The element 18:53 Podcast audio and video in one feed? Who Smarted? 21:06 Brought to you buy Sentry.io 22:30 Best and worst browsers for web dev? Firefox Edge Chro

Mon, January 27, 2025

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? Cursor Features , Windsurf Features . 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. Wes’ Example on X . 16:10 Fire Dispatch Data. 20:01 Rules Files. Cursor Directory . 22:37 Use screenshots. 23:36 Refactoring to separate files. 23:53 Use it to experiment. Hit us up on Socials! Syntax: <a href="https://twit

Wed, January 22, 2025

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 Windsurf Codeium Vs Code Cursor 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 Sick Picks Kevin: Ricoh GR IIIx Varun: Di2 Shifter Shameless Plugs Windsurf Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram

Mon, January 20, 2025

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. 05:57 Enums. 08:30 Other issues. 08:35 Parameter properties. 09:20 Experimental transform types. 10:01 Importing types with type keyword. 11:17 No need for sourcemaps. 11:42 No dependencies. 13:08 Other tools. 13:25 tsx . 14:28 ts-node . 14:44 JSDoc . <a h

Wed, January 15, 2025

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 The State of JavaScript survey 05:27 Logical assignment 07:49 Strings 08:18 Arrays 14:16 Sets 2025 New Years resolution: use maps and sets more and objects / arrays less. 16:10 Browser APIs 22:50 Library tiers list 27:21 Upgrading from M1 Mac Chris Coyier - M4 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</a

Mon, January 13, 2025

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? The Docs . InstantDB . 07:02 Zerobugs loading speed. 11:04 Real-time interactivity. 11:38 Why is it different? 12:11 How to get it set up. 12:58 Querying Data. 16:22 Writing data. 16:31 Upsert. 17:39 Authentication and permissions. Johannes Schickling Ep 767 . 19:27 Preloading. 19:41 Migrations and deployment. 20:17 Some extras. 21:16 CreateSubscriber. 23:08 Can you use this today? <li class="has-line-data" data-line-start="24" data-li

Wed, January 08, 2025

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. Temporal Proposal . 06:23 On device AI. WebGPU API Dawn Native WebGPU 10:26 Models will plateau. Bolt.new , v0 , Lovable.dev . 13:40 Web Awesome will become the most used web components library. Web Awesome . 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. <li class="has-line-data" d

Mon, January 06, 2025

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. Hit us up on Socials! Syntax: <a href="https://twitte

Wed, January 01, 2025

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. Implement CSS Anchor Positioning . 12:48 Freelancers: UX and Design Skills vs. Functional Expertise. 16:47 Choosing the Best Deployment Platform. Syntax Episode 615 . 20:49 Making Websites WCAG Compliant. Polypane . 22:35 Managing Tab State in Complex Apps. 28:43 Will CSS Ever Be Complete? 33:21 When Will Syntax Beanies Drop? Syntax Swag Store . 35:21 The Best Headless CMS for a Tech Blog. 42:15 From Many Packages to Monolithic Frameworks. 46:41 Sick Picks + Shameless Plugs. Sick Picks Scott: <a h

Mon, December 23, 2024

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? 06:07 React. 06:36 Solid Start. 07:04 Tanstack Start. 07:43 Remix 09:42 AI Editors. 11:53 Vite 6. 14:02 Bluesky. 19:52 CSS. 22:17 What did we do? 22:21 React Miami. React Miami Episode . 22:26 JSNation Amsterdam . 23:55 JSNation US + React Summit. 24:57 Terminal Feud . 26:28 Laravel + Terminal basketball game . 27:02 Syntax San

Wed, December 18, 2024

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! Scott’s Svelte5 Overview . 01:27 Brought to you by Sentry.io . 02:06 What’s new in Svelte 5 ? 02:13 Runes . 04:47 $state 07:00 $state.snapshot 11:47 $derived 12:46 $derived.by 15:41 $effect 17:24 $effect.pre 18:05 $effect use cases. 22:20 $props 24:57 Binding state . 27:15 $inspect vsode-wrap-svelte . 28:46 $inspect(…).with 30:42 <a

Mon, December 16, 2024

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. 01:55 User preferences and settings. 02:50 Not logged in state (shopping carts, etc). 03:30 Data for faster loading. 03:51 Privacy concerns. 04:25 Large files or drafts. 05:50 Auth tokens. 07:08 Where to store data. 07:11 Cookies. 07:48 Local storage. 09:15 Session storage. 10:35 IndexedDB . 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. <li clas

Fri, December 13, 2024

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 How ByteDance Became the World’s Most Valuable Startup Lynx ByteDance GitHub Coze Lark MarsCode 06:48 What is Module Federation? Zephyr Cloud 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

Wed, December 11, 2024

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. ffmpeg . Wes’ R2-video-streaming . Wes’ Transcoding . YT-DL . YT-DLP . 13:13 Dynamic ad insertion. 14:29 Bandwidth and hosting. Mux . 18:03 Cloudflare . 19:13 The costs. Wes Bos Tweet Cloudflare TOS . Steve Tenuto tweet . 25:

Mon, December 09, 2024

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. Svelte Docs . 09:07 Read the source. 11:19 Consume content: blogs, conference talks, etc. Dot Conferences on YouTube . GitNation JavaScript Conferences . 16:24 Discord and Reddit. 19:31 Get mentorship and ask questions. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn <a href= "https:

Fri, December 06, 2024

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 iZotope Voice 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 Sound Wavelength Calculator Syntax 516: Wes’ New Soundproof Office Studiobricks Randy’s Studiobricks video GIK Acoustics 23:33 Do egg crates work for sound treatment? 25:22 USB mics vs XLR mics Shure MV6 Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn</

Wed, December 04, 2024

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? Rspack , Rsbuild . Rolldown , Rollup . oxc . Turborepo . 21:01 Quoting projects without seeing under the hood. 25:26 HTTP cookies, partitioned cookies, and chips. Partitioned Cookies . 30:29 Redirect codes; 301, 302, 303, 307 418 I’m a teapot . 36:22 Gaining inspiration for talks and posts. 40:02 My loading state is too fast! Should I use setTimeout? setTimeout Docs . <li class="has-line-data" data-line-start="21"

Mon, December 02, 2024

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. CSS Wizardy . CSS Wizardy on GitHub . 02:06 Brought to you by Sentry.io . 03:16 Benefits of pre-loading, prefetching, and pre-connecting? 07:02 The Speculation Rules API. mdn web docs . 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. Next Master . 18:07 The current prevalence. Hit us up on Socials! Syntax: X Instagram <a href= "https://www.tiktok.com/@syntax

Fri, November 29, 2024

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 Motion 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? Svelte GSAP Anime.js 31:49 Micro-Optimizations in JS 36:02 How do you test frame rates? 38:03 Graphics programming and shaders Maxime Heckel Maxime’s blog 39:58 What is the future of Motion? <a href

Wed, November 27, 2024

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. Just: Dependency-free Utilities . 13:34 Data. Syntax Episode 453 . Syntax Episode 833 . 16:39 Hosting. AWS Amplify . 19:51 Continuous Integration. 21:30 Micro-frontends. 23:25 Package Managers. pnpm Link Workspace Packages . Corepack . <li class="has-line-data" data-line-start="23" data-l

Mon, November 25, 2024

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? 03:52 Publicly exposed webhooks. 04:09 Apple Pay. 04:40 Snipcart . 04:54 Accessing servers when away. Jellyfin , Home Assistant . 07:47 How to set up Cloudflare Tunnels. 10:00 Security risks. Cloudflare Access & Zero Trust . Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok <a href= "https://www.linkedin.com

Fri, November 22, 2024

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? GitHub Next 35:42 Copilot in Xcode GitHub Copilot code completion in Xcode is now available in public preview 39:16 VS Code experimental features @code Hit us up on Socials! Syntax: X <a href= "https://www.instagram.com/s

Wed, November 20, 2024

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. 03:48 Reactive State. 04:14 Store. 04:46 Immutable vs Mutable State. 05:53 State updaters. 06:15 Signals. Solid.js Signal Docs . 06:49 Observables. 07:07 UI is a function of state. 08:39 State Machine. 10:58 Binding state. 11:36 Global vs local. 11:49 Computed State, derived state, selector state. 12:41 Approaches to state management. 12:52 Reducer based. 16:39 Mutation based state. 21:17 Atom based state. <a href="#t

Mon, November 18, 2024

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 . Take The Pledge 01:44 How to find a JS package. 02:56 Searching via NPM . 03:28 Searching via Socket.dev . 06:02 Searching via Reddit . 06:24 Searching via Perplexity . 08:31 Searching via Google autocomplete. 09:25 Searching via Awesome repo. 09:51 Searching via social networks. 10:47 Searching via established projects. 11:19 Evaluating the quality of a package. 12:02 Validating via GitHub Issues. html2canvas . 13:58 Are there types? 15:16 Validating via Socket. 16:15 Validating via Bundlephobia . <li class="has-line-data" data-lin

Fri, November 15, 2024

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 Responsible Responsive Design Webpagetest.org 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 Mux Player Customizer 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 Scot

Wed, November 13, 2024

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 . Open Source Pledge Members . 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. Factorio . Cascadia . Azul . SteamDeck . 19:01 Gifts un

Mon, November 11, 2024

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. Hyundai IONIQ 5 . Tesla Model Y Long Range . 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. <li class=

Fri, November 08, 2024

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 Sick Picks Taylor: <a href= "https://www.target.com/p/desktop-microphone-heyday-8482-stone

Wed, November 06, 2024

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. EggHead.io Blog . 11:56 Queue applications and a ‘poor man’s queue’. 17:20 The real value of a functional QA team. 21:34 Invoker commands. Invokers Explained . Denver Script Talk . 26:29 Growing security and permissions concerns. Little Snitch . 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. <li class="has-line-data" data-line-start="

Mon, November 04, 2024

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. GitHub Copilot 06:31 New tools are build upon existing LLMs. 09:14 VSCode reclaiming ground from Cursor. 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 <a href= "https://githubnext.com/projects/cop

Fri, November 01, 2024

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 LinkDOM 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 Proposal: ESX as core JS feature 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? Signals 41:06 Andrea’s thoughts on server-side APIs 43:43 Andrea’s thoughts on TypeScript 49:13 Sick Picks & Sha

Wed, October 30, 2024

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’ Episode #451 , Episode #609 . 33:55 ‘Ruined Vacation’ 35:47 ‘Console.swear’ 37:28 ‘Another Coupon Disaster’ <li class="has-line-data" data-line-start="23" data-line-e

Mon, October 28, 2024

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? Submit a story . 02:45 ‘Needs a Coffee’ 04:43 ‘Deleting Github’ Defunkt X Post . 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’ Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: <a href="ht

Fri, October 25, 2024

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 Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM Prisma Optimize 20:47 Serverless challenges and solutions Prisma Accelerate 27:11 Cloudflare’s potential to dethrone AWS 29:13 Prisma and local-first development Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024 35:30 Making local-first development mainstream 40:10 Challenges with async 42:43 Søren’s thoughts on Drizzle 43:41 Søren’s favorite database 47:21 The read your writes problem <li

Wed, October 23, 2024

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. Kid Cruz Instagram . 05:18 Password management. 1Password . 08:30 Apple stomping on apps. 09:50 To-do applications. Things . Getting Things Done . Tweek . 18:18 To-do in code. Todo Tree . Better Comments . 20:21 Snippets. 25:55 Mind-mapping. MindNode . <a href="https

Mon, October 21, 2024

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 ? Watch CJ’s Video Here 03:21 Syntax Meetup San Francisco . 04:02 Why I like Hono, and why you should try it. 04:08 Familiar route creation. Connect: an extensible HTTP server framework for node . 05:45 Supports every JS Runtime. 07:00 How a service worker works. 08:48 Helpers. 09:16 Middleware. 10:40 Sentry middleware. 10:55 JSX support. 13:21 Organizing route handlers while keeping Types. 14:24 Type safety. hono-open-api-starter . zod-openapi . <a

Fri, October 18, 2024

836: Real Talk on Web Accessibility with Marcy Sutton Todd

Wed, October 16, 2024

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? Syntax Meetup San Francisco . 08:21 Examples of frameworks for Vue, Svelte and Angular. 12:39 What questions do you need to answer? 12:44 What or where do you need to ship? 14:12 How do you render it? 18:22 Where are you deploying it? 24:03 How do you store data? 24:09 Existing API. 26:03 Integrated server. 26:22 Database. Supabase . 26:59 Does it have RPC or server actions? 34:27 Do you need authentication? 38:45 Auth packages. LuciaJS . Lucia announcement . <li class="has-line-data" data-line-st

Mon, October 14, 2024

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. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads <

Fri, October 11, 2024

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 ? UnJS Nitro Vinxi 06:17 What is the Vite Environment API ? 07:21 Was it always the plan to use Vite? 08:02 TanStack Router and client-side vs server-side 16:18 How TanStack Start will work 27:26 Moving from Create React App to TanStack 30:42 Brought to you by Sentry.io 31:15 Will TanStack Router ever support other frameworks? 33:54 How will TanStack Start handle forms? 36:13 TanStack Virtual 39:41 What is the future of TanStack? Convex 42:49 How Tanner writes documentation 47:55 Server functions and middleware 54:41 When will TanStack Start be in b

Wed, October 09, 2024

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. Proposal: TC39 Import Attributes . HTML iframe srcdoc Attribute . 09:10 Question 2: Working together with QA teams. 13:46 Question 3: Benefits of React with Next.js Framework. Svelte Turnstile . Next.js Pages Router vs Next.js App Router . 17:38 Question 4: What are your real names? 19:22 Question 5: Thoughts on RTO and WFH. 27:50 Question 6: Where can I find you Sick Picks? Sick Picks . Sick Picks Scraper . 29:34 Question 7: From JR developer to SR developer. 31:41 Question 8: Godot and game development. <l

Mon, October 07, 2024

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. Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "

Fri, October 04, 2024

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? How to review code effectively: A GitHub staff engineer’s philosophy 04:18 Strategies for an effective code review processes 06:59 Should you test and fix in the same pull request? 07:57 How to ask for code reviews 12:12 Feature flags and their role in code management flipper scientist scientist - JS 20:03 Who should do code reviews? 23:34 Should you review your own code? 25:04 Brought to you by Sentry.io 25:29 Code comments vs pull requests 27:35 Dealing with egos in the code review process 30:18 What automations are essential? project-pull-mover 34:35 Underutilized tools <

Wed, October 02, 2024

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. <a href="#t=45:29"

Mon, September 30, 2024

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. 01:24 Pros of magic links. 03:50 How magic links work. 04:25 Cons to magic links. 06:21 Magic Sessions. 06:37 Using email verification. 07:12 Using code verification. 07:55 Previously trusted device verification. 08:14 Classic email and verification process. 09:54 Email Code. 10:51 Gmail verification options. 12:01 OAuth. Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"

Fri, September 27, 2024

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 Aurora 39:33 AI’s impact on tech and the future 41:22 What can developers do to stand out and be relevant in a world of AI? 4

Wed, September 25, 2024

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. 02:48 BetterTouchTool . 09:31 Hyperkey . 11:46 Amethyst . 12:51 Klack . 13:47 Bottom (Btm) . 14:54 Pearcleaner 16:40 App Cleaner . 17:35 Rocket Emoji . 20:27 Clippy . 23:37 Screenshots and Screen Recordings. 24:05 Dropshare . 25:29 OBS with Source Record . 29:20 Screen Studio . <li class="has-line-data" data-line-start="20"

Mon, September 23, 2024

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. Svelte5 , Tauri , Rust , FFMPEG . 08:32 Markdown editor. ink-mde , Dillinger . 09:32 Epoch timestamps. Epoch.vercel . 10:01 Updating front-matter. 10:10 Dexie.js function. 11:25 Backing up data. 11:58 Rust functions. 12:58 Why a desktop app and not a website? 14:38 Some small AI features. 16:26 Challenges with OAuth . 20:03 Publishing challenges. 23:29 Could this work on Windows? <li class="has-line-data" data-line-start="22" data-line-en

Fri, September 20, 2024

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 Intertia Livewire 07:18 Why don’t we have a “Laravel for JavaScript”? 09:02 What parts of Laravel came first? 10:07 The Laravel ecosystem Forge Vapor 12:29 Laravel Cloud 14:00 What parts of Laravel are Intertia and what parts are React? 15:57 How many people are using Laravel? 16:59 Taylor’s productivity and development philosophy 24:43 Brought to you by Sentry.io 25:19 What makes a beautiful API? 29:33 Taylor’s thoughts on typing PHP <a href="#t=30:41

Wed, September 18, 2024

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. Syntax.fm Episode 728 with Kevin Hou of Codeium 04:08 Cursor’s UI. 04:51 This is cool, why is it not a plugin? 08:12 What makes the UI interesting. 09:13 Smart Rewrites . 11:44 It can create multiple files. 13:05 Using the chat interface. 16:32 Another chat example. 20:22 The main features of Cursor. 21:55 Multi-line auto-complete . 23:55 Using docs for additional context. 27:26 AI is here to help you, not replace you. 33:27 Is it worth it? 33:55 The pricing . <a h

Mon, September 16, 2024

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. Follow the posts on X . 02:40 Why a receipt printer? 03:55 How do these printers work? ESC/POS . 05:20 Communicating with the printer. 07:24 ESC/POS Encoder. ESC/POS Encoder . 08:42 Socket issues. 09:56 Using Transformers.js to stop ‘toxic comments’. Xenova’s toxic-bert . Implementation in Wes’ code . 10:48 Back to socket issues. 12:18 Integrating with Sentry. 15:01 Printing images with Playwright. 16:17 Was it worth it? <a id="Hit_us_up_on_S

Fri, September 13, 2024

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 Verso Servo 25:05 How does Tauri make money? CrabNebula 30:05 Brought to you by Sentry.io 30:30 Accessing Swift from JavaScript 31:44 What’s the hardest part of a project like this? Haptics Plugin 37:00 Some of the apps that have shipped with Tauri Cody GitButler Tauri Discord Awesome Taur

Wed, September 11, 2024

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. Bundle Phobia . Javascript Bundle Analysis [Beta] . 29:44 Balancing learning, doing, and teaching. 33:04 Making maps local first. 36:20 How to pronounce ‘schema’. Wes Bos Tweet . 37:09 HTML tag . 40:11 Where to get replacement ear cups for headphones? <li class="has-line-

Mon, September 09, 2024

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? drop-in . 20:34 Keeping notes. 23:14 Finishing side projects. 26:39 Shameless Plugisode! Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok L

Fri, September 06, 2024

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 DenverScript Code Talent 06:35 How do you structure a meetup? 09:50 How do you raise awareness for a meetup and get people to attend? Meetup.com Guild 13:27 How to pay for a meetup 15:22 How to get speakers at meetups 16:50 The length of these talks 17:03 Does live-streaming hurt attendance? Syntax 806 - The King of Drag and Drop: Alex Reardon 19:32 Is there a vetting process for finding speakers? Syntax 019 - How to Get Into Speaking at Conferences 24:26 A meetup doesn’t have to be talks <a href="ht

Wed, September 04, 2024

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. 01:43 DaisyDisk . 04:19 Marta . 07:50 EasyFind . 10:16 Czkawka . 12:53 Backblaze . 14:40 Hazel . 17:42 AutoMounter . 18:43 Media applications. 18:52 Automator HIEC to JPG. 20:04 Rant on QuickView. 20:32 DVD idea. 22:06 IINA . 24:07 Capture One . 25:02 YouTube Enhance . 27:16

Mon, September 02, 2024

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. CSS Logical Properties 21:16 You aren’t using the right tool for the job. CSS Flexbox , CSS Grid . 24:15 You’re setting the value in too many places. 24:31 You’re scoping to tightly or not tightly enough. Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "https://www.linked

Fri, August 30, 2024

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 Lume Fresh webgpu-examples gpucraft minecraft clone + deno + webgpu gpucraft example Shaderplay Orillusion <li class="has-line-data" data-line-sta

Wed, August 28, 2024

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 HTML elements reference The Main element 08:45 Doctype 15:24 Nav 18:47 Section 20:41 Aside 22:09 Article 22:54 Span 27:18 Why use a span when you have a div and a paragraph tag? 29:29 Figure and Caption 31:16 Fieldset 31:53 UL vs OL 32:44 DFN The Definition element 34:16 Form <li class="has-line-data" data-line-start="24" data

Mon, August 26, 2024

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. Syntax 695: 5 New CSS Features You Should Know Scroll-driven animations demos and tools . 04:13 @keyframes . 05:22 animation-timeline . 11:35 animation-range . 08:49 View-based timelines. 17:45 Neat uses: Dave Rupert on styling :stuck . Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram <a href= "https:/

Fri, August 23, 2024

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. CSS RFC . 17:49 - Use-cases for allow-discrete. 20:34 - State queries. 24:19 - Where does the baseline data come from? 25:17 - Will the RFC become official? The latest in Web UI (Google I/O ‘24) . 27:33 - New features Una is excited about. 29:44 - Select. https://open-ui.org/components/customizableselect . https://codepen.io/argyleink/pen/YzoEPOG . 38:31 - New features Adam is excited about. 39:24 - text-box-trim. 40:59 - State queries. 54:56 - Sick Picks + Shameless Plugs.</li

Wed, August 21, 2024

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. Deno . Bun . 02:51 TypeScript . tsx . swc/wasm-typescript . 10:03 SQLite v22.5 . 14:35 .env support . 16:24 Test runner . Jest . 19:42 Watch Mode . nodemon . 21:22 Glob support . 22:48 Top-Level Await . Top-level awa

Mon, August 19, 2024

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() . Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "https://

Fri, August 16, 2024

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 Syntax Squad 22:21  Written content vs video content 24:29  Tech stack Terraform Pulumi React Vercel Fastify Postgres Go 25:37  Building a positive community 30:32  Moderation and tagging 35:03  Francesco's favorite place to publish right now 36:56  Quadrupling down on Rust Rust 39:38  Francesco's favorite Rust framework Actix 41:18  Sick Picks & Shameless Plugs Sick Picks Francesco:  daily. dev Shameless Plugs Francesco:  Francesco's YouTube Channel Hit us up on Socials! Syntax:  X   Instagram   Tiktok  <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts

Wed, August 14, 2024

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 SvelteKit Vite 14:27 - When to use an API Strapi 17:38 - Where does Scott get his amazing t-shirts? Sentry.shop Syntax Snack Pack 21:33 - Best screwdriver for kids toys PicQuic Sixpac Plus LTT Screwdriver 24:31 - Strategies for database design MongoDB Prisma 30:21 - Do we need frameworks? 796 - Do We Need JS Framewo

Mon, August 12, 2024

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 https://developer.mozilla.org/en-US/docs/Web/CSS/@scope 21:07 - How is Panda different from style components? Panda StyleX 00:00 - Utility CSS TailwindCSS Uno 31:08 - Utility Sprinkles 34:13 - CSS variables open-props.style Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "https://www.linkedin.com/company/96077407/admin

Fri, August 09, 2024

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 react-beautiful-dnd Pragmatic drag and drop 04:38 What makes drag and drop tricky. 06:38 Use-cases. 10:54 What security is in place? 12:30 How to make it feel native. 19:20 Is the drag and drop spec ongoing? 20:03 How do you build this headless? 21:33 How does drag and drop work with frameworks? 23:48 Making drag and drop feel the same across mobile and desktop. 26:09 What’s the key to really good drag performance? 29:58 How do you make drag and drop accessible? 34:57 Pragmatic drag and drop code vs application code. Shoelace shadcn <li class="has-line-data" dat

Wed, August 07, 2024

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. 04:31 forwardRef. 05:27 memo. 06:39 Context API. 07:18 StrictMode. 08:45 Double rendering. 09:36 State management. 11:58 Hooks Pain Points. 12:11 useEffect. 12:33 Dependency arrays. 13:11 New API Pain Points. 13:19 React Server Components. 14:40 Taint API. 15:19 Libraries. 17:02 Jotai . 17:45 Apollo Client . 19:05 Redux . <li class="has-line-data" data-line-start="

Mon, August 05, 2024

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. 03:16 Your website should load, be readable and be (mostly) styled without JavaScript. 07:32 Web standards first. If it can be done without JavaScript, it should be. 08:09 What if the CSS doesn’t load? 10:20 Linking 10:24 Forms. 12:11 Links (Duh, but also c’mon!) 12:35 Query parameters. 13:57 Server render if possible. 15:20 Progressive Enhancement. 17:24 CSS Page Transitions. 19:07 Let’s test websites out. 19:15 Shopify. 22:16 Syntax.fm . 25:23 Netflix. 27:27 Local first and offline service workers. <li class="has-line-data" data-line-start="23" data-line-end=

Fri, August 02, 2024

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 datab

Wed, July 31, 2024

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

Mon, July 29, 2024

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. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Insta

Fri, July 26, 2024

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. Install Nothing: App UIs With Native Browser APIs - Scott Tolinski . 07:54 Building the community around jQuery. 11:16 jQuery plugins. 13:00 Did you ever make money from jQuery? 16:13 What is your role at Khan Academy. 17:58 What is the tech stack at Khan Academy? 21:56 Why do you want to change your CSS and JS framework? 24:03 TypeScript vs Flow. 25:25 GraphQL federation. 28:08 What was your frontend framework journey? 30:23 Is there any part of React you wish would improve? 32:37 Reservations using React Router. 33:14 Khan Academy web platform vs native platform. 35:21

Wed, July 24, 2024

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! Install Nothing: App UIs With Native Browser APIs – Scott Tolinski . Tolin.ski Demos . 01:03 Brought to you by Sentry.io . 02:15 When to use these tools. 03:45 @starting-style CSS API. 08:23 Transition behavior allow-discrete. Dialog CSS . 11:56 calc-size(auto). 16:19 scroll-snap. Swiper Indicators . Slide Show . Scroll To Options Snap-Additions . Adam Argyle Tweet . 22:05 View Transitions. Cross-document view transitions for multi-page applications <li class="has-line-data" data-line-start="20" data-line-e

Mon, July 22, 2024

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? 05:09 Combining multiple servers. 06:51 Load balancing. 07:23 SSL certificates. 10:30 Security. 10:37 Conceal your true IP. 11:24 Access management. 12:31 Routing static assets. 13:31 CDN / local. 15:55 Caddy × websocket support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads <p class="has-line-data" data-line-start=

Fri, July 19, 2024

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! Syntax × Drizzle Swag . 01:15 What is Drizzle? 02:36 The genesis of Drizzle . 04:15 The process of building an ORM. 05:38 ‘100% Type-Safe’ and why that’s not a great goal. 07:50 Who is responsible for writing the complicated TypeScript? 09:40 Is an ORM necessary for anyone working with data? 12:15 Creating a product that fits different complexities. 13:19 Brought to you by Sentry.io . 13:44 Creating filters in Drizzle. Callback-based, or imported. Why? 19:22 Drizzle vs Prisma vs Kysely. 22:45 Are you friendly with Prisma? 23:35 Relational queries. 25:17 Query vs select. 27:42 Maintaining so many different technologies. 30:37 Switching databases. 31:39 Drizzle Studio. <a href= "https://drizzle.studio/themes/DQxCNy

Wed, July 17, 2024

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. A guide to LLM inference and performance . From Words to Watts: Benchmarking the Energy Costs of LLM Inference . 25:19 Why do we need frameworks? Frank M Taylor Blog Post . 33:05 Handling ad-blockers blocking Sentry and other tools. Syntax GitHub . 38:25 Creating sites without JavaScript. 42:49 Do I really have to learn all the various developer tooling? <a href="https://x.com/wesbos/stat

Mon, July 15, 2024

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. Scott’s Fonts . 05:42 The solution, a font server with Cloudflare Pages . 09:37 Utilizing a Key Value Store. 10:53 Storing a whitelist. 13:42 Why not just use a bucket? Check out the code . 15:24 Should whitelisting be done in JavaScript or cores? 17:23 How do you cache to multiple origins? 18:15 Multiple URLs in an allow origin. 19:17 Font security and foundry challenges. 21:43 Moving Domains on Cloudflare. Check out the font Syntax uses! MD-IO . Hit us up on Socials! Syntax: X Instagram

Fri, July 12, 2024

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. Prettier Philosophy . 18:31 Next step, integrations. 19:37 Should you run Prettier on save or commit? 21:34 Does Prettier’s limitations lead to higher adoption? Prettier Config . 25:01 What was the most controversial default setting? 28:14 Does Facebook use semicolons? 29:18 Getting approval to devote 6 months to Prettier. 31:42 Working with Mark Zuckerberg. <a href="#t

Wed, July 10, 2024

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. Scott’s Blog: The Spectrum of Local First Libraries . Syntax 739: The Lofi Movement . 04:27 Some local first apps we love. Linear . Tweek.so . Superhuman . 05:15 The advantages of local first. 06:07 localfirstweb.dev . 09:21 Triplit . 15:33 Evolu . 22:32 RxDB . 24:08 ElectricSQL . 26:57 Pouchdb . 28:46 <a href=

Mon, July 08, 2024

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! New Swag Coming Soon . Tolin.ski . 02:09 Brought to you by Sentry.io . 02:39 Sitemaps. 04:36 Why do you need a sitemap? 06:34 Sitemap file formats. 08:31 Choosing a file format. 09:17 Site map file size limits. 10:32 Fully-qualified URLs. 10:50 Fields and metadata. 10:58 What fields matter for SEO? 14:20 What to avoid in your sitemap? 14:23 Dynamic user pages and account pages. 14:43 Parameter-based URLs. 16:01 Redirects, duplicates or disallowed pages. 16:11 Unlisted pages. 17:07 How do you make a sitemap? 20:06 What to do once you have a sitemap. 20:08 Validation. <a href="#t=20:20"

Fri, July 05, 2024

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. Fabrice Bellard QuickJS . 28:03 The Quick.js engine. 30:35 What was the reason behind creating Quick.js? 33:46 What made you pick Rust for LLRT? 36:34 Abstractions and the value of speed. <li class="has-line-data" data-line-start="22" data-line-end

Wed, July 03, 2024

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! State of JS 2023 . 03:04 Brought to you by Sentry.io . 03:43 New Syntax Swag! Syntax Swag Store . 04:42 Front end frameworks. 08:30 Front end framework pain-points. 12:17 Metaframeworks. 17:45 Metaframework pain-points. 22:17 Build tools. Rolldown . 24:45 Build tool pain-points. 25:54 JavaScript runtimes. 28:19 Edge + serverless runtimes. 29:30 Backend frameworks. 33:17 Non-JavaScript languages. 36:12 Hosting service. 38:50 Usage. 40:05 Javascript usage. 41:03 Missing features. 45:04 Industry sector. 47:37 The awards. 51:34 Sick Picks + Shameless Plugs. Sick Picks Scott: Electric Lighter . Wes: Monkey Noodle . Shameless Plugs Wes: Syntax Swag Store . Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram <a href= "https://ww

Mon, July 01, 2024

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? Quizgecko GPT-4 Token Counter . 04:22 Context window sometimes called “max tokens”. OpenAI Platform Models . Claude Models . 10:42 Understanding input length. 11:59 Models + services with big token counts. Gemini Docs . 13:22 Generating open API documentation for a complex API. 17:29 Generating JSDoc style typing. Drop-In stolinski GitHub . 21:07 Generating seed data for a complex database. bytedash w3cj GitHub . 24:34 Summarizing 8+ hours of video. 29:35 Some things we’ve yet to try. 31:32 What about co

Fri, June 28, 2024

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? Why Open Source . 07:22 How many users chose to self-host? 07:49 Open source mindset. 08:42 Simplicity in design. 10:32 How do you take Supabase one step beyond the competition? 12:35 How do you decide which libraries are officially supported vs community maintained? 15:17 You don’t need a client library! 16:48 Edge functions for server-side functionality. 18:51 The genesis of pgvector. 20:59 The product strategy. 22:25 What’s the story behind Supabase’s awesome docs? 25:26 The tech behind Supabase. <li class="has-line-data" data-line-start="22" data-line

Wed, June 26, 2024

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. 05:43 Script tag. 06:01 CLI. 07:10 The value of an opinionated CLI. 10:51 Why do you like Vue.js over React or Svelte? 11:03 Less boilerplate. 15:24 Self-closing tags. 16:09 Svelte parsing HTML tags incorrectly. Hacker News Article . 17:08 Easily adding event handlers to elements. 18:20 Conditional rendering. 19:19 What is a directive? 20:29 ‘Borrowing’ from Angular One. 21:07 Styles are built in. 22:11 Tailwind for scoping. <a hr

Mon, June 24, 2024

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 . Sentry Open Source . Giving away $500,000 to open source projects . 01:56 What is open source? 03:19 This is not legal advice. 03:51 Source available ≠ open source. No Permission . 06:39 The benefits of open source. 07:26 Educational. 07:52 More Secure. 09:32 Community-oriented. Scott’s Habit Path 11:29 Types of licenses. 12:09 Permissive licenses. 12:26 MIT License. 14:37 Apache 2.0 license. 15:31 Copy Left licenses. 15:58 GNU GPLv3

Fri, June 21, 2024

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? react.dev Playground . 09:30 Will this work on any NextJS version? 12:18 What are React Server Components? 16:28 Shipping all the data inside an encapsulated component. 20:17 Clearing up the frustrations around retrofitting server components. 23:13 Handing migration. 28:30 Is this just a fetch request with props? 36:41 How closely are the NextJS and React teams working? 41:53 Will we ever get Async Client Components? 43:52 Async Local Storage API. 45:31 Turbopack . 57:51 Sick Picks & Shameless Plugs. Sick Picks Tim: Apple TV Sci-Fi . <

Wed, June 19, 2024

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. Potluck Questions . 02:46 Brought to you by Sentry.io . 03:21 Logging from a site. 08:39 Blogging in 2024. 11:49 Sharing website environmental data. Green Web Foundation . Website Carbon Calculator . Syntax Site Results . Scott’s Site Results . 17:38 Using LangChain when working with LLMs. 21:03 CSS Hyphens and Overflow-Wrap. Hyphens Browser Compatibility . Overflow-Wrap . 25:52 Similarities between WASM, JVM and .NET. 27:25 Writing unit testing and integration testing. 32:00 How can new parents stay current on web

Mon, June 17, 2024

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. Mozilla Developer Cache API . Airhorner, a good example . 04:24 Size restrictions per browser. 07:04 How tools like Riverside.fm use IndexedDB. 08:47 Data eviction (too much data). 10:16 What we’re using it for and how. 12:17 How do we do this in code? 14:37 Creating the cache. 16:18 Retrieving from cache manually. 19:00 Adding metadata. 19:37 A live debugging. 22:39 Persistent storage. web.dev Persistent Storage . Hackernoon Persistent Storage . <li class="has-line-data" data-line-start="22" data

Fri, June 14, 2024

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? Process Type Foundry . Mark Simonson Proxima Nova . 05:42 What is a type foundry exactly? ArrowType . 09:09 Font / type making. 09:15 How do you make a font? RoboFont . Glyphs . 11:58 Fonts vs typefaces. 13:02 How many fonts have you made? 14:17 What are variable fonts and how can web developers utilize them? 19:22 Animating fonts. Variable Fonts . Recursive . 20:28 Do you code your demo sites yourself? 21:50 Are variable fonts more complex to design (and develop). Matthew Carter Adobe Fonts , Matt

Wed, June 12, 2024

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. DHH Tweet . 09:23 Does Sveltekit replace Svelte with Astro? 13:09 Handling multiple languages. 19:52 Falling out of love with React. 25:53 Shipping private packages via NPM. npm-install . Working with the npm registry . 29:00 How do you feel about importing packages from a URL? 30:36 VueJS vs Svelte. 36:15 Leetcode type interview questions. 41:58 Learning a new language for personal growth. 46:21 Always starting, never finishing. Scott’s Fluid Type Calculator . 50:23

Mon, June 10, 2024

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. Dropshare . 08:16 Why you may need larger storage. 09:49 The big players in this space. Amazon S3 . Cloudflare R2 . Backblaze B2 . Synology C2 . Google Cloud Storage . Microsoft Azure . Digital Ocean Spaces . Oracle . Bunny.net . Amazon S3 Glacier . 14:34 Storage fees. 18:31 Why so cheap? 20:49 Bandwidth (egress). <li

Fri, June 07, 2024

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? <li class="has-line-data" data-li

Wed, June 05, 2024

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! Previous Episode: 754 . 00:50 Brought to you by Sentry.io . 01:24 Denver weather is something else. 02:15 Habit #1: You understand stakeholder and business goals. 05:34 Habit #2: You’re curious and always learning. 07:43 Habit #3: You have an open mind about new technology. 11:29 Habit #4: You ask for help. 13:43 Habit #5: You help others. 16:51 Chicken drumsticks. 17:35 Habit #6: You have a “problem solver” mentality. 24:44 Hose repair. 26:02 Habit #7: You have fun with what you do. 29:56 Habit #8: You understand work-life balance. 33:18 Habit #9: You are empathetic to your co-workers and users. 37:19 Habit #10: You pay attention to detail. 41:18 Habit #11: You’re part of the community. 45:55 Sick Picks + Shameless Plugs. </a

Mon, June 03, 2024

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. Host for free on Fly.io . 07:37 Hooks. 08:05 Authentication + roles. 09:23 The admin experience. 11:18 Managing export collections . 13:21 Creating your own schema. 13:53 Adding indexes. 14:08 API rules . 15:01 Adding complex roles. 16:15 Full-featured admin with a great UI. 16:59 Collection API preview. 17:41 Docs with app-specific context. 18:54 Logs . 19:02 Settings. <li class="has-line-data" data-line-start="22" data-line-

Fri, May 31, 2024

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’

Wed, May 29, 2024

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. Wes’ TikTok Demo . 18:51 Portal. 21:02 Drawer. 22:56 Auth forms. 28:49 Dialog / Modal. 31:30 Whats the difference between popover and dialog? 33:48 Confirm. Scott’s YouSureAboutThat . 35:46 Bonus tip on becoming a better developer. 36:29 Admin menu. Level Up Tutorials - Side Menu Demo . 37:51 Scott’s package directory rant. 40:26 Mobile only / Desktop only. 40:41 Client only. 40

Mon, May 27, 2024

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. Promise.withResolvers() . Wes’ TikTok . 06:10 Fetch. 09:04 Flow Control. 12:19 Concurrency, Throttling, Queuing. p-map . p-limit . 16:13 TypeScript and Promises. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:<a href="htt

Fri, May 24, 2024

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? Mercari: Buying & Selling App . 07:13 What about Twitter + Facebook? 09:15 What is Expo? Is Expo Required? expo.dev . 13:27 Does it require a Mac to build an iOS app? 14:58 React Native and routing. Expo Router . 16:56 How do native apps normally work without a URL? 18:35 Can you use CSS with React Native? 20:27 Do React Native or Tamagui translate to CSS or Yoga? Tamagui . Yoga Layout . 21:02 React Native app styling on Andro

Wed, May 22, 2024

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! Thanks to Codeium . Syntax Episode 728 with Codeium . 01:37 Brought to you by Sentry.io . 02:38 Rewarding hard work with more work. 07:14 April Fools Episode. Syntax Episode 750 on April Fools . 09:03 Teaching programming to your family. Codespark . 15:56 React Server Components using JS runtime. 19:58 What happened to the intro music? 23:06 How can I quantify my work to the executive leadership team? 29:16 Should I host my own course website or use Udemy? 35:34 Navigating professional growth in toxic workplaces. 40:43 Getting started in native dev with tools like Tamagui. Syntax Episode 601 on Tamagui . 45:42 Cloudflare, what the heck is it? <li class="has-line-data" data-line-start="21" data-line-end="23

Mon, May 20, 2024

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. 07:04 Promise.all() vs Promise.allSettled(). 09:12 promiseInstance.finally() 09:26 Promise.any() and Promise.race() 12:08 Error handling strategies. Tuple await-to-js . Youtube - 5 Async + Await Error Handling Strategies . 17:30 Promise.race() example. 18:54 Static Promise.reject() and .resolve() methods. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: <

Fri, May 17, 2024

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<

Wed, May 15, 2024

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. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram <a hr

Mon, May 13, 2024

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 . 03:03 Actions + server actions. Syntax Episode 766 . 04:54 Using server actions for a checkout. 06:11 Web components. Custom Elements Everywhere . 09:44 use() API. 10:31 With promises. 14:25 With context. 17:32 How does Zustand work? Stately.ai . X @DavidKPiano . 18:26 No more ForwardRef. 20:05 Ref cleanup. 20:43 Document metadata. 24:14 Upgrading to React 19. Hit us up on Socials! <p class="has-line-data" data-line-st

Fri, May 10, 2024

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 Consolidati

Wed, May 08, 2024

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. 08:45 Avoid custom useEffects or third party libraries. 09:17 Calling server code from the client without any APIS. 11:31 Some examples of actions. 12:54 Can these actions be done in a client component? 13:40 Where to use actions. 13:49 On a form submit. 15:30 In an event handler. 15:57 In a useEffect(). 17:13

Mon, May 06, 2024

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. 03:45 A fetch call to an API returns a promise. 05:54 A database query or Insert command 07:18 A request for user permissions. 07:37 A wait function. 08:08 Resolve or rejecting promises. 09:33 Creating promises. 09:46 New promise. 11:09 Promise.withResolvers() . 11:37 An async function . 14:34 Waiting on a promise. 15:09 .then(). 16:50 Await. 17:44 Why use one wait method over the other? <a id="H

Fri, May 03, 2024

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 <a href= "h

Wed, May 01, 2024

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. <li class="has-line-data" data-line-start="23" data-l

Mon, April 29, 2024

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? 02:57 Color palettes. 03:14 Font stacks. 06:26 Type scales. Warp’s CSS Gradient Border . Sentry’s Date Picker . 08:52 General layout patterns. 10:39 General vibes. 11:20 What is NOT okay to steal? 11:26 Whole site designs. 13:32 Taking too many things from ‘what to steal’ list. 16:30 Text copy. Wes’ Parity Purchasing Power . 18:48 What we’ve had stolen + how it feels. 21:45 Where to find inspiration. 21:56 Code inspiration. CSS Scan Buttons . <l

Fri, April 26, 2024

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

Wed, April 24, 2024

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. 34:45 Text pastry . 36:43 Better comments . 39:03 Auto rename tag</a

Mon, April 22, 2024

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. 11:10 CodePen . 13:14 Full stack services. 13:47 Your own stack. Hot Tips & Cool Treats. Wes’s Hot Tips . Scott’s Cool Treats . 21:01 Bun file routing . 24:25 Tooling and tips. 26:30 Da

Fri, April 19, 2024

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. <li class="has

Wed, April 17, 2024

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 <a href="#t=27:4

Mon, April 15, 2024

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. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn <a href="

Fri, April 12, 2024

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? <a href= "https://dev

Wed, April 10, 2024

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

Mon, April 08, 2024

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? 06:29 Marketing A/B testing - cookie based. 06:55 User-selected features - such as themes. 06:58 Language or geo-based items - accept language. 07:11 Images - WebP for some browsers, jpg for others. 07:45 JSON/HTML based on accept header. 08:17 Different encoding. 08:26 Content negotiation . 08:54 The solutions. 09:04 Provide different URLs/Query parameter. 11:19 Don’t cache the page, cache the data based on query. 15:01 Implement a “Cache Key” - one render for every option. Netlify Fastly <li class="has-l

Fri, April 05, 2024

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

Wed, April 03, 2024

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? 04:14 Must be functional. 06:20 They must fit styling. 06:33 They must be accessible. 08:09 “Internationalizationable.” 09:29 They must handle theming and variants. 10:05 A few common UI components. 10:14 Date Pickers. 12:10 Dropdowns. 13:21 Toast message. Svelte French Toast 15:11 Some honorable mentions. 16:10 Headless components. 18:54 React Aria . Behavior , Accessibility , Internationalization 19:34 <a href= "https://www

Mon, April 01, 2024

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. Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "h

Fri, March 29, 2024

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. <li class="has-line-data" data-line-start="23" data-line-

Wed, March 27, 2024

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. <a href="https://www.amazo

Mon, March 25, 2024

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. 05:10 Authentication. 07:44 Redirecting users to a specific instance. 08:28 Logging + statistics. 09:41 Debugging. 10:00 Timers. 10:46 A/B testing. 11:59 Error handling + logging. 12:23 Caching. 13:02 Multi-tenant applications. 15:08 Where does it run? 18:07 What are the limitations? 21:52 Next.js middleware is one file only. NextJS Middleware 23:35 Sveltekit solution. Sveltekit Hooks 24:31 Connect style. <a href=

Fri, March 22, 2024

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? <a href="#t=33:36

Wed, March 20, 2024

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. 07:21 Linters. 11:29 Compilers and transpilers. 13:30 Formatters. 16:18 Tokenizers and Parsers. 16:46 Bundlers. 17:59 Macros. 20:26 The new tools in the space. 20:47 Biome , one toolchain for your web project. 28:27 Oxc , the JavaScript oxidation compiler. 33:01 Deno , code formatting. 34:13 ESBuild , an extremely fast bundler for the web. 34:37 Rolldown , fast Rust-based bundler for JavaScript. <li class="has-line-

Mon, March 18, 2024

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. Podman Containerd Buildah LXD 05:26 Why would a web developer want to use Docker? 08:19 How do you get started with Docker? Download Docker Desktop Start With Docs Docker 101 09:14 How does Docker work? Docker Sentry Docker Registry <li cl

Fri, March 15, 2024

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. <li class="has-line-data" da

Wed, March 13, 2024

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? Whatever you think, think the opposite It’s not how good you are, it’s how good you want to be Crucial Conversations thanks @benvinegar 04:58 What are the web development fundamentals for beginners? Command Line Power User 08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? Chris Coyer’s Post 11:51 Advice for migrating an existing React project to TypeScript. 20:38 Countdown apps, performance vs accuracy. 25:19 Are you listening to podcasts? Which ones? 31:46 With AI on the rise, will free-tier plans become a thing of the past? Coolify Syntax 730: Own Your Own Paas <a href="#t=3

Mon, March 11, 2024

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? <a href= "https://www.typescriptlang.org/docs/handbook/triple-slash-

Fri, March 08, 2024

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? <li class="

Wed, March 06, 2024

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 <a href= "https://www.youtube.com/watch?v=DEcwa68f-jY&ab_channel

Mon, March 04, 2024

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. 16:54 Apple Scripts 17:45 Stand-alone website. 19:25 Script Kit : Shortcut to Everything 20:19 Other ways to run scripts. ZX <li class="has-line-data" data-li

Fri, March 01, 2024

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? <li class="has-line-data" dat

Wed, February 28, 2024

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?

Mon, February 26, 2024

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 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn <a href="https://www.threads.net/@syntax_fm

Fri, February 23, 2024

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 co

Wed, February 21, 2024

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 <li class="has-line-dat

Mon, February 19, 2024

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

Fri, February 16, 2024

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

Wed, February 14, 2024

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? 19:47 Kubero. Kubero 21:50 Coolify. <a h

Mon, February 12, 2024

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. Mozilla @scope The Style Element Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram <a hre

Fri, February 09, 2024

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 <li class="code-line" dir="auto" data-line

Wed, February 07, 2024

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 06:22 Text Editors 09:34 Terminal 14:28 Build Tools 16:07 Browser and dev tools 18:21 Formatter and linter. 21:43 CSS (how you style your website). 25:34 Programming languages. 27:14 Backend with metaframework. 29:36 Backend without metaframework. 32:20 Runtimes (JavaScript). What is Bun? The New JS Runtime The Deno Show 34:02 User interface libraries. Shoelace.style 39:43 Data management: Databases 41:42 Data manage

Mon, February 05, 2024

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. 04:35 You need a server. 05:35 You’ll most likely need a templating engine. 06:42 You most likely do not need as much client-side JS. 08:33 You don’t work in JSON 11:15 Not something you can swap out your UI with in a SPA. 11:48 Brings back AJAX 13:32 So, what can it do? 15:20 And what it doesn’t do. 18:25 It doesn’t do server-side responses. 19:09 What about animations? 19:20 What about CSS? 19:57 What about Web Components? 20:06 What about third-party client-side JS? 20:18 What about WebSockets and SSE? HTMX WebSockets 20:30 What about extensions? <li class="has-line-data

Fri, February 02, 2024

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? <li class="has-line-data" data-line-start

Wed, January 31, 2024

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? <li class="has-line-data" data-line-start="2

Mon, January 29, 2024

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

Fri, January 26, 2024

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

Wed, January 24, 2024

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 <p class="has-line-data" data-line-st

Mon, January 22, 2024

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

Fri, January 19, 2024

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? <li class="has-line-data" data-line-start="17" data-line-end

Wed, January 17, 2024

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 <li class="has-line-data" data-line-start="22" d

Mon, January 15, 2024

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

Fri, January 12, 2024

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 Sick Picks Oxc @Boshen_c Shameless Plugs @yagiznizipli Hit us up on Socials! <p class="has-line-data" data-line-start="32" data-line-e

Wed, January 10, 2024

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? <li class=

Mon, January 08, 2024

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 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram <a href= "https://www.tiktok.com/@stolinski"

Fri, January 05, 2024

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

Wed, January 03, 2024

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 <a href="#t=24:4

Mon, January 01, 2024

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 body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 { counter-reset: subchapter; /* set section to 0 */ } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; } 14:31:10 Named Pages @page title { @top { /* no header for title pages */ content: “”; } } @page chapter { @top { content: “This is a chapter page”; } } 15:27:09 Margins, Headers + footers, Page Numbers 18:01:18 Debugging Print CSS 19:57:18 Getting into a PDF Docraptor Playwright <li class="has

Fri, December 29, 2023

710: A Passwordless Future Passkeys with Anna Poblets

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? <p clas

Wed, December 27, 2023

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

Mon, December 25, 2023

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 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Wed, December 20, 2023

707: 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 <li class="has-line

Mon, December 18, 2023

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 &

Fri, December 15, 2023

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

Wed, December 13, 2023

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? <li class="has-line-data" data-line-start="21" data-

Mon, December 11, 2023

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 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X <a href= "h

Wed, December 06, 2023

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 <a href= "https://g

Mon, December 04, 2023

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? // A button with an ARIA role and label 06:36 What’s the difference between a title and aria-label on a button? 08:34 Are you really going to get sued if your website isn’t accessible? 11:53 What are Roles for? 16:33 6 different types of Roles 21:25 What is aria-labelledby? I agree to the Terms and Conditions. 23:13 Checking your code for accessibility eslint-plugin-jsx-a11y - npm WAVE Web Accessibility Evaluation Tools <li class="has-line-

Fri, December 01, 2023

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? <li class="has-line-data" data-line-st

Wed, November 29, 2023

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

Mon, November 27, 2023

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? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Fri, November 24, 2023

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 Sick Picks Wikipedia on Hell.com Web Archive of Hell.com Fffffound https://twitter.com/webdesignmuseum

Wed, November 22, 2023

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 <a href="https://

Mon, November 20, 2023

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 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok <a href= "https://www.linkedin.com/in/stolinski/"

Fri, November 17, 2023

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

Wed, November 15, 2023

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 t

Mon, November 13, 2023

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 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads <p class="has-line-data" data-line-start="22" data-line-end="2

Fri, November 10, 2023

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 <li class="has-line-

Wed, November 08, 2023

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

Mon, November 06, 2023

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 Hit us up on Socials! Syntax: X Instagram Tiktok <a href= "https://www.linkedin.com/company

Fri, November 03, 2023

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 <li class="has-line-data" data-line-start="24" data-line-end="25"

Wed, November 01, 2023

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 <li class="has-lin

Mon, October 30, 2023

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 <a href="https:

Fri, October 27, 2023

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 <a href="https://www.netlify.com/

Wed, October 25, 2023

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” <li class="has-line-data" data-line-start="24" data-line-en

Mon, October 23, 2023

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 Tweet us your tasty treats <a href="htt

Fri, October 20, 2023

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

Wed, October 18, 2023

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 <a href="https://hugging

Mon, October 16, 2023

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

Fri, October 13, 2023

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 f

Wed, October 11, 2023

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 <li class="has-line-data" data-line-start="24" d

Mon, October 09, 2023

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

Fri, October 06, 2023

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? <li c

Wed, October 04, 2023

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 Notes Take the Syntax Survey Attend the Syntax Meetup Oct 10th in Toronto 00:00 Syntax Survey 00:24 Syntax Meetup 01:02 Welcome 01:24 Scott’s macOS bug Tauri Apps 02:19 Syntax Brought to you by Sentry 02:40 What are your thoughts on Bun? Bun — A fast all-in-one JavaScript runtime Zig Programming Language Deno, The next-generation JavaScript runtime Cloudflare Workers Netlify Connect Storybook Histoire 11:25 How can I add custom auth header for image requests done by the browser? 17:32 What are the differences between trpc, REST, and graphql? 24:48 What kind of teams would use trpc, REST, or graphql? 27:12 Are there any podcast guest opportunities on Syntax? <li class="has-line-data" data-line-start="20" d

Mon, October 02, 2023

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) Tweet us your tasty treats Scott’s Instagram <a href= "https://ww

Fri, September 29, 2023

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 <a href="

Wed, September 27, 2023

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 <a href="#t=39:04"

Mon, September 25, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets <li class="has-line-data" d

Fri, September 22, 2023

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 <a href="http

Wed, September 20, 2023

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

Mon, September 18, 2023

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 <a id="Tweet_us_your_tast

Fri, September 15, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Flowerhorn cichlid Shameless Plugs Stuart Bloxham’s Portfolio Tweet us your tasty treats <li class="has-line-data" data-line-start="3

Wed, September 13, 2023

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

Mon, September 11, 2023

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 Tweet us your 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

Fri, September 08, 2023

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? <li class="has-line-data" data-line-start="22" data-line-end="

Wed, September 06, 2023

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 <li class="has-line-data" data-

Mon, September 04, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The First Cat in Space Ate Pizza Wes: Steam cleaner Shameless Plugs <li class="has-line-data" data-line-start="28"

Fri, September 01, 2023

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

Wed, August 30, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The First Cat in Space Ate Pizza Wes: Steam cleaner Shameless Plugs <li class="has-line-data" data-line-start="28"

Mon, August 28, 2023

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 <li class="has-line-data" data-line-start="20" data-line-e

Fri, August 25, 2023

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 w

Wed, August 23, 2023

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 let x = 5; // x is immutable let mut x = 5; // x is mutable const MAX_POINTS: u32 = 100_000; // must be defined at compile time 10:42 Type System in Rust 15:52 Types in Rust 19:06 Why does Rust have signed and unsigned integers? 23:35 Slicing strings with &str 27:35 enum 27:55 struct 28:19 Vec 29:33 HashMap and HashSet 33:00 Converting Signed to Unsigned Numbers let unsigned_value: u8 = 200; let signed_value: i8 = unsigned_value as i8; 36:12 What’s up with &str? 43:31 Rust error messages 45:28 What is a Struct? struct User { username: String, email: String, sign_in_count: u64, active: bool, } // You can create an instance of a struct like this: let user1 = User { email: String::from("someone@example.com"), username: String::from("someusername123"), active: true, sign_in_count: 1, }; impl Us

Mon, August 21, 2023

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 00:23 Welcome 02:14 1) Stream The Result // Create a new TextDecoder instance const decoder = new TextDecoder(); // Make the fetch request fetch('https://api.example.com/streaming-data') .then(response => { // Check if the response is valid if (!response.ok) { throw new Error('Network response was not ok'); } // Stream the response data using a TextDecoder const reader = response.body.getReader(); // Function to read the streamed chunks function read() { return reader.read().then(({ done, value }) => { // Check if the streaming is complete if (done) { console.log('Streaming complete'); return; } // Decode and process the streamed data const decodedData = decoder.decode(value, { stream: true }); console.log(decodedData); // Continue reading the next chunk return read(); }); } // Start reading the chunks return read(); }) .catch(error => { // Handle errors console.log('Error:', error); }); 06:05 2) Download Progress Download progress example 09:40 3) Cancel Streams - Abort Controller // Create an AbortController instance const controller = new AbortController(); // Set a timeout to abort the request after 5 seconds const timeout = setTimeout(() => { controller.abort(); }, 5000); // Fetch request with the AbortController fetch('https://api.example.com/data', { signal: controller.signal }) 11:32 4) Testing if JSON is returned 13:18 5) async + await + catch const data = await fetch().catch(err => console.log(err)); <li class="has-line-data" data-line-s

Fri, August 18, 2023

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? <li class="has-line-data" data-line-start="21" data-line-en

Wed, August 16, 2023

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 <li class="has-line-data" data-line-start="22" data-line-

Mon, August 14, 2023

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 i

Fri, August 11, 2023

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 <li class="has-line-data" data-line-start="2

Wed, August 09, 2023

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 <a href="#t=45:

Mon, August 07, 2023

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 Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram <a

Fri, August 04, 2023

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

Wed, August 02, 2023

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 <li class="has-line-data" dat

Mon, July 31, 2023

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? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook <li class="has-line-data" data-line-start="25" data

Fri, July 28, 2023

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

Wed, July 26, 2023

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

Mon, July 24, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instag

Fri, July 21, 2023

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 <li class="ha

Wed, July 19, 2023

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

Mon, July 17, 2023

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 Tweet us your 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 <li class="has-

Fri, July 14, 2023

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? <li class="has-lin

Wed, July 12, 2023

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? <li class="has-line-data" data-l

Mon, July 10, 2023

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 <li class="has-line-data"

Fri, July 07, 2023

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 <li class="has-line-data" data-line-start="22" data-line-end="23

Wed, July 05, 2023

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

Mon, July 03, 2023

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 Tweet us your 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 <a hr

Fri, June 30, 2023

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

Wed, June 28, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave with Tim Robinson Wes: Wise, Formerly TransferWise: Online Money Transf

Mon, June 26, 2023

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

Fri, June 23, 2023

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 <li class="has-line-data" data-line-start="23" data-

Wed, June 21, 2023

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

Mon, June 19, 2023

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 Tweet us your 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

Fri, June 16, 2023

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

Wed, June 14, 2023

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

Mon, June 12, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram <li class="has-line-data" da

Sat, June 10, 2023

Supper Club × OpenAI, Future of programming, LLMs, and Math with Andrey Mishchenko

In this supper club episode of Syntax, Wes and Scott talk with Andrey Mishchenko about working at OpenAI, getting started in machine learning, what RLHF is, the impact of plugins on ChatGPT, and what the future holds for developers in a world with ChatGPT tools. Show Notes 00:33 Welcome 00:59 ChatGPT introduction 02:17 Who is Andrey Mishchenko? 03:17 What is circle packing? 05:04 When did you start at OpenAI? 06:21 Levels of interaction 08:39 How do you train the model to understand? 11:13 What’s RLHF? 13:56 What are plugins for ChatGPT? 16:11 What languages are you using to code for AI? 19:15 Did you have any idea ChatGPT would be so popular? 21:13 Did your math degree help get into language modeling? 28:34 Do Wes or Scott worry they’re going to lose their job?

Wed, June 07, 2023

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 ××× Get Started With TypeScript the Easy Way T

Mon, June 05, 2023

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 Tweet us your 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

Fri, June 02, 2023

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? <li class="has-line

Wed, May 31, 2023

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 <li class="has-line-data" d

Mon, May 29, 2023

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 Tweet us your 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 <a href="https://bsky.app/pro

Fri, May 26, 2023

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? <li class="has-line-data" data-line-start="21" data-li

Wed, May 24, 2023

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? <a h

Mon, May 22, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram <

Fri, May 19, 2023

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 <li class="has-line-data" d

Wed, May 17, 2023

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 <li class="ha

Mon, May 15, 2023

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? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM i

Fri, May 12, 2023

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 playe

Wed, May 10, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Fishskyn Wes: Flavacol & Butter Flavoured Coconut Oil Shameless Plugs Scott: Sentry replays Wes: Wes Bos Tutori

Mon, May 08, 2023

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 Shameless Plugs <li class="has-line-data" data-line-start="27" data-line-end="28"

Fri, May 05, 2023

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? Zack on Twitter Zack on LinkedIn Warp Terminal × Next Gen Terminals — Syntax Podcast 579 Warp: The terminal for the 21st century 03:41 How does Google Sheets work? GWT 13:38 What is Warp and why did you build it? Introducing Warp 16:50 Why did you build Warp in Rust? Rust Programming Language <a href="https://github.com/harfbuzz/harfb

Wed, May 03, 2023

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

Mon, May 01, 2023

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? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, April 28, 2023

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

Wed, April 26, 2023

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 sp

Mon, April 24, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, April 21, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Apollo Neuro Shameless Plugs <a href="https://ebooks.humanwhoc

Wed, April 19, 2023

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 <a href=

Mon, April 17, 2023

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 const showButton = document.getElementById('showDialog'); const favDialog = document.getElementById('favDialog'); const outputBox = document.querySelector('output'); const selectEl = favDialog.querySelector('select'); const confirmBtn = favDialog.querySelector('#confirmBtn'); // "Show the dialog" button opens the modally showButton.addEventListener('click', () => { favDialog.showModal(); }); // "Favorite animal" input sets the value of the submit button selectEl.addEventListener('change', (e) => { confirmBtn.value = selectEl.value; }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', () => { outputBox.value = `ReturnValue: ${favDialog.returnValue}.`; }); Tweet us your tasty treats Scott’s Instagram <li

Fri, April 14, 2023

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 <li class="has-line-data" data-l

Wed, April 12, 2023

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

Mon, April 10, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, April 07, 2023

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

Wed, April 05, 2023

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

Mon, April 03, 2023

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 Tweet us your tasty tr

Fri, March 31, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:49:11 Guest introduction 01:03:00 Sponsor: Sentry 02:02:11 Why do people use React when we have web components and lit? 03:57:14 Who is Justin Fagnani? Justin Fagnani Justin Fagnani (@justinfagnani) Justin Fagnani · GitHub Justin Fagnani - Fosstodon Lit (@buildWithLit) <p class="has-line-data" data-line-start="17" data-line-end="1

Wed, March 29, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:10 Welcome 00:25 Sponsor: Sentry 01:22 Landscaping update 02:27 What do you do when you are done a client project? 10:09 Should I keep animations in our tests so our tests match prod behavior? 14:05 How does ChatGPT fill the responses to the prompt? 17:14 What is the best way to evaluate and choose a front-end framework for a project? 21:10 Should functions only be used strictly for code that is going to be re-used? 26:03 What kind of tools and processes do you use when learning? Obsidian Roam Research – A note taking tool for networked thought. 30:19 What are your opinions on using “display: grid” simply to be able use the gap property on the elements inside? 33:57 What do you guys think of being a 1-language dev? <li class="has-line-data" data-li

Mon, March 27, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:26 Welcome 01:17 Sponsor: Sentry 02:39 What is the OpenAI API? 05:11 Getting started with the API 07:41 How run OpenAI OpenAI API 14:16 GPT4 update 17:58 Tune your models 19:46 Generating questions with ChatGPT 24:30 Speech to text Otter.ai - Voice Meeting Notes & Real-time Transcription Descript | All-in-one video & podcast editing, easy as a doc. 26:12 Related API

Fri, March 24, 2023

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

Wed, March 22, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:11 Welcome 00:31 Sponsor: Sentry 01:43 DST update Tales of Taboo 03:45 Is it too late to learn web dev at an older age? 10:20 How do people produce work so quickly? 13:47 How can I make my web apps look better visually? Dribbble - Discover the World’s Top Designers & Creative Professionals Tailwind UI - Official Tailwind CSS Components & Templates CSS · Bootstrap 18:41 Not losing the niceties with not having to do a full page load 22:23 Should I use a script to generate an index JS/TS file? 24:55 If you were going to make a video streaming website, what technologies would you use? The API to Video | Mux <li class="has-line-data" d

Mon, March 20, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:24 Welcome 01:09 GitHub tarball web streams 05:09 Sponsor: Sentry 05:48 Why would I need security locally? Caddy Server 11:23 Cookie issues 13:04 Examples of things that need a secure context MDN Features restricted to secure contexts 14:58 What is tunneling? 19:22 Cloudflare Tunnels Cloudflared Cloudflare Tunnel 20:50 nGrok ngrok 23:22 Local tunnel Loca

Fri, March 17, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:36 Welcome 01:05 Sponsor: Sentry 02:05 Who is Dax Raad? Dax on Twitter thdxr.com Tomorrow.fm Podcast SST.dev 04:22 Why doesn’t AWS have a simple way to build on top of it? 07:46 What is Open Next? Vercel Next.js Open-Next.js 10:25 How many people are involved in building Open Next? 11:14 Mapping Next.js to Amazon products 14:25 What is the edge? 18:56 Pricing in serverless 23:33 What about image assets? <li c

Wed, March 15, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 01:08 Sponsor: Sentry 01:43 Brainstorming for Syntax’s new website 02:27 Are there good podcast websites out there? 03:26 Homepage design 07:33 How would you handle login? 09:40 Search on the site SvelteKit docs Flexsearch 13:59 Transcripts Open AI Whisper Whisper AI for podcasters 18:25 The player 21:11 Tagging 23:45 Video Linus Tech Tips - WAN Show <li class="has-line-dat

Mon, March 13, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:26:11 Welcome 00:59:07 Sponsor: Sentry 01:39:17 What are Web Streams? 03:15:11 Why are web streams picking up steam lately? 04:41:21 How are web streams streaming? 09:28:11 Searching a database can use streaming 13:07:11 Web stream jargon 18:06:11 FileReader is a Stream 19:31:05 Other Types of Streams Cloudlfare HTML Rewriter 21:50:05 ReadableStream and Writable Stream 27:23:00 Cr

Fri, March 10, 2023

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? <a href= "https://www.osprey.com/us/en/product/talon-33-TALON33F20.html?sk

Wed, March 08, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:11 Welcome Glove 80 keyboard Raycast 03:06 Sponsor: Sentry 05:15 What makes a website slow? Uses.tech 06:29 Server Generation Times 13:33 Large payloads Redis Gzip Brotli compression Cloudflare Cloudinary 18:13 Assets being too large 23:01 Caching assets 28:25 CDN 30:

Mon, March 06, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:25 Welcome 01:14 Sponsor: Sentry 02:45 Webcontainers and NodeBox Introducing WebContainers Code Sandbox CodePen Replit GitHub Codespaces 06:42 Why Node.js in the browser? 11:08 How does it work? 13:10 Clientside APIs 14:27 Using iFrame to proxy messages 17:39 Are these open source? 19:22 Differences between the two services 21:10 Wes to Figma, Scott to Penpot Fig

Fri, March 03, 2023

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? <li class="has-line-data" data-li

Wed, March 01, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:11:10 Welcome 01:58:01 Sponsor: Sentry 03:16:05 What this episode is not going to be 07:36:11 The current landscape Chat GPT GitHub Copilot Warp Completions Midjourney Bing AI From Bing to Sydney Why a Chat with Bing Left Me Deeply Unsettled Tensorflow Stable Diffusion Amazing AI <a href="https://openai

Mon, February 27, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:24 Welcome 00:46 Sponsor: Sentry 01:51 Uses performance issues Uses.tech 04:23 Understand Sloppy Code 10:17 Syntax website timestamp issue 12:56 Establish rules to fix sloppy code 16:35 Adding a feature, do you refactor an unrelated function? 23:07 How do you enforce rules? GitHub Actions Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram <a href="https://

Fri, February 24, 2023

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 <a href="https://sq

Wed, February 22, 2023

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 <li class="has-line-data" da

Mon, February 20, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:25 Welcome 01:37 Sponsor: Sentry 02:16 What is logging? Why log? 04:59 Logging isn’t just for debugging 08:22 What do we log? 13:34 What not to log 14:58 Development, staging, and production 17:36 Logging bots 19:33 Where to put logs 20:59 How to log Log Tail Paper Trail Sematext Logs DataDog Winston Pino <a id="Tweet_us_your_tasty_treats_25" name= "Tweet_us_y

Fri, February 17, 2023

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 <a href="#

Wed, February 15, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:10 Welcome 01:09 Sponsor: Sentry 02:18 Electrical house update Klien Wirestrippers 07:45 Custom Syntax podcast browser Custom Syntax browser 09:29 When using browser native web components (i.e. extends HTMLElement), should the whole application be wrapped in a component tree similar to how React apps do it? Deno Using Web Components with Next or any SSR Framework 16:12 Should I avoid JS/TS class mixins? 21:07 Is it acceptable to have any string value as a value for a CSS custom property? 26:48 Should agencies consider building marketing sites with JS frameworks or is Wordpress still the best option here? 33:56 What are the main things to think a

Mon, February 13, 2023

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 define: { __VERSION__: JSON.stringify(process.env.npm_package_version), }, 11:16 Node has failed us 13:30 Cosmic config Cosmiconfig 16:46 File nesting 21:01 Standardize on a format Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include <a href= "https://twitter.com/

Fri, February 10, 2023

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? <li class="has-line-data"

Wed, February 08, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:10 Welcome 00:36 Sponsor: Sentry 02:23 Electrical updates 08:16 Moving to TypeScript 09:34 What are you doing with GraphQL? GraphQL Codegen 11:35 Why move to TypeScript? 12:00 Refactoring is easier 14:58 Better DX 18:42 Adding a tsconfig.json file 22:43 Figure out your tooling 23:50 Type Checker 25:13 MongoDB to TypScript Generator 26:44 Eslint-Typescript 28:03 Deprank Deprank <li class="has-line-data" data-line-start=

Mon, February 06, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, February 03, 2023

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 ××× ××× SIIIIICK ××× PIIIICKS ××× kokako Shameless Plugs Tim McNamara - How to learn Rust <a id="Tweet_us_your_tasty_tr

Wed, February 01, 2023

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:10 Welcome 00:51 Sponsor: Sentry 02:32 Our experiences with ESM 06:54 Why ESM? 11:42 Top Level Await 16:16 Assert Import type eventually Scott’s Vite chunk import map 21:00 Converting code to ESM 27:22 .JS on end of files 32:12 Imports and exports 37:52 TypeScript 40:24 Bundling / Transpiling Vite Node 43:42 Dependencies Sindre thread 45:16 Publishing <li class="has-line-data" data-line-s

Mon, January 30, 2023

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

Fri, January 27, 2023

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?

Wed, January 25, 2023

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 State of JS 2022 00:26 Welcome 01:24 Thoughts on the survey in general 04:24 Country of origin 05:53 Salaries 08:14 Higher education 08:58 JavaScript features 15:41 Browser APIs 21:15 Library Usage 26:11 Interest in frontend frameworks 28:40 Framework usage 31:41 Rendering frameworks 34:57 Build tools usage over time 39:37 Monorepo tools <p class="has-line-data" data-line-st

Mon, January 23, 2023

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 Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, January 20, 2023

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 <li class="has-li

Wed, January 18, 2023

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? <a href="#t=48:48:

Mon, January 16, 2023

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 <li class="has-line-data" data-

Fri, January 13, 2023

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

Wed, January 11, 2023

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 <a href="https://www.tiktok.com/@leveluptut

Mon, January 09, 2023

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 export const currencies = { USD: 'US Dollars', CAD: 'Canadian Dollar', EUR: 'Euro', } as const; export type Currency = typeof currencies; export type CurrencyCode = keyof Currency; Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, January 06, 2023

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 Google Engineering Management for the Rest of Us Amazon: Engineering Management for the Rest of Us Netlify 05:25 How did you figure out what to do in management? 07:20 How do you get out of engineer’s way? The Engineer Manager pendulum 09:39 Do you spend time on making the person happy in the job? 15:51 Should managers code? 19:16 Was it difficult to step out of coding? 21:07 Why do people leave jobs? 24

Wed, January 04, 2023

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 <li class="has-line-da

Mon, January 02, 2023

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 Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Fri, December 30, 2022

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 ××× Shameless Plugs Fix Contrast Superposition <a id="Tweet_us_your_tasty_treats_28" name= "Tweet_us

Wed, December 28, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:09 Welcome Syntax 420: 2022 Predictions 01:44 Svelte popularity Svelte Svelte Kit 04:09 Next.js data layer 05:06 Web components UI <li class="has-line-data" data-line-start="23" data-line-en

Mon, December 26, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Show Notes 00:33 Welcome 01:18 Sponsor: Sentry 02:47 Sponsor: Prismic 04:01 Our experience with building desktop apps Level Up Tutorials: Level 1 Electron Hair.WesBos.com 10:04 Frameworks for building apps 10:56 Tauri vs Electron Tauri Electron 23:38 Tooling vite-plugin-electron <a id="Tweet_us_your_tasty_treats_25" name= "Tweet_us_your_tasty_tre

Fri, December 23, 2022

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Traeger Grills Shameless Plugs Suavecito <li class="has-line-d

Wed, December 21, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:51 Podcast feedback 04:46 Can you talk about how you made the decision to re-write LevelUp? Strangler Fig 13

Mon, December 19, 2022

“Serverless” Databases

In this episode of Syntax, Wes and Scott talk about your options for database when you’re working with serverless. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:25 Welcome 00:51 Sponsor: LogRocket 01:44 Sponsor: Prismic 03:17 Why Serverless and related databases? 07:45 Deploying on Deno Deno 08:44 Using a database with serverless functions Syntax 542 - Serverless Limitations 11:53 Using purpose built databases Planetscale Supabase Cloudflare D1 Cloudflare Key Value Store AWS DynamoDB <li class="has-line-data"

Fri, December 16, 2022

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 - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Tuple - Sponsor This week’s sponsor is Tuple , an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Show Notes 00:36 Welcome 01:24 Who is Jonny Burger? Jonny.io Jonny on GitHub Jonny on Twitter 03:51 Why did you create Remotion? Remotion.dev 07:36 What types of videos are people making? 10:53 What is the tech stack? Puppeteer Lottie 18:31 What is Idempotence? 19:50 What is lottie? <li class="has-line-data" dat

Wed, December 14, 2022

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 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 01:17 College football update 04:07 Web almanac for 2022 JavaScript in the 2022 Web Almanac 06:25 Unused JavaScript 07:47 JavaScript requests per page 09:38 Bundlers 14:01 Pages using Babel 16:01 How JavaScript is requested <li class="has-line-data"

Mon, December 12, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:26 Welcome 01:31 What is rendering? 02:41 Sponsor: Sentry 03:58 Sponsor: Sanity 04:55 Rendering methods 05:48 Single page application (SPA) 07:36 Multi-page Application 09:14 Static Site Generation (SSG) 11:10 Service Side Rendered (SSR) 13:08 Partial hydration 14:03 Progressive hydration 15:38 Island architecture 16:25 Progressive enhancement<

Fri, December 09, 2022

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 - Sponsor This week’s sponsor is Tuple , an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Show Notes 01:40 Who is Vu Le? 03:33 How did you learn to code? 04:57 How do you get a job at Disney? 09:01 Internal CMS development at Disney 10:19 What types of languages do you use internally? 15:22 Do you have a design system? 19:52 How do you handle versions and updates? 22:42 Sponsor: Tuple 23:37 Do you get involved in testing? Vitest 25:06 What are you using for GraphQL? GraphQL 25:34 How are you handling CSS? Theme UI 31:43 Does Disney do remote work? 34:38 Perks of working at Disney 38:16 Supper Club questions <a h

Wed, December 07, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 02:35 Function definition 06:43 File path aliases 09:36 Implicit vs Explicit Return 13:49 Array.reduce() VS literally anything else 17:37 Loop vs array method 22:55 Sponsor: Linode 23:37 Updating vs creating a new var <l

Mon, December 05, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:23 Welcome 01:49 Responsive web design update 03:12 Let’s go 05:32 Sponsor: Linode 06:01 Sponsor: LogRocket 07:23 GitHub Next GitHub Next 08:17 GitHub Copilot for the CLI 11:52 Synthesizing results Syntax 540 - Responsive Desig

Fri, December 02, 2022

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 - Sponsor This week’s sponsor is Tuple , an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Tuple.app . Show Notes 00:37 Welcome 01:44 Who is Jared Sumner? Jarred Sumner on Twitter Bun Bun Discord Bun on GitHub 02:31 Why did you make Bun? 09:43 Using web API vs Node modules? 13:25 Do we still use npm? 15:42 Support for HTML Rewriter 16:46 Where do you see Bun being used? 19:25 Do you think someone will write a type checker? 21:18 Sponsor: Tuple 22:07 What is Zig? 24:57 Did you have a history of learning languages? 28:16 Have you ever thought of putting Bun on hardware? 29:59 Is there a package.json file in Bun projects? <li class="has-line-data" data-line-sta

Wed, November 30, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:10 Welcome 01:53 TikTok update 02:46 What strategies do you use to find the good stuff? Tweetdeck 11:17 What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? 15:56 Should we use TypeScript for a new blog? 20:45 Sponsor: Sanity 21:45 Is there any reason to still use string concatenation over template literals? 26:13 What should React devs use to get

Mon, November 28, 2022

Serverless Limitations

In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:23 Welcome 01:08 Sponsor: Sentry 01:59 Sponsor: MagicBell 03:11 Topic introduction 04:44 Function limit Puppeteer 08:51 Node support 10:00 Cron jobs 11:12 Local development Miniflare 11:45 Database access SQLite 12:42 Sharing code 13:07 Environment

Fri, November 25, 2022

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 - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. Spin up a new project today and discover Kontent. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. https://tuple.app/syntax Show Notes 00:37:11 Welcome 03:18:10 Saskatchewan and Saskatoon Berries Saskatoon Berry Barn 05:02:14 TV shows we’re watching Amazing Race Canada America’s Dance Crew Lakefront Luxury 12:49:12 New house vibe 18:29:06 Sponsor: Kontent 19:13:20 Sauna thoughts 22:58:24 Home gym thoughts <a

Wed, November 23, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:47 Clean Talk 03:55 The menu of responsive design Syntax 154 with Sara Soueidan 06:52 Responsive design basics 11:54 What should you build for first in 2022? 16:15 Shrink and grow until it looks bad 21:36 Menus in responsive <li class="ha

Mon, November 21, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:13 Welcome 01:39 Sponsor: Sentry 02:41 Auth0 03:57 A bit more auth 05:24 New RFC RFC: First class support for promises and async/await 08:30 What are the basics of this proposal? 10:12 Scott gets a little Svelte-y 11:44 Why is this being proposed? 17:14 Infinite loop possibility 18:44 Why is Svelte API bette

Fri, November 18, 2022

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 - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:36 Welcome Tinyclouds.org Ry on GitHub Deno Deno Discord 01:18 The introduction of Node 02:51 Why are you still betting on JavaScript fo

Wed, November 16, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:06 Welcome Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1 01:22 Smart home updates 04:05 Box sizing: border box 06:57 CSS Columns 09:20 Aspect Ratio Can I Use CSS Properties Rotate 09:53 Transitions and animations 13:36 Transition time 17:05 Steps as

Mon, November 14, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:39 Sponsor: Sentry 02:40 Sponsor: Freshbooks 04:05 Short form content intro WesBos.com/tips Wes on TikTok LevelUp Tutorials on TikTok Scott Stolinski on TikTok 07:16 The good and the bad of short form content 17:13 Repurposing content 18:36 Content that works 21:12 Tips for making short form content 24:19 Limitations of short form content <li class="has-

Fri, November 11, 2022

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 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch ! Show Notes 00:30 Welcome 01:49 Safari aspect ratio bug 04:17 Thoughts on Vercel announcements? NextJS Conf 10:07 Gideon Riverside CTO Riverside.fm Careers 14:44 Do JS devs need to branch out? 16:52 Wasm Web Assembly (WASM) Rustlings 19:46 Sponsor: Auth0 21:03 Which company will Vercel aquire next? <li class="has-line-data" data-line-

Wed, November 09, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:08 Welcome 01:20 Weather updates 02:21 How often have you gotten together in real life? Jamstack Conf Reactathon 05:33 What are people using to bookmark sites? Arc Browser 09:03 When not to use Static Site Generation (SSG), and when to use Server-side Rendering (SSR)? Svelte Kit <a href="

Mon, November 07, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:24 Welcome 01:48 Sponsor: LogRocket 02:54 Sponsor: Linode 04:07 Minecraft thoughts Minecraft 06:25 Scratch Scratch 07:19 What is Zod? Zod Zod comparison <li class="has-lin

Fri, November 04, 2022

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch ! Show Notes 00:36 Welcome 02:11 Guest introduction 03:00 Do I have ADHD? CHADD 09:12 What is the threshold for diagnosis? 11:43 Are there other issues for computer workers? Arc Browser Syntax 513 - The Productivity Episode 15:27 Avoiding difficult or boring things 17:04 Structuring your day 18:41 Sponsor: LogRocket 20:12 Any tips for working in a distracting environment? MyNoise.net Headspace <li class="has-line-data" data-line-start="

Wed, November 02, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:12 Weeeeeelcome 02:11 Slipsum mistake Slipsum 03:40 Brotli scaling explosion <a href= "http

Mon, October 31, 2022

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 - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:21 Welcome 01:17 Sponsor: Appwrite 03:16 Sponsor: Sanity 04:08 Schema Zod Apollo GraphQL 07:25 Promises 08:47 Async, Sync, Parallel and Concurrent 13:15 Dom vs Shadow Dom VS Page HTML 16:21 Methods vs Functions 18:18 Props 20:27 HTTP Requests are Stateless <h2 class="code-l

Fri, October 28, 2022

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 - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Sponsorname - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. retool.com/syntax Sponsorname - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. Show Notes 00:36 Welcome 02:15 Guest introduction fbritoferreira.com @SkyShowtime Peacock <a href="#t

Wed, October 26, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:15 Welcome 03:00 Spooky Render Times React Virtualized React Window 09:19 Push Notification Hell 13:11 Dark Friday 14:19 Tiny Ints with Big Problems 16:57 A/B Testing 18:47 Confirm Purchase button mistake 21:21 Sponsor: Sentry <li class="has-line-data" data-line-star

Mon, October 24, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:18 Welcome 01:25 Sponsor: Sentry 02:47 Sponsor: Sanity 04:50 What is Qwik? Qwik 08:05 What is SSR? 09:25 Working with hydration 15:31 Lazy loading, reduced rendering, and Qwik optimizer 17:30 Edge first 18:55 Data loading or data actions issues 20:49 Qwik City Qwik City <a id="Tweet_us_your_tasty_treats_25" name= "Twe

Fri, October 21, 2022

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 - Sponsor If you want to build a great website or web app, there’s a million things you need to take care of: responsive design, accessibility, SEO, Meta tags and page structure, to name just a few. Polypane is the browser for developers with tools that help with literally every part of modern web development, helping you save hours (and frustration!) with every project. It shows your site in multiple fully-synced viewports at once, Gives you advice on better accessibility and gives you insight into your performance and quality. Go to polypane.app/syntax to start a 14 day free trial and use SYNTAX20 for a 20% discount at checkout. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. Spin up a new project today and discover Kontent. Show Notes 00:37 Welcome 01:56 Guest introduction @Alexdotjs on Twitter Alex on GitHub Katt.dev <a href="http

Wed, October 19, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 02:15 Cleaning Sick Pick Bar Keepers Friend 04:40 Web Almanac Web Almanac 08:23 CSS stylesheets size grow 09:49 Popular CSS Class names 15:29 How many websites use !important? 18:11 Popular pseudo classes 20:27 Sponsor: Prismic 21:38 CSS Attribute Selectors 27:03 Most popular units <li class="has-line-data" data-line-start="28" data-li

Mon, October 17, 2022

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 - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. NAME - Sponsor COPY HERE Show Notes 00:25 Welcome 02:02 What are bookmarklets? Matt Busche’s fav bookmarklets Gist Bookmarklet Maker CSS Tricks - Web Development Bookmarklets 04:49 Using an Immediately invoked function expression 09:22 Greasemonkey Greasemonkey Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram <a href="https://twitter.

Fri, October 14, 2022

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 - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Show Notes 00:36 Welcome 01:13 Guest introduction Teej_dv on Twitter TJ Devries Teej_DV on Twitch TJ on YouTube Telescope on GitHub <li class="ha

Wed, October 12, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:11 Welcome 01:15 Fogging the boats 04:25 Use the platform 06:32 URLSearchParams 10:04 Pushstate and History API Pushstate 13:46 Internationalization API Internationalization API Syntax episode 153 <

Mon, October 10, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:25 Welcome 01:06 Sponsor: Sentry 01:59 Sponsor: Freshbooks 02:27 What does that even mean? 02:55 Everything in JavaScript is an Object! 04:43 X is just Syntactic Sugar 09:00 Functions are first class citizens 10:04 Object Literals or Template Literals 11:12 Declarative vs Imperative Tweet us your tasty treats Scott’s Instagram <li class="has-line-data" da

Fri, October 07, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax . Show Notes 00:35 Welcome 01:30 Guest intro @NikolasBurk on Twitter 04:56 How has Prisma evolved? Prisma <a href="https://keysto

Wed, October 05, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:10 Welcome 01:22 Shooting some pucks at the football game 04:06 Should we use emoji naming conventions for our grid template areas instead of just words? <a href= "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/52fbeacb-8136-4104-a30d-8fa120077ca5/C55498A0-7B31-45D2-A360-E0892104D61C.jpg

Mon, October 03, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:26 Welcome 02:05 Sponsor: Linode 02:59 Sponsor: LogRocket 03:48 The last 10 percent 05:25 Break those things into Tasks 08:11 Just do it 09:10 Rewards 11:25 Be ok with good enough 14:21 Keep the end in sight 15:00 Do it “Quick a minute” <a id="Tweet_us_your_tasty_tre

Fri, September 30, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Get started at Firehydrant.com/syntax Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. Show Notes 00:36 Welcome 01:52 Guest introduction OpenSauced.pizza @Bdougieyo on TikTok bdougie on Twitch <li class="has-li

Wed, September 28, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:38 Welcome 02:24 Scouting a house with an office 03:54 Why didn’t you hire someone? 08:50 Goals for the office 10:30 Soundproofing 19:49 Decouple the ceiling 25:52 Sponsor: LogRocket 26:54 The door <li class="has-

Mon, September 26, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:27 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:40 What is Enhance? Enhance.dev 06:17 Singe file components export default function HelloWorld({ html, state }) { const { attrs } = state const { greeting='Hello World' } = attrs return html` body { color: #222; } ${greeting} ` } Astro 0

Fri, September 23, 2022

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 - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:34 Welcome HurshAgrawal.com @Hursh 02:53 What is Arc and why create another browser? Arc browser The browser company <l

Wed, September 21, 2022

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 - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 02:49 What is a productive day? 04:56 What’s an unproductive day? 07:43 Techniques for work Getting Things Done Eat That Frog Height 14:57 Weighting tasks 18:29 Pomodoro technique 20:53 S

Mon, September 19, 2022

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 - Sponsor Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. Show Notes GitHub Copilot Code Whisperer 00:29 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:07 GitHub Co-Pilot is now paid 05:51 Is it ethical? 08:02 I

Fri, September 16, 2022

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 - Sponsor  Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.  Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax   Show Notes @ThomasPaulMann 01:49 What is Raycast? Raycast Raycast Store 08:11 Do you have designers on your team to help guide UI? 10:13 Why build it native instead of HTML and CSS? 13:12 Why did you choose React? 21:54 How do you figure out what’s possible in system level APIs? 26:40 Snippets make use of SQLite SQLite 29:05 Encrypted local storage data 33:11 Any plans for theming for Raycast? 35:20 What is the pricing model? 37:06 What was your Y combinator experience like? Y Combinator Careers

Wed, September 14, 2022

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 - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 02:40 What are APIs? 06:09 API Standards 13:56 What about GRPC? 15:52 What is TRPC? 19:19 Sponsor: Payments Hub 20:25 API Cake Layers mySQL Postgres Mongo DB SQLite SQLizer <li cla

Mon, September 12, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:27 Welcome 01:30 Sponsor: Prismic 02:54 Sponsor: Sentry 03:53 Do we use Post CSS? 05:22 Presets and plugins 06:19 Plugins we’re using "postcss-import" @import './elements/headings.css'; 09:48 PostCSS Nested 12:59 Variables (Custom Properties) 15:50 Media Query Ranges PostCSS Media Minmax 17:16 Custom Media Queries "postcss-media-minmax" @media screen and (width >= 500px) and (width <= 1200px) "postcss-custom-me

Fri, September 09, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. Show Notes 00:35 Welcome 01:48 Guest introduction ThePrimeagen on YouTube ThePrimeagen on Twitch @ThePrimeagen on Twitter Why I Make Content 03:53 Dropping in on skateboarding Tony Hawk’s Pro Skater <li class="has-line-data" data-line-start=

Wed, September 07, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. a0.to/syntax Show Notes 00:23 Welcome 02:39 What’s the best way of comparing the efficiency of object literals created from a factory function vs objects created by new’ing a class. Perf.link 06:54 How can I always see the full signature in VS Code? <li class="has-line-data" data-line-start="20"

Mon, September 05, 2022

Big Deno Changes

In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:24 Welcome 01:37 Sponsor: LogRocket 02:34 Sponsor: Linode 03:18 Standing and getting mic’d 04:20 What is Deno? Deno Changes 07:13 What were they doing before this? How could we support typescript without vendoring it? 21:22 Enterprise support and search Tweet us your

Fri, September 02, 2022

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 - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Show Notes 00:34 Welcome 03:23 Who is Steve Ruiz? Steve Ruiz 04:45 What is tldraw and what was your inspiration for it? tldraw Globs Excalidraw tldraw on GitHub 11:04 Why didn’t you use canvas? 16:15 How do you make an algorithm? Perfect Free Hand 19:33 Do you use pointer events? 23:44 What are you using to manage state? 29:42 How do you handle zooming? Creating Zoom UI 32:28 Where do you store the

Wed, August 31, 2022

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 - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:16 Welcome 02:05 Setting up Wes’ new office 06:18 rubenoliveira.tech Ruben Oliveira 17:22 adamcollier.co.uk Adam Collier 22:56 Sponsor: Sanity 24:13 Consolecmnd.com ConsoleCMND 32:37 sz-development.tech <li class="has-line-data" data-line-start

Mon, August 29, 2022

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 - Sponsor Find out about Sentry’s Dex Conference . From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. This is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. Whether you join us in-person in San Francisco or virtually from your home, you’ll have the opportunity to share your thoughts, engage with other developers, and walk away with your own personal madness sorting algorithm. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:30 Welcome 01:39 Sponsor: Sentry 02:50 Sponsor: Auth0 04:25 Introduction to margins 08:28 Margin vs padding 11:46 New techniques 14:32 The spacer div 17:36 Why do it as a component vs a class? <a id="Tweet_us_your_tasty_treats_25" name=

Fri, August 26, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:36 Welcome 01:10 Who is Brandon Roberts? @BrandonTRoberts 02:00 What is Appwrite? Appwrite <p class="has-line

Wed, August 24, 2022

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 04:34 What are threads? 06:12 Concurrent vs parallel 09:22 Green screen web cam example 13:02 Examples of what you could use web workers for Party Town Deno 19:52 Sponsor: LogRocket 20:42 Post Message API and Web Workers 25:57 What about WASM? 27:28 Offline sync 28:14 What are service workers? <li class="has-line-data" data-li

Mon, August 22, 2022

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 - Sponsor Attend Dex If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:28 Welcome 01:44 Sponsor: Sentry 03:28 Sponsor: Payments Hub 04:36 20 million! 05:57 Our current recording process Libsyn 09:09 Top 10 episodes 162 - The Fundementals JS 92 - React Hooks 158 - The Fundamentals

Fri, August 19, 2022

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 - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:33 Welcome 02:10 Who is Rich Harris? Rich Harris on Twitter 02:55 What is Svelte? Svelte Vercel Svelte Kit <a h

Wed, August 17, 2022

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 - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:10 Welcome 01:47 The types of jobs Wes’ tweet about developer jobs 03:02 Our experiences 05:58 Tech company 09:46 Freelancer or Entrepreneur 11:14 What are the pros of working at a agency? <li class="has-line-data" data-lin

Mon, August 15, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:11 Welcome 00:58 Sponsor: Sentry 02:17 Sponsor: Sanity 03:32 CSS @when and @else CSS When and Else @when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ } 05:42 CSS Grid 3 Masonry CSS Grid .grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; } David Desandro Rachel Andrew <a href="#t=09:0

Fri, August 12, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:38 Welcome 01:12 Guest introduction 03:16 What is Hydrogen from Shopify? Hydrogen Shopify Oxygen 11:23 Why would you want to go headless? 15:26 Sponsor: Hasura 16:56 Where does custom logic

Wed, August 10, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:18 Welcome 02:50 Is there a way to create a “middleman” to fetch data from an API once a day? Redis 06:53 Should I wait before introducing team members to SvelteKit? SvelteKit V1 issues 10:28 What options do we have for generating PDFs serverside? WKHTML to PDF Puppeteer <li

Mon, August 08, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:25 Welcome 01:19 Sponsor: Sentry 02:29 Sponsor: MagicBell 03:51 Big browsers and their engines 05:29 Cloaked browsers 08:16 What’s so great about Arc? Arc 11:33 JavaScript engines 13:30 iOS Browsers Open Web Advocacy 15:07 Android browsers 18:04 The rest of the browsers 19:24 Tor browser <

Fri, August 05, 2022

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 - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Show Notes 00:35 Welcome 01:34 Guest introduction LeeRob.io Vercel 02:25 Syntax hosted on Vercel 04:08 What is suspense? 06:50 Benefits of selective hydration 13:15 Sponsor: Lightstep Incident Response <li class="has-line-data" data-line-start="

Wed, August 03, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 02:20 Write Custom animation transitions 03:32 date input translate to JavaScript date 06:48 Smooth and animated drag and drop 08:35 TypeScript Interfaces are faster than Types

Mon, August 01, 2022

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 00:39 I am excited about coding 02:40 Sponsor: LogRocket 03:58 Sponsor: Linode 04:24 Projects that serve no purpose Bookit 05:46 Scratching your own itch 10:06 Discount finder 11:20 Webcam or audio manipulation 12:43 TTFS Parcel <li

Fri, July 29, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Sponsorname - Sponsor Show Notes 00:32 Welcome 01:52 Guest introduction WPBeginner WP Beginner YouTube CSS Tricks Smashing Magazine 04:33 What tips do you have for blogging and audience building? AnswerthePublic 09:09 How do you manage so many people? 13:07 What was your background before this all got big? 13:43 Sponsor: Hasura 15:01 How do you design your products? 18:40 YouTube, TikTok, and video 25:12 Why the WordPress hate? 29:03 What types of websites are being created in WordPress? <li class="has-line-data" data-line-star

Wed, July 27, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes OhMyPosh OhMyZ.sh Warp 02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile? 07:50 Any advice for using social media to network? 16:44 What bundler are you reaching for when building a React component library? tsdx Vite 18:37 Do you have experience with optimizing third party scripts like Google Analytics?<

Mon, July 25, 2022

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 - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:21 Sponsor: Freshbooks 02:07 Sponsor: Lightstep Incident Response 03:20 What is Bun? Bun Deno 08:20 Why is Bun so fast? Zig 12:32 Module support 15:11 What’s not implemented yet in Bun? What’s not implemented in Bun yet <li class="has-

Fri, July 22, 2022

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 - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:15 Welcome 01:24 Guest introduction 03:15 Browser innovation and testing 05:01 What is a graph database? Neo4j Cypher Sanity Groq 08:11 Is there a specific type of data that works best in a graph database? <a href="#t

Wed, July 20, 2022

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 - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:07 Welcome 01:56 Functional vs object oriented 03:49 Interfaces vs types 05:38 Tabs vs spaces 07:02 Semicolons vs no semicolons 08:10 Let vs const 09:33 Do you explicitly type or allow TypeScript do it’s magic? 11:26 Naming variables Naming convention for programming <li class="has-line-data" data-line-start="25" data-line-end="26"

Mon, July 18, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:26 Welcome 01:47 Sponsor: Lightstep Incident Response 03:00 Sponsor: Sentry 04:10 What is a higher order component? 05:34 What is functional programming? 09:00 What’s the purpose of cache busting and how do you achieve it? Wes’ course for Beginner JavaScript <li class="has-

Fri, July 15, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Stack Overflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response , built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response , built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:33 Welcome 03:24 Guest introduction @kperreault9

Wed, July 13, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:03 Welcome 01:53 Configuring home internet routers 04:42 Scott’s Home Assistant update Mushroom Theme 07:52 Could you explain to me peer-dependencies and how does it work? 13:24 Using Vitest do you still have to transpile code? 16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD. 18:49 How can I update the “updatedAt” field of the document on every save automatically? <li class="has-line-data" data-line-start="24"

Mon, July 11, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. NAME - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:25 Welcome 00:52 Sponsor: Sentry 01:31 Sponsor: Payments Hub 02:40 Topic introduction 05:05 What is Clamp? CSS clamp: font-size: clamp(1rem, 10vw, 2rem); JavaScript Clamp: const clamp = (num, min, max) => Math.min(Math.max(num, min), max) 09:12 What is Interpolate? D3 Interpolate 12:56 Interpolate in colors 14:37 Quantize <a href="https://observablehq.com

Fri, July 08, 2022

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 - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. directus - Sponsor Directus is an open-source data platform that instantly layers on top of any SQL database. Our Data Engine empowers engineers with dynamic REST+GraphQL APIs, workflow automation, built-in auth, caching, and asset transformations. And the included Data Studio democratizes your database, allowing even non-technical users to browse, manage, and visualize database content through a no-code data collaboration app. Get started in minutes with a free Directus Community Cloud project . Show Notes 00:33 Welcome 01:35 Guest introduction Con 2021 - Cursorless: keyboards and mice are sooo last year!! by Pokey Rule Emily Shea 05:12 How does coding with your voice work? Talon Voice Cursorless Talon 09:45 How do you handle triggering wrong words? 11:41 Sponsor: The Stack Overflow Podcast

Wed, July 06, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:02 Welcome 01:38 Stanley Cup update 03:13 Legoland update 04:09 Topic introduction Nicole Sullivan <li class="has-line-data" data-line-start="21" data-lin

Mon, July 04, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 00:25 Welcome 01:35 Sponsor: Linode 02:22 Where the CSS spec for Color functions are at the moment 05:13 New CSS Color mix function 10:29 Color for the color challenged 12:53 Color contrast function 15:06 Programatically alter colors Anyone have a really great CSS Variables col

Fri, July 01, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:32 Welcome 01:56 Guest introduction swyx.io Why Temporal? 06:09 What is Developer Experience? Sarah Drasner 08:35 Is VS Code considered DX? 09:28 Why is internal DX important? Vercel NextJS 11:44 Is DX helpful to small organizations as well? 15:27 Parsimony Parsimony <a href=

Wed, June 29, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:10 Welcome 01:39 Furnace wiring fun Ecobee Tweet asking for communication tips 05:37 Email communication SavvyCal Calendly

Mon, June 27, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes WICG Shared Element Transitions 00:21 Welcome 01:33 Sponsor: Prismic 02:43 Sponsor: LogRocket 04:18 Browser animations on the web vs native apps 06:15 What is the targeted use case for it? 06:56 Shared Element to Root Transitions 11:14 Entry and Exit 17:33 How to enable this in Chrome <li

Fri, June 24, 2022

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 - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time. WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more! Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:33 Welcome 02:21 Guest introduction @tim_leland TimLeland.com WeatherExtension Link Shortener Extension 03:40 Why develop browser extensions? 07:58 How did you market your

Wed, June 22, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome Syntax Ep181 Automating Stuff 02:18 Protocols 07:35 Software Homebridge Hoobs Home Assistant 11:28 Using Homebridge 16:51 Home Assistant vs Homebridge

Mon, June 20, 2022

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:25 Welcome 01:14 Sponsor: LogRocket 02:24 Sponsor: Sanity 04:19 What are viewport units? The Large and small and dynamic viewports 05:22 What are the new viewport units? Large small and dyanmic viewports 07:57 What’s small and large? 11:52 How do viewport units help developers? 12:39 What about the keyboard on mobile? <li class="has-line-data" data-line-start="22" data-line-en

Fri, June 17, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time. WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more! Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:36 Welcome 02:31 Who is Eduardo? EduardoBoucas.com @eduardoboucas </li

Wed, June 15, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. Show Notes 00:10 Welcome 03:30 If I host a NextJS app on Digital Ocean, should I use a Digital Ocean database? 09:14 Will either of you ever do a regex course? Regex101 13:58 Is it possible to use the WordPress users database as the same database that the app uses? WPGraphQL <li class="has-line-data" data-line-start="22" data-line-end="2

Mon, June 13, 2022

I can has() new CSS Selector?!

In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:25 Welcome 01:19 Sponsor: MagicBell 02:31 Sponsor: LogRocket 03:40 Don’t say stupid 05:03 :Has MDN :Has // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find Hi // would not find hi 06:13 Jargon check 11:01 Some examples 13:25 Nest navigations 13:51 Can I use it? 15:52 Is and Where MDN :where <p class="has-line-data" data-line-start="40

Fri, June 10, 2022

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 - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd , a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster. You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code. Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo , find your missing content workflow piece on our marketplace , and learn more about Strapi and how it help you on our Youtube . Show Notes 00:38 Welcome to Syntax <li class="has-line-data" data-

Wed, June 08, 2022

Syntax Live at Reactathon

In this episode of Syntax, Wes and Scott are live from Reactathon 2022! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes Live video version 00:32 Welcome 04:10 Hot Take Tweets What is your JavaScript Hot Take or unpopular opinion? 05:42 Semi colons are not optional

Mon, June 06, 2022

Stopping Malicious Actors

In this Hasty Treat, Scott and Wes talk about ways to prevent malicious people from using or abusing your app. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:26 Welcome 01:04 Sponsor: Linode 02:06 Sponsor: Sentry 02:59 What kind of bad things can happen to your application? 06:24 How do you stop bad actors? 12:20 Nonce tokens 14:10 CSRF CSRF Explained <li

Fri, June 03, 2022

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info . We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn . Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo , find your missing content workflow piece on our marketplace , and learn more about Strapi and how it help you on our Youtube . SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd , a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster. You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code. Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:39 Welcome 01:58 Guest introduction <li cl

Wed, June 01, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. SPONSOR - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . SPONSOR - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:21 Recording Syntax in Riverside Riverside 01:22 Welcome 04:57 CLI vs VS Code VS Code 07:27 Git Jargon 11:50 UI tools we’ve used Git Towe

Mon, May 30, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes Time to live calculator Reminx Conf Opera The United States of Insanity - Official Trailer 00:24 Welcome 01:11 Sponsor: Sentry 02:28 Sponsor: LogRocket 03:08 My struggle has been with caching, cache control h

Fri, May 27, 2022

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 - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, AIOSEO , also known as All in One SEO for WordPress. It’s becoming one of the most powerful SEO toolkit and is now used by over 3 million websites to improve search rankings. Shipshape (Whiskey, Web and Whatnot) - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Show Notes 00:34 Welcome 01:36 Guest introduction Tom Preston-Werner on Twitter Kai’s Power Tools 04:23 Math is weird 07:21 User interface design 08:53 Sponsor: AIOSEO 10:24 What is RedwoodJS? RedwoodJS Chatterbug 15:31 Is JavaScript the stack you should be using these days? 18:40 Freedom vs decisions in software <li class="has-line-data" data-li

Wed, May 25, 2022

TypeScript Tooling Explained

In this episode of Syntax, Wes and Scott talk through TypeScript tooling, build tools, configs, and editors. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:08 Welcome 01:57 Tooling tsc esbuild swc bun Zig 13:45 LogRocket 15:01 Server side or node-ish Deno ts-node wds 26:09 MagicBell 27:42 Build tools <li class="h

Mon, May 23, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:15 Welcome 01:24 Office ideas Heat pumps on Technology Connections Neewer lighting 05:00 Sponsor: Sanity 06:10 Sponsor: Sentry 07:37 Levelup Lodge tour 09:40 Lighting 13:57 The desk Karlby Countertop Fully Jarvis legs Desk Haus <li

Fri, May 20, 2022

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 - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Show Notes 00:35 Welcome Jared Palmer 02:15 What is Turbo Repo? Turbo Repo Vercel tsdx 03:27 Where does Turbo Repo fit in your stack? 06:04 What are Google, Meta, or Twitter doing? 15:35 Sponsor: Whiskey, Web and Whatnot 16:45 What’s the cost of adding Turbo Repo to a project? 21:19 Changing based on environmental variables 23:18 Does this replace how you define your workplace? 24:08 How do you share the cache? 25:25 What don’t you cache? 27:35 What about Gatsby images? <a href=

Wed, May 18, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:10 Welcome 01:30 What are the good reasons to use nextjs apart from personal preference? 05:15 How did you decide to build Syntax.fm ? Uses.tech 09:09 Why does my M1 Mac feel slower than my Intel Mac? 14:44 Do you alphabetize your larger javascript objects by key name? 17:14 Sponsor: Prismic 19:06 Why did you choose noSQL database over SQL databse?</l

Mon, May 16, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Show Notes 00:23 Welcome 01:25 Sponsor: Sentry 02:25 Sponsor: Sanity 04:10 The Syntax Lift adventure 06:04 A new Community Group for Web-interoperable JavaScript runtimes. 07:07 JavaScript environments 09:19 What’s bun? Bun 13:28 Are we excited about this? 16:27 </str

Fri, May 13, 2022

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 - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Visit whiskeywebandwhatnot.fm or find them wherever you listen to podcasts. Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at strapi.io/demo , find your missing content workflow piece on our marketplace ,and learn more about Strapi and how it help you on our Youtube channel . Show Notes 00:29 Welcome 02:42 Guest introduction 04:07 What tools did Google use? 10:49 What do bigger companies use for version control? 14:40 What is Nx? Nx 21:02 How does Nx help you upgrade projects? 27:42 Sponsor: Whiskey Web and Whatnot 28:33 How does Nx fit into the existing tooling? <li class="has-lin

Wed, May 11, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:13 Welcome 01:05 Dishwasher talk 04:30 getUserMedia Hair.WesBos.com Javascript 30 07:22 FileSystem Level Up Tutorials: Browser APIs Electron 12:50 Geolocation 15:07 Sponsor: Prismic 16:41 Permissions 22:36 Web Animations <li class="has-line-data" data-line-start="

Mon, May 09, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:24 Welcome 01:35 Sponsor: Sentry 02:23 Sponsor: Payments Hub 05:21 Intro to TypeScript fundamentals 06:28 What is Type Narrowing? 09:32 typeof 11:58 instanceof 13:29 Custom typeguards 16:12 this is <li class="has-line-data" data-line-start

Wed, May 04, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax . Show Notes 00:10 Welcome 01:56 A big announcement 04:33 What is the Edge? 08:27 The upsides of edge functions 12:13 Cold start <li class="has-

Mon, May 02, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:22 Welcome Twitter thread of questions from listeners 01:25 Sponsor: Linode 02:07 Sponsor: Sentry 03:04 What’s Axios? Syntax 224 - Serverless Cloud Functions 04:10 Why someone wouldn’t use Axios? <li class="has-line-data" data-line-s

Wed, April 27, 2022

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 - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. Spin up a new project today and discover Kontent. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes JavaScript Interview Questions 00:13 Let’s get STUMP’d 01:08 Cleaning out the garage 05:05 What are 4 methods available on weakmap? 07:07 How do you make an object iterable in JavaScript? 09:29 How do you make the first letter of a string into uppercase? 10:26 What is the typeof operator? 11:53 What are classes in ES6? 13:21 How do you enumerate key and value pairs of an object? 15:44 Kontent b

Mon, April 25, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:26 Welcome 01:12 Sponsor: Prismic 02:32 Sponsor: LogRocket 04:06 What we use for coupons Stripe Braintree 06:27 Structure of our coupons 10:43 Products and carts 13:59 Country validation 15:11 Affiliate codes 16:36 Chaining rules together 19:41 Tracking coupons <

Wed, April 20, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax . Show Notes 00:10 Welcome 01:05 The mustard bandit podcast 02:54 How can Developers work with designers and Product managers seamlessly? 06:37 How do I deal with imposter syndrome? 10:46 Any good coffee shops in Denver? 17 of Denver’s Best Coffee Shops 11:38 Do you use Table element or CSS Grid for tabular data? 13:18 How do you manage animations without a library? <li class="has-li

Mon, April 18, 2022

Svelte Cubed + 3D In Browser

In this Hasty Treat, Scott and Wes talk about Svelte Cubed and working in 3D in the browser. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:21 Welcome 01:00 Sponsor: LogRocket 01:41 Sponsor: Prismic 02:45 Intro to 3D in the browser Svelte Cubed Getting started with Svelte Cubed 03:49 Declarative vs imperative 07:43 How does Three.JS work? ThreeJS 12:28 Orbit controls 15:47 Svelte Cannon Svelte Cannon <li class="has-line-data" data-line-start="24

Wed, April 13, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:26 Welcome 01:01 Buying a new car Hyundai Ioniq 5 08:20 What would you recommend old-school jQuery folks, external agency vendors, and modern devs that want to work together? 11:59 Are React dumb/presentational components only possible at the leaf components of an application? 15:35 How old should a kid be to learn programming? Scratch Minecraft 20:28</

Mon, April 11, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:44 String cheese theory 01:49 Sponsor: Sentry 03:41 Sponsor: MagicBell 05:26 Being consistent is the key to success 07:12 Commit to it 09:13 Plan and schedule 13:42 Being accountable to someone 18:11 Break things down into smaller tasks 20:25 Measure goals 22:14 Revise the plan <h2 class="code-line" data-line-start="23" data-line-

Wed, April 06, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:09 Welcome 03:02 Creating YouTube videos Scott’s YouTube channel 09:42 Conference talks Notion <li class="has-line-data" data-line-start="21" data-line

Mon, April 04, 2022

Types in JS?

In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:25 Welcome 01:13 Sponsor: Sentry 02:03 Sponsor: Sentry 02:44 The proposal announced A proposal for type syntax in JavaScript Proposal types as comments 03:24 What are types? <li class="has-line-data" data-line-start="19" data-line-end="20"

Wed, March 30, 2022

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 - Sponsor NEEDS AUDIO RECORDING FIRST Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes Uses.tech 00:10 Welcome 03:35 How to submit your site for highlight 04:11 bald.design https://www.bald.design 10:38 Anh Hoang Nguyen https://www.hoanganh.dev 15:08 kennytye.com https://www.kennytye.com 22:42 Sponsor: Freshbooks 24:10 rubenoliveira.tech http://rubenoliveira.tech 28:47 abgn.me https://abgn.me</a

Mon, March 28, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:21 Welcome 02:47 Sponsor: Sentry 03:48 Sponsor: MagicBell 04:55 What’s is Vitest? 09:06 How is testing handled? 10:59 HappyDOM 14:13 Code coverage baked in 16:25 Files acting as folders Tweet us your tasty treats Scott’s Instagram <li class="has-line-data

Wed, March 23, 2022

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 - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. Spin up a new project today and discover Kontent. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . .TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc . Show Notes 00:10 Welcome 02:50 CSS Redesign of LevelUpTuts 03:56 Overview of our platforms 06:06 The API ExpressJS MongoDB GraphQL Fastify Mercurius Mongoose <li class="has-line-

Mon, March 21, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 00:21 Welcome 01:13 Sponsor: LogRocket 02:06 Sponsor: Prismic 03:23 Wes’ story of SSL Render 05:43 How LetsEncrypt works LetsEncrypt 08:32 What is Cloudflare? Cloudflare 10:33 The problem Wes ran into 12:27 Support is tricky 13:54 What is Cloudapp? Cloudapp Vercel 15:34 Two SSL Certs are needed <li class="has-line-data" data-line-s

Wed, March 16, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:32 Fool’s winter 03:25 How do you handle authentication in an app? 09:42 Responding to people who don’t think developers are real developers? 12:21 How do you handle git conflicts in package-lock.json and/or yarn.lock files? 14:42 I built a small project which converts .png images to CSS box-shadow values. Img to Box Shadow <a href="#t=16:37"

Mon, March 14, 2022

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. Visit Retool.com/syntax for more information. Show Notes 00:21 Welcome 01:20 Sponsor: LogRocket 02:26 Sponsor: Retool 03:49 What exactly is server side rendering vs. tech like Jamstack and serverless? Cloudinary Mux 12:15 Why use one or the other? Svelte Kit Syntax.fm 16:55 Where does Serverless fit into this? 19:12 What’s the ideal scenario? Tweet us y

Wed, March 09, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create . Get an awesome supercharged free developer plan on sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:20 Scott’s new sound panels 03:32 Instacart 2021 State of JS Survey Tauri 07:46 Mobile and Desktop libraries 13:50 Testing Vitest Playwright Cypress <li class="has-line-data" data

Mon, March 07, 2022

Sticker Mogul 2022

In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Show Notes 01:26 Sponsor: LogRocket 02:15 Sponsor: Linode 03:51 How Wes sells stickers Syntax 346: Selling And Shipping T Shirts with TypeScript 04:27 Where the stickers are printed Zigpac 06:30 How the stickers were designed 07:38 How do you ship them anywhere in the world for $5? 10:46 Packing the stickers 13

Wed, March 02, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 2021 State of JS Survey 01:51 Winter birthday fun 05:38 The State of JS survey 07:37 Demographics 09:18 Salary range 09:58 Language features 14:05 Browser APIs 17:36 Custom elements and Shadow DOM <li class="

Mon, February 28, 2022

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 01:30 Sponsor: Prismic 02:58 Sponsor: Sentry 04:21 .filter() and .map() (every, one, etc…) VS Reduce 09:17 .forEach() vs for in / for of 15:52 .hasOwnProperty() vs in vs .hasOwn() 19:37 CSS absolute + left/right/top/bottom vs transform 22:54 Object.assign({}, obj) vs {…spread} Animal Friendly idioms Tweet us your ta

Wed, February 23, 2022

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 - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. Spin up a new project today and discover Kontent. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Show Notes <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://github.com/ben

Mon, February 21, 2022

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 - Sponsor Magic Bell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:23 Welcome 01:25 Sponsor: MagicBell 02:50 Sponsor: Sentry 04:20 Weird audio tics 05:19 Fetch in Node.js 09:54 URL imports in Node.js 11:41 JSON Modules 15:01 Node in import url scheme 17:30 Pipeline Operator 21:21 Reversible String Split 23:56 JavaScript Module Blocks 25:22 String.cooked 26:34 BigInts Math URL imports in Node.js <li class="has-line-data" data-line-start="26" data-

Wed, February 16, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax . Show Notes 00:11  Welcome 02:10  Can you explain import.meta? 07:20  What are your thoughts on publishing and selling HTML & CSS/SASS templates/themes? 12:00  When is it best to use a semantic menu vs a nav? 16:14  Sponsor: Sentry.io 17:36  As a newbie in web dev., which browser do you recommend, Chrome or Firefox Dev. Edition? 20:25  Are TypeScript types are like creating models in Mongoose? <a title= "#t=26:16" href="#t=26:16" data-href= "#t=26:

Mon, February 14, 2022

Code Explorers

In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. Visit  retool.com/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 00:25  Welcome 01:42  Sponsor: LogRocket 02:54  Sponsor: Retool 04:33  Topic introduction 06:44  How to get a handle on something new in a library? 10:27  How to contribute to comments 12:55  Looking through Issues <li class="code-line" di

Wed, February 09, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax . Show Notes 00:27:02  Guest introduction Wordle 02:45:13  How did Wordle go viral initially? 05:27:14  Where did the idea for Wordle come from? 07:07:06  What's your background

Mon, February 07, 2022

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 - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 00:26:13  Welcome 01:12:15  Sponsor: Hashnode 02:27:10  Sponsor: Linode 03:30:09

Wed, February 02, 2022

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Tabnine - Sponsor Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code. It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours. Get the free version at  tabnine.com/now  or go to  tabnine.com/promo/syntax  to get 50% off your first 3 months of Tabnine Teams. Show Notes 00:11  Welcome <a title="#t=01:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichr

Mon, January 31, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 00:24  Welcome 01:57  Sponsor: Sentry 03:26  Sponsor: Sanity 04:48  Summary of the Reddit post 06:46  We are a team 09:05  Coding with ego <li class="code-line" data-line="2

Wed, January 26, 2022

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 - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. Spin up a new project today  and discover Kontent. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11  Welcome 01:46  Our experiences with monorepos 05:04  Why use monorepos? 09:37  How long have we been using monorepos? 10:16  Tools for starting a monorepo pnpm <li class="code-line" da

Mon, January 24, 2022

Updating Project Dependencies

In this Hasty Treat, Scott and Wes talk about their process for updating project dependencies. Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Sponsor - MagicBell MagicBell  is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:25  Weeeeelcome 00:52  Sponsor: LogRocket 01:29  Sponsor: Magic Bell 03:32  What are dependancies? 04:04  Wes updates all the things 05:30  How to check if there are any updates 07:05  Upgrade isolated, Minor deps first. <a title="#t=09:16" href= "https://file+.vscode-res

Wed, January 19, 2022

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Show Notes 02:30  Semantic HTML 07:36  JavaScript Data <a title="#t=08:54" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/424%20-%20What%20to%20Focu

Mon, January 17, 2022

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 - Freshbooks Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 00:53  What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do? 02:09  Sponsor: Sentry 03:12  Sponsor: Freshbooks 05:32  Negative margins in CSS 07:53  Not Passing a radix to parseInt() 10:17  -50% translation 50% direction <a title="#t=11:27" href= "https://file+.vscode-res

Wed, January 12, 2022

Potluck

In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. retool.com/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 00:11  Intro 01:10  Watching movies with kids 02:49  How do you protect images on your website? 07:21  How did you guys learn Typescript? 13:26  Should I worry about learning Typescript now or stay focused on mastering

Mon, January 10, 2022

Remix!

In this Hasty Treat, Scott and Wes talk about Remix! Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 00:32  Rrrremix  Remix 02:03  Sponsor: Sentry 03:48  Sponsor: Sentry 05:51  What is Remix? 07:51  Built on Fetch 12:28  Frameworks are getting so good <a title="#t=13:30" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/421%20-%20Remix.md#t=13:30" d

Wed, January 05, 2022

2022 Predictions

In this episode of Syntax, Wes and Scott talk through their predictions for 2022. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11  Welcome... 01:31  Svelte is king Svelte Svelte Kit 03:57  Next.js Next.js Next.js Live 06:40  Web components

Mon, January 03, 2022

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 - Linode Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 00:24:12  Welcome 01:24:11  Sponsor: Linode 02:11:02  Sponsor: Sentry 03:54:18  Twitter ask for One Liner

Wed, December 29, 2021

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 02:21  Wes highlights 05:33  Scott's highlights 07:42  Writing admin tools for fun 13:33  Sponsor: .TECH Domain Name<

Mon, December 27, 2021

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 - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 00:54  Luks of the past 03:19  Sponsor: Sanity 04:26  Sponsor: LogRocket 05:04  Has package-lock.json ever saved your bacon? 08:27  Why do you not talk about Angular? 11:28  How do you handle package updates? Wes Bos tweet on npm-update <

Wed, December 22, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 01:20  Guest introduction 02:46  Coding in the browser anywhere Gitpod JetBrain <a title="#t=04:58" href= "https://fil

Mon, December 20, 2021

Gatsby v4

In this Hasty Treat, Wes and Scott talk about what's new in Gatsby v4. Sponsor - Prismic Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 00:26  Welcome 01:41  Sponsor: Prismic 02:35  Sponsor: Sentry 03:26  Gatsby v4! Gatsby What’s new in Gatsby 4 04:26  Any node version requirements? <a title="#t=05:22" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Document

Wed, December 15, 2021

Potluck - enums, WASM, Lighthouse, Redirects

In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 02:07  Google Chrome to start measuring user experience beyond the completion of page load <a title="#t=05:47" href= "https://file+

Mon, December 13, 2021

How To Do Things In Svelte

In this Hasty Treat, Wes and Scott talk about how to do things in Svelte. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 00:28  Welcome 02:18  Lead pipe talk 04:33  Sponsor: Freshbooks 05:05  Sponsor: Logrocket 06:34  Intro to Svelte 07:44  Get Local State running Writable-stores 10:47  Arrow functions <a title="#t=11:

Wed, December 08, 2021

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 - Sponsor Bryntum’s suite of web components help developers quickly add powerful project and resource scheduling capabilities to their React, Angular, Vue or vanilla JS apps. The SDKs include extensive API docs and plenty of examples. Try them online at  bryntum.com/examples/gantt  or  bryntum.com/examples/scheduler-pro . Visit  Bryntum.com/syntax  for a 45-day free trial. Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 01:02  Guest introductions <a title= "https://www.linkedin.com/in/anth-rogan-59955429/" href= "https://www.linkedin.com/in/anth-rogan-59955429/" data-hre

Mon, December 06, 2021

Meta Tags

In this Hasty Treat, Wes and Scott talk about Meta Tags. Sponsor - Sanity Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 00:25  Welcome Syntax 379 - The Link Tag 01:24  Sponsor: Sanity 02:50  Sponsor: Sentry 04:28  What are Meta Tags? 05:01  What is charset? <li class="code-

Wed, December 01, 2021

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 00:16:18  Topic introduction 01:03:00  Leaf blowing and house updates <a title="#t=02:57:01" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/410%20-%20title.md#t=02:57:01" data-href="#t=

Mon, November 29, 2021

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 <a title="#t=13:52" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/409%20-%20Github%20Co-pilot%20is%20Gonna%20Take%20ur%20Job.md#t=13:52" data-hr

Wed, November 24, 2021

Troubleshooting

In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 01:13  Furniture shortages 02:29  Managing stuff 03:05  Basic troubleshooting skills are missing 06:09  Sanity check CodePen Codesandbox <a title="#t=08:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubl

Mon, November 22, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 04:30  The last time we upgraded 07:05  Initial thoughts on new MacBook Pro Apple MacBook Pro 09:23  How much RAM you might need 11:33  M1 Pro or M1 Max? 12:37  Justification as a business expense <a title= "https://www.figma.com" href="https://www

Wed, November 17, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off? 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doct

Mon, November 15, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 04:00 -  Rust Compiler : ~3x faster Fast Refresh and ~5x faster builds 06:25 -  Middleware (beta) : Enabling full flexibility in Next.js with code over configuration 08:16 -  React 18 Support : Native Next.js APIs are now supported, as well as suspense 09:56 -   AVIF Support : Opt-in for 20% smaller images 11:58 -  Bot-aware ISR Fallback : Optimized SEO for web crawlers 13:10 -  Native ES Modules Support : Aligning with the standardized module system 14:39 -  URL Imports (alpha) : Import packages from any URL, no installs required Links https://twitter.com/mattgperry <a href= "https://nextjs.org/blog/next-12#introducing-

Wed, November 10, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Guests Tomek Sulkowski Show Notes 02:45 - What is StackBlitz? 05:28 - What makes it different? 08:20 - How does offline work? 12:18 - What are web containers? How does this fit in? 17:45 - How does this all work (WASM, Node.js in the browser, etc.)? 21:00 - What does performance look like? 31:06 - What

Mon, November 08, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:08 - What is it, what does it do? Framework for server-first static apps Use any front-end framework Does not ship JS unless you explicitly define a component to ship JS 05:20 - The syntax .astro files is a mash-up of Svelte and React Frontmatter for server-side JS Template syntax is basically JSX TS baked in <p class="has-line-data

Wed, November 03, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 06:05 - Which property allows you to control the shape or appearance of the marker of a list? 06:33 - What is a pseudo element? What is a pseudo class? 09:15 - What is the difference between block, inline and inline-block elements? 10:15 - What is a combinator selector? 11:12 - What is specificity? How do you calculate specificity? 14:37 - True or False — The translate() function can move the position of an element on the z-axis? 16:44 - What is the difference between “resetting” and “normalizing” CSS? 17:51 - H

Mon, November 01, 2021

Hasty Treat - How to Setup a PNPM Monorepo

In this Hasty Treat, Scott and Wes talk about PNPM and monorepos! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 4:40 - What is pnpm? https://pnpm.io/ Performant npm https://www.youtube.com/watch?v=hiTmX2dW84E Find and remove node modules find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 08:30 - Why monorepo? Internal packages all in one place Forks and custom packages easier Commands that control everything at once 10:33 - Workspaces Not exclusive to pnpm Yarn, npm, pnpm all have them now Different syntax packages: - "packages/**" 12:48 - How it works in practice All commands run through root Use in host, hook up my monorepo to render run commands Filter and recursive <li class="has-line-data" data-line-start="

Wed, October 27, 2021

Horror Web Dev Stories - 2021

For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could useEffect be right?) Next thing you know, they ended up bringing in a guy with an angle grinder to get access to the server cage. 04:15 - No one from Denver can buy <p class="has-line-data" data-line-

Mon, October 25, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:36 -  https://twitter.com/CameronPak/status/1445051951843061767 04:48 -  https://twitter.com/susanlangenes/status/1445049321871712257 05:29 -  https://twitter.com/DevJordanW/status/1445052979644706823 06:12 -  https://twitter.com/HerbieDuah/status/1445088892177108994 07:04 -  https://twitt

Wed, October 20, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks! 06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like. 11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupi

Mon, October 18, 2021

Hasty Treat - Handy Utility Functions with Just

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:44 - What is Just? https://github.com/angus-c/just No dependencies It’s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5 06:46 - Some nice ones just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake <li class="has-line-data" data-line-start="33"

Wed, October 13, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:45 - Recording Setup Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter <a href= "https://ww

Mon, October 11, 2021

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 04:39 - color-contrast() Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. 06:01 - Accent color https://davidwalsh.name/css-accent-color 07:34 - currentcolor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword 08:54 - Profiled color values - color() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() 11:00 - color-mix() <a href= "https://dev

Wed, October 06, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below.  https://a0.to/syntax Show Notes 02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why no

Mon, October 04, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:56 - Why much of modern web development is just recreating PHP Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP 05:44 - Mixing templating and logic We do this with JSX 07:39 - Each request has its own scope 08:57 - Massive standard lib Format a date? No sweat! Image resizing? Sure! Audio bindings? Sure! 10:16 - URL-based routing Next.js  pages Serverless functions 11:13 - Server-rendered Hotwire 11:38 - $_GET, $_POST, are just available Next.js  hooks 12:29 - Variable interpolation 12:59 - All-in-one frameworks <li class="has-line-data" data-line-start

Wed, September 29, 2021

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 02:49 - Frontend Feud Rules 04:06 - Round 1 10:28 - Round 2 17:26 - Round 3 25:37 - Round 4 35:15 - Round 5 42:03 - Round 6 Links Changelog JS Party

Mon, September 27, 2021

Hasty Treat - Desktop Apps + New Tech We Love

In this Hasty Treat, Scott and Wes talk about the hottest new tech they love! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:30 - Lucy Language https://lucylang.org/ A concise language for describing Finite State Machines 06:10 - MDSvex https://github.com/pngwn/MDsveX Mdx for Svelte Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities https://github.com/rehypejs/awesome-rehype <p

Wed, September 22, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:28 - Thoughts Apples to oranges, so unfortunately, no super legit ability to compare. SvelteKit isn’t analogous with a custom React setup that uses CSR SSR is usually going to be faster - we can ship less JS Some big things changed beyond React → SvelteKit Apollo  →  GFetch Plyr  →  Vime HLS starts grabbing chunks immediately

Mon, September 20, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:42 - What are webhooks? User-defined HTTP callbacks When something happens, ping this URL with this data Examples: When something sells, ping this URL When someone reverses a charge, lock their account Trigger a build of the website when the content changes Then someone buys a shirt, generate a shipping label and save it to the DB 07:57 - Sending End Can be a great way to hook two services together 09:13 - Receiving End

Wed, September 15, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below:  https://a0.to/syntax . Show Notes 04:50 - Regex indicies New d flag in a regex https://regex101.com/ This will tell you the indexes (indicies) of the regex matches Handy if you need to highlight or replaces matches in a string We can ask for the start and end positions of each matched capture group 07:16 - Class updates Private fields Properties and Methods to be kept private Prefix them with a # <li class="has-line-data" data-line-

Mon, September 13, 2021

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 04:06 - Rural internet is huge for: Access to information Remote work Opens up job opportunities for many residents who can’t relocate due to family Home values Big city folk moving into rural areas and driving prices up is another issue altogether Smart rural home 05:46 - Previous setup We have a cottage LTE Routers Yagi Antennas Worked well, but slow $4/gig over 100gb Grey market - one went up/down Alternatives WISP - no access XPLORNET @ (hughesnet) - BRUTAL <li class="has-line-data" d

Wed, September 08, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project? 05:26 - What ever happe

Mon, September 06, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:50 - What is it? Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior. 03:26 - noImplicitAny The any type in TypeScript is exactly that - it can be anything. TypeScript will try to infer the type. When it can’t it will be any. Sometimes you need any, but if that is the case, you must explicitly type it as any. If something is implicitly any - it might be a mistake, or you forgot to type it. Risky! 06:01 - noImplicitThis You must type this - it can’t be implicitly inferred. 06:47 - strictFunctionTypes If you have a type that is a function and it doesn’t 100%. 07:44 - alwaysStrict Always turns on strict mode. You can’t do things like redeclare var variables.<

Wed, September 01, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below.  https://a0.to/syntax Show Notes 03:10 - What is STUMP’D? 04:27 - What is a first class function? 06:27 - What is the purpose of using object is method? 09:31 - What is the purpose of Error object? 11:00 - What are the advantages of minification? 12:37 - How do you declare namespace? 15:38 - What are JS labels? 19:20 - List the methods that are available on a WeakSet? What is the difference between a set and a WeakSet? 23:33 - What is the use of preventDefault method? 26:15 - What is a spread opperator? 27:35 - What is

Mon, August 30, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 05:33 - Warning Signs of a potential toxic client Doesn’t have project well thought out. Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget. Ill Communicator Contacts you at odd times. Thinks that you should answer every email in an hour. Contacts you in inappropriate ways, via text message, social media. OR doesn’t respond to emails in a timely manner giving you blockers. <li class="

Wed, August 25, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:59 - Get comfortable with your code not working All of our code is broken much of the time. 02:40 - Compound learning and momentum is your biggest tool There is no formation without repetition. It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs. 04:05 - Learn to read error messages Is this error coming from my code? Is this coming from the library? If so, maybe th

Mon, August 23, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:20 - Layout is hard block vs inline vs inline-block Learn what this means! Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid Avoid floats Wes’ Flexbox Course Wes’ CSS Grid Course Scott’s Modern CSS Layouts Course 07:43 - I can’t get my thing to get the right style Use a scoping system like BEM, CSS in JS, CSS Modules Don’t style via IDs Avoid !important 11:00 - My thing isn’t looking the way it’s coded Dev tools <li class="has-

Wed, August 18, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:07 - Can you explain the concept of memoization in JS? 07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”? 09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashbo

Mon, August 16, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 04:16 - What is it? https://ryanflorence.dev/p/ship-weird The link tag is weird. First, it’s not for links! It’s for establishing a relationship between the current HTML document and a resource. 05:11 - CSS / Media attr 07:13 - Web fonts 08:09 - Favicons Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons 08:36 - Preload + Prefetch Resource Audio, document, fetch, font, image, script, style, track, video, worker + more 10:15 - Fetch request (shoutout Ryan) 11:27 - Preconnect <li class="has-line-data" data-line-start

Wed, August 11, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 04:20 - HTML HTML is the language you write to get text and elements to show up on the screen Elements can describe the content they contain p img Or be structural and describe the areas of the website div h header, footer Listen to our ep on HTML elements to learn more about them:  Syntax 354: T

Mon, August 09, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:35 - Levels of using TypeScript Typing your code Typing your code, but getting a little bit more dynamic using utility types Creating your own utility types! TypeScript is a language in itself Check out type challenges if you want your mind blown:  https://github.com/type-challenges/type-challenges/ https://www.typescriptlang.org/docs/handbook/utility-types.html 07:29 - Partial 08:23 - ReadOnly <p class="has-line-data" data-

Wed, August 04, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at  revenuecat.com . Show Notes 01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance. 08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and h

Mon, August 02, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:47 -  GitHub CoPilot AI-powered autocompletion Not going to take your job 07:18 -  Next.js 11 Image updates Multiplayer 08:20 -  Astro Build faster websites with less client-side JavaScript 09:50 -  Notion API Get database Query database Pages Block children 11:27 -  Petite Vue Petite Vue is an alternative distribution of Vue optimized for progressive enhancement Simila

Wed, July 28, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:23 - What’s your favorite stack right now? 28:52 - What are your thoughts on WordPress? Do you still use it? 33:59 - What do you want for listeners of Syntax? 38:21 - How do you deal with FOMO / the pressure to learn new tech? Links https://shoptalkshow.com/469/ Chris Coyier Dave Rupert <a href= "htt

Mon, July 26, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:48 - What are favicons? Requesting favicons by default /favicon.ico 07:38 - Sizing favicons 16x16 is OG - don’t do that now You can specify multiple sizes 09:41 - File formats .ico files .png favicons 13:40 - Animated favicons Canvas Base64 11:36 - SVG favicons 17:19 - Dark mode favicons 18:55 - App Coloring Isn’t there a new Safari version? Links https://en.wikipedia.org/wiki/Favicon https://caniuse.com/

Wed, July 21, 2021

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3? 8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project. <p class="has-lin

Mon, July 19, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:15 - What is a linter anyway? Why do you want to lint your CSS? Does stylelint fix errors or just tell you errors? 04:42 - Getting setup .stylelintrc stylelint extension Sass High perf animations stylelint order Max nesting depth Declaration strict value { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color",

Wed, July 14, 2021

React 18 - A Look Ahead

In this episode of Syntax, Scott and Wes talk about everything coming in React 18! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at  revenuecat.com . Show Notes 04:32 - Automatic Batching Don’t worry about re-renders 08:32 - New Render API const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!) 10:44 - Suspense Suspense is basically a promise resolver component - nothing inside will render until promise is resolved. SuspenseList lets you coordinate the order in which loading indicators show up. 16:43 - StrictEffects Mode <a href= "https://gi

Mon, July 12, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:08 - Next Gen Bundlers are here! They are easy They are fast They are bundlers They are code splitters They are dev environments HMR / Fast Refresh 07:13 - What do they use under the hood? Parcel uses SWC (Rust) Vite uses esbuild (Go) 10:29 - How do you use them? Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there They have adaptors for different types of files CSS Images Etc. <li class="has-line-data" data-line-start="36" data-line-end="

Wed, July 07, 2021

Syntax Highlight — We Review Your Portfolios

In this episode of Syntax, Scott and Wes review your portfolios! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 03:59 -  cudd.io Shared component animation between home / about really nice Readable, clear Simple Check the contrast ratio on the white text on light blue:  https://coolors.co/contrast-checker/ffffff-56ccf2 Nice SSR from  Next.js CSS vars Very tall cards without much text, looks like a mistake Better on a short browser window - peep the tall and skinny Card heading should be h3 or h4 10:35 -  damonbolesta.com <li class="has-line-data" d

Mon, July 05, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:24 - Synchronous / Async 05:23 - Multi-threaded JavaScript has a single “main thread” But you can have more threads with web workers 08:12 - Blocking JavaScript can stop other things on the page from running A script tag can block HTML from being parsed Most stuff in JavaScript is non-blocking Node.js write to filesystem can be blocking 10:27 - Concurrent + Parallel JavaScript start/stop are concurrent The API runs on a different thread Doesn’t REALLY matter https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html 13:22 - Consecutiv

Wed, June 30, 2021

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 - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 03:13 - Elements Learn to open the Elements panel and the console right away — right-click inspect element is weak! Drag-and-drop elements <li c

Mon, June 28, 2021

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 - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at  deque.com/syntax . No credit card needed. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:32 - Seven new JavaScript proposals https://github.com/tc39/proposals 06:25 - JSON Modules https://github.com/tc39/proposal-json-modules Builds on the import assertions No named exports Not executed, to avoid security issues Not in Node yet 09:55 - Array Find From Last https://github.com/tc39/proposal-array-find-from-last The problem: you need to group together async code.The only way to do that right now is to wrap it in a function. 11:40 - Async Do https://github.com/tc39/proposal-async-do-expressions Async do will allow you to group together a block of code and mark it as async. <li class="has-line-data" data-

Wed, June 23, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component? 11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev? 22:35 - I ra

Mon, June 21, 2021

Hasty Treat - CSRF Explained

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 05:40 - What is it? https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute Someone can submit a form FROM or TO your domain, automatically. 07:50 - Solutions SameSite Cookie https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6 Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link. Strict — As the name suggests, this is the option in which the Sa

Wed, June 16, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at  revenuecat.com . Guests Miriam Suzanne Show Notes 02:21 - When did you come on board with container queries? 10:27 - How would you declare specificity? Layer example: @layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } } 13:08 - What is your background? 18:20 - What are container queries? <p class="has-line-data" data-line-start

Mon, June 14, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:28 - What is it? Total platform for building  Svelte apps Built in  Vite.js Includes all of the Vite goodness but it hides behind the scenes for the most part Host anywhere 05:16 - Is it CSR, SSR, SSG, WTF?! All of the above. Uses adapters to control the output: kit: { // hydrate the element in src/app.html target: '#svelte', adapter: adapter() } 09:45 - What you get out of the box File-based routing API routes Layouts and layout resets Fancy file titles [slug] __layout Code splitting & preloading PostCSS TypeScript  support <p class="has-line-data

Wed, June 09, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Coudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes? 06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding? 12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file? 21:41 - I am new to using CMSs and I was wonder

Mon, June 07, 2021

Hasty Treat - Making a Vaccine Bot with JavaScript

In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 07:32 - First step Finding the data. Open up dev tools. Copy as Node.js Fetch in Chrome Two ways to do this - Puppeteer, or raw requests, or a mix. 11:03 - Variablizing it Store IDs Booking form IDs Vaccine IDs 12:56 - Finding out any restrictions Is there a cookie? Is there an XSRF? Do these things change? How often can you hit it? 15:20 - Caching Array variable 16:59 - Delivering the notifications <li class="has-l

Wed, June 02, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 04:55 - Components Strategies Example: type Props = { value: string; } const App = (props: Props) => Return type? JSX.Element FC or FunctionComponent It’s discouraged for this reas

Mon, May 31, 2021

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 - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at  deque.com/syntax . No credit card needed. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 06:37 - Community supported Sell licenses Premium plugin Single payment $x per year Sell training Online In-person Sell support Donation-supported Patreon  (usually has bonus content) Tips Open Collective Sell merch Teespring 16:00 - Corporation supported Display ads Sponsored segments Corporate sponsors <li class="has-line-data" data-line-start="36" d

Wed, May 26, 2021

Bike Shedding — Developer Opinions Explained

In this episode of Syntax, Scott and Wes bike shed some common developer opinions. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 04:27 - Event params e, evt, ev, or event? 06:36 - CSS variables —red or —primary? 09:31 - CSS colors https://twitter.com/rem/status/1386694431710007298 RGB, HSL, HEX? 11:52 - Default exports vs named exports 14:45 - JavaScript import ordering 17:09 - Foo / Bar / Baz in examples 21:18 - Light vs dark themes 24:00 - longVerbo

Mon, May 24, 2021

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 - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 04:45 - What is it? Drag and drop is really for desktop apps You can drag and drop anything from any browser to any browser The important thing here is that this is a set of browser standards that allow different apps to communicate 07:50 - How to implement Make an element draggable Listen on elements for drag events The events bubble up, so you can listen on the parent element as items are added/removed 09:06 - DataTransfer API You can store anything you want in it getData / setData API Reference strings <p class="has-line-data" data-line-start="31" data-line-en

Wed, May 19, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:34 - What is semantic HTML? What is the content? HTML should describe the content first and foremost. 04:04 - Why semantic HTML? Accessibility SEO Styling is easier HTML tags that have meaning: Almost all of them Common ones: / and to 20:04 - Structural / Layout tags You can have more than one header Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know / and strike? / / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. and While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range). 32:12 - Visual vs Semantic tags Almost all tags in HTML are semantic vs and vs and are NO

Mon, May 17, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes Can it be styled? Solutions 04:28 - Just style the defaults Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style. This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs. Select Input - number, date, etc. Very hard to style Often need appearance: none; for mobile Checkbox / Radio Generally speaking, these CSS Properties can be applied to all inputs: font-size color padding margin background / images outline (remember focus) <li class="has-line-data" data-line-start="32" dat

Wed, May 12, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at  vonage.dev/syntax . Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”? How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience? 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work. 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different

Mon, May 10, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 03:17 - What is technical debt Outdated or hard to update code If you groan when you have to work on it, it might be a sign of technical debt Brittle code, easily breakable Quirks and features 06:55 - Why does it occur Over time, any garden left un-pruned will become overgrown Many people, many code styles Using hot new frameworks / techniques This is why seasoned developers don’t jump on new things You allow users to do literally anything 13:18 - Techniques for avoiding it Deny your FOMO of new things Abstract <li class="has-lin

Wed, May 05, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in  markdown , host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website. 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your  VS Code  windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the l

Mon, May 03, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 05:20 - Astro What it is: astro.build  is a next gen “meta” framework that eases some of React’s pain but also is not just React. https://twitter.com/georges_gomes/status/1380801812656226304 Why we’re excited about it: Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data. Scoped CSS by default (a la Svelte). Sass out of the box. Collections import for .md files // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- Blog Posts {blogPosts.map((post) => ( )} 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. <p class="h

Wed, April 28, 2021

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 - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at  deque.com/syntax . No credit card needed. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes Deep end stuff 03:30 - any vs unknown 06:20 - never https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts Definition files Usually for existing libraries that don’t have types Can be generated or hand-written Also really handy for pure JS projects, you still get good autocomplete because of these 13:25 - Type generation Can be generated from GraphQL, or Schemas, or from JSON Output 17:20 - TypeScript

Mon, April 26, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 05:12 - Why and when to rebase? git rebase -i is interactive Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits. Common uses: Squash all commits into one or multiple commits Reword commits These lines can be re-ordered — they are executed from top to bottom. p, pick = use commit r, reword = use commit, but edit the commit message e, edit = use commit, but stop for amending s, squash = use commit, but meld into previous commit f, fixup = like “squash”, but discard this commit’s log message x, exec = run command (the rest of the line) using shell <

Wed, April 21, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at  deque.com/syntax . No credit card needed. Show Notes 01:58 - T-Shirts 101 T-Shirts are cool I sold 100 right away to get the kinks out Then I did pre-order The stack TypeScript React Next.js 09:08 - Selling: Front-end Snipcart It’s a button <li class="has-line-data" data-line-st

Mon, April 19, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 07:22 - Why? Container queries are media queries for components (e.g. they are based on the element’s size, not the browser). This is in line with how we write components. It will change the way we write CSS. 08:49 - The Syntax Containers need to be defined as containers via containment context .container { contain: size layout; } New contain value: .inline-container { contain: inline-size; } This is the same as the logical properties. Assuming you read LTR, or RTL: size - width and height inline-size = width block-size = height /* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } } 18:49 - How to try them today Download and/or update Chrome Canary Go to chrome://flags <li class="has-line-data" data-line-start="55" d

Wed, April 14, 2021

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 - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at  vonage.dev/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 3:50 - Network See all requests, filter by type or name Used to understand all requests coming or going Turn off caching View timing See the true GZIP size Slow down network speed See time for page load Copy as fetch or CURL View request, response, and headers See CORS issues See which

Mon, April 12, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Show Notes 04:22 - What is it? https://drafts.csswg.org/css-nesting-1/#nest-prefixed https://twitter.com/argyleink/status/1371874777548267520 06:02 - Why nest? Easier to read Easier to write Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up. 08:13 - When to use nesting Nesting is often overused Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it) .container .item {} .container .item a {} Use it for scoping <p class="has-line-data" data-line-start="32"

Wed, April 07, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting  Sentry.io  and using the coupon code TASTYTREAT during sign up. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at  vonage.dev/syntax . Show Notes 02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it? 06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts. 15:22 - I’m trying to teach myself web development and I’m having problems making

Mon, April 05, 2021

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 04:05 - Easy Snippet https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet 05:33 - Add Missing Function Declaration https://twitter.com/wesbos/status/1369393437062074377 07:30 - Error Lens https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 09:08 - Declare Missing Members https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension 10:29 - ES7 React/Redux/GraphQL/React-Native Snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets <p class="has-line-data" data-line

Wed, March 31, 2021

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Guests Matt Holt Show Notes 02:08 - Who are you and what do you do? 03:22 - Why would you want to build a web server? 08:45 - How do SSL certs work? 14:03 - Why do you even need a web server? 23:03 - Is it better to have a web server serve your images? 20:31 - What is load balancing and why might you need it? 31:35 - Is server administration a lost art? 38:03 - What is a sidecar proxy? 38:50 - How do chron jobs work? 39:50 - Why is GO so fast? Why is it good? 46:32 - Should every website have an SSL certificate? Links <li class="has-line-data" data-line-start="45" data-

Mon, March 29, 2021

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 - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link:  hasura.info . We’ve also got an amazing selection of GraphQL tutorials at  hasura.io/learn . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 05:00 - What is the n+1 problem? The N+1 problem can happen in any language but is especially prevalent in  GraphQL  because it’s so easy to query relationships. 09:33 - The solution The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids. 11:11 - Should you care? Sometimes no: its often fine to do multiple DB Calls Facebook DataLoader Mercurious Many ORMs take care of this for you <li class="has-line-data" data-line-start="27" data-line

Wed, March 24, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 04:50 -  https://shaquilhansford.com/ Not optimized for desktop Lots of spacing issues overall Too many accordions - could be lists in multiple columns Social links could be in the footer Twitter is on point -  iwantyoutohire.me Phone number on website is good <p class

Mon, March 22, 2021

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 - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:38 - What is it? https://graphql-code-generator.com/ Code generation for GraphQL APIs 04:34 - What can it do? Generate React hooks for any of the major player Apollo client ( urql ) Types for the full stack — resolvers, mutations 07:49 - How we use it Generate a schema file to keep client and server in sync in mono repo Creates all React Hooks Generates all types for both resolvers, and anything client-side Links React Query Apollo Typescript <li class="has

Wed, March 17, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link:  hasura.info . We’ve also got an amazing selection of GraphQL tutorials at  hasura.io/learn . Show Notes 01:51 - Overview Level Up  uses a  JWT & secure cookie-based authentication and tracks sessions via a db table. Accounts.js 05:13 -  JWT Base 64 encoded (not encrypted) token that contains data. We have both accessTokens and refreshTokens. JWT has three parts: Header What kind of algo was used Payload Data about the user <li c

Mon, March 15, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:54 - What are they? API Keys Secrets Database URLs NODE_ENV 06:16 - Type of env variables Plain text Encrypted Frontend Backend .env files .env is a good package for all langs .env.local Framework env variables System env variables Host-provided variables 16:20 - Where should yo

Wed, March 10, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at  vonage.dev/syntax . Show Notes 02:10 - Sometimes in  VSCode  when intellisense tells us the  TypeScript  type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file? 04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects? 10:35 - How do you feel about  Vercel  vs.  Netlify ? Pros/cons? Thanks! <p class="has-line-data" data-line-start="2

Mon, March 08, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed? 05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast? 09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects? 10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses) 12:48 - Could you all talk about protected/private routes in  Next.js ? I’m coming from  create react app  type routing. 16:07 - What would be doing for a living if not a developer? 17:50 - What do you think about  Clubhouse ? Are you guys planning to talk over there some time? 24:18 -  Vue  or  React ? Which do you think will be the top? And should developers learn both? Links <a href= "https://twitter.com/

Wed, March 03, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link:  hasura.info . We’ve also got an amazing selection of GraphQL tutorials at  hasura.io/learn . Show Notes 03:36 - Desk Scott Ikea countertop on  Jarvis Legs . Four presets - sit, stand, horse stance, lunge Wes 8" Ikea Butcher Block countertop on legs LackRack  on wheels underneath Desk at cottage is Maple Live Edge Slab on Hairpin Legs 09:01 - Chair Scott <a href= "

Mon, March 01, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:17 - Code in general Clean, commented, organized Take the extra hour before an application and polish it 06:10 - JS Basics of the language - storing data in Arrays and Objects Looping and flow control Array methods Promises + async await DOM basics - select an element, listen for clicks, update elements Node basics Most of your JS basics apply here Read Files, write files Fetch data and return it 08:38 - CSS Attention to detail - pixel-perfect replication of designs Works well on mobile <li clas

Wed, February 24, 2021

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 - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at  deque.com/axe . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Guests Tanner Linsley Show Notes 01:56 - What do you do? nozzle.io React Query 06:04 - What is React Query? 24:19 - How does React Query use dev tools? 31:20 - What about React Context? 36:59 - Serve

Mon, February 22, 2021

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 - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at  deque.com/axe . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:55 - What Is Cypress? A visual testing studio that uses a jQuery-like syntax to test your application in browser. Very modern testing solution. 07:36 - Used to be only Chrome Now available for Safari, Firefox, Edge, etc. ??? - What frameworks is it for? Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results. Can also run on ci/cd via a headless mode. React component testing is experimental. 10:58 - Automation Cypress studio new feature that writes tests for you. 12:37 - Data Intercept + Fixtures or through plugins 15:01 - Cost? It’s free! There is a paid product called Cypress Dashboard that allows y

Wed, February 17, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Cloudinary - Sponsor Cloudinary  is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected. 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions? 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First,

Mon, February 15, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:38 - What is a TypeScript compiler? Do we still need  Babel  /  WebPack ? 07:49 -  Babel Transpiler It doesn’t do typechecking New JS features that aren’t in TypeScript yet 10:22 -  SWC Rust based compiler Doesn’t do type checking (yet) https://github.com/swc-project/swc/issues/571 13:03 -  Deno Uses tsc right now Might move to Rust <li class="ha

Wed, February 10, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit  linode.com/syntax  and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:32 - Why does an impression matter? All of this stuff comes together to work in your favour when you are hunting for a job. 05:14 - What goes into an online presence? Twitter Share what you know <li class="has-l

Mon, February 08, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:04 - The Events http://keycode.info/ keydown beforeInput Keypress - deprecated inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc. keyup change event - only fires when you focus out https://github.com/w3c/uievents/issues/220 08:02 - Event meta data "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale .repeat 16:46 - Media keys https://developers.google.com/web/updates/2019/02/chrome-73-media-updates</

Wed, February 03, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes What is TypeScript? 03:12 - Types? What are types and why should you care? JS is a typed language, it’s just not strongly typed JS does not care about reassignment of a variable to a new type Does not care about your types, but they do exist 06:34 - The Fundamentals You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like. Create a variable: Will it be a string? A number? A custom type of show? Create a function: What params does it take? What type are they? What does it return? </li

Mon, February 01, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 02:55 - Previous iterations Originally on  Drupal 7 Full re-write to  Meteor  +  Blaze Two sites —  store.leveluptutorials.com  and  leveluptutorials.com Meteor  +  React Meteor  +  Apollo Combine store and site Move to  TypeScript NOW 05:30 - Big choices No  Babel  up and down the stack

Wed, January 27, 2021

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 - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at  deque.com/axe . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit  mux.com/syntax . Show Notes 02:13 - What is it? A secure runtime for JavaScript and TypeScript Built by  Ryan Dhal  — same guy who initially built Node.js API is JS or TS out of the box 04:55 - Does it replace / what is it in relation to? Node It’s a replacement for Node.js Express <li class="has-line-data" data-line-start="

Mon, January 25, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:10 - What is AVIF? AVIF is derived from the keyframes of an AV1 video Royalty free (big deal) What about  WebP ? Basically half the file size of a WebP for free, which was already about half the size of a jpeg It’s a lossy format — ie it inherently will degrade the image https://jakearchibald.com/2020/avif-has-landed/ No animation 10:53 - How to implement Cloudinary  is in beta, but you can try it Gatsby  supports it https://squoosh.app/ Imagemin <

Wed, January 20, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more. 04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enou

Mon, January 18, 2021

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 - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 05:00 - How do you define type at the start of a new project? 15:03 - How do media queries and screen sizes affect your system? 16:58 - Why are systems in type important? 20:21 - How do you design a type system? Scott’s type system: /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links <a href="https://type-

Wed, January 13, 2021

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 - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Magic Bell - Sponsor MagicBell, the embeddable notification inbox -  magicbell.io . Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 04:17 - All I Want for Christmas  in React  is: Suspense for data fetching On mount animations Unmount for me Single file components preventDefault shortcut Input to state mapping 09:45 - JS or Nay-s (or Both) Shout out to  Pigeonhole Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python? Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large

Mon, January 11, 2021

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 - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:35 - Undefined Implicitly nothing A variable declared, but not set is undefined 04:25 - Null Explicitly nothing 04:41 - Null vs Undefined Null has a value of nothing Undefined does not have a value You can set variables to either If you want to set a score variable to nothing, set it to null If you want to un-set a value, set it to undefined == will check if a value is either null or undefined 05:35 - Void In Javascript You can pop void in front of calling a function and it will return undefined (even if that function returns a value) I’ve seen it on links that go nowhere (don’t do this — use a button

Wed, January 06, 2021

2021 Predictions

In this episode of Syntax, Scott and Wes talk about their predictions for 2021! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at  linode.com/syntax . Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax  and click on the “Create Free Account” button to get started. Show Notes 02:06 - ESM Scott: It’s going to be big Snowpack Wes: Everything going forward should be ESM 05:44 - Wes: Remote work will grow Whole new talent pool opens up Whole new living situations open up <p class="has-line-data" d

Mon, January 04, 2021

Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

In this Hasty Treat, Scott and Wes talk about keyboard shortcuts, window management, and how to stay productive. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:54 -  Karabiner-Elements 06:11 -  Better Touch Tool 13:55 -  ScreenFlow 17:52 -  VS Code Shortcuts 21:20 -  Text Expander 23:00 -  Clipy Links Davinci Resolve Divvy Uberlayer Elgato Stream Deck iShowU Roc

Wed, December 30, 2020

2020 In Review

In this episode of Syntax, Scott and Wes talk about 2020 in review — predictions, hits and misses, hot tech, what they worked on, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:43 - Predictions from 2020 CSS Subgrid CSS Houdini CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot’s of mobile issues. position:sticky - no IE at all NPM tink Installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need Yarn PnP  /  Yarn 2 Hard links to eliminate package duplication Shared cache across all projects Pika  &  Snowpack Deno <li class="has-line-data" data-line

Mon, December 28, 2020

Hasty Treat - Hosting + Web Services Pricing Explainer

In this Hasty Treat, Scott and Wes talk about how hosting and web services pricing works, and how to figure out what you need, and what you don’t. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 01:55 - Per minute Spin up, do the work, spin down Popular in serverless space Can apply to other types of computing such as graphics, AI, machine learning, etc. 03:49 - By resources Ram CPU Disk space 06:02 - Per “dyno” These are Heroku Linux servers You can add more dynos and make your app faster They scale it for you 08:54 - By bandwidth Sitting files Inbound (ingress) Output 12:24 - By DB calls or entries Databases 14:04 - By users This is more of a Sass thing, but can bleed into hosting too Seat-based - Netlify does something like this 17:23 - By apps Digital Ocean app platform <li clas

Wed, December 23, 2020

Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 00:47 - Roch Tolinski — You guys are doing a downtown job!!! 02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition? 10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro? 13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute. 19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains. 24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to

Mon, December 21, 2020

Hasty Treat - How Would We Script a PS5 Buying Bot?

In this Hasty Treat, Scott and Wes talk about the PS5 bot debacle, and how they would do it differently! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:12 - Scott’s strategy Go to Reddit and refresh until someone posts a link and then GO GO GO Don’t buy on sites that allow simple bots to work TBH I don’t know how to code this type of bot and would prob end up accidentally buying a ton of stuff 05:06 - Wes’ strategy https://mcbroken.com/ You need a way to find out of there is stock Find out of there is an API endpoint you can hit (inspect element) If there is not, you’ll need to scrape the site. Fetch(url). text() Regex Cheerio Puppeteer  (slower, easier to run) Save any data that you want in a database. Text-based database is great. Lowdb SQLite DynamoDB  (if doing serverless) Re-run the scrape every N mins When there IS a match yo

Wed, December 16, 2020

Serverless, Deno and TypeScript with Brian Leroux

In this episode of Syntax, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Guests Brian Leroux Show Notes 02:17 - What’s your background? 06:18 - What is serverless? Why is serverless so awesome? 14:07 - What changes from moving from an existing app to a new app? 16:15 - What is a cold start? 17:46 - What languages are suitable for serverless? 19:14 - What do you think about Deno? 24:23 - How does Architect work? 31:14 - What do you think about Typescript? 40:35 - Do you think websites should work without JavaScript? 44:51 - What about sharing code? Links Begin Architect <a href="https://www.youtube.com/watch?v=

Mon, December 14, 2020

Hasty Treat - 300th Episode Tech Chat

In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:15 - The things we tried Zoom Breakout rooms Hopin - $$$ Streamyard 04:24 - What we used Discord Room as a waiting room Roles to give access An a/v room where Wes and Scott were hanging Lots of questions about Slack vs Discord OBS ObS to stream to three locations ObS Streamlabs does this easily Screen capture did a better job than using the video source from Discord Youtube, Youtube, and MUX Streamlabs can stream to 4 sources at once MUX How we got  Syntax.fm/live  to work Create a new live stream on Mux via their UI Get stream address and key Point Streamlabs to it HLS m3u8 address from Mux into a HLS react player <li class="has-line-data" data-line-start="36" data-line-end="4

Wed, December 09, 2020

Gatsby vs Next.js in 2021

In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true? Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:34 - Server-rendered Both do server rendered Gatsby is gone at build time Next is done at build and on deploy 05:26 - Static generation getStaticProps() getServerSideProps() 08:25 - Re-rendering pages Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed. Gatsby-cloud Next.js has the revalidate flag that will re-render when stale 18:54 - Data management Gatsby has a built in GraphQL API feature with Next.js has nothing - it’s not their problem. Use Apollo, or SWR

Mon, December 07, 2020

Hasty Treat - Why should I use React Hooks?

In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:54 - Decouple the UI from the logic This wasn’t impossible with class-based components, but we started using HOC to do this. With hooks, it makes you decouple what it does and how it looks. Makes things like GraphQL code gen possible Multiple pieces of state or functionality Share commonly used functionality among projects and components 10:31 - Reduction in code Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.” 13:30 - useEffect’s dependencies These give you access to targeted control over side effects rather than just something changed. 14:15 - Easier to grok What happens? When? Where? It’s mostly in the hook. 16:09 - Simplicity in usage Thing, updateThing is more targeted than set state Ref makes way more sense with useRef String refs weren’t gr

Wed, December 02, 2020

Sickpickisode - 2020 Web Developer Gift Guide

It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:17 - Home + Cooking Cold Brew Maker 1 Gal -  https://amzn.to/3pcKkKM 2 Quart -  https://amzn.to/3eIV921 Nordic Ware Half Sheet / Quarter Sheet Pans -  https://amzn.to/3pbCWit Precut parchment -  https://amzn.to/35dtWld Gaffers Tape -  https://amzn.to/3lfH7aG Tineco Pure S12 -  https://amzn.to/3kelPsX Instant Read Thermometer -  https://amzn.to/3k9VNHf Tea Haus -  https://teahaus.com/ Whetstone -  https://amzn.to/32nYi2z Re-usable Silicone Mats -  https://amzn.to/35dtWld Air Fryer -  https://amzn.to/38uX4X1 13:27 - Games <li class="has-line-data" data-line

Mon, November 30, 2020

Hasty Treat - Writing Good Commit Messages

In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:46 - What are conventional commits? https://www.conventionalcommits.org/en/v1.0.0/ 04:55 - How do you keep track of all the details? https://commitizen-tools.github.io/commitizen/ https://github.com/commitizen/cz-cli https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits 07:42 - How does it relate to SemVer? Links https://github.com/conventional-changelog/conventional-changelog https://github.com/netflix/unleash Deno Tweet us your tasty treats! <a href="https://www.i

Wed, November 25, 2020

Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow. 03:20 - Which JS library/framework do you think beginners might find the easiest to understand? 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere? 09:23 - My question is about the difference between a framework and a library. Should we have two separate words? 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas. 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a co

Tue, November 24, 2020

Hasty Treat - Client vs Server Data Validation

In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 02:49 - Wes’ story 06:28 - What is the role of client-side validation? Help the user input the correct data as they type it. Show correct data in UI. Show correct UI. Just about all of these things are for the user’s benefit, and how they feel when using the site. 11:10 - What is the role of server-side validation? Validate that all the data is correct before it’s saved to the database Security first and foremost 15:03 - What process should a store follow to validate on the server? Check that correct types are coming in. Very easy with Graphql. Get current stock and price information from unique ids from the database. Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user. 17:17 - What do you do if you don’t want people messing with your React state? @fvilers/disable-react-devtools if (process.env.NODE_ENV === 'production') disableReactDevTools() We do this on LUT. Why? Because it’s a deterrent. Links <

Wed, November 18, 2020

How to Run a Conference with Benjamin Dunphy

In this episode of Syntax, Scott and Wes talk with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Guests Benjamin Dunphy Show Notes 03:48 - How do you get started running a conference? 10:05 - Which conferences have you run? 18:05 - How do you get speakers? 23:21 - What about paying speakers? 28:26 - Speaker goody bags? 32:40 - You started your own catering company? 35:32 - How has Coronavirus affected the conference space? 43:06 - Should online conferences try to replicate live conferences? Links Reactathon Jamstackconf Epicodus Meetup Flutter <a href="https://

Mon, November 16, 2020

Hasty Treat - CSS Grid Masonry (Grid Level 3)

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 04:33 - The spec https://drafts.csswg.org/css-grid-3/ https://twitter.com/wesbos/status/1320735900343668738 06:10 - How it works masonry-auto-flow: next; It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry. 09:06 - The implicit grid https://drafts.csswg.org/css-grid-3/#%23implicit-grid The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis. Interesting in a column situation (see images). 13:25 - Thoughts Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS. Links <li class="has-line-data" data-line-start="33

Wed, November 11, 2020

300th LIVE SHOW SPECTACULAR!

It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 03:30 - How is this going to work? Ask a Potluck Question Do a Sick Pick Take on a Stump’d Question Do a Shameless Plug 04:45 - Brad https://bradgarropy.com/ Sick Pick:  Rogue Fitness Weighted Vests Shameless Plug:  Murphy 11:54 - Brittany Shameless Plug:  ZTM Academy Andrei Neagoie 16:43 - Jesse Stump’d Question: What are portals in React? <li class="has-line-data" data-lin

Mon, November 09, 2020

Hasty Treat - Bundlers in 2020

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:39 - What is a bundler? On the one hand, you can write HTML, CSS and JavaScript and open it in the browser On the other hand, your build could be super complex 03:24 - What goes into configuring a bundler? Templating language you use (Jsx, Pug, Vue, etc.) JavaScript you write and compile to: ES6/7/8/9 Typescript CoffeeScript Polyfills Environmental variables CSS loading Image compression Asset Chunking Tree shaking 05:12 -  Webpack Hardest to learn, most used currently 07:38 -  Rollup Scott’s pick as best option for most features vs ease of use Very powerful Mmmr, tree shaking, plugins, esm 09:52 - <a hre

Wed, November 04, 2020

Voice Coding is Really Good with Josh Comeau

In this episode of Syntax, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Guests Josh Comeau Show Notes 01:48 - What is your background? 04:33 - Coding with your voice 08:32 - How do you code for a living if you can only do it for a few minutes a day? 21:56 - How has it impacted your productivity? 22:46 - Is it easier with a typed language like Typescript? 26:05 - What about accessibility? 27:14 - How good is the eye tracker? 29:30 - What got you into animation? 35:29 - Favorite app for animations? 40:12 - Being a teacher 41:44 - Is it worth going to a bootcamp? 44:57 - Interactivity in teaching Links <li class="has-line-data

Mon, November 02, 2020

Hasty Treat - Certifications? Government Specified JavaScript Skills?

In this Hasty Treat, Scott and Wes talk about web dev certifications — are they worth it, or a waste of time? Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 02:12 - Certifications 05:30 - We have standards, and people move faster than standards. jQuery moved faster than vanilla JS Typescript is sometimes preferred over regular JS We have universities that offer web developer certs and many of them are a joke The point is that programming is the wild west — it’s far too broad and moves far too fast for us to try and fit it in a box 10:28 - Do certifications mean anything? 14:30 - How do you know if you have enough skills (when you’re job hunting)? 19:04 - Some jobs do require a certification AWS Google Links https://openjsf.org/certification/ https://www.sentiatechblog.com/imposter-syndrome-how-to-display-front-end https://twitter.com/wesbos/status/1318192217824124928

Wed, October 28, 2020

Spooky Web Dev Stories — Part 2

In this episode of Syntax, Scott and Wes are back for another episode of spooky web dev stories — listener-submitted stories about web dev gone wrong. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 03:28 - Jack Rhysider Story 06:28 - Dirty Dicks JSON 08:23 - CMS Disaster 10:58 - Oh No Hotel 11:19 - FTP 12:19 - Push Notification Hell 13:16 - DVD Nightmare 15:15 - Bad Words Again 16:23 - Mo Money 17:01 - Bass Ackwards 18:17 - Taxi Coding 19:36 - Bad Env 21:30 - Login As 21:50 - Email Subscribers Plugin 22:33 - 1 in 300 Chance of the C-Word 24:24 - Production Target 26:12 - A Happy SEO Ending 28:26 - Just Oof 29:48 - I’ve Fallen and I Can’t Get Up 30:54 - Crypto <p class="has-line-data" d

Mon, October 26, 2020

Hasty Treat - Temporal Date Objects in JavaScript

In this Hasty Treat, Scott and Wes talk about Temporal Date Objects in JavaScript — a WICKED AWESOME API for working with times and dates. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 05:11 - Temporal Now You can get now Temporal.now.___ 07:58 - Temporal Instants A Temporal.Instant represents a fixed point in time, without regard to calendar or location. Most common way to show it is nanoseconds since unix epoch. Can be formatted a few different ways. 09:59 - Calendar Support for different types of calendars 11:43 - Durations Temporal.Duration There are .from and .add and subtract() methods 12:47 - Other interesting parts Timezones Temporal.ZonedDateTime Temporal.YearMonth - represents a ym = new Temporal.YearMonth(2019, 6) // => 2019-06 14:51 - Polyfill (unstable) Links <a href= "https://maggiepint.com/2017/04/09/fixing-javascript-date-getting-start

Wed, October 21, 2020

Spooky Web Dev Stories — Part 1

In this episode of Syntax, Scott and Wes talk about spooky web dev stories — listener-submitted stories about web dev gone wrong. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:12 - The Most Expensive Boolean Ever 06:19 - An Actual Logging Issue 09:37 - Snitches Get Stitches 10:41 - The Spooky Office Skeleton 12:04 - Prevent the Default of Making Money 13:52 - Computer Magic Trick 14:42 - Update Score 15:59 - Change Reaction 19:30 - Personal Mongodb 20:26 - Hello Rob! 22:08 - SSN Regex 23:06 - WordPress Plugins 23:52 - Loggin Ya In, Ya F’in Dummy 24:58 - A Hostel Coding Environment 25:59 - A Graceful Exit 27:27 - Favicon DDOS 28:07 - Common Cents <p class="has-line-data" data-

Mon, October 19, 2020

Hasty Treat - Stretching For Developers with Scott

In this Hasty Treat, Scott and Wes talk about stretching for developers — techniques, misconceptions, and how to feel better. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:21 - Devs do the following Head forward looking at screen Shoulders forward Sitting a lot Weak core Carpel tunnel from typing 06:02 - Stretching misconceptions Static holds Dynamic controlled movements first and foremost 07:52 - Stretches to help Dynamic twists Cat / Cow Flat down / Curl up spine Arm hang to decompress spine Wrist stretches and strengthening for carpel tunnel Horse stance at standing desk to be office weird person Shoulder circles Doorway stretches Tweet us your tasty treats! Scott’s Instagram <a href= "http

Wed, October 14, 2020

How to Make Freelancing Easier

In this episode of Syntax, Scott and Wes talk about how to make freelancing easier — how to avoid burnout, and tips and tricks to make it successful. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 02:15 - Code Use starters and resets and component libraries Don’t build in something you don’t know, unless you have time and budget to do so — WP is good enough for most projects Feel free to go over time on projects if you are learning something new Re-use code from project to project Target similar types of clients 13:09 - Communication Often, clear and frequent People won’t be mad for being too informed — just know when to leave out the technical jargon Clients typically don’t care about Git, React, etc. — they care about results Don’t overwhelm them Train your clients that you aren’t available 24/7 22:19 - Time management Set calen

Mon, October 12, 2020

Hasty Treat - Updating / Restarting Long-Running Web Apps

In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 01:54 - The problem This only affects the client-side 05:28 - What are some solutions: Do nothing and hope the user refreshes. Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available: Prompt the user to refresh Just refresh the user (store current state in localstorage and restore) Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link. Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user. Hot code push. Vuepress has “hot reloading” baked in. Links https://twitter.com/wesbos/status/1306969658751361024 Notion Vuepress <a href="https://www.

Wed, October 07, 2020

Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 01:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack? 03:48 - Why did you not mention  Stencil  when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it? Example of a stencil component: import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-first-component', }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() { return ( My name is {this.name} ); } } 06:12 - Is <a href= "http

Mon, October 05, 2020

Hasty Treat - Enums in JS (GraphQL and Typescript)

In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in JavaScript. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:11 - What are enums? A type restricting variables to one value from a predefined set of constants Direction = UP / DOWN / LEFT / RIGHT Role = ADMIN EDITOR AUTHOR VIEWER Day of the Week 05:12 - In GraphQL enum Role { ADMIN EDITOR AUTHOR VIEWER} Then 07:05 - In TypeScript First, declare the type: enum direction = { UP, DOWN, LEFT, RIGHT } Then when you defined your function, use that type type User { role: Role } or type User { role: [Role] } 08:49 - In JavaScript Not in JS yet There is a proposal in stage 1 https://github.com/rbuckton/proposal-enum And a babel plugin: https://www.npmjs.com/package/babel-plugin-const-enum Can use case/switch <li class="has-line-data" data-line-start=

Wed, September 30, 2020

Tales from Web Dev Past - Part 2

In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 03:00 - iFrames Sidebar menu target 05:42 - JavaScript image hovers Dreamweaver Photoshop  Slice and Select Tool 08:24 -  CSS Pie 09:42 - Animated gifs of people and construction http://textfiles.com/underconstruction/ 11:20 - CSS Zoom 1 / IE CSS Hacks Forced IE 7 to redraw floats 13:42 - Layout trends 800x600 fixed websites 960gs G

Mon, September 28, 2020

Hasty Treat - Records and Tuples in JavaScript

In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes ??? - 02:42 - Immutability 05:08 - Records Immutable object Syntax #{x: 1, y: 2} 05:56 - Tuples Immutable array Syntax #[1,2,3,4] 07:18 - For both Referred to as a compound primitive Can contain only primitives, not objects They are compared deeply by their contents rather than their identity assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 }); Potential for optimizations Optimizations for making deep equality checks fast Optimizations for manipulating data structures Works well with type systems Better integration with the debugger <li class="has-line-data" data-line-start="42"

Wed, September 23, 2020

Git Fundamentals

In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, best practices, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - What is Git? 04:16 - Why do you need it? 06:31 - UI vs command line 09:03 - Commands 101 https://git-scm.com/ init .gitignore file is key right off the bat add add -p - quick review of all the changes you’ve made commit Multiple adds and commits Commit messages should be descriptive push What are origins? pull clone checkout merge fetch<

Mon, September 21, 2020

Hasty Treat - Our First Bucks Made From Web Dev, Teaching, YouTube and Tutorials

In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes Wes: First money: check for $300 First website: Pool company First ad sense income: Craigonomics First YouTube: import large SQL database with bigdump First online Product: Sublime Text - Ryan Christiani First in-person teaching: HackerYou First project at agency: Jet Cooper Scott: First dev gig: parents tea store First design gig: Perpetual First YouTube video:  Adobe Premier 101 First BIG YouTube video: Sass Tutorials First ad sense income:  scotttolinski.com  blog post about music promotion sites First online product: Sass Mastery First project at agency: Nu Step Links https://twitter.com/wesbos/status/1276500155789910016 <li class="has

Wed, September 16, 2020

Writing Good CSS

In this episode of Syntax, Scott and Wes talk about writing good CSS. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 02:11 - Frameworks Utility:  Tailwind , Taycons ,  Bulma Frameworks:  Foundation ,  Bootstrap Classless base starters:  https://github.com/dbohdan/classless-css HTML5 UP  / A template 13:37 - Preprocessors Sass Stylus Less Regular CSS Variables Color functions - not yet 19:42 - Tools PostCSS  is like Babel for CSS. Some good plugins: https://github.com/postcss/postcss#plugins </

Mon, September 14, 2020

Hasty Treat - Time Block Planning

In this Hasty Treat, Scott and Wes talk about time block planning — what it is and how it can help you increase your productivity! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 01:50 - What is time block planning 03:12 - How TBP has helped Scott stay focused 04:46 - How it helps family life 05:57 - How to plan your week 11:00 - How to deal with setbacks Links Cal Newport Todoist Deep Work Deep Questions Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter <li class="has-line-data" data-line-

Wed, September 09, 2020

Tales from Webdev Past - Cleafix × Floats × Cufon × Guestbooks × PNG Fix × More!

In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 04:28 - Float-based layouts Clearfix ☠️ Killed by Flexbox , and then  Grid 09:29 - Loading Screens: Two websites - one flash and one HTML Splash screen 11:22 - Hit counters 12:28 - Guestbooks 13:28 - Flash 3rd party player Media dragged its feet FOREVER ☠️ Killed by Steve Jobs 18:46 - Fonts The Golden Layout <li class="has-line-data" data-line-start="36" data-line-

Mon, September 07, 2020

Hasty Treat - Backyard Offices

In this Hasty Treat, Scott and Wes talk about home offices, backyard offices, costs, and pros and cons! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:40 - Structure options: Existing sheds Build your own likely not allowed Drop-in offices Rubbermaid shed 07:18 - Electrical 07:58 - Insulation 09:01 - Heating 11:30 - Cooling 16:01 - Interior 16:42 - WiFi 17:12 - Costs ~ $4k Electrical - $2k Flooring - $600 Paneling- $900 AC - $1000 Fan - $100 Links https://twitter.com/bradwestfall/status/1284299864210210817 https://bradfrost.com/blog/post/brad-frost-web-headquarters/ Technology Connections - Space Heater Nonsense <a href="https://www.youtube.com/

Wed, September 02, 2020

Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:15 - What are your guy’s thoughts on Mozzila’s layoffs and how it will affect developers? 08:42 - Right now I am a math teacher. I am married with 2 kids (3 and 1) so finding time to code is difficult. My current situation includes waking up at 4:30 am everyday just to get in some time before the kids wake up. Do either of you have any tips about finding a balance between raising kids, getting stuff done around the house, having a full time job and trying to teach yourself web development to transition into a different career? 13:23 - If you had to use a drag-n-drop framework using React, which one would you choose? 15:49 - E2E vs Visual Regression Testing? At which web-app development cycle to implement each? Best tools open source vs purchase? 20:36 - I teach a Highschool course in web development. For a group of students who have a solid knowledge of HTML/CSS and a decent understanding of JavaScript, would Svelte be a good framework for entering into component-based development for the first time? 22:33 - What’s a good Google Analytics alternative in 2020? I have a site on Netlify that the $9/mo seems a bit steep for, for what the site is, and flipping the domain through Cloudflare just for the analytics seems crazy; but is it worth it? Alternatives would be awe

Mon, August 31, 2020

Hasty Treat - End of Season Wrap Up

In this Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 01:32 - Plans for the Fall 06:59 - Fav Hasty Scott Ep 161: Hasty Treat - VSCode Extensions & Themes Ep 165: Hasty Treat - VSCode Treats Part 2 Ep 167: Hasty Treat - VSCode Love Part 3 Ep 277: Hasty Treat - 5 Things That Make Your Site Slow Wes Ep 211: Hasty Treat - Modules in Node 08:55 - Fav Tasty Scott Ep 236: Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout Ep 250: Scott Teaches Wes Svelte and Sapper Wes Ep 224: Serverless / Cloud Functions - Part 1 <li class="has

Wed, August 26, 2020

Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 02:18 - I’m curious to know what you guys think of  MDX . I’d love to learn more about pros and cons, if you guys had a chance to use it. 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind? 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions? 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why? 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you h

Mon, August 24, 2020

Hasty Treat - Stump’d

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 03:28 - What is the difference between HTML and React event handling? 05:55 - What are JavaScript data types? 07:00 - In which states can a Promise be? 07:48 - Discuss the differences between an HTML specification and a browser’s implementation thereof. 09:14 - What is a stateless component? 10:10 - What is a pure function? 10:51 - What is the output of the following code? const a = [1, 2, 3] const b = [1, 2, 3] const c = "1,2,3" console.log(a == c) console.log(a == b) 13:35 - What is memoization? 15:15 - How do you pass an argument to an event handler in React? 15:59 - What is HTML5 Web Storage? Explain localStorage and sessionStorage. Links 30 Seconds of Interviews Tweet us your tasty treats! Scott’s Instagram <a href= "https://www.instagram.com/LevelUpTutorials/

Wed, August 19, 2020

Potluck - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about React subscriptions, ES Modules in Node, how to cook a chicken thigh, being a good dad and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That’s why Stackbit is the best way to Jamstack.  stackbit.com . Show Notes 02:11 - What are “subscriptions” in React, or in programming in general? The React docs mention that setting up a subscription is an example of a side effect, but what exactly is a subscription, and how do you set one up? 05:43 - Using the latest node esm imports, is it possible to use aliases? Using the old require() syntax I used the npm package module-alias ( https://www.npmjs.com/package/module-alias ), but I cannot seem to find a solution for node v14 imports. In a deeply nested file, I find the import ‘…/…/…/some/folder’ syntax to be awful compared to require(’@/some/folder’). 09:20 - I’ve been a full-time developer for over 10 years and my company has a fairly flat hierarchy. I want to take on more responsibility (and salary) but my company doesn’t have anything like a “lead developer” position. Any ideas for how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I’m already doing it all. 12:59 - In Wes’ website episode, he mentioned using Gatsby Parallels for images. Why not git LFS? 17:25 - For Wes: Any Big Green Egg tips for beginners? I just ordered a kamado style grill and I’d appreciate any ta

Mon, August 17, 2020

Hasty Treat - Gatsby Tips

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:02 - React Helmet Make a re-usable SEO component that sets defaults. Spread children to override. 04:27 - When in doubt, stop the build and restart Gatsby clean Nuke node_modules + package-lock 05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser 06:44 - Run the build command locally to troubleshoot prod Dev mode isn’t SSG’d - people overlook this 08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser wrapPageElement and wrapRootElement 09:50 - Consider just adding the layout component manually to each page This will allow you to skip the layout if you need to have a page that isn’t typical 11:21 - Layout is not suitable for unmount animations Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components. 12:59 - use onCreatePage to pass context to the layout exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions; if (page.path.match(/thumbnail/)) { page.context.layout = 'thumbnail'; createPage(page); } }; 14:03 - You don’t have to query for ev

Wed, August 12, 2020

How does stuff get added to CSS? Adam Argyle answers!

In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Guests Adam Argyle Show Notes 01:48 - Who are you and what do you do? 04:13 - How does stuff get added to CSS? 06:44 - Github issue proposal or public document Shares use case Problem made succinct StrawMan solution JS demo 10:12 - Time Multiple proposals Comments Back and forth Bikeshedding 20:00 - Editor’s draft spec (Stage 1) CSS typed Examples Provided code logic Implementor interest Can go stale Explainer

Mon, August 10, 2020

Hasty Treat - How To Refine Your Process

In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 04:18 - Find slow process Getting through email Cleaning my desk 06:29 - Set clear goals (smart goals) Is my inbox less crazy? Don’t spend too much time Do a 30-day challenge 09:46 - Ask around What are people you know using and why Time-blocking Batching Eat that frog Links Streaks Matt Cutts — Try something new for 30 days 1Writer Notable Dropbox Notion Obsidian <li class="

Wed, August 05, 2020

React State Round Up

In this episode of Syntax, Scott and Wes talk about React State libraries, should you use them, pros, cons, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 01:24 -  Context Have we used? Scott: Yes Wes: Yes Pros Built into React As simple or complex as you want Cons Takes effort to optimize Takes effort to plan and organize aka can get out of hand quickly 08:49 -  Redux Have we used? Scott: Yes Wes: Yes Pros Huge user base <li class="has-line-data" data-line-start="36"

Mon, August 03, 2020

Hasty Treat - Upgrading Next.js Syntax Site

In this Hasty Treat, Scott and Wes talk about their experience upgrading  Syntax.fm  and some of the site’s big changes. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:26 - The old Syntax site Next.js Custom server for API - shows, Latest shows, sick picks On-demand page builds Custom routing 06:41 - The new Syntax site Next.js has solved those things now, no need for a custom server. API Routes On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose Custom routing is now done with [pages] Very fast to load Very fast to build Very fast to deploy It’s now a “dynamic static site” Zeit Now 1 to “Vercel” Huge thanks to  Tim Neutkens  and  Luis Alvarez  from Vercel for making it happen. 13:23 - Why not: Gatsby Entire site would need to be regenerated exactly at

Wed, July 29, 2020

Meteor's 2nd Life

In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Guests Filipe Névola @filipenevola Show Notes 01:20 - What is your background? 03:41 - What exactly is Meteor? 12:00 - What are the biggest misconceptions of modern meteor? 18:20 - What do you say to people who think Meteor is dead? 21:33 - How does data get from your Meteor into your React app? Example of getting data on client side import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => { const { user, isLoggedIn, page } = useTracker(() => { // The publication must also be secure const subscription = Meteor.subscribe('page', pageId) const page = Pages.findOne({ _id: pageId }) const user = Meteor.user() const userId = Meteor.userId() const isLoggingIn = Meteor.loggingIn() return { page, isLoading: !subscription.ready(), user, userId, isLoggingIn, isLoggedIn: !!userId } }, [pageId]) if (!isLoggedIn) {

Mon, July 27, 2020

Hasty Treat - Target=_blank security issue? What's the deal with noopener and noreferrer?

In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:35 - What’s the big deal? If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer” Retail Me Not uses it Valid use cases: Same domain change the page from a popup Cross domain changing page data Example:  https://mathiasbynens.github.io/rel-noopener/ 05:39 - Why doesn’t the browser just fix it? Safari did - You can use rel=“opener” to allow it Firefox did Chrome hasn’t yet https://twitter.com/HugoGiraudel/status/801475801397030912 10:48 - Does this hurt SEO? It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead. Links <a href="https://twitter.com/arg

Wed, July 22, 2020

Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”? 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips. 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output,  as described by Philip Walton , so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel). 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level? 18:01 - Why should you c

Mon, July 20, 2020

Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles

In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 02:50 - What is turbolinks? Generate HTML on the server Send it over the ajax request Load it in the page 03:55 - Who is using Turbolinks? GitHub Basecamp Hey.com 05:24 - Turbo Links javascript browser bundle Intercepts any link click Fetches the page HTML 09:19 - JS Sprinkles Vanilla JS jQuery Stimulus Alpine JS Links Turbolinks Syntax 254: Headless CMS Break Down & Roundup pjax <li class="has-line-data" data-line-start="38" data

Wed, July 15, 2020

Video for the Web 2020 and Beyond

In this episode of Syntax, Scott and Wes talk about the future of video for the web! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 08:19 - Scott’s Background in video Started editing in middle school Worked professionally as an editor and production assistant for magazine Created specialty flash video players Have been hosting video content since the start of my web career 09:12 - Terminology Transcoding - digital to digital conversion of one format to another Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server) 10:51 - Streaming vs Downloading Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing. 11:16 - Formats MP4 WebM DASH HLS (HTTP Live Streaming) m3u8 21:35 - Players <li class="has-line-data" data-

Mon, July 13, 2020

Hasty Treat - The Domain Name Game

In this Hasty Treat it’s another edition of the Top Level Domain Game! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:25 - How it works We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? +5 points What country, business, or type of business is it for? +5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$  https://www.101domain.com/ Is scott._ and wes._ available? -10 points for each 04:00 - .sd Scott: 5 + -5 + -126 + -10 + 10 = -126 05:46 - .ong Wes: 5 + -5 + -30 + 20 = -10 07:53 - .koeln Scott: 5 + -5 + -20 + 20 = -126 09:23 - .co.ke Wes: 10 + -15 + 0 = -15 11:00 - .tr Scott: 5 + -5 + 0 + 0 = -126 12:25 - .ist Wes: -5 + 5 + -10 + 0 = -25 13:57 - .xn—45q11c Scott: 5 + 5 + -295 + 10 = 20 = -401 16:40 - .reit

Wed, July 08, 2020

Jerome Hardaway + Vets Who Code

In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at  go.tech/syntax2020 . Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Guests Jerome Hardaway Show Notes 01:50 - Captain America of Tech 03:25 - Where do you work and what type of stuff do you work on? 08:03 - What was your introduction to programming? 15:46 - When did you start Vets Who Code? 24:13 - What is the stack behind Vets Who Code? 29:56 - How do you help prep vets to get jobs? 41:32 - How can you be an ally and amplify black voices in tech? 50:05 - Everybody against racism Links Vets Who Code Quicken Loans Eventbrite <a href="https://animate.st

Mon, July 06, 2020

Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:00 - So you made a form: Contact form Sales form Email signup for newsletter Bug report Sign up for an account Password reset 03:00 - Now someone is going to: Have a bot that submits it Maliciously write a bot that submits thousands 04:14 - So what can you do? 4:54 - Honey pot This is a field that is either hidden or you tell the user not to fill in Can goof up autofill Works in many cases 07:37 - IP Throttle Only allow each IP to do an action a certain number or times inside a window You may only try signing up once per 10 mins 09:48 Block known ASN 12:37 - Captcha Soft captcha: “What is 1 plus 1?” Annoying captcha: Type these letters Google captcha: Train

Wed, July 01, 2020

Our React Wish List

In this episode of Syntax, Scott and Wes talk about what they wish existed in React! DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes React 03:53 - Unmount delay for animation 06:20 - Suspense with SSR released (or not because I think they are shelving it) Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858 09:24 - File based components Like Svelte and Vue This would look like a file with a special scoped tag per page. 11:50 - Prevent Default shortcuts 13:00 - No more useIsoLayoutEffect useLayoutEffect on SSR should just work without a custom hook Simple data fetching strategy based on promises 15:52 - Recommended hooks E.g. "here is the best way to do things" Official list of best practice hooks 18:25 - A good form strategy Bind inputs to state directly without any change handlers Inputs and forms all around need more magic - it's painful 20:43 - Write once deploy everywhere Not likely ever E.g. automatic transformation into react-native (obviously not going to happen) 22:28 - Compile time directives https://github.com/bukharim96/directive-x 25:11 - Slots instead of children Allows for things like named slots more explicit than children JSX 26:44 - Removal of htmlFor, className and all other abominations of html 29:09 - Import Raact from React for JSX to work Soon will be fixed https://github.com/babel/babel/pull/11154 <a href= "https://www.npmjs.com/package/babel-plugin-react-require" target= "_blank" rel="noop

Mon, June 29, 2020

Hasty Treat - Rural and Mobile Internet Revisited

In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 05:04 - Satellite High latency Satellite congestion Oneweb Starlink 08:43 - WISP Can be different techs - LTE, LOS, Long range WiFi Local towers put up in town 900mhz, 5 + 2.5gz Pretty cowboy 12:09 - Cellular LTE Goes over the cell signal Can be super fast or slow depending on your reception Cell plans can be rate limited 12:52 - Routers WE826-T2 Rooter / Golden Orb / Wifix Based on Open WRT https://www.ofmodemsandmen.com/ Nighhawk M1 <a href= "https://www.amazon.com/Rep

Wed, June 24, 2020

Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:37 - Q: Why does React bill itself as a library instead of a framework? 03:14 - Q: Are y’all still using Firefox now that it has been six months? 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace! 09:34 - Q: Who would win in a thumb war, Wes or Scott? 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache. 14:53 - Q: Should I start a new project with jQuery or React? 17:21 - Q: I’m a young teen (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management? 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it? Links <a href="https://react

Mon, June 22, 2020

Hasty Treat - Some Neat CSS Functions That You Should Know About

In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:13 - attr() 04:14 - calc() 06:05 - :is() 07:20 - sin, cos, tan, acos, asin, sqrt, pow 08:52 - clamp() 12:13 - minmax() 14:24 - fit-content() 15:35 - filter blur() grayscale() sepia() opacity() contrast() url() Links https://twitter.com/wesbos/status/1256229763225657348/photo/1 Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram <li class="has-line-data" data-line-start="44" data-line-e

Wed, June 17, 2020

The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

In this episode of Syntax, Scott and Wes continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:17 - Typing Take an online typing test or skills -  https://www.keybr.com/ 07:02 - Bash / Terminal WSL What directory am I in? SSH How to copy / paste / remove files and folders z Nice prompt ( ZSH  or  fish ) Know how to get out of VIM/VI and how to use it for fast editing Know how to make an alias 13:19 - Text editors Command Palette Keyboard shortcuts (just look them up!) <li class="has-line

Mon, June 15, 2020

Hasty Treat - Scott Goes Linux with Pop OS

In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 01:38 - Why? 04:20 - What is System76? System76 Lemur Pro 08:53 - What is Pop OS? Pop OS 09:41 - How has Linux compared to Mac? Pop OS is a great distro with lots of features, but command line knowledge is still necessary 10:07 - I can still run: Alfred Figma VSCode DaVinci Resolve Zoom Brave Chrome Firefox 10:43 - I can’t run: ScreenFlow Logic <li class="has-line-data

Wed, June 10, 2020

WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

In this episode of Syntax, Scott and Wes talk with Ian Ramzy about  ZipCall.io — how he built it, why, and some of the surprising choices he made along the way. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com Guests Ian Ramzy Show Notes 02:08 - Who are you and what’s your background? 05:34 - Why did you build this? 13:55 - What is it built in? Express server Web sockets 16:10 - Why is there no tooling? GetUserMedia WebRTC Twilio STUN/TURN/ICE infrastructure https://www.twilio.com/docs/stun-turn/faq VideoChat.peerConnection = new RTCPeerConnection({ iceServers: token.iceServers, }); 24:31 - How does your server deal with an influx of users? 27:11

Mon, June 08, 2020

Hasty Treat - Slow Connections Part 2

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections. Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at  studywebdevelopment.com/freelaning . Use the coupon “SYNTAX” and get 25%. Show Notes 03:27 - Images Resize client-side when uploading Lazy load or progressive JPG Width + height so the content doesn’t shift with placeholders Compress your images - lossless and lossy Use SVG where possible 08:33 - Scripts + CSS assets Hasty Treat - 5 Things That Make Your Site Slow Hasty Treat - 5 More Things That Make Your Site Slow 08:51 - Video Variable-rate video is key 09:13 - Connections that go in-n-out a lot Save form state on page refresh Show UI when user goes offline window.addEventListener('offline', updateOnlineStatus); window.addEventListener('online', updateOnlineStatus); Retrying in _____ 10:27 - Service workers! Serves up local cache in

Wed, June 03, 2020

Headless CMS Break Down & Roundup

In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 02:38 - What and why A headless CMS doesn’t mean you have to use a static site generator A headless CMS has an API: REST GraphQL GROQ A headless CMS can pipe its content into: Static Site on build - like  Gatsby An app on run/refresh An existing website - widget What makes a CMS? Do you need a UI? What is the threshold? Is a hotdog a sandwich? Things to think about when choosing an API Auth - Rules + roles + levels How easy is it to create new data types? Is it code or UI? Can my mom use it?

Mon, June 01, 2020

Hasty Treat - Developing for Slow and Spotty Connections

In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:26 - Types of Slow connections Slow upload Slow download This could be that your kids are watching a show and your partner is on a zoom call High latency Intermittent 07:47 - Loading UI Show loading UI for everything, but after X seconds Page transitions on SPAs Form switches - enter country, get list of provinces/shipping/whatever 11:58 - Account for XHR failures Sometimes I’m in a loading state forever State machines will account for this 13:26 - “Still working” timeouts Some sort of timeout so the user can get feedback Links Sentry Sapper Backblaze <a id="Tweet_us_your_tasty_treats_

Wed, May 27, 2020

Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future? 16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog? 11:13 - Q: Do my students NEED to understand recursion to be effective JS devs? 15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web  https://github.com/cdr/code-server ). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser. 22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that? 26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure

Mon, May 25, 2020

Hasty Treat - Should You Support IE11?

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:21 - When was IE11 made? 03:48 - When is it deprecated? 04:44 - How to make the decision? Look at your analytics Look at your users Is a 2% drop in sales worth it? 09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone? Modern Flexbox CSS Grid CSS Variables 10:26 - Can you partially support it? Major features Progressive enhancement Gracefully degrade Polyfill 11:16 - What about testing? Links wesbos.com VirtualBox modern.ie <a href= "https://su

Wed, May 20, 2020

Scott Teaches Wes Svelte and Sapper

In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com Show Notes 03:14 - General premise Sapper compiles away, removing framework code from build Component & Props based Easy reactivity Built-in tools like animation Template-based 07:57 - Svelte 101 .svelte files Files can include , , and straight-up CSS Variables are used in templates via {var} - even works Import component and use just like React and Vue 10:49 - Stylin’ All styles are scoped by default global() to wrap around global declarations Language type sass to use sass 12:22 - Reactivity Baked in let count = 0 <li

Mon, May 18, 2020

Hasty Treat - Scott's New Personal Website

In this Hasty Treat, Scott and Wes talk about Scott’s new website! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 02:25 - Relaxed fit development Not concerned with it being perfect Will act as a loose digital garden, so it needs to be flexible Keep my talks and podcast appearances somewhere 04:40 - The stack Svelte / Sapper CSS variables Static generation with markdown No API Hosted on Netlify 08:15 - Why? I dropped that db life in 2015 and never looked back I’m a developer - markdown is good for me I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself. Full page animations. Orchestration. Fully SSG. Code is painless to add to — adding a blog post is as easy as creating a markdown file Links ScottTolinski.com Svelte <li class="has-line-data" data-line-start="39" d

Wed, May 13, 2020

What's New in Javascript

In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes ES2019 04:03 - Array.flatMap() 05:30 - Array.flat() 07:37 - Array.fromEntries() 09:50 - String.trimStart() and String.trimEnd() 11:23 - Function.toString() 11:57 - Object Key Order Integer keys in ascending order (and strings like “1” that parse as ints) String keys, in insertion order (ES2015 guarantees this and all browsers comply) Symbol names, in insertion order (ES2015 guarantees this and all browsers comply) ES2020 14:50 - Big int 18:09 - Nullish coalescing 20:57 - Optional Chaining 24:55 - promise.allSettled 25:33 - Dynamic import 27:14 - string.matchAll(regex) and string.replaceAll 29:30 - globalThis 30:44 - Module Namespace Exports 33:11 - Navigator.share() API 36:34 - Async Hooks 37:39 - Pipline Operator 39:59 - Top Level Await Links https://twitter.com/wesbos/status/1181584047144878080 https://twitter.com/wesbos/status/1238472679893671938 https://twitter.com/wesbos/status/1230515254687301635 Regex101 <li class="has-line-da

Mon, May 11, 2020

Hasty Treat - Wes' New Personal Website

In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 05:04 - The stack Gatsby Styled components React MDX 07:04 - The content Blog posts Twitter Hot Tips 09:54 - Styling Styled components Less 16:54 - MDX 17:45 - Serverless functions Links wesbos.com bos.af WordPress ACF Netlify Gatsby React MDX <li class="has-line-data" data-

Wed, May 06, 2020

Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne

In this episode of Syntax, Scott and Wes talk with Heather Payne about bootcamps — how to get the most out of them and what to look out for! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Guests Heather Payne Show Notes 07:52 - Bootcamps What do you teach in the bootcamp? How long is it? SHow do you validate and pick topics? What makes a good bootcamp student? Do bootcamps work? How do you get the most out of a bootcamp? 20:45 - Finding a job How do you prepare for an interview? What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp? Do you see any common traits in the few that don’t get jobs? What about getting a job in the current climate? <p class="has-line-data" data-line-start="

Mon, May 04, 2020

Hasty Treat - Things You Should Know About Javascript Events

In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 02:23 - Event bubbling Some events bubble, some don’t Clicks bubble Mouseevents bubble Focus doesn’t bubble 04:10 - Event capturing Capture: down, bubble up Canceling: prevent default target` vs currentTarget currentTarget is what got clicked target is what you listened for the click on event.isTrusted addEventListener once: true Links Javascript30 BeginnerJavascript Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram <li class=

Wed, April 29, 2020

Potluck Part 2 - Magic GQLess × Are classes dead? × Custom Hooks × Staying Up To Date × CSS × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 04:02 - Q: Could you do a quick overview of how to effectively use a platform like  Cloudinary ? I have a  Gatsby  site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service. 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)? 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them. 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team? 23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using? 27:37 - Q: Have you tried  gqless , a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code. <p class="h

Mon, April 27, 2020

Hasty Treat - Getting Buy-in for a Tool Like Prettier From Your Team

In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 02:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.” This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here. 05:03 - Lots to unpack here Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here. Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code. 08:20 - So what can you do? Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already Show the dev that even though it looks weird, it’s better for readability. Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier). Put together a solid argument for it, written down. <li class="has-line-data" data-line-st

Wed, April 22, 2020

Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt. 08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around? 13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like  A-Frame  and  React 360 . I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future? 19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers? 21:37 - Q: I was curious knowing your opinions regarding  json:api  and its consumption in React. Is it still a good pick compared to  GraphQL  or normal rest/json? 27:30 - Q: What’s your take on  Blitz.js  and  RedwoodJS ? Would you use a framework like this to build a large & scalable web app? <p class="has-line-data" data-line-start="29"

Mon, April 20, 2020

Hasty Treat - 5 More Things That Make Your Site Slow

In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 03:01 - Shipping too much JS Code splitting Webpack Bundle Analyzer Look at dependencies of libraries Use fewer libraries 06:38 - Not bundling code Build process 08:24 - Not compressing code Google Closure Compiler Gzip via your server serving assets Minify CSS + JS 11:45 - Loading JS asynchronously Where should I put tags in HTML markup? Solution: Lazy load JS as needed Solution: Show HTML first, load JS in the footer Solution: Use Async + Defer 16:42 - Missing indexes on DB What is a DB index? <li class="has-line-data" data-line-start=

Wed, April 15, 2020

Thinking Ahead for Emergency UI When Building a Website

In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website? Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 5:40 - Banners and popups Interfere Static Dismissible Cookie/localstorage When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated. Private client-side-only PWAs are hard 14:35 - Good styling What happens if they add an image? Do they have access to the branded fonts and colors in their WYSIWYG? Can you revoke 100px red Times New Roman? 18:32 - Page alerts

Mon, April 13, 2020

Hasty Treat - 5 Things That Make Your Site Slow

In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 3:00 - TTFB Slow DNS lookup Server on the other side of the world Slow server processing Network speed back to the browser 6:21 - Requests Too many requests Too large Waterfalling your requests 9:44 - Assets are too large Images are the biggest bloat in a site Compress and optimize via build tool or ImageOptim Make smaller Picture fill for mobile 14:48 - Lazy loading lazy=“true” Intersection observer Preload slider images two ahead 18:03 - Not using a CDN What is a CDN? Cloudflare is free, others are very cheap - we used Cloudfront Netlify is free and comes with a CDN Links <a href="https://wordpress.o

Wed, April 08, 2020

Working From Home During the Pandemic (With or Without Kids)

In this episode of Syntax, Scott and Wes talk about working from home. How do we do our best in these unprecedented times? Here are our tips for working from home and staying productive and sane! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at  go.tech/syntax2020 . Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 2:39 - Your space You need a table Card table or dining room table Keyboard + monitor Don’t work from your bed or couch Headphones can get you in the zone (noise-canceling ftw) 16:36 - Routine Shower, shave, makeup Clear start and stop times - even if that means it’s 5am to 11am because you are splitting Taking breaks is important 25:24 - Focus TODO list - write a list of what you hope to do at the start of the day, check things off, feel good about yourself Eat That Frog - for the 100th time Don’t watch or check the news during work hours Block the terms related to the pandemic or politics on social media - you don’t need that in

Mon, April 06, 2020

Hasty Treat - Abstraction

In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 1:48 - What the heck is abstraction? I like to think of it as sweeping under the rug Vue and React devs should be very familiar with the concept 4:44 - When to abstract When things are getting too heavy Personal preference Some people have an arbitrary line limit 7:25 - When not to abstract When savings are minimal When it just adds a pointless layer 9:40 - Personal code abstractions vs public My personal focus is on API simplicity and baked-in smart defaults More specific Public APIs need to be more flexible or at least for some components Links React Vue Svelte Max MSP chakra UI Tweet us your tasty treats! <u

Wed, April 01, 2020

Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout

In this episode of Syntax, Scott and Wes talk with Dr. Courtney Tolinski about mental health and web development. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:20 - Depression Honestly just explaining depression would be great. Too many times I’ve heard “but you don’t look sad” As someone who struggles with depression, what are some things I can do to rekindle and things I enjoy like developing and hobbies? This would greatly benefit me for learning more dev related things outside of doing it for work. My depression is due to some other cause in personal life - two years into it. Coding has bought me little life back as this is the only thing I have to do. What can we do from an outsider's view to someone who might have depression? 12:23 - Anxiety Imposter Syndrome x 1000 How to deal with increased anxiety during these times? How to avoid anxiety and feel useless when working products that you don’t appeal to you? Wanted to ask the Dr about why do I feel that I have to work on 1000 projects that seem to never finish? 😣This is inducing a lot of anxiety sometimes. I am on depression medication. Sometimes, I feel scared that I am so slow and don’t feel accomplished enough like people working at FANG, etc,

Mon, March 30, 2020

Hasty Treat - Get Gud at Passwords & Password Management

In this Hasty Treat, Scott and Wes talk about security and how to get good at passwords. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 7:35 - Setting passwords Absolutely 100% must be unique for EVERY SINGLE WEBSITE 9:38 - Generated passwords Make a sentence: lovetoEatPizza Decide on casing Make your own algorithm: 3rd letter replaced by 4th letter of domain number on end is double the number of chars in the domain 13:52 - Use a password Manager Have the password manager generate the password for you Get it on your phone You must go 100% all in 1password Dashlane Bitwarden  - open source version of Dashlane LastPass  - awful 17:45 - Password manager tips Turn off your browser password manager - this is a crutch and causes them to become out of sync and this is why I see people annoyed by them

Wed, March 25, 2020

Potluck - Bootcamps × Career Change × Figma × Gatsby × AMP × Mongoose × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at  go.tech/syntax2020 . Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode? 5:36 - The dreaded monitor question, flat or curved? 8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first? 12:35 - What is AMP and should I be using it? 16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js? 21:46 - Would you ever consider moving from Mongo / Mongoose? 24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program. 33:15 - Loved your recent episode(s) on serverless functions.

Mon, March 23, 2020

Hasty Treat - Purchasing Power Parity

In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 2:36 - What is it? 5:43 - How do you calculate it? Big Mac Index Purchasing Power Parity Spotify Pricing Index Glassdoor Just ask developers what they make 8:04 - How do you implement it? Cloudflare headers Dealing with VPNs Does it work with sales? 16:09 - Is it client-side only? Links country-emoji npm package Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram <li class="has-line-data" data-line-start="38"

Wed, March 18, 2020

React Hooks - 1 Year Later

In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 1:26 - Hooks vs Render Props Hooks win hands down useState useReducer useRef useContext useEffect Custom hooks to hide and encapsulate functionality 35:06 - How we use them Scott Index that imports all custom hooks Babel alias to hooks folder Import { useHook } from ‘hooks’ useContextState Wes useResize

Mon, March 16, 2020

Hasty Treat - Hiring an Assistant

In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 2:34 - Finding someone Virtual Assistant Offset timezones can be handy Flexible is great - two hours here, two hours there 5:55 - Types of tasks to delegate Support Email replies Mail and shipping items Invoicing Expenses Research - find emails for X Blog post edits Sponsorships 14:50 - Standard Operating Procedures If something happens more than once, make an SOP Common questions that come up 18:07 - Tools 1Password Missive Custom backend tools for: Managing courses Issuing refunds Chromebook Google Docs <p class="has-line

Wed, March 11, 2020

Soft Skills Tips

In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, and more. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:20 - Productivity Make a todo list and prioritize Get ideas out of your brain Use a tool like Notion as a second brain Batch related things together Recharge when you need it Have a system and stick to it 16:34 - Finishing projects Start Do a little every day Go all-in for a few days Clearly identify what needs to be done (Github issues, todo app) 23:30 - Planning tips I use Mind Node Whimsical Write it down when you have an idea Put everything in a calendar 30:24 - Communi

Mon, March 09, 2020

Hasty Treat - Scott asks Wes about Cloudflare

In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 2:45 - What do you personally use Cloudflare for? DNS provider Domain registration at cost Caching DDoS protection Hiding server IP address Free HTTPS Firewall rules Scrape shield Lightweight stats Serverless functions DNS Cloudflare Warp 16:40 - What are you not using? KV storage Video streaming Deep customization around blocking/errors 19:49 - How do you set it up? Links Cloudflare Beginner Javascript Digital Ocean DNS Simple <a href="https://letsencrypt.or

Wed, March 04, 2020

More on Severless - Databases × Files × Secrets × Auth × More!

In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:47 - Wes tried Cloudflare Workers Also this is so cool: Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc. A word on Digital Ocean Kubernetes + FAAS allows you to scale up/down 13:54 - Secret management Some have a great UI Some have a CLI Some only have production Some have dev/staging/prod 16:24 - Vendor lock-in Two kinds of vendor lock-in Lock into a lo

Mon, March 02, 2020

Hasty Treat - The Status of Element Queries / Container Queries

In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:30 - The General Idea Toward Responsive Elements — Brian Kardell 6:20 - Problems It’s not as easy as, “how do we write them” Some of the requirements may need a fundamental change to browser engines May be very impractical and take a long time “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell 8:56 - What’s been happening? Lots of conversations Dead ends “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell ‘containment’ and ResizeObserver, Implemented in all browsers in about 2 years 12:00 - Progress Lot’s of discussion <li class="has-line-data" data-line

Wed, February 26, 2020

Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about Gastby vs everything, Next, Vue, Rails, working with agencies, CSS, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at  studywebdevelopment.com/freelaning . Use the coupon “SYNTAX” and get 25%. Show Notes 1:39 - This may be a crazy question but I need to build a similar system to Level Up Tutorials where people can access content based on a monthly subscription. Any recommendations where to start with either Next.js or Gastby.js? How do I check to see if a person is up-to-date with payment? 4:14 - What's your favorite new tab page? 6:19: CSS vs SCSS vs Styled Components? When you are developing a React or Next.js application which styling method do you guys use and why? Which one is “best practice”, or a more efficient way of going about it? 11:14 - What do you think of lit-html? 15:25 - I’m relatively new to React, and primarily learning the create-react-app way. When do you go for the create-react-app approach when building an application, and when do you customize the config? I’m uncertain when it’s time to escape the ‘create-react-app’ approach. Also, when escaping it, which main configurations are you grabbing? 18:19 - Is there a reason hasty treat intros are 2.5x the length of normal episodes? Now that Overcast has intro skipping it’d be nice if the intros were uniform in length. 21:23 - I see Kyle Matthews coming out with a lot of input on how Gatsby can be used for web applications as well. After listening to several of your podcasts, where you talk about Gatsby, it doesn

Mon, February 24, 2020

Hasty Treat - What makes a server fast?

In this Hasty Treat, Scott and Wes talk about how to make servers fast! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:58 - Ram / Memory Things like variables, functions, callstacks, application cache, sessions are all stored in memory Large processes can eat up lots of memory Reading 1,000,000 lines of a CSV npm installing Swap Memory If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection) Garbage collection can take up CPU resourced High-performance databases 7:52 - CPU The processor on your server - the brains of the computer A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks A faster CPU means your node app will start more quickly 9:26 - GPU Most servers don’t have a GPU GPUs are not only good for graphics, but they are great at solving complex tasks Bitcoin mining is fast on a GPU <li class="has-line-data" data-line-start="36" data-line-end="38"

Wed, February 19, 2020

Serverless / Cloud Functions - Part 1

In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at  go.tech/syntax2020 . Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 4:05 - What is Serverless? URL driven Startup/shut down (Heroku works this way) Digital Ocean droplet works differently 8:15 - What are the benefits? Scale up specific functions rather than everything - aka potentially cheaper Security - your singular server instance being hacked is not a possibility Less knowledge overhead required You don’t need to manage your own server Empowers front-end devs to do more Faster deploys Only re-deploy the code that changed 17:05 - What can you host on Serverless? Static Files - SPA (React) Single functions It can be in JS, Python, GO, PHP 18:07 - What can’t you host on Serverless? <li class="has-line-data" data-line-start="41" data-line-end

Mon, February 17, 2020

Hasty Treat - Get Movin' With Framer Motion

In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 4:53 - The 411 Previous knowns as Pop Motion Pose Animation library with focus on ease of use Utilizes both spring and duration based animations 7:19 - Pose Pose was previously more pose based - aka you made scenes and toggled between them This still exists within Motion as variants, but isn’t the main way 8:06 - The New New motion.div animate prop is basically a live value for the animation initial for initial state exit for animating out with use of animatePresence Hard stuff made easy drag prop Full control over properties like duration and easing Orchestration features, this then that Variants Multiple scenes allow you to orchestrate many animations with a single state change Handles hover and tap easily Scroll values SVG path animations </ul

Wed, February 12, 2020

Are Web Dev GUIs Going to Replace Us?

In this episode of Syntax, Scott and Wes talk about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more! Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at  Hasura.io . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 1:30 - What is “codeless”? The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern? All types of jobs are being replaced by computers Truckers Cashiers Lawnmowers Doctors Why not web developers? 7:22 - First experience building sites with a GUI? Dreamweaver 10:18 - Entire website builders: Wix Squarespace Webflow Modulz Grid.io Wordpress Builders <p class="has-line-data" data-line-s

Mon, February 10, 2020

Hasty Treat - The Power of Hobbies

In this Hasty Treat, Scott and Wes talk about hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:19 - What are our hobbies? Wes: Focus on one thing, learn it, move along Kombucha, Fermentation and Curing Projects Bike flipping Kids ride on repairs + hacks ATV fixing ICE to Battery conversion Scott: Dance - 15+ years Weightlifting / fitness Video games Watching hockey Design Computing / coding Snowboarding Kung fu movies 9:00 - Why are they good? Fuel your coding project Maybe could even become your key to a job you love They keep your mind sharp <li class="has

Wed, February 05, 2020

The Synology Show - Backups and Home Server

In this episode of Syntax, Scott and Wes talk about running backups and a home server — Synology setups, apps, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:03 - What is it? A little headless computer 5:07 - Drives WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$ 6:25 - RAID 11:17 - Power Backup Time Machine over the network You can upgrade the memory SSDs 22:40 - Backing up your Backups Mirror folders to Backblaze B2 Slow, but worth it 30:53 - Apps Plex + Emby Storage Analyzer Docker - anything really Node js ;) Security cameras Pi-hole or custom DNS server <li clas

Mon, February 03, 2020

Hasty Treat - Non-Glamorous Skills You Should Have

In this Hasty Treat, Scott and Wes talk about the non-glamorous skills that will improve your life as a developer! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Show Notes 3:13 - Why it’s needed Make you a better dev Make big tasks easier 7:00 - Why we don’t do it Because it’s hard It’s boring - sometimes It’s not our focus 7:24 - Good command line skills Get around file system Copy, move, delete things 8:58 - Keyboard skills Jump by word/line/BOL/EOL Learn 1 new shortcut per week Custom keybindings for common tasks 14:22 - Communication and interpersonal skills Check out  Syntax 125: Hasty Treat - Communication Skillz 14:41 - Time management Focus apps to help How long will something take? Revisit past projects when they are done and see how long it took 16:36 - Good file hygiene <li class="has-line-

Wed, January 29, 2020

Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at  go.tech/syntax2020 . Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam? 10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics? 12:00 - What is one thing that  really  annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be? 15:08 - Have you tried Fauna DB? 19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course. 23:58 - A site you’re maintaining is hacked, how do you handle fixing it? 30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that

Mon, January 27, 2020

Hasty Treat - Building A Community Slack, Discord, Spectrum, Discourse, Forums

In this Hasty Treat, Scott and Wes talk about community building online — some of the different software techniques and things you can do to either get started with a web community or join one. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 7:16 - Chat options Slack Discord Level Up Tutorials Discord Faster communication 9:00 - Forum based Indexable Searchable Slower communication Discourse Spectrum Facebook groups Reddit Syntax Reddit 27:27 - Commenting systems YouTube comments Comments systems in general Links Github Slack Discord <li class="has-line-data" data-line-start="39

Wed, January 22, 2020

Tech To Watch In 2020

In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 6:39 - CSS Subgrid 8:10 - CSS Houdini 11:20 - CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot’s of mobile issues. position:sticky - no IE at all 14:24 - NPM tink installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need 17:25 - Yarn PnP Hard links to eliminate package duplication Shared cache across all projects 18:31 - Pika & Snowpack 21:10 - Deno New Node? 25:39 - React Suspense in more libraries

Mon, January 20, 2020

Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components

In this Hasty Treat, Scott and Wes talk about Wes’ new website, uses.tech — the stack he chose for building it, as well as what it does and how to use it! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:23 - What is uses.tech? 5:33 - The stack 8:13 - Avatars 10:43 - Filtering 15:51 - Github actions 19:25 - Favicon 21:30 - Search 22:03 - Hosting Links uses.tech awesome-uses repo Gatsby React Gatsby Node API Clearbit API unavatar Now.sh webserv.nl country-emoji <a href="https://

Wed, January 15, 2020

2020 Fitness

In this episode of Syntax, Scott and Wes talk about fitness — how to stay in shape as a developer, nutrition, goals, and more! DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1)  fit.Start  (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2)  Premium  (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it’s going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:42 - Past year reflections Scott Tried several different lifting Breaking didn’t happen as much, so my cardio took a hit I finally found a full body plan / bro split that has been very effective Weight belt has really helped my form Wes Overcommitted in 2019 Feeling great - physically Gained about 12 pounds past where I want to be - rough year! <li class="has-line-data" data-line-start="29" data

Mon, January 13, 2020

Hasty Treat - A Month On Firefox

In this Hasty Treat, Scott and Wes talk about a month of using Firefox — what they liked, what they didn’t, and whether or not they’ll keep using it. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 3:42 - Dev tools are really good 19:16 - Browsing experience 22:40 - Setup and switchover tips 26:45 - What we didn’t like 29:57 - Will we stay? Links Firefox Errors in Firefox Debugging messages in Firefox Harald Kirschner GraphQL 1Password WhatsApp Videostream for Chromecast Tweet us your tasty treats! Scott’s Instagram <li class="has-line-data" data-line-start="35" da

Wed, January 08, 2020

Pika Pkg

In this episode of Syntax, Scott and Wes talk with Fred Schott about Pika Pkg, a new kind of package registry for the modern web. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:24 - What is Pika? 9:40 - What about peer dependencies? 12:53 - What does migration look like? 17:30 - Are these tools making things easier? 21:25 - What is the Pika Registry? 34:48 - What is the Pika editor? 41:13 - Is it open source? 47:30 - What about security? Links Fred Schott @FredKSchott Pika @pikapkg Snowpack Pika Builders Babel Typescript <li class="has-line-data" data-line-start="42" data-lin

Mon, January 06, 2020

Hasty Treat - Modules in Node

In this Hasty Treat, Scott and Wes talk about modules in Node — what are they, how they’re different from browser modules, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:06 - How were they done before? 5:11 - How do they work? 7:07 - How to use Modules in Node 9:57 - Gotchas 13:18 - What should you use? Links Node Node Modules Babel ESM Meteor Keystone MJS Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram <li class="has-line-

Wed, January 01, 2020

Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more! Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at  studywebdevelopment.com/freelancing . Use the coupon “SYNTAX” and get 25%. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages? 5:30 - Q: What makes a font “good”? I stumbled upon  haleyfiege.fun/fonts , where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective? 9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework? 12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out? 15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load? <p class="has-line-data" data-line-start="27" dat

Mon, December 30, 2019

Hasty Treat - Wes Teaches Scott about Keystone.js

In this Hasty Treat, Wes teaches Scott about Keystone.js — best practices, things to avoid, why you should check it out, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:10 - What is Keystone? 7:38 - How do you handle mutations? 14:26 - What’s the hosting situation like? 19:34 - Shortcomings 21:40 - Plugins Links KeystoneJS Prisma Hasura Next.js GraphQL Stripe API WordPress ThinkMail Drupal Redux Now MongoDB MongoDB Compass pm2 TypeScript <a href= "http

Wed, December 25, 2019

2019 YEAR END Definitely Not a Clip Show

In this episode of Syntax, Scott and Wes do a 2019 year in review — the most popular Syntax episodes, what they learned, some personal updates, plans for next year, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:40 - Plans for 2020 Syntax Live March 2019 Plans for 2020 Twitter has done really well for  @syntaxfm Community feels great 9:20 - Top 10 Syntax episodes of 2019 Syntax162: The Fundamentals - JS Syntax120: Gatsby vs Next Syntax158: The Fundamentals - HTML + CSS Syntax126: Bootcamps vs School vs Self-Learning Syntax138: What’s New in Web Development Syntax130: The VueJS Show (Scott teaches Wes) Syntax146: CSS the Cool Parts <li cl

Mon, December 23, 2019

Hasty Treat - How We Launch Courses

In this Hasty Treat, Scott and Wes talk about launching courses — a behind-the-scenes look at their platforms, processes, best practices, and what it takes to get a course published. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:13 - Scott’s process 8:48 - Wes’ process 20:57 - Additional tips Links Beginner Javascript Level Up Tutorials Figma Tim Smith YouTube Vimeo HandBrake Screenflow Backblaze B2 VS Code Tweet us your tasty treats! <a href="https:

Wed, December 18, 2019

State Machines, CSS and Animations with David K Piano

In this episode of Syntax, Scott and Wes talk with David K Piano about state machines, CSS, animations and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:30 - Who is David K Piano? 4:00 - Did you have a background in animation prior to web development? 5:45 - How did you build the CSS Responsive House on Codepen? 8:36 - What are state machines? 14:47 - How does it relate to programming? 17:20 - How do you go about changing states? 20:20 - Is this similar to how RxJS works? 21:40 - How would state machine work in CSS? 29:07 - Perspective in CSS 34:47 - How do you like Twitch vs YouTube? 35:48 - How do you add XState to a current project? 41:42 - Visualizing sate machines 46:15 - Do you have a day job as well? Links <a href="https://twitter.com/davidk

Mon, December 16, 2019

Hasty Treat - The New MacBook Pro for Web Development

In this Hasty Treat, Scott and Wes talk about the new 16" MacBook Pro and how it performs as a web development machine. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:24 - Why did the old ones suck? 4:43 - What did we get and why? Wes 32GB RAM 2.3GHz 8-core i9   1TB SSD Scott 64GB RAM 2.4GHz 8-core i9 8gb AMD Radeon Pro 5500M 2TB SSD 9:40 - Is it still the best? The MacBook Pro is the workhorse of developers Keyboard is amazing Screen is even bigger Esc key is back Touch ID is very fast Heat is good Speed is very fast. Great for video editing, recording, etc… Trackpad feels great <p class

Wed, December 11, 2019

2019 Gift Guide

In this episode of Syntax, Scott and Wes bring you an entire episode of sick picks — the 2019 gift guide! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at  prismic.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:48 - Gadgets Apple Watch Sabrent Qi Wireless Charger Sony wh-1000xm3 Bose QC35 II Sabrent 8-in-1 hub Satechi Aluminum Multi-Port Adapter Anker 5-in-1 quick charge hub 3 in 1 charge cable Elgato Cam Link 16:59 - Smart Home Automation <a href="https://store.google.com/prod

Mon, December 09, 2019

Hasty Treat - What Are Github Actions?

In this Hasty Treat, Scott and Wes talk about Gihub Actions — what they do, why you might be interested in them, best practices and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 2:30 - What are Github Actions? 4:40 - Examples of Github Actions 6:02 - Will Github Actions replace continuous integration services? 9:19 - Libraries Links Codeship Github Actions nextdiff Figma Action Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter <li class="has-line-data" data-line-start="35" data

Wed, December 04, 2019

Potluck - Tabs are better? × Coding Music × SEO × Is Angular good? × Biggie Smalls × Soy Sauce × More!

It’s another potluck! In this episode Scott and Wes talk about tabs vs spaces, coding music, SEO, React vs Angular vs Vue vs Svelte, Rapping, Soy sauce and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:18 - Q: I am potentially starting a job as an Angular developer (modern angular). But I am scared that, even though I will continue to stay on the cutting edge in my personal projects, using Angular in my job will make it harder to get a job after that in more modern tech like React. Do you think there is any truth to this? 5:30 - Q: Yo guys, saw soy sauce stirred up quite the controversy…lol. What are some big developer disagreements you guys have? 11:40 - Q: In JavaScript, ! == is the same as ! =, but I was told there was a slight technical difference. I cannot find what the difference is. Could you elaborate on this? 14:17 - Q: What are the rules on using another dev’s repos as a boiler plate? Example: Using Wes’s advanced react starter files to utilize his set up for my own project? 15:35 - Q: What music do you listen to while you code? As an extension, could we crowd source a dev playlist and host it on Spotify? 20:26 - Q: How do you go about working with different technologies and stacks (front-end related) when you have to accommodate for the client or other developers’ biases towards specific things. For example, you have to learn a different set of tools because in a new project someone doesn’t like what you use and says X is a better tool for the job. <p class="has-line-data" data-line-start="29" data

Mon, December 02, 2019

Hasty Treat - New CSS Logical Properties

In this Hasty Treat, Scott and Wes talk about new CSS Logical Properties. Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at  Hasura.io . Show Notes 2:27 - The Box Model 5:32 - Grid and Flexbox 10:17 - Widths and Heights 11:20 - Text Align Links New CSS Logical Properties! Elad Shechter Adam Argyle Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, November 27, 2019

Show 200!

In this episode of Syntax, Scott and Wes celebrate 200 episodes of Syntax with a live Q&A! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 2:27 - With 2020 around the corner, what are your wild predictions for the the future of web design and development? 8:44 - Are site builders going to replace us as web developers? 13:30 - What does the future look like for Syntax? 19:01 - What emerging tech advancements most excite you for the next 5-10 years? 23:27 - What is the future of web hosting? What should hosting companies do differently? 27:40 - Why do you set your base font size to 10px? 32:40 - If you could go back in time, what would you say to yourself? 36:29 - How do you make an iFrame go 100% high? 39:10 - What’s one thing you see developers stress out about for no reason? 44:46 - Do you feel overwhelmed with creating new content when there’s so much already out there? 48:42 - How do you stay sane with your naming conventions? 51:15 - If Gatsby is best for static websites and Next is best for apps, how does Create React App compare? 54:30 - How much is too much or too little mag

Mon, November 25, 2019

Hasty Treat - So you want to make a course... Will people buy it?

In this Hasty Treat, Scott and Wes talk about making courses — techniques, best practices, things to avoid, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:07 - Validating your ideas 4:44 - Generating ideas 6:38 - Figuring out which ideas will stick 10:00 - Show your expertise 14:02 - Pay attention to what’s popular 15:50 - Collect email addresses Links Microsoft Excel Stream Highlights Refactoring UI Adam Wathan Steve Schoger Scott’s Svelte 3 course Wes’ Sublime Text articles Tweet us your tasty treats! Scott’s Instagram <li class="has-line-data" data-line-start="36"

Wed, November 20, 2019

How To Get Better At Problem Solving

In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Prismic - Sponsor Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at  Prismic.io/syntax . Show Notes 2:43 - Gather info What is this thing trying to do? Use tools DevTools are your best friend during this phase 8:01 - Know where to look (and use tools) Dev tools for client side Error logs Sentry LogRocket The most experienced people in any field know how to ask the right questions. Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve. 10:00 - Look at the end game What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture. 13:17 - Read Again Error logs provide the

Mon, November 18, 2019

Hasty Treat - Tips For Writing Good CSS

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS. Sizzy - Sponsor Sizzy  - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level.  Sizzy.co . Show Notes 4:08 - Use a system 4:50 - Use overrides and cascading Embrace the cascade Don’t rewrite the same CSS over and over again Understand why scoping is good 9:07 - Nail down typography early You can always revisit if it isn’t what you need 10:36 - Pick a pattern and stick to it BEM Functional CSS CSS in JS 14:39 - Don’t style based on element type (kind of) — a class should describe the component 17:09 - Good naming techniques Describe what it is, not what it looks like Thing ThingChild ThingChild-modifier Scale sizes (e.g. s, m, l, xl) 21:43 - Other tips Group like CSS together Chunk into different files <li c

Wed, November 13, 2019

Design Foundations For Developers

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 6:35 - Our backgrounds in design 12:41 - Foundations Consistency makes a big difference Use “training wheel” tools until you are confident Always work within a system Less is more - subtle is better 19:39 - Color Color theory Complementary colors and shades Stick to color pallet generators until you are good enough 28:51 - Spacing More spacing than you think you need Vertical rhythm Letter spacing: -1px Consistent margin and padding 34:47 - Typography Sans vs serifs Finding fonts Use proven combinations until you

Mon, November 11, 2019

Hasty Treat - Buying and Selling Domain Names

In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 2:50 - Buying a domain 10:47 - Selling a domain 13:50 - Transferring a domain Links who.is GoDaddy JavaScript.co BeginnerJavaScript.com LearnNode.com BeginnerJS.com KitBos.com Cloudflare Learn.li Learnli.co Escrow.com Hover Bob.com Sedo.com Park.io <h2 class="code-line" data-line-s

Wed, November 06, 2019

Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so? 10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion? 13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it? 15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior? 19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients? 21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees. 24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic a

Mon, November 04, 2019

Hasty Treat - Spooky Stories

In this Hasty Treat, Scott and Wes bring you  more  web dev horror stories! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:26 - Perf Woes 3:42 - Always Backup Your Backups 4:54 - Kill Children 6:03 - Robots Don’t Eat Food 8:32 - Email Goof Up 9:44 - Hundreds of Thousands of Date Issues 10:46 - Spooky August 12:32 - You’re up to .bat 13:17 - Printed Code 15:12 - ThinkGeek 16:12 - It would take a while to Ketchup on all these orders 17:05 - This story makes me want to stick my head in async Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter <a hr

Wed, October 30, 2019

Spooky Web Dev Horror Stories

In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 2:09 - Scott’s Disastrous Git Clean 4:35 - Magic Updates the Gathering 8:52 - YAAAAS 9:37 - Token Trouble 12:16 - jQuery Plugins 15:22 - Success! 18:00 - Parental Advisory 21:47 - Students Changing Grades 22:46 - Lorem Sh!tsum 26:22 - Drowning in a Waterfall 28:53 - Magneto Upgrades 30:00 - JOHN CENA 33:24 - Migration Migraine 35:39 - Primary Key Nightmare 36:26 - The $20,000 YAML formatter Links Adam J. Sontag jQuery <a href="https://about.git

Mon, October 28, 2019

Hasty Treat - Scott Moves to iPhone

In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 1:59 - My device history OG Droid → Nexus → Pixel Misconceptions of android It’s Windows for phones It’s cheaper or not as nice 5:03 - Why switch? 6:39 - Who wins what? Android Homescreen Low light photography Usability Squeeze assistant Google search integrated everywhere Search Keyboard Notification iOS Apps Performance Camera overall Device quality <li class="has-line-data" data-line-s

Wed, October 23, 2019

Migrating, Deploying, and Hosting WordPress

In this episode of Syntax, Scott and Wes talk with Brad Touesnard of  Delicious Brains  about migrating, deploying, and hosting WordPress. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Hasura - Sponsor Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at  hasura.io  to try it out in 30 seconds! Show Notes 3:50 - Why did start Delicious Brains? 5:25 - What plugins does Delicious Brains make? 11:40 - Migrating WordPress 16:50 - Migrating databases 24:20 - How do you do version control with WordPress? 37:06 - What’s the easiest way to deploy and host WordPress? 40:23 - What are some examples of managed WordPress hosts? 46:58 - What does your deployment process look like from beginning to end? 50:22 - Thoughts on headless WordPress 53:12 - Is serverless WordPress a thing? Links Delicious Brains WP Migrate DB Pro WP Offload Media <a href="https://deliciousbrains.co

Mon, October 21, 2019

Hasty Treat - React Server Side Rendering

In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:20 - What is SSR? 4:16 - Why SSR at all? 8:39 - Platforms that do SSR out of the box 11:18 - Gotchas useLayoutEffect import { useEffect, useLayoutEffect } from 'react' const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect export default useIsoLayoutEffect 18:20 - Tools Links Next.js Gatsby Webpack Parcel Meteor React NoSSR component Syntax 127: Hast

Wed, October 16, 2019

The Fundamentals - Server Side

In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:53 - Requests and responses 9:21 - What is a server? 10:33 - Ports 13:50 - Database connection and interaction 15:16 - Cookies and sessions 15:48 - Writing files and directory permissions 19:34 - Headers 22:13 - Error Handling 22:50 - Logs 25:04 - Async data handling 26:33 - Routing 30:44 - Mime types 36:26 - Authentication 37:49 - Environmental variables 40:37 - Deployment 43:24 - Advanced Links GraphQL <a h

Mon, October 14, 2019

Hasty Treat - Float Tank Experiences

In this Hasty Treat, Scott and Wes talk about their experiences with float tanks! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 2:28 - What is a float tank? 6:47 - What are the benefits? 8:50 - How did you feel during the float? 17:28 - Would you do it again? Links The Joe Rogan Experience Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, October 09, 2019

Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 3:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time? 9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application? 13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach? 15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use. 23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail? 27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks t

Mon, October 07, 2019

Hasty Treat - Feature + Release Planning

In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, best practices, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:06 - Wes: Features are logged into software (Github, Jira, etc.) I use a Kanban board - I bubble them up and down in the order in which I want to release them I don’t plan for Q1, Q1, etc… Tear off an issue, tackle it, test and deploy. 10:39 - Scott: All issues/features get a priority tag (e.g. p1 → p4) regardless of the system Bugs go in Github Features and platform improvements go in Notion Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.) Links Github Trello Kanban Jira Canny Notion <a href="https://gettingthingsdone.com/"

Wed, October 02, 2019

Desktop & Mobile Apps With a Single Codebase

In this episode, Scott and Wes talk with Etienne Lemay, developer of  Missive , about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 0:57 - What is Missive? 6:10 - What is the desktop app built in? 9:44 - Did you use any particular libraries for the front-end? 11:44 - How are you managing state? 13:37 - Is it challenging to do all of this in JS? 15:07 - What was the catalyst for the “multi-conversation swipe”? 21:32 - What is the mobile app built in? 24:00 - What are the advantages of Cordova? 30:30 - How do you manage offline/syncing/etc. so well in a JS app? 34:56 - How do you test it? 36:52 - Have you looked into Cypress? 39:35 - How do you style it? Links @EtienneLem Missive Spark <a href="https://coffeescript

Mon, September 30, 2019

Hasty Treat - Developing Better Habits

In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, best practices, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:03 - Habits we’re trying to build Scott Focus on one project at a time Alfred tasks to quit apps and block sites Not being efficient with my time Daily todo lists and utilizing calendar Too much screen time Listening to music in the background instead of having the TV on Wes Flossing Mindless context switching 13:37 - General strategies for building habits Make them trackable Easy enough to not ignore them Quantifying them is key Make them small enough Be accountable Tell other people your habits and have them remind you about them Replace bad habits with good things <li class="has-line-data" data-line-start="36" data-line-end=

Wed, September 25, 2019

Practical: How would we build Airbnb, Twitter, or Reddit?

In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 3:03 - Backend Express Node GraphQL MongoDB 14:45 - Frontend React Next.js Styled components Stay as close to real CSS as possible 22:39 - Deployment process Serverless Now Ideally one app that handles everything 28:38 - Email <li class="has-line-data" data-line-start="39" data-line-

Mon, September 23, 2019

Hasty Treat - Automating Stuff

In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:16 - Alfred workflows 9:32 - Smart home routines 13:16 - Bash scripts & aliases 18:43 - Other Links Alfred Wyze Cam Google Home Drip Divvy Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook <li class=

Wed, September 18, 2019

Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components

It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)? 11:30 - Q: What is your opinion on AWS Lambda functions? 15:42 - Q: How do you push new  Syntax.fm  episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date? 21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship? 30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job? 36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’? 41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax? 44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector? 46:39 - Q: What the best way to handle media queries in Gatsby with styled components? <a id="

Mon, September 16, 2019

Hasty Treat - The TLD Game

In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 1:55 - The rules of the game We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? -5 points What country, business, or type of business is it for? -5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ is scott.___ and wes.___ available? -10 for each 5:40 - .BO 7:51 - .BZH 9:50 - .BANANAREPUBLIC 11:15 - .BABY 14:04 - .KR 16:09 - .MOTO 17:25 - .AW 19:16 - .IM Links 101Domain Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Inst

Wed, September 11, 2019

How We Record, Edit, and Host Our Courses

In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 5:42 - Recording Wes: Screenflow Uberlayer Loopback Heil PR40 Heil PL-2T dbx 286s Focusrite Scarlett 2i2 Scott: Screenflick iShow HD Divvy <li class="has-line-data" data-line-start="32" data-line-end="33

Mon, September 09, 2019

Hasty Treat - Moving from PHP to Node

In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:43 - Servers need to be started and baby sat 4:48 - There is no built-in file system based routing 6:34 - Some "gotchas" 7:02 - Functional programming 8:17 - Async vs sync 11:11 - Event lifecycles 12:09 - Dependencies 14:17 - Keyed arrays Links Wes’ tweet thread Forever PM2 Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram <li class="has-line-data" data-line-start="41" d

Wed, September 04, 2019

Building Steam Games with React

In this episode, Scott and Wes talk with Drew Conley about building games with Javascript. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:58 - What is Danger Crew? 5:25 - Did you have a background in game dev before this? 8:36 - What were the initial resources you went to to make a game in React? 10:27 - How much of it is Canvas? 13:06 - What other libraries are you using? 14:00 - How did you lay out the environments? 16:35 - How is text rendered? 22:40 - How did you do all of the animation? 26:08 - What performance issues did you run into? 27:31 - How do you handle user states and saves? 29:21 - Is there any server side aspect? 30:42 - What was the process for creating the level editor? 34:38 - How did you publish the game / wrap it as an executable to sell? 38:16 - How do you update it? 39:43 - How difficult was creating the game logic? 41:20 - The dev theme in the game is super prominent, did that make working on it more fun? Links <li class="has-line-data" data-line-start="50" data-line-end="51"

Mon, September 02, 2019

Hasty Treat - Stump'd

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:54 - What is the difference between NULL and undefined? 5:40 - What is short circuit evaluation in JS? 7:25 - What is  use strict ? 9:07 - What is the only value not equal to itself in JS? 10:36 - When would you create a static class member? 11:54 - What is a pure function? 13:08 - What is JSONP? 14:24 - Describe the layout of the CSS box model? Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter <li class="has-line-data" data-line

Wed, August 28, 2019

How to Build an API

In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Show Notes 2:15 - How do you build an API from scratch? 3:54 - Choose an API type REST GraphQL 8:15 - Setup some sort of server that will accept requests and send responses Express Koa Meteor 11:11 - Document the endpoints What is the end point What parameters are required Filters Sorting Headers required What you get back when you hit this endpoin

Mon, August 26, 2019

Hasty Treat - Wes & Scott Look At Svelte 3

In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 2:16 - What is Svelte? 11:32 - Sapper 13:05 - Svelte Native 14:58 - Questions we have What’s the Typescript story here? How hard would it be to convert a large React app to Svelte? Will Svelte be able to capture the market share it needs to grow and compete? Would you (Wes & Scott) use this? Links https://svelte.dev/examples#hello-world Mustache Webpack Rollup.js Next.js Sapper Svelte Native React Native Svelte - Typescript support Rethinking Reactivity Tweet us your tasty treats! <ul

Wed, August 21, 2019

Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis. 4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up. 9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.). <p class="has-line-data" data-line-start="25" da

Mon, August 19, 2019

Hasty Treat - How To Publish A React Component To NPM

In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:40 - Create React Library 6:55 - Documentation libraries 10:54 - What I’m building 13:13 - Linking library to projects 14:52 - Improvements and community thoughts Links Rollup testing-library/react-testing-library transitive-bullshit/create-react-library leveluptuts/fresh How To Make a React Component Library - Making A React Library React Styleguidist Storybook Docz DocSource npm-link <a hr

Wed, August 14, 2019

State In React

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:38 - What is state? 4:58 - What kind of things are kept in state? Data Temporary client side data From forms, button clicks, etc. Cached server data Data from API UI status AKA isModalOpen isToggled 12:48 - Global state vs. Local state Ask yourself: does the data need to be accessed outside this component? If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”. Do you count Apollo API calls as global state? 21:15 - Managing Local state useState, setState Passing state & update functions down State machines <p class="has-line-data" data-li

Mon, August 12, 2019

Hasty Treat - Remote Internet

In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work. Netlify Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  Netlify  for more info. Show Notes 4:31 - Remote internet options 7:55 - Modems and routers 10:52 - Antennas 13:47 - Boosters 14:54 - Plans, data and speeds 20:11 - Other things to think about Links Deadmau5 house ZTE MF288 Netgear LB1120 Mofi Routers ZBT WE826T Rogers Ubiquiti Networks Tomato Firmware Tweet us your tasty treats! <a href="https://www.instag

Wed, August 07, 2019

Blogging

In this episode of Syntax, Scott and Wes talk about blogging — both the specifics of content (how to make great content), as well as the mechanics of where and how to publish blog posts. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 7:06 - What are some of the different platforms for publishing a blog? 23:41 - How to structure a blog post? 29:10 - How to direct traffic to a blog post? 38:51 - How do you make technical content in-depth and also succinct? Links WordPress Gatsby Squarespace Netlify Tumblr Medium Hacker Noon Freedcamp <li class="has-line-data" data-line-s

Mon, August 05, 2019

Hasty Treat - VSCode Love Part 3

It’s another VSCode episode! In this Hasty Treat, Scott and Wes talk all the things they love about VSCode — things to learn, how to get around more quickly, using keyboard commands, being more efficient, using snippets and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Show Notes 2:14 - Things to learn Jump by word, line Select by word Command Palette (cmd + shift + p) Move and copy lines - option up down or with shift Multi cursor Find and replace in files Use the Insiders build if you like updates every day 11:03 - Keyboard commands Cmd + b to hide sidebar Cmd + shift + x 13:55 - Snippets Snippet Generator Get to know defaults as well as tabs Mongo Snippets for Node-js Links VSCode Marketplace VSCode Insiders Build <li class="has-line-

Wed, July 31, 2019

Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!

It’s another Syntax potluck! In this episode, Scott and Wes answer your questions about remote work, AI agendas, motivation, fitness, the future of coding, and much more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. FreshBooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:03 - Q: I hear you both talk about “state” a lot in your podcasts. And while I understand a little about it, I never understand it in the context you both use it. Can you enlighten us? 6:52 - Q: I have an idea for a project that is suited for web sockets, push text/images/documents to a bunch of users in real time. I just learned about Firebase’s real-time database, and it looks like it would be pretty easy to implement my idea. What are your thoughts, pros/cons, of these two technologies? 10:42 - Q: How’s your fitness going? 12:15 - Q: Let’s say both of you gents were junior developers that had basic knowledge and skills in HTML, CSS and JavaScript but you had all the experience and knowledge of how to best master those skills and where the industry was heading. What would be the outline and focus of your road-map knowing what you do now? 17:22 - Q: Is it worth it to find a remote dev job at an early stage of your career? Considering the stuff I learn from my seniors and other devs on the team, I wonder if I will lose the opportunity to learn stuff from my team members? 19:49 - Q: How do I keep myself motivated in coding? 22:47 - Q: What’s y’all’s opinion on using some obscure (at least in my opinion) features of a language, such as Javasc

Mon, July 29, 2019

Hasty Treat - VSCode Treats Part 2

In this Hasty Treat, Scott and Wes talk about more of their favorite VSCode tasty treats - extensions, features, keyboard shortcuts and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  Netlify  for more info. Show Notes 3:45 - Extensions Git Blame Apollo GraphQL VS Code Spell Checker 9:36 - Features Indent lines in explorer - Workbench > Tree Indent & Guides Breadcrumbs Commit all & visual git commands Change branch in lower left Rename Symbol Links Syntax 161: Hasty Treat - VSCode Extensions & Themes Alfred Playlist.js Tweet us your tasty treats! Scott’s Instagram <li class="has-line-data" data-lin

Wed, July 24, 2019

A Story About Kanye West and Learning to Code

In this episode of Syntax, Scott and Wes talk with Harry Dry about the crazy story behind his Kanye West dating site, how he taught himself to code, and how to come up with cool side projects! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 2:30 - How did you get into web dev and come up with the idea for the Kanye West dating website? 10:29 - Do you have a background in design? 13:05 - What’s your story? 15:28 - Do you wear yeezys? 36:26 - What made you decide to take this story and make a bit site out of it? What was the plan? 40:45 - How did you learn to code? How did you decide what to learn next? 45:30 - How do you push through hard problems? 48:50 - Any final advice to offer? Links The Kanye Story TheNetNinja @rogerfederer Refactoring UI @GonzoVice Dang That’s Delicious Puck @joerogan Code Academy ChatKit by Pusher @grantimahara Mythbusters @elonmusk Marketing Examples @goodmarketinghq @harrydry <a id="_SIIIIICK__PIIIICKS__53"

Mon, July 22, 2019

Hasty Treat - Web Dev Resource Sick Picks

In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  LogRocket . Show Notes 2:03 - Twitter Accounts Scott:  HeyDesigner Wes:  Mathias Bynens 5:00 - Web Dev Resources Scott:  Scotch.io Wes:  Webgems.io 7:37 - Design Resources Scott:  UI Movement Wes:  Creative Market 11:36 - Desktop Tools Scott:  Pock Wes:  MongoDB Compass 14:59 - YouTube Scott: JSConf stance Wes: Andrew Camarata dotconferences Links Studio3t Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, July 17, 2019

The Fundamentals — JS

In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  LogRocket . FreshBooks - Sponsor Get a 30 day free trial of FreshBooks at  FreshBooks  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:07 - Variables + Scoping var/let/const Block scope Function scope Scope lookup 6:06 - Types Objects Reference vs. copy 7:15 - Functions Types of functions Anonymous vs. named Expressions Arrow functions Methods 9:33 - DOM Selecting Updating Creating 15:07 - Prototypes + this this Objects 20:16 - Events Listening, callbacks dispatchEvent Bubbling 22:05 - Arrays Push, pop, manipulate Spread, rest Map, filter, reduce Arrays vs. objects Mutation vs. immutable 26:25 - Flow control Looping If Promises + Async + Await 29:47 - Security and accessibility XSS and innerHTML 32:04 - Things you should know, but not necessarily master Modules Closures Ajax requests 35:26 - Clean code Clean Code Javascript Links Syntax 043: 20 Javascript Array and Object Methods to make you a better developer Syntax 141: Hasty Treat - Async + Await Error Handling Strategies Syntax 072: Accessibility ××× SIIIIICK ××× PIIIICKS ××× Scott:  BaseCS Wes:  Owlet Baby Monitor <a id="Shameless_Plugs_93" name= "Shameless_P

Mon, July 15, 2019

Hasty Treat - VSCode Extensions & Themes

In this Hasty Treat, Scott and Wes talk about everything they love regarding VSCode: themes, fonts, extensions, techniques and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  Netlify  for more info. Show Notes 3:18 - Theme Cobalt 2 SyntWave '84 4:58 - Fonts Dank Mono Operator Mono 7:12 - Five things we love Wes: Bracket Pair Colorizer Permute Lines ,  Unique Lines Breadcrumbs Toggle Quotes Snapshot Tools Scott: Better Comments Import Cost Ctrl+Click Go To Definition Wrap Console Log Simple Git History Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include <a href= "https

Wed, July 10, 2019

GraphQL and WordPress

In this episode of Syntax, Scott and Wes talk with Jason Bahl (author of WPGraphQL) about GraphQL, headless WordPress, frameworks in WordPress, React in WordPress, and more! Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  LogRocket . Show Notes 4:55 - Data in WordPress 6:26 - WPGraphQL 10:31 - What were your initial thoughts/first experiences with GraphQL? 16:58 - Does it use MySQL queries or wpQuery? 19:36 - How does authentication work? 24:38 - What does the WP local dev experience look like in 2019? 26:49 - What about deployment? How do you handle migrating data? 30:10 - How does WPGraphQL handle mutations? 32:46 - What are the preferred hosting methods for a headless WordPress setup? 36:44 - Do you see any push back about giving up much of what WordPress gives you out of the box? 41:23 - What are techniques for preventing all of WordPress from loading When you’re using it exclusively for the API? 43:40 - How does WPGraphQL support custom post types, taxonomies and fields, etc? Links WPGraphQL Kyle Mathews GraphQL Gatsby WordPress Meteor Apollo GraphQL GraphiQL WPGraphiQL WAMP Flywheel Local by Flywheel PhpStorm Lando Laravel React Netlify Jason Schuller <a href="

Mon, July 08, 2019

Hasty Treat - Front End Security

In this Hasty Treat, Scott and Wes talk about front end security and what to do in order to avoid hacking. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Show Notes 2:53 - SSL Encrypted transfer of information Digitally binds a cryptographic key to an organization’s details Web-cam, geolocation, etc. 6:15 - innerHTML React’s dangerouslySetInnerHTML Name intentionally chosen to be frightening Allows you to write HTML to the DOM Data should be sanitized before used in prop Removes unexpected data from string Used to prevent cross site scripting attacks 10:25 - Don’t trust the client The client can be manipulated to send any info to your server E-commerce example — don’t take the price total from the front end to make the charge, DB call and calculate on the server Validate form inputs via HTML 5 field validation/check data types on the server Don’t allow your users to send an object when it should just be a string Get this for free with GraphQL via types 13:41 - PCI Compliance Protect card holder data SSL or Secure iFrame Encrypt transmission of card data Restrict access to card holder data Restrict physical access Front of front-end 16:44 - Tips Don’t put a name on sensitive fields if you are using JS HTTP only cookies Local Storage tokens XSS Links React GraphQL Express Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s

Wed, July 03, 2019

The Fundamentals: HTML + CSS

In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  Freshbooks  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:54 - Learning fundamentals vs framework specialists Learning vs getting a job Abstractions work well until they don’t and you need to debug them HTML 7:58 - Semantic markup 9:15 - Accessibility basics 9:57 - Attributes CSS 16:13 - Specificity 22:42 - Selectors 24:52 - Layouts 27:53 - Box model 32:50 - Positioning 36:42 - Forms and inputs 40:45 - Block vs inline vs inline-block 43:09 - Sizing units 44:40 - Typography 47:53 - Media Queries Links Interviewing candidates with a lack of fundamentals - Tweet Jean-Philippe Sirois Tweet Syntax 72: Accessibility Syntax 107: Hasty Treat - CSS Units ××× SIIIIICK ××× PIIIICKS ××× Scott:  I Think You Should Leave with Tim Robinson Wes:  Forearm Forklift Lifting and Moving Straps Shameless Plugs Scott’s new course - “Debugging and Dev Tools” Wes’ courses  - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! <a href="https://www.instagram.com/stolinski/"

Mon, July 01, 2019

Hasty Treat - What is a Headless CMS?

In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Show Notes 2:11 - What is a headless CMS? It’s a system or CMS that has no front-end (aka head) Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages 4:37 - Some examples Can be used with any type of website that can consume an API WordPress API + Gatsby Hosted Service + React App 7:06 - Why? Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc. Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like Optimizes for performance with static builds Hide the implementation details and back-end from view 10:19 - Live vs statically-generated website Syntax 120 - Gatsby vs Next 10:55 - How? Connects to API via normal fetch calls/GraphQL/whatever you use Needs to host your back-end either as a service or on a host Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify Links WordPress Sanity.io React Syntax 120 - Gatsby vs Next Netlify GraphQL Cobalt Gatsby.js Drupal Next.js Nginx Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials

Wed, June 26, 2019

Potluck - Career Switch at 33 × Cover Letters × Kids × Learning Quickly × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  Sanity . Show Notes 1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy? 10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake. 14:35 - Q: Scott, what was the stack you were using at Ford? 17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”? 22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state? 25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you? 30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists? 32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why? 36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a care

Mon, June 24, 2019

Hasty Treat - Making Yourself Uncomfortable To Grow

In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  Netlify  for more info. Show Notes 3:50 - CCS Preprocessor parable 6:09 - Efficiency 10:40 - When to learn new systems 13:03 - Common pain points 14:42 - Pushing yourself to foster growth Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, June 19, 2019

SVGs with Sara Soueidan

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  Sanity . Show Notes 6:05 - What are SVGs? It’s an image you can edit 16:17 - Icon fonts Better tools Fails in certain areas SVG sprite icons Grunticon 24:24 - SVG files / Build tools SVGO / SVGOMG 31:50 - Where to find SVGs Noun project Exporting from Sketch/Illustrator/Figma Freepik Iconmoon 33:48 - What is the viewbox? 40:39 - Animating SVG 43:41 - Accessibility & text with SVG 45:44 - Graphing with SVG D3.js 47:58 - Filters Links Font Awesome Grunticon Grunt gulp.js React Vue.js Sketch Illustrator Figma imagemin gulp-imagemin Gatsby.js gatsby-plugin-sharp jakearchibald/svgomg Noun Project Freepik <a href="htt

Mon, June 17, 2019

Hasty Treat - New Intl Methods Are Straight Fire

In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more! Log Rocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  logrocket.com/syntax . Show Notes 5:48 - Intl.NumberFormat 9:17 - Intl.ListFormat 12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat 14:27 - Intl.PluralRules Links Standard built-in objects Language Subtag Registry Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, June 12, 2019

Debugging Tools + Tips

In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax for more info. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  Freshbooks.com and put  SYNTAX  in the “How did you hear about us?” section. Show Notes 1:41 - Tools CLDD - console.log driven development How To Pause Your Code With Breakpoints In Chrome DevTools Other types of break points XHR DOM break on attribute change DOM break on children Conditional break Break on exception Break on event listener 21:49 - Network requests Doesn’t take place in your site/dom, so might not always have all info in your console, debugger Network tab in dev tools shows you all requests going in and out of your app Filters by type, sees length in request Sees headers, responses and more Failed requests will be red 26:50 - Debugging mindset Check different browsers Check the docs/examples Isolate when possible “What has changed?” Get minimal working code Rubber Duck Debug Step back and re-think Links Debugging Visual Studio Code (Node) - James Q Quick CodePen Spencer Carli’s Youtube ××× SIIIIICK ××× PIIIICKS ××× Wes:  DeWALT Lawn Mower Scott:  Cold Brew Coffee Maker Shameless Plugs Wes’ Courses  - Use the coupon code ‘Syntax’ for $10 off! Level 2 React Native with GraphQL <a id="Tweet_us_your_tasty_treats_63" name

Mon, June 10, 2019

Hasty Treat - Std Lib in JavaScript

In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal — what it is, how it could influence dev, and what they’d like to see. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 1:38 - What is a Standard Lib? Still experimental Built-in modules don’t have to be downloaded because they ship with the browser Not exposing built-in modules globally has a lot of advantages: They won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker) They won’t consume any memory or CPU unless they’re actually imported They don’t run the risk of naming collisions with other variables defined in your code 6:47 - Key Value Storage is the first one: KV Storage: the Web’s First Built-in Module 8:36 - What do we want to see? Deep clone Basically all of Lodash util.isDeepScrictEqual Async json.parse()  /  json.stringify UUID URL Lib for building and parsing URLs Missing Array Methods Most of underscore JS 15:53 - International Currency Formatting Lists DateTimeFormat RelativeTimeFormat Links JavaScript Standard Library Proposal Add remaining Underscore / Lodash features JavaScript standard library contents Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter <a href="https://www.facebook.com

Wed, June 05, 2019

Gatsby Themes

In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  LogRocket . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  Freshbook  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:18 - Jason Lengstorf - What do you do? 9:37 - Gatsby refresher Gatsby is statically generated gatsby-config.js file determines which plugins you use gatsby-node.js allows us to hook into Gatsby at different points and do things like source content and dynamically create pages gatsby-browser.js contains code that should hook into browser events 13:54 - Gatsby themes Layouts in Gatsby are done the same way in React - simply create a component with children How is this different than a plugin? Is it a collection of plugins? How do you share themes? Can they include functionality (plugins?) Like Markdown rendering? What about a theme that needs a UI once activated? What about custom fields for Gatsby? Do you foresee a marketplace like WordPress themes? Are there some themes already out there? What will come for themes soon? 34:07 - Questions about Gatsby What do you think about WordPress? E-commerce? How do you make money? Suggested way of doing dynamic things What is the future of Gatsby? Links Gatsby Jason Lengstorf Livestream Progressive Disclosure of Complexity Gatsby Themes Sanity Gatsby + Sanity.io Snipcart Axios Algolia Netlify Airtable <a href="https://hopein

Mon, June 03, 2019

Hasty Treat - Workshops

In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Show Notes 3:00 - Types of workshops Public Private 4:29 - Choosing a topic Create original content Create custom content for companies 5:55 - Building content Choose seven to eight different little things ES6 Progressive web apps Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application Gatsby website React Beer application React Notes Application Process: Build the app Rewind back to starter files Build it again while writing notes Follow your own notes to see if it makes sense 13:25 - General information How long should it be? Fixed price vs split cost How many people? 16:46 - Other Tips: Break away from your app and show other apps using - gives better context Stop often and ask if anyone needs help Give large breaks Give challenges for those who need more to do Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, May 29, 2019

Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!

It’s another Potluck! In this episode, Scott and Wes answer your questions about CSS, Angular, Svelte, dev job preparation and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  Sanity . Get an awesome supercharged free developer plan on  Sanity . Show Notes 3:23 - Q: How big is too big for state? I have an object of around 1000 items which will be used in a search box on the frontend of my site, but the list of items won’t be updated very often. What is the most efficient way to store these items and deliver them to the browser? Would you use state, a JSON object, a MongoDB document or some other way I haven’t thought of? 7:17 - Q: How much do I need to know before I start applying for dev jobs? 9:26 - Q: Do you folks have any opinions on Skeleton loaders, and any thoughts on how best to implement them? At my day job we’ve recently implemented skeleton loaders in a way that inherits the parent styles. Would love to know if there’s any best practices for this or ways we can improve our setup. 13:01 - Q: Do you think we still need to use CSS resets like normalize and sanitizer? 14:56 - Q: Scott, can you tell the story of how you landed an interview for a job in Japan? I am moving to Japan next year and wondering how that opportunity arose for you. 20:04 - Q: Do you guys have an opinion on angular good or bad? Or is it that you’re more comfortable and have used React and Vue more often, so they’re largely at the center of any framework discussions? 22:54 - Q: Could you talk about naming and structuring files/folders in your applications? How do you name components and folders? Do you follow some sort of path of how to structure files in a web app? 29:01 - Q: Do you think that Node is almost too powerful to handle some of the simpler tasks (a site that just needs a contact form for instance), or am I just missing some very simple configuration? It seems like other languages, such as PHP, might be better suited for some of these simple tasks and Node is really just meant for larger scale applica

Mon, May 27, 2019

Hasty Treat - Knowing Your Weaknesses

In this Hasty Treat, Scott and Wes talk about how to identify and work on your weaknesses. Logrocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  LogRocket . Show Notes 2:45 - Why care about weaknesses? If we avoid the things we’re afraid of or bad at we’ll always grow in lopsided ways 7:32 - As a developer What skills / languages are you not good at or afraid of? 14:06 - As an employee Communication Company and personal goals Efficiency Compatibility 16:54 - As a human How you treat people Sharing your time What you’re neglecting Your living space Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, May 22, 2019

CSS the 😎😎😎 Cool Parts

In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS in 2019. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at  sanity.io/create . Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 2:28 - Clip path 6:35 - Filters 16:24 - Background mix blend mode 21:47 - Border images 25:46 - Multiple background images 27:47 - Multiple background gradients 28:25 - Radial gradients 29:06 - Multiple box-shadows 34:30 - HEX + Alpha 40:41 - Viewport units 42:17 - Calc 44:32 - CSS variables 47:44 - Text decoration Links Can I use Clippy - CSS clip generator CSS Filters Tweet: Using  mix-blend-mode:multiply CSS blend mode generator Lea Verou Codepen - Scott’s digital text animations Steve Schoger Mother-effing HSL Diana Adrianne ××× SIIIIICK ××× PIIIICKS ××× Scott:  Solar string lights Wes:  Digital Calipers Shameless Plugs Wes: <a href= "https://dillinger.

Mon, May 20, 2019

Hasty Treat - AMA - Our Wives, Careers Outside Tech, and Favorites

In this Hasty Treat, Scott and Wes are back with another AMA. This time they talk about their spouses, careers outside of tech, lots of favorites (movies, colors, clothes), and more! Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out  https://clubhouse.io/syntaxpodcast  and get your first two months free. Show Notes 2:58 - What do your wives do? 6:40 - If you had to choose a different career, what would you do? If you started learning another (programming) language today, what would it be? 11:50 - Favorites (e.g. colors, movies, brands, etc.) 18:08 - Who inspires you? 26:19 - What’s your ratio of client work, learning new tech, and teaching via your courses, talks or  Syntax.fm ? You guys seem awfully busy, and it’s making me feel kinda lazy. Links Pigeonhole Live Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, May 15, 2019

Side Hustles with Courtland Allen from Indie Hackers

In this episode of Syntax, Scott and Wes talk all about side hustles with special guest Courtland Allen, from Indie Hackers! They talk about the story behind Indie Hackers, how to start your own side hustle, where to find ideas, listener questions, and more. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  LogRocket . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  Freshbooks  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:05 - What’s the back story behind Indie Hackers? 5:30 - What is a side hustle? 11:21 - How do you validate your idea? 13:15 - What are some different types of side hustles? 31:55 - What about people who don’t like marketing? 33:57 - What are some important pieces of side hustles? 39:04 - How do you sell a business? 42:40 - Listener Questions: Q: How do you stop the side hustle from affecting your main job in regards to things like overtime, sleep and commitment? Q: Should you frame yourself as a one-man-band or as a company? Q: Have you heard stories of people living in cheap places, making bank? Are there any white whales you have been chasing to interview? Links Carrd Balsamiq Mockups Flickity Nomad List Evan You Evan You Patreon Park.io Making $125,000 a Month as a Solo Founder with Mike Carson of Park.io Patreon Drift Stripe ××× SIIIIICK ××× PIIIICKS ××× Courtland:  Post-it Notes  and  Poor Charlie’s Almanack: The Wit and Wisdom of Charles T. Munger Scott:  Akimbo Wes:  Elastic Wallet

Mon, May 13, 2019

Hasty Treat - The SHADOW DOM

In this Hasty Treat, Scott and Wes talk about Shadow Doms - what they are, the individual pieces involved with them, why they’re important, and how to get started using them. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry  and using the coupon code “tastytreat”. Show Notes 2:41 What is the shadow DOM? 4:25 What elements are shadow DOM? 5:47 Styling shadow DOM elements 8:54 Creating your own 9:22 Frameworks Links Using shadow DOM Shadow DOM v1: Self-Contained Web Components Polymer Svelte 3 Wildhoney - ReactShadow Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, May 08, 2019

Travis Neilson on Skills Gap, Design, Focus and Working at Google

In this episode of Syntax, Scott and Wes talk to Travis Neilson about his career at Google, the challenges he faced, how to choose projects tips for devs wanting to get better at design, and more. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting  stackbit.com/syntaxfm . Sanity - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing  npm i -g @sanity/cli && sanity init  in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 2:43 - Career path On ambitions and where it all started 23:15 - Being all in On how to choose your next project 33:31 - Working at Google On the day-to-day at Google, the challenges of a big team, and constraints 43:23 - Design tips for developers Advice for devs who want to get better at design but are struggling Thoughts on CSS frameworks The one thing devs often get wrong about design Links Travis Neilson’s Website Travis Neilson’s Podcasts Helvetica — Gary Hustwit How one typeface took over movie posters Just My Type: A Book About Fonts Work-Life Balance is a Joke ××× SIIIIICK ××× PIIIICKS ××× Travis:  Cults and Extreme Belief  and  Google Method Podcast Scott:  Sony Noise Canceling Headphones WH1000XM3 Wes:  Little People Big Dreams Book Series Shameless Plugs Wes’ Courses

Mon, May 06, 2019

Hasty Treat - Async + Await Error Handling Strategies

In this Hasty Treat, Scott and Wes discuss different error handling strategies. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:07 - Try / Catch This can be done at call time or inside the function 4:10 - Higher Order Function Makes a function that returns a new function which in turn calls your original function (but with a  .catch  chained on) 7:46 - Handle the error when you call it Use async/await but chain a  .catch  onto the end 9:03 - Node.js Unhandled Rejection Event process.on('unhandledRejectionEvent', callback) 9:40 - What do do with those errors Send to error tracking service Possible to give the user a reference number Display good error text to user Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, May 01, 2019

Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!

It’s another potluck episode in which Wes and Scott answer your questions! This month - Media Queries, NPM Vulnerabilities, Web VR and AR, Fullstack JS vs JAMstack for freelancers, switching jobs, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:46 Q: I recently started a static site so I want as much of the site as possible to change layout with just CSS for responsive design. I am comfortable with media queries but find often times the design is very different between sizes. It is easy to tame the complexity of repeated data for the different component views keeping everything in sync but is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in the static HTML have any effect on SEO? 7:08 Q: How should a mid developer know when its time to leave the current company? Is tech stack (e.g frameworkless) a decent reason even though he/she is happy at the place, but feels like they are not growing enough? 11:19 Q: Should I worry about the critical vulnerabilities when installing an NPM package? 15:06 Q: I’ve had the idea for styling one site two different ways (professional/artistic) and giving visitors a button to toggle between the two. Too gimmicky? Secondary: how did you pick your brand colors? 20:19 Q: Any SICK TIPS on career change? I’m a full-time employee with two kids and a lovely wife, who wants a fulfilling career. I throw as much time in as I can to study, but I feel like it isn’t enough to apply for jobs. 20:49 Q: Within the next two years, how well do you think WebVR and WebXR technologies would fit within mainstream web development (think A-Frame, SparkAR, React 360 in normal websites and applications)? 30:39 Q: Should I learn Fullstack JS or JAMstack for freelancing? 35:34 Q: Is front-end development dying? 37:30 Q: How do you deal with CSS-in-JS when you have one-off stuff, or coupled components/sel

Mon, April 29, 2019

Hasty Treat - AMA - Money x Investments x Online Presence x More!

In this special Hasty Treat, Scott and Wes answer your questions about money, investments, online presence and more! LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Show Notes 2:33 - Besides coding/teaching, do you have any another source of income (stocks, bonds, crypto, etc.)? 9:03 - How do I build my online presence? 13:05 - What’s your favorite tasty treat (as in actual food)? 16:33 - Wes, lets talk about the + symbol that you use to start the prompt for Cobalt2 — whats up with that? 18:41 - How do you get out of a rut? Links Canadian Couch Potato Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, April 24, 2019

What’s New in Web Development

In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out  https://clubhouse.io/syntaxpodcast  and get your first two months free. Show Notes 5:38 - New Promise static methods Promise.all Promise.race() Promise.allSettled() Promise.any() 10:16 - Lazy loading images Addy Osmani’s Lazy-Loading blog post 14:25 CSS Houdini aka JS in CSS CSS Houdini Experiments 20:32 - Subgrid Syntax 109: Hasty Treat - CSS Grid Level 2 aka Subgrid Subgrid is coming to Firefox -  Jen Simmons Bugzilla 24:31 - Native modules in browser type="module" dynamic import() 27:08 - Node Native Modules update package.json will now have a type entry where NodeJS - Plan For New Modules Implementation New ESM Implementation 29:17 - PWA install app and Google PlayStore Already shipped in Chrome Java API that communicates through services with Chrome Trusted Web Activity aka TWA All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods Already existing TWAs include Twitter Lite, Google

Mon, April 22, 2019

Hasty Treat - CSS Frameworks

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting  stackbit.com/syntaxfm . Show Notes 2:52 - What is a CSS framework? Pre-written CSS that takes over the basic styling of your app Can include just utilities or lots of styles (minimal to overboard) Twitter Bootstrap and Zurb Foundation were the pioneers Follow different CSS styles from “functional CSS” to utility-first to BEM 7:33 - Functional (aka Utility) based Tachyons Tailwind 9:59 - Preprocessor based Bootstrap 11:33 - Styled Components based Rebass Styled Systems Facepaint 15:50 - Why use one? Makes styling FAST Makes hard things easy Some, like Bootstrap, have themes Keeps your own CSS minimal and organized Built on an established system Lots of people use the same CSS 19:22 - Why not use one? CSS class hell Stops you from learning how CSS works Size (not all have this problem) Brotli, Purify CSS You will be overriding a ton of it You like exclusively writing the code you need and nothing else Links Jamstack Gatsby Hugo Jekyll Bootstrap Foundation Tailwind CSS Tachyons Styled System REBASS Facepaint Brotli Purify CSS Cloudflare Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Ins

Wed, April 17, 2019

9 Ways to Stay Sane While Working Remotely

In this episode of Syntax, Scott and Wes talk about working remotely — problems, challenges, and how to keep yourself sane, productive and efficient. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 4:34 - Find your spots Coffee shops Cafes Library 7:40 - Deal with Distractions Log out of Twitter/Facebook/Instagram Delete Apps — only use the browser Put phone and computer on “do not disturb” Focus App 11:33 - Prioritize your tasks Drifting is possible when it isn’t clear what you need to do If you don’t have someone telling you what to do, it can be hard to get started Todo lists 17:15 - Make time to be social Go to meet ups Chat in Slack or Discord rooms Talk to people at work spaces 21:48 - Get fresh air Go for a walk Open the windows 24:03 - Get moving Hit the gym Do push-ups in your office 28:09 - Have a separate work space Designated office Don’t work from the couch with the TV on Clean your damn office 😂 38:16 - Act like you are going to work Dress well Fix up, look sharp - get yourself ready to go 40:44 - Take Breaks (not too many, not too long) Some people like the Pomodoro Technique Take a lunch break away from your computer Don’t make a break longer than 15 minutes or so Links Focus Discord Todoist Getting Things Done Eat That Frog The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing ××× SIIII

Mon, April 15, 2019

Hasty Treat - Cranky Developers

In this Hasty Treat, Scott and Wes talk about cranky developers — those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a “fad” or unnecessary. Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:20 - How to deal with cranky devs Many experienced developers prefer older, stable technology for a reason. They have been through it before. 7:14 - Questions to ask when considering new tech: Is it better for the product? Is it better for the users? Is it better for the business? Is it better for the developer? 16:39 - How to convince them: Proof of concept - show them it’s better. 18:28 - Things to acknowledge: There are risks in changing technologies. There are costs - training, tooling, hosting. 21:20 - Some people are not interested in improving themselves They got the job they want and are short sighted about the future. You can appeal to management about making progressive choices. If management isn’t interested, you should look for a new job. Links Sass Backbone Babel Gulp Babel ES6 React for Beginners Missive Swix React Flux Glamorous PayPal GraphCool Facebook Netflix MJML Juice Tweet us your tasty treats! Scott’s Instagram

Wed, April 10, 2019

Syntax Live React Edition

It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram  @thearmourynyc  and check out their website  TheArmoury.com . Show Notes 6:54 - Who’s Snackin’ On React Guess which of these websites have their homepage partially or fully built in React? EltonJohn.com  or  ArianaGrande.com ? Ferrari.com  or  Lamborghini.com ? Starbucks.com  or  Dunkindonuts.com ? WayFair.com  or  Ikea.com ? Walgreens.com  or  Cvs.com ? 10:55 - Hook’d on Hooks Wes: useSocket useStaticQuery (gatsby) useKeyPress Scott useLocalStorage useClickOutside useMeasure useGesture 17:47 - This, That, Both, or Neither? Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read? Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland? Easy Peasy: A React state library, or children’s spoon set? Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children? Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear? Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV?

Mon, April 08, 2019

Hasty Treat - Tips For A Good Portfolio

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off. 6:19 - Include list of technologies used 7:25 - Include list of problems solved 7:48 - Use company logos (if allowed) 9:13 - Show mockups on modern laptops/phones 10:04 - Show your work (mockups, sketches, layouts, etc.) 11:39 - Keep it updated 12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on. 14:11 - What about using side projects and tutorials? 16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these. A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice. Links Wordpress Google Ford Air Canada Dribbble Github Instagram Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, April 03, 2019

Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!

It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:21 Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)? 5:12 Q: Do you have any suggestions for picking a headless CMS? 8:55 Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search? 15:13 Q: How much importance would you place in the design of a resume? Is it worth the cost? 21:09 Q: With the new React Hooks and Context API, do we still need Redux? 25:37 Q: If either of you could change anything about your personal tech stack, what would it be and why? 29:07 Q: Do you prefer to use React’s  defaultProps  or plain JS  default function parameters  to give your component’s props some default values? 30:44 Q: You guys chat CMS sometimes - why no love for Umbraco? 35:53 Q: I’m ready for a new challenge, how do I break this to my employer? 38:16 Q: What’s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }? Links Udacity Coursera Contentful Ghost Prismic Strapi HeadlessCMS Sanity WordPress <a href="https://w

Mon, April 01, 2019

Hasty Treat - Bike Shedding

In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Show Notes 3:03 - What is Bike Shedding? Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished. 4:39 - Tabs vs spaces Two spaces 5:50 - Single vs double quotes Single in JS, double in HTML 7:05 - Semicolons or not Semicolons 9:01 - Grouping/ordering CSS properties Wes: Format Scott: Alphabetical 12:35 -  var  vs  let  vs  const Scott:  const  for life —  let  when needed Wes:  const  by default — change to  let  when needed 14:24 - Default vs named exports Use both Mix-n-match 15:58 - Should designers code? If interested, sure 17:58 - Which front-end framework Whichever one best suits your needs 19:30 - Vim/Emacs vs Atom/VS Code/Sublime VS Code 21:53 - Small perf wins Micro optimization often aren’t needed 25:14 - Browser support If you’re required to support it, then support it 25:47 - Block formatting Function block Else on a new line vs else after block 29:07 - Trailing comma Links Law of Triviality React Vue.js AngularJS Ember.js Vim Emacs Atom Sublime VS Code Tweet us your tasty treats! Scott’s Instagram <a hr

Wed, March 27, 2019

The VueJS Show (Scott teaches Wes)

In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out  https://clubhouse.io/syntax  and get your first two months free. Show Notes 2:22 - What’s the deal with VueJS? Combines ideas from Angular 1, React and Blaze Ease of Angular 1 App structure of React 8:02 - Components Template syntax is similar to handlebars aka {{stuff}} v-bind:property v-bind:property or simply :bind allows you to dynamically bind a value to a property Props Props must be declared before they can be used in a template. Script tag Where imports happen Where props are defined, computed properties, action events and lifecycle Actions v-on:click="doSomething" @click="doSomething" These will run a doSomething event defined in your script export via methods Lifecycle How does data fetching work? CSS Can be scoped to file by adding  to your property Global Registration You can register a global component and not have to import it 36:38 - Features CLI Easy to use when creating new projects Animations Baked in to core A transition component wraps your code and just have a v-if on the element you are transitioning There is also more intense javascript options via v-on Routing 1st party router vue-router with support for 3rd party routers Global State Vuex 45:57 - Ecosystem Nuxt — AKA Next.js for Vu

Mon, March 25, 2019

Hasty Treat - Why Use a Frontend Framework at All?

In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more! Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting  stackbit.com/syntaxfm . Show Notes 3:08 - What is a frontend framework? JavaScript based Controls applications such as: Routing Rendering Data Fetching Examples: React Angular VueJS Ember Backbone Svelte 5:54 - When to use a frontend framework The Link between your JavaScript data and the DOM (your HTML) isn’t live The use of frameworks makes re-updating the DOM (after the initial variable update) easy You need an opinionated way to handle complexity Example: You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button Event Handlers - binding and un-binding Your client wants a fast, modern experience Seamless routing and page transitions Fast prototyping Access to battle-tested libraries Security Perf 14:24 - When not to use a frontend framework When using CMS like WordPress and Drupal A medium amount of JavaScript is needed - Vanilla JS will work fine Modals Slideshows Form submits Static pages, no JS functionality Updating an existing project 17:20 - Why can’t I just use jQuery? Vanilla JS contains all of jQuery’s available DOM APIs Frameworks provide structure Organizes code for big projects Links Syntax 039: Is jQuery Dead? Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @Synt

Wed, March 20, 2019

How To Find Freelance Clients

In this episode Wes and Scott talk about how to find freelance clients — tangible things you can do to position yourself and set yourself up for success. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting  stackbit.com/syntaxfm . LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Show Notes 1:27 - Question from Andreas Trattner: I am a backend developer with 4+ years experience working on large systems in Europe and am considering moving toward freelancing/contracting. However, I find it difficult to discover quality opportunities. Any tips you can share on how to strategically get projects? There isn’t a secret trove of work, and there’s no one way to do it. 4:50 - Relationships Trust and relationships rule all. The best paying gigs are never advertised. Who should you know? Other developers How? Meetups, Conferences, Twitter, Slack rooms, Friends Tip: Volunteering is a great way to get in to conferences, plus you often get to know people Tip: If you are friends of a friend who gets a lot of work, as for a introduction Designers and marketers You usually work together How? Twitter, Email, Dribbble, Instagram Project managers How? Cold emails, tweets Office managers Life blood of the office - they know everyone Often move into other roles How? Meetups, previous employees Entrepreneurs Lots of connections, often switching gears How? Demo camps, Facebook marketing groups Venture capitalists Have dozens of companies and tons of connections How? Demo camps, introductions, cold email 19:08 - Display of expertise It certainly is an option to just be really freaking good at what you do Speaking at conferences and local meetups Working on open source Helping in chat rooms Posting guides Maintaining docs Offering reviews / Make things public Performance -  Harry Roberts from CSS Wizardry Accessibility -  HeydonWorks </li

Mon, March 18, 2019

Hasty Treat - React Suspense

In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes Not live yet - it may/will change. Be warned! 3:59 - The problem we have with React right now API calls Image loading Code splitting 7:16 - What is React Suspense? First we convert our async data fetching functions into  resources Resources can then be read inside render - above the return Resources can be read from cache Resources can be preloaded into a cache if you anticipate needing them Resources reads are blocking for that function - you can’t return JSX until the resource is read In your component that fetches data, there is no need to maintain a loading state Then, anywhere higher up in that tree, you can introduce a suspense component The suspense component can  detect  if any of it’s children are currently loading data If they are, we can then choose to show a loader via the  fallback  prop We can also choose to  show nothing via the maxDelay prop  — this is helpful for fast connections that shouldn’t see the spinner for a short split-second 15:20 - Support React.lazy and suspense for code splitting is already here The React.lazy function lets you render a dynamic import as a regular component Loadable Components is recommended if you need splitting with SSR Data Resources is not here yet Links React 16.x Roadmap Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook <a href="ht

Wed, March 13, 2019

Bootcamps vs School vs Self-learning

In this episode Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills. Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram  @thearmourynyc  and check out their website  TheArmoury.com . Show Notes 3:59 - Our experiences Scott: Went to college - Go Blue! Worked odd jobs while self teaching Was mentored and taught more while working at my first job Self directed since then Started teaching via LUT in 2012 Wes: Went to university for Business Tech - entirely self-taught Led and created part-time HTML + CSS program at HackerYou Led and created first bootcamp at HackerYou Led and created first JS part-time at HackerYou Been offered jobs at colleges + universities 10:02 - School - $$$ Pros The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding Co-ops can help you find what you like and what you don’t like Life skills that involve you being on your own and figuring things out more You are exposed to interesting people and ideas CS Degree work can open more career doors Professional networking Many companies wont hire you without some sort of bachelor’s degree (this might change) Cons Not everyone has the time or money to devote two to five years to school — especially to something they might not end up enjoying Potentially outdated staff and course material Wes was often asked to lead a video editing course, print design course and a web development course Lot’s of distractions 23:10 - Bootcamp - $$ Pros Very fast, lots of info, but can be a bit overwhelming You can get up-to-speed extremely qui

Mon, March 11, 2019

Hasty Treat - Communication Skillz

In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:59 - Why it’s important Projects can live or die by the team’s communication Project timelines can be disrupted leading to big problems with scheduling 5:53 - How to improve communication skills PRACTICE Pay attention to what works Have a system – standups, weekly meetings, etc. Over communicating can be annoying but effective Realize that people can’t read your mind, so having your intentions and timelines public and known is important 9:12 - Building good habits Need to practice Build systems to support new habits 11:04 - Tools we use to communicate Email / Standups Notion GitHub Issues Slack Missive Links Syntax 075: Hasty Treat - Feedback and Criticism Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, March 06, 2019

Potluck - Are classes dead? × Tutorials vs Real Life × CRA vs Next × Scraping × More

It’s another potluck episode in which Wes and Scott answer your questions! This month - are classes dead?, tutorials vs real life, the smart home, developers and mental health, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 1:30 Q: What advice would you give to someone wanting to get involved with the open source community, coming from closed-source full-time work? How do people make time to code on the side and balance a life/family? 5:38 Q: In  Syntax 060 , you mentioned making your life easier as a motivation. How do you get your data from sites that may not have an API? Web scraping? Any tools you’d recommend? 11:34 Q: Do you think React aims toward a world with functional components only or will class based components always play a role? 17:10 Q: Just feedback on the recent Smart Home podcast…I really enjoyed it! I have about 48 (color) HUE lights throughout my home, and use an IFTTT applet for my Ring PRO doorbell, so when someone rings the doorbell, all the lights in the home blink (e.g. so I can see when an Amazon Prime package arrives, or know someone is at the front door, etc…while I’m working and wearing my Bose QC35II’s, and of course listening to your podcast)! I’m a huge fan of the podcast since early last summer (I rarely comment, but you guys are great)! 21:37 Q: What would you do in the event your clients sends you a “thank you” card along with cash that is MUCH lower than you are preparing to invoice them? Would you remove it from the invoice, ask them what they would prefer, etc? I’m stuck in an awkward situation and it doesn’t even cover the hosting costs. 24:39 Q: I’ve heard a lot of good things about Next.js, but what exactly is it? How does it compare to just using the create-react-app? Is it worth it to migrate a small side project that I have to Next.js? 28:26 Q: I take tutorials all the ti

Mon, March 04, 2019

Hasty Treat - Authentication: LocalStorage vs Cookies vs Sessions vs Tokens

In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens and more! LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Show Notes 4:20 - How should we track users? Token based - generally stored in the client Session based - stored on the server Token Based (JWT) 6:00 - Token-based auth Stateless - the server does not maintain a list of logged in users Scalable - you can use serverless functions easily Cross domain Data can be stored in JWT Easy to use on non-web sites like mobile apps Hard to expire tokens — you must maintain a list of blacklisted tokens 7:48 - Session-based auth Stateful - generally you maintain a list of session IDs Passive - once signed in, no need to send token again Easy to destroy sessions 10:48 - How do we identify the user on each request? localStorage or Cookies? A common misconception is that localStorage is for tokens while cookies is for sessions With localStorage, we need to grab the token and send them along on each request With cookies, the data is sent along on each request 11:25 - Security Issues XSS for Tokens - make sure bad actors can’t run code on your site Sanitize inputs XSRF - CSRF tokens are needed Links Cookies vs Tokens: The Definitive Guide Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, February 27, 2019

How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!

In this episode, Wes and Scott talk about life management — the systems and tools for managing all the the busy details of life and work. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 5:00 - Todos GTD philosophy Todoist Things 12:31 - Focusing Focus app Turn off all notifications on iOS and desktop Rename apps Ask yourself why you feel the way you do Should be doing email? Do I need to eat that frog? Why do I not enjoy this? Sticky note on screen or desk 21:27 - How we track ideas, thoughts, and notes Get everything out of your head Markdown files Evernote Notion 27:23 - Calendar and schedule Google calendar USB light switch 33:30 - Goal tracking / Life progression Keep concepts and ideas in Notion Milestones (bigger ideas) are separated Use the system that works best for you 36:58 - Fun things with Notion What is Notion? Cross-linking/referencing between boards Episode calendar and possible episodes kanban Links Freshbooks Sentry Todoist Things Getting Things Done: The Art of Stress-Free Productivity Focus Notion Evernote Bryant Electric USB light switch Bear app Airtable <a id="_SIIIIICK__PIIIICKS__74"

Mon, February 25, 2019

Hasty Treat - Tips to Succeed on YouTube

In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Show Notes 1:55 How YouTube has affected our careers 3:45 YouTube money is just OK 6:28 SEO is king 7:15 The title is most important 8:59 Description is important 11:00 Use Tags. All of them. 12:00 Scheduled content works 13:26 Keeping Viewers 15:20 Pinning comments 15:41 Liking Comments 17:00 Practice Finishing Sentences 17:34 Collaborate when you can 19:00 Use all the features YouTube has to offer 20:44 Don’t get sucked into the BS Links TubeBuddy Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, February 20, 2019

Gatsby vs Next

In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more! LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram  @thearmourynyc  and check out their website  TheArmoury.com . Show Notes 5:07 - Server Side Rendering Next.js will render on demand — this allows you to have server rendered pages on demand. Think of a blog website — publish a new blog post and it will immediately start working. Authenticated pages can be server rendered, and thus, pre-loaded for better performance. Gatsby runs at build time only — so you need to have all of your data ready at build time. Pro: This makes for very fast page load. Con: Large websites can take a long time to build. Con: Gatsby can do network fetches from the client, but these lose the benefit of SSR. Ease of SSR: Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component. This will probably get easier with Suspense. Demos are simple, but any real application requires harder config. Gatsby is Easy Peeezy! 11:09 - Data Next.js is unopinionated. Like React, it doesn’t care where your data comes from. getInitalProps(); Gatsby has a number of “source” plugins which will pull in data from sources — markdown, WordPress, API, file system. Once you have that data sourced, you can query it with GraphQL. 22:50 - Routing and Creating Pages Next.js makes you create a page in a pages directory. You can nest these as deep as you like. If you want to pass query params, you must do so with a ?query=string. There are several third-party options for getting around this that require a node server. Gatsby allows you to programmatically create pages with their createPage API. For both navigating between pages, they make a Link Component available. 30:49

Mon, February 18, 2019

Hasty Treat - Better Living Through Side Projects

In this Hasty Treat, Scott and Wes talk about side projects — what you can learn, why they’re great, how to come up with ideas, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:17 - Why? Keeps you sharp It’s actually useful Try new technology 5:28 - How to come up with ideas What sucks in your life? How do you get a competitive advantage in life? 12:10 - Quick and dirty tech Next.js Express diskDB Meteor Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, February 13, 2019

The Smart Home

In this episode, Wes and Scott talk about the Smart Home — all the different tech available, how it works together, pitfalls to avoid, hardware, software, and more! Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting  stackbit.com/syntaxfm . Show Notes 2:25 - The tech Wifi devices Zigbee Can operator on low power Usually Cheaper Water Sensor, door sensor, temperature iOS HomeKit sucks You need an Apple TV or iPad to access outside of your house 9:13 - Controlling your smart home Smart Things Home Assistant Host your own Lots of add-ons You need to babysit it Android Google Assistant Google Pixel squeeze to assistant is way better than saying “Hey Google”. Google Home Google Home is awesome Custom sayings with IFTTT Custom via Routines Alexa 23:52 - Software Stringify IFTTT Basic automations Makers accounts Web hooks to trigger actions Homebridge Make non-iOS stuff work with HomeKit Swipe up control is nice 28:15 - Hardware Light Switches Leviton Lutron Bulbs LIFX Philips Hue AMAZING Much cheaper now than before Blinds Chromecast  — turn the TV off Plugs Wemo Leviton Sonoff Power stri

Mon, February 11, 2019

Hasty Treat - How To Email Busy People

In this Hasty Treat, Scott and Wes tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:05 Subject lines 11:26 The body 14:33 Best practices Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, February 06, 2019

Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More

It’s another potluck episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more! Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Techmeme Ride Home Podcast From  Techmeme.com , Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can  check out the show here , or search for “Techmeme Ride Home” in your favorite podcast player. Show Notes 1:55 Q: Do you prefer to have your backend and frontend in separate Git repos or together? What are the trade-offs? 5:12 Q: In web dev, what’s the difference between a freelancer and independent contractor? 9:45 Q: Default export vs named export? 11:35 Q: I’m looking to change careers, but I’m 41 this year. Is it too late? 16:12 Q: Have you guys made much use of multicolumn layout? If so, only for text, or have you come up with (or seen elsewhere) any interesting out-of-the-box uses? 20:11 Q: Since you publish your courses’ source code on Github, what do you think about people using that to learn instead of buying your course? Is it an intentional decision, or is it a compromise you’re willing to make? 23:52 Q: When is a certification needed for both jobs and side-projects? 29:35 How do you deal with spammers filling out forms? 34:05 Q: Could you better explain what a slug is? I’ve heard the term thrown around on a number of your episodes, but I don’t really know what it means. 37:44 Q: I am currently going through some currency conversion stuff for a project, what would you recommend to use for international conversions? Links Sanity <a href= "https://itunes.apple.com/us/podcast/techmeme-ride-home/id13552

Mon, February 04, 2019

Hasty Treat - Code Quality Tooling Part 2

In this Hasty Treat, Scott and Wes continue their discussion about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Show Notes 2:28 Typescript and Types 5:42 Jest and Testing 7:48 Exceptions & Error Tracking Links Sentry Log Rocket Rollbar Jest Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, January 30, 2019

The Freelance Client Lifecycle - Part 2

In this episode Scott and Wes continue their discussion about the freelance client lifecycle—from design and development, to project hand-off, and everything in between. Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:47 - Design Collect all assets from your client Logo Brand guidelines List of likes and dislikes Create initial look and feel Don’t show client too early—they can be distracted by little unfinished things Back up the “whys” of what you did. Otherwise, it’s just a pretty picture and and the client only thinks about it in terms of taste. Remember, you are the expert they hired, so it’s not totally subjective—you have the expertise and you need to flex that. This button is teal because it’s your call to action—this is the button that makes you money so we want to highlight that Grey text on white background is hard to read—you’ll be leaving people out if you do this. When possible, draw circles or golden ratio lines around everything ;) Be prepared for non-standard feedback E.g. this feels cloudy, can it look more sunny? Please make it pop, etc. Don’t get offended by feedback on creative work Clients didn’t go to art school and don’t know about good feedback. Clients will ignore all finished aspects of a design and only focus on the one minor thing that’s incorrect. Revisions 17:58 - Development Clear requirements make development much easier. Sometimes this starts at the same time or in the process of design. Only show dev progress if client is capable of understanding dev process. Showing a developed site too early can cause clients to worry about visual aspects that aren’t yet in line with the design. Showing to early is also a recipe for a feedback list of things you already know. Give regular progress updates, as previously established. Make it happen on a schedule so expectations are set and so you won’t forget. Stick to your timeline! Clients don’t care about technical jargon. Don’t

Mon, January 28, 2019

Hasty Treat - Code Quality Tooling

In this Hasty Treat, Scott and Wes talk about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:11 - ESLint / JSHint / Linters in general Eslint took over as a flexible solution for code style and quality Use plugins and presets to set your rules for different types of project Don’t be afraid to tweak rules, they are not the word of god 10:55 - Prettier Strictly formatting Can work with or without ESLint Provides an enforceable standard for teams Configurable Prettier for CSS, PHP, GraphQL, etc. 18:46 - VS Code Red underlines like spellcheck for code Tooltip for lint errors Fix on save vs fix on command Links ESLint JSHint Prettier Wes’ dotfiles Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, January 23, 2019

The Freelance Client Lifecycle - Part 1

In this episode Scott and Wes talk about the freelance client lifecycle—from gathering requirements, to project hand-off, and everything in between. Techmeme Ride Home Podcast From  Techmeme.com , Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can  check out the show here , or search for “Techmeme Ride Home” in your favorite podcast player. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at  https://logrocket.com/syntax . Show Notes 03:29 - Gathering Requirements Probably the most important part of the process. If you botch this, you’ll be dealing with change orders and scope-creep throughout the entire project. Poor planning is why agencies have project managers and why many freelancers hate their clients. Ask lots of questions Get lots of examples Break down each page into functionality Ask about budget Clarify who will be updating the site Do this in person if possible 17:00 - Quote Figuring out the quote Break it down into major functional areas that don’t necessarily depend on each other. Multi-staged quotes are great because if it’s too expensive, the client knows they can add additional features later in the project. Explain the tech you will use in relation to how it will help their business, or how easy it will be for them to manage. Presenting the quote List what will be included List what won’t be included Make your quote valid for two weeks Create a template that looks professional Our agency had a professional template, printed on heavy paper in an embossed folder with our logo on it. You don’t have to go this far, but experience matters. Think Apple. You can quote more if you have a higher perception of quality. 30:20 - Timelines Timelines should include hard dates. You should have a “hard on” and and “hard off”. Assume 24-hour turnaround on questions Be generous with your estimates. Under promise, over deliver. Quoting time is a huge skill 35:58 - Contract You best have one S

Mon, January 21, 2019

Hasty Treat - Tidying Up Code #MarieKondo

In this Hasty Treat, Scott and Wes talk about tidying up your code - why it’s important and how it can make your (dev) life better. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:24 - Removal Unneeded comments Unused CSS Unused Functions 8:06 - Organizing A system that works for you Know when to break things out into a new file, components, functions otherwise Index file works sometimes - other times it’s too much work 11:45 - Tiding Up Refactoring bad/old code Non-ironically, does this code spark joy? Unused Functions Add in comments Folding - use a code formatter CSS Links Tidying Up with Marie Kondo Better Comments VS Code Prettier ESLint Nicole Sullivan - Object Oriented CSS Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, January 16, 2019

Tips for Work Life Balance

In this episode Scott and Wes talk about work life balance. These tips aren’t hard-and-fast - part of the beauty of being a web developer is that you do get to enjoy some flexibility. Work is a big part of our live and these are tips that will hopefully allow you to get the most enjoyment out of both work and life.   Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax .   Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the "How did you hear about us?" section. Show Notes 8:06 - Know when you work best The 9-5 isn’t for everyone - you know when you work best, so use that to your advantage 9:39 - Work when it’s time to work, life when it’s time to life Don’t do laundry during work time 11:08 - Make it clear to family members when you are working Wishy-washy in-between can cause tension - are you working? Can I interrupt you? Working after hours Text if you need me 14:34 - Have a defined space for work If I bring my laptop downstairs, I don’t bring a charger Clean yo nasty desk space It’s a mental shift when you sit down - “okay now I am working” 21:14 - Know how to “zone it” Headphones Music or podcasts Block all distractions Close email Pay attention to what gets you there, when it stops working, change it up 24:46 - Keep hobbies Away from screens Physical or relaxing or both 26:37 - Exercise Good for mind and body Huge gains long term and short term 27:31 - Prioritize your to-do list One reason many people over-work is that they feel they have too much to do Add items to your to-do list when they pop into your head - out of your head, into your system 31:28 - Walk away from difficult problems Your brain will chew on problems as time goes on and help you solve them Literally take a walk outside 34:04 - Meetups, conferences or tutorials Reinvigorate your hunger for coding and make you happier both at home and work Easy to get burned out from working too much (or not paying enough attention to your work) Links Wes’ Head Bob Spotify

Mon, January 14, 2019

Hasty Treat - CSS Grid Level 2 aka Subgrid

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 2 - aka subgrid. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:27 - CSS Grid Level 2 and subgrid CSS subgrid will allow you to place grid-items’ children along the same lines at the parent grid 5:40 - How it works - Why do we need it? What problem do we have right now? Create your grid as normal - you can create columns, rows, named lines, etc. Your grid-item will also be display grid - this is nothing new - just regular nesting of grid The magic comes in when you want to define the rows and or columns of the sub-item. You can inherit the parent item’s grid-rows / columns by simply saying  display: subgrid 11:19 - Browser support It’s about a year out Links Sentry is hiring Grid Level 2 and Subgrid by Rachel Andrew Css Grid Level 2 specs CSS Grid Level 2: Here Comes Subgrid Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Thu, January 10, 2019

Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more! DevLifts — Sponsor DevLifts  - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is  Fit.Start  - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is  DevLifts Premium  - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at  https://studywebdevelopment.com/freelancing  and use the coupon code “syntax” at checkout to get 25% off. Show Notes 1:40 Where is the best place to start with JS coming from WordPress? 5:36 How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.? 17:13 What new skills, frameworks, projects are you look forward to learning in 2019? 21:35 Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests? 28:24 What’s your best tip for young coders to stay productive and not lose time? 32:08 I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing? 37:26 What is React Native? How do people tend to use it? If you want a native and web app, do they share code? Links WordPress Gatsby Javascript30 Dead Man’s Snitch Corntab Syntax106: A Look Forward to 2019 <li

Mon, January 07, 2019

Hasty Treat - CSS Units

In this Hasty Treat, Scott and Wes talk about CSS units (e.g. rems vs ems, px, ch, vmax), when and why you want to be using them, tips and tricks, and more! LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax . Show Notes 2:32 Typography with CSS units 12:04 Pixels 15:17 Viewport units 15:51 ch units 16:35 inch/cm for print 17:19 Percentages 18:10 Media queries 19:41 Flexbox (flex-grow) 20:28 CSS Grid: flexible units: 1fr 2fr Links Sentry Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, January 02, 2019

A Look Forward to 2019

In this episode Wes and Scott take a look back at 2018 as well as a look forward to what’s coming in 2019. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. CSS In Depth and In Motion - Sponsor Electron in Action from Manning Publications  guides you, step-by-step, as you learn to build cross-platform desktop applications that run on Windows, OSX, and Linux. As a Syntax listener, you can get 40% off all their books and courses by visiting  deals.manning.com/webdev  and using the coupon code syntax40 at checkout. Show Notes 3:00 - What was hot in 2018? Tooling got easier GraphQL got easier and more accessible New GraphQL companies left and right CSS has gotten more awesome React Improvement in React Dev Tools JavaScript frameworks overall Edge adopting Chrome engine Microsoft bought Github Vue continues to impress and evolve VS Code continued to get amazing 31:29 - Predictions for 2019 Headless CMS game is going to get really real We’re gonna see rails for JavaScript start making some noise React will continue to see growth Design tools will get more code-y (Figma, etc.) VueJS will continue to see growth Developer Experience Tools will continue to get easier Wasm Code splitting easier ES6 Modules in Node Server Side Hot reloading 41:00 - Scott’s Year in Review Released 12 courses Major growth in Level Up as a platform Hired first employees to work and grow site Greatly improved quality and video production Gave first conf talks and spoke internationally 44:03 - Wes’ Year in Review Released two courses - CSS Grid and Advanced React Started work on JavaScript course Delegated lots of development to contractor Continued to work well with assistant Spoke at lots of confs Live Syntax! Grew Instagram Continued hot tips on twitter 47:00 - BIG ANNOUNCEMENT We’re both having babies! 48:09 - Wes’ Goals

Mon, December 31, 2018

Hasty Treat - CSS and JS Pointer Events

In this Hasty Treat, Scott and Wes talk about pointer events in CSS and JS - what they are, their differences, why you may want to use them, potential downfalls and more! Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing  npm i -g @sanity/cli && sanity init  in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 3:24 CSS pointer events 10:50 JavaScript pointer events 14:24 What are pointer events 17:56 Browser support Links CSS pointer events JS pointer events Pointer events support in WebKit Pointer events Polyfill Wes’ Javascript 30 Course Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, December 26, 2018

CSS Layout

In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. CSS In Depth and In Motion - Sponsor CSS in Depth in Motion from Manning Publications  is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting  deals.manning.com/webdev  and using the coupon code syntax40 at checkout. Show Notes 4:15 When to use position fixed/static/absolute/relative/sticky 15:18 When to use height, width, max-height, max-width, top, bottom, left, right, etc. 21:28 What about relationships between containers and their children? 27:37 What about positioning behaviors of elements like  ,  ,  , etc.? 30:09 Floating and clearing 35:55 Flexbox, Grid and responsive design 36:58 Mobile-first or desktop-first? 41:20 Viewport units - vw, vh, vmin, vmax, etc Links Keycode.info ××× SIIIIICK ××× PIIIICKS ××× Scott:  Last Seen Podcast Wes:  Flying a DJI Tello Drone with React and Node.js Shameless Plugs Scott’s Design Systems Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram <li

Mon, December 24, 2018

Hasty Treat - Where are they now? Part 2

In this Hasty Treat, Scott and Wes continue their discussion of libraries and tech that where super hot in the past, but not so much any more. Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing  npm i -g @sanity/cli && sanity init  in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 3:40 - jQuery UI / jQuery Mobile jQuery UI jQuery Mobile Sencha Touch 6:10 - Flash / Silverlight Flash Cufon Silverlight Netflix Happy Gilmore The Wedding Singer 10:54 - Grid systems 960.gs Golden Susy Bootstrap Foundation 16:02 - CoffeScript CoffeScript Compass 18:18 - Underescore.js Underscore.js Lodash jsPerf 20:04 - Less CSS Less CSS Vue.js Drupal Cappuccino Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include <a h

Wed, December 19, 2018

Potluck - Typescript × E-commerce platforms × Job-hopping × Working for agencies × More

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on Typescript, e-commerce platforms vs custom, working for agencies, job-hopping and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Vue.js In Action - Sponsor Vue.js in Action from Manning Publications  is a great way to learn Vue.js. If you’re looking for a book that will teach you Vue.js from start to finish, this is the one. As a Syntax listener, you can get 40% off all their books and courses by visiting  deals.manning.com/webdev  and using the coupon code syntax40 at checkout. Show Notes 1:20 How do you distinguish between normal and virtual pixels on high dpi devices. How do you call Pixels? Which tools do you use for optimizing Images? 5:02 What are your thoughts on TypeScript (and selfishly, I’d like to learn about using it with React)? Any temptation to try it out if you’re not already doing so? Why or why not? Any resources you’d like to share on TypeScript? 8:35 I have heard you guys say good things about Digital Ocean before, but am reading a lot of bad reviews about them on various websites. Are these just frustrated developers or is there any merit to these claims? 12:48 If you were to build an eCommerce store, given that your business requirements specify that custom functionality is needed, would it be smart to roll your own solution or use Magento/Shopify/Woocommerce? If the later, what is the developer experience like? Which has the greater ability to implement custom functionality for server and client side code? 19:50 I feel like I’m pretty “bos” at starting projects but so terrible at finishing them. As people who finish courses and projects all the time, what is your advice for getting to that finish line? 23:32 Could you please explain how you organize your files? What is the folder structure you use for both your projects and other documents/videos and stuff? 31:38 You guys mention working for “agencies” in the past. As a freelance web developer, what’s the best way to find these agencies, and to be employed by them? Also, can you explain what “agencies” are? 38:14 I once read an interview Wes gave in which he mentioned that frequently changing jobs is the best way to get salary increases. Do you both believe that to be true? Is job-hopping a bad thing? Is the criticism of it justified?<

Mon, December 17, 2018

Hasty Treat - Where are they now?! Gulp, Grunt, Bower, Backbone and Compass

In this Hasty Treat, Scott and Wes talk about libraries that have been super hot in the past, but not so much any more. Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out  contentful.com/syntax  and get a free pair of socks! Show Notes 4:14 Grunt / Gulp 8:56 Backbone / Marionette 13:00 Bower / Components 15:46 Compass Links Grunt Gulp Backbone Marionette Bower Components Compass Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, December 12, 2018

Not a Clip Show - Episode 100!

To celebrate episode 100, Wes and Scott are talking about Syntax - their most popular episodes, stats, Q&A, and a bunch of cool stuff about what it’s been like making this show for 100 episodes. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:45 - Celebrating 100 episodes 04:18 - Our first episode Syntax001 - React Tools 06:23 - Our first sponsor Delicious Brains 09:37 - Most popular episodes 10 -  Syntax074 - 11 Habits of Highly Effective Developers 09 -  Syntax039 - Is jQuery Dead? 08 -  Syntax046 - What’s New in Javascript 07 -  Syntax048 - VS Code Round Two 06 -  Syntax050 - Progressive Web Apps 05 -  Syntax018 - All About CSS Grid 04 -  Syntax051 - Our Workflows: Design, Development, Git, Deployment 03 -  Syntax066 - The React Episode 02 -  Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer 01 -  Syntax044 - How to Learn New Things Quickly 21:35 - Top countries Just passed 3 million downloads 10 - Poland - 38,731 downloads 09 - Brazil - 40,475 downloads 08 - Netherlands - 47,601 downloads 07 - India - 50,724 downloads 06 - Sweden - 55,378 downloads 05 - Australia - 80,654 downloads 04 - Germany - 109,842 downloads 03 - Canada - 138,250 downloads 02 - United Kingdom - 231,835 download

Mon, December 10, 2018

Hasty Treat - Costs of Running a Business

In this Hasty Treat, Scott and Wes talk about the costs of running a business when you’re a solopreneur or solo founder. Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out  contentful.com/syntax  and get a free pair of socks! Show Notes 3:48 - Email GSuite Missive Drip Postmark Mailchimp Mandrill SendGrid Mailgun 10:44 - Transactional Costs Stripe PayPal Braintree 12:31 - Software Sketch Figma Screenflow iShowU DaVinci Notion Todoist Things Principle For Mac Textexpander Transmit Cyberduck 17:03 - Services PO Box 17:18 - Domains Hover Cloudflare Name.com Gandi 19:30 - Backup NAS Dropbox Backblaze S3 22:12 - Labor Assistant Part-time developer Contractors for projects 24:53 - Insurance Prescriptions Dental Optical Critical illness Home insurance is higher because of business 26:51 - Professional

Wed, December 05, 2018

The State of JavaScript 2018

In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the  State of Javascript  - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Show Notes 1:48 What is the State of JS survey 3:58 The tech behind State of JS 12:55 How was the data collected? 16:38 JavaScript Flavors 23:14 Frameworks 31:49 DataLayer 34:53 Backend 40:09 Other Tools 44:37 Opinions 47:48 Awards 49:58 Criticism Links Nivo Gatsby Netlify Reason Parcel Relay Express KeystoneJS Ghost Jest GraphQL VueX Storybook Real Analysis of Angular, React, and Vue ××× SIIIIICK ××× PIIIICKS ××× Sacha: DIY and woodworking Wes:  Alex French Guy Cooking Scott: <a href= "https://www.youtube.com/playlist?list=PLipSUxfAla6D257xn14FgxHaFUyKDMY1

Mon, December 03, 2018

Hasty Treat - Uses for CSS Variables

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at  https://studywebdevelopment.com/freelancing  and use the coupon code “syntax” at checkout to get 25% off. Show Notes 3:25 - What --example-name , represent custom properties called using  var() Overwrite with a more specific style Use JavaScript to append .style.setPropert( How are they scoped? Just like normal CSS Can be set on :root {} Can be set on any element down 9:10 - Why Uses: Can make more sense if used semantically var(–accent) vs var(–yellow) Independent values for things that can’t be broken up: box-shadow: 2px 2px 2px 2px red transform: rotate(var(–rotate)) scale(2); Inline properties can be picked up by regular CSS (color, size, etc.) hey Themes that can easily be changed at runtime for entire app 19:15 - Calculations You can use them inside of calc() Animations 20:10 - Bummers Not super well supported just yet (IE 11) No good fallback other than manual fallback Syntax - Old Browsers, Fallbacks and Polyfills series Part 1 Part 2 Part 3 PostCSS Custom Properties Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter <li

Wed, November 28, 2018

Holiday Gift Guide

In this episode Wes and Scott bring you their holiday gift guide - things, ideas or experiences that would make great gifts for any developer, ranging from a few bucks to a few hundred bucks. Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out  contentful.com/syntaxfm  and get a free pair of socks! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:57 - Foodie Gifts Hot Sauce Merfs Every Cholula Hot Sauce Jalapeno from Trader Joes Blue Top Creamy Buffalo Everything but the bagel Spice Loose leaf Teas from Teahaus.com Wes’ Tea Steeper Scott’s Tea Mug & Steeper Flavored Salts (No link, just go find them) Savory Spice Shop Rainbeers - make it yourself Beer Making Kit Umai Dry Steak Aging and Charcuterie Bags 11:27 - Experiences Knife Skills Class Butchering Class Cooking Class Float tank Subscription Massages 18:15 - Subscriptions Headspace Spotify HBO Go YouTube TV MeUndies Underwear Subscription Memrise LastPass Magazines Mantry Crates Kids Crates 23:07 - Books / Audible BadBlood Beat the bank - for Canadians Only American Kingpin Rich Dad / Poor

Mon, November 26, 2018

Hasty Treat - Should you install a dependency or roll your own?

In this Hasty Treat, Scott and Wes talk about installing dependencies vs rolling your own - the advantages and disadvantages, and how to know when to do either. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax . Show Notes 2:15 - Reasons To roll your own Learning Experience Fun Features Add your own features Lightweight - only use what you need 8:08 - Reasons not to roll your own Battle Tested Actually Tested Time Money Experience 11:27 - Fork Something needs extra features Upstream your changes 13:10 - Some Examples Fetch + function vs Axios Date functions vs Stack Overflow copy/paste Lodash vs your own - try it with map/reduce/filter first, but lots of cases need Lodash Links React PowerPlug Lodash Axios Stack Overflow Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, November 21, 2018

Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More

It’s another potluck episode in which Wes and Scott answer your questions! This month - raising your rates, full stack designers, JWT, VS Code tips, and more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. React in Action - Sponsor React in Action by Mark Thomas from Manning Publications  is a great way to learn React. It’s a clearly written, example-rich book, introducing front-end developers to the React framework and related tools. Not everyone likes learning from a video. If that’s you,  React In Action  is a great book that covers everything you need to know. Also be sure to check out this page for  40% off all manning books and videos . Show Notes 2:29 I listened to your episode on Freelancing and I was wondering how to justify an increase in my hourly rate. You mentioned that you just increased it to $100/hr and nobody griped, but I seem to have a steady stream of clients who want things for free or nearly free and I usually have that fear that if I charge them more, then I won’t get the business. Thoughts? 6:55 I’ve started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of (I’m pretty new and it’s odd to be offered something like this so quickly, no?) if accepting. What do you think? Should I create content for a (small) website that I never heard of or continue with YouTube (or both)? 14:00 I’ve read on Twitter that React.Context can be a good replacement for Redux. Why? 18:40 What’s it like running a podcast?! 24:03 I’ve seen a rise in the term “full-stack designer”. Is this a title you think will become a real thing? Someone capable of overseeing a project from concept to prototype? Thanks! 27:36 What has been the most awkward situation you’ve been in as a dev? 31:20 Do you have any good resources on JWT? I’m unclear when my front end needs to send what to my back end, to ensure my sites and only my sites can get the data requested from my server. Thanks for everything you do! 35:34 How do you move selected text horizontally (or vertically) in VSCode? I’ve seen it in Wes’ videos and I tried to ask him on Twitter, but I’m sure that is a chore to keep up with. I’ve googled a ton, but the o

Mon, November 19, 2018

Hasty Treat - How to become well liked at work

In this Hasty Treat, Scott and Wes talk about how to be well liked at work - dealing with difficult co-workers, being a better co-worker yourself, and general tips for improving your people skills. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax . Show Notes 5:01 - Foster a culture of asking “why” and “how” 7:58 - Show your own mistakes 9:26 - Be understanding of people’s life situations and accommodate them accordingly 11:36 - Be okay with people taking your time 13:10 - Don’t take up other people’s time 15:40 - Be nice 15:57 - Share things 16:50 - Respect personal space 18:08 - Respect people’s time Links Adam Grant - Give and Take: Why Helping Others Drives Our Success Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, November 14, 2018

React Hooks

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 2:30 Function components 4:50 What are React hooks? 8:12 What problem does this solve? 12:00 State hooks 21:50 Context hooks 26:02 Effect hooks 36:46 Reducer hooks 40:40 Ref Hooks 48:00 Libraries already using React hooks Rehooks  → Listing of hook libraries React Spring React Measure Formik Immer 50:30 Resources Dan Abramov’s Talk Harry Wolf Use Hooks Newsletter Awesome React Hooks ××× SIIIIICK ××× PIIIICKS ××× Scott:  Bad Blood Wes 1:  Swindled Podcast Wes 2:  Scrub Brush Drill Shameless Plugs Scott’s Pro Gatsby 2 Course Wes’ Advanced React Course  - use the code SYNTAX for $10 off <a id="

Mon, November 12, 2018

Hasty Treat - How to become a sticker mogul

In this Hasty Treat, Scott and Wes talk about stickers and break down Wes’ entire process for creating and selling his sticker packs. Check out  Bos.af  for more info. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax . Show Notes 6:08 Design 9:23 Printing 16:08 Types of Stickers 19:34 Selling 21:43 Envelopes, stamps and shipping 30:47 Returns 32:42 The future Links Bos.af Patrick DePuydt Alibaba Sticker Mule Shipstation Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, November 07, 2018

Live at JAMstack_conf

This week Scott and Wes are live at JAMstack_conf with games, Spicy JAM Tips, Q&As and more. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax for more info. Show Notes 7:14 - Spicy JAM Tips Set default headers in your request library - this way it comes along for the ride on every request Don’t get hung up on “static” - static sites can be as dynamic as needed Don’t wait to use new tech - progressively enhance and gracefully degrade where needed There are many JAMStack libraries in the sea - there are many different approaches so don’t be afraid to experiment Side projects are key to learning - test out new tech on smaller projects first and get comfortable with it 10:10 - This, That or Both? Evo RX - High end Carbon Fibre Road Bike or Library for composing asynchronous and event-based operations in JavaScript? Jumpsuit - A rap/rock group from Flint Michigan or a minimal React/Redux Framework? Aphrodite - React Styling Library or Best Selling Erotic novel? Yugo - A minimal static site generator built in O-CAML or a super mini hatchback built in the former Yugoslavia? C-Control - A modern state management library for web components or studio headphone mixer? Yakbak - A recordable HTTP testing interface or a popular 90’s electronic toy? Joose - A hip east coast juice bar or a metaobject system for JavaScript? Easy Rooter - A client side object oriented router written in modern Vanilla JavaScript or a drain cleaning plumbing apparatus popular among local plumbers? Aqueduct - A server-rendered ORM and oAuth 2.0 based framework built in Dart or a early 2000’s pop group hailing from Venice Beach? Gort - A 1980’s animated series cartoon villain or a CLI Toolkit for RobotOps written in Go? Raptorize - A jQuery plugin that plays a Velociraptor screech or A popular DIY spray on truck bed liner? 21:13 - Stumped! Question 1: What does “age” console.log to and why? let age = 26; age /= 2; console.log(age); // ?? Question 2: What are all seven types in JS? Question 3: How do you pronounce “specificity”? Question 4: What is event delegation and when might you want to use it? Question 5: What is CSS @supports for? Question 6: An arrow function takes in an unlimited number of arguments - how would you capture them? Question 7: What is the difference between .slice() and .splice()?

Mon, November 05, 2018

Hasty Treat - Stumped! 03

In this Hasty Treat, Scott and Wes are back for another edition of Stumped! where they try to stump each other with interview questions. Today’s questions are from  Flashcards for Developers . EmailOctopus - Sponsor Email marketing for less, via Amazon SES. EmailOctopus sends your emails through Amazon’s Simple Email Service (SES), saving money without sacrificing deliverability. With simple setup and all the features you would expect, EmailOctopus is as flexible as you need it to be. Get started today at  emailoctopus.com/syntax  and get your first three months free. Show Notes 4:03 What’s the difference between synchronous and asynchronous code? 5:56 What’s the difference between .call and .apply? 7:08 How do you share code between files? 8:18 What’s the difference between double equals and triple equals? 10:40 What’s the difference between null, undefined, and undeclared? 14:18 What is the event loop? Philip Roberts - What the heck is the event loop anyway? 16:02 Why is extending built-ins never a good idea? Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, October 31, 2018

Pre-launch Checklist

In this episode Wes and Scott discuss their pre-launch checklists. They talk about performance, accessibility, compatibility, SEO, analytics, and more - all the things you should check before launching something to the world. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. .tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out  .tech Domains . Syntax listeners can get 90% off both one-year and five-year registration by visiting  go.tech/syntax  and using the coupon code “syntax”. Show Notes 1:45 - Overall Let robots do the work for you - use auditing tools Lighthouse SEO Checkers Accessibility checkers like  axe 2:58 - Performance Compress those images Build process Cloudinary ImageOptim imgIX Minify Code Splitting Smaller bundles where it makes sense A future where it’s done for us Run page speed tests like  Google PageSpeed Insights Don’t service worker on launch Syntax Ep 50 - Progressive Web Apps 11:43 - Compatibility Test on actual browsers that need to be supported Ask people to check on their devices Use a service like  Browserstack Browser resolution and ratios Cache busters 16:00 - Sales / Credit Cards Use package.lock Have multiple people test your checkout Make sure your company name is listed on customer’s credit card bills Have a phone number listed for disputes 24:55 - Tips from the Trenches Secure API endpoints Scale up server just in case Early acce

Mon, October 29, 2018

Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 3

In this Hasty Treat, Scott and Wes conclude a three-part series about old browsers, fallbacks and polyfills. In part three, they talk specifically about transpiling and polyfilling. VueSchool.io  — Sponsor Check out  VueSchool.io’s  new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit  VueSchool.io/syntax  and get your first month for only $5. Show Notes 2:20 - Polyfills and Transpile 5:18 - Back in the day Border-radius htc hack PNG fix for transparent PNGs Flash for custom fonts Cufon and SIFR 10:48 - JavaScript Polyfills Features are polyfilled MDN Polyfill Core-js Polyfill.io HTML5 Cross Browser Polyfills 13:47 - JavaScript Transpile Syntax is transpiled babel-preset-env Babel has plugins and presets Meteor bundle to different browsers on demand There are polyfills for most things, but performance can be an issue Resize observer Intersection Observer Some things can’t be done with either New browser APIs Service workers, device access, inline video on old iOS, etc. Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, October 24, 2018

Potluck - Working with designers × Is WordPress Crap? × When to stop working × More

It’s another potluck episode in which Wes and Scott answer your questions! This month - working with designers, criticisms of WordPress, avoiding burnout, time management, and more. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. .tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out  .tech Domains . Syntax listeners can get 90% off both one-year and five-year registration by visiting  go.tech/syntax  and using the coupon code “syntax”. Show Notes 5:05 - How can you help a designer understand how styling works and how layouts work in the web? In other words: How do I explain my boundaries as a front-end developer to a designer? Work closely with the designer Allow the designer to push your limits You can help them understand by: Showing them poor performing websites Showing them things that usually are taxing on the GPU to paint - rotations, background images, drop shadows, etc. Don’t be afraid to let a tough design push your boundaries 13:23 - How do you manage your time for learning new things when you have children and a daily full-time job? Those who figure out how to make it a priority will win out Family first - talk to your spouse Ask your boss for time to learn and grow Find ways to get paid for learning 19:45 - How do you deal with burnout in this constantly evolving front end tech ecosystem? Make time for hobbies away from the computer Do projects just for fun Solve your own problems Syntax 035: Keeping Up with the Codeashians Syntax 041: Preventing and Dealing with Burnout in Web Development 25:00 - Do you code at night (past 9pm)? Start your wind-down time earlier Let your brain wok on problems while you sleep Get it out of your head Listen to podca

Mon, October 22, 2018

Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 2

In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them. VueSchool.io  — Sponsor Check out  VueSchool.io’s  new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit  VueSchool.io/syntax  and get your first month for only $5. Show Notes 3:08 - CSS Grid and Flexbox Flexbox old spec Flexbox new spec CSS Grid Some popular options for supporting for supporting CSS Grid and/or Flexbox: Just serve the mobile layout Display block Separate layout that you will eventually delete Can I Use Do websites need to look exactly the same in every browser? Modernizr CSS3, Please! Autoprefixer 12:38 - CSS Variables Double define Just like Grid, unknown def will be ignored and fallback to CSS CSS Houdini 17:00 - Fallback Code @supports Display block then display grid Feature Testing Detect the browser as a last resort Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, October 17, 2018

Fitness for Developers

In this episode Wes and Scott discuss fitness for developers. As a follow-up to  Episode 20 , they talk about the status of their fitness goals from that episode, what’s worked, what hasn’t, and how you can be more fit yourself in 2018. DevLifts — Sponsor DevLifts  - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is  Fit.Start  - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is  DevLifts Premium  - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Show Notes 3:30 Why is fitness important as a developer? 6:08 Working Out Update: Wes 14:37 Working Out Update: Scott 25:06 Nutrition Update: Wes 35:12 Nutrition Update: Scott 45:40 Supplement Update: Wes 48:00 Supplement Update: Scott 52:18 Plans for the future: Wes 54:53 Plans for the future: Scott ××× SIIIIICK ××× PIIIICKS ××× Scott:  Fitness Blender Wes:  Dr. Peter Attia - The Drive Podcast Shameless Plugs Scott’s Level Up Pro Wes’ Advanced React Course Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure

Mon, October 15, 2018

Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 1

In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all. VueSchool.io  — Sponsor Check out  VueSchool.io’s  new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit  VueSchool.io/syntax  and get your first month for only $5. Show Notes 5:10 - How do you decide if you should support an older browser? Google Analytics Data User base / Money earned from that audience IS it worth it? Time vs Money? 11:35 - How do you test your websites and app in older browsers? Actual hardware - there’s no substitution for the real thing Browser Stack Virtual Box Modern.ie Can I Use 18:24 - Supporting and Testing Mobile Browsers Resize your browser Build a device lab Remote Debugging Browser device view Faking Geolocation Emulators in XCode / Android dev tools Browsersync Ghostlab Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, October 10, 2018

Top 18 New Things in JS - Part 2

In this episode Wes and Scott continue the discussion of their favorite top 18 new things in Javascript. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Graph CMS - Sponsor GraphCMS is trying to be the world’s most developer friendly CMS. It’s a great way to build a GraphQL API without having to write a custom GraphQL server. Try out the API-first CMS of the future today at  graphcms.com/syntaxfm . Show Notes 3:30 Spread 8:40 Rests 11:54 Arrow Functions 15:48 Default Function Arguments 19:47 Named params 21:26 Modules 35:35 Classes 41:54 Things we never use Links Jake’s Minesweeper ××× SIIIIICK ××× PIIIICKS ××× Scott:  Trader Joe’s Everything by the Bagel Sesame Seasoning Blend Wes:  Trader Joe’s Green Dragon Hot Sauce Shameless Plugs Scott’s Better Javascript Course Wes’ ES6 For Everyone Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Mon, October 08, 2018

Hasty Treat - Hacktoberfest

In this Hasty Treat, Scott and Wes talk about this year’s  Hacktoberfest  - a great way to support open source. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at  nativescript.org/syntax . Show Notes 2:42 Hacktoberfest - The rules 7:35 Things to PR 12:56 Things  not  to PR 18:05 How Pull Requests work 21:45 Some of our repos Wes’ ES6 course blog posts Syntax Show Notes KeyCode.info CSSCursor.info Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, October 03, 2018

Top 18 New Things in JS - Part 1

In this episode Wes and Scott discuss their favorite top 18 new things in Javascript. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project →  https://mlab.com . Show Notes 6:02 Const / Let 10:00 Template literals / Template strings Toggle Quotes Extension Prettier 14:29 Object destructuring 21:28 Array destructuring 27:25 Function Param destructuring 30:14 Promises Wes’ Async + Await Talk 36:24 Async + Await Syntax Ep 028 - Async + Await 40:59 Object Computed Property Name 43:42 Object Method Syntax Links Denver Startup Week ××× SIIIIICK ××× PIIIICKS ××× Scott:  Red Bull VC One World Final 2018 Wes:  Jura Impressa Shameless Plugs Scott’s Better Javascript Course Wes 1: CSS Grid in 45 Minutes Wes 2: Async + Await Talk Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Faceb

Mon, October 01, 2018

Hasty Treat - Stumped! 02

In this Hasty Treat, Scott and Wes are back for a second edition of Stumped! where they try to stump each other with interview questions from  30 Seconds of Interviews . NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at  nativescript.org/syntax . Show Notes 5:05 What are defer and async attributes on a script tag? 7:15 What are the differences between var, let, const and no keyword statements? 8:45 What is a callback? Can you show an example using one? 9:52 What is recursion and when is it useful? 12:06 What is the difference between the array methods map() and forEach()? Syntax Ep 023 14:02 What is Big O Notation? 15:28 What does 0.1 + 0.2 === 0.3 evaluate to? wtfjs 17:44 What is CSS BEM? Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, September 26, 2018

Potluck - JS × Web Components × Security × They took our jobs!

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project →  https://mlab.com . Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 3:33 - Would you ever consider doing a live Syntax show? Yes! Get tickets at  JAMstack_conf 4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now? Google’s answer to React Native. Flutter NativeScript 9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation? Not cool. Always do server-side validation. Netlify Cloudflare 14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project? Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura) 21:51 - What are your thoughts on 100 Days of Code Challenge? Consistency and accountability. The best way to get good. 100 Days of Code 25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React? Dynamic vs static. What are your needs, how often does the content change. Next.js Use for dynamic needs It can do static exports too Convert to markdown Nothing special other than Routing and SSR (Server request getIniti

Mon, September 24, 2018

Hasty Treat - Positivity and Web Development

In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at  nativescript.org/syntax . Show Notes The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity. 3:18 - The effects of negativity and how the web industry is improving Mental health awareness is very real Stack overflow  sees that it needs to change Linus Torvalds’ apology Negativity is a disease, and it spreads Positivity is a force as well You can be constructive while still being nice Dan Abramov, Addy Osmani, Sarah Drasner are all amazing examples of people pushing the web forward while having a smile on their face 11:50 - Healthy ways to approach disagreements Never assume malice Kill them with kindness Take note of the people you admire and how they deal with aggressiveness 17:08 - The power of positivity Inspire the change you want to see It’s good for your productivity - it makes you feel good Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, September 19, 2018

Specialization vs Generalization

In this episode Wes and Scott discuss specialization vs generalization - the different ways one can be a generalist or a specialist, advantages and disadvantages to both, and, ultimately, which is the better career path. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Dev Lifts — Sponsor Dev Lifts  - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called  Fit.Start . Get 50% off with the coupon code “tasty”. Check it out today! Show Notes 4:18 - What is a specialist? Someone who is very good at one or two things Can be very lucrative if you’ve taken the time to become well-known in you’re industry 12:20 - What is a generalist? Two ways to look at generalists: Someone who tries to do a little bit of everything (e.g. a developer who does Wordpress, Drupal, Django, Rails, etc.) Someone who builds related skills around one area (e.g. a JavaScript developer who can code up a backend and a frontend) There will be more jobs available for the dev with tightly integrated skills in related areas than a true “jack of all trades”. 22:22 - Frontend vs Backend Frontend Frameworks (React, Vue, etc.) CSS Performance Animations Backend Web servers Serverless / AWS Scaling Frameworks Performance Databases Docker CI 26:50 - When to widen your focus When you are complacent with your mastery You need a skill to get something done. For fun For a specific job 30:42 - When to narrow your focus You don’t feel control over your skills You are missing out on employment because a lack of skills in one department You feel overwhelmed by the options available You want to be the "go to person” For fun 35:48 - How to master and expand Focus on one skill at at time. Master it and then expand on your skillset Find satellite skills - things that work in harmony 38:47 - Scott’s journey 42:31 - Wes’ journey 44:55 - How to know where to focus Necessity will dictate a lot - what do you need right now? Job postings - you can stack the deck in your favor by learning React. Once you are in, you’re can l

Mon, September 17, 2018

Hasty Treat - Feedback and Criticism

In this Hasty Treat, Scott and Wes talk about feedback and criticism in the web industry. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:00 - Getting Feedback Don’t assume malice - tone is easily lost in digital communication Don’t take it personally Evaluate the feedback through the eyes of who it’s coming from Look for the truth in the feedback Be open to feedback 15:15 - Giving Feedback Don’t be negative - phrase your feedback in positives Don’t give unrequested feedback Explain the why behind your feedback Don’t be rude or an asshole Use Tools and Standards for Code Quality Give an opportunity to improve Explain the “why” behind the feedback Sandwich criticism with something positive When things are heated, try to diffuse the situation Give frequent positive feedback Links Tweet from Dan Blundell Tweet from Dan vs Code Manager Tools’ Feedback Model Elon Musk on The Joe Rogan Experience Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, September 12, 2018

11 Habits of Highly Effective Developers

In this episode Wes and Scott discuss 11 habits that will make you a better developer - everything from understanding the business goals behind your projects to maintaining work-life balance, staying curious, and developing empathy. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Show Notes 2:55 - You understand stakeholder and business goals What is the website (or project) ultimately trying to accomplish? How does the business make money? Don’t get caught up in your own “mama drama” about frameworks, but instead focus on how a particular framework will help achieve the end goal of the business 5:13 - You’re curious and always learning This industry is ever-changing and isn’t slowing down 7:36 - You have an open mind about new technology Don’t “poopoo” something because it’s intimidating, new, scary or different Like foods you’ve never tried, sometimes something unusual turns out to be game changing 9:57 - You ask for help #LifeHack - most people know more than you Be comfortable with NOT knowing Be comfortable with failing and with how others might perceive that Check your ego at the door 15:35 - You help others Helping others solidifies your own knowledge Answering questions Stack Overflow Quora Blogging YouTube videos Mentoring co-workers Not offering unwanted advice 19:12 - You have a “problem solver” mentality General curiosity - figuring out why things aren’t working Break things down into testable components to pinpoint an issue Have a clear head under pressure (e.g. interviews) 24:37 - You have fun with what you do Enjoying challenges Even if something isn’t particularly fun, you find ways to make it fun and interesting 27:54 - You understand work-life balance Burnout is huge in our industry It can be difficult when you love what you do, but it’s so important

Mon, September 10, 2018

Hasty Treat - Reading Documentation

In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 5:10 - What are the different kinds of documentation? Tutorials Docs API references Video docs Examples of good documentation Stripe Next.js Examples New PayPal Docs Gatsby Jest Meteor 14:34 - How to read documentation Understanding how you learn will save you lots of time 16:03 - Understanding Parameters Parameter types Required / Optional Parameter order 22:45 - How do you tackle learning something new? Look at some examples Scan the entire docs to get an idea of the surface area Have something specific in mind that you want to build 27:34 - What to do when the docs suck? Look at other people’s code Chat rooms Tests for examples Read the source code Github search Contribute Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, September 05, 2018

Accessibility

In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more! Cloudinary - Sponsor Cloudinary  is a heavy duty media hosting stack for your websites and applications. Also, check out  Making Media Accessible: How to Automatically Generate alt Text for Images . In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets. Deque - Sponsor Deque  is the amazing company behind the  aXe  accessibility testing tool that over 200,000 people use to ensure their websites are accessible. For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called  Attest . Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications. Show Notes 6:00 - Basics What is accessibility? Amy Carney Tweet Tim Berners Lee Quote a11y What types of disabilities are there? Temporary, situational, and permanent Tweet thread with lots of info 15:03 - How do you write accessible code (easy wins)? Clean HTML Semantic elements Use the alt attribute on images HTML5 (article, section, header, footer, aside) Proper inputs types - number, text, CSS order property on Flexbox and Grid Colors and proper contrast Use links and buttons properly Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.) Introduction to ARIA Using ARIA: Roles, States, and

Mon, September 03, 2018

Hasty Treat - Stumped! Interview Questions

In this Hasty Treat, Scott and Wes try to stump each other with interview questions from  30 Seconds of Interviews . Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:33 What is the difference between the postfix (i++) and prefix (++i) increment operators? 7:15 What’s the difference between a static method and an instance method? 9:25 What is a focus ring? What is the correct solution to handle them? 11:20 How does hoisting work in JavaScript? Syntax 017 - 22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More 12:47 What are the advantages of using CSS preprocessors? 14:29 What is memoization? 15:48 Describe the different ways to create an object. When should certain ways be preferred over others? 19:15 What is event delegation and why is it useful? Can you show an example of how to use it? 22:06 How do you compare two objects in JavaScript? 26:00 Can you describe how CSS specificity works? Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, August 29, 2018

Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends

It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, and more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project →  https://mlab.com . Show Notes 5:00 Why don’t you work with Typescript? 10:52 How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)? 13:40 What is meant by the word “state” when referring to Vue or React? 16:32 How do you practice and get better at “soft skills” (e.g. burnout, freelancing, time management, confrontation)? Syntax 025 - Dealing with email overload PaperKarma - The App to Stop Junk Mail 28:23 Do you guys use different environments (e.g. “QA” and “Prod”)? What are some best practices? Semaphore - Test and deploy your code Sentry - Open-source error tracking 32:43 As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries? 38:52 What would WordPress be like if it were built on Node and GraphQL? Ghost 46:54 I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too? 51:16 How do you handle high level page layout when using styled components? 53:13 As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over. Links react-async-script-loader Netflix Explained ××× SIIIIICK ××× PIIIICKS ××× Scott: <a href= "https://github.com/

Mon, August 27, 2018

Hasty Treat - Framer X and Prototyping Tools

In this Hasty Treat, Scott and Wes talk about prototyping and design tools in the development space, specifically Framer X - what it is, what it isn’t, and some cool stuff coming down the pipeline. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 3:35 Framer X - What it is and what it isn’t 13:20 What it means for other prototyping and design tools 17:00 Future of prototyping and design and development 21:40 Final thoughts Links Scott’s Framer X Fist Look Video Sign up for Framer X Beta Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, August 22, 2018

Design Tips for Developers

In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects. Sanity.io  - Sponsor Sanity.io  is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on  sanity.io/syntax . Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project →  https://mlab.com . Show Notes 6:18 - General Design Tips Spacing is important Using patterns and textures Subtle Patterns Hero Patterns Heroicons FlatIcon True Grit Texture Supply Steve Schoger Use subtle gradients ColorSpace Use subtle drop shadows Multiple shadows on one element can have a nice effect Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white Use CSS Variables for custom blacks and whites CSS default colors are almost always too harsh Default browser UI is almost never the best UI Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been 40:22 - UX Design & Animation Don’t use animations when not necessary Subtle scale/transitions on hover can be a nice effect Particles.js Patagonia’s Bears Ears CSS transitions vs Physics based 51:30 - How To Get Better Follow UI-themed Instagram accounts siteInspire <a href="https://dribbble

Mon, August 20, 2018

Hasty Treat - Goal Setting

In this Hasty Treat, Scott and Wes talk goal setting - why it’s important, when to do it, how to stick to them, and more. Tweet us your goals with the hashtag #syntaxgoals. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:14 Setting SMART goals (Specific, Measurable, Attainable, Relevant, Time) 7:45 What kinds of thing should you set goals for? 10:49 Business goals 16:50 Visualizing Goals 22:58 When should you set goals? 27:42 Accountability Links ProfitWell Forever Jobless Goals Worksheet Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, August 15, 2018

The React Episode

In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works. Dev Lifts — Sponsor DevLifts  - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called  fit.start() . Get 50% off fit.start() with the coupon code “SYNTAX”. Additionally, the first 10 people to use the code "TASTY" get 50% off your  DevLifts Premium  subscription. Check it out today!  Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project →  https://mlab.com Show Notes 5:23 Components 12:30 JSX 25:13 Data and Props 44:48 Fetching 49:22 Event Handlers 54:00 Instance classes + properties 55:02 Lifecycle Methods 59:55 Context 1:01:35 Routing Links Preact Inferno How to Comment in JSX (article) Apollo Redux LevelUpTutorials.com Level II React Course React Informed (forms) Meteor Axios Firebase Gatsby Here’s how React’s new Context API works ××× SIIIIICK ××× PIIIICKS ××× Scott:  Dark Net Diaries Podcast Wes: Any suggestions for key management products? +  Iliza Shlesigner Stand-Up Shameless Plugs Scott’s Level Up

Mon, August 13, 2018

Hasty Treat - Building Curriculum for Courses

In this Hasty Treat, Scott and Wes discuss how they create courses, design and build curriculum, as well as insights and best practices for content creation. Sentry - Sponsor If you want to know what’s happening with your errors, track them with  Sentry . Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting  Sentry.io  and using the coupon code “tastytreat”. Show Notes 4:32 - Wes’ process Figure out what to make Build the thing you’re teaching in the course Have it reviewed by experts Simplify and create a linear flow for what you’re teaching 16:25 - Scott’s process Chose a topic Build the thing Create the outline as you go Have goals in mind, for individual topics Record with final code open 28:25 - How to get started Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, August 08, 2018

Our Office Setups (Gotta Get The Gear)

Scott and Wes talk office setups and all things gear.  Gotta get the gear! Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project →  https://mlab.com Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 11:00 Wes’ gear Scott’ gear Scott’s podcasting/screencasting gear 13:30 - Computer Wes: Macbook Pro 15" Scott: Macbook Pro 15" 17:39 - Monitors Wes: [22" vertical Cheap Acer:  https://amzn.to/2vkXomG [27" Dell 4k -  https://amzn.to/2Mo3NnO [Ergotron Monitor Arms -  https://amzn.to/2voS9CF Scott: LG 34UC88-B 34-Inch 21:9 Curved UltraWide VIVO Dual stand 28:33 - Keyboards and Mice Twitter Thread about mice Wes: Apple Magic Keyboard Magic Mouse Logitech MX Master 2S Scott: CODE Keyboard Apple Magic Trackpad 33:14 - Desks Wes: Ikea Countertop Ikea Alex Drawers Scott: Ikea Karlby Walnut Countertop  + <a href= "https://www.amazon.com/Jarvis-Standing-Desk-Frame-Only/dp/B01N023V8B/ref=sr_1_1?ie=UTF8&qid=1533695529&sr=8-1

Mon, August 06, 2018

Hasty Treat - JSON, JSONP and CORS

In this Hasty Treat, Scott and Wes discuss all things cross-origin - APIs, Javascript, JSON, CORS, and more. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 3:52 What is JSON? 5:09 Origin policy in the browser 6:00 Cookies + how they work 6:38 How do you get data from one site to another? 7:00 JSON P (JSON with Padding) 9:00 CORS (cross-origin resource sharing) CORS errors + learning on the fly 11:31 Canvas elements 12:24 Proxies Crossorigin.me Enable-cors.org Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, August 01, 2018

Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources

It’s another potluck episode in which Wes and Scott answer your questions about freelancing, portfolios, code editors, meetup tips, switching to windows and more! VueSchool.io 's Vue.js Masterclass — Sponsor Check out  VueSchool.io’s new Vue.js Masterclass  taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit  VueSchool.io/syntax  to get 25% off. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:37 Question: Maaz Syed Adeeb - Are editor fonts worth the investment (if yes, why)? Why are they such a big deal in the first place? Operator Mono Dank Mono Fira Code 6:10 Question: Ste O’Neill - How can I come up with ideas for projects? What can I put in a portfolio when I work for an agency? 9:10 Question: JavaScript Joe - If I only have two hours per week to work on coding projects, do I spend it building a side project or do I spend it contributing to open source? What’s your experience contributing to open source? 10:45 Question: Diane - Why is Git so hard to grasp in team projects? What are the best resources to master it? Try Github 13:35 Question: Grant Chambers - What are some tips for going to your first meetup? React Meetups 20:23 Question: Michael Hoffman - Have you ever thought about using Linux or Windows as your main operating system? Google Pixelbook Microsoft Surface Pro Figma Logic Sketch Mint OS Final Cut Pro 27:39 Question: Would you recommend using <a href= "http://upwork.

Mon, July 30, 2018

Hasty Treat - Whats the deal with npm, yarn and lock files?!

In this Hasty Treat, Scott and Wes discuss npm, yarn, lock files, why they’re useful, why you would or wouldn’t want to track them in Git and much more! Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 4:10 What is npm and yarn? 8:00 What’s the difference between npm and yarn? 12:00 What is semver? 16:40 What is the dependency tree? This is the problem that lock files solve 20:32 Cool new features of npm and yarn npx security warnings Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, July 25, 2018

The Undocumented Web: scraping, private APIs, proxies and “alternative solutions”

What is the undocumented web? Scott and Wes dive into it, discussing APIs, faking, scraping, automation, proxies as well as tips and tricks for best practices. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at  https://studywebdevelopment.com/freelancing  and use the coupon code “syntax” at checkout to get 25% off. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:05 - What Is the undocumented web? When traditional methods don’t give you what you want Wild West 6:10 - Undocumented APIS Instagram’s private API Use dev tools’ XHR Request React Dev Tools will also have the data Ep 008 - Wes Bos Origin Story Realtor.ca - MLS Mapping Simon Willison’s Zeit Day Talk about XML files Charles Proxy App  - also good for debugging requests 17:34 - Faking Faking User Agents Sending headers from requests Free Blackberry wifi on plane 23:52 - Scraping What is craping? Cheerio  - jQuery like node package 27:30 - Automation Cron Jobs Filling out forms instantly Headless browsers Puppeteer PhantomJS 33:30 - Proxies Need a fresh IP address Need a different country Side note: Canadians buying stuff in USA M4S1P1 === 41100 API throttling 39:00 - Tips and Tricks Multiple API keys diskDB  - Text files as databases Search Github for API keys Inspect Element and Delete Overlays Delete Cookiesokay 44:45 - Stories Photo Voting MLS Listing Top Entrepreneur voting cheating Vanity Plate Checker My Hockey Team Sucks <a href= "https://twitter.com/lawjolla/st

Mon, July 23, 2018

Hasty Treat - Refactoring

In this Hasty Treat, Scott and Wes discuss refactoring, what it is, why you should do it, when to do it, as well as best practices and much more. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 5:00 - What is refactoring and why would you do it? Re-writing code while maintaining functionality The first code you write is most likely not your best code 7:32 - Benefits To Refactoring Keep part of your codebase in your head Keep codebase timely and up to date (E.g. promises, async, await, etc.) Writing code from the vantage point of having already built your product Performance improvement 12:54 - When to refactor When it’s stopping your from progressing When brining someone new on to your team When you can see a more elegant solution When you’re having performance issues When you’re sharing or presenting code When you have a large codebase that needs to be broken up into smaller components 19:03 - Tips on how to refactor Testing will make refactoring easier Identify bad code and problem areas Use git as an escape hatch Break things into smaller chunks Publish often use code to npm as modules Links Facebook’s Codemod Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, July 18, 2018

Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More

Scott and Wes give their best advice for beginners, including tech skills, applying for jobs, focus, imposter syndrome, and more… Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s  CSS Grid.cc  builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Show Notes 4:46 - Advice for gaining new skills Patience and momentum are key You likely won’t get anywhere significant in two months Think about where you want to be in five years Start small Start with was excites you and let that drive your exploration Start writing code ASAP. Don’t worry about the right way, just get started. 17:15 - Advice for applying to jobs Apply for everything. Failing an interview is no big deal. Each interview is an opportunity to gain experience Putting yourself out there is huge - one blog post, YouTube video, or open source project will put you miles ahead Have an entrepreneurial mindset - you can negotiate money, hardware, vacation time, flexible schedule, etc. Don’t just google “average salary” Negotiate salaries and perks. 29:32 - Advice for knowing what to focus on What gets you jazzed? Find something cool and figure out how to recreate it. Find a problem and figure out how to solve it - build real things. Don’t focus on tech - tech is just a tool. 38:32 - Advice for impostor syndrome Listen to this podcast! ;) Almost everyone has it. Don’t worry about other people’s progress. You don’t need to know how to do everything, but you should be able to figure out how to learn. 46:45 - Misc advice Evaluate things for yourself - don’t blindly follow the loudest voices on the internet Focus on soft skills as well - time management, communication Get a mentor Health and Hobbies - don’t let yourself burnout Links Ep 044 - How to Learn New Things Quickly Javascript30 ××× SIIIIICK ××× PIIIICKS ××× Scott:  Sony A7iii Wes: <a href="https:/

Mon, July 16, 2018

Hasty Treat - Dot Files

In this Hasty Treat (Short episode) Scott and Wes discuss dot files, what they are, how to use and manage them as well as best practices and more. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 3:15 - What is a dot file? Access tokens Settings for editors, etc. 4:40 - Dot file examples .gitignore .gitkeep .rc .babelrc .bashrc .eslintrc .env .DS_Store .editorconfig .meteorignore 23:46 - How to keep your dot files in sync Hot Tip In MacOS, toggle dot files with “Shift + Cmd + .” Links Wes’ dot files repo Prettier Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, July 11, 2018

Design Systems

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more… VueSchool.io 's Vue.js Masterclass — Sponsor Check out  VueSchool.io’s new Vue.js Masterclass  taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit  VueSchool.io/syntax  to get 25% off. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:40 Design Systems 101 Wes’ Tweet about Design Systems 9:40 Organizational elements of design systems It’s all about consistency 23:07 Best tools for building design systems and style guides Figma Relay for Figma InVision Design Systems Manager Airbnb Lona Brad Frost’s Pattern Library uiengine 41:52 Where to learn more Links Guide to Design Systems by InVision Shopify’s Design System Mailchimp’s Voice and Tone Zendesk Garden Material Design Awesome Design Systems Design Systems Repo Design Systems Docz Facebook Yoga StorybookJS Stuart Clarke-Frisby Tweet <a href= "https://blog.figma.co

Mon, July 09, 2018

Hasty Treat - User Role Systems

In this Hasty Treat (Short episode) Scott and Wes discuss user roles, what to think about when creating your own, security implications, etc. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 3:30 How to manage user role systems 11:30 Client side best practices Don’t rely on front-end role systems as a security measure 14:13 Where to store your roles Start simple and get more complex as needed Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, July 04, 2018

Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials

It’s another potluck episode in which Wes and Scott talk about freelancing best practices, tips for working remotely, what they would do if they had to pick a different career, and much more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s  CSS Grid.cc  builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Show Notes 4:48 How long should you stay with each job and/or company? 8:20 What is the best way to work remotely? Tips for remote working Have a dedicated space Clear on and off times Have a time for winding down Make specific TODO lists Use blocking software to help you stay focused Switch up the scenery / Work in different places 15:26 What are the trade-offs with using WordPress in a headless setup vs a tradition setup? 21:28 How do you deal with API credentials in React? 27:15 How do you keep an eye on performance with an app/site over the long-term? Check uptime Check the performance features in browser dev tools Use error checking software Host-based performance tools Newrelic pingdom LogRocket 34:28 What happened to Canvas after all the hype around HTML5 a few years ago? 40:15 How do you deal with analysis paralysis? Just get to work - you can always change things later Do research, but don’t let it get in the way of shipping 44:05 If you were forced to change your career (and it had to be something you’ve never done professionally in the past), what would it be? Wes: Some sort of buying and selling (eBay, Amazon, etc,) Example: Buying things at wholesale prices and selling them with a markup Scott: Could go a lot of different directions. Example: DJ, Snowboarding instructor, develop a video game that is a sequel to  Cruis’n USA 50:14 As a freelance developer, what are some good questions to ask before taking on a client? Budget Scope Preferred communication methods How do you

Mon, July 02, 2018

Hasty Treat - Domain Management

In this Hasty Treat (Short episode) Scott and Wes discus all things domains. Where to get them, how to set them up and how to safe time managing them all in one place. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. Show Notes 3:30 What is a domain? 4:59 What is DNS? 6:00 Nameservers 8:30 What is a DNS provider? DNS Simple Cloudflare Hover Name Domainr iwantmyname 13:30 Different types of DNS records 17:00 Different kinds of domains .com, .tv, .io, etc. Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, June 27, 2018

Marketing for Developers

Scott and Wes talk about marketing. Specifically how to do marketing if you’re a developer wondering where to start. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax Show Notes 7:58 - Personal Branding Build trust and reciprocity Be authentic to yourself and let that carry through in your work. Have the guts to put yourself out there and establish yourself as an expert. Speak at conferences Write blog posts Make YouTube videos Be on podcasts Start your own podcast 14:50 - Running a Business Treat people well. Reward your customers. Don’t punish your users. Have a refund policy. 19:26 - Social Media Don’t push people off a platform. Bring content to them that is tailored for that platform. Get in early, before the platform becomes super crowded. YouTube Quality content through quantity. Write good SEO titles. Tease your paid content or create a free one-off. Don’t expect to make a lot of money, but it can be great for growing a brand. Twitter Be helpful - small, digestible tips and tricks and great for growing a Twitter following. Quality is still the key. Steve Schoger  is a great example of consistent, high quality content. Facebook People have other interests besides web development. People like to see into your life. Use Facebook to give people a window into who you are. Reddit Reddit is really difficult. It’s easy to get banned. The best strategy is to not focus on marketing and just try to be helpful. It’s sort of replaced forums and is a great place to build communities around different hobbies. Instagram Recently IG has been blowing up for web developers. Dhanish  is a perfect example of how to do Instagram well. 49:55 - Paid Advertising Don’t be sleazy. Ads are good for getting likes and dri

Wed, June 20, 2018

Our Workflows: Design, Development, Git, Deployment

It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment. Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s  CSS Grid.cc  builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! VueSchool.io 's Vue.js Masterclass Check out  VueSchool.io’s new Vue.js Masterclass  taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit  VueSchool.io/syntax  to get 25% off. Show Notes 4:00 - Design Workflow Wes: Screenshots of look + feels Sketch layouts out in pencil Mock up layout in Sketch Once rough layout is done, I refine Once I have: colors, type, patterns, textures and overall layout, I move to code. A design program is important to vs designing in code Scott Mirrored component structure in Figma Using Ideas from Atomic design and React components Goal is for Figma components to be 100% mapped to styled components Flexible and testable in different layouts My design philosophy is refinement through iteration Light theft Footer from  Pitchfork New card animation idea from  Patagonia 15:55 - Design to Dev Workflow Wes: Happy with design so far Setup tooling - styled components, stylus, sass… Setup type, variables, partials, resets… Do as much HTML as possible before styling CSS it up for layouts, then go section by section Broad first, then zoom in on finesse Browsersync / Hot Reload Test across browsers / Devices Scott: Define parameters in Figma Styled components in React, hand write that CSS bruh Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components 32:06 - Git Workflow Wes: Tear off a branch - name after issue - DEV113 Do your work Rebase Squash Pull Request Rinse + Repeat Scott Master branch is 1-1 with live Develop is where work is done (but not really because I make a feature branch for each feature and

Wed, June 13, 2018

Progressive Web Apps

Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax Show Notes 2:00 What’s the deal with the GitHub / Microsoft acquisition? 6:05 What is a Progressive Web App? 8:55 -  Progressive Web App Checklist What are the baseline features for a Progressive Web App? 09:25 Site is served over HTTPS Let’s Encrypt 11:05 Pages are responsive on tablets & mobile devices 11:35 All app URLs load while offline Use a Service Worker 16:35 Metadata provided for Add to Home screen 18:40 First load fast even on 3G 20:00 Site works cross-browser 20:15 Page transitions don’t feel like they block on the network 22:20 Each page has a URL What makes an exemplary Progressive Web App? 27:42 All content is indexed by Google 28:38 Schema.org  metadata is provided where appropriate Social metadata is provided where appropriate 29:42 Canonical URLs are provided when necessary User experience 31:43 Content doesn’t jump as the page loads Scott’s Pro Gatsby Course 36:52 Pressing back from a detail page retains scroll position on the previous list page 37:34 When tapped, inputs aren’t obscured by the on screen keyboard <a id="The_Best_of_the_rest_95" name

Wed, June 06, 2018

SSR, SEO, Tips for Students, music, security and GraphQL

It’s a Potluck episode - you bring the questions and we turn them into tasty treats. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put  SYNTAX  in the “How did you hear about us?” section. Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s  CSS Grid.cc  builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Show Notes 2:15 What’s the best resource for staying up to date with Javascript? 3:48 How do you stay motivated if you don’t like your current project? 7:08 What’s your favorite music to work to? 11:10 In what order should developers learn tools related to GraphQL? 13:48 As a JS developer, is it a good idea to learn other languages like PHP or Python? 19:55 As a CS undergrad, what can you do in terms of programming that could be a great benefit after graduation? 23:14 Should you be concerned about SEO when using JS frameworks like React? 28:17 How can you build your network when you’re too tired or busy to go to a bunch of meetups? 32:55 How do you come up with such good designs and UI for your courses? 36:37 As more websites move to secure connections, where can a noob learn the basics of https, SSL certificates, how to deploy a secure website, etc.? 43:05 Have you had experience working for large companies and how does it compare to smaller companies and/or freelancing? 47:30 What are other programming podcasts you listen to? ××× SIIIIICK ××× PIIIICKS ××× Wes:  SpikeBall  /  Slammo Scott:  Stance Shameless Plugs Scott’s Level 2 React Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes

Wed, May 30, 2018

VS Code Round Two

Scott and Wes are back with another round of tips, tricks and tasty treats for their favorite code editor,  VS Code . LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax Show Notes 01:45 Why Scott and Wes use VS Code vs all the other options Stay up to date with all releases 06:05 - Favorite new updates Notification API Auto Import Listing errors in the file explorer Column Selection Interface Customization Hot Tip: Anytime you find yourself using your mouse, there’s likely a shortcut key for what you’re trying to do React Snippets Library Wes’ VS Code settings Visual Studio Live Share 27:40 - Favorite/New Extensions Bracket Pair Colorizer Rainbow Brackets Auto Rename Tag Better Comments Jest Snapshot Tools JS Refactor Import Cost Polacode Carbon  - An alternative way to share beautiful images of your source code 38:49 - Themes LevelUp Official Night Owl Cobalt2 40:35 - Tips and Tricks

Wed, May 23, 2018

How to Get Better at Debugging

Scott and Wes detail the tips and tools you need to get better at debugging. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax  and put SYNTAX in the “How did you hear about us?” section. Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s  CSS Grid.cc  builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Show Notes 4:00 Read the stack trace 7:35 Make sure you aren’t debugging production Make sure you’re not cached 8:40 Check the network panel for the whole response CORS (Cross-Origin Resource Sharing) 12:04 Use debugger commands in the browser Set breakpoints (race conditions 13:40 Use Source Maps 15:29 Make full use of all console methods console.group/groupEnd/info/ console.log({objNAme}) 17:02 View your code in other browers Make sure your browser is up to date 18:50 Step into and step over function Useful for especially tricky issues 19:47 Look into Scope in dev tools panel 20:33 Recreate it in CodePen or Create React App Helps to quarantine your code Verify where the problem actually is 24:12 Take a break Helps clear your head and approach your problem from a different angle 25:40 Rubber Duck Debugging Forcing yourself to talk it out will often reveal problems/issues 26:40 Check Github issues / ask in Slack Leave your solution in the comments for others 28:12 Use Node --inspect flag 29:57 Read the code in your libs (if you can) 32:34 - Chrome Dev Tools Tabs Rundown 33:10 - Network tab 34:15 - Preformance tab 35:58 - Lesser known tools 36:15 - Firefox Grid Debug 36:20 - Firefox Fonts tab 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window) 37:39 - Chrome Animations Inspector 38:34 -  /dev tips  &  Modern DevTools Course 39:41 - Chrome & FF Layers for 3d and full view of canvas & window 40:51 - Sensors for overriding fake devices sensors Hot tip: Use Instagram on the desktop - Go to <a href= "https://instagr

Wed, May 16, 2018

What's New in Javascript

Scott and West talk about what’s new in JavaScript. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. They are also hiring!  netlify.com/careers Show Notes 1:55 - Scott’s new studio 4:57 -  Pop Motion Pose New library for React or vanilla JavaScript Define locations instead of CSS styles Pass the animation state into a React component as open or closed instead of active or inactive Flip animation techniques Style Fire  - Simple HTML & SVG styler optimised for animation 8:44 -  Intersection Observer Browser-based API based on observables Example uses: Tell me when this element is on the page, goes off the page or is halfway down the page 10: 32 -  MDX Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it Turns MarkDown files into components in Webpack 12:56 -  Resize Observer Watch elements for resize 15:47  Web Animations API Works with animations natively in JavaScript Tell your animations to play, pause, reverse, etc. Instead of changing classes, you have full control over what the animation is doing Web-Animation-JS Polyfill Can I use 18:00 -  Window Face Detector

Wed, May 09, 2018

Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course

It’s a Potluck episode - you bring the questions and we turn them into tasty treats. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax , and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:42 What is an efficient way to process huge data, greater than 740 MB when not working in JS? 6:45 What’s new and shiny thing in web development do you think is going to go the distance? GraphQL Prisma GraphCool GraphQL Playground 11:09 Wes, can you make a course on how to barbecue meat properly? 12:31 How do you go about learning a new language or framework? Ep 44 - How to Learn New Things Quickly 12:54 What are the best things to keep in mind when you are the only developer on a team? 18:07 Is Redux for React dead with the new context API? Redux 21:41 What’s the funnest project you have ever worked on and why? LevelUpTuts 27:19 What’s the best use case for JWP? JWP 29:50 Should I focus on one thing and try to master one technology instead of being a jack of all trades? 35:00 Why do thousands of entrepreneurs build SaaS products on Ruby on Rails? Laravel Laravel Spark CodeIgniter Meteor Ha

Wed, May 02, 2018

How to Learn New Things Quickly

Scott and Wes talk about how they learn new things quickly. Scott also tells a crazy story about his weekend. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. They are also hiring!  netlify.com/careers Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 2:00 Scott recounts his crazy story about getting Lymphangitis 8:30 Know your learning type videos, blogs, docs, source no right or wrong way 15:00 Foundational Skills 23:00 Narrow your focus Should you learn Redux with React? blurring skills hurts future progress don't learn too many things at once 26:00 Get excited try to reclaim your initial excitement flow happens when you are excited pick projects around hobbies Star wars sucks 33:00 Grind Time write code first ask questions later break shit Submit to yourself that you are going to build this 3-4 times iteration driven development quality from quantity use smarter people snippet libs style guides 40:00 Immersion follow every kind of media you can put things on in the background permeate into your brain ××× SIIIIICK ××× PIIIICKS ××× Wes:  Crushing It Book Wes:  Crushing It AudioBook Scott:  Popmotion Pose Shameless Plugs Wes' JavaScript30 Course <a href="http

Wed, April 25, 2018

20 JavaScript Array and Object Methods to make you a better developer

Wes and Scott rattle through ~20 different Object and Arra Methods that will make you a better JavaScript developer. Freshbooks - Sponsor This is episode Wes mentions the free book  Breaking The Time Barrier . Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax . Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. They are also hiring!  netlify.com/careers Show Notes For the docs for all these, just google  mdn  and the method you are looking for 😃 3:00 Why are these great? They are chainable Immutable 5:30 .filter() Truthy or Falsy 8:00 .map() 10:00 .reduce() - returns any shape! filter, create a new shape, add up numbers... 14:30 .forEach() Side effects 16:00 .some() can be used as a short circuit forEach 25:00 .every() .includes() (why not contains?) 26:00 Array.from() Array.from() takes a secondary map arg Array.of() 29:00 Object.values() Object.keys() Object.entries() 32:00 Array spread - converts iterable to array Array spread - Concats arrays Array Spread + Slice. Don't splice - remove an item from an array. 34:00 Object Spread 37:00 Function Rest 39:00 Object.freeze() 40:00 Object.seal() 41:00 Object.assign() - no longer needed because you can object spread Reference vs Copy in JavaScript ×SICK×PICKS× Scott:  Tea Haus Wes:  SOG Folding Knife Wes:  Sharpening Stone Shameless Plugs <a href="https://leveluptutorials

Wed, April 18, 2018

Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman

It's a Potluck episode - you bring the questions and we turn them into tasty treats. DeployHQ - Sponsor DeployHQ is the easiest way to deploy websites to your servers. Invite your team and set up automated deployment processes to: Compile a production build of your assets Deploy securely to servers behind VPNs and firewalls Execute SSH commands Manage and upload your config files Preview and schedule deployments Track and monitor your deployments in real-time Deploy to multiple servers at the same time, whether that be your own server via FTP/SSH, or an Amazon S3 bucket. You can even start deployments automatically whenever you push! Instant setup for repositories hosted on GitHub, Bitbucket, GitLab and Codebase, plus realtime notifications in your favourite chat services like Slack or HipChat. To get 50% off your first 6 months, head on over to  deployhq.com/syntax . The first 25 listeners to deploy successfully will receive a FREE branded mug or t-shirt! Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Submit Your Questions Here Show Notes 02:44 What are your thoughts on Vue.js? VuePress Nuxt 6:20 What are your thoughts on Typescript and Flow? Typescript Flow 10:45 What was your biggest breakthrough in Programming? Nude.js 20:00 Any tips, tools and tricks to avoid procrastination The productivity episode Sort by anxiety <a href="https://amzn.to

Wed, April 11, 2018

Preventing and Dealing with Burnout in Web Development

Scott and Wes Chat about burnout! Freshbooks - Sponsor This is episode Wes mentions the free book  Breaking The Time Barrier . Get a 30 day free trial of Freshbooks at  freshbooks.com/syntax . Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code:  SYNTAX Show Notes 01:50 What is burnout? Losing Enthusiasm for web development That Hustle 7:00 Why is being burnt out bad? Putting off hobbies 12:30 How do you prevent burnout? Farming out Work Automating content Busy work 18:00 Aggressively turn down meetings Work to cut out busy work Locus on Control Managing Email and Notifications Scrubbing Plates 24:00 Health and Nutrition Sleep 27:00 Motivation What to do when you just don't like the work you are working on Small Wins Learning new Things Getting a new job Taking Courses Keeping Up With The Codeashians 37:00 Being overworked at work Overtime 41:00 So you've burnt out, what do you do? How do you reignite the spark? Taking a day off Delegating GitHub Online chat with other developers ×SICK×PICKS× Wes:  Dewalt 20v Drill Set Wes:  Dewalt 20v Cordless Web/Dry Vac MERU Shameless Plugs <a href="https://leveluptutorials.com/store" target=

Wed, April 04, 2018

The Testing Show!

Wes and Scott talk all about testing! SnapShooter - Sponsor SnapShooter  is a Digital Ocean backup service. You get fine grain control over when you backup and how long you backup for. Easily restore from previous snapshots. Use the code  SYNTAX  to get 20% off your first 12 months. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 3:00 Testing Talk Is testing scary? 8:00 Unit Testing Pure Functions Mutations Pass in dates to functions 11:40 Integration Testing Integration Testing Mémé 14:00 Visual Regression Testing 17:00 End to End Testing 21:00 Why would you want to test? Confidence Easy Refactoring Finding edge cases 33:00 Test Runners vs Assertion Libraries Jest Mocha Cucumber BBD (Big Black Dog) BDD (Behaviour Driven Development) Cypress.io Enzyme React Testing Library 50:00 Mocking Spy Functions 54:00 Snapshot Testing Jest Snapshot Testing 57:00 TDD (Test Driven Development) BDD (Behaviour Driven Development) Continuous Integration Travis CI ×SICK×PICKS× None today

Wed, March 28, 2018

Is jQuery Dead?

Wes and Scott dive into jQuery. Is it dead? Should you still use it? Why not? What are some alternatives? LogRocket - Sponsor LogRocket  lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session replayer and a performance monitor. Get 14 days free over at  https://logrocket.com/syntax Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 03:00 A stroll down jQuery Memory Lane What was the first jQuery plugin you wrote? jQuery Conference jQuery IRC room Ben Alman 9:00 jQuery UI jQuery Mobile Sencha Touch nvr 4get where u come from 13:00 So, why is jQuery going away? 16:00 The Selector API Sizzle Bling.js querySelectorAll Docs 21:00 Working with Ajax Fetch Axios 27:00 Dom Traversal Element.matches() You don't need jQuery 30:00 Data / Utility Functions Lodash Just use Map/Reduce/Filter Data Massaging 💆🏻‍ 34:00 Cross Browser Compatability Polyfill.io 37:00 Event Listeners Event Delegation Listening for events on multiple elements 47:00 Final Thoughts on jQuery <a href="https://javascript30.com

Wed, March 21, 2018

20 Easy Win Performance Tips

In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites. Cloudinary - Sponsor Cloudinary  is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free! Also check out Cloudinary's  ImageCon  conference - use the code SYNTAX99 for a discount when checking out. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent  covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent  is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to  this tweet 0:00 We just cracked 1,000,000 downloads! Thank you! 4:00 Network Tips Reducing the amount of HTTP requests A little bit about HTTP2 An interview about  http2 8:00 Use Caching and LocalStorage Turn on aggressive caching on your server - long expire times What is gzip? / Enabling gzip 12:00 Using a CDN Listen to our episode on  CDNs and #BigZips 13:00 When to load your JS Blocking Requests 15:00 Use Lazy Loading 17:00 Preloading content with Link rel="preload" rel="prefetch" 19:00 Picture, picturefill and srcset="" Article on  srcsrc and Picture srcset vs picture/source elements 25:00 Image Compression One

Wed, March 14, 2018

Recording Screencasts - Hardware, Software, Dos and Don'ts

In this episode, Scott and Wes everything about their recording — from gear to software to tips and tricks for creating a good screencast. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. They are also hiring!  netlify.com/careers Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 2:00 Scott's Hardware: EV RE20 DBX 286s Preamp K&M 23850 Microphone Desk Arm Shure KSM32 Blue Snowball Bluebird Scarlet 2i2 4:00 We talk about Different types of microphones Wes' Hardware: Heil PR40 Heil PL2T Boom Arm Audio Technica AT2020 Heil Flush Desk Mount Scarlet 2i2 DBX 286s Preamp EQ351 Equalizer BSW

Fri, March 09, 2018

Hasty Treat — Freelancing Hot Tips 🔥

In this Hasty Treat (Short episode) we answer your questions about Freelancing - how to charge more, building a portfolio, finding clients and our thoughts on using pre-made WordPress themes. Sign up for the Value Pricing Bootcamp - Sponsor Get Jonathan Stark's free 6 day email course on value based pricing for freelancers over at  valuepricingbootcamp.com . Jonathan Stark is the author of  Hourly Billing is Nuts  and has worked with companies such as Staples, Time and T-Mobile. These days he routinely commands an effective hourly rate of $2000+ per hour, so I'd say you should check his course out. Show Notes 1:00 Our first episode on Freelancing - how to slam dunk freelancing 4:00 Q:  Ideas on building a portfolio and landing those first customers Your portfolio doesn't really matter as a web developer Your reputation and referrals is key Reputation in the community is important Put yourself out there! You have to tell people what you do You have to ask people if they need work Good communication is key 8:00 Q:  What are some strategies for budging and quoting? Understanding what a website is worth to a client Talking to your client ablut pricing Asking how much they have available to spend Chunking the project into multiple bits so they can build on it 14:00 Q:  How do you tell your existing clients that you need to charge more? Clean Scope / Scope Creep Quote in Features and pieces, not entire projects Fixed Pricing Becoming a better/faster developer Getting more expensive as you move Don't charge hourly Taking big Ls 18:30 Q:  What is your opinion on value based pricing? We're huge proponents Clients don't like hourly billing The client should know what you are paying and what you are getting 22:00 Q:  When is it okay to use WordPress and pre-made themes? Is that cheating? The beauty of open source The business Wes answer The developer Wes answer Building your own starter files Undoing other developer's work Tweet us your tasty treats! Scott's Instagram <a href="https://www.ins

Wed, March 07, 2018

Keeping Up with the Codeashians. Dealing with our fast paced industry.

Scott and Wes talk about how to deal with being overwhelmed with our fast paced industry. How do you keep you and your team's skills up to date? Wes' Note: Scott came up with the title for this one. I know. Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. They are also hiring!  netlify.com/careers Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 1:00 WELCOME Scott is 32! Happy Birthday Wes Relaunched his  React for Beginners  course! 4:00 That feeling Being okay with not knowing everything 9:00 How to wait it out When you should jump into a library 1.0 of libraries Dogfooding 13:00 Just In Time learning Doubling down on the fundamentals 21:00 What is JAM Stack? 22:00 Why do you need to stay up to date? Moving or Losing Jobs Comfy Chairs 25:00 Hipster Web Developers 27:00 Someone think of the customers! Technical Debt Falling in love with web development again Constantly challenging yourself 30:00 Complacency in Web Devleopment Motivating Comfortable Web Developers You have to stay up to date 32:00 Working on the weekends Real Talk: part of your job is staying up to date How to find time to learn on the clock 36:00 Adding new tech to projects as a way to learn 39:00 What if your senior developer is holding back progress? How to convince your team or boss that you aren't just a hipster and this new tech is worth it Show them the why! 47:00 Okay, I want to stay up to date. How? Strong handle on fundamentals Twitter Twitter WebDev Reddit <a href= "https:

Wed, February 28, 2018

Why Static Site Generators are Awesome

Wes and Scott talk all about Static Site Generators! Netlify — Sponsor Netlify  is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up  netlify.com/syntax  for more info. They are also hiring!  netlify.com/careers Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 1:00 Woah Scott's Audio! 4:00 #TastyTreats Winners 8:00 What are static site generators? 10:00 Benefits of Static Site Generators Gatsby StaticGen.com Jekyll Hugo Hexo 24:00 More complicated apps as static sites Next.js Static Export Nuxt.js 34:00 Limitations of a static site What happens when you need something on the server? Snipcart for Ecommerce Algolia Awestruct Hot Hot Reloading 41:00 Using with a Headless CMS Reloading The Pages 48:00 WHAT WHAT Scott is Canadian?! 50:00 Where can you host a Static Site? Literally Anywhere Github Pages Netlify rsync WPGraphQL Siiiiiiiick Pixxxx Scott: <a href= "https://marketplace.visualstudio.com/items?item

Wed, February 21, 2018

Large Files - CDNs, Image Compression, Video Hosting, and Big Zips

Scott and Wes talk about working with images, videos and big zips. How do you host them? Do you need a CDN? What about compression?! Cloudinary Cloudinary  is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free! Also check out Cloudinary's  ImageCon  conference - use the code SYNTAX99 for a discount when checking out. Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at  xojo.com/syntax Show Notes 1:30 Chit-chatting about GraphQL Testing 3:45 What is a CDN? Why do you need one? How does the internet even work? 7:00 Amazon S3 + Cloudfront CacheFly MaxCDN Cloudflare 11:30 Talking about Image Formats WebP WebP CanIUse 16:00 Losslesss VS Lossy Stripping image meta data like EXIF Image Optim App ImageMin Gulp ImageMin ImageMin Webpack ImageMin Plugins on npm 26:00 How we use Cloudinary 29:00 Hosting, Encoding and Compressing Videos <a href="https://syntax.fm/sh

Wed, February 14, 2018

Designing, Templating, Inlining and Sending Email!

In this show, Scott and Wes talk about about sending both transactional and marketing email. Everything from designing to templating to inlining the CSS to getting it sent. Enjoy! Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at  xojo.com/syntax Show Notes 0:00 WELCOME! 2:00 An update on GraphCool, Prisma and Yoga 3:45 Syntax Contest! You can win a free course from either Scott or Wes by screenshotting yourself listening to the podcast and uploading to Twitter or Instagram. We will pick 1 winner from Twitter and 1 winner from Instagram Make sure to tag  @wesbos  and  @stolinski  on Twitter and  @wesbos  and  @stolinski on Instagram #TastyTreats 5:40 Email ain't easy! 6:20 How do Scott and Wes use email in their apps and businesses? Transactional vs Marketing Email 9:00 Dealing with multiple emails and modifier Signing in with Facebook vs Email?! 11:00 Transactional Email The Process to creating single one-off email 13:00 Scott's Setup: Handlebars Meteor Email Docs Mandrill Wes' Setup <a href="https:

Wed, February 07, 2018

Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions

Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 0:00 Goofing Around 1:30 Real show starts 2:12 Scott explains his breakdancing hobby "Breaking" is breakdancing What is flavour? 10:20 Wes talks about being into BBQ World's Longest Yard Sale Wes has a large Big Green Egg and a MiniMax BGE 19:00 Scott talks about how he is into making music Domestic Robot Scott is starting up a new project called "Shift. Super." 21:30 How do you find time for these hobbies? Avoiding burnout Work/Life Balance Buy in from significant others 28:00 Wes talks about working out and going on date nights with his wife Hamilton is cool Home Renos 35:00 Doing a downtown job Problem Solving 40:00 Scott talks about his love for KungFu Movies 5 Fingers of death 5 Deadly Venoms secret service of the imperial court Boxer from shantung 36th Chamber of Shaolin Human Lanterns 46:00 What kind of cars do we drive? 55:00 What YouTube channels do you watch? Wes: Jeannies Garage It's Alive with Brad Wranglestar Mattias Wandel Main Woodgears Mattias Wandel Secondary Channel Big Clive How it's Made Alex French Guy Cooking Scott: RedLetterMedia <a href="https://www.youtube.com/user/stanceelements" target= "_blank" rel="n

Wed, January 31, 2018

Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!

Dev Lifts - Sponsor Dev Lifts  - Thad and JC are on a mission to make web developers healthy. Get a Personal Training and Nutrition Plan — use the code SYNTAX for $75 off. They have also just announced their  slack-only memberships  for $5/month Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 01:10 you should try out the new  Syntax Soundboard  by Andre Madarang Have a Question?! Submit it here! 03:00 Skateboarding on a TRAMPOLINE?! 04:30 Q: What are your favourite features coming to HTML 5.2 Dialog Box Multiple Main Tags Thanks Jordan! 10:00 Q: How do you retain all the info you learn like a sponge? Thanks Ozan 13:30 What are your favourite CSS Libraries / Frameworks? Thanks Blake! 21:00 What were some of the struggles you had early on in your career? How did you overcome them? Learning how to read error logs and messages Dealing with Impatience Coding is very frustrating 26:50 What are High Order Components and Render Props? High Order Components React Render Props Video: Michael Jackson - Never Write Another HoC React Downshift React Reconciliation 34:45 Q: When should you just drop the towel on code? When should you throw in the towel on code? Scrapping a codebase and moving from PHP to JS Let's talk about if it's worth it 41:00 Q: What is the best way for a JS beginner to get their hands dirty? Don't work on apps, work on pieces!

Wed, January 24, 2018

Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!

Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at  xojo.com/syntax Show Notes Take a drink every time Wes says exactly 01:10 CSS Grid course is out! 03:50 The most basic hosting / services WordPress.org, Medium, Wix, Squarespace 05:00 Your Cheap PHP/Apache Hosts Endurance International Group owns most of the cheap web hosting world cPanel Bluehost doing shady stuff Siteground seems p good 13:20 Service Based Hosting Heroku Zeit's Now Galaxy 15:00 What does "spinning down" mean? Deploying to these services 17:20 How these services do instant cut-overs to new servers SSL Certificates 20:00 You should listen to the  Our Stacks Explained  episode. Zeit's Now Alias mLab MongoDB Hosting Compose MongoDB Hosting 29:00 Raw Server Space Linode Digital Ocean Rackspace Digital Ocean Droplets Digital Ocean's docs are 👌👌👌👌 32:00 What is Nginx?! Let's Encrypt <

Wed, January 17, 2018

Async + Await

Freshbooks — Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 02:55 Wes' Async + Await talk on YouTube from DotJS JavaScript is Asynchronous Ryan Dhal (Creator of Node.js) original Node.js talk 06:00 Callback Hell Q Bluebird What is a promise? Promises are an IOU 8:30 Async + Await IS promises What is Async + Await? How does the code look? Returning values from an await 15:20 Performance Considerations MEGA PROMISES Promise.all() Here is an example: const [weather, store] = Promise.all(getWeather(), getStores()); 19:22 This stuff is 100% native Most new Browser APIs are build on Promises Fetch() Some examples: await fetch('  https://api.github.com/users/wesbos').then(data  => data.json()) OR await (await fetch('  https://api.github.com/users/wesbos')).json( ) Axios 22:48 The Payment Request API You should listen to episode 006 on  accepting money on the internet Web Animation API 27:00 Snackisodes Snack Packs Hasty Treats?!!! 28:00 Making callback-based functions promised basked es6-promisify util.promisify() 30:00 Error Handling Methods View  my slides  for some code examples. Try/Catch High Order Function Just handle the error when you callIt().catch(dealWithIt); Node's process.on('unhandledRejection')

Wed, January 10, 2018

GraphQL? Here is what you need to know!

Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at  Snipcart.com/syntax  and sign up for three months free! Freshbooks — Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. { show(id: 027) { notes }} 02:40 What is GraphQL anyways? GraphQL Relational Data 04:45 How is it different than REST? 08:30 GraphQL's self documenting Nature 09:20 You don't need to replace your existing REST api It can sit infront of multiple APIs 10:00 GraphQL Resolvers Apollo Link State  does local data as well 11:50 GraphQL on the client side Relay Apollo GraphQL Request Lokka Nano 13:30 Why we like Apollo Setup is amazingly fast 15:00 Pagination Refreshing of data 18:00 The GraphQL Core Concepts Queries Mutations Filtering and Sorting It's not really a query language 21:00 How do you say Schema? 22:00 More on Resolvers 22:50 Mutations Updating the cache 27:00 Using with existing APIs Do you have two schemas now? One for MongoDB and one for GraphQL? 35:00 CMS and Static Site Generators that run on GraphQL Gatsby WP-GraphQL GraphCMS 45:00 Graph Cool 53:00 Apollo Link Apollo VS Redux 56:00 <l

Wed, January 03, 2018

All About Redux && Cookies vs JWT

Dev Lifts — Sponsor Dev Lifts  will create a personal training plan tailored to your 2018 health and fitness goals. Use the code  SYNTAX  for $50 off. Join with a friend and we'll make you a Buddy Plan that you can do together (nutrition will still be tailored on a per-individual basis, but workouts will be something you can both do together)! Plus, use the coupon code below and you'll both get $100 off. Enter each other's email address as the coupon code and your discount will be applied to your invoices (invoices are sent manually currently, so I'll apply the discount for you both once you've both signed up). Valid thru January 31, 2018. The Show Notes! 01:00 Scott's New Redux Course Redux Docs What is Redux? Why do we need it? 06:00 Modifying Your State Immutability 07:15 Actions + Actions Creators Dispatching 09:00 Reducers 14:00 Wes' Redux Tutorial 18:30 What is the difference between Cookies and JWT? Tweet us your tasty treats! Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, December 27, 2017

Dealing With Email Overload && Prettier Setups

Wes details "Breakout" — his email management strategy for overwhelmed creatives and Scott and Wes chat about how they have their prettier setup. Freshbooks — Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes! 01:00 Wes' notes on the Breakout Email Management System 02:00 Do you like minisode or snackisode? Any other ideas for names for these short episodes? 04:00 Email is often busywork 04:30 You likely have a decision problem 06:00 Kill it at the source! How do you stop email from getting to you in the first place? 08:00 Your inbox is not the world's TODO list Process it when you get it Getting Things Done 09:30 Filter! Filter! Filter! 10:30 Germans sure do get a lot of vacation time! 13:00 Expansions Using Robots for empathy Text Expander aText 15:30 Dictation is great! 17:30 Video responses 18:30 Defer 19:19 Batch Processing Email Send + Archive 20:31 Stop emailing yourself 24:00 Listener Question: How do you use Prettier? Tweet us your tasty treats! Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include  @SyntaxFM  in your tweets

Thu, December 21, 2017

All About CSS BEM!

Scott and Wes dive into CSS BEM — What is it? Why do you need it? How does it work? Sign up for D3 in 5 Days — Sponsor D3 has a bit of a bad reputation for being hard to learn so Ben Clinkinbeard has put together this awesome 5 day email course that will get you comfortable with the 3 or 4 fundamental concepts that are needed to create amazing data visualizations with D3.js.  Get it now The Show Notes! 01:00 Minisode! What do you think? Meijer is the best! 05:00 What is CSS BEM? What problems does CSS BEM solve? Block, Element, Modifier! 8:00 What about really long class names? 9:00 Use with Sass/Stylus 12:00 What about styled components?! 15:00 Listener Question: Do / should you use Dropbox for a website with Git and node_modules? Tweet us your tasty treats! Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include  @SyntaxFM  in your tweets

Wed, December 13, 2017

Web Development in 2017 && a look ahead at 2018 🍾🍷

What happened in web development in 2017? What were our personal and professional feats in 2017? What should we look forward to in 2018? Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at  Snipcart.com/syntax  and sign up for three months free! Freshbooks — Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes! 02:00 Scott's 2017 Look Back Scott is a new parent Dealing with kids who don't sleep Scott's Breakdancing Gains 05:20 Wes' Look Back Taking Health Seriously First full year of Wes doing tutorials full time Course Correction VS Goals Course Platform Improvements Lots of Email Marketing Migration to Drip 09:10 Scott cut ties with startup 100% Invested in Levelup Tutorials Major Platform improvements New Payment Gateways Lots of new Series - 400 videos! 11:25 We Launched Syntax! Thank you! The show is getting good (we think?) 13:50 Wes launched his  Learn Node  Course Wes updated his  ES6 for Everyone  Course Lots of feedback on Wes'  JavaScript30  course Stickers! 16:20 Goals for 2018 The Yacht Club S.M.A.R.T. Goals 18:00 Scott's 2018 Goals More videos More Youtube Building a Set Less Overtime 20:35 Wes' 2018 Goals Releasing lots and lots of Content CSS Grid VS Code Some ideas around JavaScript and CSS Courses (tweet Wes your feedback) If it's not a Hell Yes, it's a no Double down on what works New Checkout Experience Delegate + Automate Get faster at recording 29:40 JavaScript in 2018 SSR Frameworks: Next.js, Gatsby, Nuxt.js ParcelJS Tooling is becoming less of a pain in the ass 33:00 GraphQL Is Blowin' Upppppp Typed Lan

Wed, December 06, 2017

Failure

Failure. How do you deal with it? How to learn from it? How do you know when you should give up vs keep pushing? Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at  Snipcart.com/syntax  and sign up for three months free! Get In Shape with DevLifts — Sponsor DevLifts  is how I (Wes) got in shape. After an indepth consultation about your goals, They will create you a personal training and nutrition plan. If you are looking to get in shape in 2018, now is the time to sign up. Use the code SYNTAX for an extra $50 off. The Show Notes! 01:34 Scott and Wes shoot the shit Wes is back from the DotJS conference Wes does a terrible (and hopefully not offensive) French Accent 03:50 What's the deal with the #FailFast culture We talk about Fear of Failure and how it can stop you from starting anything at all High Stakes vs Low Stakes Failure 09:20 Be aware of how fear of failure manifests itself in your work Just do it, put in the work Pen to Paper 12:20 How to deal with mid-project failure Getting sick of a project part way through Finishing Things is such an underrated skill Small wins is key for confidence Take the emotion out of the decisions 18:00 MVP - Minimum Viable Product 19:30 Do you plan for failure? Wes' Life is Course Correction Wes is Unapologetically Confident Scott is Ignorantly Confident 23:00 Another one of Scott's amazing segueways into our Sponsor 26:20 Wes' Facebook Ads Failures The cost of admission Own your role in something failing 33:33 Eating burnt rice is a huge character trait Pivoting 41:20 Our own personal failures detailed Scott's Soundcloud Scott's Bandcamp Sick Picks Scott:  Cypress.io Wes:  Dome D201 Dashcam <

Wed, November 29, 2017

What's New in CSS? Variables, Scoping, New Selectors and Color Functions

Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future? Bug Replay - Sponsor You need to try out  Bug Replay  for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster. Freshbooks - Sponsor If you are a small business or freelancer check out  Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes! 03:30 IT'S NOT CALLED CSS4 You can find the different levels over at  CSS Working Group Drafts 06:24 CSS Custom Properties (CSS Variables) Bite and chew over the syntax - it's backwards compatible What's the difference between this and Sass/Less/Stylus? JavaScript30.com  Day 3 uses JavaScript + CSS Variables CSS Tricks:  The CSS attr() function got nothin’ on custom properties Independent Transforms - transform: rotateX(var(--x)) translateY(var(--y)); 19:20 CSS Filters Drop Shadow Filter SVG Filters 28:20 RRGGBBAA Hex transparency in colors 31:00 Colour Functions CSS Next Draft Spec for Color Functions 36:00 CSS Level 4 Selectors ITS NOT CSS4!!!!!! css4.rocks 40:00 nth-of-selectoed :nth-child(3n of img.dog) div:has(img) 44:00 Some not-so-new-but-still-cool units Viewport Units min-heigh

Wed, November 22, 2017

Fitness, Nutrition, and Losing Weight 💪🏻

Wes and Scott talk about their fitness journey and how it relates to being a web developer in terms of energy, focus and mental clarity. Get Fit with Dev Lifts — Show Sponsor Dev Lifts  - Thad and JC are on a mission to make web developers healthy. They are currently offering Personal Training and Nutrition Plans for $149 (Regular $249) and with the code Syntax you'll get an extra $50 off. That's only $99 for the next ~95 people! The Show Notes 04:20 - Scott's Fitness Story 08:00 - Wes's Fitness Story 09:50 - The benefits of fitness and being a web developer. Productivity / Focus / Mental Clarity 14:00 - Finding Time to Work Out Tweet your work + workout routine to  @SyntaxFM 17:40 - How to work out / What to do / Routines? 24:00 - Learning to code && Learning to Workout 25:20 - Significant Other Buy-in Fitness Blender Starting Strength 28:00 - All About  Dev Lifts Jeff Nippard Youtube 34:00 — Nurition 36:00 — Wes' Keto Nutrition Plan Dom D'Agostino Keto Interview MyFitnessPal Keto Reddit Keto Gains Reddit 41:00 - Scott's Nutrition 42:00 - Pop or Soda? 45:45 - 16 : 8 Intermittent Fasting IF Reddit 48:30 - Dieting is bad Supplements — Don't take our Advice here. Talk to your trainer. 50:00 - Wes' Supplements and how Bags of Milk are the best BCAA Amino Energy Preworkout Coke'd Up Cissus Quadrangularis Extract - Genoflex Fish Oil Vita Jym Multivitamin 54:00 - Scott's Supplements

Wed, November 15, 2017

How to get into Speaking At Conferences

Wes talks to Scott about speaking at conferences. What are the benefits of speaking? How do you apply? What talk should you give? What makes a good conference talk? Freshbooks is the best! Freshbooks.com/syntax  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes Snow Tires are supes important Blizzzzaaaaakkksss!!! Benefits Free travel / accommodations / vacation Fantastic Friendships and Industry Connections Job Opportunities Industry Recognition Renewed Excitement Wes loved  David K Piano's Flip Talk How do you Apply / Where to Find Conferences Create a CFP You need to brute force it 🍯 Honey Hole:  Lanyrd Calls 🐝 Honey Hole:  The Weekly CFP 🍯 Honey Hole:  Papercall.io Meetup Types of Talks you could give Lessons Learned Talk The New Concept Talk ( the tasty treats talk ) My Approach to XYZ The Complicated Concepts Explained The Super Interesting Deep End Talk What makes a good talk? Skip the history lesson - hook them Keep your personal bio short Start with a banger ‼️ Short Code Examples Short Looping video examples Scott's Origin Story Podcast Make sure your talk works offline Prepare for aspect ratios Plug into the projector before your talk Live that dongle life Show people  why  they need to know something Slide Deck Software Powerpoint or Keynote Wes' HTML5 Slide Deck Another one of Wes' talks Reveal JS React Spectacle Prezi Conference Training Training pays well More hands on experience for conf attendees Getting the Most out of a tech conference <a href="http://wesbos.com/get-the-most-out-of-conferences/"

Wed, November 08, 2017

All About CSS Grid

It's a long awaited CSS Grid show! How does it work? When do you use it? What's the difference between Grid and Flexbox? Sponsor Save A Bro  is selling absolutely hilarious mustache t-shirts for $18 - all proceeds go to support the fight against prostate cancer. Use the coupon code "syntax" at checkout to get free shipping in the US. The Show Notes Wes Bos AMA  where he tricked Scott that Bert Bos was his dad CSS Tricks A Complete Guide to Grid Rachel Andrew Rachel Andrew Twitter Rachel's Grid by Example Rachel's Grid AMA CSS Grid Garden The Story of CSS Grid, from Its Creators Jen Simmons Jen Simmons Twitter Jen Simmons Labs CSS Grid Pinterest / Masonry Layout Question Wes' grid-auto-flow: dense; Experiment grid-auto-flow: dense; Docs caniuse CSS Grid Support  - make sure to click the "Show All" button "If someone thinks progressive enhancement means providing a crappy experience for older browsers then they’ve got a lot of reading to do." —  Sara Soueidan Benjamin De Cock - @bdc  dropping tasty CSS Grid treats all day long on twitter. CSS Grid Animation #1 <a href="https://twitter.com/wesbos/status/925422255601016

Wed, November 01, 2017

22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More

Buzz Words! WTF Do they mean?! Do They Mean Things?? Let's Find Out! Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Buzz Words This is the order in which we talk about the different concepts. If you have anything you'd like to add to the next buzz words show, tweet us  @SyntaxFM   Serverless / Cloud Functions Composition in functional programming funfunfunction Progressive Enhancement Singleton APIs + SDKs Pure Functions + Side Effects Date-fns Immutable / Mutable / Mutations Immutable.js JavaScript30 Array Cardio Isomorphic / Universal JavaScript Microservices Scoping Closures M odel  V iew  C ontroller Pattern Learn Node  with a stupid explanation of MVC Bike Shedding Tree Shaking Hoisting ES Next Asynchronous / Synchronous Sick Picks Scott:  Ghost in the Wires: My Adventures as the World's Most Wanted Hacker Wes:  Apollo Reddit App for iOS Shameless Plugs Scott:  React 16 for Everyone Tweet us your tasty treats! Wes Bos Scott Tolinski Make sure to include  @SyntaxFM

Wed, October 18, 2017

Tasty Treats — Rems VS Ems, Remote Work, Making Money, Getting good at Design + more! 🍬

Show Notes Q : Rems vs Ems vs Pixels? What do you use? Q : What activity, that isn't developer related, benefits you most as a developer? Becoming a Supple Leopard Q : Is a hot dog a sandwich? 🌭 Q  If Google offered you a job today, would you take it? Mike Rowe: Why Entrepreneurs Crave the 'Reverse Commute' Q : How did Wes and Scott Meet? Q : What are your thoughts on CMSs, like WordPress, adding JavaScript frameworks, like React? Q : Where do you find remote work? Q : How do you make money? Q : Can a back-end dev become a good designer? Hero Patterns Steve Schoger's Twitter Q : Do you ever feel tired? Q : What do you think about live streaming? Should we do a Syntax live stream?! Q : What stack should a new developer use? Q : What is your process for deciding on new tools? React FAQ  - sign up for Tim's newsletter! Q : Where do you see yourself in 5 years? Sick Picks Scott:  Fivestar Notebook Wes: Read about your credit card benefits + perks! Tweet us your tips! Wes Bos Scott Tolinski Make sure to include  @SyntaxFM

Wed, October 11, 2017

Advice for New Developers, Imposter Syndrome and Interviewing at Google

Scott and Wes dish out some tasty advice to developers who are new to web development. How do you get better? How do you deal with imposter syndrome? Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Shameless Plugs Wes just updated his ES6 course! Mastering Figma is now Launched! Show Notes This show is light on links :) The Gap by Ira Glass Hackathon Stater Sick Picks Nintendo Switch Creative Market Fonts Tweet us your tips! Wes Bos Scott Tolinski Make sure to include  @SyntaxFM

Wed, October 04, 2017

Our Stacks Explained 🖥️ 💪

Scott and Wes detail their current stacks that run their training platforms. From front end code linting to the server side and databases. Sponsor Intro to The Serverless Framework  by Loren Stewart. The first 20 people to use the code SYNTAX_FREE will get the course for free! After that make sure to use the code SYNTAX for an extra $10 off. Show Notes Wes' Stack Youtube Video Meteor Node.js Level Up Tutorials  is fast! Express Learn Node Passport JS MongoDB Mongoose mLab Hosting Mongohub MongoDB Compass Studio 3T MiniMongo React Styled Components Stylus Lang Metor Sessions Prerender.io React Apollo Cross Storage Victory Charts Cloudinary Tim Thumb Amazon S3 <a href= "http://docs.

Wed, September 27, 2017

The Command Line for Web Developers

This episode is all about how to become comfortable and proficient with the command line. This one includes windows users too! Sponsor Need to learn Docker? Check out Nick Janetakis'  Dive into Docker  course which is currently on sale! Show Notes React 16 Command Line Power User Course iTerm2 Hyper Awesome Hyper Cmder for Windows Windows Subsystem Linux Windows 10 Insiders Program ZSH Oh My ZSH  - You'll want to start here, not on zsh.org Fish Shell Oh My Fish Fisherman Bass ZSH Autosuggestion ZSH Syntax Highlighting z Frecent  (GET THIS) Tree Brew Brew Cask Trash CLI YouTube-DL Wes' Video on youtube-dl pbcopy

Wed, September 20, 2017

Why is everyone switching to VS Code?

Scott and Wes talk about switching to VS Code. What is so good about it? Killer features? Must have Plugins! Sponsor Need to learn Docker? Check out Nick Janetakis'  Dive into Docker  course which is currently on sale! Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes Cobalt2 for VS Code Visual Studio Code @rachsmithtweets 🔥 rename symbol tip  - you should follow her too! Use F8 to cycle through inline errors Open the problems tab to see all your applications errors and warnings The built in debugger ESlint Package You can use the  Prettier Package  on it's own, or use via your .eslintrc file and just use the above ESLint plugin. Git History Git Lens Debugger for Chrome Color Highlight Settings: "editor.formatOnSave": true and "eslint.autoFixOnSave": true Wes' Current ESLint + Prettier Config Grumpy Developer Import Cost Path Intellisense npm Intellisense <a hr

Wed, September 13, 2017

Our favourite Productivity Hacks 🔥

Scott and Wes - Do you sleep? How do you get so much done? You replied to me way too fast! We share our best productivity hot tips and the apps we use the GSD. Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes Alfred Alfred Package Manager -Packal Alfred Units Conversion Workflow Cobalt2 Alfred Theme Alfred Timezones Workflow Alfred Process Kill Workflow ⌘+L makes text huge! Alfred Font Awesome Workflow Alfred Encode / Decode Workflow Alfred DevDocs Workflow Alfred Stack Overflow Workflow Clipy Clipboard Manager App Todoist Things App Getting Things Done Book Git Alias Text Expander aText Evernote [Video Speed Controller]<a href= "https://chrome.google.com/webstore/detail/video-sp

Wed, September 06, 2017

CSS in JS 💅👩‍🎤💁🚒 (Drama Free!)

The most requested syntax episode ever! We break down CSS in JavaScript. Pros/Cons? What is it? What problems does it solve? What libraries should you use? Is it stupid or amazing? Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes BEM Styled Components Emotion Radium Glamorous Styled JSX Sick Picks Boxyapp Mail Client Airpods Shameless Plugs Grab Level Up Tuts before the price goes up! Modern Dev Tools

Wed, August 30, 2017

Dang, that's handy! JavaScript Utility Libraries 🛠️

Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!" Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Lodash Underscore You should follow  John David Dalton  on twitter Moment.js moment().endOf(‘term’) date-fns Slugify speakingurl Fetch API Axios Cookie Jar store.js Cross Storage Faker.js Woah URL.searchParams() is a thing Parse URI url-search-params-polyfill ngrok Browsesync Async Bling.js Sick Picks Essentialism Book Essentialism Audiobook Satechi Aluminum Multi-Port Adapter <a href="

Wed, August 23, 2017

Wes Bos Origin Story 🎸💼💻🔥🐷

In this episode, Wes talks about his career path from a MySpace customizer to where he is now. Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Brootal PS20.itgo.com CDN Money 2004 WesBos.com The Success of Zara: Technology Makes It Possible REI BTM at Ryerson University WordPress Codex Angle Media Group Ryerson Co-op Jet Cooper Darcy Clarke DealPage Daily Deal Aggregation jQuery IRC YayQuery Ladies Learning Code HackerYou Wes' Blog Sublime Text Book Command Line Power User Flexbox.io React For Beginners ES6 for Everyone JavaScript30 This Podcast Sick Picks MotoRead Shameless Plugs Wes' Courses Level UP Tutorials Youtube Twitter Wes Bos Scott Tolinski Syntax

Wed, August 16, 2017

Scott Tolinski Origin Story 🎧 📹 💻 🕺

In this episode, Scott talks about his unconventional career path and how to grow your career by working on what you love. Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes UofM Performing Arts Technology Devin Kerr Jamie Schefman Michelle Chamuel Guitar World Ghostly International Q LTD Michigan Creative Ford GTB Level Up Tutorials Scott Concussion Atya Sick Picks Good Hertz Shameless Plugs Wes' Courses Level Up Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax  

Wed, August 09, 2017

Accepting Money on the Internet 💰💸

In this episode we talk about how to accept money on the internet including the ups of Stripe, the downs of PayPal. Sponsor Freshbooks  - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Apollo React Apollo GraphCool Stripe PayPal Braintree Stripe Docs HTML5 Autocomplete Types Stripe Radar Royal Bank PayPal WorkAround Stripe Atlas Transferwise Stripe Bitcoin Sick Picks ChefSteps What Cha Tea Shameless Plugs Wes' Courses Level UP Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

Wed, August 02, 2017

How to Slam Dunk Freelancing 🏀🤑

Sponsor Deliciousbrains WP Migrate DB Pro  - Use the code SYNTAX for 20% off Show Notes Stickers  - SOLD OUT MORE SOON Scott's Personal Website on Gatsby Gatsby Codealong Gatsby MJML Email Framework The E-Myth Revisited Book Design is a Job Breaking the Time Barrier Basecamp Trello Freshbooks Wave Sick Picks Hyper Key + Karabiner Elements Better Touch Tool King of the Road Twitter Wes Bos Scott Tolinski Syntax

Wed, July 26, 2017

JavaScript Tooling - 004

Show Notes Deliciousbrains WP Migrate DB Pro WesBos Website Level Up Tutorials WHY USE WWW? Webpack Babel ESLint Prettier Babili Prepack Sick Picks Figma Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma. CalDigit TS3 Dock The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace. Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. React Native for everyone Twitter Wes Bos Scott Tolinski

Wed, July 19, 2017

CSS Preprocessors and Structuring CSS - 003

Show Notes WesBos Website Level Up Tutorials GraphQL Dinosaur JS Conference Angular Pug / Jade EJS BEM Methodology Stylus Rupture Less Sass PostCSS PostCSS Autoprefixer RuckSack cssnext LostGrid Bootstrap Haml Babel Flickity Plugin webpack Compass React Sick Picks Bartender 2 Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar. Vanilla Hide menu bar icons on your Mac. Power Blocks One set of Power Block replaces racks of dumbbells Shameless Plugs <a id="user-content-javascript30" class="anchor" href= "https://github

Wed, July 12, 2017

Webcam and audio access with WebRTC and getUserMedia() - 002

Show Notes WebRTC Apple WebRTC Support GetUserMedia Slack WebTorrent https://github.com/webtorrent/webtorrent Soctt WebRtc Mirror - TBC MediaRecorder Electron Kap Wes Security Cam Scott Colorbars YouTube - TBC Wes Face Detection Fluent Conf Sick Picks Peak Design Everyday Backpack Everyday Backpack Video Quik by GoPro Splice Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. Level Up Tutorials Over 860 free video tutorials for beginners, intermediate and expert web professionals. Level Up your skills with clear, high production, free vi

Wed, July 05, 2017

React Tools - 001

Show Notes Wes Bos' Site Level Up Tutorials site Level Up Tutorials YouTube channel Scott Tolinski personal site Cloudflare Next.js Hacker News Example in Next.js GraphQL Graphcool create-react-app React dev-tools Redux dev-tools Preact.js React Storybook Meteor Blaze Sick Picks Wes:  Parcel App Scott:  Fish shell Shameless Plugs Learn Node React Native for everyone

Tue, June 27, 2017

Syntax 000 - PREVIEW

Subscribe to this podcast in your player of choice! Links available over at https://Syntax.fm