Syntax - Tasty Web Development Treats

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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