Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess. Show Notes 00:00 Welcome to Syntax! 00:33 Breakdancing in the Olympics. 05:29 Brought to you by Sentry.io. 05:44 Why your CSS sucks. 07:01 You’re styling the wrong element. 11:01 Nesting too deep. 12:37 You don’t understand specificity. 14:56 Your classes don’t use a system. 16:24 You’re using values instead of CSS vars. 20:16 You don’t understand block vs inline vs inline-block. CSS Logical Properties 21:16 You aren’t using the right tool for the job. CSS Flexbox, CSS Grid. 24:15 You’re setting the value in too many places. 24:31 You’re scoping to tightly or not tightly enough. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem. Show Notes 00:00 Welcome to Syntax! 00:34 What is Deno? 05:08 Deno 2.0 07:49 NPM compatibility 09:40 What parts of Node aren’t doable in Deno? 11:22 Do we need a hard break from Require? 13:51 Package management 16:25 Security and performance benefits of Deno 20:57 Brought to you by Sentry.io 20:57 Thoughts on Bun and Node additions 26:25 Ryan’s favorite Deno projects Lume Fresh webgpu-examples gpucraft minecraft clone + deno + webgpu gpucraft example Shaderplay Orillusion 28:42 Will we ever see a unified file system API? 31:49 Typescript 36:12 Jupyter Notebooks with Deno Polars 39:11 AI and WASM in JavaScript 42:01 Deno 2.0 features and future 43:08 Sick Picks & Shameless Plugs Sick Picks Ryan: McCarren Park Shameless Plugs Ryan: https://deno.com/enterprise 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 with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks. Show Notes 00:00 Welcome to Syntax! 01:18 Brought to you by Sentry.io. 01:51 What Alex does at Atlassian react-beautiful-dnd Pragmatic drag and drop 04:38 What makes drag and drop tricky. 06:38 Use-cases. 10:54 What security is in place? 12:30 How to make it feel native. 19:20 Is the drag and drop spec ongoing? 20:03 How do you build this headless? 21:33 How does drag and drop work with frameworks? 23:48 Making drag and drop feel the same across mobile and desktop. 26:09 What’s the key to really good drag performance? 29:58 How do you make drag and drop accessible? 34:57 Pragmatic drag and drop code vs application code. Shoelace shadcn 40:00 How does testing work? Playwright Cypress 43:15 Internal adoption at Atlassian. 44:27 Working on high-impact projects. 49:15 Versioning and internal adoption at Atlassian. 51:29 Sick Picks + Shameless Plugs. Sick Picks Alex: Coffee, James Hoffmann YouTube Channel. Shameless Plugs Alex: Dom Events. 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

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

Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem. Show Notes 00:00 Welcome to Syntax! 01:41 Brought to you by Sentry.io. 02:28 The State of React 2023. 03:11 The Main API Painpoints. 04:31 forwardRef. 05:27 memo. 06:39 Context API. 07:18 StrictMode. 08:45 Double rendering. 09:36 State management. 11:58 Hooks Pain Points. 12:11 useEffect. 12:33 Dependency arrays. 13:11 New API Pain Points. 13:19 React Server Components. 14:40 Taint API. 15:19 Libraries. 17:02 Jotai. 17:45 Apollo Client. 19:05 Redux. 20:57 Redwood. 21:26 React Aria. 21:55 Astro. 22:04 The most negative. 23:35 Component Libraries. 25:50 Other Component Libraries. 25:53 Mantine. 27:47 Details element. Tolin.ski/demos. 28:59 Honorable mentions. 29:07 Animations. 29:28 Data Visualization. 31:26 CSS Tools and Libraries. 33:14 Styled Components. 34:16 Meta Frameworks. 38:50 Hosting. 40:08 Other Services. 40:45 Back-end language trivia. 43:00 State management. 43:40 Data Loading. 44:08 Other Tools. 44:09 Testing Libraries. 44:45 React Renderers. 47:58 Podcasts, thank you! 48:14 Sick Picks & Shameless Plugs. Sick Picks Scott: Thermacell. Wes: Nerf Guns Shameless Plugs Wes: Syntax.fm. 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 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

Scott and Wes debate whether your website really needs JavaScript to function. They explore the principles of web standards, progressive enhancement, and test popular websites like Shopify and Netflix to see how they perform without JavaScript. Show Notes 00:00 Welcome to Syntax! 00:11 Take 2 01:43 Brought to you by Sentry.io. 02:19 The clip summarized. 03:16 Your website should load, be readable and be (mostly) styled without JavaScript. 07:32 Web standards first. If it can be done without JavaScript, it should be. 08:09 What if the CSS doesn’t load? 10:20 Linking 10:24 Forms. 12:11 Links (Duh, but also c’mon!) 12:35 Query parameters. 13:57 Server render if possible. 15:20 Progressive Enhancement. 17:24 CSS Page Transitions. 19:07 Let’s test websites out. 19:15 Shopify. 22:16 Syntax.fm. 25:23 Netflix. 27:27 Local first and offline service workers. 29:27 TikTok. 29:33 GitHub. 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 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

Scott and Wes chat with Glauber Costa from Turso about the evolution of databases and the fascinating technology behind Turso. They dive into topics like the benefits of massive multi-tenancy, vector search, and why Glauber made the switch from NoSQL to relational databases. Show Notes 00:00 Welcome to Syntax! 00:36 Turso’s relationship with Drizzle. 02:10 What is Turso? 04:23 Brought to you by Sentry.io. 04:48 Using libSQL without Turso. 06:21 An explanation of Vector Search. 07:16 Vector databases are being ‘Sherlocked’ by larger databases. 09:24 Why did you move from NoSQL to Relational? 12:00 Allows for massive multi-tenancy - what does that mean? 15:27 Transactional schema changes. 16:30 Why would you want 10,000 databases? 19:02 What makes SQLite cheaper? 22:59 The strategy for building a business around an inexpensive tool. 26:13 Pull requests and branching within SQLite. 28:52 Database snapshots for rollbacks. 31:14 Driving the cost of a database to zero allows for rethinking architecture. 32:35 SQLite informing Turso’s edge functionality. 36:56 Automatic replica database syncing. 39:10 Is the database a bottleneck? 39:25 Embedded Replicas. 40:04 How do embedded replicas handle conflict resolution from offline users? 41:43 If the server is offline, can the database live in the client or WASM? 43:09 Conflict resolution. 44:47 What makes Turso stand out? 47:51 What was it like working on the Linux Kernel? 51:57 Do you use Linux? 52:46 Sick Picks & Shameless Plugs. Sick Picks Glauber: Understanding yourself, What is Aphantasia. Shameless Plugs Glauber: React Rally Park City, UT, Turso, Laravel. 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 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

In this episode of Syntax, Wes and Scott talk through recent developments in AI and how they might be useful for developers, whether AI is still worthy of the hype, and whether developer jobs are at risk from AI. Show Notes 00:10 Welcome 03:10 Syntax Brought to you by Sentry 03:49 v0.dev v0 by Vercel 09:28 Anthropic and Claude Claude Syntax Listener Survey 18:02 Facebook’s Meta AI AI at Meta 18:48 Cloudflare AI Large language model (LLM) Speech to text Translation Sentiment Analysis Image classification Embedding 27:24 AI Hardware announced Rewind 29:39 Cloudflare Hugging face Hugging Face – The AI community building the future. StarCoder: A State-of-the-Art LLM for Code Vectorize: a vector database for shipping AI-powered applications 36:28 OpenAI Function calling Function calling and other API updates 38:55 GPT-4V GPT-4V(ision) system card 42:36 GitHub CoPilot 44:03 Are we still on the AI hype train? 48:27 Are our jobs at risk as developers? 52:24 Spotify DJ AI Spotify Debuts a New AI DJ 53:29 ChatGPT plugins ChatGPT plugins 55:19 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Coding App for Kids | codeSpark Academy Wes: Peter Santenello, Roblox 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 all the libraries we don’t need to use anymore thanks to their features being built into the browsers now. Show Notes 00:24 Welcome 01:55 Syntax Brought to you by Sentry 02:17 Why did people use jQuery? jQuery lukeed/polka: A micro web server so fast, it’ll make you dance! 05:12 Writing our own jQuery plugins 07:23 AJAX requests jQuery.ajax() 08:29 Express Migrating to Express 5 14:58 Underscore.JS Underscore.js 19:27 Require.js RequireJS 21:06 LeftPad Coder unpublished 17 lines of JavaScript and “broke the Internet” | Ars Technica 23:13 Grid systems 960 Grid System Susy | OddBird 26:24 Sass, Less, etc. Can Vanilla CSS Replace Sass Yet? — Syntax Podcast 603 26:58 Sockets.io Socket.IO 29:50 What else is going to get jQuery’d? 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 Chris Lattner about Mojo, a new programming language for AI developers. Should developers learn Python? Where does Mojo run? What is Chris excited about in AI’s future? Show Notes 00:31 Welcome 01:05 Introducing Chris Lattner Chris Lattner’s Homepage Chris Lattner on Wikipedia Chris Lattner on GitHub Chris Lattner on Twitter Modular (@Modular_AI) / X Modular: AI development starts here Swift.org - Welcome to Swift.org 03:50 What’s the history behind the hardware? 08:10 What’s the difference between a compiled language vs an interpreted language? 12:13 Is Mojo a programming language? Mojo 🔥: Programming language for all of AI 15:12 Are Python libraries compatible with Mojo? 15:26 Why did you choose Python? 16:49 Why is AI so Python focused? 19:19 Should web developers learn Python? 21:40 Where does Mojo run? 25:05 How did you use the flame emoji for the Mojo file extension? 29:05 How does machine learning actually work? 37:36 Will Mojo be open source in some way? 39:16 How do you start developing a new programming language? 43:14 What is the future of developer jobs? 45:30 What are you excited about with AI in the future? 47:24 Supper Club questions Welcome to a World of OCaml 52:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Exercise Shameless Plugs Mojo 🔥: Programming language for all of AI 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, it’s part 2 of Wes and Scott’s reactions to the 2023 State of CSS survey including CSS frameworks, tooling, browser usage, SVG and CSS, and the CSS Awards. Show Notes 00:10 Welcome Reacting to State of CSS Survey — Syntax Podcast 672 State of CSS 2023 01:15 Syntax Brought to you by Sentry 01:29 CSS Frameworks Bootstrap · The most popular HTML, CSS, and JS library in the world. Open Props: sub-atomic styles Lightning CSS 10:57 How happy are you with CSS frameworks? 17:21 Other tools CSS Analytics - Project Wallace 19:34 Top utilities in use 24:48 Browser usage 29:01 CSS usage 33:25 Browser incompatibilities 36:42 SVG and CSS 44:28 Resources for learning CSS Kevin Powell | CSS Evangelist Fireship - Learn to Code Faster LeveUp Tutorials 46:55 Awards Panda CSS - Build modern websites using build time and type-safe CSS-in-JS 50:48 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: A Timeline of the 1970s Heavyweight Boxing Division (Boxing Documentary) / Full Boxing Timelines Wes: NEIKO 10181A Step Drill Bit Set 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 through tips for upping your home office vibe, including cable management, lighting, ergonomics, and even roller blade wheels. Show Notes 00:18 Welcome 00:46 Syntax Brought to you by Sentry 01:13 Creating a great home office Scott’s New Office × The Levelup Lodge — Syntax Podcast 461 Wes’ New Soundproof Office — Syntax Podcast 516 03:22 Lighting 06:08 Clutter and cords Alex Tech 25ft - 1/2 inch Cord Protector Wire D-Line CC-1 Light Duty Floor Cord Cover/Cable Protector Cable Clips WireRun Under Desk Cable Manager 14" 10:33 Clean 13:42 Sound absorption Bose QuietComfort 35 II review Wyze Noise-Cancelling Headphones 19:26 Ergonomics VIVO Single Monitor Height Adjustable Counterbalance Pneumatic Arm Desk Mount Stand 23:17 Roller blade wheels for your chair Office Owl Caster Wheels 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

Scott and Wes serve up a gameshow-style quiz with STUMP’d, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights! Show Notes 00:00 Welcome to Syntax! 01:17 Brought to you by Sentry.io. 02:03 The longest game of Rock, Paper, Scissors. Round 1 03:22 In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other? 05:56 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits? Round 2 09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area. 11:34 What is the “Temporal Dead Zone” in JavaScript, and how does it relate to variables declared with let and const Round 3 13:29 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue. 17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM? Round 4 20:05 Explain the process of Critical Rendering Path optimization in modern web browsers 26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript. Round 5 30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development. 32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores. Round 6 35:26 Explain the concept of “code splitting” in modern JavaScript applications. 37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility. Round 7 45:15 Explain the concept of “Server-Sent Events” (SSE) in web development. 47:37 What’s the difference between contain layout and contain paint? 49:30 Sick Picks & Shameless Plugs. Sick Picks Scott: diskprices. Wes: Slime Tire Sealant. Shameless Plugs Scott: 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

In this episode of Syntax, Wes and Scott talk with David East about Google’s new cloud based full-stack, multiplatform app development workflow, Project IDX. Show Notes 00:22 Welcome 01:31 Browser in the car 02:16 Syntax Brought to you by Sentry 02:24 Who is David East? David East David East David East (@_davideast) / X Learn from David East’s courses | Frontend Masters Firebase | Google’s Mobile and Web App Development Platform 04:32 What is IDX? Project IDX Flutter - Build apps for any screen Welcome to nix.dev — nix.dev documentation 13:15 What’s the experience of IDX? Nx: Smart, Fast and Extensible Build System 16:42 IDX isn’t just a toy - it’s a dev machine 20:29 What’s the offline mode like? 23:30 How are VS Code extensions handled? 27:03 Is multiplayer or project sharing on the road map? 28:45 How is latency taken care of? 31:43 This could be faster than local dev environment 36:18 Portability of your projects 42:25 What do you think about iPad coding? 44:28 Phone testing with IDX Firebase Test Lab 46:59 How is AI being integrated? 50:23 Supper Club questions Introducing Operator | Fonts by Hoefler&Co. MD IO by Mass-Driver - Future Fonts 55:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× CSS Shameless Plugs The Bad At Css Podcast 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 answer your questions about Bun, using custom auth headers, the difference between trpc, REST, or GraphQL, documenting your code, why learn Rust, and more! Show Notes Take the Syntax Survey Attend the Syntax Meetup Oct 10th in Toronto 00:00 Syntax Survey 00:24 Syntax Meetup 01:02 Welcome 01:24 Scott’s macOS bug Tauri Apps 02:19 Syntax Brought to you by Sentry 02:40 What are your thoughts on Bun? Bun — A fast all-in-one JavaScript runtime Zig Programming Language Deno, The next-generation JavaScript runtime Cloudflare Workers Netlify Connect Storybook Histoire 11:25 How can I add custom auth header for image requests done by the browser? 17:32 What are the differences between trpc, REST, and graphql? 24:48 What kind of teams would use trpc, REST, or graphql? 27:12 Are there any podcast guest opportunities on Syntax? 32:21 With no initial documentation, how do you suggest we document our intricate code, business logic, and integrations? 38:53 Rust didn’t invent this, they’re common paradigms in languages 41:05 Why Rust? Rust Programming Language 43:52 Is Scott still using his Tonal? Tonal 44:42 What did I do to make Fetch rebel against me? Proxyman 50:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Glow Up Wes: SendCutSend 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 headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website? Show Notes 00:26 Welcome 01:21 Syntax Brought to you by Sentry 01:41 Why do we care about Headings? How-to: Accessible heading structure - The A11Y Project 03:12 Heading design provides an outline for your website 08:45 Using H1 classes? 10:28 Is the logo an H1? 13:03 Giving an ARIA level 17:14 Can headings be visually hidden? 21:00 Benefits of good heading design 22:27 Tooling Heading outlines - ADG HTML Standard Polypane, The browser for ambitious web developers HeadingsMap - Chrome Web Store HeadingsMap – Get this Extension for 🦊 Firefox (en-US) Tweet us your tasty treats Scott’s Instagram 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