Syntax - Tasty Web Development Treats cover image

Syntax - Tasty Web Development Treats

Latest episodes

undefined
Jun 7, 2023 • 43min

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 TypeScript without TypeScript – JSDoc superpowers TypeScript: Documentation - JSDoc Reference Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team Svelte repo is finally being converted from Typescript to Javascript with JSDoc If you are on a JS project and are missing the TypeScript hinting in your editor, you can still type your code with JSDoc syntax comments and VS Code will detect and use it! Sprinkle in a little JSDoc on top of your TypeScript when needed - helpful to adding descriptions to returned values, or marking things as deprecated TypeScript to JSDoc ××× SIIIIICK ××× PIIIICKS ××× Scott: Watch MerPeople | Netflix Official Site Wes: 18V ONE+ 45W HYBRID SOLDERING STATION (TOOL ONLY) | RYOBI Tools Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
undefined
Jun 5, 2023 • 34min

Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset

The hosts discuss various ways 'nothing' is expressed in CSS, such as 0 vs 0px, no, none, hidden, initial, and unset. They cover hiding elements, collapsing margins, and the usage of 'role of none' and 'role of button' in CSS. They also touch on honey pot inputs, the 'disabled false' attribute in HTML, and representing zero in CSS.
undefined
Jun 2, 2023 • 1h 4min

Supper Club × Matt Rothenberg and Idan Gazit on Github Next

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

The New Syntax Site × Ingest, Stack, AI and more

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

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 Scott on Bluesky Syntax on Bluesky
undefined
May 26, 2023 • 56min

Supper Club × Bramus Van Damme on CSS

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

Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

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

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 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
undefined
May 19, 2023 • 56min

Supper Club × Adam Argyle on What's New in CSS

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

Where Should You Host Your App? Hosting Providers Compared

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

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode