918: Extreme Native Perf on the Web with Superhuman

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 16: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? Docker Containerd 25:28 Some additional terminology. OCI Open Container Initiative 26:43 What about WASM? WASM WebAssembly 29: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 Spin 39:56 What type of processors are used in these servers? 42:27 What are home servers running on? Turing Pi 2 Daniel Mangum Universal Blue 46:40 How should someone get started with Kubernetes? Kubernetes.io Rawkode YouTube Kubesimplify Learnk8s 48:51 Infrastructure as code. CDK for Terraform GraalVM 55:19 Sick Picks & Shameless Plugs. Sick Picks David: Golem.cloud Restate.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

22 Mars 202459min

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. 20: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 Craze Wes: 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

20 Mars 202447min

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 OS-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 Desktop Start With Docs Docker 101 09:14 How does Docker work? Docker Sentry Docker Registry Docker Layers 16:46 Adding Docker to an existing project. SvelteKit Dockerfile Node.js / Express CLI Runner Twitchbot Development PHP / Mongodb Dockerfile 21:37 What is Docker Compose? Docker Compose 22:50 What are some ‘gotchas’ or things to look out for when setting up a project? Coding Garden Example Hit 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

18 Mars 202425min

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 17: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? GuideGuide Moo 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. GoodHertz 50:22 How are you architecting these plugins? 52:44 Sick Picks & Shameless Plugs. Sick Picks Cameron: Ember Mug Waterparks 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

15 Mars 202456min

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 It’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? Coolify Syntax 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.io 52:12 Sick Picks + Shameless Plugs. Sick Picks Scott: Ellenos Yogurt CJ: 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

13 Mars 202456min

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 01:05 Brought to you by Sentry.io. 03:20 How do you combine string literal types? Template Literal Types 06:34 What is a TypeScript Generic and why would you use one? TypeScript Generics 08:12 How do you write a conditional type? TypeScript Conditional Types 09:58 Generating TypeScript type from a function. Stricter Generators 14:09 How do d.ts files work? Module .d.ts 16:25 Name one difference between a type and an interface. Types vs Interfaces 19:15 What is a tripple-slash directive and why would you use them? Tripple-Slash Directives 20:52 What is a TypeScript record and what is it used for? Utility Types 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

11 Mars 202425min

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 01:05 Who is Xenova? 02:08 What is Hugging Face? 03:29 What is Transformers.js? 06:16 How was the library developed? SponsorBlock 09:04 How is it able to run? 10:09 Do they have to run in Python and how does Onnx work? Onnx.ai Hugging 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 Dash 21: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 Client Real-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 Clustering 01:13:49 Quantization. 01:17:35 Sick Picks + Shameless Plugs. Sick Picks Xeonva: WebGPU Shameless 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

8 Mars 20241h 19min

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 05: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 App Ink & 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 Definition James 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 Tolinski 37: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 Database Electric 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.dev Scott: 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

6 Mars 202452min