Syntax - Tasty Web Development Treats
Alle afleveringen
1.049 afleveringen, van nieuw naar oud
-
749: Coding Shopify with Anne and Trudy of Design Packs
29 maart 2024 · 58 min
Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites.
Show Notes 00:00 Welcome to Syntax!
00:59 Who is Anne Thomas?
02:30 Who is Trudy MacNabb?
04:06 Shopify themes, how does one build a theme?
05:34 Do you have enough control with LiquidJS?
07:52 Changing components of a liquid template.
08:58 LiquidJS improving their dev tools.
09:29 LiquidJS email marketing.
10:32 Can you make your own LiquidJS methods?
Too Many Tabs Lees meer11:34 How would you create a theme from scratch using modern tools?
13:30 What about local dev and live reload?
Shopify Tools CLI15:17 Is Shopify improving?
17:13 What do you hate about Shopify themes?
Shopify Tools Theme Kit18:59 Have you used Hydrogen?
Shopify Hydrogen20:09 Headless has sacrifices.
22:02 Are people building full websites in Shopify?
23:56 Apps and integrations.
25:56 Are people creating businesses around these integrations?
29:16 What are design packs?
31:26 Do you run your own servers?
31:57 How does billing work with clients?
33:18 Apps being ‘Sherlocked’.
‘Sherlocking’ Explained35:21 Where is the data stored?
36:35 Can you make a custom UI?
38:40 What are the downsides of building apps on Shopify?
39:17 Are you expected to maintain versions?
40:46 Do you manage all the support independently?
42:01 How do you match with their existing themes?
43:54 What are the most popular blocks?
45:17 Does Shopify provide bundlers or compilers?
46:47 Shopify moving to blocks.
47:38 Living as a digital nomad.
Syntax Episode 586 on Nomad Developing49:48 A new app Anne and Trudy launched.
51:35 Limited by block size.
54:08 Sick Picks + Shameless Plugs.
Sick Picks Trudy: Bar of ShampooAnne: Alie Ward Ologies Podcast
Shameless Plugs Trudy: 25% off using SYNTAX25 at Design Packs
Hit us up on Socials! Syntax: X Instagram Tikto…
-
748: Fitness Will Make You a Better Developer
27 maart 2024 · 55 min
Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements.
Show Notes 00:00 Welcome to Syntax!
01:14 Brought to you by Sentry.io.
03:10 A very quick disclaimer.
03:32 A brief view of our fitness history.
06:19 Why is fitness important for developers?
09:12 Setting your goals.
13:06 Getting started with fitness. 13:13 Body-weight.
13:58 Stretching.
16:47 Fun activities that don’t feel like workouts.
17:48 Lifting weights.
Stronglifts Lees meerStartingStrength
25:47 Home gym gear.
Rogue Stall Bar37:14 Fitness programs.
40:53 I guess we have to talk about diet.
MacroFactorApp46:37 Motivation.
47:42 Supplements.
BulkSupplements.com Creatine51:23 Sick Picks.
Sick Picks Wes: Wikday Pull Up BandsScott: Booty Bands
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 -
747: Middleware Explained
25 maart 2024 · 28 min
Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills!
Show Notes 00:00 Welcome to Syntax!
00:41 Syntax on YouTube.
01:28 What is middleware?
05:04 Some real-world examples of middleware. 05:10 Authentication.
07:44 Redirecting users to a specific instance.
08:28 Logging + statistics.
09:41 Debugging.
10:00 Timers.
10:46 A/B testing.
11:59 Error handling + logging.
12:23 Caching.
13:02 Multi-tenant applications. Lees meer15:08 Where does it run?
18:07 What are the limitations?
21:52 Next.js middleware is one file only.
NextJS Middleware23:35 Sveltekit solution.
Sveltekit Hooks24:31 Connect style.
Fastify ExpressFastify Middle
25:28 One last thing, NPM Installing.
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 -
746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan
22 maart 2024 · 59 min
Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work.
Show Notes 00:00 Welcome to Syntax!
01:55 Should developers know how to run their own servers?
04:57 What is “bare metal”?
11:49 What the hell is Kubernetes?
12:25 Why would somebody need Kubernetes?
15:37 Using Kubernetes to spin up different instances on cloud providers.
etcd Lees meer16:43 Kubernetes managing traffic spikes.
18:46 How much downtime can you handle?
22:11 What exactly is a container?
24:06 What containers do you prefer?
DockerContainerd
25:28 Some additional terminology.
OCI Open Container Initiative26:43 What about WASM?
WASM WebAssembly29:31 Building a Docker container.
31:11 Why would someone want to use a WebAssembly container?
32:12 Are people shipping this technology?
33:36 What functions would you put in WASM?
36:57 How does someone make a WASM image?
39:22 A little more about Spin.
Fermyon Spin39:56 What type of processors are used in these servers?
42:27 What are home servers running on?
Turing Pi 2Daniel Mangum
Universal Blue
46:40 How should someone get started with Kubernetes?
Kubernetes.ioRawkode YouTube
Kubesimplify
Learnk8s
48:51 Infrastructure as code.
CDK for TerraformGraalVM
55:19 Sick Picks & Shameless Plugs.
Sick Picks David: Golem.cloudRestate.dev
Shameless Plugs David: Rawkode 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 -
745: Modern JS Toolchains (Biome, Oxc + More)
20 maart 2024 · 48 min
Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers.
Show Notes 00:00 Welcome to Syntax!
01:37 Syntax is on YouTube.
02:09 Do we really need tooling?
04:02 Popular tools are predominantly plug and play.
06:15 What can tooling do for us?
07:16 The tools in today’s workflow. 07:21 Linters.
11:29 Compilers and transpilers.
13:30 Formatters.
16:18 Tokenizers and Parsers.
16:46 Bundlers.
17:59 Macros. Lees meer20:26 The new tools in the space. 20:47 Biome, one toolchain for your web project.
28:27 Oxc, the JavaScript oxidation compiler.
33:01 Deno, code formatting.
34:13 ESBuild, an extremely fast bundler for the web.
34:37 Rolldown, fast Rust-based bundler for JavaScript.
38:34 Ezno, TypeScript type checker.
40:24 UnJS, Unleash JavaScript’s Potential.
41:45 Lightning CSS, CSS parser, transformer, bundler, and minifier.42:31 Is JavaScript good enough to handle these tools?
43:26 Sick Picks + Shameless Plugs.
Sick Picks Scott: Shinobi-Geddon: The 1980s Ninja CrazeWes: Bachans Japanese Barbecue Sauce
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 -
744: Docker For Developers
18 maart 2024 · 26 min
Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology.
Show Notes 00:00 Welcome to Syntax!
01:19 Brought to you by Sentry.io.
02:20 Easily reproducible environments.
02:57 Containerization technology.
Containerization Lees meerOS-level Virtualization
04:42 Docker is brand name containerization, there are others. Podman
Containerd
Buildah
LXD
05:26 Why would a web developer want to use Docker?
08:19 How do you get started with Docker? Download Docker DesktopStart With Docs
Docker 101
09:14 How does Docker work?
Docker SentryDocker Registry
Docker Layers
16:46 Adding Docker to an existing project.
SvelteKit DockerfileNode.js / Express
CLI Runner Twitchbot
Development PHP / Mongodb Dockerfile
21:37 What is Docker Compose?
Docker Compose22:50 What are some ‘gotchas’ or things to look out for when setting up a project?
Coding Garden ExampleHit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
CJ: X Instagram Tiktok TwitchTV YouTube
Randy: X Instagram YouTube Threads -
743: JavaScript Figma Plugins & Working at GitHub With Cameron McEfee
15 maart 2024 · 57 min
Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, Sentry.io, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director.
Show Notes 00:00 Welcome to Syntax!
01:06 Who is Cameron McEfee?
03:00 What does a Creative Director do?
09:47 In a creative and collaborative field, how do you deal with hurt feelings?
12:32 Experiences at GitHub (404/500 pages).
15:35 Who is responsible for all the Octocat variations?
GitHub Octodex Lees meer17:18 Did you ever get in trouble for using famous IP?
21:07 Working at Sentry.io.
25:08 What is your illustration process?
27:04 What is GuideGuide?
GuideGuideMoo Tokenizer/Lexer
33:13 Grid Notation.
36:10 Can ‘good colors’ be calculated, can good design be math’d?
40:46 What was the process of building your own plugin?
43:37 Adding guides with JavaScript APIs.
44:44 Recreating application UIs within plugins.
GoodHertz50:22 How are you architecting these plugins?
52:44 Sick Picks & Shameless Plugs.
Sick Picks Cameron:
Ember MugWaterparks Spotify
Execute Program
Shameless Plugs Cameron: GuideGuide 50% off
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 -
742: Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns
13 maart 2024 · 57 min
Scott and CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans.
Show Notes 00:00 Welcome to Syntax!
01:20 Brought to you by Sentry.io.
02:16 What book changed your life? Whatever you think, think the opposite Lees meerIt’s not how good you are, it’s how good you want to be
Crucial Conversations thanks @benvinegar
04:58 What are the web development fundamentals for beginners? Command Line Power User
08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? Chris Coyer’s Post
11:51 Advice for migrating an existing React project to TypeScript.
20:38 Countdown apps, performance vs accuracy.
25:19 Are you listening to podcasts? Which ones?
31:46 With AI on the rise, will free-tier plans become a thing of the past? CoolifySyntax 730: Own Your Own Paas
35:59 What is SemVer anyway? semver.org
npmjs
TypeScript on Semantic Versioning
40:14 A question on ergonomics, home office aesthetics and productivity.
47:59 Do you ever stop to consider VueJS in 2024? Why or why not? unjs.io52:12 Sick Picks + Shameless Plugs.
Sick Picks Scott: Ellenos YogurtCJ: Flat Iron Pepper
Shameless Plugs Syntax.fm 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 -
741: TypeScript Interview Questions - STUMP’d
11 maart 2024 · 25 min
Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records.
Show Notes 00:00 Welcome to Syntax!
TypeScript Lees meer01:05 Brought to you by Sentry.io.
03:20 How do you combine string literal types?
Template Literal Types06:34 What is a TypeScript Generic and why would you use one?
TypeScript Generics08:12 How do you write a conditional type?
TypeScript Conditional Types09:58 Generating TypeScript type from a function.
Stricter Generators14:09 How do d.ts files work?
Module .d.ts16:25 Name one difference between a type and an interface.
Types vs Interfaces19:15 What is a tripple-slash directive and why would you use them?
Tripple-Slash Directives20:52 What is a TypeScript record and what is it used for?
Utility TypesHit 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 -
740: Local AI Models in JavaScript - Machine Learning Deep Dive With Xenova
8 maart 2024 · 1 uur 20 min
Scott and Wes are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning.
Show Notes 00:00 Welcome to Syntax!
00:41 Brought to you by Sentry.io Lees meer01:05 Who is Xenova?
02:08 What is Hugging Face?
03:29 What is Transformers.js?
06:16 How was the library developed?
SponsorBlock09:04 How is it able to run?
10:09 Do they have to run in Python and how does Onnx work?
Onnx.aiHugging Face Optimum
14:19 What are some things you can do with this tech?
16:15 Vision tools.
17:38 This is actually running locally.
18:35 Doodle Dash21:09 They currently run on CPU, what is required to make it run on GPU?
24:44 Can you run in JavaScript?
28:32 How it works with image vectors.
34:23 Why would people want to run it in another language?
35:55 Resizing images in the browser instead of on the server.
38:55 Applications distributed on the web vs running locally.
43:54 Electron has Node and Chrome, where would you run Transformers.js?
44:32 The API of Transformers.js
46:30 Object Detection.
Semantic Image Search ClientReal-Time Object Detection
Background Removal Tool
48:33 What is the easiest way to get started?
51:26 Real-time speech recognition on the horizon?
52:08 Will we ever be able to run Stable Diffusion via JavaScript?
56:10 The Web LLM.
57:22 Practical applications for YouTube.
59:39 What we want to build for Syntax.fm.
01:06:43 Mean pooling, why it’s necessary.
01:09:30 Stopping YouTube spam comments.
01:10:34 K-Means Clustering.
Text Clustering01:13:49 Quantization.
01:17:35 Sick Picks + Shameless Plugs.
Sick Picks Xeonva: WebGPUShameless Plugs Xenova: Xenova on X
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 -
739: The LoFi Movement: Building Local First Apps
6 maart 2024 · 52 min
Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights.
Show Notes 00:00 Welcome to Syntax!
03:18 Brought to you by Sentry.io.
04:08 What is LoFi?
localfirst.dev Lees meer05:02 The Seven Ideals for Local-first. 05:29 1: No Spinners.
06:48 2: Your work is not trapped on one device.
07:56 3: The network is optional.
08:50 4: Seamless collaboration with your colleagues.
09:35 Oops, we for got to read 5: The Long Now.
09:37 6: Security and privacy by default.
09:45 7: You retain ultimate ownership and control.
Actual Budget Finance AppInk & Switch
13:01 Sounds great, let’s go! Not so fast, this stuff is hard.
14:07 The technology involved. 14:30 CRDT (Conflict-free Replicated Data Types).
Wikipedia DefinitionJames Long dotJS 2019 dotconfrences
17:48 How does it prioritize conflict resolutions?
19:36 Websockets.
20:17 IndexedDB + SQLite.
21:23 Service Workers.22:16 The software involved. 22:24 Replicache.
24:48 YJS.
25:06 Electric SQL.25:51 The most basic LoFi application.
31:26 Some bigger concepts.
32:34 Answering some common questions.
35:19 Some real-world examples of LoFi.
Habit Path by Scott Tolinski37:18 What about Apple PWA nonsense?
38:20 This seems similar to real-time software and multiplayer.
38:47 Sounds like too much work.
Triplit Fullstack DatabaseElectric SQL
Evolu
40:46 Some useful links. Local-First Web Development
Local-First Lo.fi YouTube
Local-First Ink & Switch
Local-First Reddit
Syntax GitHub Local-First
43:30 Sick Picks + Shameless Plugs.
Sick Picks Wes: Dresscode.devScott: Monarch Money
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 -
738: Little Scripts: Coding for your Co-workers
4 maart 2024 · 23 min
Process is important. This show is dedicated to examples of non-developer tasks that can be improved by coding scripts. Join Scott and Wes for a deep dive into automation magic.
Show Notes 00:00 Welcome to Syntax!
02:11 Brought to you by Sentry.io. Lees meer03:02 FFmpeg, a tool for video producers.
FFmpegFFprobe
06:35 Markdown validation.
Syntax Markdown Validation09:21 AI timestamps for inform editing process.
Episode 456 Transcript12:19 Generating clips for social media.
13:31 YouTube find and replace tool.
YouTube Find & Replace - work in progress15:03 What other scripts can you create?
16:17 Packaging a tool for a non-developer to use. 16:54 Apple Scripts
17:45 Stand-alone website.
19:25 Script Kit: Shortcut to Everything
20:19 Other ways to run scripts.
ZXDax
22:05 Get in touch with your tips.
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 -
737: JSR: The New TypeScript Package Registry (NPM Killer)
1 maart 2024 · 59 min
Get ready to learn all about the JSR package registry with Wes, Scott, and special guest Luca Casonato of Deno, as they discuss its benefits, share insights on when to use it, and teasing some secret features that promise to enhance your coding journey.
Show Notes 00:00 Welcome to Syntax!
00:37 Brought to you by sentry.io.
00:51 Who is Luca Casonato?
01:18 Why do we need another package registry?
Wes Bos Tweet Lees meer04:35 Is it ESM only?
06:08 What exactly is JSR?
07:22 How do you install things from this registry?
09:38 NPM specifier in NodeJS?
12:18 Why can’t we just fix NPM?
14:28 When you make things easier, people make cooler stuff.
17:49 A little bit about auto-documentation.
21:18 Auto-Types.
22:33 Can’t you just put TypeScript files on an NPM?
24:04 Package Provenance.
NPM Package Provenance25:14 Does JSR have any plans for scanning dependencies?
27:56 GitHub action integration.
30:08 Does JSR replace url imports in Deno?
Import Maps, Ep.59632:15 What about publishing JSX, TSX, CSS, WASM, etc?
34:16 What are Slow Types?
36:34 Do you think we’ll ever see another implementation of a TypeScript type checker?
38:23 Types as comments or adding types to JavaScript.
40:10 What is the anticipated timeline?
41:52 Are there any parts of TypeScript that you don’t like?
43:32 What about when TypeScript breaks?
46:20 JSR community funding.
49:39 Are you planning on pre-registering popular names?
52:26 Super secret new features!
56:39 Sick Picks + Shameless Plugs.
Sick Picks Luca: HonoShameless Plugs Luca: jsr.io
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 -
736: CJ Reynolds is Joining Syntax
28 februari 2024 · 57 min
Scott and Wes introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies.
Show Notes 00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
04:39 What got you into web development?
09:23 Does a degree in computer sciences help you in your day to day as a web developer?
Bell Curve Meme Lees meer11:39 Wes downloads every single .com domain name.
15:19 What was your very first web development job?
18:12 How did you go from C# to websites?
21:12 What is the worst thing you’ve had to do as a developer?
22:31 What are some of your favorite projects?
Is It New Years DayDung Hero
26:32 What tech are you into right now? What inspires you?
27:52 Why do you like experimenting with new technologies?
29:39 Hono v4.0.5.
30:29 HTMZ31:44 If you were to build a startup today, what would your stack be?
32:39 What’s your tech setup?
Coding Garden GitHubRK Royal Kludge Keyboard
37:51 What got you into live-streaming?
40:13 Why do you use a blue screen?
41:19 What’s your philosophy on teaching?
Bloom’s Taxonomy43:56 What are your non-developer hobbies?
CJ Skateboarding with Syntax deckCJ’s floofy doggo, Pig
Sony VX10000
Sony Mavica
51:00 Sick Picks + Shameless Plugs.
Sick Picks CJ: Ergonomics, More on ErgonomicsScott: Project Farm YouTube trash bag comparison
Wes: Kitchy Pizza Cutter Wheel
Shameless Plugs CJ: Coding Garden
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 -
735: The Taliban Stole My Domain
26 februari 2024 · 15 min
Wes shares the story of how the Taliban stole his .af domain. Scott and Wes discuss top-level domain (TLD) best practices, how to find unique custom domain names for your website, and how to avoid having yours stolen.
Show Notes 00:00 Welcome to Syntax!
00:16 Brought to you by Sentry.io Lees meer01:11 The story of how the Taliban stole my domain.
05:10 When you purchase a domain, does that country receive the registration fee?
Country Code Top-Level DomainInfrastructure Top-Level Domain
Generic Top-Level Domain
Sponsored Top-Level Domain
07:29 Notion lost their .so domain.
Notion09:18 .ai domain names.
09:53 Other popular TLD options.
tolin.skiwes.io
12:05 What are the best TLDs?
13:18 iwantmynameHit 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 -
734: HTMX Web Apps with Carson Gross
23 februari 2024 · 52 min
Scott and Wes welcome HTMX creator Carson Gross to discuss the versatile applications and optimal scenarios for using HTMX, alongside insights into its creation and evolution. Join us as we explore the future prospects and improvements as we look towards HTMX 2.0.
Show Notes 00:00 Welcome to Syntax!
00:52 Brought to you by Sentry.io Lees meer02:22 Who is Carson Gross?
BigSkySoftware GitHubBigSkySoftware
03:53 What exactly is HTMX?
htmx.orghtmx.org/examples
07:04 What made you want to create something like HTMX?
intercooler.js10:01 Would HTML look more like HTMX if we were to rebuild it today?
12:54 Isn’t HTMX a step backward into old-school AJAX?
16:09 When would you avoid using HTMX?
17:56 Does HTMX put an unnecessary load on the server?
21:46 What are your thoughts on rendering everything on the server?
26:29 What is your favorite stack?
28:49 Things that are lost moving to the JavaScript framework world.
30:16 HTMX coupling your front end and back end.
32:28 How do you feel about web components?
33:40 What are the big templating engines and your top pick?
HTMX Essays36:33 Object-oriented HTML.
37:38 Is there an offline story or a “local-first” story for HTMX?
38:44 What does the future of HTMX look like given its rise in popularity?
40:03 HTMX and X (Twitter).
Syntax Show 726HTMX on X
42:30 The Microsoft story.
45:26 Carson’s thoughts on de-escalating the language around HTMX.
47:44 Sick Picks + Shameless Plugs.
Sick Picks Carson: AlpineJS, DatastarShameless Plugs Carson: Hypermedia Systems, HTMX Swag
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 -
733: Egress, scraping, Safari EU changes, is SetInterval worth it?
21 februari 2024 · 59 min
In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval.
Show Notes 00:00 Welcome to Syntax!
01:35 Brought to you by Sentry.io.
02:49 I have over 100,000 user images on Cloudinary. How do I migrate to another service?
Cloudflare-Cloudinary Proxy Lees meer07:27 Switching from Mac to PC.
Figma, DaVinci Resolve12:32 What’s your take on the Safari 17.4 PWA removal debacle for EU users?
Bug ReportFullscreen API Bug Report
19:45 Is there any clear front-runner when it comes to monorepo tools?
23:44 Some big web apps have a div relatively high in the DOM with a class like “scroll-container” or “cursor-events”, why is that?
32:15 Is ChatGPT Plus worth it? I’m trying to avoid death by 1000 subscriptions.
ElevenLabs37:47 Performance vs accuracy when working with timers.
40:37 How do you update the dependencies to work with a current version of Node? Also, if you are building from scratch, how do you determine what dependencies to use?
Syntax show 425: Updating Project Dependencies45:52 Clarification on the browser blocking.
Mozilla’s vision for Firefox MV349:19 Problems when working with JavaScript’s new Date().
54:27 Sick Picks + Shameless Plugs.
Sick Picks Scott: LED FlashlightShameless 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 -
732: Stop going to Spam: DMARC, SPF and DKIM Explained
19 februari 2024 · 26 min
Wes and Scott explore the web standards and email authentication methods that keep your email from going to spam; DMARC, SPF and DKIM. If you send email via a custom domain name, you need to listen to this!
Show Notes 00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
02:08 What exactly are SPF, DKIM, and DMARC?
02:53 Different ways that you may want to send email. 03:23 Transactional emails.
Resend, email for developers Lees meer05:07 Email marketing.
05:47 Anything else that sends email on your behalf.07:13 SPF (Sender Policy Framework).
Postmark defines SPFPostmark SPF in 5 Minutes
08:34 You can only have one SPF record.
10:18 DKIM (DomainKeys Identified Mail).
Postmark defines DKIM13:39 DMARC (Domain-based Message Authentication, Reporting, and Conformance).
Convertkit16:38 RUA Reporting.
18:03 How to set up reporting.
21:08 Does emails marked as spam hurt the IP that sends them?
22:18 Other things to consider.
Special thanks to David Flanagan for the help on this! @rawkodeHit 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 -
731: Client side security, XSS attacks & CSP with Stripe’s Alex Sexton
16 februari 2024 · 1 uur 3 min
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 Lees meer08: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 explanation13:57 Douglas Crockford of Yahoo on security.
Douglas on GitHub15: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 WikiSentry.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 Dynamic56:36 Where does the CSP live within Stripe?
Original Black Friday story59:35 One last story.
01:01:20 Sick Picks + Shameless Plugs
Sick Picks + Shameless Plugs Alex: Wes Bos’ InstagramHit 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 -
730: Own Your Own PaaS
14 februari 2024 · 58 min
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 Lees meer04:21 Challenges with payment structures.
Render07:02 What is Kubernetes?
Kubernetes07:51 What are the differences between Kubernetes and Docker?
Docker Swarm09:15 Reasons to own your own PaaS.
NelifyBluehost
15:05 “Pokémon or Web Service”
Original 150 Pokémon Characters16:49 The players and their pros and cons.
18:51 Where can you host these services? 19:47 Kubero.
Kubero21:50 Coolify.
CoolifyCoolify pricing
28:15 Caprover.
Caprover29:03 Dokku.
DokkuShokku
Ledokku
Atlas
Nixpacks
32:53 Piku.
Piku33:24 Cuber.
Cuber34:13 Acorn.
AcornCoolify creator, Andras Bacsai on X
36:44 The challenges of hosting your own PaaS.
38:46 Jekyll ran on a PC under a desk.
Jekyll39: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 AliexpressScott: 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 -
729: CSS Native @scope
12 februari 2024 · 18 min
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 Lees meer -
728: AI Superpowers with Kevin Hou and Codeium
9 februari 2024 · 59 min
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! Lees meer05:31 An introduction to Codeium.
07:56 What information are you sending the AI to get such good completions?
Codeium compliance09: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 Evals35:39 How is Codeium THAT fast?
36:49 What programming langauges does Codeium use?
38:55 Codeium Playground.
Codeium Playground39: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.comShameless 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 -
727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained
7 februari 2024 · 1 uur
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 Lees meer02: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 RuntimeThe Deno Show
34:02 User interface libraries.
Shoelace.style39:43 Data management: Databases
41:42 Data management: ORM
WTF is an ORMYou 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 ComparedHasty Treat WTF × SSR vs JamStack vs Serverless?
47:21 Hosting your site.
50:19 The finishing touches. 50:26 Brought to you by Sentry.io52:18 Captcha
55:03 Sick Picks + Shameless Plugs.
Sick Picks Scott: GreatScottLab, Show #594Wes: 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 -
726: Is HTMX a Joke?
5 februari 2024 · 32 min
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 Lees meer02: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 AJAX13: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 WebSockets20:30 What about extensions?
HTMX Extensions21:00 Wes’ “bomb” question.
24:16 What Scott likes about HTMX.
25:45 What Scott doesn’t like about HTMX.
HTMX Multi-Swap30:33 Hype, Meta Framework.
HypeHit 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 -
725: Safari is the New Chrome - Jen Simmons of Apple
2 februari 2024 · 1 uur 2 min
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 Lees meer01:05 Meet Jen Simmons.
03:15 Safari has been killing it lately
Safari Release NotesWebKit 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.orgJen 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 ProRunning 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 XFeedback 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 -
724: Potluck: Is Virtual DOM Bad?
31 januari 2024 · 57 min
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 Lees meer02:45 Welcome Randy, our new Producer!
Randy’s YouTube04: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 codeTauri
13:16 A deep dive on generators and iterators.
An Insight into Iteration Protocol through Infinite Scroll in Angular15: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 CDN45: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, ServersideupWes: 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 -
723: Svelte 5: Speed Simplicity Size
29 januari 2024 · 38 min
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 Lees meer01:52 Brought To You By Sentry.io
02:42 Svelte 5 Introduction
Svelte 5 Intro05:45 What Are Runes? 06:21 $state()
11:49 $props()
Class as a rest prop16: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 example33:31 Speed
Benchmarks35:00 Anticipated Release
Try it todayHit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads -
722: Next Level Web APIs. Bluetooth, File Access, Thomas Steiner - Project Fugu
26 januari 2024 · 1 uur 2 min
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 Lees meer01: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 HowFuguIsMyBrowserHit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads -
721: You should learn Drizzle, the TypeScript SQL ORM
24 januari 2024 · 54 min
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 Lees meer00: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 -
720: Where Does Time Come From?
22 januari 2024 · 27 min
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 Lees meerChris 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 Cloudflare08:22 Network time
09:35 Device time
11:11 Why is time so important?
14:35 Epoch time
Syntax epoch convertor16:58 ISO 8601 standard
ISO 860119:20 RFC 3339
RFC333920: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 -
719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux
19 januari 2024 · 1 uur 3 min
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 Lees meer01: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 -
718: React Server Components
17 januari 2024 · 56 min
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. Lees meer11: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 thread41:54 What we don’t like
47:13 Design patterns
47:35 Other things
RSC DevtoolsIntroducing Waku
Mux
49:22 Sick Picks
Sick Picks Scott: ASUS ZenDrive V1M External DVD DriveWes: 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 -
717: How to be Productive
15 januari 2024 · 33 min
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 Lees meer01:42 Getting systems in place
03:30 Examining your current habits
08:14 Tracking habits
12:16 Neural Pathway Chain Breakers
habitpath.io/waitlistSTREAKS
A Passwordless Future Passkeys with Anna Pobletts - Syntax #710
Clerk
14:26 Todos
Stronglifts appGetting Things Done
Things
Height
20:14 The calendar as the ultimate tool
Cron Calendar23:52 Using Focus states
Focus App29:09 Customizing VS Code with an extension
Apc Customize UI++ - Visual Studio Marketplace31: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 -
716: JS Perf Wins & New Node.js Features with Yagiz Nizipli
12 januari 2024 · 1 uur 1 min
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 Lees meer28: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 -
715: Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck)
10 januari 2024 · 52 min
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 Lees meer21:59 Which tools would you recommend for crafting HTML emails from scratch?
FoundationMJML
React Email
25:03 Hey are you guys setting up your own CI/CD like github action or gitlab CI?
NetlifyVercel
28:25 What do you think about unstyled component libs. Eg: Ark?
Ark UI31:47 Do I need to have every single feature on mobile as I do on a desktop?
Obsidian - Sharpen your thinkingMissive ‐ Team Email, Chat & Tasks
39:15 How can I get better at planning my code?
shaky.github.bushong.netMonodraw 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 & GamesWes: Package drop box
Shameless Plugs Scott: Syntax NewsletterWes: 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 -
714: CSS :has() in Every Browser! 10 Uses
8 januari 2024 · 30 min
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 Lees meer -
713: The CSS OG Eric Meyer. 1994 CSS, JS in Fridges, Tailwind, and Web Standards
5 januari 2024 · 1 uur 5 min
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 Lees meer17: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 1The 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 LawsonFirefox 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 PolypaneShameless 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 -
712: 2024 Predictions
3 januari 2024 · 1 uur 3 min
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 Lees meer12:04 Astro is going to have a good year
Astro4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello)
14:22 React server components
dai-shi/waku: ⛩️ The minimal React frameworkWaku
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 Edges23:23 Node will introduce TypeScript support via loaders
24:48 We will see a route matching Proposal move ahead
URL Pattern Standard26:34 Bun releases full node compat
27:34 We will see a new Linter + formatter entirely replace
Language support | BiomeHTML 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 Tooling36: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 AIv0 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 powe… -
711: The Surprisingly Exciting World of Print + PDF CSS
1 januari 2024 · 32 min
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 Lees meerbody { 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
DocraptorPlaywright
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 -
710: A Passwordless Future Passkeys with Anna Pobletts
29 december 2023 · 56 min
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 Lees meer01: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 -
709: Potluck × Naming Tech × Generators × Layers Follow Up × Sick Picks Page
27 december 2023 · 53 min
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 Lees meer01: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/html15: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/website24: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 #53229: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
Yowza34: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 | Vite46:23 Sick Picks
Sick Picks Scott: Mother In Law’s Gochujang Fermented Chile Sauce, MIL Kimchi Gochujang and GochugaruWes: SEOUL SISTERS Korean Kimchi Powder
Shameless Plugs Scott: Sentry
Wes: Wes Bos Courses…
-
708: How We Made Syntax.fm Faster
25 december 2023 · 28 min
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 Lees meer -
707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!
20 december 2023 · 48 min
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 Lees meerRemix - 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 107:55 Deno gets hotter
11:12 JS runtimes mature
htmx11: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/stcWes 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.
WinterCG17: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 #643FFmpeg
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 ToolingAnnouncing 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| MDNIs Houdini Ready Yet?
39:57 How’d we do?
40:40 Sick picks
Sick Picks Scott: Super Mario Bros.™ WonderWes: 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 … -
706: AI and ML - The Pieces Explained
18 december 2023 · 33 min
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 Lees meerCreator 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 -
705: Is Running Random Code From npm Safe? With Feross Aboukhadijeh
15 december 2023 · 1 uur 7 min
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 Lees meer00:57 Who is Feross Aboukhadijeh?
01:33 What is Socket?
[Socket.dev](https://socket.dev
dominictarr (Dominic Tarr)
pull-stream/pull-stream: minimal streams03:59 Introducing AI package summaries
Example of the AI summaries
Introducing AI Package Summaries07: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 - Socket16:22 How does Socket detect possible security issues?
Removed packages
event-source-polyfill protestware attack
john wick spam attack18: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 Security29: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 FAQ43:11 Why did you build Wormhole?
Wormhole47:33 How expensive is it to maintain Wormhole?
Riverside.fm - Record Podcasts And Videos From Anywhere50:37 What do you think of decentralized code repos?
Radicle
Project Fugu
Fugu Tracker54:29 Understanding passkeys
56:15 Supper Club questions
GitHub Theme - Visual Studio Marketplace
Web Serial API - Web APIs | MDN01: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 -
704: Stump'd JS + CSS Interview Questions
13 december 2023 · 58 min
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 Lees meer10: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 hangersWes: Niimbot Label Maker, Bearclaw Screws)
Shameless Plugs Scott: SentryWes: 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 -
703: The Observer Pattern
11 december 2023 · 19 min
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 Lees meerGodot 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 observables16: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 -
702: New + Proposed JS APIs for 2024
6 december 2023 · 56 min
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 Lees meer05:25 Intl.DurationFormat
tc39/proposal-intl-duration-format07:55 Standardized Sourcemaps
tc39/source-map-rfc: RFCs for the source map debug format.10:43 Structured Clone
structuredClone() global function - Web APIs | MDN12:54 Temporal
Hasty Treat - Temporal Date Objects in JavaScriptTracking 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 modules24:46 Regex Modifiers
RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online26:50 Array Grouping
tc39/proposal-array-grouping: A proposal to make grouping of array items easier30: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/html45:39 autopause
Add autopause attribute to media elements to allow automatic pausing of media · Issue… -
701: A11y Treats - Labels & Roles
4 december 2023 · 27 min
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 Lees meerAn 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 - npmWAVE 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 -
700: Payload is Rails for JS with TypeScript, React and Drizzle (James Mikrut)
1 december 2023 · 55 min
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 Lees meerPayload on GitHub
Payload on Twitter
Payload on YouTube
09:08 Where does Payload fit in the tech stack?
KeystoneJSSupabase
Retool
11:22 Is Payload using TypeScript?
13:44 Why did you pick Drizzle?
Drizzle ORM18:08 Do you have to maintain MongoDB and Drizzle?
SvelteKit26: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 VercelLaravel 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 Payload50: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