In this supper club episode of Syntax, Wes and Scott talk with Bramus Van Damme all about CSS, what the CSS Working Group is, how he got good at blogging, setting custom property types in CSS, view transition API, and so much more.

Show Notes

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

××× SIIIIICK ××× PIIIICKS ×××

• Meetups

Shameless Plugs

• Scroll-driven-animations.style

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about not becoming dependent on Copilot, CSS variable limitations, finding Sick Picks, lodash hate, and more!

Show Notes

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

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Tales of Taboo podcast Spotify / Apple Podcasts
• Wes: Rubber Flooring

Shameless Plugs

• Scott: Sentry
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about the reasons your node_modules folder gets so large, and what you can do to help keep the file size down.

Show Notes

• 00:24 Welcome
• 00:51 The punching bag of Javascript
• DaisyDisk
• 02:03 Spoiler alert - it’s text
• 04:49 What actually increases the size?
• 07:29 Types
• 09:27 Polyfills
• 11:09 Raycast Snippets and BetterTouchTool
• 12:44 Babel
• 15:08 Markdown
• 15:52 Translations
• 18:23 What is the solution?
• Raycast
• Bundlephobia | Size of npm dependencies
• Better Touch Tool
• Fast, disk space efficient package manager | pnpm

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style.

Show Notes

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

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

• Onewheel // Future Motion
• Adam Argyle

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about your options for hosting your app including some of the big players, but also others you may not have heard of.

Show Notes

• 00:11 Welcome
• 01:06 Explaining basic concepts in hosting providers
• 07:55 How is hosting priced?
• 10:09 The big names in hosting
• Amazon Web Services
• Google Cloud
• Microsoft Azure
• DigitalOcean | The Cloud for Builders
• Sales Cloud
• Flightcontrol — AWS Without Pain
• Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589
• 16:29 Render
• Render
• 23:50 Vercel
• Vercel: Develop. Preview. Ship. For the best frontend teams
• 28:04 Heroku
• Cloud Application Platform | Heroku
• 31:58 Digital Ocean
• 36:10 Linode
• Create your account - Linode
• 38:34 Netlify
• Develop and deploy websites and apps in record time | Netlify
• The Deno Show — Syntax Podcast 322
• Decap CMS | Open-Source Content Management System
• 46:30 Fly
• Deploy app servers close to your users · Fly
• Railway
• 54:19 Cloudflare
• Cloudflare - The Web Performance & Security Company | Cloudflare
• 00:43 Deno deploy
• Deno Deploy | Deno
• 03:04 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Automators - Relay FM
• Wes: Dropbox.com

Shameless Plugs

• Scott: Sentry
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about Signals - what are signals and why is everyone talking about them suddenly?

Show Notes

• 00:25 Welcome
• 01:40 Chipping away at projects
• 03:20 WTF are signals?
• Signals
• Framework reimagined for the edge! - Qwik
• SolidJS · Reactive Javascript Library
• Zone
• Vanilla
• 09:03 What are the boundaries on signals?
• 10:49 Why are signals so popular now?
• 15:57 When wouldn’t you use signals?

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Dylan Jhaveri about his work at Mux, how Mux ingests and spits out video, and where Mux fits in a tech stack for developers working with video and audio.

Show Notes

• 00:36 Welcome
• 01:27 Who is Dylan Jhaveri?
• Dylan (@dylanjha)
• The Internet’s video infrastructure | Mux
• Mux Player
• 03:04 Why did you build Mux Player?
• FFmpeg
• FFmpeg WASM
• 06:19 How did you chose to go with web components?
• CanIUse Mediasource
• 09:36 What is Mux?
• 15:20 Can you stitch or clip video via the API with Mux?
• 18:07 Do you think hls will be supported in Chromium or Firefox?
• 21:56 How does Mux process videos into 5 versions?
• 26:35 Is Web assembly in use for video?
• 27:55 Has Mux researched AI for video?
• 31:13 Building a podcast transcription video
• 36:49 Do you have to use MP4? What about webM?
• 39:36 Media Chrome video player
• Elements for building media players
• 44:58 What’s Mux Data?
• Mux Data
• 49:33 Slick Mux website
• Mux.com
• 52:13 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Cruise

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk about UI elements and best practices with UI elements, as well as UI elements that exist in browsers.

Show Notes

• 00:10 Welcome
• 01:10 Making demos for fun
• 02:47 Why we’re talking UI elements
• 03:48 Bad UI elements in the browser
• Syntax 602: Modals, Popups, Popovers, Lightboxes
• Progress
• 10:47 Decent UI elements in browser
• 19:49 Enter Open UI
• Open UI
• 34:39 Accordion hunks
• 38:15 Pop overs
• 42:15 Focus group
• 46:10 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Fishskyn
• Wes: Flavacol & Butter Flavoured Coconut Oil

Shameless Plugs

• Scott: Sentry replays
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk all things Bluesky, the AT Protocol it’s built in, the terminology of Bluesky, and how the API currently works.

Show Notes

• 00:07 Welcome
• 00:53 Welcome to the Bluesky
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky
• 03:14 What could the new Twitter be?
• 07:56 What is Bluesky?
• Nostr
• Bluesky
• Twitter Blue
• Bluesky Staging
• Bluesky FAQ
• 10:25 Why is social media important?
• 14:01 What is AT Protocol?
• 22:06 Lexicon for Bluesky
• 28:10 Small group of devs building Bluesky
• Cravings by Chrissy Teigen | Fun Recipes & Cookware
• 29:54 Blocking issues
• 31:53 Bluesky API
• Samy on Darknet Diaries ep61

Shameless Plugs

• Scott: Sentry)
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Zach Lloyd about how Google Sheets works, why Zach wanted to build Warp, why did they use Rust to write Warp in, is Warp going to come to Windows, and more!

Show Notes

• 00:20 Welcome

• 01:12 Who is Zach Lloyd?

• Zack on Twitter

• Zack on LinkedIn

• Warp Terminal × Next Gen Terminals — Syntax Podcast 579

• Warp: The terminal for the 21st century

• 03:41 How does Google Sheets work?

• GWT

• 13:38 What is Warp and why did you build it?

• Introducing Warp

• 16:50 Why did you build Warp in Rust?

• Rust Programming Language

• Harfbuzz

• Adventures in Text Rendering: Kerning and Glyph Atlases

• 23:20 How would you move Warp to Windows?

• 26:02 How would you run Warp on the web?

• 31:24 How are the blocks done inside Warp?

• 36:23 Would Warp ever add a shell?

• 40:04 Is better completion support coming to Warp?

• 44:42 Warp AI features

• 52:08 Supper Club questions

• 56:52 SIIIIICK ××× PIIIICKS ×××

• Oh My Zsh - a delightful & open source framework for Zsh

××× SIIIIICK ××× PIIIICKS ×××

• Tonal | The World’s Smartest Home Gym Machine For Strength & Fitness

Shameless Plugs

• Join Us | Warp

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk about the tech stack they used to create the Syntax giveaway site for the Sentry + Syntax announcement week. What were the features of the site, how’d they generate proper codes, and how’d they stop developers from hacking the system?

Show Notes

• 00:07 How to do a giveaway and distribute it?
• 04:26 Building in the spirit of Syntax
• 05:44 The tech stack
• SvelteKit • Web development, streamlined
• Prisma | Next-generation ORM for Node.js & TypeScript
• Syntax × Sentry MMXXIII | Product Blog • Sentry
• PlanetScale: The world’s most advanced database platform
• My Places - Google My Maps
• sveltekit-basic-auth/hooks.server.ts at main · ghostdevv/sveltekit-basic-auth
• Voucherify: Free Random Codes Generator
• 09:48 Hosted on Vercel
• Vercel
• 13:04 What are the features of the site?
• 19:10 Generating the codes properly
• 26:48 Releasing locked coupon codes
• 29:13 Client to server side connections
• 32:56 Stopping developers from gaming the giveaway
• 46:29 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: The Super Mario Bros. Movie (2023) - IMDb
• Wes: The Strong National Museum of Play

Shameless Plugs

• Scott: Application Performance Monitoring & Error Tracking Software | Sentry
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about RPC, what it means, why are we talking about it now, tRPC, and will RPC take off?

Show Notes

• 00:22 Welcome
• 01:51 What does RPC mean?
• 04:52 Why are we talking RPC now?
• 10:27 Hype around RPC
• Supper Club × Solid.js with Ryan Carniato — Syntax Podcast 577
• 11:05 Isn’t this just a REST endpoint?
• 13:23 Considerations around RPC
• 16:11 What about tRPC?
• Supper Club × tRPC With Alex KATT Johansson — Syntax Podcast 526
• 18:08 Will RPC take off?

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Donata and Hans Skillrud of Termageddon on GDPR, privacy policies, cookie pop ups, and the various legal and ethical reasons to implement them properly.

Show Notes

• 00:36 Welcome
• 01:47 Who are Donata and Hans?
• Donata Stroink-Skillrud Esq., CIPP on Twitter
• Hans Skillrud on Twitter
• Termageddon
• Termageddon on Instagram
• Termageddon on LinkedIn
• 03:39 What are privacy policies and a terms of service?
• 4 Things to Look for in a Privacy Policy Generator - Termageddon
• Why accessibility is important when it comes to cookie consent - Termageddon
• 09:15 Does scrolling to the bottom and pretending to read terms work?
• 10:49 Do people ever read the terms of service?
• 15:57 Do companies ever actually get in trouble for violating privacy?
• 20:06 What is GDPR and the impact on small business owners?
• 32:30 Cookie war and pop ups
• 35:40 Essential cookies
• 42:42 Alternatives to Google Analytics
• The Google Analytics alternative without compromise - Fathom Analytics
• Self-hosted website analytics | Ackee
• 43:39 Denying cookies, but still able to create accounts?
• 48:57 Is there legal concerns with AI?
• Can ChatGPT (AI) write your Privacy Policy? - Termageddon
• 56:25 What is Termageddon?
• 58:59 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• EPIX From TV Series

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this potluck episode of Syntax, Wes and Scott answer your questions about type guards vs type casting, crypto usage, feedback for Syntax, custom status pages, SEO and metadata, uploading images, home automation, and more!

Show Notes

• 00:12 Welcome
• 01:23 Scott’s new gear
• MT-48
• Volt USB Audio Interfaces
• 07:36 Are type guards safer and superior to type casting?
• 13:51 I know you guys (lightly) rag on Crypto, but do you see any use-case there for proof-of-personhood?
• 23:34 Where do I give feedback outside of Twitter?
• User Feedback | Sentry Documentation
• 27:19 Do you have custom status pages created for your platforms?
• UptimeRobot: Free Website Monitoring Service
• Privacy Badger
• Status.io - Hosted Status Pages
• Statuspage | Atlassian
• DigitalOcean Status
• 35:12 Is metadata only good for SEO? Does SEO matter on pages you can only view if you’re logged in?
• 39:00 How do you upload images from authenticated users?
• 46:30 What do you think of Zed?
• Zed - Code at the speed of thought
• 53:21 I’ve got ADHD - any tips for focusing and staying on track?
• 56:54 How do I convince my partner to accept more home automation?
• 02:15 What kind of tools and processes do you use and find effective when learning?
• Obsidian
• Mind Map & Brainstorm Ideas - MindNode
• 06:42 Would it make any sense to use the Fetch API with a long running stream?
• 08:31 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Project Farm
• Wes: Splatypus

Shameless Plugs

• Scott: Sentry
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about CSS Color Functions, the benefits of dynamic css color, relative color syntax, color contrast, and color mix.

Show Notes

• 00:26 Welcome
• 00:49 Why we’re talking CSS Color Functions
• 01:57 Benefits of dynamic CSS color
• 03:14 Relative color syntax
• 06:51 Color contrast
• 09:26 Color mix

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets