696: How to Build a Website or App
In this episode of Syntax, Wes and Scott answer a listener’s question about their process for building a website in 2023. Do you start with design? With code? How do you decide on which CMS or if you need a CMS? How do you choose a backend framework? And where do you host it? Show Notes 00:10 Welcome 02:12 Syntax Brought to you by Sentry 03:06 How do you build a website? 04:57 Start with the design Figma Design Systems with Brad Frost 11:12 Choose a Frontend / Components Pug EJS React Svelte Remix Storybook 25:16 Real data or fake data? Polypane DrizzleORM 29:34 Do you need a CMS or not? Statamic Syntax 254: Headless CMS Break Down & Roundup WordPress.org 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
22 Nov 202355min
695: 5 New CSS Features You Should Know
In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim. Show Notes 00:25 Welcome 01:10 :nth-child(4 of .neat) selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use 06:43 CSS Motion Path 10:38 Scroll Snap Practical CSS Scroll Snapping 14:36 Scroll Driven Animations Scroll-driven Animations Supper Club × Bramus Van Damme on CSS 16:58 Margin Trim Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads
20 Nov 202324min
694: What's Up With Angular with Mark Techson
In this supper club episode of Syntax, Wes and Scott talk with Mark Techson about the recent Angular announcements and updates. How did Angular implement signals? What’s new in Angular 17? How does Angular handle CSS or UI component libraries? Show Notes 00:30 Welcome 01:11 Syntax Brought to you by Sentry 01:39 What’s changing with Angular? Special Angular Event Angular 03:19 What happened to Angular.js, and what’s happening now? StackBlitz Analog | Analog Supper Club × Self Hosted Backend-as-a-service with Brandon Roberts 08:19 What makes Angular special? 13:21 How did Angular implement signals? 17:17 What is a computed value? 18:54 What’s new in Angular 17? 25:10 What’s the meta framework story with Angular? Angular Material UI component library CDK | Angular Material Angular - Angular elements overview 27:40 Adding close to the metal if statements 31:03 View 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
17 Nov 202355min
693: Lessons Learned & Bugs Fixed from Launching Syntax.fm
In this episode of Syntax, Wes and Scott talk about the lessons they learned while launching the new Syntax website including launching now, transcription bugs, error monitoring, black text on black backgrounds, and more. Show Notes 00:10 Welcome to Syntax 01:41 Syntax Brought to you by Sentry 02:43 Don’t wait. Launch! 04:28 Transcript bug Most Powerful Speech-to-Text API | Deepgram 09:01 Error monitoring is a must 12:36 Timestamp error 16:20 Black text on black background might hide things 17:33 WASM Vercel file system 21:18 Things have gotten easier to launch PlanetScale: The world’s most advanced database platform — PlanetScale 23:36 Switching from OpenAI to Anthropic Claude and AI Responses aren’t always JSON 25:34 Local dev is fast Navigation API 31:37 Mind your payloads 32:41 GitHub Milestones 33:57 Almost forgot the Robots.txt 36:17 Chron job timeout Inngest 40:06 TypeScript errors don’t need to be zero 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
15 Nov 202356min
692: You Need Stale While Revalidate
In this episode of Syntax, Wes and Scott explain what Stale While Revalidate is, why you should use it, and explore whether you should use it all the time on all the things. Show Notes 00:25 Welcome 01:05 Syntax Brought to you by Sentry 01:34 What is Stale While Revalidate? 03:13 Why is caching important? Max age calculator Can I Use 05:09 Where does a cache live? 07:05 Limit how often an API is being hit 11:51 What about Stale while Revalidate? 18:30 Why wouldn’t you just use Stale While Invalidate on everything? Syntax 484: Cache Control Headers Explained Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads
13 Nov 202322min
691: Cloudflare Workers Are Next Level With Rita Kozlov And Brendan Irvine-Broque
In this supper club episode of Syntax, Wes and Scott talk with Rita Kozlov And Brendan Irvine-Broque about Cloudflare Workers, Cloudflare AI, browser rendering API, Cloudflare’s D1 database, WinterCG, miniflare, and more! Show Notes 00:32 Welcome 01:53 Syntax Brought to you by Sentry 02:20 What are Cloudflare Workers? Announcing WinterJS Cloudflare Workers® Puppeteer | Puppeteer 06:23 How long did Workers take to ship? 07:31 Can you run your entire business on Cloudflare Workers? 10:52 Interesting use cases for Cloudflare Workers 12:33 What makes the edge important? 18:05 Managing GDPR compliance 19:02 What are the tradeoffs of building with Cloudflare Workers? Cloudflare Queues 20:22 How does Workers pricing work? 26:54 What are situations where you might need longer times? 28:50 Browser rendering API Browser Rendering docs 29:43 What is Cloudflare D1 database product? Cloudflare D1 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
10 Nov 20231h 4min
690: How To Dark Mode and Beyond
In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content. Show Notes 00:00 Syntax + Sentry Announcement! 01:35 Welcome 02:23 Syntax Brought to you by Sentry 03:16 How to implement a theme 10:27 Writing the CSS 11:38 Glasses wearers protip 13:02 Class on the body and server side rendering issue 14:02 CSS Variables 15:05 Color variables in CSS 21:07 Working in half pixel sizes 22:40 Variable usage 25:23 Naming variables after what they style 30:42 Component level variables 33:27 Using zones 38:41 Themes should be defined as light or dark 39:20 Issues: Moving from light to dark 42:29 Issues: Drop shadow in dark mode 44:00 Issues: Flash of unthemed content 44:40 Issues: Opacity values 49:45 Issues: SVG need change color 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
8 Nov 20231h 4min
689: You Should Be Using JavaScript Maps & Sets
In this episode of Syntax, Wes and Scott talk about why you should be using JavaScript maps sets, whether you can access them directly, what makes them great, and what weak versions of both are. Show Notes 00:26 Welcome 01:34 Syntax Brought to you by Sentry 01:54 What makes Maps a spicy buffalo object? 07:46 API of Map 08:51 Looping over items in a Map 09:27 Can you change the size of a map after it’s been created? 10:07 Can you access properties directly? 12:13 Where have we used a map as a cache? 13:32 What makes a set an array honey garlic array? 17:28 When should you be using sets instead of an array? Proposed Highlight API is built on Sets 21:47 Can you spread sets like an array? 22:40 Weak versions of map and set WeakMap and Garbage collection Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads
6 Nov 202328min
