Syntax - Tasty Web Development Treats

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

3 Jan 20241h 3min

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

1 Jan 202432min

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

29 Dec 202355min

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

27 Dec 202352min

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

25 Dec 202327min

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

20 Dec 202347min

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

18 Dec 202333min

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

15 Dec 20231h 7min