955: SvelteKit has solved data loading

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

In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more. Show Notes 00:25 Welcome 01:31 Syntax Brought to you by Sentry 02:01 Explain CSS Contain and why it exists? 07:27 In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them? Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X 10:31 Which of the following elements are fake? 13:00 Which of the following HTML tags are deprecated? 16:38 What is the samp element? 17:27 Name the 7 parts of CSS Houdini 21:07 In JavaScript for loop with 10 items, how can you exit a loop early? 22:34 What is the difference between a pseudo element and a pseudo class? 25:59 How could you implement CSS :has with JavaScript? 27:56 What are two attributes that would make an SVG more accessible? 29:43 How can you stop your process from exiting if you have an unhandled rejection? 32:27 How do you prevent flex children from getting squished? 34:40 In TypeScript, what does using keyof and typeof together do? 37:19 What does ARIA stand for? 37:39 Name 5 limitations that a serverless or edge function have over tradtional long running server? 40:38 Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size. 42:03 If I’m building an application that needs to announce a change to the user, how would I do that? 43:46 Name the 5 different Git elements methods on a document? 45:39 What does the CSS prospective property do? 48:23 Sick picks Sick Picks Scott: Pushpin hangers Wes: Niimbot Label Maker, Bearclaw Screws) Shameless Plugs Scott: Sentry Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

13 Dec 202357min

In this episode of Syntax, Wes and Scott give a high level overview of the observer pattern, what is the observer, what are downsides to too many observers, and more. Show Notes 00:25 Welcome 01:42 Syntax Brought to you by Sentry 02:16 High level overview Syntax 694: What’s Up With Angular with Mark Techson Godot Engine 03:36 What might you observe in game development? 06:50 What is the observer? 08:11 What are some downsides to too many observers? 10:17 IntersectionObserver, MutationObserver, and PerformanceObserver 12:25 ResizeObserver 13:04 What about addEventListener? @BenLesh on Callbacks being faster than observables 16:13 Signals are becoming a big thing Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

11 Dec 202319min