Winamp Logo
Svelte Radio Cover
Svelte Radio Profile

Svelte Radio

English, Technology, 1 season, 75 episodes, 2 days, 18 hours, 40 minutes
Things about Svelte. Sometimes weekly, sometimes not.
Episode Artwork

Phoenix LiveView and Svelte with Wout De Puysseleir

Sponsored by ContentfulWelcome to the new era of content management with Contentful. Say goodbye to the limitations of traditional content systems and hello to a world where collaboration sparks innovation. With Contentful, you’re not just managing content; you’re creating content-first, multi-brand experiences across all channels effortlessly. The best part? It requires zero coding! Empower your teams to collaborate and innovate, delivering impactful digital experiences at scale. Contentful's AI-driven platform not only streamlines content creation but also ensures it aligns perfectly with your brand. Ready for a game changer? Start with Contentful for free today. Unleash the potential of your digital content and drive your business forward. Learn more at this episode of Svelte Radio we sit down with Wout De Puysseleir to talk about his project LiveSvelte. A way to easily use Svelte when building applications using the Elixir framework Phoenix. A match made in heaven!Recorded on November 21st, 2023DiscussionWho is Wout?TwitterWebsiteWhat is LiveSvelte?GitHubBlog postElmRocUnpopular OpinionsBrittney: PNPM SHOULD WORKWout: TypeScript isn't that great 😬PicksWout: The Soul of ErlangKevin: The Lazarus ProjectBrittney: Loki TV Show
4/3/202450 minutes, 8 seconds
Episode Artwork

Talking This Week In Svelte with Enrico Sacchetti

Sponsored by ContentfulWelcome to the new era of content management with Contentful. Say goodbye to the limitations of traditional content systems and hello to a world where collaboration sparks innovation. With Contentful, you’re not just managing content; you’re creating content-first, multi-brand experiences across all channels effortlessly. The best part? It requires zero coding! Empower your teams to collaborate and innovate, delivering impactful digital experiences at scale. Contentful's AI-driven platform not only streamlines content creation but also ensures it aligns perfectly with your brand. Ready for a game changer? Start with Contentful for free today. Unleash the potential of your digital content and drive your business forward. Learn more at this episode of Svelte Radio we talk with Enrico about This Week in Svelte - a weekly Svelte show that he runs. Tune in!Recorded on November 1st, 2024DiscussionEnricoCo-founded: Design Systems CommunityWeekly recorded show on YTCo-hostsKarimPaoloStanislaChangelogCarbon Components SvelteEnricoGitHubTwitterUnpopular OpinionsBrittney: [Inertia.js]( The Wandering Earth Part 2Kevin: Quest 3TranscriptionHere's a quick word from our sponsor.Welcome to the new era of content management with Contentful.Say goodbye to the limitations of traditional content systemsand hello to a world where collaboration sparks innovation.With Contentful, you're not just managing content,you're creating content-first, multi-brand experiencesacross all channels effortlessly.The best part? It requires zero coding.Empower your teams to collaborate and innovate,delivering impactful digital experiences at scale.Contentful's AI-driven platform not only streamlines content creation,but also ensures it aligns perfectly with your brand.Ready for a game-changer?Start with Contentful for free today.Unleash the potential of your digital contentand drive your business forward.Learn more at[intro music]Hey, welcome everyone to another episode of Svelte Radio.We're back again.Ooh, I'm joined by Brittany.Hello.Hi.Back this week.Back this week, yeah, yeah.Hello.And we are joined by another guest.It's Enrico.You might know him from this week in Svelte.Hi, Enrico.Hey, everybody. Enrico here.Hey.So before we get started, Brittany, what's new?It's been crazy.I went on vacation last week, so I know I missed our previous guest.I think we had Jacob on last week, but unfortunately I had to miss that one.We went to San Antonio where it was kind of warm.It was like 80s and 90s Fahrenheit, so what, 30?A little less than 30, maybe 20, 28 Celsius.That sounds very nice.But it was overcast the whole time.So I tried to get in the pool, and it was like windy and cold.It was like still not warm enough to get in the pool there.But we came back, and it snowed yesterday for Halloween, so that was good.We have like probably three to four inches of snow outside now.Wow.Yeah, we just got our first falling snow here today.Oh, really?So it doesn't stay on the ground, though, because it's not that cold here just yet.Yeah, our ground is not that cold.I thought it would melt, but it froze overnight, and it's just like stuck there.Damn.Yeah, that doesn't sound like fun.Maybe you should just go more south.I've talked about it, yeah.We just built that pool, though, so we're like 10 years, and our kids are in school still,so 10 years, and then we'll probably keep this house for the summer when it's nice hereand then move somewhere else, be snowbirds for a while.Yeah, makes complete sense.All right, let's talk a bit more with you, Enrico.Who are you?That might be a broad question, but how did you get into development?Who am I?Yes, well, my name is Enrico Sacchetti, and I am a software developer based in the GreaterToronto area, Ontario, Canada, and what I like to do is front-end development, and eversince I was a teenager, that's what I've been doing as a personal hobby, and some opportunitiescame along, and before I knew it, it was a full-time job.So despite my post-secondary education in video game development, I actually pursueda career in website development because that's where the opportunities lay.We have had so many people that are video game developers, like by originally videogame developers on the show, right?Yeah, I feel like that's been a thing.The person that did Wolfenstein, the felt version of that?Snuffy, Jason?Yeah, and a couple of other people were in video game development.It's kind of like the music thing that we have, too.A lot of people were musicians before they were programmers, too.Yeah.That's interesting.Yeah, did you get into the game development stuff?Was that because of interest in gaming in general?Yeah, it was sort of a misguided interest in video games because as much as I enjoyedplaying them, making them is 100% different.You need ongoing, persistent passion for that, as I realized the hard way after graduating.I tried to get jobs across the world, particularly China and Canada, because I was pursuing livingthere.I actually ended up living in China for one year and became an English teacher after graduating.Oh, cool.So that's where I learned how to speak Mandarin and teach English.But even though I was teaching English...I had no idea you spoke Mandarin.Yeah, that's a thing I can do.But aside from that, I found myself on the weekends learning code, HTML, JavaScript,CSS, because that was my passion.And game development was not my passion.In fact, when I had an interview for a job, they told me to my face, "You don't have passionfor games."And I'm really glad that happened.That's rough.As rough as it sounds, I was relieved because I realized this is not for me.And I found out very early in my career.So I think that's a very good blessing.Yeah.What language was that, that you were doing the video game programming?Programming language?Yeah.In university, I learned C++.And that's what I used along with some Visual Studio stuff and frameworks.But I never had professional experience game development.I just had a couple of portfolio pieces, and I graduated with that.So I was never a game developer.I was just a student of one.And then eventually, I came back to Canada, ...
2/23/202457 minutes, 38 seconds
Episode Artwork

Svelte in dynamic e-commerce widgets with Jacob Stordahl

Sponsored by ContentfulWelcome to the new era of content management with Contentful. Say goodbye to the limitations of traditional content systems and hello to a world where collaboration sparks innovation. With Contentful, you’re not just managing content; you’re creating content-first, multi-brand experiences across all channels effortlessly. The best part? It requires zero coding! Empower your teams to collaborate and innovate, delivering impactful digital experiences at scale. Contentful's AI-driven platform not only streamlines content creation but also ensures it aligns perfectly with your brand. Ready for a game changer? Start with Contentful for free today. Unleash the potential of your digital content and drive your business forward. Learn more at this episode of Svelte Radio, Jacob Stordahl and the hosts discuss Jacob's transition from WordPress to Svelte and the practical aspects of developing third-party JavaScript widgets. They also touches on the role of AI in content management. Tune in!Recorded on October 18, 2024Discussion Who is Jacob Stordahl Twitter Website Stylitics Svelte Summit Talk Spring 2023 Unpopular Opinions Jacob: you shouldn’t use a git ui! git is poorly designedfreeCodeCamp Course Kevin: you shouldn’t use fetch() on the client Antony: MacOS is not that great! Picks Jacob: Staff Engineer by Will Larson Kevin: Satori Antony: BunnyCDN
12/14/202343 minutes, 5 seconds
Episode Artwork

Slicing Svelte with Sam Littlefair and Prismic

In this episode of Svelte Radio, join hosts Brittany and Kev as they dive into the world of web development with their guest Sam, a technical writer at Prismic. Brittany shares her latest experiences battling with Tailwind, Rails, and Svelte, emphasizing the learning journey that comes with navigating the complexities of modern web development. She also offers a valuable tip about CSS line height, advising against the use of rems and ems due to their unpredictable inheritance and suggesting more reliable alternatives.Recorded on October 11th.Description Who is Sam?Twitter Svelte Starter Template Unpopular Opinions Brittney: Meetings are not work. Sam: By 2030 we will reach 2.0 Kevin: - Picks Kevin Coolify CommitAI Sam OpenProps Adam Argyle Brittney: Github CLI Netlify CLI
12/6/20231 hour, 4 minutes, 58 seconds
Episode Artwork

Melting UIs with Thomas G. Lopes

Join us as we dive into an engaging conversation with Thomas G. Lopez, the brains behind the popular UI library in the Svelte ecosystem, MeltUI. Thomas shares his journey in web development, moving from Vue to React, and ultimately finding his passion in Svelte. Discover the unique challenges and triumphs he experienced while creating MeltUI and becoming a Svelte ambassador.Recorded on October 4th.Description Who is Thomas? Twitter Website MeltUI Radix Svelte Svelte Sirens Stream Builder from Scratch London Meetup Search element TreeStyle Tabs / Panorama Tab Groups Practical Accessibility Markdoc Appwrite SvelteKit website re-launch Website Twitter Picks Brittney: Invasion Kevin: The Continental Thomas: Berserk manga
11/29/20231 hour, 5 minutes, 54 seconds
Episode Artwork

View Transitions in SvelteKit and beyond with Geoff Rich

Today we chat with Geoff Rich about View Transitions. We explore what you can do with them, how to use them and much more. Can it be used with SvelteKit? Yes! Dive in and get all the tips!Recorded on September 27st.Description Who is Geoff? Website Twitter What are View Transitions? MDN Chrome for Developers Jake Archibald's Article on the Chrome Blog How do they work in SvelteKit? onNavigate svelte-view-transition Issue discussed Geoff's Svelte Summit Spring 2023 Talk jh3ey's twitter Unpopular Opinions Kevin: Limitations are good! Brittney: - Geoff: ARIA attributesNVDA Picks Brittney: Flowbite GitHub Kevin: The Winter King  Geoff: The Wheel of Time S2 is so good!
11/22/202352 minutes, 8 seconds
Episode Artwork

Wolfensvelte 3D and the Svelte Language Server in the Browser with Jason Bradnick

We have chat with Svelte Hackathon winner Jason Bradnick (snuffy) about what it took to build his Wolfenstein clone in Svelte using only HTML, CSS and JS! No canvas used! He also talks about the work he's done on bringing the svelte language tools to SvelteLab. That means bringing the language server to the web!Recorded on September 21st.NotesSvelte Summit is happening on November 11th! Go submit a CFP! Who is Jason? GitHub Twitter / X Svelte Language Tools Websvelte-vscode-web Wolfensvelte-3DPlay in the browser Nanothreads Unpopular Opinions Brittney: node_modules 🤬 Antony: It's ok to like different things, but agree on a standard Jason: Please use CommonJS but don't work with me Picks Kevin: Sea of Stars Brittney: Wool (Silo series) Antony: Batteries are great!Technology Connections Jason: Lenovo ThinkPads, good deal!
10/17/202340 minutes, 21 seconds
Episode Artwork

We are back! Svelte 5, Transitions, What's New?!

We're back after a long summer vacation! We talk about what's new in Svelte, View Transitions and we give you an update on what we all have been doing!We talk about the very very sad news that Ivan Hofer has passed away.Unfortunately we had some pretty major recording issues this time and had to record over two days, sorry about that!Recorded on September 14th.Notes Svelte Summit is happening on November 11th! Go submit a CFP! Latent Space AI Engineer Conference What's new in Svelte and Kit? View Transition support via onNavigate Svelte 5 teases from the community. Runes are now out Preview Ivan Hofer passed away. Creator of typesafe-i18n If you can read German you can read an article here. Svelte Summit Talk Obituary SiteAdd languages Showcases: Sveltroid Animotion Unpopular Opinions Kevin: You don’t need a lot of equipment to start creating content Brittney: Jamstack is alive? Swyx: Bun is beating Deno Antony: WeWork 😭 Babies are hard! EightSleep: Picks Brittney: Silo Swyx: Foundation Antony: Eat Magnesium!
9/29/202354 minutes, 57 seconds
Episode Artwork

SvelteLab - a Svelte REPL for SvelteKit with Antonio and Paolo

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.Recorded: June 15thDescriptionIn this episode we talk with Antonio and Paolo, winners of the Svelte Hackathon! They built a REPL that not only works for Svelte, but also for SvelteKit.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Antonio Paolo SvelteLab Tech WebContainer API XKCD: svelte-add svelte-check Docs PocketBase Unpopular Opinions Brittney: Native HTML tables are awful (brittney) Antonio: There are too many micro blogging sites Mastodon BlueSky Nostr Antony: Notion Desipad Obsidian Logseq Paolo: We should not force “sv” into all the names PWA:s are actually ok! Picks Brittney: Diablo 4 Kevin: Global Warming is great (wtf?!) Paolo: Bluey Antonio: Zelda Antony: Light Weight E-scooterMegawheels S1
6/22/20231 hour, 3 minutes, 29 seconds
Episode Artwork

A primer on AI for developers with Swyx from Latent Space

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED May the 4th be with you.DescriptionThis episode is special in the sense that it's not so much about Svelte in particular but for developers in general. If you haven't gone down the AI rabbit hole yet this episode is for you. Swyx gives us a crash course in what it is and how you can use it as a web developer. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Latent Space Image Generation:Midjourney Weights and Biases Whisper UL2 JasperAI Midjourney levelsio - 11labs swyx github ainotes Tools for Web Developers Copilot Codeium Wolverine Codium: Test Generation ChatGPT Plugins Autonomy of Atonomy: AutoGPT BabyGPT Anthropic Elicit Picks Kevin: Opus Pro Kapwing Swyx: Menu Bar App for ChatGPT “ChatGPT Mac” The Batch Brittney:Night Agent
5/11/202359 minutes, 57 seconds
Episode Artwork

Svelte Summit Hypisode

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED April 28th.DescriptionWe talk about the upcoming Svelte Summit conference and what we can expect from it! Talks, hackathon winners and other things!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Svelte Summit Talks Safari Update Web Containers Update Polypane Responsely typesafe-i18n Eric Brehault Episode Dev Vlog (May 2023) XDCD Comic This Week in SvelteSkip Links Unpopular Opinions Antony: The GitHub SDK is not good Brittney: Bluesky is not the next Twitter or the better Twitter, it will push more poeple to Mastodon Shawn: Edge Browser Arc Browser Kevs Tip: Orion Browser Picks Brittney: The Diplomat Kev: PartyKit Shawn: Marvel Snap Antony: Succession
5/4/202352 minutes, 9 seconds
Episode Artwork

SvelteKit-superforms with Andreas Söderlund

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED April 19th.DescriptionForms in SvelteKit are already top notch. But Superforms make them even better. We talk to Andreas Söderlund, the creator of the library. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Haxe: Form Actions: sveltekit-superforms: Documentation: Zod: Timers: Response Time Discussion: Multiple Forms: Unpopular Opinions Brittney: Don’t use libraries that don’t have first class support for esm or Vite. Antony: AI is not going to steal our jobs Andreas: NPM and package managers should be more restrictive with what they allow on their registries. Picks Kev: Sauna Antony: These USB-C Cable - Andreas: DCI -
4/28/20231 hour, 9 minutes, 50 seconds
Episode Artwork

Svelte in Research at Dartmouth with Wasita and Eshin

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED April 13th.DescriptionThis week we sit down with Wasita and Eshin at the Cosanlab at Darthmouth to talk about how they use Svelte in their research as well as the intersection between research and web development and the possibilities that it opens up.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Guests: Wasita: Twitter Website Eshin: Twitter Website Computational Social Affective Neuroscience Laboratory -> The "Netflix party" experiment we mentioned, written with Svelte,, firebase -> Interactive 2-player trust game experiment written in Svelte and client-synchronization powered by Firebase -> A starter Svelte SPA template for experiments powered by Firebase -> An interface for collecting continuous time-series emotion ratings from people watching videos -> An interface for segmenting audio-files of people's memories. Built on top of the BBC's peaks.js. -> The "missing GUI" for Amazon's Mechanical Turk labor market. An electron desktop app that helps manage data collection and administration. Unpopular Opinions Brittney: Click bait twitter Antony: Helium Picks Kev: Cold Plunges Antony: Same Eshin: Raised by Wolves Wasita: Beef Brittney: Shadow and Bone (TV Show)
4/20/202358 minutes, 34 seconds
Episode Artwork

Svelte at AppWrite with Alex Patterson

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED March 28th.DescriptionAlex Patterson joins us to chat about... you guessed it! Svelte at AppWrite. And Svelte in general. We chat a bit of AI as well, ChatGPT, Google Bard. All that fun new stuff!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Who is Alex? Twitter Website How did you get into programming? Dreamweaver ABAP in SAP Svelte Pink AppWrite Console AppWrite Thoughts on SvelteReactive statements ChatGPTGoogle Bard BlackCatUI {…$$restProps} Sveld JSDoc Unpopular Opinions Alex: TailwindCSS is awesome! Antony: DX is king - if your DX sucks you slowly and reluctantly build things and don’t experiment due to effort Imba Scrimba Picks Kev: YouTube Shorts on Svelte Society Alex: Deskpad Antony: packageManager - volta - issue with global packages node version - only-allow-pnpm (doesn’t work) Volta packageManager - only-allow-pnpm - Where can folks find you on the interwebs?@codercatdevappwrite discord serverCoding Cat Dev find all the podcasts
4/13/20231 hour, 9 minutes, 49 seconds
Episode Artwork

Eric Brehault and Nuclia

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED March 22nd.DescriptionEric from Nuclia joins us to talk about Svelte... and the history of the web! If you're a new web developer this one is a treasure trove of knowledge. We also talk about Nuclia and what they're doing. A lot of fun!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Community Dev Vlog Streams TikTok Svelte Summit - CFP unfortunately is closed :(  Who is Eric? What’s his background? Twitter: @ebrehault on Twitter  Mastodon: @[email protected] Github: Mosaic Browser Framesets JSONP AJAX JQuery Plone CMS React What is Nuclia? Twitter RxJS Svelte Rich Harris - Rethinking Reactivity Rich Harris - Transitional Web Apps Svelte Hackathon Library Speech API Erics PloneCMS Library: Unpopular Opinions Brittney: Short content is worthless Eric: Online coding is cool Picks Kevin: Rubberducking Brittney: State of Svelte: Eric: Halt and catch fire
4/6/202354 minutes, 58 seconds
Episode Artwork

Using Svelte in React with Puru Vijay

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED March 15th.DescriptionPuru Vijay joins us. You probably know him from his work on macOS web that made the rounds a while back. He's got a bunch of cool Svelte projects that you'll enjoy hearing more about in this one!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics macos Web Svelte Summit talk - How to migrate React libraries to Svelte Confetti Neodrag Neosvelte (Upcoming, planned), example The virtual dom is not pure overhead Dev Vlog with Rich This week in Svelte Zero-effort type safety Unpopular Opinions Cyclists who cycle in the road when good quality cycle lanes are available, are dickheads. (is this unpopular??) Storybook is still not there…for me (slots, argTypes) Puru: More like an unpopular sinful thought: Using React components in Svelte Picks Kevin: Chained Echoes: Liason  Shrinking Puru: Attack on Titan season 4 part 3 episode 1 - Brittney: Don’t watch Willow
4/4/20231 hour, 10 minutes, 32 seconds
Episode Artwork

I got a cold and had fever dreams about React 😱

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED March 1st.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Show Notes i18n Dynamic basepath Svelte 4.0 Milestones Geoff Rich - website, twitter Beyonk is HiringAuroraJS Job openings Spiegel - German Newspaper Visual Svelte UBS - message @ranzucker - Jr and Sr Svelte dev Railbird Software Engineer Threlte has scrolly telling capabilities now Svelte Hackathon Unpopular Opinions Antony: Cloud abstractions are good actually Languages Picks Antony: LED Strips on a Pram Brittney: Hogwarts Legacy
3/30/202355 minutes, 37 seconds
Episode Artwork

LevelUpTuts 6 months later with Scott Tolinski

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED February 7th.DescriptionWe sit down to talk with Scott Tolinski about the re-build of LevelUp Tutorials! Was it 6 months since the re-build? We don't know, but it was a while ago! 😅MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics React to Svelte YT video From React to Svelte Basic React To Svelte Conversion - Weekly Svelte - YouTube Mitosis Kit Snapshots Level Up Tutorials - Learn modern web development Animation With Svelte (with Scott Tolinski) — Learn With Jason - YouTube greensock Locals - hooks auto form meteor Bookit Travis Neilson Twitter YouTube Unpopular Opinions Scott: JSX is a templating language, React is not JUST JavaScript Brittney: OSS Maintainers should Picks Kev: Megaman X Corrupted - Drunk Scott: Niimbot - Brittney: This Week in Svelte
3/28/20231 hour, 1 minute, 19 seconds
Episode Artwork

Svelte Hackathon Announcement

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.NOTE: RECORDED JANUARY 25th.DescriptionAnnouncing the Svelte Hackathon! Join in and win prizes! MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Sirens stream - The story behind the (unofficial) Svelte newsletter What’s new in Svelte Feburary Native like SvelteKit: Picks Antony: CRUMB - Kevin: The Last of Us: Brittney: Arc Browser
3/23/202356 minutes, 35 seconds
Episode Artwork

Building furniture using Svelte with Bert Bengtson

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionWe sit down with Bert Bengtson, known for his wacky and very awesome Svelte Summit talks. Surely you must remember the desk chair talk? Or the most recent one where he runs around a room full of Svelte developers? Tune in for an awesome episode!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Discussion topics Ashley Furniture How did you end up using Svelte? Why Modals are Hard Antony’s example at Beyonk (click Send enquiry) Dialog element - Dialog | Open UI ( Bookit Histoire: Storybook Svelte Summit Talks The Highs and Lows of Migrating a Massive Ecommerce Website To Svelte and SvelteKit When Keeping it Svelte Goes Wrong. An Analysis of Some of the Worst Svelte I Have Ever Coded SvelteKit - vitest That conf: Vue post on r/Javascript and r/Vue - discussing Vue 2 to Vue 3 transition Unpopular Opinions Bert: Styling using semantic aria is the goat! Brittney: Remix will NOT go all in on Web Components Austin crim: remix talk - Svemix? Re-svmix? Re-svelte?: Bringing Svelte to Remix Router: at main · brophdawg11/remix-routers · GitHub Antony: Twitter/Reddit Bookmarks are the worst implemented feature ever - use Pocket Picks Kev: Nostr and Svelte French Toast Nostr Protocol - - Bert: Hypno Space Outlaw Swyx: Fave New Podcasts of 2022 Brittney: | JavaScript, but fun. Bytes NewsletterDanger Crew Antony: I’m a Computer -
3/16/20231 hour, 30 minutes, 40 seconds
Episode Artwork

We all live in a Svelte Submarine

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionIt’s the holiday season - yet there is a lot going on in the Svelte world. We discuss all the recent news, AI, Skeleton UI and the updates to the Svelte Sirens page. Listen to find out how Svelte is used in Submarines, what the results of the Stack Overflow survey 2022 are and why DevRel sucks.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])
3/9/202348 minutes, 33 seconds
Episode Artwork

Ron Au's story and how to be whimsical!

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionWe have a chat with Ron Au, the creator of the infamous floating head talk from 2019! He tells us about his journey from journalism into web development and how he ended up at Hugging Face. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Swyx's Company Conf Bang Bang Con Have you tried rubbing a database on it? Who is Ron? Twitter Website Huggingface People Mentioned Jhey Tompkins Josh Comeau Charlie Gerard This Pokemon Does not Exist Ron's Svelte Summit Talks Web á la mode (floating head!) Zwoosh YEAHHHH Shabam! Whimsy in motion! Scrollytell me why: Ain't nothing but a piece of cake Imba & Scrimba Unpopular Opinions Ron: Svelte is BAD - way too happy when using it. Meeting a ton of interesting people. UGH! THE WORST! Swyx: English has won, Duolingo should not exist Picks Brittney Sirens Stream on Skeleton Springhealth Swyx PV510+ Lavalier Mic Don't Buy a Yeti Ron Warhammer 40000: Darktide Squeeze Bottle Peanut Butter 🤯 Kev: Hollow Knight
1/26/202353 minutes, 58 seconds
Episode Artwork

3D and Threlte with Grischa Erbe

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionIn this episode we talk with the creator of Threlte, Grischa Erbe. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Threlte Arcade Machine Phsyics Engine Rapier Get Started with Threlte Jamstack Survey Evan You's Comments Picks Brittney: Unpack the Stack Swyx: Lovers in a Dangerous Spacetime Mastodon Links Brittney - Swyx -
12/8/202253 minutes, 16 seconds
Episode Artwork

Talking Gradio and AI with pngwn 🐧

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionIn this episode we FINALLY manage to catche the Pngwn 🐧. He works at Huggingface and created MDSveX. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Pngwn Bristech Talk Svelte Summit Fall 2022 Talk Svelte In Motion State of JavaScript 2022 - Don't forget to mention Svelte Radio! 😚 HuggingfaceSpaces Gradio Stable Diffusion Web UI Craiyon Weird Dall-E Generations Twitter Account SvelteKit 8 issues left!?Milestone Page on GitHub Interested in working at Huggingface? They're hiring! Unpopular Opinions Swyx: Svelte will stay on top of React Antony: Mastodon is not the answer to the supposed demise of twitter 😭 Swyx: Every developer needs to be AI literate - Software 3.0 Picks Brittney: The Peripheral Antony: Herr Gunnar Papphammar Pngw: Restaurant in Amsterdam Terrazen (video) Swyx: RunwayML - Demo Mastodon Links Brittney - Swyx - Antony - Pngwn - @[email protected]
12/1/20221 hour, 15 minutes, 6 seconds
Episode Artwork

3D, WebGL and AI

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionWe talk Threlte and AI... a lot of AI! And Svelte of course.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Threlte Discussion Website Svelte Sirens stream Reddit Thread Remotion Remotion but in Svelte SvelteCMS Sveltosis What's new in Svelte: November Optional Params use:enhance - new update function AppWrite Console is written in Svelte Unpopular OpinionsSwyx: All search is AI, all If statements are AIPicks Brittney:  DevRel Social Programming Stream Repo Nov 30th Stream on Form Actions Swyx: Hey Github and Codeium Beta Kevin: Stacklands
11/24/202248 minutes, 4 seconds
Episode Artwork

Catching up after Svelte Summit

SponsorVercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Founded by the creators of Next.js, Vercel has zero configuration support for 35+ frontend frameworks, including SvelteKit. We enable the world’s largest brands like Under Armour, eBay, and Nintendo, to iterate faster and create quality software. Try out Vercel today to experience the easiest way to use Svelte.DescriptionWe're finally getting back into it again. This week Brittney and Kev catch up on the latest since Svelte Summit. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Election Graphs using Svelte and SvelteKit Reuters Bloomberg Der Spiegel Axios Visuals Creative Coding (around 18 minutes it gets trippy!)by Alexander Esselink Jammies - Ecosystem Innovation Award Steven Sanderson, creator of Knockout.js shows us SvelteKit during his NDC talk SvelteKit Milestone 97%! Unpopular Opinions Brittney: Twitter is going to die, Mastodon is where it is at Kev: Twitter is NOT going to die Picks Kev: Kagi Search Brittney: Jamstack Conf
11/17/202231 minutes, 51 seconds
Episode Artwork

Let's talk routing with Rich Harris

Some new routing changes have made its way to SvelteKit. Controversial? A bit. We sit down with Rich Harris to talk about the why the how of it all.SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! DescriptionSome new routing changes have made its way to SvelteKit. Controversial? A bit. We sit down with Rich Harris to talk about the why the how of it all.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes The Discussion that started it allNext.js Layout RFC Migration Guide Unpopular Opinions Kev: Safari is the best browser 😎 Swyx: All apps can make more use of URL State managementForm Issue Brittney: Firefox is the best browser Rich: Firefox is not the best browser Picks Rich Harris: Swyx:  Brittney: Sirens Luncheon at Svelte Summit & Svelte Sirens August Talk with Josefine Schaefer from Storyblok Rich: Climbing / Bouldering / Toproping
8/19/202243 minutes, 45 seconds
Episode Artwork

SvelteKit is changing fast!

This week we talk about a number changes that have been made to SvelteKit lately. (No! Not the big routing changes, those will be talked about next episode!) And Brittney is our second Master of Ceremony for Svelte Summit!SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! DescriptionThis week we talk about a number changes that have been made to SvelteKit lately. (No! Not the big routing changes, those will be talked about next episode!)MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Bubble Popping Game Svelte Documentary for those who missed it Rich Harris Commit Messages SvelteKit Changes Consistent Handling of Environment Variables Uppercase HTTP Methods Enforce vite.config.js requirment Dummdidumm is hired by Vercel to work on Svelte Beginner SvelteKit by Vercel Carbon Components by IBM fluent-svelte by Tropix126 Community and Meetups London Social and more photos here Vienna New York Stockholm Monthly Svelte Lunch Storyblok with SvelteKit Josefine Schaefer - August 17, 1:30 EDT Last month - Testing in Svelte with Jess Highlights and libraries Phoenix + Svelte Svelte + SVG Bohr Atoms demo React Hooks in Svelte - josh nuss Svelte + Remix demo Remix-routers Form in Svelte - Threejs + Svelte Bruno Simon: Svelte Cascading Context store Stolinski - Bookit vitebook Svelte command palette Unpopular Opinions Kev: SQLite is enough for most things! Use PocketBase ❤️: swyx: Client-Server is not “Full Stack” anymore Brittney: Twitter spaces is the worst platform that is actually popular Picks Kev: Orion Browser swyx: Really Bad Chess Brittney: Learn Build Teach - Wins of the Week
8/10/202251 minutes, 50 seconds
Episode Artwork

The Svelte Documentary is out!

SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! We already have some confirmed speakers: Rich Harris, 🐧 Pngwn and Amelia Wattenberger!DescriptionIn this episode we talk about the recently released Svelte documentary. We thought it was pretty good... but we're biased, we were all in it 😂MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Svelte DocumentarySea Shanty Svelte Origins T-Shirt Design Learn Svelte, the new Svelte Tutorial Unpopular OpinionsPicks Kevin: Flip cocktail - Swyx: Brittney:
7/11/202227 minutes, 5 seconds
Episode Artwork

All About the Sirens

SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! We already have some confirmed speakers: Rich Harris, 🐧 Pngwn and Amelia Wattenberger!DescriptionIn this episode we sit down for a chat with the Svelte Sirens! Recorded back in April, apologies for the late drop!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes The Sirens Brittney Willow Steph Gen Svelte Sirens Streams and Talks Foodpopular and Unpopular Opinions and Picks Antony: Dominos Pizza is not pizza. It's a round bread product. Patty N Bun is good Shawn: Mosburger Kevin: Roman style pizza is better than neopolitan style pizza Brittney: Storybook errors are not good! Willow: Svelte Knobby Gen: Jabes Pizza in Soho (London) Steph: Whattaburger is gross
6/27/202251 minutes, 59 seconds
Episode Artwork

Stores Galore

SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! We already have some confirmed speakers: Rich Harris, 🐧 Pngwn and Amelia Wattenberger!DescriptionIn this episode we talk about stores! Custom ones, regular ones, cool ones! ALL THE STORES! We also rant a bit about the current state of build tools.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Svelte Cake Shawn's complaint about build tools Svelte Stores Documentation Tutorial Examples Kev's list of custom stores "Regular" Stores Notification Toast Store Thing LocalStorage StoreJacob Babich's NPM Package "Store factory" Stores Toggle Store Fetch Store Periodic Fetch StoreDon't want to hand-roll? Check out svelte-query Brittney's list Tackle Async Behaviour with Svelte Stores talk from Svelte Summit Persisting a Svelte Store with Local Storage from an older Summit Shawn's everything store xstate-svelteLi Hau's video on the topic svelte-fsm Unpopular Opinions Antony: Startups need tests Kevin: SvelteKit without Endpoints is no fun! 😭 Picks Shawn: Blood in the markets, might wanna buy stocks. Brittney: Slicing up your Svelte Site with Prismic The story behind the (unofficial) Svelte newsletter  Antony: Muskmobile
5/24/202247 minutes, 22 seconds
Episode Artwork

Inspecting Svelte Code with Dominik G.

SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! We already have some confirmed speakers: Rich Harris, 🐧 Pngwn and Amelia Wattenberger!DescriptionDominik joins us to talk about a really cool new feature that he has just enabled in vite-plugin-svelteMusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Rixo the HMR magician 🧙‍♂️ Svite from Svelte Summit vite-plugin-svelte Nollup Snowpack Post Mortem pnpm Cloudflare D1 (SQLite-ish Serverless DB) Li Hau's video on building an inspector Config Options to get started Matthias Stahl (Higsch) Dataviz Talk at Svelte Summit Unpopular OpinionsDominik: CloudprovidersPicks Kevin:  Brittney: Sirens talk's: First, Second Dominik: Vite and Svelte community 🥳Bjorn Lu Antony: Reclaim Shawn: Pyscript, Tweet RemindersMeetups Stockholm May 19th London May 26th New York June 1st
5/17/202251 minutes, 7 seconds
Episode Artwork

The other Rich! Geoff!

SponsorThis week's episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! We already have some confirmed speakers: Rich Harris, 🐧 Pngwn and Amelia Wattenberger!DescriptionGeoff Rich is a recent addition to the Svelte maintainer org. He joins us to talk about his role and what he'd like to work on going forward. Oh, and there's some Svelte Summit in here as well!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Geoff works at Alaska Air Auro Design System Geoff's Blog Geoff's a11y blog post, Svelte Summit Fall 2021 talk The Search Bar on the SvelteKit Documentation Page prefers-reduced-motion Svelte Summit Spring 2022 Mentioned talks Monogram's journey building an enterprise-grade app with SvelteKit Bert's The Highs and Lows of Migrating a Massive Ecommerce Website To Svelte and Sveltekit 🐧 pngwn's Svelte In Motion Scott's Tackle Complex Async Behavior One Step at a Time With Svelte Stores Meetball session was a lot of fun! Svelte Summit Fall 2022 website is being released... a couple of days ago! Tickets here. Unpopular Opinions Geoff: Web Components are actually pretty cool! Brittney: Jamstack is cool. Antony: Wordpress should be used for blogging and nothing else. Kevin: Project Gutenberg is 🔥 Picks Kevin: Concerts are so much fun! The Wombats  Boomer Seats™️ 🪑 in the back are great Brittney: House cleaners & Developer Experience at Netlify Blog Post Geoff: Video game music as coding music. Kirby and the Forgotten Land! Antony: Red Light Therapy Device for Hay Fever
5/10/202245 minutes, 47 seconds
Episode Artwork

The Adventures of Running a Svelte Meetup

SponsorThis weeks episode is sponsored by... Svelte Summit! Get your tickets for the upcoming in-person event in Stockholm before it's too late! We already have some confirmed speakers: Rich Harris, 🐧 Pngwn and Amelia Wattenberger!DescriptionThis week we chat about what it takes to host a Svelte meetup! Interested in running one? Just go for it!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Svelte Society Stockholm Svelte London Svelte Society NYC Svelte Summit Meetup Luma List of Meetups on the Svelte Society website (a bit out of date) Code of Conduct Minor Tips: Avoid pizza, get something healthy! Set the expectations to three talks: Beginner, Intermediate, Advanced Make it fun, sometimes a hackathon is all that you need. People like to talk and get to know each other! Unpopular Opinions Shawn: Pure SSG died in 2022 Antony: JSX is NOT JavaScript. Kevin: Bitcoin Proof-of-Work is actually good for the environment. Part 1, Part 2, Twitter thread Picks Kevin: CastoPod  Overcast PocketCasts Don't use Spotify. Shawn: HOMEBREW_NO_AUTO_UPDATE=1
5/4/202251 minutes, 19 seconds
Episode Artwork

Rich Harris on Hydration and the future of SvelteKit

SponsorThis week's episode is sponsored by ExtraStatic. ExtraStatic is a hosting service for Svekyll blogs. Svekyll blogs combine the simple conventions of Jekyll with the incredible power of Svelte. Check it out at Harris joins us for discussion on Svelte, SvelteKit, Hydration and a lot of other fun stuff. Enjoy!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Svelte Summit Spring 2022 on April 30th!Svelte London Meetup 28th Svelte Summit Fall 2022 in Stockholm on September 8-9Stay tuned for the website! Svelte Society NYC Rich's Talk and the Society tweet Svelte Radio Episode 39 on Page Endpoints and Named Layouts Svelte Radio Episode 40 on Svelte Element Unpopular Opinions Antony: Nested code blocks make code hard to read! Shawn: Edge functions will reshape frontend architecture Rich: Hydration is NOT pure overhead Article mentioned Fred K Schott's take Ryan Carniato's take Sebastian Markbåge's take Picks Kevin: SeveranceCounterpart Antony: Houzecheck - cheapest - best service - contacted me to ask about specifics Rich: Oculus Quest 2 Shawn: The Svelte Community Web Standards in SvelteKit docs Svelte Sirens on Landing Pages KitDocs Sv-popup Svelte-splitpanes SupaComments Svelte Black Hole Brittney Postma's Course Mike's Svelte Course Rill Data Developer
4/26/20221 hour, 13 minutes, 43 seconds
Episode Artwork

A Sudden Svelte Element Appears

SponsorThis week's episode is sponsored by ExtraStatic. ExtraStatic is a hosting service for Svekyll blogs. Svekyll blogs combine the simple conventions of Jekyll with the incredible power of Svelte. Check it out at week we talk about the upcoming Svelte Summit events as well as the new kid on the block - svelte:elementMusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Svelte Summit Spring 2022 on April 30th!Announced talks: Svelte - a shortcut to a11y? by Josefine Schaefer Svelte Native in production by Kyohei Hamaguchi Sign up to the email list for updates Svelte Summit Fall 2022 on September 8-9 in Stockholm Only a few Super Early Bird tickets left! Speakers Confirmed: Rich Harris (creator of Svelte) Pete Allen (creator of MDSveX) 🐧 svelte:element - you can now easily dynamically render HTML tags in Svelte. Documentation Tutorial Pull Request by Yuichiro Yamashita A demo by Geoff Rich Ryan Atkinson showing us how much code he could save Kit is now using TurboRepo TurboRepo Why TurboRepo by Shawn Unpopular Opinions Kevin: SaaS products are expensive and overrated, just selfhost! Antony: I should be unbanned from Twitter Shawn: Redwood is viable now. Picks Kevin: Nextcloud Kevin's second one: Purelymail Antony: Plyometric Pushups! Do 'em! Shawn: Twitter browser undo is TERRIBLE
4/19/202237 minutes, 25 seconds
Episode Artwork

Page Endpoints and Named Layouts

SponsorThis week's episode is sponsored by ExtraStatic. ExtraStatic is a hosting service for Svekyll blogs. Svekyll blogs combine the simple conventions of Jekyll with the incredible power of Svelte. Check it out at week Antony and Kevin discuss the latest additions to SvelteKit; Page Endpoints, Named Layouts and Parameter Matching.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Page Endpoints Named Layouts Advanced Routing: Pattern matching Unpopular OpinionsKevin: AWS is a proper headachePicks Antony: Depushang DT8 Kev: Human Interaction at offices
4/11/202232 minutes, 19 seconds
Episode Artwork

SvelteKit in Production with Domenik Reitzner

SponsorThis week's episode is sponsored by ExtraStatic. ExtraStatic is a hosting service for Svekyll blogs. Svekyll blogs combine the simple conventions of Jekyll with the incredible power of Svelte. Check it out at week we talk with Domenik Reitzner about a project they've built and launched using SvelteKit.MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Billa Service Svackages How to build a preorder service with SvelteKit in 8 weeks at the We Are Developers Conference Decathlon UK Unpopular Opinions Antony: If your product is shoddy and full of bugs, your support staff should know what they’re doing, if your product is good and well maintained, then you can afford to have incompetent support staff. Swyx: Github Issues is an amazing CMS! Example Domenik: Use the tool that is right for the job! Picks Antony: Pinebook Pro! Kev: DSLR as a webcam Swyx: Domenik: Regex search and replace in VSCode. Also:
4/8/202252 minutes, 29 seconds
Episode Artwork

Chris Toomey talks Svelte, Rails and Banking

SponsorThis week's episode is sponsored by ExtraStatic. ExtraStatic is a hosting service for Svekyll blogs. Svekyll blogs combine the simple conventions of Jekyll with the incredible power of Svelte. Check it out at talk with Chris Toomey of the Bike Shed podcast about him and is teams bet on Svelte at Sagewell FinancialMusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Sagewell Financial Style Directive Const Block Shawns IE11 Article Inertiajs Temporal and Sidekiq Unpopular Opinions Antony: Wordle can either use a domain or use us-english words, not both! Kev: SQLite is amazing Scaling SQLite to 4m QPS on a Single Server A future for SQL on the web Hosting SQLite databases on Github Pages Ansiwave BBS Swyx: Brian Holt's unpopular opinion - React Hooks don't scale Chris: Developers shouldn’t call themselves “Framework X developer” but rather “Web Developer” Picks Kev: Camo - using your iPhone as a webcam Antony: Stath lets flats Swyx: Obsidian and swyx's second brain Chris: Cleanshot X
1/20/20221 hour, 6 minutes, 59 seconds
Episode Artwork

New Year, New Svelte!?

DescriptionAfter a short hiatus we're back! We talk about Svelte Summit, Svelte Sirens and lots of other fun stuff!MusicIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Notes Svelte Summit YouTube Playlist Mini Edition Stockholm Edition London Edition Svelte Compiler re-written in Rust? Rich’s interview with Vercel Article on the subject Rich Harris on JSParty Svelte is a rising star Simon's end-of-year recap of Svelte Language Tools Search and Delete Svelte REPLs Svemix Svelte Cubed and Expanse What's new in Svelte: January Whitespace PR Svelte Dublin needs adopting Svelte Portugal signing people up Svelte Sirens Events Unpopular opinions Antony: NFTs - provenance on the blockchain, apes Kev: Safari is actually the best browser Shawn: Monorepos will be a hot trend this year Picks Kev: Fat Washing Antony - Oculus swyx: iphone 13 pro max
1/13/20221 hour, 5 minutes, 50 seconds
Episode Artwork

Rich Harris is now working full-time on Svelte 🤯

We sit down with Rich Harris to talk about his new job, leaving The New York Times and what the future of Svelte looks like. Enjoy!Description Remembering some New York Times stories The Follower Factory The Surveillance Economy  Corona Tracker Olympics Graphics Joining Vercel to work full time on Svelte Svelte Summit  Watch Parties New York Mainz, Germany Music by Fractal (He also made the intro to Svelte Radio 🧡) Svelte Summit Summer EditionSign up to get updates Unpopular Opinion Antony: Docks are pointless!Gnome3 Shawn: Pre commit hooks are good Rich: There are too many programmer podcastsBrian LeRoux Picks Kevin: The new Macbook Pro is amazingROI Calculator Antony: - free cryptocurrency if you have enough github followers Shawn: Azeret Pro Rich Harris: Soup in general
11/12/20211 hour, 9 minutes, 16 seconds
Episode Artwork

Svelte Summit is coming up and Svelte is growing!

We talk about the recently released Svelte Summit website and a bunch of other fun stuff!Show Notes Work at Beyonk! What's new in Svelte: September What's new in Svelte: October New Svelte Summit website Design by Johan Ronsse (Wolfr_2 on Twitter) SvelteKit is awesome. CSS is awesome. Email form enhancement action DCI-P3 is just... WOW! WebKit and Safari support Hacks for other browsers Svelte Summit CFPs (last day 30th October!) Svelte Summit sponsor opportunities Meetups starting back up!Svelte Society Stockholm Unpopular Opinions Shawn: No seed oils Kevin: Regular old CSS is king 👑 Picks Antony: Lumen Couture LED Face Changing Mask Shawn: How to Be Miserable For the Rest of Your Life Kevin: Swedish Cinnamon Buns 
10/18/202139 minutes, 32 seconds
Episode Artwork

Routify 3 with Jake and Willow

We sit down and talk with Jake and Willow and talk about the just-released Routify 3.Notes Routify and their Discord server Version 3 Stackmix: A Template Generator for Routify SpaSSR: A small express server with SSR Spank: Slap the pages out of an SPA ToSSR: Universal SPA to SSR Configent: No Fuss Configurator Meteor: Open-source Framework for Building Applications Meatier: Like Meteor but Meatier Unpopular Opinions Antony: Saas pricing suckSSO tech shame site Shawn: We will want Svelte to stop growing at some point Bikeshed podcast Jake: Filing bug reports and getting asked "Why did you do it like this?? Picks Antony: Shawn: SupabaseSpotify Native client: Psst Kevin: Muji Linen clothes Jake: Clickup.com Willow: Grid LayoutIt Complete CSS Grid Grid Critters
9/23/20211 hour, 1 minute, 32 seconds
Episode Artwork

Contributing to Svelte with Martin 'Grygrflzr' Krisnanto Putra

Today we talk with Grygrflzr about his journey to becoming a maintainer and his views on React, Vite and a host of other things. Enjoy!Notes: Svelte is the most loved framework Scott Tolinski: 5 Things I like about Svelte Scott Tolinski: 5 More things I like about Svelte Dev environment issue Unpopular Opinions:Shawn: Social media > SEO > Social media Empty States Picks Antony: Swoon Editions Furniture Kevin: Warp Terminal Shawn: Spider Man Miles Morales Martin: Picking monitors is hard.
9/17/202152 minutes, 35 seconds
Episode Artwork

Tan Li Hau has a YouTube channel

We welcome Tan Li Hau back for a second time. This time we talk about his YouTube channel where he has been creating some stellar content!Show notes: Micro Frontends Webpack 5 Module Federation Li Hau's YouTube channel How to call functions from the parent Svelte Stores Twitter profile Constants in markup draft PR (RFC) Picks: Antony: Peloton Treadmill Shawn: Chef (2014) Kevin: Beerrunners concept Li Hau: Svelte Question Time Playlist
8/18/202157 minutes, 54 seconds
Episode Artwork

Rebuilding LevelUpTuts using SvelteKit

Scott Tolinski is back! He's been a busy bee rebuilding LevelUpTuts using SvelteKit. We get all the juicy details!Notes svelte-toy Rich Harris's Svelte Metaphysics talk link svelte-toast Remix framework Course: Building Svelte Components Course: SvelteKit Course: Animating Svelte Unpopular Opinions Antony: Email sucks Shawn: All JavaScript functions should only be allowed to take one argument. Picks Shawn: Write Less, Do More Antony: Kilner Jars Kevin: THE VACCINE! Scott: A Death in Crypto Land
7/12/202154 minutes, 20 seconds
Episode Artwork

Talking WebDev with Brittney Postma

Support the show - become a patron!Brittney has an unusual background and an interesting story! We ask her about mentoring, teaching and how she got WebDev. Enjoy! Brittney also has her own podcast called - Braden Wiggins a.k.a. Fractal ([email protected])Notes: freeCodeCamp Zero to Mastery The Console Logs Discord Communities Coding Cat LevelUpTuts Learn Build Teach SpaceJelly PartyCorgi Zero to Mastery (you need to pay for a course) Unpopular Opinion: Brittney: I'm done with React Antony: Chai is not a good a good assertion library. Use @hapi/code instead! Picks: Shawn: Superhuman Kev: Chai tea (especially latte!) Brittney: Black Monday (and Kev's tip The Big Short) and Polywork
7/5/202156 minutes, 34 seconds
Episode Artwork

Talking Elder.js with Nick Reese

Support the show - become a patron!We sit down with Nick to talk about Elder.js - an insanely fast static site generator built on-top of Svelte with support for partial hydration.Music:Intro - Braden Wiggins a.k.a. Fractal ([email protected])Notes:FindEnergyUnpopular Opinion: Shawn: Svelte IDEEarlier episode with Mike from GitPod Nick: Hydration should be included by default Picks: Antony: Not today! Shawn: Learn CSS from Google Kev: WebAuthn Nick: PostGraphile
6/29/20211 hour, 7 minutes, 53 seconds
Episode Artwork

A Jolly Good Svelte Summer

Support the show - become a patron!We're back after a short break with a new episode. We talk about what's new in Svelte and what we've been up to! Oh. And this is sort-of our 1 Year anniversary! 🥳Music:Intro - Braden Wiggins a.k.a. Fractal ([email protected])Notes: Scott Tolinski's LevelUp Tuts SvelteKit conversion livestream New CSS Custom Property Feature (Kev's REPL showcase) New CSS selector feature in the compiler New Style directive hopefully coming soon (Read the RFC) What's new in Svelte (Newsletter) Stricter body types, etags for binary responses Remove getContext in favour of request.locals Redhatters Svelte Devtools New SvelteKit Package feature Svelte Knobby SvelteKit Breakthrough of the year nominee Unpopular Opinion: Antony: Vegan equivalents are actually better than the real thing in a lot of cases Shawn: VSCode Sidebar on the right gangBonus VSCode tip Kev: SublimeText 4 gang Picks: Antony picks no-water cleaning supplies again; Homethings. (Cleancult, Blueland) Shawn: Svelte Form Libraries Kev: Swedish Summer & Gelato. Top Gelato parlor in Stockholm: Snö.
6/23/202156 minutes, 1 second
Episode Artwork

Migrating from Sapper to SvelteKit with Mike Nikles

Mike Nikles (Twitter) from GitPod joins us to talk about the journey they took from Gatsby, to Sapper and finally to SvelteKit. We talk about the ups and downs.Notes:- GitPod's website built in Svelte (GitHub)Picks:- Kevin: Chocolate Balls- Antony: QR Scanners- Shawn: Josh Nussbaum- Mike: TimeZone.ioIntro music by Braden Wiggins a.k.a. Fractal ([email protected])Transcription:Coming soon.
5/8/202153 minutes, 10 seconds
Episode Artwork

BONUS: Svelte Summit Q&A with Rich

Sponsors Filevine: Client, workflow and document management - the Work Operating System for Professionals. GitPod: Remove all friction from the developer experience to be always ready-to-code and make software engineering more collaborative, joyful, and secure. Budibase: Build internal tools on your own infrastructure in minutes. This is the Q&A that followed the Rich's SvelteKit update from Svelte Summit yesterday. If you didn't catch that, you can find it here.In this Q&A we talk to Rich and ask him SvelteKit, enjoy!PS. Sorry about the audio, it's ripped from YouTube and unfortunately not using our regular recording method. We hope you'll like it anyway!Transcription:Not this time, sorry!
4/26/202133 minutes, 50 seconds
Episode Artwork

Svelte Summit Party Episode

Svelte Summit is happening on Sunday! Don't miss it. We start at 2PM London time (the FAQ has more time zones listed).This episode is the first to include our new intro music and we're really happy with it. It's made by Braden Wiggins ([email protected]). He usually frequents the Routify and Svelte Discords, you've probably seen him around! :)Picks: Kevin: NeuraLink MindPong Monkey Antony: KUCOIN (referral link!) Shawn: Emptystates Transcription:Coming soon.
4/22/202154 minutes, 51 seconds
Episode Artwork

Building ListenAddict with David W. Parker

Note: This was recorded on February 4th, some things may not be up to date. Sponsors: Support Svelte Radio by leaving a review on iTunes and/or visit our support page.Description:Parker shows us ListenAddict. We talk a bit about building stuff using Svelte and what's next. ListenAddict Why Tailwind Podcasting Cheatsheet Unpopular opinions:- Antony: The {#await} syntax should be removed from Svelte- Shawn: ESM was a bad ideaPicks: Kevin: Bitcoin Lightning Network Antony: Nogent Super Kim Can Opener Shawn: Three.js Journey Parker: YouTube and Espresso Machine Transcription:Kevin Åberg Kultalahti  0:00  Hello, everyone. Welcome to another episode of Svelte radio. Today we have yet another guest with us to talk about Svelte. But first introductions. I'm Kevin, I run a site called Svelte school. And I'm heavily involved in the Svelte community in general. And I'm just a Svelte evangelist, I guess.Antony  0:20  I'm Antony, I'm the CTF Beyonk. And I'm also Svelte maintainerShawn  0:26  I work as a senior developer advocate at AWS, this is probably my last time in that role. And I'll have a new role coming up. Next time we do this recording, where hopefully, I think, if I'm not mistaken, I'll be working on a production Svelte project. So more needs to come hidingKevin Åberg Kultalahti  0:46  ideas. And our guest today is David Parker. He's a software developer, I guess. Maybe you can introduce yourself. Yeah,David Parker  0:58  I'm David Parker. I normally go by Parker, and I am CTO at Hobby DB for my day job where I do Angular, unfortunately. But I spend a lot of my free time doing Svelte and I run my site called listen addict calm, which we'll talk about a little bit later. And I'm making another project after that. So,Antony  1:19  so I'm just gonna, I'm just gonna point out here that that title developer, you know, with a guy who has two side projects, we should looking pretty decent. I'm going to say entrepreneur. It's a good title. I would like that.Kevin Åberg Kultalahti  1:36  All right, so before we get into the meat of the discussion, all, all are written sponsors, bots. So the first sponsors bought is actually not a sponsor, it's just some news about that. You can now support Svelte radio directly, so you'll get access to video versions of the podcast or you'll be able to listen to the episodes a couple of days early, even unedited, sometimes, so head on over to Svelte slash support, and you can read more about it there. Oh, and secondly, if you like the podcast, it would be awesome if you could leave a review on iTunes and subscribe. Alright, and that's it for the Yay, answers.Shawn  2:24  I wish you I don't know. It's like, it's a great way to support independent radio, I guess. And this is this is kind of what we're doing.Kevin Åberg Kultalahti  2:32  Yeah. Yeah. It's it's like, yeah, it's easier than then hunting like sponsor, like real sponsors, I suppose. But IAntony  2:43  guess you know, after a while, they'll sort of just appear out of the woodwork really. So yeah, it's, but it's nice, I think I think being able to pay for something that has value, you know. And then having that sort of inside info, or the Sneak Peek is really, really valuable. So I think it's good. I think I like I like it.Kevin Åberg Kultalahti  3:00  We'll see how it goes. Do you run a Patreon as well? No. So I've actually looked at a couple of different solutions for this. And Patreon was one of them. But there's, there's like a lot of not being in the US and having to handle like VAT is a real hassle. patron does it for you, but the like the fees they take are ginormous. So I found some other some other ways to solve this. I'm think I'm currently going to use paddle. It's it's like a handle digital products and software. Pretty much I drawAntony  3:41  the line, I draw the line that only fans I have a body for radio.David Parker  3:51  I have a comment. I don't think it's appropriate for this audience. So I'll hold my tongue.Kevin Åberg Kultalahti  3:59  Alright, so so let's let's get into it. So so you're you said you were a an Angular developer, on your on your day job. So how did you end up doing doing Angular?David Parker  4:11  So I'll just give you a super, super fast, short version of my history real quick. I was in the military in the United States, from 2000 to 2006, as a Java developer, so I basically sat in front of a computer and coded for the military was very boring. But that really got me didn't even know you could, you could do that. You know, there's a lot of systems that you have to keep track of like tracking people, personnel, training, all all the things but not very exciting. I don't like the corporate structure, but I got out, turned around and became a contractor work for them for three more years making three times as much money because you know, when you're and you don't make any money, but that kind of, as Anthony alluded to before, kind of pushed me in that entrepreneurial direction during the big corporate type thing. So then I went back to school grad school because I had free money for from the military, and did entrepreneurship, and computer science. There, I met a co worker or a co founder of my previous company called devise. We were a rails and AngularJS. And at the time, this was a little bit before react and all the, you know, jQuery is kind of just leaving popularity, even though it's still popular backbone was kind of plus or minus, I didn't really care for it at the time. So we chose to start our company with AngularJS. And that's kind of where I got the start in Angular, we never really upgraded and that company to, you know, angular 2.0. And thus, for what it's now and now is. And then moving on from there, that company was sold, and spent some other time doing react, and played around with view a little bit, played around with Django. And then I joined Hobie dB, and they were already using Angular. So that's how I came to be my current role. Cool. SoKevin Åberg Kultalahti  6:01  so so what is hobby DB is like an e commerce. Yeah,David Parker  6:07  it's a it's a e commerce site where people can buy and sell anything that's collectible. So the little pop Funko dolls. If you're familiar with rose, I don't know how popular they are outside of the United States. They seem to be kind of trendy. And I'm, I guess we are a marketplace for those is the the main thing and Hot Wheels, the little cars. Those are our two main.Antony  6:30  So this. This is called hobbie dB. That's, that's that's an interesting name. Because it I really thought it was like a system for development. Yeah, I really, I thought it was like a, you know, the name the name did not draw a picture of what the what the product is. It's interesting.David Parker  6:47  Yeah. Yeah. They were around for about three years before I joined the team. And then I took over a CTO there and the previous VP of Engineering and CTO was taking off. So I'm still in a Fingers crossed, do we? Will we ever have the time to upgrade off of their stack to you know, Svelte or something different? But it seems like we're always chasing? Yeah.Antony  7:13  So I guess it's all for the push, isn't it? Yeah. And then I think do you think people who were sorry, do you think people who work with you've got an appetite for something outside of Angular? Or do you think they are kind of pretty happy with Angular, and the dev team is definitely excited about other things.David Parker  7:32  It's kind of hard not to get them hyped off. They're very into next j. s, which is the React. super popular one, which is fair, most of our development team is in South America. And you know, right, making sure that their skills are up to date. And in the popular realm.Antony  7:51  That's fair enough. Yeah. I mean, you can't blame us for that really Kenya's face.David Parker  7:55  But I have turned them on to some Svelte things. So we're trying to get little internal tools here and there used toAntony  8:03  so it's funny how, yeah, all you need is like a little a little way in. And then suddenly, people kind of prefer writing this. And then suddenly, everything becomes the spell and what you thought was, right, that's happened in a couple of places I've worked out and it's quite a nice feeling. doesn't always work doesn't always work at all. I mean, there was a place I worked out, which is Redux and sagas and react. And I tried, I started writing login screens and stuff for things in Svelte, but it didn't really catch on.Kevin Åberg Kultalahti  8:32  Yeah, I mean, sometimes people are stuck in their ways.Shawn  8:36  I think it's a particular challenge to CTOs. Because at some point, your stack will be out of date. And then there's always a question of like, when do you rewrite to keep developers happy, while at the same time, like, rewriting just for the sake of rewriting has zero business value? And, like, how do you make that decision? So I don't I haven't come across it. Yeah.Antony  8:55  I think one of the roles of CTO is that you don't, you don't make a decision. Right. You, you, you offer up alternatives you advise, you know, you provide benefits and widen landscape, but you don't necessarily push your team in a direction. Because it really, you know, in the end, it's up to the team who actually doing especially as a CTO of a larger company, you are not developing yourself, you're kind of more providing a background for people who are developing in your team.Kevin Åberg Kultalahti  9:25  Right? So So you've, you've found Svelte and you've fallen in love with you know,David Parker  9:34  I  really have it's kind of funky because I when I played with view, and when I did a lot of react, a lot of reactor and contract time between you vias and Javi dB. I did I did that whole Redux saga thing as well. Went down that rabbit hole and and I've played with you know, hooks and you know, newer things too, but still sometime I think it was last year, really early on. So pre COVID days I was watching rich talk about something and I don't remember what and I was just like, that looks really cool. And then when COVID started, I was stuck at home a lot more. So I was like, well, I want to make this product. And I really wanted to make it for myself. And you know what I'm going to try to do you know sapper with it. And so the nice thing is that I really, really like probably more than anything almost, is the fact that you can literally go through the entire tutorial, and all the documentation for Svelte in four hours. You know, you can go through the entire thing, and, and you've done at least a little bit of everything, and no, you don't know it all. But you've tried it all. And you can see how it works. That to me was the biggest selling point because I went through the whole documentation. And I was like, pre sold because I didn't have to take a week to try to learn everything.Antony  10:54  Yeah, that's the same reason I'm here, right? That's exact same reason the tutorial, I'm very impatient. I you know, I get distracted easily. Whatever you want to call it, ADHD, you name it. But basically, something needs to be quite terse and quick, and you know, learn it, and it's and it's perfect for Svelte, it's just like that. And I guess is a good answer. People who, who raise bug requests saying why can't we add this API and this API and this API is because that would that that length would grow the length of time?Kevin Åberg Kultalahti  11:20  So what did you first build in Svelte? So is listening to first kind of thing that youDavid Parker  11:25  Yes, it is, actually, I kind of just went, you know, all the way down. So, quick breakdown of what listen addict is just for the listeners is, it's basically a place where you can go subscribe to a person, kind of like you'd subscribe to a podcast. So if you really liked Kevin, specifically, and he was on other podcasts, you'd subscribe to him. And you get notified every time he's on any different show, or Antony or Shawn or whatever. So that's, versus just being subscribed to you know, Svelte radios by itself, you, you might subscribe to that to somewhere else, but on my site, he would subscribe to a specific person. And yeah, so I wanted to do so. And I figured might as well and this is a product for myself, I built it for me. You know, if I really MVP, I would just build the back end and email myself when somebody who knew was on. But I was I wanted to build something fun in the front end. And it just kind of grew and grew and grew and became a little bit more than my MVP should have been. I had a lot. I had a lot of fun with you knows, you know, cell phones, like getting into animations. And I'm not the best with animations and these kinds of things. And it made it really easy to do really silly things that I kept on pushing my MVP back for.Kevin Åberg Kultalahti  12:43  So kind of a double edged sword there. Yeah, to get it out there. But then you get stuck in all these nice features. Yeah,Antony  12:51  exactly. But it's the guest best kind of product, right? You built it for yourself. That's just essential. That's absolutely how to do it.David Parker  12:56  I don't think I could build something that is just strictly market driven. I have to be able to control myself. My The next product I'm building is also for myself. So yeah.Kevin Åberg Kultalahti  13:07  So so. So is it just swept and separate all through your day? Are you using some other serviceDavid Parker  13:14  on the back end, the technical back end is all rails. It was just really easy for me to build an API for that. I'm a big fan of flutter. I'm not sure if you guys are familiar with flutter. So I've played a lot with that for mobile apps. And it's, it's brings a lot of joy, kind of like Svelte does for me for the web. So I wanted to build my back end. And what I am super familiar with is that I can go fast. So all the backend is on rails. I would love to eventually learn go Lang or something else and replace it, but it's not as important. And then the front end is just all Svelte and sapper.Shawn  13:51  And to deal with any challenges, integrating Svelte with rails, I think you have to use something like a web Packer with rails, oh, no real estate, well,David Parker  13:59  there's this app, I decided to make it separate applications entirely. So the rails back end is purely an API. So you hit a web request, and it returns some JSON. And that's it. That way, I could keep it completely separate for the flutter app that I pinched, eventually plan on doing. And that's why I didn't want to be completely separate. But yes, you're correct in that if you were to do it from scratch in one application, so it's all rails with sapper Wytheville, or whatever it would use web Packer or something like that.Shawn  14:27  I wonder if there's like a rule of thumb or complicated. Yes, it's,David Parker  14:30  it's way more it's way more complicated. I love having it separate. It makes it so fast.Shawn  14:35  Yeah. API's are like the native, you know, foreign function interface of the web. It's so interesting, talking about flutter, right? Like, I've messed around a little bit with it. flutter has a web equivalent. Why not build the whole thing in flutter? or build the whole thing is Svelte and Svelte native.David Parker  14:53  So I'll answer that two ways. One when I was really getting into flutter two years ago, When I was really getting into flutter, they flutter web was not ready. And from what I've read, it still might be ready question mark, in that certain things you can't let you couldn't even like copy and paste, text and things like that, because of the way flutter works. So flutter web was just not ready when I looked at it. So flutter web does.Kevin Åberg Kultalahti  15:19  Does that work the same way that flutter works on mobile? Like it has its own canvas and renders stuffDavid Parker  15:26  on on it at the time? It did. I'm not sure now, because I haven't looked since To be honest, right? years ago. Yeah. And then same thing with Svelte native. I honestly haven't even tried it yet.Kevin Åberg Kultalahti  15:36  Yeah. So I so I've actually, so there's some some news for for an upcoming episode. I've talked to a guy who's made some Svelte native application. And he's going to be found one episodes to talk about it with us. So that's, that's nice. You're interested?David Parker  15:57  I'll definitely listen to that.Unknown Speaker  15:59  Yeah, yeah.Shawn  16:01  So it is, it is one of those things, I actually spend a lot of time kind of advocating for this sort of separation between front end and back end. So you're, you have the choice of technologies, when you're building different clients. So you're kind of living that right now.David Parker  16:15  I definitely agree with that. And I hate the whole, you know, I have a hammer and everything is a nail. And I feel like I find that so much. And especially in JavaScript land. People want to apply it to everything. And I'm not sure if you are familiar with Jeff Atwood, but he has a atwoods law, which anything that's written in code will eventually be written in JavaScript or something along those lines. And he he published that like 15 years ago, or something like that.Kevin Åberg Kultalahti  16:42  Sounds familiar.David Parker  16:44  So I always think, you know, why not use the best tool for the job. And that's why I didn't use just express with sapper to build my API. It's why I didn't use rails with web Packer. I think that rails as an API, I can get things done incredibly fast front end, just sticking it with sapper and Svelte and tailwind, I'm doing things way faster than I would try to implant rails with it. And and when I played with flutter a couple years ago, it was fast to implement things. And I can't say that I won't check out Svelte native, because I'm definitely excited about new technologies. But I don't want to do the hammer thing. make everything a nail? Yeah. Yeah.Kevin Åberg Kultalahti  17:26  Fair enough. Make sense? Okay. So you've also got this, this other thing that you you're working on, right? I saw I saw a comment on Hacker News. So this is actually how I found you, I think, you're you're doing something called us producer, sniper, you Yeah,David Parker  17:43  use. So, of course, is taken, because that's quite expensive run by somebody.Antony  17:49  So I bought the domain.David Parker  17:51  And so, you know, I'm calling a producer, this domain is used producer, like, I'm going to use this. And that's going to be a product, leaning towards YouTubers, but then also eventually podcasters and other content creators, where it's a project management tool, basically. So you know, Kevin, I'll probably reach out to you at some point after this, you know, a few months down the line when I have an MVP and our need for better beta users, but you're trying to create episodic content, where you're doing the same thing over and over and over again, and, you know, you have your job, and Antony has his job, and everybody has their jobs, right. And so you can have a team corporated. And it's kind of automatic. So you do your thing. And then, you know, Shawn gets notified, it's his turn to do his thing he does it, he could click the play button, and it automatically tweets for you. And so then you don't have to go into Twitter and tweet because that's already finished as well. And then you go back and you check your, you know, you click whatever on YouTube and then basically, an all encompassing project management tool in I've found there's quite a few different tools based off the interviews I've done with mostly podcasters at this point, and a few YouTubers, but on the YouTube side of it, especially there's less team coordinated things. It seems like a lot more podcasters are using more generic pet tools like notion versus something that's specifically to podcasters butKevin Åberg Kultalahti  19:20  yeah, yeah, that's that's what what we're using now notion. Antony made a template This wasAntony  19:30  my CEO is obsessed with with notion so he is because the show was cool like he's basically using it like Excel. He said, We everything's linked to everything else, which is kind of like nice. He does have benefits to that sounds scary. But I just get frustrated with the you. Yeah, no, it is scary as well. But I get frustrated with the UI and it's definitely like, it's that tool is the hammer you talked about before. Is it Parkour is the hammer. It does everything. everything looks like a nail. It's good, but it's also not good. And, you know, I kind of missed Trello I yearn for my Trello days.David Parker  20:04  Yeah, I've used notion some and I agree. It's, it's a very, very, very powerful hammer. And it's fun, but then it can get bogged down and it can get slow. And you know, there's different issues with it, too. But I want to build it, I want to build a tool that's specific to the episodic content creators.Kevin Åberg Kultalahti  20:22  It makes sense, Shawn, how do you cuz you're, you have another podcast that you you do with Reynold cannot, right. Yeah. AndShawn  20:31  I do three.Kevin Åberg Kultalahti  20:34  So So how do you organise your your podcasts,Shawn  20:39  were random, I have a Google Doc, where we just put ideas of episodes. And it's, it's important that it's short. So we try to plan the content, but then we don't try to plan it too much. Because then it becomes very scripted and artificial. So we just try to make sure that we logged on our ideas and then organised like the main points you want to hit, I think shownotes is a is an important thing to get right, at least for me when I listen to podcasts. So having them prepped, and then, you know, make it like an easy copy paste job, at the end is pretty important to me. And that's about it. I mean, I do think I do think that supporting creative creative workflows for episodic content is important. But I think my pain point is actually more around like once I've done something once. I'll like tweet it out once, but then really not that many people will see it the first time like I actually need to break it up into chunks and share it again. And again, and again. So to really spread it out over time and maximise the value of the the the time they put in. So I've been looking at some tools to do that to do audio and video clips.Kevin Åberg Kultalahti  21:42  Oh, like like short, shorter ones? Yeah, I even had to take snippets.Shawn  21:48  30 seconds. I said, even like 10 seconds snippets of like, justKevin Åberg Kultalahti  21:51  actually thought about that today. Yeah, doing Instagram, short, short, like stories or whatever. I don't know if there are many.Shawn  22:00  Yeah, I've a little repo of this, that that helps. Where I'm keeping notes on tools like specs, D script, audio mass, and then, headliner dot app, wave, co These are all tools in this space that I'm exploring,David Parker  22:17  I will definitely check out a lot of those too. Yeah, I want to build things like that. Or, you know, the episode may be published, but the job isn't done for it yet. You still have to do follow one work, or you know, you want to tweet out a week later, two weeks later, a month later, three months later, to be like, hey, check out this episode that I wrote, and having that audibly, as much as possible, automated. You know, obviously, sometimes, if you want to do snippets that you need to edit in, that might not be so automated, but having the tweet ready or having the, you know, Reddit post or whatever, I can automate and be as easy as possible.Shawn  22:54  Would that be a psychic job for you? In real? Yes, that,David Parker  22:57  yeah. It would just be queued up God, that would happen eventually.Shawn  23:02  I like these, I like these things. I like these automation tools as a side project ideas, because it's kind of like fire and forget. And the the value is not tied to your time invested in it. And so I, I am looking to get better at these things. I'm not using psychic by using some other scheduling stuff.Kevin Åberg Kultalahti  23:20  Yeah. So So what is SidekickDavid Parker  23:22  Sidekick is a Redis based cue system for Ruby. And since Rails is Ruby, it's just easy to throw a sidekick on there and say, Hey, here's a job that's going to happen once a day or incorporate into a cron task. And then it'll just run in a background worker somewhere. So I also run a YouTube channel, which is this is the fulfil my own, you know, problem kind of thing. I've paused on it at about two years ago, two and a half years ago, I think, no, because I had a daughter, who's taken up most of my time, but now she's getting at an age where she is largely self sufficient for a lot of things anyway. So I'm getting back into to shake. Have fun for yourself, right? Yeah, totally. She's, she's fine. So my intent with us producer is, you know, I'm revisiting my old workflows for my YouTube channel and trying to figure out what was my personal pain points. But now that the, you know, the content creator economy is growing, as has grown so much, even since I've stepped away for a couple years, trying to get not just my own feedback, but get feedback from other creators.Shawn  24:28  Yeah, I think this is a pretty good idea.Antony  24:31  There's several thatDavid Parker  24:32  work in different niches that I'm trying to blend. And I think that's the thing. So I've played a lot around with the YouTube API's, for example, and a lot of the stuff that I have enjoyed doing. This is not episode of content, part of my app, but the other part is just, you know, analysis of your content. And I've done a lot of research against, you know, my competitors, so to speak, you just using the YouTube API, and I love checking out that kind of stuff. So I looked at who did Those that already in the space. And so there's two buddy and vid IQ are the big two. But they're just Chrome extensions, like super big little Chrome extensions that modify the YouTube channel, just the site itself. And so they're not like separate applications for managing, you know, the content itself there. They just allow you to automatically fill in, you know, tag list and other things for you.Antony  25:28  I think, I think, yeah, it's difficult. It's difficult to build a tool, which is generic enough that everyone can use it, but also simple enough, you know, flexibility is complexity. And before you know where you are, you end up with no, right? This is it all back resolve a cyclic and goes back to the same thing that if you make it too good, you're going to end up with something that really doesn't suit anyone. So I think I don't know. I don't envy your task there in terms of in terms of merging all this weird niches.David Parker  26:00  Yeah, that's why I really want to focus mostly on youtubers to begin with, and then make it well enough for the the episodic portion for podcasters. There's podcasting. I feel like has a lot more competition in terms of products that already exist.Kevin Åberg Kultalahti  26:18  Yeah. So I assume you're gonna build this in Svelte and Falcon?David Parker  26:24  Yeah, I'm gonna need to do Svelte kit. I keep on waiting for it to get published. So the landing page for the officer? Yes. Is a is done in just sapper, because it was just easy for me to export it. As you know, it's a single landing page with an email form. Pretty simple. I want to jump back to listen real quick. cuz I've heard him too. I didn't get to mention this before. So talking about MVP, and like exciting, different things and awaiting. This is really cheesy. A few guys can have your computers up. But if you check out, listen, on the desktop, not on your phone. I have to when I used to love tailwind and we could talk about that if you want or not. At the top, I have dark mode and light mode. And then if next to it, I have my little palette builder. So if you click that, it should do a nice little animation. I wish I just had so much fun with that. And so that was fun and experience that is fine. It's super satisfying. And it was so easy to do in Svelte and I showed my wife and she's like, so when does this MVP launch?Kevin Åberg Kultalahti  27:32  And I'm like, well,Unknown Speaker  27:33  well Svelte made me do this. Sorry.Antony  27:36  Yeah, right.David Parker  27:38  So wait, so So you did well in in tailwind? That's, that's a little bit hard to do. No, is super, super easy. And it's ridiculous. My CSS is ridiculously small. I know. Some people just hate tailwind and and we can go into that if you want. But it for me, it was easy. I think each of my files for my colours was 1.3 kilobytes. And then my total for the rest of the CSS was like three something or four something. And that's per colour. So 1.3 kilobytes per colour. And it gives me light mode and dark mode.Kevin Åberg Kultalahti  28:14  So it's pretty nice.David Parker  28:16  And then you know, and the other thing is, of course, because you guys don't see this, I have built myself a moderator dashboard and an admin dashboard for listen addict, with the intent that eventually I can pay some Mechanical Turk people or something to help moderate new content on listen addict. And I have all the keyboard shortcuts and all these other things built in. Because he just made that so freaking easy. I was ridiculous. I just so when I go and add new content on there, it takes me minutes, because I'm just using keyboard shortcuts and all these other things that I've made that were so fast to do.Kevin Åberg Kultalahti  28:53  So are you are you adding the content manually done? Yeah. So be it does the work.David Parker  29:00  Because not every podcast is interview based. And I want it to be hyper focused on interviews. So I want to say that 90% of my content is interview based podcasts. And every given podcast, not generally, generally not 100% of the episodes are interviews, there may be something else here or there. So that's kind of the gist of it is I am currently manually curating and trying to find new content. And it literally, it was up front. And it is still to find the original source. But once I find, you know, the podcast and RSS feed, it's fairly simple. I have a very, very simple mg tagging library that I use plus a little bit of heuristics and algorithms that I've written to extract out people's names automatically. So I don't have to go in and add people. it'll pick up all right As long as they're in the title of the episode, I am at like a 95% hit rate. And the other 5% is manual intervention. So that's what I would need moderators for.Antony  30:12  I think manual curation is a really good way to go. You know, we do a lot of things manually as well. And at some point, you figure out what works, what doesn't work, because you've done it manually, and you've been involved there. And then you can automate those tasks, rather than trying to automate it up front. And then you know, do something that doesn't really work and then start tweaking code and bugs and stuff. doing it manually is a very good a very valid method, in fact, of MVP style stuff. So yeah, definitely has a great way to get closer to yourDavid Parker  30:39  customers. And that's that's sort of the approach I've taken, because I basically built out a few tools, tools for myself as a moderator. But now it's at a point where a lot of that can be passed on to other people to do it manually, for cheap, if I can, or taking some of that and automating it slowly. My the hard part, of course, as you said before, with the entrepreneurship thing, and multiple products is now 80% of my code time is going towards these producer, listen, addict more just for fun for me. And it's at a very stable position at this point. I may or may not try to monetize it, I don't think it's anything people will pay for. But I could throw ads on it, I guess it's not that important to me, it's very cheap to run. So I would much rather spend my time on using it on us producers. So that way I can get that launched and actually try to make money in quit my job.Shawn  31:33  So So I have a suggestion on how to monetize this. And this is something that so I used to be an equity analyst and a hedge fund. And my job would be to follow the CEO and CTOs and whatever of the public companies that I'm invested in. But it's hard to keep track of the public interviews that they do, and increasingly more and more than we're doing podcasts. So basically, I would want to give you a list of stock tickers to look up like their their C suite, essentially. And if any of them do any podcasts, I want to know about it. I want a transcript. And yeah, I want to email to me. So like, if you want like a b2b version of that, where people will pay for it. Probably that's, that will be a path.Kevin Åberg Kultalahti  32:17  Oh, interesting. IDavid Parker  32:17  haven't even thought of that. Everything I'm thinking is, you know, consumer based stuff. So that's very interesting.Shawn  32:23  Oh, yeah. b2b is where the money is you Everyone knows that. Right?Antony  32:26  Yeah, absolutely. Absolutely.Shawn  32:28  So So and actually, I have a further hypothesis, which is, if you see someone, if you see like a CEO, doing like a podcast for, you know, their company's doing well, so you should just buy the stock. Like, like, is that now Michelle? Michelle zetlin is doing every podcast. So you know, CloudFlare is just crushing it. Like, they're, they're releasing their, their quarter is, in a couple of days. I think it's obvious, like no one if a company's doing poorly, you're you're not doing podcasts. Right. So this is that, like now,David Parker  33:00  with so many podcasts though? Or two people?Shawn  33:04  I mean, I mean, it's obviously it's it's a little bit tongue in cheek and you should not take that as investment advice. But there's a there's a bit of a theory like Jeff Lawson,David Parker  33:15  for the big public company toShawn  33:16  Twilio. Oh, shit. Jeff Lawson, CEO of Twilio, you know, wrote monster book and now he's like doing a book tour. Twilio is obviously doing well. You know, like, there's a there's a slight correlation, I guess. I don't know. Anyway, the point is to make it easier for stock analysts to keep up to date on their companies. So right now you're focused on you don't have a theme like there's like celebrities, there's like some people I don't know what the theme of the people is, but if you could focus on on a monetizable niche of speakers then that might work.Unknown Speaker  33:48  Okay, cool.David Parker  33:50  Yet to let you know, the theme is basically software engineers, business people, entrepreneurs, and a little bit of celebrities mostly for SEO juice. But those are the people I generally want to know who are entrepreneurs and software people are generally who I want to I personally want to get notified of certain people when they have a new podcast and like Adam within tailender rich you know, sell things it's like okay, I want to hearKevin Åberg Kultalahti  34:18  but theDavid Parker  34:21  to get high on Google, I want to pump it up with some celebrities.Antony  34:25  Is this riding high on Google? ThisKevin Åberg Kultalahti  34:27  reminds me of like saidAntony  34:28  You said you burns weekend.Kevin Åberg Kultalahti  34:32  I listened to an episode of what's what's the podcast called? It's like tiny seed tails or something like that. And there was this guest who had made like a happy birthday site for like birthdays birthday site for celebrities, where people could look up celebrities. And it was doing like massively well and scoring like, top of Google all All the time, just for. That's crazy. Yeah. It surprised why it surprised me. But it makes sense, though. And if you think about it,Antony  35:13  people so I'm always a tech, the tech partner in startups, right? I'm never the business partner because I don't want anything else wants. And I can't think of things that people want.David Parker  35:25  I was the same way before. And I kind of that's why I went to school, I ended up getting a double masters, because I wanted to learn more on the entrepreneurship side, as well as computer science because I just I can live in tech all day and never do any marketing. And then no one uses my stuff. But I wanted to try to get on that other side a little bit more.Antony  35:44  Yeah. It's a good Yeah, I mean, it's definitely a valuable skill. Absolutely valuable skill.Kevin Åberg Kultalahti  35:48  It is. It is a lot of fun as well, I feel. So with Svelte.David Parker  35:54  I'm leaving you guys, because you guys are a little bit more. I'm on the discord channel. It's so hard to, for me to plug into communities. I think I'm mostly active on indie hackers, and a little bit on Hacker News. But I'm in 10 different discord channels. I'm in 10 different slack channels. How do you guys choose your niche? I just curious, this is me interviewing you. But just in terms of getting plugged in because I would I would love to eventually contribute to you know, actually contribute to Svelte itself as a contributor, you know, on the development side,Kevin Åberg Kultalahti  36:29  or, youDavid Parker  36:30  know, same with like flutter or whatever those would probably be the two that I'd prefer to be able to contribute to if I could ever take the time to do that and give back to the community beyond just building products and be you know, raising developer awareness about these technologies. How do you guys plug in or do you just, you're all in on Svelte and that's easy just to focus there.Kevin Åberg Kultalahti  36:50  I think it's hard. Like, like the like the Svelte discord is probably the only discord that I am all in on if that makes sense. I'm in a couple of others as well like the CSS discord and like. Like some cryptocurrency ones as well. But yeah, it's hard.Antony  37:15  Yeah, I'm not too different, like the Svelte discord is where I spend probably 90% of my like eyesight, I've got a discord my company as well. And that gets tempted my friend Jim godsey. It's a lot less active, right? Isn't he 70s is in there and, and Svelte was 2000, something as to how I keep sort of aware of everything, it kind of comes up. When a startup gets to a certain size that you have to learn about other things, because you really have to pick the optimal solution is gone from building a hobby project in Svelte only and only focusing on Svelte to. Now I build it in Svelte because it is the best of everything I need. But I do need to be aware of how react tackles problems, how view tackles problems, how all these different builders like Webpack and roll them to tackle problems. So it will be mostly Twitter, I would say that, you know, Twitter as my, in terms of social media is purely tech, I don't follow many people outside of tech. And I don't really see many tweets outside of tech, which is quite nice. I really value Twitter for that alone, I get all the updates. I get, you know, crazy stuff from people who are so far from what I do every day, but still in the tech space. That's that's kind of why I like Twitter, I guess. But yeah, it is very difficult to keep track of everything. And you really can't, I think you have to be a generalising specialist which kind of applies to many aspects of work and things but just keep a focus but always be able to be distracted. You have other things in your periphery, I suppose that you can, you can see. But you have to focus nodes become good at something, I think, and you have to kind of specialise in that thing.Kevin Åberg Kultalahti  39:00  Yeah. It's hard. Definitely. Like I think for me, Twitter is also the way I learned about stuff. And maybe I mean, Hacker News as well. It's good morning. IAntony  39:13  read that. I probably should.Kevin Åberg Kultalahti  39:15  Yeah, hacker Hacker News is awesome. I love Hacker News.David Parker  39:19  It's about 80% of my attention Hacker News does.Kevin Åberg Kultalahti  39:22  Wow. Yeah. It's really nice.Antony  39:25  So you could you either get a balanced opinion there or you get sort of what people call it really bad names, right? They call it trash and stuff has kind of like a split mindsets on what hacking is actually is or what it what it brings. Yeah.Kevin Åberg Kultalahti  39:39  You'll have to be critical. Like with everything right?Antony  39:43  Yeah, yeah, especially. What about you, Shawn? Is your aren't for everything.Shawn  39:51  I dabble probably too much. I actually I run my own discord for my book. So, you know, I spend a lot of time in their QA curating Oh, yeah, yeah, I spent a lot of time curating, I guess information and continuing updates for my community members. I'm a little bit into this fault discord as well. I guess I do a lot of my learning through podcasts. So I listened to a lot of what's going on and try to keep tabs. So I'm an ideal customer for, for this genetic, because I am. But I'm also trying to, I guess, you know, I think there's, there's there's no end to how much you can consume. And you need to be more intentional about what you consume. And the best stuff you should try to consume repeatedly instead of, you know, always looking for the new thing. And I think, to me that the Lindy effect is something I think a lot about, like things that have been around things that have been relevant for a while will likely continue to be relevant. And you're the sum total of your knowledge is basically the amount of still relevant things that are, you know, in your head. So I've been I've been building this thing that called Lindy library, where it's basically things that have been things that are three years older that are still relevant today, which I think will likely be more relevant tomorrow. And I think I like that versus a lot of the ephemeral content that it's being produced today.David Parker  41:15  I say, Can I interject and ask what is your book about?Shawn  41:18  Oh, it's about it's career advice. For people going from junior developer to senior developer? I think that's a kind of underserved market. SoKevin Åberg Kultalahti  41:28  not anymore.Shawn  41:31  Yeah, it's just one book. And I don't think I do a very good job of marketing it to be honest. But it's, it's doing fine. It's It was like, basically, my most popular essay is about this idea of learning in public. And so people really want more help on on how to do that. So I have like writing advice, like applying to cfps. I also have like tech strategy advice, like, people that I think developers don't think enough about betting on technologies and the business models of the companies that they work with. So I just give some basic intuition about that. In the book, we also study like career ladders. Yeah, sorry, I don't I don't mean to turn this into ad but like, it's aDavid Parker  42:11  very cool. I definitely had a very difficult time in that transition when I was going from junior to more intermediate and senior. So that's,Shawn  42:19  yeah, no one tells you this when you join the industry, you know, it's it's weird. SoKevin Åberg Kultalahti  42:25  you're just supposed to know.Shawn  42:28  You pick it up, like hopefully you land in a good company with good mentors, but a lot of people don't. So,Kevin Åberg Kultalahti  42:33  yeah, right.Shawn  42:34  They reach out there. So I feel sorry for them. They're like, they're like, Yeah, I don't have anyone else to talk about this with so I'm like, Alright, I'll be your friend.Kevin Åberg Kultalahti  42:45  All right. So let's do you guys have any other questions for Parker? Before we go to unpopular opinions?Antony  42:55  I I'm good. I'm gonna I'm asking some more outside of the podcast actually, when I think of them because it's interesting to me like I used to do a lot of this releasing small kind of projects that I built myself I guess, but yeah, the whole lack of marketing meant they were just literally for me and no one else and I think that I really like how listener it's looking I signed up earlier actually. I meant to mention and I'm really happy with it because I've got my own name, which is something I didn't get and clubhouse and I'm gutted about absolutely gutted about I like to have my name on everything and yeah so listen addict and they're Antony you can follow me You can you can follow other people and see which soon you add itUnknown Speaker  43:39  The nice thing is becauseDavid Parker  43:40  I don't do a tonne of marketing it should be easy for everyone to get their own name sorry nowAntony  43:46  I mean, you know on Twitter right so it can work you know you could be the next foot so who knows all right yeah, so you so I just yeah, that's that's it I'm done. I think happy let's go to unpopularKevin Åberg Kultalahti  43:59  Yeah, and you're the only one who has one this week. I thinkAntony  44:03  I know shocking shocking. Come on people we can we can do better you try harder.Kevin Åberg Kultalahti  44:08  Let's hear it myAntony  44:11  my unpopular opinion is that I don't like their weight. Like what is it and a weight thing in in Svelte the the, like, the templateKevin Åberg Kultalahti  44:21  or the template text for aAntony  44:22  tag? Yeah, that Yeah, I don't like it. I don't like it should be removed. It should be deleted from the codebase like comments and then a major version. IDavid Parker  44:31  only use it once all my code to be To be honest, I end up just doing it most things in the script section.Antony  44:38  I think I think you're doing the right thing. Yeah, you're on the right path. The thing is, right. So the reason I dislike it so much is because you know I've always believed that we follow this pattern, where we try to separate view logic from from logic logic, right view logic should just be rendering something in logic logic that can sit within the view layer. Traditionally write your Svelte is three things in one styling in HTML and code, but you should prepare the data and then iterate over it at max, because I can't see a way you can really avoid iterating over it. But the weight tag is is different. Like it really bugs a trend. You know, Svelte is a very simplistic language, it has very simplistic view. directors like this, it has a very simplistic view things. And the await tag is like an outlier. For me, it's, it's is doing too much, it's doing it in the wrong place. And you can wait things happily in your code and then get the code ready and or get a message ready or whatever. Putting in a template just feels wrong, just just really feels wrong. So yeah, I just I don't want it there.Kevin Åberg Kultalahti  45:43  It's so it's, it's you prefer to handle like your data fetching outside of the template tag, IAntony  45:49  suppose. I'm actually going to in the ideal world, I'd build something and show it right. And the closer I can get to that, the better, right?Kevin Åberg Kultalahti  45:59  Yeah, I'm actually like, speaking of like, separating data, data handling stuff. I'm going to record like a, like a learn with the JSON type thing. But learn with Kevin next week with Luke Luke about like, using custom stores or rather just derived stores to to do data handling. So that's going to be interesting. Yeah, I guess that's one way to solve it.Shawn  46:30  So when Anthony told me about this await thing, I was actually very surprised. I was like, wait, what this is in Svelte, that that must mean that it's blessed. And then and then I realised. So actually, the whole impetus of the data fetching talk that I did on this felt society day that the first conference that we ever did for civil society, was explaining why and when not to use weight, or, or like, you know, the alternative to a weight, including building a custom store, so I can refer people to that video. It's on this fall society, YouTube for that,Kevin Åberg Kultalahti  47:03  I'd completely forgotten about that. But yeah, that was really nice.Shawn  47:07  That one comment from Antony actually motivated the whole talk. And then I was just like, okay, let's just see where this goes. And there, it turns out, there's a lot of different ways to do data fetching, depending on what you want to do. So yeah, it's it's a fascinating topic. And maybe we should take out a weight, I don't know or put a caveat into depth.Antony  47:26  I look forward to your talk on removing comments from your code.Shawn  47:30  is wrong. That's just, it's just mistaken.Antony  47:33  I'm ready for it.Shawn  47:35  I haven't I haven't an unpopular opinion to share this not mine. If, if y'all want to go for it to comment on it. So Devin gave it that I thought I thought this was fire because he says, unpopular opinion. Yes, modules was a bad idea. It has caused half a decade of churn in the JS ecosystem, broken almost every tool, cause maintenance nightmares, for library authors, and for what a different syntax. Common JS was fine. It was just it was this unpopular opinion. And keep in mind, he's the author of parcel. So he knows he writes a bundler. He knows about static analysis. And so he's arguing that like, the typical response, so Okay, me as someone relatively new to JavaScript, I was just told that he has modules were better. And I just like, just take it on faith. Like, this is a big thing that has been in the works. And I once everything will be better once we might get to you as modules. And then here's this guy that this is like, Yeah, no, you know, we could do a lot of the same exact same things that we want to do as modules with common j. s. And, and now we have just like, years of just like, oh, you have to do like double transpiling or like, you know, and then your import systems are broken, like every everything's just kind of like in a weird flux state that we maybe didn't need. So I thought it was a very interesting, unpopular opinion. And I would just send people there, because there's a lot of discussion about this.Kevin Åberg Kultalahti  48:51  Yeah, it's it's I don't I don't know enough about these subjects to to really have an opinion. It just feels right to do the import syntax.Antony  49:04  Yeah, I have to agree. I don't know enough about ESM or anything else will come and yes, really, but I understand that, you know, eds is better for tree shaking, which is definitely a benefit. I just don't know whether that's because somebody made EDS and then a tree shakable or whether there's a fundamental problem with common JS that you can't tree shake it. I just don't know which it is.Shawn  49:27  I mean, so that's why that's why it's relevant to me that it comes from someone who who writes who makes a bundler because he's like, he's basically saying he can do the exact same tree shaking with common GS so we didn't need itAntony  49:39  Yeah, I mean, maybe I don't I don't think parcel prides itself on tree shaking specifically, though, right. And parcel prides itself on ease of use, no setup, just run it and you bundled kind of thing. And so I think that I would probably probably, you know, and I obviously massive bias, but I would, I would go with the kind of rich Harris opinion of esmf And nothing else. And again, I don't know if that's a fundamental thing in terms of how they devote the two things work or whether it's just, you know, I don't know. But I would say that probably among the rich Harris side of the argument for now, just because I think that the roll up is focused on the smallest possible bundle size, and that's very much more appealing to me. SoDavid Parker  50:28  I don't I can't speak to it. Sorry. I'll listen to the talk. I don't need to read anything about this, though, because it sounds interesting. But to be honest, I, I'm used to you know, in Ruby land, youKevin Åberg Kultalahti  50:37  have Ruby gems, you know, you have one way.David Parker  50:39  Yeah, Python is, you know, everybody has their own way. So it's interesting. JavaScript is like, so many ways.Shawn  50:45  So this is the Python. This is the Python Three, two to three conversion of JavaScript. You know, it's, it's just taken way too long.Unknown Speaker  50:54  10 years later, 15David Parker  50:54  years later. I mean, it yeah,Antony  50:58  it probably is.Shawn  50:59  Yeah, pretty much.David Parker  51:02  I mean, I remember when NPM came out, it was at 2000 979 2000. hash. Yep.Shawn  51:09  So as the original email, I found the original email in the Google groupUnknown Speaker  51:12  2009. SoUnknown Speaker  51:13  that'sDavid Parker  51:13  only what 12 years ago. So great. Now we have 15 more years of catch up. I have a separate unpopular opinion I'll throw out. It's it's that generally speaking, you don't need the style tag. Within your Svelte files. 99% of my components do not. And that's specifically because I am using tailwind. I will throw this out there for people who are tailwind haters real quick. I know Java, or I know CSS better now than I've ever known it. Everyone seems to say this is it's the it's the thing for people who don't know CSS, it's actually the exact opposite. Every single class corresponds to one CSS thing. Whereas you know, when I was using bootstrap, I'd write it in you know, button. But I never had to inspect to see why it why it looked nice. Now I know everything looks nice, because I took the time to add that class. And so basically, none of my components have a style tag. The only one that really does is the audio player that I have because it's a custom audio player.Antony  52:19  Interesting. Yeah, I think I think actually, the tailwind thing somebody else who I have a lot of respect for actually very, very good coder, who I thought would be totally against me and tell when really speaks highly of it. SoDavid Parker  52:32  what can I say? I don't think it's for everything and stuff. I it'll be very hard pressed to pull me away from it.Kevin Åberg Kultalahti  52:40  I mean, I'm using it for the new Svelte radio website that I'm currently having issues with because I'm, I can't figure out spell kit because there's, it's not really my fault. I know.Antony  52:52  We make it intensely difficult so that you know people that use it. That's why theDavid Parker  52:57  producer is sapper still.Antony  52:59  Yeah, I should probably I mean, all my stuff'sKevin Åberg Kultalahti  53:02  still I should I should probably convert it to separate for now.Antony  53:06  Yeah. Just Just hold off for a bitDavid Parker  53:08  and separate isn't. By the way, whoever thinks sapper is dead, is still making, you know, pushing things to get GitHub, you can see it. So it's clearly I'm not worried about that.Kevin Åberg Kultalahti  53:18  Yeah, we had last night. In fact, we had we had been on last episode, right? Where we we talked about sapper and how it's specifically not that.Antony  53:29  So yeah. Like we only really we only rewrote our cell to about you know, few couple of weeks ago, to be honest. You know, we're at the point now just people need to upgrade and you know, we've we've been supporting it long enough. But yeah, there's got good longevity in Svelte stuff, new Svelte land. So we've got time for for a pair. Yes.Kevin Åberg Kultalahti  53:50  Yes, we do. We do. All right. So what's this random pick you have for us this weekend?Antony  53:58  Is there ever no random pick? So my random pick is a can opener. Now for those who can see the podcast, which is not the audience sadly, it's a tiny little can opener. It's called an indulgent Nugent, super kin. It's actually from France. And you know can openers there's all sorts of levels of crap for can openers. They're all rubbish. You occasionally find a good one and my favourite one to this point was a basic cheapy supermarket. You know, basic can opener. I found this on Amazon. This this notion super Kim is expensive for a can opener. But this thing opens a can perfectly so you stick it on the side, you start to turn and it pulls itself into the rim. Then cuts the rim but as it does it sort of what I come with the word is but it makes little dents in it so it's not sharp. So when you pull that catalogue out, it's not sharp. It's not going to cut you. You go around the can it doesn't slip it doesn't ever get hard to cut it. Very smooth action when you finish you just turn it the other way just past the turn and it will remove itself from the cam and becoming you know in your hand. It's like man like man this thing is tiny. It is like magic this thing is tiny this thing is probably like I don't know three centimetres like an inch and a bit square. You know even cute because of the handles stuff. It's just it's just great. So you're operating on you know, I know you said you have cats that's why you have well it's because they know we did we didn't fit him we feed him pouch food actually but but now we really liked tuna so we have a lot of tinned tuna and it's just every time it pains me opening candles just we had this very pretty, very posh can opener and it was just rubbish. It got blunter and blunter and it would lose the grip and then it would after you put it back on and once you've lost the grip and a can opener and you try and go with the same bit it won't grip and it won't cut the notch and then you've got a knife you're trying to stamp the top off so yeah, can it can open is way more important than then I thought it would be but I love this one. This is brilliant. So yeah, I'm happy with thisKevin Åberg Kultalahti  56:04  in the show notes soAntony  56:06  stick in the show notesKevin Åberg Kultalahti  56:07  S ean Do you have a pic todayShawn  56:07  there's a I haven't come back to me any any think of whatKevin Åberg Kultalahti  56:17  Yeah, yeah, sure. So my pick this week is the the Bitcoin lightning network so I've been I've been super interested in playing around with Bitcoin and the Bitcoin lightning network makes all these these like problems with with the amount of transactions per second go away so so it's not really an issue anymore, which is cool. And it's just it just feels awesome to like send money across the world in like seconds without anyone like telling you you can or can't do it. Cool feelingAntony  56:53  this is the only way that Bitcoin becomes a reasonable currencies is a lightning network.Kevin Åberg Kultalahti  56:57  Oh, definitely. Kevin, IDavid Parker  56:59  don't want to change the subject completely. I'm not a shill But are you familiar with nano?Kevin Åberg Kultalahti  57:07  I heard about it. David Parker  57:09  Okay. It it to me seems infinitely better than anything Bitcoin can or will put out just because of no tech debt basically. And how it was created to begin with in terms of being a currency versus a store of value which I feel like Bitcoin. Yeah,Kevin Åberg Kultalahti  57:24  I think I think so. Yeah, but I think it's just like the network effect of Bitcoin makes it the thing that's gonna win if that makes sense. I don't know.Antony  57:34  I don't think it's gonna win. I don't think anything's going to end Bitcoin. I think Bitcoin is the React of cryptocurrency. Right? There's there's an opinion really.Kevin Åberg Kultalahti  57:45  All right. Let's have a cryptocurrency discussion another time.Shawn  57:52  No, but I'm actually pretty proud that like, we actually talked about it instead of completely ignoring that it's a thing that we talked about Bitcoin, like in May of last year, and it clearly became a big topic. Oh, okay. So my pick is three j s journey dot XYZ. So it's by Bruno's Bruno Simon, who has his his personal site went pretty viral last year, because it's basically shows you the amazing things you can do with three j. s. And now he's released a course that's only like, I think it's like 79 bucks. And he's just teaching you everything in it. He knows it. It's really well designed. If you ever wanted to learn, like, you know, if you ever get tired of rendering boxes on the screen, this is you want to go 3d. I think this is a great way to do it. All right.Kevin Åberg Kultalahti  58:40  I have a pic. Parker, doDavid Parker  58:42  you have a I have a pic. But I have a quick quick comment to that. I haven't seen that three JS thing. I will check that out. I'm going to do a plug before I do pick on my YouTube channel. I have I think over 100 Web GL videos tutorials. So if you want to learn what three GS is doing underneath will actually rip apart three j s. But in general, how does Web GL work? I have a lot of tutorials on how to do interesting 3d things. If you are going to build something for real, I highly recommend three GS rather than going for that all because it is a lot of work and overhead. Otherwise, there's a reason three JS exist. Anyway, my pick up somewhat thematically with Anthony's was actually in the kitchen as well. I'm not going to go grab it. It's just we have an espresso machine. And since COVID has started it is a saving grace. So just a few 100 bucks. I'm not it's not a two or $3,000 crazy Italian wine or something. But just having a nice espresso machine at home. makes life so much better.Kevin Åberg Kultalahti  59:44  Yeah. Fair enough. It's personal. It's nice. All right. And I think that's it. Thank you for joining us today and talking about listen addict and all the other stuff we we talked about us producer andShawn  59:58  yeah, thanks for joiningKevin Åberg Kultalahti  1:00:00  Thanks to all the listeners, we'll talk to you guys in a couple of weeks ago, yeah,David Parker  1:00:06  thank you for having me. This is great. You guys are fun.Kevin Åberg Kultalahti  1:00:11  Thank you everyone. Bye bye byeTranscribed by
4/3/20211 hour, 7 seconds
Episode Artwork

Svelte Kit Public Beta!

Wooh! It's here. The SvelteKit open beta! We talk about how to get started, what's different compared to Sapper, new features, migration paths. All that fun stuff.Notes: SvelteKit blog post! GitHub Repository Unpopular opinions: Antony: Daylight savings time should be abolished Swyx: Facebooks social media features are actually quite good Kevin: Clubhouse isn't that exciting anymore Picks: Antony: Homethings Kev: CSS clamp() and custom properties,  fluid typography Swyx: Complete guide to accesible front-end components Transcription:Coming soon!
3/30/202148 minutes, 38 seconds
Episode Artwork

Svelte Language Tools with Simon Holthausen

Note: This was recorded on February 19th. Sveltesummit CFPs are currently closed. Sponsors: Support Svelte Radio by leaving a review on iTunes and/or visit our support page.Description:We sit down with Simon Holthausen to talk about the Svelte language-tools, TypeScript and all that juicy stuff! Some notes Description, show notes and transcription coming soon. This was accidentally released a bit early. Sorry about this!- Language Tools repo- Simon on GitHub- Svelte Component TemplateUnpopular opinions:- Antony: Case-insensitive file systems are bad- Simon: I use Windows- Shawn: Don't use throw unless you want the program to crash! Errors are not exceptions!Picks: Kevin: Yubikey 5C Nano Antony: Clean Co - Low Alcohol Spirit Shawn: Princess Bride Home Movie Simon: Fasching - German festivals Transcription:Kevin Åberg Kultalahti  0:00  Hello, everyone. Welcome to another episode of Svelte radio. Today we have yet another guest surprise. We always have guests these days. But first, some introductions. So I'm Kevin, I run a site called Svelte school. And I'm heavily involved in Svelte society, and help out around the Svelte community.Shawn  0:22  I'm Shawn, I am still in the process of switching jobs, but hopefully building a Svelte app in production from a next startup. And I mostly should post on Twitter, first of all society. We also did just launched the CFP for the Svelte summit conference that is going to be happening in April, I think, and I'm very excited about organising speakers for that.Antony  0:46  I'm Antony I'm the ccfp og which is a booking system for tourism leisure. I'm also a Svelte maintainer, alongside our guest today, who is Simon halt Hauser. And Simon is the I've got it. What can I say is he's the he's the person in charge of language tools. He's He's the code here behind that is absolutely on fire at the moment. I would probably say it's one of the most active sort of segments of the spell organisation. So all credit to him. And the community, of course. So Simon, I'll let you continue with your introduction.Simon Holthausen  1:22  Yeah, thank you for the warm words. I'm some. I work as a software engineer at a company called xo do software development and consulting. And yeah, I, I don't know more by accident than anything. I stumbled into the spelter world got really hyped. helped out getting the language tools, VS code extension forward and yeah. Now I'm a Svelte maintainer, like Antony. And yeah, really? Thanks for having me.Kevin Åberg Kultalahti  1:57  Yeah, exciting. So you're you're also known on the Svelte discord as Doom Doom, right?Simon Holthausen  2:03  Yeah, right. It's my handle. Yeah.Kevin Åberg Kultalahti  2:05  Yeah. Where does that come from?Simon Holthausen  2:09  Yeah, so my, my my original nickname back in the days when I was in puberty, was Hitman Faker. I thought that was a very cool name at that time. And after puberty was over, I thought, No, that's, that doesn't work where email? So I thought, Okay, I need a new nickname. And I was humming along like them to them. What kind of pig? And then I thought, Oh, why why not take this? This? Dum dee dum? Yeah. And so it was just like, it's called loudly fire in German. So.Antony  2:49  Wow. That was loud.Simon Holthausen  2:53  Louder. The word for writing something down? That sounds exactly like you.Shawn  3:02  Automatic. Yeah.Antony  3:06  Yeah. I was gonna say it's more like Him. There's another word for isn't there. When a word sounds like the thing that it describes, is that Onomatopoeia?Kevin Åberg Kultalahti  3:19  This is above my paygrade podcast. Alright, so so TypeScript, what's are sorry, language tools? What's going on there?Simon Holthausen  3:30  TypeScript is a big part of language tools. That's definitely right. So yeah, I was, I was here on the on the show about, I don't know, almost a year ago. And I skimmed through some of the issues that we close since then, or we got since then. And yeah, so what changed between then and now. So it's, overall, we just worked hard to get rid of all the edge cases that people might occur when they just coding. And I think, especially all these edge cases, when you when you're in the zone, and you're coding, and then your intelligence does something stupid, that can really put you off, and we are trying really hard to minimise that. new things are about. We also added a lot of new things like we now have auto completion for events. So if you define event by create Event Dispatcher from another component, you get auto completion for that in the component that uses the components. You can get comments for the props and events. So if you hover over it, you see the docks, there were some new refactoring commands like extract into function, which works similar to the JavaScript or TypeScript one. Cool. We got a simple Extract into components refactoring. So you can select a part of a component in the markdown, which you want to extract into a new function. And it just can right click, and then there should be a extract components, add components command in the context menu. And then you can specify what's what's, what's the name of the component, and then it will transfer that HTML into the other component, and write the input for you.Antony  5:34  So just just for the somebody who's let's pretend I'm completely uneducated in TypeScript, not because I am no, I definitely am. Imagine if you're also completing events. And you've got like a series of events that click and you've got things like, key up and key down. Are you maintaining a huge list of events that match the Svelte API? Or are you using, say, the type definitions within Svelte to generate those auto completions? How does that how does that work?Simon Holthausen  6:00  It works. Actually, it kind of is like that. So that there are two parts to that. One is that we use the HTML language service that VS code uses for its HTML intelligence. And that one defines a lot of those events. So if you do auto completion, you'll get that from that. But we also have to define and keep track of a really big list of all these events inside a type definition file, so that we can show arrows, like, okay, you're using a new event that doesn't exist. So for that we have two people, ever growing list of events.Antony  6:47  So you have this duplicate list that matches Svelte, right? Yes, we do. So is there a way to Is there a way to maybe like, use that if that list existed a bit within Svelte itself? Is there a way to use that list from there? Or is that is that not a thing? That's possible?Simon Holthausen  7:04  So there was, I don't know some kind of Jason definition, we could definitely look into generating something out of that. Yeah, that would be possible.Antony  7:13  That'd be interesting PR, because I've, I've seen the code that adds those events to elements inside Svelte. And it's kind of like a big if statement, really, I'm guessing it's done that way for efficiency, in terms of execution speed. But what I might say is that maybe if we put that into a JSON file and had it as a reference we could look at maybe that would be sort of work better that people save some of that manual overhead.Simon Holthausen  7:35  Yeah, yeah, definitely. There are also some other parts like the all the warnings of the Svelte compiler can put out, they are not in one place right now. So, and you cannot turn silence all of them. So, like the accessibility warnings, you can turn off with sobelle to ignore comment. But that doesn't work for all elements. And I think we could look into to get it to work for more elements, or maybe all of the warnings.Antony  8:12  I think this is an open, there's an open issue that's kind of being completed over time, which is to move all the errors and warnings into a single place. So I think that might help with that. And I think as interment in terms of silencing the accessibility areas, I know this, I know, there's two ways there's a fired, and I can't remember the reason behind it. But there's basically some of them are belong, they belong to Svelte and can be satisfied roll up and some of them don't belong to Svelte and can't be. And I can't read the exact, exact nature of that, I think maybe one of them. Some of them come from acorn, or they come from some other internal project that we don't have the same level of control over. But yeah, definitely, I think, I think things will move in the right direction to make that maintenance task easier. which requires,Simon Holthausen  8:57  definitely,Shawn  8:58  I have a bit of a confession, which is I've never used the refactoring commands in VS code or TypeScript. So like, this this stuff with a with the whole, like, refactor out into a component, or was the other one that you said,Simon Holthausen  9:14  extract into function something, you select some count block and say, okay, extract that into a function that works in TypeScript, JavaScript, and they are now also works in Svelte files.Shawn  9:27  Yeah, and it's something that I think the React world and view also have, it's just that I've never used it like am I supposed to be right clicking things all the time and because I just copy and paste. Like, I I feel like there's productivity tips that I that other people use that I don't know about or I don't use. I get this question. You know, how often How often do people use it? How do you How often do you use it?Simon Holthausen  9:53  I honestly I use it all the time I do so many extract into function extract into constant All over the place. I don't know. I, I couldn't live without these refactorings today, I don't know. So much nicer. The same with format. Yeah, ever since I started using prettier I, I am no longer able to format my code by hand. It's I I'm able to.Kevin Åberg Kultalahti  10:19  Yeah, I have a love hate relationship with prettier, mostly because I'm stupid and can't configure it correctly, probably. But that's another discussion.Antony  10:28  Yes. It's a weird one because I think that I mean, I used to use typed languages a lot. And I really do I do miss the kind of extracting functions and stuff. I sort of resorted to doing it, Mandy now because I don't use TypeScript that much he used JavaScript. But it would be really convenient to start using this again. So I don't know that the list of reasons maybe I should switch to TypeScript just keeps growing, isn't it?Simon Holthausen  10:50  Yeah. But these things you can use in JavaScript too? I think. So these extracts, constant function Do you could use those two in JavaScript? SoAntony  10:58  but this there are some you can't use, right, because they need a bit more. Yeah, I think definition.Shawn  11:03  Yeah. So you know, there's been a lot of talking about moving between TypeScript and JavaScript. There's been a lot of discussion about how in Svelte kit, you're using just the GS doc version of TypeScript. Is that true?Unknown Speaker  11:16  Right, well, yes.Shawn  11:17  I mean, it Yeah. I mean, what are your feelings on that, Simon? And is that something that more people should explore?Simon Holthausen  11:24  So I think I'm on the other side of the spectrum, I I really like TypeScript. And I'd like to use it everywhere. And rich, just has a very different opinion on that. So he went with a j. s doc approach, which is perfectly fine. For me, as long as I, I don't know, I, I didn't work myself yet that much with the Svelte code. So I cannot say, Okay, this works just as well with as it worked with TypeScript. So I cannot speak from experience for that. But I think some some part of it will just feel more tedious to me than they would do with TypeScript. Especially around those things like, okay, you have to now define your types inside j. s. Doc. And I'm just more used to typing the types right after a lot in line. And I think that, for me, at least, I mean, it's all coming down to habit and what you're used to, but for me, it just reads better. And I think some some things like generics you cannot describe in a good way with J stock. Or maybe that changed. I don't know,Antony  12:53  I think we had we had this, you know, it was originally in TypeScript, the whole thing and, and then rich one day decided that TypeScript was kind of becoming, you know, is problematic for him, as he was changing things quite a lot. And he decided to remove it. While he sort of, you know, he offered up the notion that he'd remove it. And then there was a big a big discussion that lasted days, about, you know, yes, and no, and, you know, there was like, half people in the camp of the maintainers in the camp of no and half of them in Yes, and then lots of I'm ignoring lots of lots of work to kind of try and make it workable. But then, you know, in the end, we like, let's remove it for now and see see how it goes without it, just just whilst it's in this kind of state of massive flux, and then we'll read it later on. And I remember I mentioned to somebody on Twitter that we're gonna, you know, we're going to re add it, it's not a permanent state. And then rich popped up so well, actually. And now he's talking about, you know, making it all as projects at work, just use the desktop stuff, or whatever it is. So I mean, yeah, I don't know, I'm not getting involved. Because I mean, I don't have enough education in in TypeScript to really know how it feels to write the whole project in TypeScript. But I will leave that to just sort of work itself out organically. I think it'll be interesting to see. To see the result of that,Kevin Åberg Kultalahti  14:08  that the other people fight. Yeah. All right. So before we go on, I'm gonna read a couple of sponsors bots, which aren't really sponsors, bots, but Alright, so first up, you can now support Svelte radio directly. And by doing so, you'll get access to video versions of the podcast or you'll be able to listen a couple of days early to the episodes. So if that's interesting, you can head over to Svelte slash support. And, yeah, the the support is much appreciated. And then, if that's not something you're interested in doing, you can always leave a five star review on iTunes or whatever podcast platform you're listening to. also helps out a lot. And yeah, that's it. Whoo. Whoo indeed. All right. So so so what are what are things are new in? In the language tools side, you you've, you've, you sent us a list here a couple of days before about some things. And there's there's one thing called Svelte component typed. So So what's that?Simon Holthausen  15:22  Yeah. So that's a new addition to Svelte core. There were quite some requests about, okay, how do I now I can use TypeScript inside my side components, but then I'll have to transpile it to JavaScript to provide it to others as a library. But how do I write type definitions for that? So I need some type definition file. And I need to write down the types and they are and how can I make it so that the language tools will understand those types and will tell the user Hey, this prompt does not exist, or this event does not exist. And so Svelte component type does exactly that. It helps you writing type definitions. So you just do, okay, exports class, then your component name extends spell component type. And then there are three generic parameters, props, events, and slots. And you can type type them all. So we can say, Okay, this, it has these props with these types and these events with these types and same for slots. And that that really should help library authors to to write type definitions more easily.Kevin Åberg Kultalahti  16:38  Nice. It's it sounds like a big, big addition. compared to before, yeah, definitely.Shawn  16:45  Yeah. I have a question. I have a question, which is like, Where's this documented? Because I feel like people should want to look at code examples.Simon Holthausen  16:53  Yeah, documentation is a big, ongoing issue. We, we also talked internally about this quite a lot already. It's, it's, it's kind of all dependent on each other. So we definitely want to redo the docs and also enhance the docs, because there's quite a bit to know about TypeScript specifics by now. And, yeah, we definitely have to put them on the official side. And so that's definitely missing. It's, there are dogs for the inside the language tools. But I mean, they are not directly explorable from the from the official side. So yeah, that's definitely still missing. talks are, yeah.Shawn  17:39  Sounds Do you listen to Svelte radio, then you don't need the dogs? Yeah, right.Kevin Åberg Kultalahti  17:43  Radio is the dogs. Right. SoSimon Holthausen  17:45  listen to the dogs.Kevin Åberg Kultalahti  17:50  Maybe that's maybe that's the next big thing. Like audio documentation.Shawn  17:55  Yeah, actually, there's some people in the AWS ecosystem that actually do like dramatic readings with their dogs. Live Stream, and then there's like, some calming music in the background, and then you just read from beginning to end actually, you learn quite a few things.Antony  18:08  I really like that idea. That's a really good idea. Dramatic readings of anything is great, but documentation is even better. Oh,Kevin Åberg Kultalahti  18:16  yeah. Speaking of like, traumatic. What do you call it? dramatic readings? Yeah, so I've been reading these. These fantasy books. I think I picked one of them, like a couple of episodes back maybe 10 episodes. Yeah.Shawn  18:29  Brandon Sanderson.Kevin Åberg Kultalahti  18:30  Yeah, exactly. Exactly. You're so good. It's so much better than like a regular audiobook. I cannot recommend it enough. Sorry. A bit of a tangent there.Shawn  18:39  No, it's good. Yeah, like I like to hear that people are still enjoying, you know, stuff that he picked in. Yeah, it's like a double pick.Kevin Åberg Kultalahti  18:48  Yeah, yep, definitely. Alright, so. So this thing about documentation, maybe that's also something that's missing a bit in general and Svelte. And I think we say this quite a lot. And it's, it's like, General examples are like, videos by people doing different things. Li Hau has been doing great with the outdoor stuff lately. Those are awesome. But maybe maybe should be priority to get something out on how to do like a proper library with TypeScript and everything set up somehow. I know there's the there's the Svelte template, repo, I think a component. Yeah, component of that. Yeah, exactly. And I haven't touched that in ages. But I assume that can be improved some bit. Maybe it already has TypeScript out of the box. And I'm just not aware of that.Simon Holthausen  19:46  There are some open prs to get some some something automated so you can compile to J s from from tears but I don't know if they have landed yet. Because there were some concerns about usage and just in general, yeah. Documentation how to how to use it edge cases when it doesn't work. Yeah. There are only so things one can do at a time.Kevin Åberg Kultalahti  20:16  Oh, yeah, definitely. I'm not saying you should do it to say someone should do, or if it was theirShawn  20:24  issue 29 on the component template repo, where people are discussing some of the details. With publishing these things. It is pretty complicated sometimes, especially if you need to take in an account SSR.Kevin Åberg Kultalahti  20:36  So I think I always like end up scrapping my TypeScript plans, because because I always have trouble setting it up correctly, getting it to work properly with everything else. Probably my main problem with it,Simon Holthausen  20:51  that was also one of the main reasons why rich fruit out of swell kit, because there were just so many problems with setting it up correctly in the context of a mono repo. And so Oh, getting rid of tooling is always I mean, no tooling is better than or no build step is better than any pizza. Yes. Yeah. Main notion that I think,Kevin Åberg Kultalahti  21:19  yeah, definitely. We we actually. So couple of people created like a Svelte kit incognito Discord server, where we could discuss it without, without like, like, like spamming the regular discord with questions and stuff. Because we know that people don't really want to listen to socketAntony  21:42  stuff all the time, right. I like that, like these people, whoever they are.Simon Holthausen  21:49  Yeah, it's really it's really crazy to me how many people are jumping on it? so early? It's it's really fascinating. Yeah.Kevin Åberg Kultalahti  21:57  New, shiny. Very exciting, though. Anything else about like the Svelte component template we want to discuss Probably not. There's also preprocessor. Support. Right? The or sorry? source map, supportSimon Holthausen  22:11  source map support. Yeah, that's, that's another thing that landed recently. So Svelte has much better source map support now. And that means that if you now get an arrow, and you're using TypeScript, for example, you will get the error pinpointed to the correct location in the Svelte code, which wasn't the case wasn't always the case previously. And yeah, that that was really a huge community effort. So I don't know it's it was Timmy trash and me law house. I think that those were the handles. And they basically did all the work. And so huge props to them for bringing that in.Kevin Åberg Kultalahti  22:56  So like source maps, and and like obfuscating code on the in production, that's something I've like, I've seen a lot of people there, they're asking like, oh, why can I see my my Svelte code in the in the browser on my site? And I personally, I think it's a good thing that you can see it because then you can like, look at how someone else built something. But I feel like this this thing that some, some people think that if you obfuscate the code, you can like figure it out, like someone can copy it somehow. But that's obviously not the case. Right? I'm curious about like, how does source maps does? Does that affect anything else? Like loading times and stuff like that? in general? I don't know enough about it. But they're just loaded. If if you have an error, right?Simon Holthausen  23:49  I think so. So so once there's something where the source code location could be looked up, then I think the browser's will try to load it. If it's there. So you if you turn off source maps for your production boats, and you don't get 10, don't deploy the source maps along with with the generated code you? Well, you won't see ya the origin, the court and in the process.Shawn  24:16  Yeah, so I've actually had to wrestle with this for a previous project of mine. And there's, there's the security angle. And then there's the the data angle that data angles, pretty simple. This first map is not downloaded unless you have the browser Dev Tools open, which means your dev. So it doesn't make sense to send a source map for a regular user who, you know, has is not going to use it. But having source maps in production is a open question. I think the majority consensus is in favour of it. But there's some people who have the security argument, right, like, if you can see my source code, then you can figure out how my API works. Bah, bah, bah. The argument against that is that if you're relying on that amount of have security by obscurity and you're not being secure at all, your API should be immune to that. And you should, you should not care if anything on your front end is seen by attackers, because that's the easiest part to see. So the argument for putting source maps in production is that when you're developing and you see a bug in production, you can actually, you know, open, open up your dev tools and actually see see what's going on with that. And the other, there's a tool that I'm tracking, which is, which actually helps you record it's like noon, I don't know if you guys have seen that loom or all these recording tools, bug reporting tools, it records a video, but it's also a custom browser, that plays back the JavaScript code executed, including the source maps. So we have source maps, you enable dev tools like that, that just record all the data passing through, you can pause, and then you know, check, you know if this, this is what I expect it to be, and then continue add comments. And I think it's all enabled by having source maps. So we need to I guess, normalise shipping source maps in production.Antony  26:05  Shawn, I'm interested, just 10 genessee hit Tab congenitally here, and generates What do you say? gently? Yeah. I have no idea. I this is not an English language podcast today. I know. I'm too tired. I'm just too tired. No, it's fine. So what I was gonna say is when you say you're tracking something, what does that mean to you? Because it's interesting, as I see, you track a lot of projects.Shawn  26:37  So this comes from my background as a finance person, I have investment theses that I that I track, which is like, I think that this could be a huge thing in the future. And I better start collecting data points on this. Because it takes a while for for something, especially things which are in early stages, when you like not really sure if like you should, it's worth your time. It's it's just it's just worth like looking out. Because it just means that I think that this could be big, it's That's all it is. Okay, and I have a mental register of like, you know, last month I saw this this month, I saw that it could it could, it could just not be a thing. And I might just forget about it. But you have to choose what you track and what you ignore, because there's too much to, to know everything about. But I think it's a good idea to not just give up on tracking everything, you should have some idea of like, I think this could be huge. So because you can bet early on it.Antony  27:30  I wondered if you had like a, like your own registry of things that you're kind of actively watching or if it's just mentally in your head that there's different aspects, butKevin Åberg Kultalahti  27:38  I'm imagining like a, like a JavaScript, like, like a node script that like opens 50 browser tabs?Shawn  27:47  I do. I do actually want repos. I think one of the underrated features of GitHub is that you can just like snoop on notifications of like activity going on in different repos. And yeah, yeah, I think it's a good way to track what's going on without being super involved. But if you see a bunch of activity, you know, like something's going on.Antony  28:07  GitHub is kind of missing it missing a trick. And and, you know, maybe maybe not Frydman sort of this is for podcasting. I don't think it is. But I wonder if like the stars feature of GitHub could be a lot better. You know, because you tend to start stuff. And that's it. You start everything. And I've started hundreds of repositories over the years, but it's just a big list. And I can't remember what what's in there what I want to search for. If I could categorise that better. That'd be great. better way of sort of slightly different way of seeing things.Shawn  28:34  Yeah. Well, everyone started the language tools repo.Unknown Speaker  28:38  Yeah.Shawn  28:41  I do that. Like I even even start private repos of my coworkers. So like, I'll go on to my, my co workers repo, and they'll just be one star. But like, at least they see that like, you know, I'm giving them props for like working hard and something. That'sKevin Åberg Kultalahti  28:55  nice. Nice, nice, like, surprise. You open your prayer repo and like, ooh,Shawn  29:01  it'd be I mean, it's so easy and whatnot. Yeah. I have a question about the refactoring the component refactoring thing. I think there is a movement within Svelte Oh, at least like, Well, okay, I saw, I saw Dan Lieberman from the React team, constantly making digs, and Svelte about how we only have a single file component. And I was, and I think there is some always some discussion about like, multiple files in one component. I don't know how I feel about that. And I was wondering if you had thoughts, because it'll be easier to refactor things into multiple into multiple components, if you could just keep them in the same file.Simon Holthausen  29:35  I personally don't like that. I don't know. I don't have an I don't have an issue with many files. And if each file has about, I don't know, 20 lines of code. I'm perfectly fine with that.Antony  29:48  Yeah, we I think I'm the same at the same opinion that you know, my ID or VS code makes it so easy to just manipulate a bunch of files at once. I can open them all the same screen I can play around. with them, I would rather have that than pollute the Svelte API with a kind of template tag. The joy of Svelte is it it detects in your components, when you have a script tag, and a style tag, and everything else is HTML. And that's really nice. You know, you don't need these that react style empty tag that you have, or a wrapper component or a root component fragments or so on your fragments. You don't need any of that complexity, mysteriousness, things that break CSS Grid, for example, because you can't, you can't have a direct child have something to make the elements within sight, something agreed or I ran into a problem like that once with those template tags. So I would I would much rather have it just as it is now simple and take the hit that Yeah, you can't put 100 components in a single file. Sure, it might make prototyping very, very slightly slower. But I think that Svelte itself makes prototyping faster. So therefore, you know, it's, in my opinion, at least, it still seems that you're going to get a speed and ease benefit of prototyping and Svelte versus anything else. You know,Simon Holthausen  31:10  ya know, what, that you know, that you know, about the extract component command, you can just write your file. Exactly,Kevin Åberg Kultalahti  31:21  I'm actually gonna start using it today.Shawn  31:27  Simon, since you're sort of the resident TypeScript expert, I was wondering if your thoughts on type scripts, recent features in general, like, there's like the template types, I don't know, they're very fancy.Simon Holthausen  31:42  I really love data types. That's, that's, it's a very, very, very interesting feature, the template type templates,Shawn  31:49  can you describe them for people who may not know what they are?Simon Holthausen  31:54  Basically, it's, you get more, a whole lot more dynamic with typing. And you can describe how a type will be converted to another type, but not from, but not the values. But the keys of those types. So I don't know, for example, let's say you have an interface with Prop A, and you want to define another interface, which has Prop A change, so and you want, you don't want to duplicate that. So you just want to append change, to every prop. And you can do that now with these template, literal template literal types. And it's it's a really interesting feature, I don't think that a lot of people would use it. But I think for library authors, especially it can be really liberating to use that, because it opens up quite a lot of doors for more generic typing. And I also thought about how we could maybe use that in the language tools. I hadn't haven't thought too deeply about it. But there could be some benefits to using that for us as well.Kevin Åberg Kultalahti  33:11  So is that is that coming in the 4.2? Release? Or is that?Simon Holthausen  33:15  I think it's already it's already available? 74.1? Yeah. Yeah,Shawn  33:21  it turns people that people have done really crazy things like, implemented JSON parser with it, andSimon Holthausen  33:30  it's crazy. Yeah, what you can do with it thatShawn  33:32  basically turns the TypeScript type system into like, a full, I guess, like string parsing, string generation thing. Whereas, you know, in the past types of types would be pretty static. like you'd define them upfront. And that's about it. That's all you can use. Or you'd have to use a generic and call them weird names like T. ButKevin Åberg Kultalahti  33:53  it can't it kind of sounds like like when when you see these, like, really cool CSS things that people do. Like they like build complete games and just CSS.Antony  34:04  Yeah, the counter CSS counter.Kevin Åberg Kultalahti  34:07  Yeah,Antony  34:08  I saw Ram. I saw a CSS file in the day, which is like a bunch of balls on a grid that go up and down like that. And it's very little CSS there. It's really impressive.Kevin Åberg Kultalahti  34:17  You can do so much in CSS now. It's amazing. You canAntony  34:22  you can it's kind of scary, because it's one of those points where it starts to cross over into something that is a language in its own right. You know, and it is the language anyway. But I mean, it becomes it blurs the lines between where JavaScript ends and CSS starts. And I don't know how I feel about that. Really. I quite like the single thing for single purpose style things.Kevin Åberg Kultalahti  34:44  Yep. All right. So you you also had a point about hopefully some incoming tears support for es lint for these lint plugin.Simon Holthausen  34:56  Yeah, right. And by now it actually landed. So you Please feel free now has Ts TypeScript support web assembly now in what does that mean? That means that with some slight adjustments to your SP es lint config, you can now get es lint checks in your Svelte files if you use TypeScript, which wasn't the case before. They were all wrong. And so before that it only worked for JavaScript inside Svelte files. And now it works for TypeScript files, too. It's great for TypeScript inside Svelte files. Yeah, so that that landed just about two days ago, I think, at the time of this recording. It's nice. I guess it's a little rough around the edges. It's there may be some things that don't work as expected. Someone already did a PR to fix some of those things. And but, uh, yeah, it's it's there, and you can finally use it inside sidebars. So, yeah. I think that's what quite a lot of people. I don't know, in these issues. Some people were like, Oh, I'm blocked from using Svelte until this TypeScript support lands in Yes, lint. I cannot live without that. And soKevin Åberg Kultalahti  36:23  yeah, that's great. It's kind of like those people that were blocked from using Svelte before TypeScript. So any anything any other like, cool things that are going on in the language tools.Simon Holthausen  36:38  So so one big thing that we haven't solved yet is that if you if you are inside the Svelte file, you get all these nice IntelliSense features. And you can do a I don't know, you can refactor a prop. And that prop will be renamed in the other Svelte files to, etc. Or you can rename a variable and it also will be renamed in Ts files, which use that. But that doesn't work once you're in a TypeScript or JavaScript file. So once you're in JavaScript, or TypeScript in a file of then just yeah, VS code or the the others just don't know, what's this Svelte file extension? digits just cannot really deal with that. So that crossing the boundary of getting Svelte support in the context of JavaScript or TypeScript files. That's, that's something we haven't accomplished yet. But we we've picked up work on that. So Pushkin has has done some exploration on that lately. And so we're starting to explore that. And hopefully we can, yeah, show show something in that regard. Soon. So what what what that would mean is that if you do a refactoring of I don't know you have, you have a store in a JavaScript or TypeScript file, and you want to rename that store. And with with the with a plug in which we will write for that, you will then would get the Rename working in Svelte five, two. So those will be not only renamed and other j. s, or Ts files, but it will also be renamed in the Svelte files. Or you can say, Okay, I want to see all all usages of that spell component that I have imported as a barrel export, for example, in my TypeScript file right here, and you can just say, okay, find all references inside the TypeScript file. It will also show you the references inside Svelte files, all these things. So just this crossing the boundaries, this is, yeah, this is the thing work in progress, work in progress, right. And the other thing is for for TypeScript, specifically, just getting better. So right now, you you cannot really define, you cannot define generics for props or events, something like that. So I don't know you have a Svelte file. And then you have a prop of a certain type, but you don't care about which type it is. And you have an event event that will be of the same type than the Prop, but you don't know in advance what type it is. And generics would be really good for that. And that hasn't happened yet. So support for that hasn't landed yet. And yeah, fleshing out the API is a ongoing progress to and yeah, hopefully we'll, we'll get agreement on that someday and then that will be part of the Enhance TypeScript support to. Nice. Very cool. So those are the two big work in progress things, I would say. So,Kevin Åberg Kultalahti  40:12  so looking into into like the Svelte kit future, how do the language tools work together with Svelte kit in the future? Have you guys discussed anything? Like, will there be specific features in the VS code plugin, for example, that makes things easier and spell kit or something like that?Simon Holthausen  40:32  We haven't discussed about this on that level yet. But from a general perspective, it should work just does today with smartphones. So you can use smart kid, just like you can use any other Svelte related project with the language too. So there's, there's no problem there, there may be some special tags that you can set which we will add support for in the language tools. I don't know. But or maybe one could think about, okay, if someone is in a script, context module, and he's starting to type, export const. And then we can maybe provide an auto completion for the loads, interface, something like that. But yeah, those would be things we could could add. But in general, it should just like, work out of the box. Just it works with regular spot.Kevin Åberg Kultalahti  41:32  Yep. That's great. All right. Any Any other questions or thoughts about TypeScript? No. All right. So let's, let's go to the next section of the show, which today is domain squatting? So like a couple of weeks ago, I got this weird email from from some company in Shanghai, about some. So I think this was like a domain registrar in in China that emailed me and asking if some random company that tried to register Svelte or, and Svelte, that cn and all these weird variations of the of the server Svelte radio domain name, asking if they were affiliated with me, which I promptly replied and said, No, I have no idea who this is. Or, yeah. That's fine. And then I got like, a another email, which just said, like, yeah, we're not gonna care about what you say. We're gonna register them. Anyway. But so.Shawn  42:40  So yeah. We have a petition, or do we have friends in China? Like? Yeah, IKevin Åberg Kultalahti  42:46  don't know. I don't know. If you if if you are the one listening to this, someone out there in the ether, maybe contact us and we can. I don't know. Talk Talk. See?Shawn  42:58  Yeah, it's useful in China. We definitely want to talk.Kevin Åberg Kultalahti  43:01  Exactly. Yeah. So that's, I was kind of funny thing that happened. Alright, so. So next up, we have the controversial opinions. Right. Controversial opinion. And I'll let the Antony go first, because he, he's the one that started the segment file. Yeah, I've been bit by that'sAntony  43:22  gonna make your life. Oh, yeah. Yeah. And people getting bitten by it all the time. So people on Twitter, complaining about it, they're losing hours or losing days of time, and it just shouldn't happen at all. And the reason I think that the Mac has the case, insensitivity by default is because it's kind of a historical thing. I think the previous file system before the current one had that had the insensitivity. The new one supports case sensitivity is Unix based, of course it works. But to retain compatibility and predictability, they've made it incentive by default. And I know for a fact that Adobe Photoshop and another Adobe tool, they don't work if you have a case sensitive file system. So you're actually encouraged to format insensitively, which is just infuriating to me. So for developers, that's obviously really super annoying. Definitely not an ideal situation to be in. And I just think I just think that, you know, these tools should be forced to update and Max, you do their standard thing where they they go, Well, this is the future, this starts happening. And that's that. And am I surprised they haven't done it with the case in insensitivity and windows, I mean, witnesses law schools Anyway, let's face it, but basically windows, I don't even think and maybe you can format NTFS to become cases, too, I'm not sure. But it's definitely not encouraged. It's not even common. I can't even imagine a system where that's the case, because I don't think anything would work properly on it. But yeah, so anyway, my point is specific to better cases. tivity is better. They are different files is a different ASCII code is a different byte. You know, it's not at all the same file name, even for human, if it reads the same, it's not the same file. Yeah. So that bad. Love it.Kevin Åberg Kultalahti  45:11  Yep. That was nice, nice, nice rant.Simon Holthausen  45:17  I think at least in this between us for you, you have a popular opinion right there. Yeah and unpopular.Kevin Åberg Kultalahti  45:25  Something like that.Antony  45:26  I wonder how the two Mac users I wonder how that's formatted there?Unknown Speaker  45:30  That's a good question.Shawn  45:32  I just never rename a file. So I don't have to do.Kevin Åberg Kultalahti  45:36  Yeah. I actually, I did run into this issue, like, not too long ago, like, I saw a file that was a lowercase and it just irritated me so much that I had to, like, fix it.Simon Holthausen  45:51  Yeah, we had the same situation with a readme file. Someone made your case, and the other one was all uppercase, and it causes so much confusion.Antony  46:03  Are you are you on Windows? Yes, I am. Some.Simon Holthausen  46:07  Maybe that's my windows know that. You said Oh.Shawn  46:15  So why should developers use Windows?Simon Holthausen  46:17  Why should I honestly, I just haven't used Linux or Mac yet. I refuse to go into Mac land. I don't know. It's just the lock, in effect. seems too big for me. And it's also twice the money for everything. Yeah, the performance with these m one chips sounds sounds promising. But apart from that, I don't know. I just haven't encountered any performance issues coding wise. Now I think that I guess it just has also gotten better over the years for Windows. And if you really want to use Linux, you can just use the the Linux subsystem for Windows. So you can basically have a Linux inside your windows and instal nodes and all your stuff in there and run it from there if you want to. I tried it out. But yeah,I don't know. I had, it didn't give me the benefit. It just worked. Well, enough for me on Windows. SoAntony  47:26  yeah, yeah. It's not Yeah, it's not the same that the substance is obviously not the same. And Windows is definitely better than it used to be. I only really use Windows now when I'm installing a laptop to sell or something like that. Or repairing someone else's computer. It's still To me, it's a bit chunky dunk is why I'd call itUnknown Speaker  47:46  Shawn conducted onAntony  47:48  like, an extension of the word shonky, which added if it's a common word, but it means like a big fat cap, a bit sort of thrown together, in feel it feels like a sort of patchwork quilt of stuff over the years piled up, especially when in comparison to Linux. And I think like, you know, I can see it as somebody who has used Windows and Windows only that it works reasonably well. Right. It's it's sort of straightforward. But you know, having moved over to Linux, probably 14 years ago, now, I think the UI in Windows is incongruent, compared to the one in Linux, like, everything looks the same. in Linux, it's nice, it's consistent font sizing, it's consistent UI. You didn't have these random tools by all your Wi Fi card manufacturers that pop up and try and take over your Wi Fi. Setting the controllers. It justKevin Åberg Kultalahti  48:35  sounds like you've had just like a pirate who are really bad experiences with it.Simon Holthausen  48:39  Yeah, I for me, definitely. I don't know. IKevin Åberg Kultalahti  48:44  I, especially my familySimon Holthausen  48:46  reasons for not going to Linux is for me is the UI. So? I don't know, it just looks so bad. I don't know.Antony  48:57  I mean, that don't forget the role, like, you know, probably five or six mainstream users for the next year.Simon Holthausen  49:00  That's true. I mean, I just be complete ignorance on my side. And there are some beautiful Linux desktop you eyes.Antony  49:10  If you haven't used it is fair, like, you know, especially when if you were to just start using it one day, you'd probably find it extremely infuriating. It took me eight months of forcing myself to use it before I started to love it. And then now I'll never go back. It's it. It's it's a long journey, like a mindset change from Windows, I would say.Shawn  49:29  Any, ever question as a follow up question? Do you use edge chrome? The same as on Windows, right? for work?Simon Holthausen  49:37  for work? I use Chrome, but I really thought about switching to edge just because it's chromium based now. But in private, I use Firefox. Oh, yeah. Very cool.Shawn  49:50  Can I ask this because the reason I ask is because like, I actually tweeted this a while ago and it was pretty funny. This is the full stack Microsoft challenge because you're already using VS code. You TypeScript, you're using GitHub. And then the you know, then there's a bunch of others that you can use like Bing, OneDrive, Microsoft to do Microsoft OneNote. Azure, of course,Simon Holthausen  50:09  Microsoft Edge.Shawn  50:11  your laptop could be surface, your phone could be surface duo. And then the big one is a gaming mic you can use you can play Minecraft on Xbox. That's There you go.Antony  50:23  That is me for Windows. I really feel that. That's mental. Yeah. Yeah. I mean, I have to say that, you know, for example, I would have probably, historically never use anything. Microsoft base, but you know, vs. Code is fantastic. It really is good. I used to use probably atom I think before that. And it just moved to VS code. It's fantastic. So there's not you know, they're, they're not the company used to be, and they definitely do some good stuff. It's just for me when this is one of those things,Kevin Åberg Kultalahti  50:51  you know, all right. Other unpopular opinions?Shawn  50:56  I've got a quick one, I guess. Yeah, I've been learning goal recently from a new job. And I realised that other languages handle exceptions and errors differently than JavaScript. And I did not know that there was any other way to do this, because my only prior exposure was Python and JavaScript. And they treat them the same the exact same way. But in go, or let's say, in rust, you don't really throw unless you really like, shit is hitting the fan and the error, the programme needs to end right now. Whereas in JavaScript, it's pretty normal to throw whatever error you want, right? And then you just expect someone you document that someone above should catch you, you expect someone to catch you somewhere, and then the programme is going to recover and continue from an error. And so I, I realised this when I yeah, I was just like, you know, exploring, like, what is what's the difference between errors and exceptions, like, I don't know, if you guys have ever thought about it,Antony  51:51  I have thought about it. Because in Java, where I originally came from, there you go, it's two very different concepts, right. So it's an error, sorry, an exception is something quite normal. It's an exception to the flow of the programme or the circumstance you're in. And you can even do exception Driven Programming, which I used to do quite a lot where you just have, so Java has very good exception catching, it doesn't have like JavaScript, we have to inspect what kind of code it is, or read some text of the message. It has explicit types around what you're throwing, so you can make a catch date with multiple catches, and just save this type to this, this type do this. So an error in Java is the thing that if you throw an error in Java, your programme quits, that's the end, right? And error is critical is your system is always never used them. Yeah, when you're programming regularly, you never really use them, you shouldn't use them, especially web apps. But for an exception exception is quite a normal thing. And it literally means the truest term, it's an exception to the flow you expect to be happening.Shawn  52:54  Yeah, so I mean, that that was what it took me a long while to actually get there. Because I've never used Java. And then the other thing that was confusing was go actually names them the opposite way around. So exceptions are errors, and then errors orAntony  53:08  panics. That's complex.Shawn  53:13  Really, really screwed me up. But anyway, the the unpopular opinion is you should not use throw in JavaScript, unless you can really, really avoid it, you should use you should return an error. Or you should return in some sort of error object. I see Simon, give me a thumbs up that.Simon Holthausen  53:27  Yeah, definitely. ThatAntony  53:28  is a hard a hard wiring, rework of my brain if I have to do that.Shawn  53:33  Because it's normal to throw but we should not be randomly knowing like that. Yeah, it's not it's an abusive throw.Simon Holthausen  53:39  I mean, that, yes, at the end, for example, functional programming with this, either. So you either return the normal thing or something, that exception so so to speak. And then you're forced to handle that all the way up the chain. But I think that's also why it hasn't gotten so popular. Because if you have to explicitly handle it every time, which is generally a good thing. I think many people are just lazy and say, Okay, I'm just gonna throw a try catch somewhere very Yeah. up the chain, and just deal with it there instead of having to pass around this either. All the way up. But I think I think would make for much, much more robust code, and more predictable coders think if you if you're programmingAntony  54:33  it, yeah, I mean, if you're writing a language, like you said, you know, if you make it too different to everything else out there, you split the camp into two types of people as those who will adopt it and change that programming habits which should be few. There are people who will just ignore it completely because it's so different to what they used to. And then there'll be the fanatics who absolutely just love it. The fact is everything differently.Kevin Åberg Kultalahti  54:55  They'll just again, be a small campus and just describe the the Elm language Quite well,Antony  55:00  quite possibly I've not looked at quite possible,Shawn  55:04  either or maybe.Kevin Åberg Kultalahti  55:05  Yeah, no nuts. Yeah, butShawn  55:07  you know. And then, for me, the final realisation was that anytime you throw within the anything async. And the moment you have, you know, you call promise and you forget to catch that error just like goes out the window you've never handled that doesn't exist.Antony  55:24  And most the time, I think,Shawn  55:27  once I actually got mad at JavaScript, I was like, wow, like, this is the reason we have shitty programmes in JavaScript is we don't we don't have really good discipline around error handling. Anyway, that's my that's my unpopular opinion.Unknown Speaker  55:39  You should you should stop.Kevin Åberg Kultalahti  55:42  Alright, yeah, I have. I don't have an unpopular opinion. So I'll hop right on to the pics. And good my pic today is a yubikey five seed nano. That's a mouthful. It's like one of these security keys that you can plug into your computer. And so you use that instead of a two factor authentication. Or it I guess it is your two factor authentication? Let's see. There you go. And I haveAntony  56:11  Yeah, yeah,Kevin Åberg Kultalahti  56:12  I don't think so. So I have mine. plugged in all the time it takes takes up like no space at all. And instead of having to, like bring up my phone and get this, Google Authenticator, authy or whatever app you're using, you just touch the device and you're, you're locked in, which is nice.Antony  56:31  What if you What if you lose it? What happens?Kevin Åberg Kultalahti  56:34  Yeah, that's a problem.Unknown Speaker  56:40  Yeah,Kevin Åberg Kultalahti  56:40  no, no, no, but there are solutions to it. I just haven't really, like,Shawn  56:48  you know, either. Sorry for them. Some people cut out the tips of their thumb and then put their yubikey there. So you just plug it in.Kevin Åberg Kultalahti  56:57  That's disgusting.Antony  57:00  Crazy. My friend actually did that when he was when he was like, 16 or whatever the first drive. He dug, he dug the palm of his hand out and stuck an RFID chip in there so we could lock his car by waving at it.Kevin Åberg Kultalahti  57:12  No, I mean, it's the future. cyberpunk future. So just gonna prepare for this. All right, any other pics? You guys?Antony  57:23  Yeah, my pick is so I do I do enjoy, run quite a lot. And I think rum is a wonderful drink. I really like it agreed. And the only problem with rum of course is it's full of alcohol. And unless you're a pirate, you can't really sit around drinking it all day. However, I've recently discovered, there's a whole explosion in the UK of spirits that don't have alcohol in them. So you can get loads of different gins lots of lots of white spirits, you can get sort of gins and vodkas that have, you know, they kind of have sort of plant based stuff in them and they flavour the drink a bit a bit like alcohol, but it quite tastes like alcohol if you drink them need their tastes absolutely vile. I found one recently called clean R, which is basically a sort of alcohol free rum. It's 1.2% it's not alcohol free, but it's 1.2%. That's so interesting. IKevin Åberg Kultalahti  58:11  read this in the in the docs, and I thought it was like some weird cleaning product.Antony  58:17  It's not I mean, it's maybe maybe it's a body cleaning product. I don't know. But it's Yes, it's a rum rum style or rum based, or I don't know what they call it like it like a rum alternative, I suppose. And if you again, if you drink it neat, because you have to try it neat. So it's like it just tastes like water, which is very odd. It's like drinking shots of water. Like that's very strange. But when you mix it with Coke, it really does emulate that kind of rum and coke tastes really really well so weird. And I think it's because it's actually mostly fragrance. It's like It's like it gives it that kind of smoky tobacco we kind of currently smell and that obviously part of your taste is smelling it and it works really well. It's almost like drinking rum and coke even always has that kind of alcohol that you get. So I was quite impressed with it because a lot of these these new on the market and alcohol free drinks are just terrible. seedlip especially is absolutely vile is disgusting. Even if you mix it with what they say you should mix it with it tastes like absolute rubbish. So I'm really happy with this clean code clean our run type spirit, which is just fantastic.Unknown Speaker  59:24  Nice. Cool, cool. Cool.Shawn  59:26  I got a quick one if somebody's still thinking of one. So it is The Princess Bride home movie. Which is I didn't I didn't know about this but during the pandemic, the a lot of celebrities wanted to encourage people to stay home. So they actually recorded sort of word for word performance of Princess Bride but like on their personal cameras with no props, like it's very like crappy quality but with all the stars that you might see like Diego Luna and Jon Hamm Don't ever don't i don't even know like, it's like it's like the most number of stars you've ever seen in a single movie. And then they reenact it Princess Bride. It's pretty funny. It's a classic movie if you haven't seen it already. And I just really enjoyed it. It was one of the only good things that came out of kwibi which is the very short livedKevin Åberg Kultalahti  1:00:16  mobile Oh, that was the network. Oh, right. The moment the mobile like,Shawn  1:00:20  video work thing, TV network thing that Jeffrey Katzenberg, very arrogantly raised 2 billion for and burned it to the ground in two years billionKevin Åberg Kultalahti  1:00:28  $2 billion on a startup. It's amazing.Shawn  1:00:31  And yeah, it is pretty funny. Like his his arrogance, but like could be produced this thing. And this thing is hilarious. So there's the one good thing that came out of quibiKevin Åberg Kultalahti  1:00:42  gonna check it out. Right, let's pick. Do you have something fun?Simon Holthausen  1:00:46  Yeah, my pick is not a thing. But it's a bit. It's an event. It's Fasching. So it's, it's Fasching in German? It's it's roughly carnival.Unknown Speaker  1:00:58  whichSimon Holthausen  1:00:59  hasn't happened this year, of course, because of COVID. But I don't know, as a kid I was. You just dress up you you? Didn't you dress up as something else, like a cowboy or something. That's what I did back in the day. And it was always really fun. And I mean, over time, that excitement diminished a little, but it was always really fun to to at least go to these parades where they had all these waggons where they have sculpt to make make fun of politicians or things. And that all that hasn't happened yet. Not yet. But this year, and I don't know you just know that what you miss until you don't have it. So yeah. I really hope that by next year, this time, we could have fasching again and yeah, so that's this is my pick this day.
3/24/20211 hour, 1 minute, 59 seconds
Episode Artwork

Ben McCann on Sapper and SvelteKit

Ben McCann joins us to talk about the next version of Sapper as well as SvelteKit. We touch on migration from Sapper to SvelteKit, what's going to happen with Sapper as well as some good news for developers using Webpack.Notes: svelte-loader rollup-plugin-svelte Unpopular Opinions:  Code comments stink! Tailwind is hard to read Static site generators are becoming obsolete Picks:  Kitty terminal Tado Smart Heating Narcos Mexico Audacity Transcript:Kevin Åberg Kultalahti  0:00  Hello, everyone. Welcome to another episode of Svelte radio. Today we have another guest for you all, but first introductions. I'm Kevin, I run Svelte radio and Svelte school, and I'm involved in the Svelte community in general.Shawn  0:18  I'm Shawn, same here, I guess. I don't read anything. But I guess I've been working on recently the Svelte actions package, trying to have a good set of defaults for Svelte to export. So it inspires people to use actions more. That's me.Antony  0:34  I'm Anthony. I'm a CTO of biank also stopped maintainer along with our guests today, which is Ben McCann, who is also Svelte maintainer, a very, very recent one, in fact, not not recently. It's been a while now. So Ben has come in on the back of a huge amount of prs. And he produces them so fast. And he's really pushed the development of stealth itself, but also sapper significantly forward. And yeah, what else? What else is this? There's a lot to Ben. He's extremely polite, nice. And I really, really like that. It's quite refreshing to find the person. And oh, I have to Ben.Ben McCann  1:13  Yeah. It's great to be here with you all today. Thanks for for having me on the show. So how I get so much done, I don't have a day job right now. So that gives me a little more time. I started a start up a few years ago. And so I'm an entrepreneur, and I'm in between companies right now trying to figure out my next one. And, you know, I picked up Svelte to kind of refresh my tech skills and our startup, we were using Angular and don't want to do that again. So it's trying to figure out what's new in the landscape, and hadn't been coding for a number of years as a more of a management role. So I just want to kind of get caught up on two things, and really enjoyed been using Svelte these past few months,Shawn  2:02  I was just just curious how you first heard about it, because you know, it might someone in your position, you might just go for react as sort of the the most popular framework of the day.Ben McCann  2:13  Yeah. So I mean, one of the ideas that I was experimenting with was for a content based site where I thought that this speed was going to be really important, and performance was going to be really important. And so I really liked that with Svelte, you didn't have to download a runtime, like you do with react. And so, you know, the initial page loads were a lot faster. So that's kind of how I got involved. And then, you know, with snapper, there were a lot of other really nice performance improvements. And those were some of the the first things I started working on when I got involved in sapper. So, you know, one of the things that we did was we added preload headers. So when you first visit a page will fetch all the assets that you need for that page. So instead of having to wait for if one script depends on another script, instead of having to wait for the first script to run and fetch that second script, the page will automatically fetch both of those at the beginning. And so we we kind of crawl your dependency tree and make sure that those are all fetched at the beginning. And then, you know, it's also got CSS code splitting, which is something that, you know, had a few bugs in the past recent releases getting that all worked out. But I think that's really gotten to a very nice place now, where we have, you know, it's always had JavaScript code splitting. And now the CSS is really, I think, a lot easier to manage as well. And so with all that code splitting, you know, it's a really nice performance benefit of using sapper.Antony  4:00  So what the one thing I want to ask him, as I mentioned, the intro, intro that you you were intrapreneur. But also, I believe, and I could be wrong here. But I think you're also a VC of sorts. Is that right?Ben McCann  4:10  Yeah, I've been doing a bunch of investing as an angel investor. And so I've invested in probably about two dozen companies at this point.Antony  4:20  Wow. Very cool.Ben McCann  4:22  As far as I know, none of them use Svelte but I'll spread.Kevin Åberg Kultalahti  4:27  I gotta push, you gotta push for for Svelte.Antony  4:31  Cool. Any, any, any successes? Yeah. Those that Funchal,Ben McCann  4:35  um, we actually pretty. One of the first companies we invested in pretty interesting company, they're doing water propelled propulsion in space. And they just announced that they're IPL ng, so they announced that late last year and that should happen sometime q1 we thinkAntony  4:57  very cool.Kevin Åberg Kultalahti  4:58  Wow. I wonder how that works. Yeah, that's it. Yeah, that seems crazy. It's,Ben McCann  5:04  it's got a nice a lot of nice benefits, like a lot of the chemicals that are used for propulsion, traditionally are very toxic. And so that's not not probably not the main benefit of doing this, but it's a nice side benefit. So the idea is basically that, you know, if you're going to launch a satellite into orbit or something on SpaceX, they kind of drop you into a number of like default orbits. But then if you want to get to your own custom orbit fill, fill act is like a shuttle to get you to your final destination.Kevin Åberg Kultalahti  5:42  That's cool. All right, so sapper. Is that point? 28. Right now, is that that's not the last version. Right?Ben McCann  5:50  So we've got one more, at least in the works. Zero Point 29 is coming up soon. And, you know, obviously, there's there's been a lot of talk about Svelte kit. And so that's where a lot of the development focuses right now. But in the meantime, there's still a lot of prs that we've been getting for smaller issues in sapper that we wanted to try to get in and get another release out. So I think, you know, probably the biggest highlight is for all our TypeScript users. we've, we've gotten, I think, probably like four or five changes in two separate 29 for TypeScript definition improvements, which will be a really nice quality of life improvement for our TypeScript users. TypeScript supports pretty new within Svelte in general. And so there's there's a lot of other places in the Svelte ecosystem where we've been making a lot of TypeScript improvements as well. But But sapper is definitely one of them. And then, you know, I think the other place in in sapper zero point 29, where we've seen a lot of improvements are in the router. So a lot of fairly minor bug fixes. But But things that that are just kind of nice usability improvements. There's been a couple scroll tracking bug fixes that we've gotten. And actually, you know, seeing those come in, kind of was a motivation. We ended up rewriting the entire scroll tracking in Svelte kit. And so, oh, wow, those bugs are not in Svelte kit. But more importantly, there's there's a couple edge cases that sapper still has, if you like navigate off the site and come back, the scroll might not be exactly where you'd expect it. It works pretty well, in sapper today, but but in Svelte kit, I think we've taken care of all the different edge cases, though, that we knew about.Shawn  8:05  So, so I'm gonna, I'm going to be the voice of the people who are less in the weeds. And since we have with, you know, with two people deeply involved in this critical week, we have a high level, what is the difference between separate socket? Like just, you know, like a recap, because I think it's helpful for listeners.Ben McCann  8:24  So I think the biggest difference and you know, feel free to jump in here, Anthony, to with your thoughts. But I think, you know, the, the biggest change in my mind is the developer experience, you know, Svelte kit is built on top of snow pack and ESBuild and so you're gonna see compile times be a lot faster. And that's something that's a problem in larger separate projects. You don't notice it necessarily when you start out as a new user with Sapper. But when you start to grow your projects, some of the compile times with separate can get to be a bit longer. Our hope is to fix all of those issues and make it a really, really smooth experience with Svelte kit.Antony  9:11  Yeah, I think I think I agree with that entirely. That that's probably the biggest benefit. And it's definitely the one that I'm looking forward to the most, which is so so for sort of context here, we have some pretty big sapper applications. And a 1.1 of them was taken two minutes to build when you're first booted. It just runs the dev environment, which is obviously really bad for local Dev. We low times work 20 seconds or so which also kind of sucks. And I did actually nail that down recently, very recently to I was using Svelte feather icons, which is it is a tree shakable library of icons, and but there's probably like 400 icons in there. Svelte will still compile every single icon every time you use that whole library. So if you've got like other libraries that use it as well or other modules, it's going to come pile all up all the icons few things a couple of milliseconds, but it builds up. And I basically took that library. And I did, I did deep imports as rich Harris. And in fact, the author suggested, I also then made my own little cut down version of that library. And it took it took my build time down to six, a sixth of its original build time. So it's now 20 seconds to start. And it's a big application. So that dev experience that alone has made my whole life a lot easier. Svelte kit, it should be like microseconds, right should be so tiny to get the application up and running. We already seen him in salt kit and snowpack itself, changes you make reload the instant are always you know, you always don't think it's happened because it's so quick. So absolutely 100% that is the biggest benefit. I think the second benefit, which is also the place where kit came from stock it came from other is. So when you build an application sapper, everything is kind of treated the same way, you're building a dynamic application, you can export it as a static site. But you've got these two options. And it's kind of one or the other, right, there's no middle ground. The idea with kids is that it will build the application in a more optimal way. So you'll break up bits that keep well for you break up bits that are static and make them as static as possible, it will take bits of dynamic amount of dynamic as possible. And it will take up bits that sort of in the middle and do the most optimal thing. So you'll end up with application that sets itself up in the most optimal way for your what your application is, we should should make it really, really nice to host and also cheaper to host and also more efficient to run. And I think on top of that, then I suppose the other benefit to kit is the modularity, which we're trying to break into into modules where a sapper is kind of an all in one. And then the final thing as far as the adaptive. So the idea being it's, it's serverless first, but not restricted to serverless. So you can host it any way you like. But it's designed so that you can host it on the serverless platform, which is probably the ideal hosting environment for this very, very easily. The adapter defines your entire deployment layout. So there's a multitude of adapters and you can basically just pick your adapter, run the run the keyword is currently adapt, and it will convert your application into something that's suitable for you want to host it. And I think those are probably the top the top five benefits as to how close you are to the project right now. We're obviously all close. But rich is the one who's currently using it production. And it's very much of course, his project. And so I think that when it when it comes to pizza, which will hopefully be soon then there'll be some really interesting things that probably we didn't even even have that yet.Kevin Åberg Kultalahti  12:40  Now I've been I've been using socket today actually to to build the new Svelte radio website. And it's it's been great. Except for for like the the issue of no documentation. But I mean, that's expected, right? Yeah, it took me it took me a while to figure out that fetch was actually something that came with a load function, rather than using like a this.fetch thing.Antony  13:08  So I would say currently it is I think this that's one of the things that sort of, what do you do with fetch and load? how's it gonna work? This is one of those discussions that kind of goes round around a lot. I know Ben's been involved in discussion, actually.Ben McCann  13:18  Yeah, hopefully, we'll have some documentation coming soon. I actually have drafted a set of documentation, just based off the sapper docs and then updating it, and I'm sure I, I missed some stuff. So we'll need the community to give it a look. And find all the changes that I missed. But so I've sent that out to the other maintainers. And for review, and hopefully, you know, I don't know if we're ready to publish it yet. But at least we're working on docs internally.Kevin Åberg Kultalahti  13:47  Yeah. That's great.Shawn  13:49  It might be an interesting step to publish the docs without publishing the code. It just to get like feedback before you actually, you know, 1.0 the code. Yeah. might be an interesting. Yeah, we'reBen McCann  14:00  definitely I think, gonna need some some feedback on the docs. I think, you know, there's hope there hopefully, pretty close. But there's, there's enough of them that I'm sure there are things here and there that we've probably missed.Antony  14:15  So yeah, I mean, so, so interesting, the interesting approach that that will be like a blackbox approach where you've got the product and you've got the documentation, but you've got no access to the source. So you only have the documentation to look at to figure out how things work. That's actually an interesting technique. I don't know whether it would be really frustrating or just, you know, would be a really good exercise. But yeah, I guess, I guess, if you don't have the source code available, you have to rely on the docs. And that's that could work. No,Kevin Åberg Kultalahti  14:43  I mean, it should for that should force the docs to be really good, though. Right?Antony  14:48  Well, yeah, absolutely. Absolutely. They have to be, sir. We could discuss it maybe when our next maintainers meeting is but we can we can bring it up maybe.Ben McCann  14:59  Yeah, I think I One of the things I'm really most excited about with Svelte kit as a maintainer, which probably doesn't, doesn't sound exciting as a user is that we've now got a configuration file, which is like I kind of a, obviously, basic feature. But, you know, we had a lot of different prs in sapper, that that are in the queue that depended on adding some new configuration option. And we really wanted to find a way to do this holistically, like a lot of these different PR suggested different ways of configuring your project, or whatever new option they were adding. And so we didn't want to have, you know, half a dozen different ways of enabling any new feature. And so now we've kind of got one standard way of doing that with Svelte kit. And I think that'll block a lot of development efforts, where, you know, we we wanted to come up with a holistic way of doing it before merging all these prs. And so, hopefully, a lot of the prs that are in the sapper queue, we can revisit with Svelte kit and, and get those in.Antony  16:10  And I think I think in terms of curation and the original, the Holy Grail for rich is no configuration at all right? But I think he's realised now, that's probably not a possible thing, because there is, people have different use cases. And the project is quite widely used now. And I think that one of the fallout we saw from not having a config file is that every other project that uses Svelte has a config file. And they all use different formats and these different ways of doing things and different namings, different variables. So we've created the Svelte kit config file, and almost defined the format of what Svelte config would look like. And it's natural to do that, I guess. But what it means is that you'll see a few of the projects around snow pack being one of them. Were there config file format for Svelte actually changed based on the ideas from Svelte kit. So, hopefully, yeah, we'll have reached this kind of we've kind of converged on this final config. layout as much as possible, at least anyway.Shawn  17:04  It's very cool. This question actually makes me ask another dumb question, which is Svelte kit seems spiritually much closer to Svelte than Sapper was, like, separate seemed like a different project altogether, like it could have been run by a different maintainer is, is that, you know, the config files is named svelte.config.js, right? Something like that. I think I think, right, like it's not svelte kit dot config.js, like this is Svelte like we are we always, you know, essentially, is the meta framework, kind of just like just merging into the framework, the framework itself.Ben McCann  17:41  I mean, I, I think that though, they'll always be separate code bases, and like, you should still be able to use Svelte without using Svelte kit. But, you know, for for folks that are getting started, we want to have kind of a blessed path that makes it easy to get up and running. If like, if you look at the Svelte FAQ today, there's like a question that says, you know, what routers should I use with Svelte? And there's like, half a dozen different recommendations in there. And it's, I think, hard as a beginner to know what the differences between all those routers and which one you should use, and in the future that that answer is going to be Svelte kit. And, you know, we want to make sure that there's kind of one way to do development that works really well that everybody's, you know, put their eyes on and made sure that we've made it a good experience. And so you'll still be able to do all the things you can do with Svelte today and still, build your own Svelte project without using Svelte kit. But, you know, for for folks who just want to get something running without having to, to put a lot of thought into having how to put all these building blocks together, we want to make that really easy. Kevin Åberg Kultalahti  19:02  So So this, this makes me think of of like an sp a mode? I think that's been something that that's been missing in sapper for forever, I think. Right? So is that something that you could do with just one of those adapters and Svelte kit ?Ben McCann  19:18  I don't know if it'd be an adapter or a new option, but it is something that that I expect will be coming we've, we've got a ticket internally to build that. So nice. And I actually had a PR to do that in sapper. And one of the things that got hung up on was, you know, how, how do we want to configure this and so I think that that questions, but I'm blocked now and hopefully that's a feature that you'll see coming.Antony  19:44  I think one of the one of the problems with sapper was that people really didn't know how it related to Svelte at all. Like Sean says, it's almost like a different maintainer. It's, it's a different project. And so I think one of the ideas was Svelte kit is That we bring together. It's a kitten round Svelte rather than an application framework that happens to you. So if that makes sense. So it's a series of tooling that allows you to take Svelte from a UI framework or UI language or UI library, whatever you want to call it into something you can build a full app with. Separate was separate app builder. But it wasn't always clear that that's what it was for. And yeah, like Ben said about routing and stuff. It was confusing. It's got its own router. Can I use it with externally? No, you can't because it's so cool to SAP because it does. SSRS pa and if you baked into the product, so yeah, so Svelte capable. The idea being it's like an extension of Svelte It's a superset of Svelte It's a thing that sits around Svelte. Now the caveat to this, of course, is that there is still a notion of a Svelte kit thing, so you have like attributes prefix with Svelte kit, things like Sapper noscroll translate directly to Svelte kit, noscroll. I can't recall that actually, Ben. But the notable attribute is prefixed with the kit, no tap notion because it's specific to to kit and it means nothing outside of that.Kevin Åberg Kultalahti  21:12  I've actually been looking at the changelog. There's not much in there in the in the small kit one, but it's fun to see when when new new versions go out.Antony  21:25  The Svelte kit changelog, yeah, is thatKevin Åberg Kultalahti  21:29  it's in the it is yeah, you can find it on. IBen McCann  21:36  actually didn't know there was a change log. I've never seenKevin Åberg Kultalahti  21:41  nothing in it.Ben McCann  21:41  Yeah, it might not be updated.Kevin Åberg Kultalahti  21:46  Well, I mean, it seems to be updated. I should find it like,Antony  21:51  we're on like version zero point next 37 or something right now, I think and it doesn't get released that often. So it's I mean, it's it gets it gets a new master branch every like, I don't know.Kevin Åberg Kultalahti  22:04  Yes. So let's see the latest. latest patch notes are prevent infinite loop when fetching bad URLs inside error responses. And handle assets path when pre rendering.Antony  22:20  These are quite recent. I think. This is like a leak. I thinkUnknown Speaker  22:29  PMP.Ben McCann  22:32  is, is it's set up with changesets, and it's probably auto generating the change log basedKevin Åberg Kultalahti  22:42  on unpkg anyway. It's fun to see. Oh, yeah. Even though it doesn't make much sense.Antony  22:49  That makes sense. Yeah. The changelog is checked in. Yeah, fair enough.Shawn  22:53  All right. I've got other a couple others have begun to read questions is the goal. So is the goal to one to one parody with sapper? Or do you think we'll have to lose anything? I know there'll be a migration path. But let's talk about, you know, what's the trade off? Like what are we? Are we not losing anything?Ben McCann  23:15  Yeah, I think that's been one of the hard things with the development of sapper is we we do still get prs to sapper. And, you know, we've we've been trying to merge as many of those as we can, at the same time that there have been some that have proposed new features. And I think, like, we don't want to be in a situation where people adopt a new feature on sapper. And then it's not present Svelte kit. So, you know, trying to be really careful that any changes that we make and sapper, we're also making an Svelte kit. And they're, they share a lot of code, but they're also different code bases. And so some of those changes are easy to port, and some of them are not. And so, you know, it's been kind of a case by case basis to figure out like, which are ones that we can easily add to both versus like, which are things so we should just wait for small kit and add them there. Go Yeah, IAntony  24:15  think I think Sapper is in a kind of like a maintenance mode, isn't it? It's it's in a mode where we still support it. We're still obviously interested in fixing bugs and things because people rely on it and it's time to migrate. But the idea being a migration path is so smooth that anything you can just go straight into kit. And we have that many features. That's That's the goal. Anyway,Shawn  24:38  the thing the thing I've never been sure I've never used ESBuild. I've like looked at the docs, but I like you know, we're essentially switch switching. You know, the bundler from either roll up or whichever we call it Webpack to ESBuild. And like, Is that is that a smooth process like don't we lose stuff like You know, whenever I want to use something in my tool chain, like I know, I can either pick Webpack or roll up and it'll probably work, but not have when it comes to adopting iOS build I have no idea.Ben McCann  25:12  Yeah. So the if you use sapper today, it's actually invoking your builder for you. And it's, it's tweaking the builder and hidden ways to which it so like sapper has its own internal plugins that I'm trying to remember exactly what they do now, but they, you know, I think a lot of this stuff around like, like they inject your CSS files into your JavaScript files, and they do code splitting on your CSS. And then they it pulls out information about your build in order to build the preload headers that are in sapper. And so we're we're in kind of this tricky middle ground right now where you can configure your build, but you don't have complete control over it and you're not executing it. And I think that, like there are parts of that, that hopefully are a little better structured in Svelte kit, you know, so like, one of the things that people have been asking for for a long time, is the ability to do basically what we've called adapters, and Svelte kit, where, like, we've built these adapters to allow you to host on all types of different environments. And so like, you know, we want to allow you to host on an environment that doesn't require node, for example, or like we want to allow you to export to static pages, or vercel or now are these different hosting platforms. And I think that was kind of tricky to do before. And so there with Svelte kit, there are still parts of the build tooling that are not directly managed by web Packer roll up because they're, they're managed by our bundling process. But now we have first class support for all of these different platforms.Antony  27:14  I think, I think also when Ben talks about internal roll up plugins and internal web pack plugins inside inside sapper, and it's true what what you see in separate as a Webpack config or a rollup config, it looks a lot like a rollover, Webpack config, but it's not really what it is. It's a configuration file. That one has some separate stuff injected into the output so sapper tells it where to put its files. And but also the whole thing, exports things rather than actually run through roll up and exports things that sapper then augments, and then that gets pushed into roll up programmatically, right. So it's all kind of an illusion, really, with sapper, it's very, very heavily tied to the internals of how it works. I think it's the size one there's reasons for that. And with Svelte kit, it is yes build but actually one of the core concepts of snowpack, which is what what is build is running through snowpack defines a no locking strategy. So you're not locked into using the snowpack when you build a snowpack project. Therefore, you can remove snowpack and build it where else you want. There's no nothing specific there to snowpack. And that stays true for Svelte kit. Not that you can report snowpack necessarily, but because it's quite built in because there's a saw, but what you're getting there is you're getting as billed for your local dev environment, why should developing but when you pump the build out in the side, bundle from production, you're using just pure roll up and all Webpack whereas I think I think it's got broad support. Now I don't know if it'll have Webpack support, but it will have just pure output via roll up. And also as another kind of layer of indirection here, the esbuild Svelte, the esbl plugin uses the roll up Svelte plugin. So therefore you can actually adapt that because it's still compiling Svelte through rollup through your Svelte, right. So you're not really escaping from from bundlers in the most common sense, rollup is still there in order that you can pull things into you as build, and they get converted to JavaScript. And then the JavaScript is what is built is compiling. But that's all in depth. So when you come to produce a build for production, you're using roll I believe it's a plugin now and so your final production build is still a rollup build. He probably even more of a rollup build than Sapper uses right now.Shawn  29:41  That's actually a really nice Yeah. Thank you thatBen McCann  29:44  there were also I think in sapper some sometimes some confusion around like do I do things and roll up or Webpack or do I do them and Svelte pre process. So you know, if you want to use post CSS, for example, Like there are multiple ways of setting that up, and some work better than others. And so, you know, hopefully some of those stories we can make be a little bit clearer with Svelte kit. Yes, I think that's one of the things I'm most excited about in Svelte core is source maps for pre processors. So Svelte has had source map support from the beginning. But if you want it to use preprocessor, then you lost source map support. It was something that that just got implemented and one of the recent versions. And there's a number of kinks that we've been working out over the past few weeks. And so, you know, that's been entirely driven by the community. You know, there's a couple of folks, Mila, who and D massage that I'm terrible with the usernames, I've probably got this slightly off. But there's a lot of issues today where like, if you try to use TypeScript with Svelte, where the source map support just isn't great, because TypeScript support with Svelte is so new, I think that you'll see that get fixed in the next couple of releases. So there's going to be the next release of roll up plug in Svelte and the next release of Svelte will both have additional fixes. You know, that that supports getting to be fairly good today. But there are places where things are off by a line here and there, which makes it difficult to use. And so that's gotten really quite a bit better over the past weeks. And that's going to be really exciting for a lot of users.Kevin Åberg Kultalahti  31:43  That sounds great.Shawn  31:44  I actually had no idea I always saw it like in the pre process code. There actually is a way that you can, you know, modify the source map and send it back to Svelte. I had no idea that didn't work.Ben McCann  31:58  Yeah, so there is and so, roll up plugins, Svelte executes the preprocessor and executes the Svelte compiler, and it needs to hand the source map from the preprocessor to the compiler. And that was like a one line change to make, but it just hadn't been implemented yet. Because it was really a pretty new feature. And so that was kind of like one of the final pieces that we need it. Like we built these features independently, and then we just needed to hook them up. And so that's going to be in the next release. Overall, a plugin Svelte 701 or seven, one our I don't know what the version number is going to be. But yeah, after seven.Shawn  32:46  So so there's only only programmers debate what comes after seven.Kevin Åberg Kultalahti  32:52  So this is like, there's a lot of overlap here. With the language tools. It sounds like are you working like closely with with Simon and whoever else is working on those?Ben McCann  33:05  Um, yeah, I think that things for this particular feature, like they, it hasn't really overlapped with language tools a whole lot. But Simon's helped a lot with a lot of the TypeScript improvements. Like in Svelte core, he's been adding type definitions. And so I think when you combine these different features together, the the type definitions and the type definitions that are in sapper as well, and in the source map support, the TypeScript story is going to really start to be a first class story and become a much, much better experience.Kevin Åberg Kultalahti  33:49  That's awesome. A lot of people want one TypeScript. From what I understand. Yeah. You know, Ron, man. Okay, so. So there's this Svelte loader loader thing was started Webpack thing.Ben McCann  34:08  Yeah, so I think probably all the maintainers use roll up, which means that unfortunately, the Webpack plugin had gone unloved for a little while. But Webpack five recently came out and spurred a bunch of interest from the community and updating that. And so we've recently gotten a good chunk of prs into that project. And so the next version is going to support web pack five, it's gonna support node 14, and it's got a completely rewritten HMR implementation. There was kind of a HMR implementation in there from the Svelte two days that never worked with Svelte three. And so that was always kind of like the top issue. In that repo that the readme says there's HMR support, and there, there really wasn't. And so that that's going to be a really exciting release for web pack users, which I think is probably like, I don't know, maybe 30 or 40% of Svelte users. It's, you know, it's a sizable chunk. Yeah, I think it's gonna make life a lot better for a lot of people. And so, you know,big shout out and thank you to all the folks from the community again, that was another thing that was entirely community driven. So non 25 and Smitty, VB and Greek so you know, got got a lot of those really drove that whole process. I know No, it's pretty funny cuz like,Shawn  35:49  funny cuz that's, those are their discord chat names as well. So yeah, those are their names as far as I'm concerned.Antony  35:56  Sometimes they get names as well. Yeah, that'sShawn  36:00  right. sweatsuits. Six, yeah, yeah. Consistency is good.Kevin Åberg Kultalahti  36:06  Yeah. Right. So So we have some some questions from the from the community. We, we asked for, so we have one here. Should should people with separate apps panic? Should they panic a lot? Or just a little? I don't know.Ben McCann  36:25  Yeah, I mean, the there's gonna be a fairly easy migration path. We've already like migrated the example apps, though, externally, those those are still on sapper. But within the Svelte kit, repo, those have all been migrated to Svelte kit. And like that was a fairly straightforward process. We need to put together a migration guide still, but that's something that we'll do. And actually the real world sample app rich basically completely rewrote, because it was never really written in no way that sapper apps should be rewritten, should be written so that that one was a bit of a larger change, just because there was a whole bunch of other improvements that they got made there. But like, if you look at the Hacker News sample app, that was pretty straightforward to port that was a pretty small set of changes. And so the there's so much of the Svelte code, like all the the client side Svelte code, especially, is is basically the separate code. And so like the code that's going to be in your project hasn't really changed. Most of the changes and Svelte kit are all like, they're in the development server, and they're there on the server side and and sappers are Svelte kits internals. And so you know, it's, it's the things that users don't really touch in their projects that are changing the most.Kevin Åberg Kultalahti  37:55  Cool, sounds good. No question is so from from our user? How can they help out pretty much help the core team? develop these things? Ben McCann  38:13  Yeah, I think that what Svelte needs more than anything, is people getting involved in helping us review issues and prs. There's just a lot of them, and it's really hard to keep up with them all. You know, and we, it's kind of a catch 22 like, we want to encourage more people to, to get involved so that we have more help with those things. But, you know, it's it's so hard, keeping up with them all to really get people involved with with the projects submitting prs. And, and so I think it's really, the review of those things. That's actually how I ended up becoming a maintainer was, I kind of noticed that their sapper PR queue had grown quite a bit. And I just went through and started leaving comments on all of them unprompted. I wasn't quite sure how that was gonna be received. But luckily, it was received well, a lot of those prs have, like since been been checked in and there's still a lot more I know, that that we need to get get to and get in sort of trying to make it through that backlog. I think another thing is, we recently put up an open collective. And so thanks to everybody that's contributed to that, you know, I don't know that we've had a lot of communication about how our, we're going to use those funds. But I think one of the things that we're most interested in is bringing on somebody to help with triage of some of those things. And that might not happen immediately. But, you know, as we grow a bit of a balance, that's one of the areas that we're going to be looking at is that is probably that and ways that we can accelerate self development. Makes sense,Antony  40:00  I think, yeah, in terms of reviewing prs. Like, that's also a similar way to how I got in was reviewing, reviewing issues and sort of, you know, figuring out if there are real issues or not issues or whatever else. I think that reviewing prs is super useful, giving the code a try. And the hub project by GitHub makes it really, really easy to actually just test this out. You check out Svelte use hub to change the PR, and then you just basically run your, your test project against against the PR, so it is quite easy to get set up. And then it's just figure out if it works or not really. So yeah, it's all stuff that goes to commuters guide again, it's also something that we haven't really got around to building properly yet. Yeah, I think Yeah, whenever that sort of stuffs abusableBen McCann  40:43  I think one of the things we we'd really love is to have kind of a guide to the code and a contributors guide that you know, right now we we've got a contributor sky that kind of has some guidelines about how to contribute to the project, but doesn't really help you get ramped up on the code base. And there's really only like a pretty small handful of people, you know, there's like three or four people that know the code base really well, because it is a pretty comp, Plex piece of code. And so you know, if anyone wants to take that on, we would love to have a better contributors guide that kind of describes how the code base is laid out. And like where the core pieces of functionality are, and how they fit together and how they work to help get more people ramped up in the community to being able to contribute.Shawn  41:37  I've actually so a lot of times, when I introduce fault to the people, I actually send people directly to the code base to show like, it literally, you know, to prove there's no runtime, you just show the direct instructions. I forget the name of the functions, but it's literal. So most of the functions are just like one liners, especially when you're when you're doing like the DOM mutations. Yeah, I mean, I think I think that's, that's one way of really getting familiar with the Svelte codebase but also just understanding Svelte fundamentally. Yeah, you've inspired me, I want to go check out some prs.Kevin Åberg Kultalahti  42:14  I think maybe like a, like a video tutorial or a screencast showing off, like how you would, how you would review a PR or do anything more major, rather than just like that's typing out issues. Could be something.Shawn  42:33  Yeah, we could put that on the YouTube channel for civil society. And yes, get more eyes to it. Maybe it might be an interesting method. But yeah, it sounds like it sounds like there's a bunch of ways people can support like, monetarily, peer review, and then I guess more documentation on the codebase. Quality.Kevin Åberg Kultalahti  42:52  Cool. All right. Do we have any, any other interesting topics we want to talk about? before we head on to pics,Antony  43:04  as an interesting one here, this is from the Twitter but it's obviously not directly related to what we asked, but it's when do you think the first roles is felt developers will start to appear? I mean, that's an interesting question. Because from what I understand, there's actually quite a few roles out there appearing now. I think decathlon were most recently hiring. I'm not sure what the hiring for could be new team. It could be the existing site, because for those who don't know, the European decathlon sites, which is a huge, huge brand in Europe, and in the UK, in fact, then their new site, their rollout in Europe is actually running Svelte to one the UK is running the legacy code base. It looks like so maybe it's porting the UK one. I'm not sure but they're absolutely hiring right now. Yeah, look for Svelte developers. There's quite a few jobs in the in the jobs channel on discord if you want to have a look through some directly related to Svelte jobs. I hired two stockbrokers, you know, I had literally four stock bumpers, so that's good fun. I'm not hiring at the moment, but maybe again in the future, a bit of luck. But yeah, so there definitely are jobs out there. You just have to sort of know where to find them.Kevin Åberg Kultalahti  44:10  Yeah, I saw one. By like one of the largest Swedish universities looking for a Svelte developer. I think for some sort of like data is not sure. Nice. I was interested asAntony  44:26  I saw, actually, a school seeing on them discord today, a school, a school child, 15 year old has actually said that his school's asked him to learn Svelte as part of a project. Isn't that super interesting? Yeah, I know. He's like, he's come to the school with his homework. Like, they've taught me to do this as well. How do I do it? Is itKevin Åberg Kultalahti  44:48  the guy that that has contributed a lot to Svelte society website lately? Maybe?Antony  44:53  I don't know. I don't think it is because he was saying that you found something very complicated. I was like, well Kinda yeah but also not, not really. But it's weird there because like if schools are teaching Svelte muscles can't get better than that.Shawn  45:10  I guess I should also mention we keep track of you know, notable production, usage of Svelte on the tube and as well society Twitter. The typical ones that we always raise are like Spotify Apple, IKEA. What's IKEA? Yeah. And then I guess the data in the database angle I guess the the official government. German government site for vaccinations is also in Svelte. We have Square Enix and Disney they had like Kingdom Hearts and their their main page was in Svelte. There's, there's like a bunch of Alaska Airlines for their booking reservations, uses Svelte as well. There's there's just a bunch and these are just like the household names. Obviously. There's there's a bunch more Schneider that areAntony  45:54  beyond Of course, you know, a start.Shawn  45:57  Yeah, exactly. But I'm not so much in favour of like Svelte jobs as just like, you know, web developer in general, and then just pick the tool that that fits you. So I'm not I'm not too concerned about having Svelte in the job title.Antony  46:10  Yeah, I think I think the reason I like that concept of Svelte jobs is because, you know, if I were to stop doing biankin, going in a job, I really would want to just carry on using Svelte and I would be looking for a specific style job, I wouldn't be looking for a front end job necessarily, I'd be looking for a Svelte job. And just because it's something that I enjoy using every day, in fact, like I said before, on the show, I'm sure, it's kind of, I'm a full stack developer, I could do any part of the stack. And I've always kind of avoided front end. But actually Svelte is the one thing that's brought me back into the front end thinking I really enjoy working on on webwise. Again, which is, which is quite a statement, really, because it's still quite difficult, you know, there's still browser compatibility to worry about, and all that kind of stuff, you know. So I think it's valuable to have a Svelte specific job, and I think that's a good thing that that's being advertisedKevin Åberg Kultalahti  46:59  in that way. Okay. Yeah. So I shall go, then, yeah, you should, it's your second.Antony  47:07  So this is gonna, this is gonna This is where we where our ratings dropped to zero, right? So yep, code comments are bad, I just want to say that, all comments, they should be banned. liberals in the past to remove them. So you can't commit comments to your code base. The reason being, if you've got code comments in your code, it means that your code is violating one of Kent Beck's four main rules is Kent Beck is very prominent, this sort of stuff, but he is absolutely right in the code should show intent. And if you're writing comments to show intent, then your code is obviously not showing intent. And for me, that is a direct, you know, a direct violation. So for those who don't, who can't back, have a look at my Twitter, he's very, very prominent software Dev, a very long time. A lot of the stuff if you kind of follow his guidelines, makes them much, much cleaner, much more readable, much more sensible, logical code, it's easy to maintain. So the priority map, as he does, it has four elements from lowest to highest, the lowest element in his map is fewest elements. So that's the fewest component parts to make it a whole. The next two are to no duplication. Obviously, you know, try principle, don't repeat yourself. If you've got up to code here in there, it's a maintenance headache is a testing headache, and you could get in sync. So remove that into a single place, abstract it and call that, again, within reason. It's like a hard and fast rule. It's within reason. And then the second one on that level is revealed intention, your code should read, in that it reveals that tense so that it makes sense for the person reading it. And the additional downside to comments in this concept is that a comment is not testable. So a comment can go out of date when you write the code. And someone can change that code. Not that the comment, there's no test to check that. So therefore, the invalid if somebody is relying on that comment, which, for comments to have a purpose, they'd have to rely on it, then it means that they're reading something which isn't true and potentially even does the opposite of what the code says. So there are danger if one comment is false or wrong then or even misleading, because it's English language, right? Or whatever language but mostly English. And it can actually give the wrong impression about the code. It can say the wrong things, and then you end up misunderstanding the code and potentially writing books. So therefore, my my, my notion here is that code comments are actually bad. And of course, it's his top element in this map is passes the tests. That's probably the most important of all, no matter anything else. As long as it passes, the test is good. But back to code comments quickly. I believe that code comments for code smell. I believe that code comments are a bad thing. They're damaging, and I genuinely believe that they're, they do more harm than good. And that's my controversial. That's my kind of speak now.Shawn  49:52  It's a very good one.Antony  49:53  A controversial opinion. I always get flamed on this for Twitter, I always get flamed non stop. So So justShawn  50:00  to be super clear, the entire Beyonk codebase does not have comments.Antony  50:05  You are correct. Not a single comment. Well, it does make you write better code. It does make your app decayed. Do you?Shawn  50:16  What about Svelte? Svelte prs like D Do you? Would you reject a PR over? You know, an excessive comment of you probably allow so small commentsAntony  50:30  Yes, so the Svelte codebase goes against a lot of the things that I believe in standards like linting, and things like that it goes against them. This is Rich's style, and his you know, the general maintainers. A great stylist is totally fine with me. And comments are the same, right? The notion is that comments are included that code base, therefore, I'm totally happy with comments being there. And so I accept prs with with code comments, because it's not a violation. However, I will admit to when I see rich adding code to the code base, we've Ben adding code to the code base. But there's the comments. I'm like, No!! I'm totally right and totally fit. But I've just like, it's the way it is how it is. The weird thing about linting in about code style is it actually doesn't matter. What's more important is that everyone uses the same code style. So therefore, if this is the code style Svelte code base, and I'm more than happy that we don't spend time bike shedding about whether they should underscores and variable names or use camelcase. I'm much more happy that we should just have a single style. And actually, I'll be honest, I'm actually coming around underscores and variable names now, which is really not voting. Well, my team because we've always been against that. But hey, you know,Shawn  51:43  progress.Kevin Åberg Kultalahti  51:45  Yeah, we actuallyShawn  51:46  had someone comment on Twitter that the Svelte code base does have a bunch of underscores stuff, and it's very readable. It's quite readable.Antony  51:54  It is it has underscores internally, and it uses camel case for external API. Yeah.Shawn  52:01  Sorry. Good.Kevin Åberg Kultalahti  52:03  Yeah. So any, any other unpopular opinions? I have one, a short one, butShawn  52:09  Well, I thought that was such a good one. It's hard to follow up, Ben. Yeah. Yeah, I'llBen McCann  52:14  jump in and say, don't use Svelte kit yet. Just use saffer. For now. I know people are really excited to use Svelte kit, but I think you're just gonna cause yourself more trouble. There's no documentation for it yet. There's not really any support for it yet. Like the things are still changing. And so I know, like people are starting new projects, and I don't want to have to migrate. But it's it's not going to be a painful migration. And it'll be be a lot less pain than using a project that we don't really intend for people to use yet. Yeah. Yeah.Unknown Speaker  52:58  It's popular here.Kevin Åberg Kultalahti  53:01  Yes. So so I have I have a small, unpopular opinion. Maybe it's not unpopular, actually. It's hard to read tailwind. I started tinkering with tailwind and it's it's actually quite okay. was better than I thought, but, but reading it is really, really rough. Having having HTML for with classes.Antony  53:23  So your opinion is that it's hard to read tailwind?Kevin Åberg Kultalahti  53:28  Yeah. I guess so. Wow.Antony  53:31  That is that is the burning fire, pitchforks, pitchforks and Dawn? Well,Kevin Åberg Kultalahti  53:37  it's not so much that it's hard to read. It's more like, it's just like a jumble of everything in the HTML, and I get confused. So I'll probably learn.Antony  53:48  Who knows. I'm no sale would fun. I probably inclined to agree with you. It's it's class overload. But But yeah, I can see that definitely causing some controversy.Kevin Åberg Kultalahti  53:57  It is nice, though. Like, for this one project. I've tried it on.Shawn  54:02  Ben, what's your take on too, andBen McCann  54:05  I haven't used it yet.Shawn  54:08  You probably have an opinion, though. You've probably looked at it.Ben McCann  54:12  I haven't Yeah.Shawn  54:21  I won't. I won't comment until when stuff but I can I can then jump in with the last unpopular opinion, which is that serverless is killing static sites. And I just realised this, that like there's really no more reason to have like a traditional static site generator that jet pre generates 1000s and 1000s of pages like we used to benchmark sapper on like, how long does it take to do 30,000 pages like doesn't matter anymore. And I realised this partially because this socket, partially because of remix in the React ecosystem. And next JS everyone is is moving towards serverless says like the the rendering unit. And I think that's why like, the reason we had static site generators turned out so many sites was because compute was, you know, centralised and we needed to run the build process and then distributed on a CDN, and that model worked. But now that basically, every hosting platform has serverless, that it's super easy to spin up, that we can just like, run the the page generation on demand and cache it. And there's no need for a static site generator anymore. So that's my opinion.Antony  55:39  Yeah, I think I think that I think I kind of agree with that opinion. Because obviously, like, generating on the fly is effectively static site generation, you're generating something into the cache. You're just not doing it. At the time. Yeah, yeah, you're doing it, you're doing it kind of on request on requests for the first request. Makes sense. If you've got a sensible caching strategy and a way to clear that cache then, then yeah, I think that's a great, that's a great idea. Yeah.Shawn  56:04  So I mean, I don't know if I don't how profound This is, but like, you know, obviously, I used to use Gatsby a lot. And Gatsby is like, if this insight is true, then Gatsby's kind of dead. So is like every other static site generator like it's fine. I still use it because it's like a tried and tested codebase. But just the developer experience of like updating a page and not having to wait for a billion minutes for it to rebuild. It makes it a superior paradigm already. Absolutely.Kevin Åberg Kultalahti  56:34  All right, picks. What do you have? We got to go fast now. I gotta runAntony  56:42  Right? I pick the todos smart heating system. So I've been when asked how my boiler fitted ask the fitter to fit me this like the cheapest possible wireless receiver because I was going to get smart heating and then I didn't getKevin Åberg Kultalahti  56:56  a random pick. Estela randomAntony  57:00  pretty good, right? But anyway, more random Shawn, they say I was getting fitted and never thinking about it and then one day this cheap smart heating system this this cheap sorry this cheap wireless heating system which I will name sailors don't ever buy and the crap it actually broke just just stopped working one day and I was sat in the middle of December in England in the cold which is like one degree or less Celsius. So I got my friend how Tato I looked it up. It is the most amazing beautiful onboarding system i've you know products come with a how to set product up and usually it's it's varying levels of how good it is. And this product is literally you as a layperson going and adapting opening your boiler and fiddling with the wiring right and yet they managed to talk you through it on a smartphone step by step every single detail what's important what was occurred what what you should label everything. I did the whole thing in like 12 minutes or something and to end a tumour board or apartment the first time ever. I took all the circuit shut my boiler, I started unscrewing things and rewiring it and God knows why I was doing crazy stuff, right? And it's totally fine because today is so watertight setup you tell it what boy you've got. It even shows you a picture of your entire setup and I've had a pretty random setup specific boiler specific water heater specific wireless transponder that we use some some naff sales sales sales product or is it had pictures of all of it and how to remove it, how to fit their stuff. Fantastic. So if the product is great, it's wonderful. It's great smart heating, but the setup is just is something that people should aspire to is how to onboard people onto a product. So my pick is today's my eating.Shawn  58:44  Wow. Dude,Ben McCann  58:48  that's hard to follow up. I'd say my pick is Narcos Mexico. That's the I know everybody's been watching Tiger King and that chest one.Shawn  58:58  But he's got the eyes. Yes. Yeah.Ben McCann  59:02  I'm all about Narcos Mexico.Shawn  59:04  So I watched I watched the original Narcos Is it is it just like with different actors like what? Yeah, it's related.Ben McCann  59:11  It's about the Mexican cartels.Antony  59:13  I thought this sounds great to watch this. Yeah, theShawn  59:17  first narco is is really good.Kevin Åberg Kultalahti  59:18  It is. So good. So my my pick is something called kitty. It's a it's a terminal. Terminal replacement. Pretty nice. You can customise it. pretty much it.Antony  59:37  Kitty, right?Kevin Åberg Kultalahti  59:39  Yeah. Yeah, like a small cat. It's, it's it's actually very, very nice. It's GPU rendered. Which is better than those electron thingies. Right. Yeah. To render some stuff Yeah.Shawn  1:00:00  I guess I'll pick Audacity. I don't know if you guys have messed around with it, but it's it's open source, audio editing software. And it's surprisingly powerful. I've never really, I've used it before to edit minor clips. But then I took some time over the weekend to learn how to set levels and like mix clips together and like, post process like pops and stuff like that. It's really powerful. And it's open source, and it's very performant and just amazing piece of, I guess, open source collaboration. And I didn't I didn't know I don't know the history behind this, but I'm curious to learn more, but it's just really good software to use. In other nice Shawn will be on new editing of the podcast, right.Kevin Åberg Kultalahti  1:00:46  All right, it is. Yeah, yeah, it is. So that's all the all the pics done. And that's it for this time. Thanks, Ben for for coming on and talking about separating Svelte and then thanks for having me everything else. All right. We'll talk to you guys next episode. Bye byeTranscribed by
1/25/20211 hour, 1 minute, 2 seconds
Episode Artwork

A New Svelte Year

A new year, a new Svelte Radio episode!Notes: GDC Spiderman Technical Postmortem Mac Mini M1 Asus PN50 Mighty Browser Perkins Brother Builder YouTube Channel ListenAddict Multris Tiny House Guy svelte-query Svelte Zoomable Svelte Community Stuff: Svelte Society Canada looking for a logo Svelte Dublin Official Svelte Newsletter Picks:  Bone Conducting Headphones and Andrew Welch Fibonacci Goal Setting Swedish Meatball Recipe:Makes 4 big portions.Ingredients: 500g minced beef/pork 50/50 mix (I prefer to use lamb mince) 0.8 dl breadcrumbs 1 dl milk (3% fat) 1tsp salt half a yellow onion 1 egg 0.5 tsp pepper, some mustard (dijon works) 0.5 dl dark syrup (molasses should work) butter Steps:  Chop onion finely and fry in butter until soft Mix breadcrumbs spices, salt, egg and mustard in a bowl and let sit for 10 minutes Add the mince and mix well (don't overdo it! It can get tough if you work it too hard!) Form smaller balls (half the size of a golf ball is a nice size) and fry them in butter. Transcription:Kevin Åberg Kultalahti  0:00  Hello, everyone. Welcome to another episode of Svelte radio first one of the year. Not a lot happened over the holidays. But we're going to go through the new stuff anyway. But first, some introductions. I'm Kevin, I run a site called Svelte School, where I teach people about Svelte and I'm involved in the community side of Svelte as well. Yeah,Shawn  0:22  I'm Shawn, I work at AWS on AWS amplify, and we are we actually unfixed unbroke, the salt society website recently, so I'm proud of that, even though I didn't really do much there. So shout out to the silentworks, who actually figured out the Modify issue that we had.Antony  0:40  Nice. I'm Anthony. I'm the CTO of a company called Beyonk, which is a travel and tourism stars in the UK. I'm also a Svelte core maintainer.Kevin Åberg Kultalahti  0:48  Cool. So what have you guys been doing over the holidays?Shawn  0:52  Oh, yeah, we so we figured we will start off with like some updates, right. So I think we some of us got ourselves like Christmas presents. Something I realised actually in catching up with my team at AWS is that everyone bought games, like the games industry must be huge right now. Yeah, I mean, this is not that this is not a surprise, but like, really, because there's nothing else to buy. Yeah, youAntony  1:15  say games? Do you mean like board games? Or do you mean like computer games? Shawn  1:19  Mostly? Mostly computer games, butalso board games? I think I think people went for computer games first. And then we realised that we like the digital stimulation or whatever. It's easier to set up computer games.Kevin Åberg Kultalahti  1:33  Have you guys seen the like the cyberpunk game? So what cyberpunk looks amazing. Also very buggy. I was actually I,Shawn  1:43  the bugs are the fun part, right? Like you could see one of my top posts on Reddit, the past week was showing off like the amazing detail of the shadowing, of cyberpunk. And how like, even when you hold the rifle, the shadows fall on the rifle and you can you can move around. And then a guy kept on walking backwards. And the shadow came from a car that was being suspended in the air. Because the graphics were like screwed up, like, but the shadows are great.Antony  2:12  I mean, this is the bit I didn't understand because what makes game appealing, in my mind the games appealing games feel is in its gameplay, and how explorable is and things like that. I don't know much about games. I mean, I'm a Linux user. I don't really have many games like in the store. Maybe maybe tux racer? I don't know. But I guess the point is for me like I love bugs in games, I think they're I think they're brilliant. They make it much more interesting, but I'm not really a gamer. It looks like so put looks amazing. I've seen some live streaming on Twitch it looks incredible to look at. But honestly from from the brief bit that I looked at it for the game looks like GTA, which is fine in my books, because GTA is the one game that I do occasionally play. The graphics is amazing. But the thing for me is I've heard that the AI is just not really there. Like characters don't even have the basic error you find in games, they just kind of wander around aimlessly into traffic. Like, for me, that takes away a lot of what makes GTA appealing in that there's a sense of realism. If I want to just drive around and follow the road rules and interact with people, then I could do that. And if the AI is not working, then that's gone. So it may be a personal thing, but I feel like they're missing a big trick by not having that sort of stuff ready. And it's not it's prioritised been done a million times. Right. So where Why can't it just be working?Kevin Åberg Kultalahti  3:28  Right? Right.Shawn  3:29  The I'm sure obvious answer is that they rushed it. Sure.Kevin Åberg Kultalahti  3:34  Yeah, sure. Probably probably the explanation actually. Yeah.Antony  3:39  So that's all games rushed synthesiser?Shawn  3:41  Yeah, probably true. So well. I wanted to point people to resource the GDC YouTube channel Game Dev conference had a really good breakdown of the Spider Man ps4 ai, where it actually shows you how, because Spider Man has infinite rendering. And you can see people you can theoretically interact with any single pedestrian on the street could attack them, you can talk to them whenever. And it's a really interesting choreography of choreography of how it's random AI and then the moment you interact with them, then they're sort of possessed by a different sort of AI and they talk a lot about it. And yeah, it's it's, it's that sounds pretty much as open source as Game Dev can get without actually sharing the code.Kevin Åberg Kultalahti  4:25  Yeah, all right. So so you guys treated yourself to some new presents, I heardShawn  4:32  Sure. My problem is I don't I don't have like a full report and everyone else. So I Oh, okay, I'll the headline is I got a m one. MacBook Mini. Sorry, a Mac Mini. And that's the first desktop that I've purchased ever. You know? Well, because every prior PC that I've ever made, I actually assembled I bought it assembled and obviously You can't do that with Apple. Right? Because hashtag money.Kevin Åberg Kultalahti  5:02  But yeah, unless you go for the Mac Pro, right? But then, yeah.Shawn  5:08  Well, so it's a big round trip for me. Because when I was growing up, I used to treat like PCs as like this, where you get serious work done. And then somewhere along the lines, everyone just transitioned to laptops at work. And it became a normal thing. And, and then I just kind of went with it. But this is the first time for me going back intentionally from laptops to desktop. And really, the justification was that it's just half the price. And, and I wasn't really moving that much in COVID. So I think, I think that's kind of it. There's, there's more parts, but like, I really did struggle with that decision, because for twice the desktop price, you could get a battery and a keyboard and a screen, that's decent value right there. So right, it was it was a, it was a real challenge to me as to like, what I should get and what I was trying to invest for. But mainly, I was just kind of curious about all the other reports, I definitely felt my main personal laptop, my only personal laptop is from 2017. So starting to feel the the age a little bit. And in particularly, one of my pain points is video editing, because I do a lot of tutorials and like for work and then for egghead IO, and then sometimes for Svelte and it typically compression is like a one to one ratio, like if you have if you're sort of using ScreenFlow and you're compiling like a like a one hour video, you may need like about one hour, maybe one and a half hours to compress that video. Yeah. So anything that can solve that pain point is good. And, and then obviously compiling code. If that if that's any faster than that, then that's nice as well. And then I heard a lot of fringe benefits. So I think some people in the jealousy community like Devin COVID, but then also maybe, I guess some more famous names like DHH. There's others that have actually jumped on the train, who are failing to come to mind right now. But there's just saying, like just navigating between windows. And I even feel that that latency. So I think anecdotally I feel like it is so I've had it up and running for about four or five days. I feel like it's faster. But then I can distinguish between that and just like the fact that it's a new computer with no software loaded on it. So that's my report.Antony  7:11  Fair enough. Fair enough.Unknown Speaker  7:12  I mean, it's it's almost as portable as a laptop anyway. Right? Right, right. But if you decide to like Move, move across the globe to back to the US, for example, you can always bring, it's easier to bring it back Mac Mini than a, like a full desktop tower. Shawn  7:29  Sure. So I mean, one of the reasons is that you should get a one laptop is that the the power consumption is very low. But what's the point of getting a there's no point getting a low power consumption if you also end up making a desktop, where there's no battery? Yeah. But it is Oh, I mean, the other one good thing is that there's no need for a fan because apparently the cooling characteristics are very good. Again, like I'm very out of my depth here. I don't know any I don't know much about CPUs and all that. I just repeat what other people say. And maybe you guys can fill me in on that detail. But I do have my fan spin up like right now on this, this work machine that I'm using my fans are spinning up and on. The one is just quiet.Kevin Åberg Kultalahti  8:08  Yeah, silence is really nice.Antony  8:10  I mean, so yeah, so I think I did the same sort of thing as Shawn. for similar reasons, I think I would really want an apple and one, mostly because I don't like Intel. And they really have like Intel or the x86 architecture. So for those who don't know, Intel chips, AMD chips, run x86, complex instruction set computing, which is a lot more restrictions that directly translate to CPU instructions. Whereas risk, which is what arm uses is reduced instruction set computing, which is basically less instructions more direct, it basically is two different architectures. What Intel do in the core series processors to speed things up as they actually translate risk to Sisk. So inside a core processor is effectively a small ARM processor. But obviously, that translation has an overhead, right? So there's a cost involved there. So it's just not as fast. So being a Linux user, I can't get him one doesn't it doesn't work on there yet, because it's very Apple proprietary, and it's unlikely ever will not be that I'm hoping that some other manufacturer will sort of jump on the bandwagon and produce their own equivalent. And I'm sure they will after a while because there's no way that the x86 architectures compete now and also because like you know, arm is a British company, they were originally where they are now holding this company somewhere but risk and arm were invented in Britain. And when I went to school, I grew up on ARM processors because it's really what we had in Britain at that time. And so there's a lot for me to like about arm and I don't have any other Intel machines apart from my main machine because of the power of it, right because a lot of ARM processors are generally tablet or phone processes. So I couldn't buy an apple m one even though I really really wanted to because I don't want to run a backhoe sector I want to run Linux. So right I've purchased this asis machine which is probably about the same sort of size. This runs a ryzen chipset, which is AMD is new thing or newish thing, which purports to be a lot faster than Intel's processes. notes on the same architecture with with except for the high end ones. It's a very nice small compact machine, which is, again for Shawn was mentioning it's nice and compact, but like a laptop, it's portable, but also costs the same thing, right? I spend one and a half grand on a laptop to desirable for me. I'm buying this and this cost me 350 quid, right? I had some memory. I had a hard drive, right? Yeah. And it's still like, just over a third of the price of the laptop. And I'm not going anywhere. COVID. UK is completely locked down anyway. But I've worked to him for three years anyway. So I probably should have done this sooner because my laptops 2015. So yeah, I think a lot of the same sort of reasons. And it's a bit weird not going back to a laptop. Because when I grew up, I built on a PCs myself made about 14, I was building PCs, because it's great fun. I was playing games, I was running Windows. When I switch to Linux, I just started looking at laptops because of portability, one around the house, take them to work at work, it was all windows shop, and I want to run the next. So I took my own laptop to work. I never thought I'd get desktop again. Because I thought this is so great. It's almost equivalent performance in a little tiny package is not as fast but it's almost as good, right? So yeah, it's another kind of weird twist for me to to have this this desktop machine, sort of a laptop. But I'm looking forward to it. My my disk is arriving later today. And then I can plug that in and start setting it. So I'll have to bring about reports another another time and how good it is. Next time, sir. I got high hopes.Shawn  11:22  I think it'd be interesting to do a count of how many computers per person in your household. And then chart chart that over time. So I have a work machine. I've personal machine. I have my now my legacy laptop, which I just keep around because the resale value isn't there. I have an iPad, and then two phones because I still keep my old iPhone around again, because there's no resale value there. And so that's like six machines, six computers for one person. And yeah, that's that's massively increased from I used to share, like four people to one, one PC, right? Yeah. And yeah, it's really this like transition of personal computing.Kevin Åberg Kultalahti  11:57  The Holy Grail is when you can do everything from your from your phone, right? You don't even need a computer. You just have have your phone.Antony  12:05  It has impracticality.Shawn  12:06  I don't know if we're there. Yeah. Yeah. IUnknown Speaker  12:09  mean, I mean, it's, we're definitely not there. But at some point, I'm sure something like that, it's gonna,Antony  12:14  well, Ubuntu tried to do that right with the with the crossover thing. So at one point where I could have an Ubuntu phone, you could plug it into your laptop into your into your monitor, rather, and it would turn into a full desktop machine running up your phone, unfortunately, never succeeded. But that was a cool idea. And something that I think even Apple haven't really sort of gotten that far yet would be interesting to see. I mean, I think on the subject to how many PCs you've got, Shawn must have between 20 and 30. I've kind of forgotten whatShawn  12:45  Raspberry Pi's don't countAntony  12:48  10 to 20, right. It's still not lower. And it's just because I kind of a hobbyist and I have machines doing various things around the house. And I like building them. I like repairing them badly by cheap and fixing them. I've got two or three behind me. They're just mid repair. So it's like lots of lots of reasons have lots of computers. But in terms of usability, I'm trying to limit to one because I don't like to go into each machine and not have the files on the other machine and the clouds. Wonderful, but it's not quite the same.Shawn  13:17  For that for Yeah, I was thinking actually. So having a desktop and then having a like a if I ever do go for conferences and meetups again, having a like a work laptop, it forces you to backlinks up onto the cloud. And I actually thought I thought it was pretty good discipline because that means again, like it's all this, he kept keep like proprietary state in your local machine and not committed.Antony  13:39  No, you shouldn't you never should. Right. But But the fact is, even if it's even as the cloud, I've still got to get check out all those projects and do the right links across projects and things like that. It's all a little bits of setup, but also like Dropbox forShawn  13:51  regular files and stuff like yeah, anyway. Yeah. No, it's a thought.Antony  13:57  The other thing is I have a thought you'd mentioned like, now I'm non portable in terms of going to a remote office and working, because I've not got a laptop, actually what I what I tend to do in the past anyways, take my Chromebook with me. And then I can basically just RDP or whatever home onto my desktop machine at home. So I don't think it's going to change that much really remote desktops getting better and better. And the Chromebooks perfect for carrying round one because it's arm based, right? It's got super low power requirements. SoShawn  14:24  yeah, for those interested in this topic, Yeah, apparently, you can do that with Xbox and ps4. But then also, stadia is kind of like this whole remote gaming concept. And then also, what I think is also trending is this remote development, like with GitHub code spaces, and what's actually as your code spaces, but rebranded for GitHub. So I just learned about mighty, the mighty browser. I don't know if you guys have heard about this. It's basically chromium as a mainframe mainframe. So you never you don't run chrome locally, but you just kind of remote into this thing. Apparently, it's like way faster because like they do, they do Everything in parallel over there on like a much beefier machine. And so I think we might get to this point where we don't have laptops, and it's just like iPad and a keyboard, or like a tablet and a keyboard. Yeah, I know Guillermo Raj from for cell actually is living sort of the iPad life right now where he's only iPad and keyboard. So yeah, it's an interesting peek into the future. Like, maybe just nothing's local.Antony  15:23  I mean, it's a peek into the future and the past at the same time, right? Because they used to have these these terminals. Yeah, like mainframes and dumb terminals, wise terminals at your desk, where you remoting into a mainframe machine. It's almost like that's the same thing. But now that mainframe is the cloud. Yep. And the local network is, is this the internet?Kevin Åberg Kultalahti  15:41  Yeah. It's like we're going in circles and learning a couple of new things every every time around. More than a couple probably. But yeah, we get into to actual Svelte stuff, maybe. Yeah. Well, that's what we're here for. Right.Antony  15:58  So this podcast is aboutShawn  16:00  Yeah, I think. I think I think people like people like, like the community aspect in the in the tech. We're all interested in New Tech. That's why we're here.Kevin Åberg Kultalahti  16:07  Yeah, yeah, definitely. So. So Anthony. what's what's new in SvelteKit.Antony  16:12  So over Christmas, I actually kind of felt kind of burnt out. So I actually didn't do a huge amount of Svelte didn't really look at computer from about 22nd to the fourth, because I just nice. I just couldn't face it. Almost. Yeah, I did loads of DIY projects. Shawn  16:27  But that's good. That's you shouldn't you shouldn't feel bad about it.Antony  16:29  I don't think I do. I just kind of want more of that. Right. I really want to build a house now. Like, I want to literally build a house from scratch after watching a YouTube channel that I've sort of gotten into. It's like, why am I in tech? It's a really,Kevin Åberg Kultalahti  16:43  yeah, that's so so random. I I started watching this German guy who's building like a tiny, tiny house. He's renovated tiny house. Yeah. Yeah. So fun to watch. Yeah. So are you going? No,Antony  16:56  that's great. I mean, a tiny house things. Another huge thing, I'm gonna mention it, so it's gonna be about pick, but I've got too many picks now. But this is great hammer as well. So so so for my pick, I was going to have Perkins brother build this YouTube channel, because a bit of a sort of deviation from my usual YouTube watching, which is crime and murder and things like that. Perkins for the builders are a couple of brothers who run a company called Perkins brothers builders, oddly enough, and they they're building houses in North Carolina. And they've been sort of videoing it because they've thought, well, we build houses all time. And it's really fun and interesting. And not everyone gets to do it. So why don't we film it and talk you through the process of the decisions we make whilst we're doing it and stuff. And you can kind of watch the channel and watch some of the house bills and go, I think and actually do this myself, because they make it look so easy. But they also tell you all the ins and outs and the decisions they make and stuff. So it's kind of really inspired me, I actually really would like to I do a free internship with them go move that for a bit, right and just build houses for free with them. And I could just be paid in experiences. It's pretty cool. I'd probably make a massive mashup,Kevin Åberg Kultalahti  17:56  right? But you'd have a lot of fun at the same time. Is there anything you've managed to? Well, since you SoAntony  18:04  the one thing I noticed about Svelte actually, is that we have this new contributor, he's not made himself public on the organisation yet, so I don't know whether he does or doesn't really mention, but I'm not going to do it for now. But what I'll say is, this person has really sort of jumped in. And he's given us all these amazing features and bug fixes and sort of completing a bunch of the sort of outstanding tasks we need to get into the beta phase. So it's looking really good right now it's looking really nice. And just, it's really cool. When you see so many chips in like that and sort of gets involved really quickly. And up to speed quickly. Svelte been one of those notorious projects where it's quite difficult to get up to speed, because it is quite a complex thing that it does like this, this sts and compilation is difficult. So it's really interesting to see someone jump in and sort of pick up the ball on that. So you know, and of course, riches, riches, launching projects with it right now. So he's also very eagerly sort of getting everything up to speed. So yeah, no promises, again, at everything like that. But we are over the Christmas period, we we took a few leaps and bounds in the right direction. So so it's looking good. Yeah. And it's worth mentioning, probably the language tools, military as well. They've had a major release. So they're on 2.00. Now, I believe, I don't, I can't see what's going into I don't know what to put into it. But I know that it was quite a big chunk of work. So that's well done to them to getting that getting thatKevin Åberg Kultalahti  19:19  to where it is we should probably have Simon on. Again. We definitelyAntony  19:22  should have sewn on Yeah, about to talk aboutKevin Åberg Kultalahti  19:25  new stuff, because this is not my strong.Antony  19:29  No. And as a non root user, I don't really benefit from the much of this stuff, I get this sort of VS code highlighting and help, but I don't really benefit directly from it. But yeah, I mean, that's, that's probably one of our most busy repositories, because it's just constant improvement from there. The people in language tools are just all over it. It's brilliant.Kevin Åberg Kultalahti  19:48  Yep. Yep. Great work. And then as usual, things are are happening in separate lines as well. Right? Like some bug fixes and stuff like that. Yeah, it's not it's not a bad doneAntony  20:00  yet? No, no. So I think we're going to come to naught A naught point two, nine release. Ben's been sort of triage and things to go into that release. Now that probably will be like the final release. And it doesn't make sense to kind of start adding features to that at this point, especially if we have the resource we have focused on on Svelte kit, so that zero to nine will be probably the final separate release. If there's anything urgent needs to go into there. Probably now's the time to speak. Actually, one more thing about spell kit and what I've mentioned, because it's now skypark enabled, because it's based on snowpack, because it's now Skype enabled. You can do the fancy, no NPM. just specify URLs to skypeout repositories. And it will download the depths and call them in, which is pretty interesting. Pretty amazing stuff. So yeah, if you haven't heard of skypark, have a look at that, because that's pretty, pretty novel. SoShawn  20:46  that means is denno compatible. Yeah, itAntony  20:49  sounds like I don't know, but it definitely moves in the right direction. It definitely is a step forward, I think, because Svelte kit will be almost abstracted from node itself, and it'll be more of a kit around potentially deploying to node, or CloudFlare workers or whatever else you want to do. I don't see why there wouldn't be another platform for that, right. It just needs an adapter. Like a compatibility layer. It doesn't tie you as much as Safa did to node anymore.Kevin Åberg Kultalahti  21:15  That's good. It sounds kinda like the ESM modules, right? Yeah.Antony  21:22  Yeah. Or how should I? That's a good question. I mean, obviously, rich is very all over ESM. So quite possibly, it's very focused on that. All right. Yeah.Shawn  21:32  Yeah, I feel like the the ESM momentum is, is finally coming along. I think node 14 being known for teens where ESM is unflagged. I think, if I'm not mistaken, because I was working really hard. I don't know why it's I don't know why so hard. But it was hard. Yeah. And then and then I saw sindri Saurus is moving all his stuff to ESM. Only Ronnie, he won't he won't break people who, like, assume no polyfills and stuff like that. Yeah, it's it's really coming along. Probably 21 2021 is kind of the year of Vietnam. And pretty good bet to me. I didn't really think about that. At the start, like this time last year.Kevin Åberg Kultalahti  22:10  Yeah. big change. Yeah. Yeah, we should we should probably do some predictions for 2021 oversold later in the show for next time.Shawn  22:23  I guess I could also Oh, yeah. I mean, so there is a new blog post is that we talked about?Kevin Åberg Kultalahti  22:27  Yeah, yeah. I was gonna talk about like the community there.Shawn  22:31  So just to update people on then send Sandoval? Yep. He's kind of like taken over as like the official Svelte community newsletter maintainer. There are other Svelte newsletters that are run independently. But this is kind of like the official one that I guess it's published on the Svelte blog. So it's it's official, and he put out a new version on January 1.Kevin Åberg Kultalahti  22:49  Yep. Lots of fun stuff in there.Shawn  22:51  Yeah. What is what happened with Svelte component types? I saw the PR, I didn't actually understand it.Kevin Åberg Kultalahti  22:55  Yeah. I, I have no idea like pr kilkelly. The since so it's like a minor release that replace a small component with small component type. And it's something to do with the language tools, I guess. I don't know.Antony  23:12  That might be watered down into 200. Right. But I don't know. Again, like I just don't use TypeScript. So I don't see whatShawn  23:20  you're doing the types I thinkKevin Åberg Kultalahti  23:21  we should have Simon on. It'll probablyAntony  23:25  Yeah, I agree.Shawn  23:29  Yeah, it's a bunch of community stuff. Right?Kevin Åberg Kultalahti  23:30  Yeah. Yeah. So there's this Did you see the the listen addict site? I thought that was pretty neat. No, it's it's like a site that notifies you when people have new talks. So I probably like subscribed to you, Shawn. Now, I'll get pings whenever you post new, your new conferenceShawn  23:49  and stuff. I would I would subscribe to that. Just to put it on my own site. Like, here's myAntony  23:55  latest talks, socks. It's not bad idea. Actually, it has a feed of some sort that we really cool. Yeah,Kevin Åberg Kultalahti  23:59  yeah, it's built and built in Svelte, of course,Shawn  24:01  so I know exactly how to commercialise this because I've been thinking about this because I used to work in equity research, and finance. And you have to keep up on the latest news regarding your stock. And guess what, like your CEO is on podcasts, talking about pretty material things to do with their strategy. So it would be nice to get notifications about when when they're on previously, I think the best way is to set like a Google Alert. But that's pretty noisy. So a dedicated tool like this will be pretty helpful. And these guys can pay money.Kevin Åberg Kultalahti  24:29  Yeah. Probably a good good idea for for whoever built it.Antony  24:35  Yeah, I learned recently that I carry using Svelte which is surprising.Kevin Åberg Kultalahti  24:39  Yeah, on the international site, like the right? Yeah,Antony  24:43  it's weird because like all the all these national sites or for me, at least not all the non British sites or equivalent of our sites use felt and, and our native ones don't say like the Catalan for instance, the UK is still using their legacy stuff. And all the European ones are the ones I've looked at are all using Svelte Interesting now, throughout this isKevin Åberg Kultalahti  25:02  blowing up though. Yeah, itShawn  25:04  feels like at least it definitely is. It's all relative. I saw I saw Adam Whedon's post it, we're still kind of number four ish in the overall rankings, which is fine. We don't have to be the biggest. And I kind of like that soAntony  25:18  well, I mean, yeah, so it is relative, but I would say that the amount of the amount of like inquiries and newcomers is rapidly increasing. I'm seeing a lot more questions. More people a lot more chat. So, see, it's it's definitely blowing up as you say that we go through these kind of spikes now. And then this sort of 2021 appears to be in another one of those. Yeah,Kevin Åberg Kultalahti  25:41  it's it's fun.Shawn  25:42  I mean, it's definitely due to the contributions of everyone in the community. Yeah. And maintainers. And I think rich himself deciding to kick it up a notch with with socket. It just does show just some some life. Yeah, I've seen other projects that just kind of go stale, because they're maintainers don't really think about momentum. And it doesn't matter, because people want to see a heartbeat.Kevin Åberg Kultalahti  26:03  Yeah, I think that this, this newsletter is actually very good thing. Yes.Shawn  26:08  And this podcast.Kevin Åberg Kultalahti  26:09  Yep. True. Well, and also the upcoming, the upcoming conference, right? Yeah. Do we have a date? Not? Not yet? No. I'm thinking, April, sometime. Okay. I think that that's how much time we're gonna need. But yeah,Shawn  26:31  I mean, yeah, we could we could start kicking off like the talk proposals and stuff like that, I think I think we have a bunch of ideas of how to make things better for for organisers, and speakers and for audience members. Part of that is like the activity like the I've been, I've been actually thinking about this, like, it'd be a nice, nice tradition to have to have like a Svelte coding activity during the conference. Yes, that's hopefully not too distracting, and not too hard. But oh, but also fun. And I realised that clicker games are very involved. Like, I fire up my Apple App Store. And I see a bunch of clicker games. And then, yeah, like, I think they're pretty easy to code. And people can get really creative with them. So we might we might want to do a quick review.Kevin Åberg Kultalahti  27:13  Yeah, we could, could provide like a, like a starter? One. Yeah. And then you can improve on that. Like, yeah, transitions. Exactly.Shawn  27:21  You take it the way that you want, like, you can make the state management very complex. So you can do animations or whatever.Kevin Åberg Kultalahti  27:27  Yeah, I was thinking about having, like, quiz between talks, where you have like, people can join in a cave, or something like that. Or I think it was Jake and Sermo who did a, like they did charades at some Google family. Yeah, like a month ago. It was just like a short one. That could also be fun. So you can invite like community members to join in? Yeah. Lots of cool ideas. It's gonna be way better than than the second one. Even though that was very good night. Yeah.Shawn  28:03  Yeah. Yeah. And also, the other thing that I think we all agree on is that it should be shorter. So it's not drag. You don't feel tired at the end of the day. All right. But yeah, I mean, so the reason I brought that up was because I see a bunch of games here as well. Like there's a there's a multiplayer Tetris game in the community showcase. There's a math based challenge game. It actually reminds me of that the other game that's rich Harris really liked was that like, tic see. Do you guys know about that?Kevin Åberg Kultalahti  28:29  No, not where, what's that? It'sShawn  28:31  like, you have to use it. You're restricted to these four, four variables. TI X, Y, like time index, then x&y position. Oh, yes. And then and you have to code within 280 characters and produce something interesting. And it's like, it's like a really interesting, like code golfing challenge. And that's it. That's a fun game too.Kevin Åberg Kultalahti  28:49  Yeah, that could be something to do.Antony  28:51  That makes sense with the old little matrix thing he posted? A while ago. Dixieland era. Yeah,Shawn  28:57  exactly.Antony  28:58  Yeah, yeah, that's cool.Shawn  29:00  Yeah. Frankie's? Yeah, there's a bunch of octave. kompass I don't know. Yeah.Kevin Åberg Kultalahti  29:06  A lot of fun stuff. And some some new libraries and components as well. Like the someone did the like their react. query, but for Svelte,Antony  29:18  Svelte query. I didn't see that.Kevin Åberg Kultalahti  29:20  Yeah. I think it's like a, I'm not entirely sure if it's the same thing, but it looks cool.Antony  29:29  Svelte, Svelte. No, was it called it spacey a Svelte version of is this react? graph QL. ModuleShawn  29:36  microview. Older is called micro micro graph. QL. I don't know. What one? Yeah,Antony  29:43  I think he rewrote it and Svelte.Shawn  29:45  Right, right, right. I mean, so Okay, I guess I have my cell mentioned. So Matthew, his style. His Twitter handle is like HGS ch with underscores between them. Hey, Jess. Oh, yeah. He also tweeted about a 20 line of code internationally. library in Svelte and then he also made a talk about it and because I am trying I'm in this mode of like requesting for talks to like keep the YouTube active and you know, just like just continue sharing content from from people like outside of a conference setting, right. Yeah. And yeah, I mean, he's just very passionate about it and it made this talk on Svelte internal nationalisation. Effectively labour in exactly is much easier to pronounce. It's just yeah. If you don't know what it is, then it's been hard to find. But anyway, sure.Kevin Åberg Kultalahti  30:30  Yeah. So he's, he's the guy that did the defending democracy with Svelte thing, right. Well, that was the title. But that's, that's what the tagline ended up being.Shawn  30:41  I just like, yeah, the database people have really embraced Svelte in a big way. Yeah. Moritz, I think on the data stories, podcasts also interviewed Amelia Weinberger. And yeah, I almost think there there should be like, a single day of the sales society conference dedicated to database because there's just such a big community there.Kevin Åberg Kultalahti  31:00  Yeah, I was I was a bit sceptical to that at first, but I think why? position? Well, because I didn't realise how popular Svelte is, in the day of is like, Oh, really? Yeah, IShawn  31:14  understood it uses it. Yeah, IKevin Åberg Kultalahti  31:17  know. I know. But then, then I kind of like, I was thinking maybe you could position Svelte as, like the database framework, in a way to as a marketing thing. I mean, yeah. Well,Shawn  31:35  yeah, well, there's d3. SoKevin Åberg Kultalahti  31:37  I know. But if you could do better, or could you? I don't know.Antony  31:43  I mean, d3 is very specialised, right. It's very specialised. Svelte was with general purpose. But I guess I guess it kind of always automatically positions itself for database, because of the way that the rich has built it in ways using it. I think reactivity is also very good for, for that sort of stuff.Kevin Åberg Kultalahti  32:01  Yes. All right. Let's see here. There are a bunch of other new components that you can take a look at. Tiny virtual lists are some routers, we've been missing routers,Unknown Speaker  32:14  yeah, more routers.Shawn  32:17  I mean, it's worth actually checking these out. Because if people are trying to solve real problems,Kevin Åberg Kultalahti  32:22  we're Yeah, jokingly saying it like that. But it's I think,Antony  32:26  I think that having Scotland scale was, was great, because he mentioned tin row. And I've kind of looked at that and never looked away. Now. I'm so focused on. It's just really great.Shawn  32:37  He's got this. He's very opinionated about about routing, which is pretty cool. I'm not it's like, as long as as long as I got a link a way to link things. And, you know, although I wish that I guess, query params were a formal part of the state that you get from routes, because I end up having to build that so much.Unknown Speaker  32:55  Really? Yeah.Shawn  32:56  Yeah. That's how that's how you like get like copy and paste the copy paste of both apps, which with like, the state, just embedded in the URL? Right.Kevin Åberg Kultalahti  33:04  Yeah.Shawn  33:05  Put it on the query. params. Okay, one more, one more. Library. And then and I think we're done is Svelte zoomable. I think it's coming from Daniel Dimfeld. He's, he's just like, very active. I don't know who this guy is, to be honest. But he's just very active online while he's passed away. But yeah, it's just like a transition or animation sort of library type of thing. And, yeah, it's it's, uh, it's published. And it's in a repple. When I mean, the demo looks pretty good. So it's just another way to zoom back and forth between content, I guess.Antony  33:37  It's, I did see like if the channel actually a good one.Kevin Åberg Kultalahti  33:40  Yeah. And there's a bunch of new learning resources as well. I haven't been able to check these out. There's someone made a awesome Svelte list. Yes, that's, that's nice. We also have the salt society one.Antony  33:53  This I mean, this, I think this must be the more the merrier is already right. There's now three, three or four. Yeah. Probably would be nice to have a single manager. I mean,Kevin Åberg Kultalahti  34:02  yeah, I think the problem here is like keeping them up to date. And, yeah, because people lose interest. And they don't have time. All sorts of reasons. Right?Antony  34:12  Yeah, I guess that's the advantage to having one as part of a website rather than a than a GitHub repo because people can actually like vote the feedback on ones that maybe don't work anymore, or, or libraries have become abandoned or whatever. They can rate review them that sort of stuff.Shawn  34:27  But that's my issue with awesomeness in general. No one ever files the PR to note that something is no longer awesome.Antony  34:32  Yeah. Someone someone could do that on on the components inside Svelte actually inside the because we've got this Svelte integrations repository, which is kind of I maintain it myself right now. And it's it's unknown who knows what happened to it or it's where it's destined for but, but someone did to appear, I think to remove a load of stuff. I was like, that's pretty nice.Kevin Åberg Kultalahti  34:52  Yeah, is cool. So I think there's one pretty interesting, like, talk or learning thing here. It's like reactive web apps with crystal and Svelte crystal is really cool. language I suppose for back end development. I've been interested in taking a look at it, butAntony  35:13  what was it based on?Kevin Åberg Kultalahti  35:15  So it's inspired by Ruby. Right? Okay.Antony  35:17  I mean, it's sort of makes sense to space. Yeah.Kevin Åberg Kultalahti  35:19  Yeah. What else is there?Shawn  35:22  I can give a couple of these from the Twitter side of things. So there's new community organisers popping up all the time. I think there is like, I'm tracking something like 15 small societies worldwide. Wow. Which is, it is what it is because like, there's no there's no meetings going on. So everyone's online mostly for the most part, but I do I do hope to start Svelte society Singapore soon. Yeah. So Svelte, Canada is looking for for help with the logo and everything I think Mike Nichols, who has published some some good stuff in the past, he's looking for help so anyone in Canada once you get in touch either get in touch with me or Mike Nichols and get get that going. Small Dublin has is basically up for adoption. The guy was was running it was like I'm not I'm not doing a good job maintaining this but I have a sweet URL, which is spelt dub, l dot i n. So this is Dublin. I measured all the Dublin stuff is just always on squatting on indian indian domain names randomly. But yeah, stuff is going on. I think India is kind of chugging along as well. They're organising a meetup, and I'm helping them put stuff up on YouTube as well. Yeah. So I think my message is, I guess first of all in your area particularly in in different languages, at least for Brazil is is quite active. I have no idea about Russia. But yeah,Kevin Åberg Kultalahti  36:41  that's Yeah, we don't we don't know about much from from from those guys.Antony  36:45  Svelte Russia shouldShawn  36:46  be actually huge, didn't it? We should have sold it. It's probably still huge. We just don't knowKevin Åberg Kultalahti  36:50  yet. Probably. Yeah. There's also so there's a new there's there was a guy contacted me about starting like a Svelte society, Italy, as well. Oh, yes. Interesting. I haven't gotten back to him yet. Which I just realised that. Yeah. Yeah, I think I think that's it for new stuff.Antony  37:12  I think there's one more thing actually, there's humble bundles books, right? There's a new Humble Bundle out and one of the books in there is Svelte three book. Oh, I feel like it's the book written by Italy Pale Ale, I believe works at Microsoft, I think.Kevin Åberg Kultalahti  37:30  Yep. Yeah, he did the router right. Svelte sp router.Antony  37:34  Yeah, these fellas favours it. Yeah, correct. Yeah, sure. That shows laughingShawn  37:39  I don't know why. Maybe I just like is like how we Yeah, we don't know their real names. We just know theirAntony  37:48  sweat. squeaks is laughing at me now.Shawn  37:51  Yeah, exactly. You know, yours. Yours is just Antony, wherever you go. Yeah.Antony  37:55  Yeah. Speaking slower. I can get it. Yeah,Shawn  37:59  no. Cool. But I think that's going on. And hopefully as the year continues, will will, will liven up even more.Kevin Åberg Kultalahti  38:05  Yeah, yeah, absolutely. Right. So picksAntony  38:09  us I do have another pick. Yeah. So I mean, I'm happy to go first ifKevin Åberg Kultalahti  38:13  Yeah, sorry, go for it.Antony  38:14  So my pick is a now this is one of the things like I say that I haven't purchased it but I have purchased it in a way. So we went through went shopping and we were looking at these these bone conduction headphones because my friend has them for cycling and I've got the box here but that's not really useful because now I can really see it but effectively a bone conducting headphones or bone conduction headphones, what they essentially do is they sit just to the front of your ear just not in the air and they vibrate the bones in your ear rather than using sound waves to do that they've written directly so it means that you can actually have music on in reasonably good quality and it's pretty high quality for I've listened to a reasonable volume you know quite high volume even and yet you can still hear and interact in conversations around you and you're not shouting because you're wearing headphones and you're not missing things because you're wearing headphones you can just almost communicate normally with music playing as well. It's almost like having speakers in the room. It's it's quite amazing and they're perfect for things like swimming because there's no sort of there's no actual outputs, you know, Speaker out but things that are totally waterproof and they're Bluetooth capable so you can you can have a Bluetooth to your phone while you're swimming or they can be a music on them. These particular ones called aftershocks. So we've been trying out these aftershocks ones and they're really good in terms of all those features is it's just something that's never really occurred to me but I don't wear headphones often when I'm out in the street because I like to be aware of my surroundings and this does solve that which is quite amazing for me. So yeah, my picker guest is bone conducting headphones as a rule but if you're gonna have a look at these have a look at the aftershocks cuz they're, they're a pretty good example ofShawn  39:51  that. So my dad uses these and I always wonder like, have we conclusively studied all the health impacts of vibrating your your head bone at this height.Antony  40:00  Frequency time. Someone else mentioned this as well. And I think that my response will be this would still be the same is that when you listen to music, whatever volume music works by vibrating the three bones in your ear, right? The hammer and nails, so vibrating via sound waves, or directly, surely is not as much of a muchness, right, if the music's the same volume.Shawn  40:22  It's pretty reasonable, depending on where you were.Antony  40:25  We I think you were there just in front of your Yeah, what's, what's the bone there?No, itjust transmits through the bones. Isn't that space? I don't know, to be honest, but I would feel as it sort of layman's guess. And it's not any worse or better than listening to music via sound waves are basically the same bones.Shawn  40:42  Alright, fair enough.Antony  40:44  But again, I don't I don't know. I'm not I'm not medically trained.Shawn  40:49  Yeah, anyway, it's probably just an irrational fear. Should you go first or should IKevin Åberg Kultalahti  40:53  yeah, I can go so this this Christmas I I made homemade Swedish meatballs. Which are amazing. What I don't come from IKEA.actually made them from scratch. Using a recipe. No, but but if you haven't tried, like homemade proper Swedish meatballs, you really should. It's really good. Okay. Yeah. Yeah, recipe. Yes. I'll share it in the in the notes. Nice. Sweet. Well, that'sShawn  41:28  a good pick. Solid pick. Yeah. Well, I was gonna, I'm gonna pick a friend because he helped me out recently. So this is Andrew Welch is gaijin NT on Twitter. gaijin. Like the Japanese name for foreigner, I assume his blog is at ny Studio 107 dot com. And his podcast is at dev I just generally find him to be a pretty nice, knowledgeable guy. Not not pretty, like very nice and a little bit edgy. He's funny. He just listened to any beginning introduction of he asked you like a oddball question that just throw you off your balance. And when the one time I was on i was i was really taken off guard. And I like to totally lost my train of thought. And he likes to do that to like, kind ofKevin Åberg Kultalahti  42:10  what was the was the question.Shawn  42:12  She was like, if you're like camping in the Himalayas, with like llamas and you're on your like, last tin can of food. Which JavaScript framework would you? Like? It's just like a completely unrelated setting. You just don't thinking about the situation because he's, like, very descriptive and very, like he just seems to come up with it on the spot. If you're like jumping out of an aeroplane with no parachute, which kind of CSS style do you like? It's pretty funny. But the reason I'm picking him is because he's very knowledgeable. Like, his blog has articles on tailwind Webpack, AWS Docker, and it's very, very annotated, like if you ever wanted to understand what a web pack config looks like, he's actually gone through and annotated all of it and explained it really well. And it's very nicely laid out. And yeah, I'm in disguise and been in industry for decades. And he's still doing this for fun for Yeah. And it's just like, he's the kind of developer I kind of want to be.Antony  43:03  He's not only houses andShawn  43:04  no houses. No, he's just, he's just living his life. And he's got a podcast got a bunch of friends talking about tech and making clients happy. I think i think it's it's a it's like a platonic idea of like, what a developer life could be like. And then and so like, his blog was really helpful. But then also, I had this problem recently, because I got a vertical monitor, and it wasn't filling my screen wasn't filling up the monitor with and I tweeted it out within five minutes, he actually gave me the exact right answer that I needed. So I was like, damn it, you even know, like, hardware stuff, like so so I'm pretty helpful guy. I recommend him highly. Sounds good.Antony  43:38  Sounds good. Question, actually,is anyone made? And I'm gonna say this because I don't I don't necessarily believe in these new year's resolutions. I don't. I don't think if you've got something to fix in your life, you should wait a year to some arbitrary date to do it. But no problem is one of those things that people do. Right. So So has anyone gone in?Kevin Åberg Kultalahti  43:58  I was thinking about, like, maybe doing one, but not like a proper one. It's just like one of those you do every year? Like, I'm gonna exercise more this year, or something like that? Seems like a good thing to have. Yeah,Antony  44:12  I think Kim, Shawn,Shawn  44:13  yeah, for me. So I also struggle with that idea of like, I think setting one year goals is an arbitrary length of time. And most of us, the way I put it is most of us haven't earned the right to set one year goals if we can't even set like a one month goal, or and then and then like, just like keep cutting it down. So for me, I actually blogged about this at the start of the year. They call this like a Fibonacci goal system where you sort of follow the Fibonacci sequence like you set a one day goal make sure you reach that set, then set a two day goal three day goal five day. What's nextUnknown Speaker  44:42  at the next Fibonacci one?Shawn  44:46  Yeah, apparently, if you got if you got to add, yeah, I forgot to 89. So from one all the way to 89 actually takes 232 days total, which is August 20. And with so anytime you miss a goal, because you're gonna miss them, and the problem with like, annual goals like basically you just kind of give up. Right there. Yeah, yeah, for my system, I think he kind of just stepped back one level. So if you if you miss, like the five day goal, then you go back to the three day goal, get a win. And once you have that when you try the five day goal again, and just to basically build goal reaching as a muscle, and it kind of makes the case that most people don't have the ability to make one year goals, because they don't know how to estimate goals. And you don't have the discipline to stick to it. So you kind of have to just build it up from scratch. So yeah, I mean, that's it. For me, the problem is like, what should you set the goal on? That's an open question. And I don't really have one for So writing is a base baseline thing for me. So my my January 1, one day goal was writing January 3, I did practice a computer for two days. And and then I took it took a break because I fell sick. Today I have to decide my three day goal. And right yeah, just keep going.Kevin Åberg Kultalahti  45:51  I think I'm going to try this. Yeah,Antony  45:52  I was really ready to dismiss the first like you have to earn the right to make a year goal kind of thing. Because I thought, well, I'll do what I like. But actually now you've put it in that perspective that you work your way through the Fibonacci sequence. That's really interesting. I really like that. Actually, I'm not trying to imply that, that,Shawn  46:07  obviously illusions or figurative figures are right. You know, it's justAntony  46:10  yeah, sure, sure. But it's one of the things is like, it's like, it's it seems like, I don't know, it's, it's interesting that it immediately sounds like a negative. But actually, if you think about the reasons behind it, it's really positive. Actually, I really like that interesting.Shawn  46:24  We've got to build a thing up. The reason the reason I started thinking about this, because I've been very steeped in this idea that systems are better than goals, which is this idea that just setting goals by themselves also don't tell you how to accomplish them. Sure. And also, once you reach them, you kind of lost, whereas systems are kind of just ever running every going. And they kind of just tell you what to do every day. And so a lot of systems over goals, people are just like, it's just Google's like no, no goals. And I don't think that's right, either. So I wanted a balance with goals and systems. So essentially, the the conclusion was a system of goals. And this was what I came up withKevin Åberg Kultalahti  46:56  a system. This was was this a blog post he wrote,Shawn  47:00  yeah, it's a slash people. And he goes, Yeah,Kevin Åberg Kultalahti  47:03  we'll link it in the show notes. All right, cool. So that's, that's us for for this time.Shawn  47:08  Yeah. It's always fun catching up and yeah, Happy New Year.Kevin Åberg Kultalahti  47:11  Yeah. Happy New Year, everyone. Bye. Bye bye.
1/13/202147 minutes, 8 seconds
Episode Artwork

Luke Edwards: The man with many libraries

This time we're joined by Svelte core maintainer Luke Edwards, known for his many NPM packages. We talk Cloudflare Workers, his jest alternative uvu and a bunch of other cool stuff.Guest: Luke Edwards. Twitter. GithubHosts: Kevin, Shawn, AntonyNotes: Svelte at the edge Error Component by Hyberlab Sentry  Polka Uvu Klona  svelte-preprocess-esbuild  svelte-preprocess  Cloudflare Workers Picks: Rummikub Google Stadia  Cookie Clicker  Monopoly Deal Transcription:Kevin Åberg Kultalahti  0:00  Hello, everyone. Welcome to another episode of Svelte radio. Today we have another guest on the show. But first introductions. I'm Kevin, and I run a site called Svelte school where I teach people about Svelte. And yeah, that's me. Shawn  0:15  I'm Shawn. I work as a developer advocate at AWS. And I guess I do stuff on this whole Twitter's Antony  0:24  Hi, I'm Antony. I'm the CTO of a startup called biank. I'm a supposed Svelte maintainer. And yeah, that's about it really, I'm also going to introduce the guest, because I know everything there is to know about Luke. So our guest is Luke. And Luke is not Australian. That's the first most important thing there. And so Luke Edwards is an Australian Californian, that's very important to know. He's also a co maintainer of Svelte. And he's the creator of polka, which is an express alternative, which is focused around speed. And also modularity, I believe. And he's been recently involved in deploying loads of stuff to CloudFlare work, which is interesting, this whole talk on that you can watch, it's also worth mentioning that Luke owns the most number of open source modules on NPM out of anyone. And that's a fact, really, anything you want to add to that, that's not true.Luke Edwards  1:20  And that's pretty much it, I do do a lot of stuff in the open source world. And I imagine we'll talk about some of that. But for the most part, just keep my head down and enjoy building things. So that's kind of what that means contract work or salary positions doesn't really matter. I just love to get my get my hands dirty.Antony  1:37   So you don't code for money. As a rule, you code for passion. And money is a convenient side, Luke Edwards  1:42  I code for interest, I kind of tell I turn away a lot of not a lot. But I turn away clients with that sometimes, just because if I if I'm not interested in it, then it's not gonna turn out well, and I'm gonna find excuses to try to stop doing it. Antony  1:56  Nice. It's funny, because I saw Twitter so quite recently about actually, what got you into tech. And the amount of people who replied by just showing a little bullet emoji was quite shocking. Actually, I couldn't imagine being it just for the money just wouldn't work for me. Shawn  2:11  I mean, I'd say I'd say it's partially for the money for me.Antony  2:16  Fair enough. I mean, it's not you have a passion in it. Right. You have you you enjoy what you do you enjoy advocating as well, and that sort of thing. But just for the money, just, and they enjoy life, right. Enjoy life first. And then yeah, like,Kevin Åberg Kultalahti  2:29   I don't I don't think I could see myself doing something I didn't want to do. Don't want to do Antony  2:35  No, definitely not. Luke Edwards  2:37  It's also kind of amazing, because like, some people would make like hard career changes, right? Where they're like struggling and stuff, and they'll invest the six months, whatever it is, maybe less, and, like, dramatically turn their lives around. So it does start as just money. But like it's so that they can actually do something else and get by better. That's a good point. Maybe people can grow a passion for it when they start doing it. Maybe that's how they got into it. But that's not how they how they were they were maybe Kevin Åberg Kultalahti  3:05  i think that's that's definitely true. Luke Edwards  3:07  I think that's actually kind of at the core how I started to like, I actually was like, enrolled in med school. I hadn't started I was doing all the like, prereqs and stuff. Antony  3:16  wowLuke Edwards  3:16  I guess, disclaimer, self taught. But I was maintaining a nutrition blog to kind of like Chronicle my journey through what would be med school and stuff. And as I'm preparing and like working on this, how do I make my WordPress do expert? How do I make this better? I just unfolded more and more. And at some point, like someone just handed me a client said, Hey, do you think you can build this? Sure, I'll give it a crack. And I got paid. I was like, Well, why? Why am I gonna sign my life away for another like six to 10 years before I start getting paid? If I can just do this now? And yeah, then a passion developed? Because just questions be folded more questions, though.Kevin Åberg Kultalahti  3:56  So you started in WordPress, then? Yeah, your coding career? Yeah. Yeah.Luke Edwards  4:02  Luckily, I have not touched it. And it's been a decade, but it's still alive. It's still kicking.Kevin Åberg Kultalahti  4:10  So can you take us through what what your journey has been from WordPress to where you are now.Luke Edwards  4:18  So I mostly started as a designer, actually. So I was doing my own WordPress stuff. And you always focus on design, and I wanted to cool carousels and stuff. So my first that first client I was talking about was mostly a design work. And then I just implemented it and like basic HTML, CSS, which was all it needed, was mostly design base, and then, you know, a cup that lended itself to other projects that basically I got lucky and it became like word of mouth thing because they knew no one. So all those sort of projects just sort of like honed my design skill set, but then it also honed more front end work. So I basically I started going from backbone route into Marionette and then into I stuck with Riot for a long time. But basically a lot of fun and work in that at some point over, like the next three or four years I started having to work with, or alongside backend engineers, so back into WordPress back into custom PHP stacks, so a lot of Code Igniter, a lot of beginning Laravel stuff. And so I just that gave me some the beginnings of the full stack experience. And then I became more full stack key on future clients, same clients or new ones, and basically lived with a foot in each world for a while. Well, I guess three worlds because there's design in there, too. But yeah, and then so the PHP stuff eventually evolved into elixir. And then I came full circle back into node j. s world, because I was thinking why elixir was kind of starting not to kind of it was definitely still in its in its infancy, a lot more people have heard about it now, which is a good thing, check it out, if you haven't the. So I started doing a lot more Node JS just because serverless was popping up and just throw a lot more companies working with Node JS at the time. And it was just easier to market yourself as a full stack. contractor when you know, you can prove your JavaScript skills on both front end and back end. And so that's kind of where I've been I've dabbled in other stuff along the way. But that's kind of the core synopsis of where things are at.Kevin Åberg Kultalahti  6:28  So have you tried any of the other front end frameworks like React? Luke Edwards  6:32  Yeah, I have them all. Just because as a contractor, you don't really have a choice, you just have to be able to jump into whatever you're doing. It's not the common case that you're starting something from scratch. So it's just whatever they've got, you got to work with that try to improve it, building features, whatever it is, so I've done everything except for anything after Angular two. Right. But like all the other, I have refused to touch Angular after to know, like shots fired, I just, I there's no, like new utility format for me with it anymore. And it's not all that common anymore, either. At least on the contracts. Shawn  7:12  So you've been you've been a contractor for this all this long. Like what I've been up to been tempted to be an employee.Luke Edwards  7:19  I was for the most the majority of the last decade. But I did, sometimes I would sign on for like, a long term contract, like with a couple companies. But for the last my longest was with the company for two years, they were transitioning into an advertising company. And so that's where I basically stopped at the beginning of this year, just before COVID lockdown stuff. So good timing on that. But see, I was the I was there for two years and doing all their backend stuff, all the architecture, a lot of fun. And but luckily, people came in to do a front end work toAntony  7:55  Something is kind of weird, because I don't think contracting is as common in the US as it is in the UK.Luke Edwards  8:00  I don't think it is. I like if I tell new friends or extended relatives I haven't met before, like I'm contracting, I get a little like, I think it's just a way to say unemployed.Antony  8:14  Yeah, it's definitely a definitely different market. And it's changed over here quite recently, I think because of the whole tax crackdown, stuff like that, but contracting used to be where people would aim for. And it's kind of weird when Shawn says like, what you tend to be an employee. It almost never crossed my mind when I was contracting. And then one day I did it. And I spent all the time regretting it and thinking when can I go back contracting again, it's really different. Luke Edwards  8:35  I was definitely feeling that towards like the halfway mark of my last of my salary position I was talking about just the reason I don't know if this is how like I naturally am or if contracting just like promoted it. But I tend to have a project ADD, right, like, hence all the modules. But so if, if I'm working on a contracted thing, there's a there's a fixed start and end date, for the most part. So like most that end date is gone, has come and gone, I can move on to something else, either a new plant entirely or just some other new project and like that works. But if I'm staring at the same stuff for too long, I tend to my eyes tend to glaze over.Antony  9:16  Yeah, that's fair enough.Shawn  9:17  My impression of how it works in the UK, is that like, that's actually how you get the better paying jobs is you contract because there's some sort of rule where you have to, if you go above a certain amount, then then that's there's some tax issue is that I assume I assume that's what Anthony's referring to.Antony  9:34  Yeah, there's loads of weird rules. They've changed it recently. Like when I stopped contracting, which is like four or five years ago now they changed all the tax rules around it. But it used to be that you're a company so you only paid corporation tax. There were there were a bunch of tax breaks but also usually get paid maybe three times as much as a permanent role and the equivalent so anyone with any seniority would go into contracting because it it made sense you know the time but I think a lot of people abused the taxing and try to pay basically rotax, they got a lot of trouble, the government cracked down on it. And because it's kind of an easy, easy win for them. So it's in terms of payment wise, it's become a lot less attractive. And they've removed a lot of the protections you had as a contractor. Because when I was contracting, for example, I was basically an employee anyway, I was treated like an employee by the company, they, I didn't have to get all the shit work, I had the good work and stuff like that it wasn't anything like a kind of you come in because you can tackle these problems, or we don't care about you or anything like that. So it's very, it's very different market in the UK, or it was than it is in other countries.Shawn  10:34  It's in the US. It's like freelancing, or consulting as well. These are different terms that people use. Antony  10:39  Yeah, yeah. contracting usually means you have a limited company, and you treat yourself as a company. You go in, and they don't tell you when to come in. They just say, this is what you want. We want you to do, do it kind of thing. And you act as if you're a company kind of thing.Kevin Åberg Kultalahti  10:53  Sounds about right. All right. Yeah. Should we get into some? Some on topic stuff? Svelte stuff? Yeah. So you You did a talk at Svelte summit, about Cloudflare Workers, right. server side rendering? Yeah. What was that about? So,Luke Edwards  11:10  I mean, what, where do you want me to start, I guess I should give like a primer onKevin Åberg Kultalahti  11:14  workers or just just a summary of the talk. Right?Luke Edwards  11:19  Okay. So basically, I spent, probably, like, 20 minutes out of my 30 minutes, kind of explaining what workers are on in the front, from a front end developers point of view, right. Like, there's service workers, which like, some people are happy about, some are mad about web workers, worthless, which didn't matter. But basically, I give this little like timeline of what workers are and how we may already be familiar with them. And then how powerful workers are kind of the same thing, but in a server, the same thing as a service worker, but in a in a one of their servers. And then the big reveal sort of thing, which says that CloudFlare servers are everywhere. And so that means that your code will run everywhere. And because it's the way CloudFlare workers themselves are architected, they're basically always on all the time, but you're not paying for that, which is what you would get with a traditional global architecture, like one that I set up at my last company, which you pay for it 24 seven, so hugely, way cheaper. And then I went through a couple of demos to show you like how you can just get started with Svelte server side rendered within a worker. And I deployed two demos of that one word, it was like mostly, mostly manual. So it kind of showed you like what that repos still alive. So shows you all the manual configurations and how you would go through it step by step. And then like the last 30 seconds of the talk, I revealed this new tool called freshie, which is kind of all those configurations and build steps done for you so that with pressure you can target, you can build your app as a as if you would with a sapper or next js and then build it in a way that's ready for workers or for node js, whatever you want, which obviously has overlap with the Svelte kit project, but same sort of thing. So it was just the summary is turning into as long as the talk but the whole thing versus this is what workers are, this is how you can exploit them to your benefit as a salt developer.Kevin Åberg Kultalahti  13:19  Cool. So speaking of Svelte kit, and Cloudflare, I'm a huge Cloudflare worker fan myself, so I just got to ask it. Are you working on a on an adapter forLuke Edwards  13:31  there is one being worked on, I personally haven't worked on it yet, just because Svelte kit itself is still kind of its like, interface design is a little bit in flux still. So some of the way the current adapters are, which are all node focus, there's a lot of assumptions within spell kit itself that like we have a node back end, but that's not true with the worker. So half half Nelson, I think is the one who's done the initial adapter, or and he's sort of relaying his findings with what needs to change within the current Svelte kit to accommodate this freshly solved just by basically duplicating the same routing logic, whatever, in different ways for each adapter, which is duplication, but like each of those things only exist once for package. So it's not too bad.Antony  14:23  I think and what Yeah, what we found is that, so I've written these these two adapters for Svelte kit and Rich's written one, and we've rewritten them all at least three times. But what we found every time we've written them as it becomes more and more concise, but they've all boiled down to essentially the same bit of code because everything runs on AWS lambda underneath. Whereas the CloudFlare workers like the access is a completely different approach. It doesn't have noticed it doesn't have a library need. It's very much I've got an attacking myself actually because I have a few so lost. I think it's made us think about what the scope of an adapter is and what it should do as well. Because originally we had to see this and adapt to my deploy the code as well. But what that comes out as is we'd have 100 different adapters for every single possible deployment platform, when fundamentally they do the same thing. So, yeah, it's very influx. And yeah, like Luke says it is being worked on. It's just 100 game changing ones.Shawn  15:19  I think this choice of being node based is interesting. I do see that more design decisions on projects are like, should we assume node because of environments like Deno, cloudflare workers, like these are all just, I guess, isolated space? I don't I don't I like the technical knowledge to go any further. But it seems like there's there's a slow movement in JS to diversify away against from node. I don't know if you guys see this as well.Kevin Åberg Kultalahti  15:49  Hmm. So basically, like, node, I guess, Cloudflare? Yeah. Yeah. MaybeShawn  15:54  like not assuming no API's?Kevin Åberg Kultalahti  15:56  Yeah. Yeah, like a good thing, though.Antony  16:00  It's weird, because people always describe JavaScript as a bad language. I think ES6 has kind of laid a lot. There's concerns. So maybe it's now that people feel the language is so good, that we just need to be able to run that same language across multiple platforms, a bit like the JVM does for for Java and groovy and closure, and all every other Scala, I've forgotten even how many languages around the JVM, but all of them, maybe that's maybe that's how we're going with JavaScript. I don't know what it's where we're going with the ES6 perhaps I don't know.Luke Edwards  16:31  I think the only like, real limitation is when you get into things like like file system API's. Right? And I don't even know if Deno has a I know it has that file system API. But I don't know if it has one that will magically work in the browser. Right. Like, maybe that's where they draw the hard line, too. But I think until you solve that, or things like that, there will always be some sort of division. But yeah, I mean, I agree that like JavaScript should be able to just run everywhere, because that's sort of the whole like tagline, right? Like JavaScript, it just runs unless you need compilers, and whatever else. But yeah,Antony  17:08  I think it's always been a missing puzzle piece for me is it's a puzzle piece that people like, we like you, like rich actually have that you build something that's concise, but so generic that it can work from a multitude of scenarios. And this is the same now because we're saying that Svelte kit can run on multiple different backends or hosting platforms, we have to find the right abstraction level that we can take a Svelte cap and pump it into this and come up with something that run that platform. And it's something I've never, I've never really had the opportunity to do before, but also never really figured that I had a plan for doing that. How do you build a framework? Because I don't know how the world's going to use it kind of thing. And it's something I think some people have, and some people just don't. And I'm definitely one of those ones who doesn't.Kevin Åberg Kultalahti  17:51  Right. So yesterday, I saw you posted a new library. Another one, or I don't know what you would call it, maybe not a library, but a preprocessor. I guess.Luke Edwards  18:02  Yeah, that one's more of like a, it's like a proof of concept sort of thing. The so for everyone listening, it's svelte-preprocess-esbuild, and there's esbuild is this magical golang driven bundler, which also happens to transpile JavaScript and TypeScript that like blazingly fast speeds. So I've seen some esbuild Svelte, like combinations already in the community. But a lot of them just don't bother dealing with TypeScript within the script tags. And like so you'll have various build there. But then you these things are just passing the TypeScript through, like regular TypeScript, which is slow or slower, then yes, build. So I was like, well, you just have habeas, we'll do both, like what's not have to do both. And what's the problem? So I found found out that there are problems, and I'm working to fix them. But the whole project itself is sort of meant to be a proof of concept or like a guinea pig, because it shouldn't live within Svelte preprocessor itself. So this is kind of a way to just like test tests in the real world and like, get some some mileage on it before bringing that risk, into Svelte, we processed correctly. And the reason that's possible is because I think as of the most recent major version, Svelte preprocessed doesn't do type checking anymore. So yes, bill doesn't do type checking. So now their goals sort of align.Shawn  19:30  Gotcha. Yeah. So I mean, that kind of brings me to a question, I guess I always wondered. But a small piece of pre process used to be a third party sort of extension to Svelte and I think it's been brought in to spell like the Svelte org as part of the TypeScript support movement. Is that is that something that's basically formally managed by the the core team now? Is that how it works, right?Luke Edwards  19:54  The people who are already working on stop the process before the migration are still the ones working on it. They're just all So maintainers, so they're just working on the official orc project now, but it's the same project is relocated. Shawn  20:07  And you're thinking that the future is for pre process might be, yes buildLuke Edwards  20:10  for the TypeScript integration. So the way that works is basically, it's set up with a bunch of Transformers ready to go, so long as you have the correct flags within your component markup directly. So for TypeScript, that might mean Lang equals Ts Lang was TypeScript, you know, source equals, you know, there's a bunch of triggers, but it will then only successfully do something if you have the TypeScript peer dependency installed. So it doesn't bring everything with you because it does a dozen or more things, post CSS, sass, eyeless pug a bunch of stuff. So it's just, it's pre configured to do what you want, but you have to bring the engine to do those things.Antony  20:50  This is um, this is news to me. I'm, I'm learning a lot on this podcast.Luke Edwards  20:56  Admittedly, I haven't used most of it. Like there's I know there's a dozen or almost a dozen, but it's a lot of spirits. Every fun and tech you can think of is already pre configured through Svelte pre process and a lot of things that I think wouldn't make sense. Again, like pug not not to pick on it. ButAntony  21:15  I agree.Luke Edwards  21:16  Yeah, it's just ready to go. And you just have to instal one thing. And you're done. It's a nice userKevin Åberg Kultalahti  21:21  experience, developer experience. So it's kind of an interesting thing that you you're building it in, in public sort of, is I think, you guys always push for, for like someone to do it in public first, and then it can be brought in to Svelte. I think I've heard that several times. It's a good thing. It's like the it's like the actions package. You started, Shawn?Shawn  21:50  Yeah, I haven't touched it recently. But yeah, someday we'll, we'll get that merged.Antony  21:55  I mean, people people ask, people ask how to contribute a lot. And I think that's a good way. If you make a product that is that is good enough, then there's no reason that couldn't become part of like the core organisation. It's a good way to sort of sort of get your contribution in really,Luke Edwards  22:12  yeah, yeah. Another example this and I hope it's fine to mention, but now I'm from now I'm forgetting the name. Anyway, in the maintainer chat, there was a Antony Maybe you remember, remember details, but there was a, like an error boundary component that was shared from a spell library. And I never would have thought to use to set up an opponent that way. And I saw it was news to me. It was awesome. And regicide, too. And I was also surprised, and a bunch of us were surprised and impressed by it. So now, this is not an ongoing conversation. But briefly, in the moment, we talked about, like should something like this be part of core Svelte? Because it Yeah, was such like, its utility was obvious, as soon as you saw it, and there was enough documentation examples there. That it was just, it's one of those things where like an RFC would have been good by like seeing it actually, like alive and working and proven. Is is just like, okay, you can't really argue with that.Antony  23:11  Yeah. So this is this is this is crown frameworks and error boundary components. So I think Jason made it but actually half Nelson was the one who originally conceived the idea. What it does is it kind of Monkey patches, the one a Svelte component, so that you can define a perimeter around in your component hierarchy, where errors will be caught and dealt with in line. And I think other frameworks kind of have this already. And we don't so they made this component and published it because they are building like a Shopify kind of equivalent in Svelte and it's something I've wanted for quite a long time. And there was like an issue about it, there's no formalised see, like the access, but there's a, an issue about it. And it does work really well, the monkey patching is concerning, because obviously, if we decide to change the way components are built, it will break. So there's that kind of watch out. And I thought, well, this is probably pretty valuable. It works. It works well. And it's got a it's got a kind of a nice felt fluent UI, not UI, but kind of interface. So yeah, and it actually was quite surprised, because you know, maybe I spent a lot of time in the community, but people hadn't seen this and exposed to it. So those those people were quite impressed with it. So I'm happy about that. And it hopefully will be discussed the next maintainers meet if I can get it highly high up in the list. The original authors of it are very interested in making parts of course, well, I think a PR, but obviously, they all have real jobs. So they're not going to promise anything before before the end of the year or even even maybe January. So we'll see how that goes. But But yeah, it's definitely it's definitely something that we'd like to have because it's super valuable to have to catch errors within a certain hierarchy and and deal with them there rather than your whole application exploding.Kevin Åberg Kultalahti  24:51  Yeah, so Didn't you add this add this to Beyonk? I think you were talking about I have yeah,Antony  24:57  check out now uses it. So it Anything, anything that's in the most pragmatic critical part of the application will now be caught. And what we did actually, we, we instal Sentry. Sentry for those who don't know, it catches errors and logs them and gives you a stack trace in it. And they're kind of isolated system. So you can see when users are having front end, there is no side that you can't otherwise see in your logs. I talked to the guys at Sentry about what's going on here. You know, why isn't there a Svelte integration kind of trolling them, really, because you don't have to do everything else? And then they replied, saying, well, because Svelte doesn't support it, basically. I was like, What? So? So yeah, I then sort of start investigating push the issue a bit. And hopefully, there'll be some more news soon, with a bit of luck.Kevin Åberg Kultalahti  25:45  Exciting. So speaking of the of the maintainers meeting, you guys, but every every other week or so? Or is that every other month?Luke Edwards  25:53  Once a month? Once a month? Yeah, typically towards the end of the month, but with thanksgiving in the US and Christmas, both at the end of the month, it's the end of the year, this year is getting a little dodgy. I'm not sure if that's gonna happen this month.Antony  26:08  We'll see. Some of the year will definitely end it. Should you? Yeah,Kevin Åberg Kultalahti  26:15  Can you guys talk about anything that's, that might be coming up. That might be interesting.Luke Edwards  26:19  Well, I mean, Svelte kit, I mean, it will undoubtedly be talked about, and it will probably be the majority of the meeting, right. But yeah, like Anthony alluded to, there's usually a list of things that like come up during the month that we want to talk about, and then it's just a matter of accumulating to see like the order that they get talked in, sometimes we will, in meetings past, we would end up talking about, we'd have a list of like seven or eight. And like sapra would be second or third on the list. And then we just end up talking about sapper for almost the entire meeting. So that whatever we didn't get to just becomes part of the next next month's list.Antony  26:56  And the thing that's cool sort of reason for Svelte kit being so important, because the reason saffa dominated was cuz it is a bit janky in terms of code bases, it's kind of evolved, and it's not really a good place to maintain and stuff. So certainly, it'll be nice to have that kind of off the list. Maybe Svelte will take his place he knows, but it's initially at the start of this maintainers chat. It was difficult to get past issues, because they were big issues. But I will say that we've definitely got through these big issues now. And things are a lot more free flowing, I guess, which is which is definitely a good sign. And slots was another one that just had a lot of things around it people wanted the original design was more limited. The people needed it to be and that got attacked pretty quickly. In fact, I mean, it's it's Tammy how just attacked most of it. But yeah, that's what he does his machine.Luke Edwards  27:42  Yeah, big props.Unknown Speaker  27:44  Yeah,Luke Edwards  27:45  I think that's one thing to highlight, though is the big, like, the bullet to me, at least the major value in Svelte kit is, is its flexibility. So like sapra was great, especially the beginning because it did if you had a use case that fit sapper like it worked really well, right. But as time went on, your needs may change, you may need to add things you may need to do more complex things because your apps evolve. And it's that fitting tends to not evolve with it because it was so opinionated is a strong word. But it was so good at just what it did that it wasn't really possible to have it move beyond and so there have been really good community efforts for other solutions routed by alder, j. s. Forgetting some but there are multiple out there. And so Svelte K is sort of the sapper 2.0 where it's going to be really good at a bunch of different things. So that you know, you can your applications can evolve with the same tool over time and not hit some sort of ceiling and be like, okay, shoot nowAntony  28:43  what do I use? And modular? probably worth mentioning more modular? Cuz I think that's a big, big theme is modularity, being able to sort of pull out things you don't want and put things in that you do want? Right?Kevin Åberg Kultalahti  28:59  Yeah, right. So CloudFlare workers, I want to I want to talk more about CloudFlare workers. Okay, well, what's so great about them?Luke Edwards  29:07  Well, they're, they're just incredibly quick, and they're practically free. So I mean, most people, it's something like $5, and you get 10 million requests a month, right? And then it's 50 cents for every million beyond that. I mean, like, you just, you can't beat that, right. And they also just execute quicker. So if you have something like a Google function or an AWS lambda, like Bay, they have to start up and most of what that those platforms are doing over the years is trying to make those startups smaller. But like, workers launched with effectively zero startup, I think it's less than shoot, don't quote me, it's either less than 10 milliseconds, or like 15 microseconds startup. There's, those are the numbers that come to mind, but it's, it's one of those.Antony  29:54  Why Why is that the case? Luke Edwards  29:56  So again, don't quote me. It has to do with how they How they store your upload. So they support multiple languages, and all of them have some relation to WASM. So they, I think what they do is they compile it on upload to wasm or some Islip whatever, so that it's basically already in this ready to go state. So that instead of like starting a node process or starting a whatever, it's it isn't there and an ongoing, again, this is how I imagine it an ongoing V8 engine, or something is just filling in these different files. They Okay, you go, you go, your turn your turn. And so it's there's no parsing time, there's no Ready set and go it's just goAntony  30:41  is essentially, essentially assembly language running on a potentially a processor. So something like it's not it's not a interpreted which, which node, JavaScript obviously are a status, right. Interesting is kind of backwards from where we came from.Luke Edwards  30:53  Yeah. And it happens on Upload. And I thought, when I first ran into that, I thought it was a bug. But basically, it's understanding your code when you deploy it. So the reason I ran into this as I was working on a validation library, which I still haven't finished, but it the core of it relied on like a new function, right? Like you would you're programmatically creating a new function. And then the whole library was just creating this function body string so that it can be evaluated. But that's unsafe, right. And so CloudFlare workers has this unsafe protection. So it disallows the function, disallows eval, and it was detecting that within 30 milliseconds of me uploading it. So the entire request on my side was 30 milliseconds, and it came back saying, hey, online is deeply nested line on like, line 200, whatever. It's saying, you're using new function, you can't do that. So it's doing some amount of parsing, and then I remembered, oh, it's doing isolates in the background. So it has to know what's going on.Kevin Åberg Kultalahti  31:54  Okay. I think like, all of these, like, serverless, I don't know what to call them, like services, or I can't even imagine how complicated they they must be to, like, make from scratch. So it's pretty, pretty cool.Luke Edwards  32:14  I imagine it's I know, satisfying, though.Antony  32:16  Yeah, I mean, once you once you've got that running with no with no cold start time, and then it's been the biggest complaint and every service provider in the world, cold start time, then that's pretty impressive. I was talking to a friend of mine, actually, he was talking about fastly doing a similar sort of thing. And it he said that there is a lot of complexity with components and wasum. Because, yeah, you can't rely on all those libraries being available that you that you normally have, you just can't bring everything in and to dos. Like it's like writing isomorphic code on the client, you don't have things like process, you don't have file system, all that kind of stuff. So yeah, I mentioned it's deeply complicated, in fact, so that people who nail that are going to be the new the new AWS. Sorry, Shawn, but it's true. I think. Yeah, yeah. Well,Shawn  33:00  I always thought that. So the missing part is state, right. Like, and that was this was pretty excited to see that the launch this thing, new durable object thing, just actually strongly consistent. That that seemed, at that point, I was just like, Okay, well, fair, you you own this, like, this is this is amazing. I want to buy your stock.Kevin Åberg Kultalahti  33:19  You know, I I actually did buy Cloudflare stock the otherShawn  33:23  week, that'd be totally dominating this, this new cloud. So it's,Kevin Åberg Kultalahti  33:27  I mean, the drawback is that you can't really work, right? You can't really pull in any node library, right? Well, for worker, can youAntony  33:37  because of the wasm thing,Luke Edwards  33:40  Well you can't pull everything, but you can certainly pull a lot of things, right. Like, it depends on how specific like the module was, right? Like, most know, libraries are so big, that it's kind of impossible to know everything that's going on through all the dependency chain. But something like class x, right, like my class names, alternative thing like that doesn't care what you're running on. It's just a function that returns a string.Kevin Åberg Kultalahti  34:05  Yeah. Yeah. So speaking of, of your libraries and stuff. So what motivates you usually to like, build these? They're quite quite small, right? They they're very specific to certain problems.Luke Edwards  34:20  Yeah. It's usually like curiosity, sometimes anger, but it's usually a curiosity. So it's just to see like what's going on under the hood. And so I say anger jokingly but like, if I'm using something and I'm realising that everything else I have in my application is small, or is running pretty smoothly, but using this one thing or waiting for this one thing to run doesn't feel quite right, then that's going to pique my interest to say, okay, what's going on? They're like, why? This is just an HTTP request. Why is this thing like consuming hundreds of megabytes of memory or why is it failing half the time? Why do I have to do this or if this and that is So that kind of, you can call it like some form of OCD, I guess it's just being particular. And I feel like things aren't exactly right. And so that kind of just goes somewhere into the back of my mind to say, Okay, this probably should, should or could be done better. And then I get to at some point, and then I basically treat each one like a puzzle. So I add this extra constraint of making it either as small or as fast as possible, hopefully, both. But that's usually not the case. And just see what I can do with it. But it does. Well, unless unless it's like a necessary thing. Like, unless it's an application I'm actually working on and that bottleneck is currently present. It's some of these things can take months to refine and to, to figure out just because it is a puzzle, and it is for fun, but not most, pretty much. It is most but 90 something percent of the time, something doesn't get released until it's I know, it actually works. And it has been used in production stuff, either my own or client stuff to say like, okay, like it didn't make it did satisfy the requirements I had for it. And then so I try to have this unspoken promise that like, if I release, it should work unless it's like, a not dot zero dot whatever release or has like a work in progress mentioned somewhere on it.Shawn  36:21  But yeah, I mean, I'll mention one of the many libraries and that's something I admire, but also and a bit terrified by but so so I think it's worth mentioning that I think polka and serve in sad, sade, sade and sade a oneLuke Edwards  36:39  Sade the musician.Shawn  36:41  It's a I don't know who that is COI frameworkLuke Edwards  36:43  that's as smooth as Saudis voice or something. That's the tagline should listen.Shawn  36:50  All right, well, yeah, we'll mention it. Yeah. Like these are all used in this whole ecosystem, like I think serve is the default way sapper was serving files. And that's, that's pretty awesome. And it's pretty notable how fast it is. That was actually one of the first things that drew me into Svelte. I was like, okay, it's not just about the compiler. It's also about the kind of people that are drawn to Svelte will also not tolerate the slowness that is in the rest of the JS ecosystem. So I think you you are one of my prime examples of like, yeah, like, if it's not good enough, you're, you're rewriting it, and you're not afraid to do so. Whereas I would?Luke Edwards  37:26  Yeah, it is. It is definitely daunting. So one, one, thank you. But to like an example, this was just this week, Josh Duff is listening. He and I have been talking about me, well, it was my fault. But I mentioned possibly having like another fetch another like, node fetch and node, but not node fetch, just because node fetch, I know, it's being reworked. But it's pretty big. And most of the time, you don't care about like the rest of what node fetch is doing. So I said, like, Oh, just make another one. But it's kind of a bitch. And I'm sure that the node patch teams node knows this and props to them. But if my my do is to set out like a very simple fetch compliant wrapper, so that you can use Fetch as like it, like you would in the browser, button node. But I was like thinking, well, so many things are built on fetch. And so many things are built on like those properties of fish that I don't use, but like the streams API, which everyone uses in the browser. And so so many fetch based wrappers would break in my current version of fetch just because it implements streams. Well, this is where the bitchiness comes in. Because implementing, like readable streams in a browser way which node has always had streams, but not the browser's versions. Is this becoming this huge? undertaking? And so yeah, it can take a while. And I, I guess, one thing to mention, because people ask me a lot is why the reason I have so many of these, like mode variants of my modules, like deepl has equal equal light. phono has three modes, a lot of things have modes. And the reason is because like, I go through so many iterations of modules that like, I'm trying to figure out what I want. But I'm also thinking, well, not in this fetch case, like not everyone's going to care about like the streams API, so they can just pull in the version that they want. So that if you want numbers now, if you want, like the full node fetch, it will be like a kilobyte and a half or something, right, which is mostly the streams stuff. But if you just want to fire off an HTTP requests, that uses a fetch looking API, like s 400 bytes, right. And so it's just, again, most people don't care, especially in a Node JS context. But if you're doing something like workers, right or using building a Svelte kit that can do a can have movable back ends, you know, what your HTTP requests are going to look like. So you can just pull in a package that will satisfy all of those different backends a browser version, a Node JS version and a work er version if it's different, and just pull that in, and it's ready to go. So that's, that's kind of what motivates me with all these different modes. But it does mean that things take longer to finalise, because I'm thinking of all these different use cases for how they might fit.Kevin Åberg Kultalahti  40:16  So speaking of, of Klona, I have to ask, is the name meant to be the Swedish word for clone?Luke Edwards  40:26  Yeah. So I think it says on the top, it says like, why clone and it says, it means clone and Swedish. And then it also says, Why? Why the sheep logo? And because it's Dolly? So Dolly the sheep was for Sally, right? Oh, and so it's a sheep becoming a sheep? Yep. I had probably, like, more fun than I should have had making that logo.Shawn  40:48  But, but I do notice that you you spend time you spend time with the polish like the the logos, the banners, like these are? Yeah, it's nice touches.Luke Edwards  40:58  Yeah, sometimes not all the time. But if if something comes to mind, that seems like it could work I go for sometimes it affects the name choice, too. If I can help it. Shawn  41:07  Are you squatting on any good names? Okay, I'll tell you, I'll tell you my squat. So I have happier. So it's, it's, and I also have prettier so that those can do that.Luke Edwards  41:24  No, I don't I don't think I have any. I have a name that I thought. So I only try to use names or reserved names if I like have a use for them. Because I have some may I don't want to end up like in a situation where I get banned or whatever from NPM for squatting on names. I don't know just risk aversion, I guess. But one name I do have that I planned on using but didn't was y2k. And it's not really a good name. But I feel like I could do something with it.Kevin Åberg Kultalahti  41:53  Yeah, I feel like in general for for libraries and repositories on GitHub. Like it's it's always nice to see good README or like, good, like the first impression is more important than what most people would think.Luke Edwards  42:08  I think it should be something you want to read. Read Me, it's one of those ironic names. Like I get this client all the time you leave them this, like really complex or complex, thorough README for them to read to say, like, this is what I did for you. Here's how to use it. And they don't read it. It's like that's, that's what that's what the file is called. Read Me.Kevin Åberg Kultalahti  42:28  Yeah. All right. Any, any last few questions?Shawn  42:32  Well, I wanted to especially highlight uvu, which is a test runner that i think i think it's been one of my more successful launches this year. Yeah, I agree. Not Not Not like I pay super close attention. But it seems like it's worth talking about because most people think justice, one of the most universally loved tools, according to the surveys, and you made a competitor.Luke Edwards  42:54  Yeah, maybe not in terms of like utility, but I definitely had a competitor that competes on the speed side, right, like so I I'll have, the reason I made is because I was working with a client that had a massive jest suite, and it ran. And it's not specific to them. But it took minutes to finish. And it was only something like 100 suites, or something which may have been 1000, or two assertions, but like 100 isn't that much at all. And then so I spent a weekend converting it into uvu. And it was, I mean, so if I'm talking minutes for Jess, it was like 8.9 something seconds with was just like, jest was doing so much, like setup and prep work and stuff. And a lot of it, admittedly, was how they were doing hooks, but like, because just was set up. The jest files are set up in a way that made it not obvious that their hooks were sort of running more than they should have been, it kind of just didn't feel right. And even at its best case scenario, you're looking at, like, probably would have been 45 seconds versus the same eight seconds. So it's still slower than the day. But you, as of today, you can do, for example, browser testing out of the box, which is a JSON back end anyway. But that's not something you can do with UI out of the box unless you set up a register hook or something. And I have examples of that in the repository. So you can definitely do it. But it's not going back to the modes conversation a second ago, like I don't, I try not to put anything things in by default, unless I think it's going to be used by default. So I don't think most cases are going to want j s Dom by default, so I don't include it, but it's easily easily added if you do want it.Shawn  44:35  Awesome. Cool. Well, all right. Thanks for all your open source.Kevin Åberg Kultalahti  44:40  Yeah, so do you guys have picks?Antony  44:47  We've again, informed the guests haveKevin Åberg Kultalahti  44:51  heard their show before I knowLuke Edwards  44:52  I know what it is.Shawn  44:56  Yeah, and it's mostly just like whatever we enjoy as well. Right? Yeah. Yeah, you could just beKevin Åberg Kultalahti  45:00  like the weather series. Yeah. Yeah, I don't actually have one. This this is this the first episode without pics? Well, it'd be fun.Luke Edwards  45:12  Yeah, it doesn't have to be tech related, right?Shawn  45:14  Doesn't have to be. Okay.Luke Edwards  45:16  I haven't pick. Okay. Okay, so it's a game called Rama cube, which is kind of an old game if some people may have never heard of it. But basically, it's like rummy with cards if you've ever played with it, but it's with tiles. And I like it as a developer. Because when you have down these games with three or four, whatever, and it's either in strips of the Shawn habit.Shawn  45:37  Oh, so that looks like a family. Yeah, it's a knockoff Rami Rami coupe thing. Yeah, the same thing and just use the numbers.Luke Edwards  45:45  Yeah, you just need numbers. And you can play with cards. If you don't happen to have the game. It's basically two decks, but with two Joker's, which are the wild cards. And I love it as a developer, because it's basically refactoring the whole time. So like, ladies, play these games down. Sean's laughing because he knows but anything that's done on the board is open to be regrouped and rearranged. So you have to keep track of all these these pieces and arrange new games or new valid games using those pieces and not having any invalid games before your time runs out. So it's,Antony  46:19  it's pretty parents have it? I think they must. I think the musty they've gotLuke Edwards  46:23  I recommend stealing it. It's pretty fun. Yeah. SoShawn  46:28  my family's story is like we played it at like a family gathering. One of our one of my cousin's brought it. And then we loved it so much that we got it for ourselves. We just within my family. And then my dad got so obsessed by it, he downloaded a mobile app to practice on his own, to be insanely good. So there is some skill to this. Yeah,Luke Edwards  46:45  I play every day. I mean, I played three rounds before the podcast this morning. By yourself, like on the app, so there's an official rummy cube app, or whatever, and you're supposedly playing. You're supposedly playing other people around the world, but I'm pretty sure they're all bots. And, you know, but it's fun.Kevin Åberg Kultalahti  47:05  Yeah. All right. Any other pics I actually have right now, for me.Antony  47:10  So I haven't picked out because Luke inspired me to think of the whole cover behind me the board games and boarding club games. So my pick is definitely a monopoly deal. So if you'd like monopoly, if you can imagine it being playable about 15 minutes, so yeah, monopoly deal. It is 15 minutes long monopoly, I have no can see on the camera anyway. So I'm not sure I'm holding it up. But I am. And it's super, super vicious. So if you think you get angry monopoly, you can get three times as angry in this in a quarter of the time was crazy. It's just really, really nice, like fast paced, the same kind of concept. But everything sort of compressed down a bit so that you things happen more rapidly, and they happen more directly. And it's just great fun. So I recommend this game to anyone.Luke Edwards  47:56  And does that just mean you get like more money more faster?Antony  48:00  It means you get more money faster, it means you often if you may get cards thrown at your face by your wife. It genuinely is so so you get her? Oh, yes, I did. I definitely do. I mean, she would contest that. But of course, you know, that's part of the fun, right? There's a lot of stealing. So I have at one point, been playing with two of the people. And at one point in the game had enough built of my hand that I could take all of this stuff off the table. So just be having everything and no one have anything else is that kind of direct. It takes if you play one round, you will learn all the rules. And that's all you need to know. It's it's not a long a long learning game. So 15 minutes, and you're done basically.Shawn  48:44  Yeah. My family plays that too. So the two of you pick the top two games in my family fully endorsed.Kevin Åberg Kultalahti  48:51  I have a game as well. Yeah, exactly. Yeah. So I tried to Google stadia. And I was actually blown away by how well that service works, right? If you don't have a gaming computer, so it's basically a cloud gaming service. Right, butLuke Edwards  49:11  which one did you play? Oh, IKevin Åberg Kultalahti  49:13  played like one of the free ones that comes with service. So I think it was Orcs Must Die three.Luke Edwards  49:20  A lot of fibre into that name. Yeah.Kevin Åberg Kultalahti  49:25  It's it's pretty cool, though. Like the service like there's no latency latency or Well, yeah, that's pretty cool. Okay.Shawn  49:33  Okay, well, I had to pivot to a game pick. All of you picked games. So Jeremy Wagner actually pointed me to this one, but apparently this has been around for a while Cookie Clicker has it's a browser based game or Taylor dash net or cookie clicker. Just Just Google quick cookie clicker. You get it? It's a clicker game. So you just click click like and then and then you set up factories and machines to to help you get more cookies. And, and it's it's a really mindless game. But it's it's pretty, it's pretty addictive. I had to I just had to close it down in Salt Lake because it was really that addictive. But I did give me an idea that our next Svelte society or a Svelte summit activity, because I think we want to have to have a tradition of like when we have a conference, we'll also have give people something to caught up in and show off and demonstrate. And last time we pick something too hard. But I think the clicker game could be just just good, where you can get creative and bring in some art assets and do some animations. So I think I think that will be my pick.Kevin Åberg Kultalahti  50:33  Cool. All right. I think that's it. So where can people get hold of you? Twitter, website,Luke Edwards  50:40  Twitter, GitHub, discord, looky everywhere, but leuke 05 on Twitter, I said,Kevin Åberg Kultalahti  50:46  All right. Cool. Thanks for joining us. Thank you guys. And thank you all the listeners for sticking with us for an hour andShawn  50:55  a half you Happy New Year. Goodbye, everyone.Kevin Åberg Kultalahti  50:56  Happy New Year. Yeah. Merry Christmas is probably the last oneShawn  50:59  before 2021. Yeah.Kevin Åberg Kultalahti  51:02  Yeah, definitely.Luke Edwards  51:03  See you guys next year. Bye.Antony  51:05  Bye. See you soon. Bye bye.
12/27/202051 minutes
Episode Artwork

What's new in Sveltia?

We talk about what's new with SvelteKit, how to contribute and other news in Svelteland!This week Karine joins us to discuss community, news and other Svelte related things. Have a listen.Notes:- Newsletter (sign up to the unofficial mailing list here)- rollup-plugin-svelte changes CSS defaults- Crown Framework and the site built using it.- Ruby on Rails DoctrinePicks:- Shawn: Mandalorian- Kevin: reMarkable 2 - Antony: Asus PN50- Karine: Queen's GambitTranscription:Kevin  0:00  Hello, everyone. Welcome to another episode of Svelte radio. Today we're going to discuss what's happened in Svelte these last few weeks, maybe months. But first, some introductions. I'm Kevin, I run Svelte school. I'm heavily involved in the Svelte community. And yeah, that's me.Shawn  0:20  Hey, everyone. I'm Shawn. I work at AWS and I mostly should post on Twitter. That's my job.Antony  0:28  Hey, I'm Anthony. I'm a maintainer of Svelte and I am the CTO of beyond. Nice.Kevin  0:35  And today we're joined by none other than Ah, Hi,Karine  0:39  I'm Karine. And I work in Seneca in France and I'm the CO organiser of Svelte society day France.Shawn  0:48  Oh, welcome, welcome. Antony  0:50  And you have a cool discord name as well. Shawn  0:52  K6 what is Yeah, what is key six?Karine  0:54  Oh, it's just because Karine is six letters and K6 is shorter Antony  0:58  It's the thing right is KubernetesShawn  1:03  Numeruneum. There's a term for that Antony  1:05  numeruneum. I see!Kevin  1:07  I did not know that.Shawn  1:09  For those who may not know actually so Corinne basically organise society day you run Svelte society, France, and it was just like a beginning to end. I wasn't sure if like Svelte was ready for like a non English conference. But you just did it. And then you got so many submissions. Even got rich to say some French.Karine  1:31  A very memorable moment. That's been recorded. Oh, right.Kevin  1:35  You can see that online. Right.Karine  1:37  Yeah. On the YouTube channel.Shawn  1:39  Yeah, I mean, I think there is a French community. I think Schneider Electric, they get back I was speaking in French. Then there was like the the newspaper like, was it les echos?Karine  1:49  Yes, Les Echos, Yes. And they do lots of infographics, papers. Some of them are powered with Svelte animation. I think there's also a radio france, which is the well the broadcaster of many different radios. And they they use Svelte in some part, and they have a very, I just tweeted recently, an article by their tech, tech lead, and they have a very interesting and modern stack, including Svelte.Antony  2:23  Wow. I mean, radio, France has clearly sort of got their inspiration from start radio.Kevin  2:30  Obviously, it's cool. Speaking of Svelte, what's new with the Svelte lately? Anyone know,Shawn  2:40  there's some versions.Kevin  2:42  Exciting.Antony  2:44  So we've we've definitely started publishing a newsletter. I don't know exactly who's involved in that. But somebody sort of started publishing announcements, because I think we mentioned on here that we never announced any new features, we just kind of rolled them out. And it's good to sort of get a bit of notice and traction around around the version. So there is no newsletter. I'm terrible, because I don't know where it lives or how to see it. But it's probably on the blog. Right. It's on the stock blog, which was abandoned for a long time, but but it's on there. It lives again.Shawn  3:11  So I suspect this is like a tear. Yeah, so Svelte dot dev slash blog. The thing about this newsletter is that there's no place to sign up. What what kind ofAntony  3:21  like, it's like a blog, news block. You can't You can't syndicate a writeShawn  3:28  it there's, I don't see an RSS Yeah, there'sKevin  3:30  no rss,Antony  3:32  unsubscribable.Shawn  3:33  If you want to contribute to Svelte you know what to do.Antony  3:37  Yeah, that would be a very good, very good first thing, actually, because this is stored as a bunch of markdown. So there's no reason this can't be syndicated pretty easily. Yeah, so so new, feature wise. I mean, I mean, everyone's everyone's sort of focused on Svelte kit right now. But in the background, there are some new features going into Svelte itself.Kevin  3:55  I think we've had a number of like smaller point releases, right? Antony  4:00  Yeah, Kevin  4:01  with some new features like props, rest, props, and custom web components is one of them.Antony  4:08  And it's just I think there's just some syntactic sugar around the promise, like the await syntax, just to keep your code clean a bit cleaner. I'm still not a fan. putting away in your template. It doesn't feel doesn't sit well with me. But for those who use it, I guess it's really kind of a terse way of just making sure your data is ready. And then they're pumping out to the page. So this is good. Yeah it's good that that is getting some love Kevin  4:32  some, some other stuff as well?Shawn  4:34  I should mention Karine has in the chat. You can speak Karine. I think you found the signup link.Karine  4:40  Yeah. It's it's Svelte that and there you have the sign up for the newsletter and Oh, that's a different clever link. It's okay. It's, you know, it'sKevin  4:53 it. It is the same but like we, I guess you kind of want the like an official signup thing because This is run by the guy that writes it, I think, okay, which is fine. I suppose.Shawn  5:04   that's good enough. Better than us maintaining a separate mailing list.Antony  5:09  Yeah. Okay. Well, that's, that's that's nice about it to be honest.Karine  5:13  So now Antony you can subscribe.Antony  5:16  Now that what's going on, we should be really useful.Shawn  5:19  I just very keen on email capture. I'm like the next conference that we do we need to have emails. Antony  5:24  Yeah, absolutely. Shawn  5:25  Activate people. All right. So I guess maybe the one surprise because I haven't seen this before. I would want surprise I was rollout plugin Svelte removed the CSS option, Antony  5:36  They didShawn  5:37  This is surprising Why?Antony  5:38  It's not a question I can answer. Again. I didn't work on that plugin. And I think now i don't i don't know. But yes, I know that you have to specify a specific CSS plugin for it. Now. It's cool to come people out because they're just sort of upgrading major versions without realising that. It caught me out. And we're gonna try and diagnose them in the book. But yes, that's the case. There'll be there'll be a bug somewhere that tells you exactly why it's been done. Yeah. It changes on that,Shawn  6:03  apparently, and it was discussed in Discord. So it's PR number 147 on Rollup plugin Svelte, and they just want to handle CSS within rollup. So cool. All right. So this metric changes. I mean, I often been thinking about how you know how Svelte in tailwind is a little bit hard to set up. I've often been thinking about adapting or forking the roll up or Webpack loader and just incorporating it by default, so that it would be zero setup. I don't know if I haven't needed it. I mean, when I start my next project, I'll probably do that. But if anyone else wants to steal the idea, please be my guest.Kevin  6:42  Isn't that kind of what Svelte kiss kit isShawn  6:45  sorry, I'm doing. We're not we're not digging in post CSS and stuff like that.Kevin  6:50  Oh, no, no, but like the no build, or sorry, no, no setup stuff. I mean, speaking of Svelte kit,Antony  6:57  Speaking of Svelte kit. Kevin  6:59  What's new?Antony  7:00  I can tell you kind of what's going on literally right now as we speak. So in terms of what I've been doing, I've been working on the Vercel and the begin plugins, the adapters. So those are now Vercel works really well. The begin one doesn't quite serve static assets yet, but it will leave very soon when now because they've been very helpful. Both these both these people, both these providers have their have their people on our Discord. And we're on their slacks and stuff. And they're collaborating with us because they really want they're really eager to make everything a first class citizen. So I think both beginning wsl will have baked in support for Svelte kit, and it'll be a matter of just pushing it. And it works rather than the kind of custom created driven adapters and things like that. So that's pretty exciting. They're both big fans of it, the netlify adapter has been rewritten as well. So what happened with adapters as a whole was they went from a kind of more manual process of taking the snowpack output, and compiling bits of it building manifests wiring that up into a format that each type of provider could use such as lambda, one day, rich came along and simplified the whole thing. And now there's like a builder, which just has a bunch of methods, you can call like four methods, one for static files, one for client files, one for SSR content, and they will just basically provide you all of this stuff as a file system, you can then drop in the right place, and then you have a lambda to serve it. So adapters got radically simpler, which should mean that people building their own can do it in a predict less than hour, maybe depending on how well you know the host you're going for. So it's pretty exciting. You won't need any specific knowledge, it's pretty, the API is pretty verbose and straightforward. Language wise, in terms of the application, like SvelteKit itself, is just getting more and more polished. So obviously, it started out as a bit of prototype, it's now becoming very much like, like for like for sapper, we're having some discussions around testing strategies, and perhaps making testing a first class citizen. So we've in the past kind of shied away from a bit because we don't want to enforce a specific testing methodology or bless something like Cyprus, or QA wolf or any of these providers, or libraries, because it kind of puts us in a position where we're advertising something without really having any say over it. But what we're going to do is provide a way to make it a one step journey. When you want to write tests. There's not like, Well, you can't test it. That's that it's more, go and look at these. Here's some suggestions. Here's some options. One interesting thing that happened was from the actual codebase itself Svelte kit, TypeScript was removed entirely not for the supporting on the outside but removed from the code itself. And the reason that happened was because when we're prototyping mostly when Rich is prototyping, actually, the types kind of become more of a hindrance than a help. It's like, you know, you wouldn't write prototype and then cover it in unit tests, because we can get in the way. So the plan is now if you know, we release this into the public domain, at some point soon, people might be shocked. Where's all the TypeScript gone kind of thing but what's actually going to happen is we're going to add it Afterwards, when the API is more stable, and then we're going to have, you know, all the types available to make developing it really, you know, simple and exciting. So, so yeah, there's a few things that have gone on a few things more controversial than others. What else has happened? You know, it's one of those things that sort of every day I wake up and everything's changed. So it's not a bit like that. Yeah, there's nothing else that I can sort of say that I've been absolutely all over. Yeah. And we're having discussions about CSS. So that's good. And there's also discussion on image processing, whether we provide a plug in or not, not sure. But snowpack can do this sort of stuff. So it's possible that maybe there's a chance that there'll be a sort of guide to say, instal the snow pack plug in. And there you go, you can process images.Kevin  10:43  Cool. So that's Svelte kit. What's happening in the community? Like, did you guys see the website by the HyberLab guys? It's like they made an e commerce site with the sockAntony  10:57  crown framework,Karine  10:58  the Swedish history, brand of clothing.Kevin  11:02  Yeah, exactly. I actually go on to the website, sometimes to just experience the speediness and snappinessAntony  11:09  it is really nice. It is a really nice site. Actually, on the on that subject I used there, they've written a, an error boundary component is something actually I think, personally, I'd like to see added into Svelte but essentially a way of demarcating an area of the of your page or component where any error is thrown a call and you can handle them independently, everything else. They weren't bubble up and break the whole site, is a bit of a monkey patch at the moment sort of goes in and changes internals, it might not might not work the same way forever and ever, never. But it's definitely a good indicator of how it can be done. And it does work about to start using in production. So fingers crossed. Wish me luck. But that's Yeah, that's quite a crown framework. So that's pretty cool.Karine  11:48  Well, I was wondering, we are similar people wondering how how people can contribute to Svelte kit, the core Svelte kits, and how do you maybe screen people? Is there a process? Or how does that happen? For contributingAntony  12:05  So I guess the main contributor right now is rich, it turns out that the way that works best for Svelte and has historically is that rich goes away and scrolls away and does something and then comes out with a with a product. And then people jump on afterwards, that's kind of happened, it's it's difficult to get a lot of people around something when it's in such an early stage with a lot of movement. I'm doing adapters, because they're quite isolated and separate most of the codebase. And people are contributing various things. So Ben was looking at the TypeScript stuff. He's doing all the build tooling, things like that. There's lots of other contributors, but the, the core is mostly Svelte maintainers. The reason being that with probably like, 16 of those 20 years, right now, with just those opinions, it's very hard to come to consensus on stuff. If we then throw in the whole community, it gets really hard to come to consensus, and the whole thing could grind to a halt. So I think until something foundational is there, it will be kind of private, hopefully not for too much longer. The other thing we've done is we have added some contributors from other projects. So you asked how outsiders can get in and contribute. We've added contributors from projects like our you know, all the kind of projects doing similar things. So Svite, for example, Elder.js, for example, anyone with ideas about how something fundamental would work, and who already has an implantation of it was invited to come and get on board and join in because they can provide that sort of the insights have already gained. Outside of that we've got people from Vercel, Begin there. Also, they have access to the code and they're able to review it. That's mostly to make sure that we're doing things that are saying when trying to ensure their platforms. Apart from that, there's pretty much no one else, there's no one else. There's no one else from outside who's contributing just yet. There's a bunch of people trying it out equally and being very confused at why it changes day to day. But yeah, so the idea is to go into a sort of an alpha stage soon, where we'll open up the repository, the source code, I guess, and then have some maybe installation instructions. And then on top of that, we'll have a repository that just handles issues that isn't the main repository, so that people can log and triage things that are affecting them. These will then be filtered and raised in the main repository where we can handle them. Hopefully, that period won't last too long. It will just be some ironing out some basic issues and then we'll have the the kind of proper open public beta, where everyone can jump in and get involved in contributing. I'm sure we'll have a million adapters for everything under the sun very, very quickly. Yeah. Karine  14:34  Okay. And are you planning on maybe having some kind of guidelines or, um, I remember back then, when I was working on rails, Ruby on Rails, they had that doctrine that was like the the, the 10 commandments of rails that guides you from what you will do and what you won't do what you're willing to compromise on. TAntony  14:57  That's a good idea. We don't have any more Like that, traditionally, we're very, very bad at providing contributing guidelines. If somebody wants to write these, that's fantastic. We definitely would like to have that I think we need it even internally in the maintainers. Because Svelte is in a position where it is actually quite a complex concept is doing something that not lower the frameworks are doing, and it makes things a lot harder. And even within the maintainers, there's, there's not a huge spread of knowledge. There's a bunch of people who know certain areas. So it's definitely something we'd want to have. We just don't have it as yet. So yeah, that's a good way to contribute that Hey,Karine  15:34  girls with with, I have the impression that this is a very opinionated language or framework. I don't know which term defines it best. But yeah, it's really at the image of rich, actually, which she who is someone who's very opinionated. So usually, yeah, they're probably some boundaries that you don't want to be crossed. Sometimes.Antony  15:58  There, there probably are. But I think the word boundaries is in itself, maybe a bit, a bit anti rich, because if you talk to rich, what he will say is, don't try and confine yourself to boundaries, think outside the box. And that's how you can wake up with great ideas, everything that he does this kind of against conventions, sticking things in node modules that aren't from NPM, for example, that sort of thing. They those are not within any boundaries. So I think you'd actually invite people to come and give their own opinions and views on things. Obviously, people open prs and things get merged. And things don't make sense or wouldn't be good. Just not going to get motional get a lot of feedback saying this probably won't work because of x and y. But I think I think any contributing guidelines given would be more along the lines of where to find things, what to get going with what's easy, what's hard, why things are done a certain way. And I think you could reverse that maybe by saying, as somebody who wants to contribute, what would you be concerned about? What would you want to know? And from that maybe we can build contributing guidelines based upon what we know of, you know how it is.Shawn  17:01  I should probably also mention that you don't have to contribute to Svelte core, you can also contribute in other ways, like organising meetups.Kevin  17:09  Yeah. Svelte society website. We got some some prs. Right. Yeah, yeah,Shawn  17:14  we got a PR from MAC FPGA on GitHub. I don't know their real name. But yeah, they we now have a working components filter search thing on the spot society, Dev nice. And we need more recipes. We just I'm you know, all of us are just volunteering time. But it's one way to demonstrate that you collaborate and are interested in Svelte and I think that's one way to give back to the community. You can ask her questions on discord, there's endless questions, a Stack Overflow as well. I'm not sure if people are actually searching on StackOverflow. But they're asking, asking questions, for sure. And they need to be answered.Kevin  17:50  All right. So this is gonna be a pretty short episode. This time,Shawn  17:54  I have a couple more announcements that we I don't know where we're wrapping up. So this felt jobs account came back alive. I think Noah Glaser from San Francisco is running it. So he's doing a meetup on December 9 at 7pm pacific time, you can sign up on the spot jobs account, I guess, just look for a small society, Bay Area by Noah Glazer. And then the other announcement that we should probably mention is that the state of JavaScript survey is going is going on. So obviously, we're not telling you what to vote for. If you're listening to this, we would like your your opinion to be heard. So you can hit head to state of particularly, this kind of survey has historically been over represented by people who are extremely online. If you're listening to this podcast, if you're on Twitter a lot or if you're on discord, you're probably extremely online. There are a lot of developers who are not represented because they're they just do their jobs and they don't really engage that much on online community. So be great to reach them. And yeah, state of it's the link there.Kevin  18:54  Cool. Antony  18:56  I've done it already Yay,Kevin  18:57  you have a pick. Shawn  19:00  Oh, we're doing we're doing picks. Kevin  19:02  Okay, I got this new tablet today, huh? It's called a remarkable tablet. Oh, that's like $200, right? Oh, no, more like some 400 I think, Wow. Okay, it's like an ereader. But instead of reading you do or writing on it, and like converts text and you can annotate on top of PDFs and stuff. It's pretty neat Shawn  19:24  Do you draw, or do you do diagrams, what do you actually use it for? Kevin  19:28  So I I just got it today. So I I haven't really been using it much. But from the little I've done, I've done some annotations on PDFs pretty much highlighting stuff for arrows. You can draw on it as well.Antony  19:43  It's very cool. I'm thinking of asking them for Christmas but not sure Santa can afford it.Kevin  19:49  And the waitlist is huge. So I ordered back in like three months ago. Wow. I just got it. Yeah.Shawn  19:58  I can go well, the rest of you Think about your picks. I'm going to pick the Mandalorian so good. And it's Yeah, for those who don't know it's it's kind of takes place it's it's a Star Wars TV show run by me by Disney plus, and they're releasing it weekly. So it's not like the the Netflix l dub the whole season on you at once. And it's just so great to watch something together with other people and just like speculate about what's going on. I can't try not to spoil anything, but it's taking place after the the main original trilogy movies and it's just very well executed really good action. I run when I watch it. I don't even feel like I'm running. I just, I just get a good 30 to 45 minutes of exercise just watching it and it's one of the best TV shows I've seen.Antony  20:40  I'm gonna have to watch that. That sounds that sounds pretty good. Kevin  20:43  It is good. It is good Shawn  20:44  And the soundtrack. Oh my god. So good!and the technical side as well. Have you seen the documentary?Antony  20:51  Yeah, I'm gonna go because I've got a pic. Again, in tradition. I'm going to pick something weird. So it's something I don't actually own is something I want to own and I spent a lot of time studying it and I hopefully will own soon. And it's the Asus, pN 50 barebones computer. It's like a tiny little desktop computer that runs a ryzen AMD ryzen processor. So I'm a massive fan of ARM processors, I really, really want an M one. But I really, really don't want to run OSX. I'm a staunch Linux user, and I will not be changed. So I'm going to be sort of stuck for arm apart from my Chromebooks and stuff for quite a while yet. So I'm going to buy this bare bones PC with a with a really fast processor in it. And hopefully, it will alleviate my problems where I can either podcast code or use discord at one time, because my machine's got eight gigs of RAM. And it's, it runs out of power pretty quickly. So yeah, my pick is going to be that machine. And hopefully in a future podcast, I will tell you how great it is. Yeah, it's surprisingly cheap, it's probably comes in at about 300 quid. So also,Kevin  21:53  so that that's cheaper than my tablet. Antony  21:56  Yeah, yeah. I mean, it's that cheap, you know, don't get memory with it, or an SSD. But I mean, those things are cheap, and probably people already have an SSD anyway. You know, and a memory memory is another 100 quid or something. So again, you spending probably half what you might spend on a laptop. And it seems to be very, very, very fast. So looking forward to that as a new death machine.Kevin  22:15  Yeah. Oh, wow. Check it out. Karine, Do you have? Do you have a pic?Karine  22:20  Ah, well, yes, I it's been a long time since I watched a TV show on Netflix. In the last one I saw and liked the loads the Queen's gambit, you've probably yes, came across that one. Because it's really a very popular. Well, I could have watched it because it's quite short. It's only seven episodes. And it's that's the story of that badass chess player, the woman, a woman that plays chess is a very high level and it takes place in the in the 60s in the 70s. And while the story is nice, you can really get you can really get into it without knowing anything about chess. And I think there was a publication stating the influence in that series on the record sales of chess boards, right, was released. And the last point I really loved about the series is the the soundtrack and takes place in the 60s and the 70s. And then the colours and the graphic treatment of that Siri, the vintage settings and the vintage looks. It's really great and refreshing. It was nice. I mean, liked it.Kevin  23:31  I'll have to check it out. Antony  23:32  Yeah, an interesting note on that as well on Twitter last night, actually, they cast a transgender actress as the teacher and the school just as a playing a woman just just that's it. No problem at all. There was just no furor about it. There was no you know, special treatment like that. And people thought that was fantastic. Just so, so natural and great. So that's, that's pretty exciting as well. kudos to them. Alright, soKevin  23:54  that's it for for this episode of the Svelte radio. Thanks for joining us, Karine,Karine  24:00  thank you so much for having me.Kevin  24:01  We hope you can join us again, for a longer episode maybe in the future. But yeah, Goodbye, everyone. Thanks for listening. Bye bye bye.Transcribed by
12/12/202024 minutes, 8 seconds
Episode Artwork

Scott Tolinski talks Svelte, React and Podcasting

Scott Tolinski of fame joins us to talk about Svelte, React and podcasting. Oh, and he has a new course on Svelte animations! Have a listen!Check out his courses here: https://www.leveluptutorials.comPicks:- Scott: Q clearance - the hunt for QAnon (podcast)- Kevin: Brandon Sanderson - Stormlight Archive (books)- Shawn: Writing Excuses (podcast) and Acquired Podcast (podcast)- Antony: That Chapter (YouTube Channel)- Scott & Antony: JCS Psychology (YouTube Channel)Transcription:[00:00:00] KAK: Hello everyone. Welcome to another episode of Svelte Radio. Today we have yet another guest. But before we introduce the guest, we're going to introduce ourselves. So I’m Kevin. I run a site called Svelte School, and I love Svelte, and I run this podcast as well. [00:00:19] SW: I’m Sean. I work at AWS, and I’ve been doing some work on the Svelte Society website recently. Got to give it some love. [00:00:26] AJ: Hi, I’m Antony. I’m a Svelte maintainer, mostly working on kit at the moment. And I’m also CTO of Beyonk, which is a booking system for tourism and leisure. [00:00:35] SW: And thanks for picking back up, hopefully. [00:00:38] AJ: They are. Well, yes. And it’s a tough one, but I think so.[00:00:43] KAK: All right. So our guest today is Scott Tolinski. He is a friend of the show, sponsor and lover of Svelte it seems like, because I just listened to you on the latest SyntaxFm where you're the co-host. And when someone asked what's the best and easiest JavaScript framework for beginners, both of you answers Svelte, which is I think it's an interesting change from before maybe where you may not necessarily have said that. And Scott is – So I’m going to try and do an intro, because I feel like I’ve heard it so much, but then also you can fill in the gaps. I like that description that you always say like you're a full stack developer from Denver, Colorado. That's a mouthful, but it accurately describes everything. You run Level Up Tutorials, which actually I think started as a YouTube channel with some tutorials on some kind of design software that I have it in my watch list, but I haven't seen it yet. It's a huge channel. I think you're like 300 something K subscribers. But now it's a paid platform where you have monthly video courses. And then you're also a Bboy, and I always love watching your videos of your breakdancing. Is there anything that is typically not mentioned in intros that you'd like to share?[00:01:55] ST: I don't know. I’ve been a developer for since 2011 professionally, but I’ve just been a lover of making websites for a very long time. I just like really find passion in this stuff. So whether or not that is like a part of my business platform or what I’m doing, like it was first and foremost like a hobby for me and the thing I kept going back to. So maybe that isn't often mentioned just like how much I truly love this stuff, and I think that's maybe something a little interesting or not. [00:02:27] KAK: Yeah. I mean I do see when you post updates about how you're changing the Level UP site, and you put some effort into the little details of the animations and stuff like that on the site and it really shows that you pay attention to the details. And it's mostly a one-man operation, right? Like you have some content creators, but it's mostly you.[00:02:45] ST: Yeah. And I’ve had three guest creators and we just hired on our first like full-time developer last month. We've had a part-time developer for the past like year or so, a good friend of mine. And then now we have two devs working on it, one who's part-time and one who's full-time. And so it's a growing operation and we're hoping to have a bunch more guest content creators on next year. We have a few people signed on to do some really neat courses for us on stuff that are gaps in my knowledge base. It's funny because like some people are a little surprised that I can produce like a 20 video tutorial series in a month every month for a year. But I should say that I’ve been doing it since 2012. So like for me I have the flow and everything so practiced and I have the formula down to how I like to do things and how I like to learn things and how I like to explore topics that like, “Hey, when we started Level Up Tutorials, it was just a way to try to give back to the Drupal community specifically on YouTube because there was like no good Drupal content.” I was cranking three videos every Monday and Wednesday. So I was getting like six to nine videos a week. And I just did that for a billion years until now, and then it's like I’ve had all this practice to be able to do it. So it's like, “All right.” Well, I feel like I’m probably even producing less content than I used to just because it's a little bit more dialed in. [00:04:15] KAK: And you have a lot of courses on your on your site. I remember I took one of your Gatsby courses way, way back. It was really nice when I first got into to React. It was great. But then you also have Svelte courses, right? [00:04:33] ST: Yeah. [00:04:33] KAK: You had two of them before, right? You had the Svelte for beginners and Sapper for beginners, right? [00:04:40] ST: We had a Svelte course, a Sapper course and then now animating Svelte, which was the latest one that came out in October. And I’ve done a lot of animating React courses. So for me this one was interesting to be able to apply a lot of the same like, “Here are our basic animations you need to know, but then try to do them in a completely different system.” And like some of the stuff – It's funny, because we can get into it more, but some of the stuff in Svelte was like too easy. It's like, “Okay. In React, to do a fly-in animation, we have to pick a library,” because there's like eight libraries to pick from. You got to pick a library then you got to write the in and out and you got to worry about the mounting and unmounting. And then in like Svelte it's just like, “Oh! Import fly. Attach that directive to –” I feel like a fraud for teaching that because it's so simple. But then like if anybody's coming from any of their platform, they're going to see how nice it is. And to me that's the reason why we talked about Svelte being probably the best platform for people to pick up, because it's so simple like that. You don't have to make a lot of choices in those regards. I mean what we made a like a modal. I think the modal – I don't know what video that is, but we made like a modal in one of the videos. And it is like a really nice looking, like almost like the native animation that's on Big Sur and macOS type of looking modal. And it took us no time at all. It’s like just pop on a couple of directives on a couple things and bingo-bango! It's just working. [00:06:11] AJ: Just a question about actually starting from going, say, something and hit React or whatever and then going to Svelte. How much time do you spend making yourself proficient in that framework enough that you can then teach others and how do you do that?[00:06:24] ST: Yeah. I go like super immersive. I have like a number of projects that I just done and start building and hacking and just trying to get the lay of the land in terms of how things function. I’ve always taught best when I’m teaching something that's very fresh in my mind. Like the channel was started on the premise of me teaching what I had just worked on that day at work. So I think becoming an expert in something is kind of a detriment occasionally to like the content you're trying to produce, because you lose all of those little missteps you hit along the way. And I’m not a great reader either. So like reading docs is not good for me. So like what I do is like I can read code. I like reading code and I like listening to videos or podcasts or whatever, but reading docs over my eyes. I just like, “Uh! Go to sleep.” But for things like this, like if I wanted to do this, what I’m going to do is I’m going to have some of the examples open, some of the docs open and I’m going to have some ideas of things that I want to build and I’m just going to try to build them. And sometimes it just works and I’m just like, “Oh, it was easier than I thought.” And other times I hit a bug and then I fix the bug, hit a bug, fix the bug, whatever. And through that I gain ideas about what people who are coming at this from a completely like ignorant place might run into when they're doing it.And the idea for me is if I’m hitting all of the bugs ahead of times, I’m going to be able to call out what you're not thinking about or what experts are not thinking about when they're teaching something because they just totally miss that aspect of pain points that normal people might have when working on this. I think too oftentimes experts come at technologies from a place of jargon and filling people's heads with things they don't need to know too early. I have a lot to say on this, because like when I was teaching, I would always find that my tutorials that I always felt were too basic were always my most liked and most viewed, like hands down every single time. And that like really shaped how I view creating content in that regard. [00:08:25] AJ: I think that makes sense. I think people start with these sort of tutorials when they want to learn from ground zero almost and that you actually want to teach them about the first roadblocks that they encounter. Like you said, if you've done them the day before or whatever, you already know what you found when you sort of hit that, and that's exactly what they would want to know and you've had the benefit of doing the research for them and you can just say, “Hey, you'll encounter this and that's how you fix it.” So yeah, absolutely. I think it's great.[00:08:53] KAK: Totally. Before we get too deep into Svelte, I was just wondering was it like risky pickings Svelte for the first time and blocking off a month for it? Because obviously maybe like people who subscribe to Level Up might have expected a React leaning content mix, and then to see more Svelte, that might be less relevant to them. Is that a concern?[00:09:16] ST: Ever so slightly. But I’ve never really been too concerned about that. Like I’ve been always – I don't know, pretty decent about following my heart in this. It's funny because like I do have polls in like user submission stuff to ask my customers like what they want to see, right? but too often times, and I don't want to bring the whole old Henry Ford thing into this where he's talking about faster horse thing, but like – I don't know the quote exactly, but either way like a lot of the times the suggestions, and I love my audience, are not things that I would actually produce a course on. And they're like hyper specific whatever they're working on at this moment. Like, “I want a tutorial on AWS with this and this and this very specific thing.” It's like, “Okay, but you're the only person who's going to want that.” And so I’m always looking into things that I think people will find interesting if they give them a chance. One of the first examples for that for me was with Meteor. When I started doing Meteor tutorials in 2015 it was like just when it hit version one and people were kind of hyped on it, but it wasn't like a lot of people still didn't know about it. I just heard about it at a meet up. And like those tutorials for me did really well, because people didn't know about it and they were surprised at how easy it was and how cool it was. In the same regard I think that was how I felt about Svelte. It's like people might not know about this yet or they might not know how cool it is. But I’ve turned a lot of people on to Svelte felt in my channel just because they can see, “Oh, I’ve been working in React for so long and now I don't have to deal with choosing a state library. I don't have to deal with any of these things that React makes very difficult.” [00:10:59] KAK: Yeah, I feel that. [00:11:00] ST: Yeah. So it isn't inherently a risk, because you might lose some people, right? But I’ve never been too concerned about that. Like even with Gatsby, right? I think my Gatsby tutorial was like a year ahead of most others. And I did like a Gatsby unboxing video before like anybody knew what Gatsby was, just because like I feel like I have my – I have good intuition in terms of like what will speak to people, because I feel like I’m an everyday developer. I like my code to be simple. I like it to be easy to write. I like it to be clean. I like it to be efficient. And it's like when I see something that makes me go, “Oh wow! That's pretty cool.” I have a good gut feeling that other people will feel that way as well.[00:11:43] KAK: Yeah. What you just said makes me realize that a video site like yours, people may not actually watch to learn the thing right away. They might just be using it as a survey, “Like give me – I'll take 40 minutes and then let's just see what this thing is about. And I don't have to delve into it myself. I can just watch Scott do it for me.” That's a value ad in itself. [00:12:04] ST: Yeah. I’ve been starting off each series. I’ve been doing this recently. When I do a new technology – I’ve started really falling into a formula where my very first tutorial is always a What Is? So I used to have a series called like What Is blank? What is React. And I would just describe it. And those are now my very first tutorial in every series. So if I’m doing a series on Dino, is the course for this month. The very first, “What is Dino?” That way like if you want to check in and watch the first video and understand what the heck do you know it even is, then by all means, watch that first one. And if it's not interesting to you, we have a lot of other content for you to watch. [00:12:44] KAK: All right. So this new course – Well, what's in it? It's about animating, but you can animate all sorts of stuff. What are you focusing on?[00:12:52] ST: The focus is really like hyper practical interface animations. So like we teach you – In like the first five videos we teach you like the basics, right? How to use the built-in animation directives, the drop-ins. Then maybe what exactly like a custom JavaScript animation is doing in the fact that you can just get access to a time value and manipulate it to do whatever you want for custom CSS, right? And then once we teach you those things we get like right into the practical application where we're building like a slide in navigation, and then a toast menu, and then a modal. Like real stuff that you're going to build. So like that's really the goal for me. It's like these are the things you're going to build a hundred times. So like you're going to want to be pretty proficient in those pretty quick off. And then after that we get into stuff that I’m really into, which is like gesture-based animations, things like dragging and stuff. We get into actions pretty quick. The actions video is like the ninth video in the series where we explain what they are. And then we start to build what could be the jester drag library that Svelte doesn't have that I would love it to have. Although we kind of just ignore the fact that mobile exists for the sake of simplicity. But like the idea is that – [00:14:06] KAK: It does exist.[00:14:07] ST: To get started. Yeah. And that's really it for me. It's like in the React course, I’ve done – Oh man! I’ve done Framer Motion for React, advanced Framer Motion. I’ve done React Spring. So I’ve done three. And I did a 3D React course, which is a lot of animation stuff. So I’ve done like four animating React courses. So I have a lot of these like projects in my back pocket of things I'd like to build. And like the next step up from this would be like, “All right. We have like –” In like some apps on mobile you have a drawer you slide up, stays up, slide down. You can interpolate other values from those values. I have projects that I sit on and I’m thinking, “All right, if I ever do an advanced course, this is what I’m going to do it on.” So it is funny. I have like all these like little animation ideas floating around. And then once I get enough of them in my head, I could produce like the next level to that like getting started course. [00:15:02] KAK: Cool. The action section is – I haven't watched your tutorial yet, but I love action. So I’m definitely going to check that out. [00:15:10] AJ: I’m excited, yeah.[00:15:12] KAK: Yeah. Every time actions come up, I get super excited. [00:15:16] ST: They're very good. It is really fascinating for me to see like even like get into like the custom event stuff, right? I don't know. You're not you're not beholden to some library's ideas of like what you want to access. And like I can write custom events to do whatever I want to trigger events in Svelte from my action. And I could attach DOM properties or whatever I want in that action I can do, and it just to me is elegant. It's very elegant. And I thrive on a little bit of magic. The right amount of magic I thrive on in actions to me is that right amount of magic. [00:15:51] KAK: That kind of sums actions up pretty well I think. [00:15:55] AJ: Magic enough, yeah.[00:15:57] ST: Yeah, magic enough. Yeah. I think people's minds can get blown in that. So in the actions content what we do is we like teach you, “All right, just by applying an action, this is all that happens,” right? It's very basic edits. This is what happens. Then what you do is you click and drag and move the X property storing that state and using a Spring, right? So you can store that state in Spring and now, okay, you can drag it on the X. Oh! Look at how easy it is? Now you drag them on the Y. Oh! Now you want to add some constraints. Now you want to add some events. You want to build like a Tinder swipe thing. You can do that in like two seconds. I think that kind of stuff really blows people's minds when they see just how easy it is.[00:16:39] KAK: Yeah. It feels like those sort of things are pretty complicated in other frameworks. So speaking of other frameworks, like what – Or I guess React, since you've done a lot of course on that, what kind of things are easy in Svelte when it comes to animations compared to like the stuff you've done with React? [00:17:01] ST: The basic stuff. The basic stuff to me is the most pain in the React world, specifically like unmounting components. So in Svelte we have our transition, right? You can just transition:fly, whatever. In React you have to worry about the unmounting and controlling of the unmounting. So a good example of that would be the Framer Motion, which is my animation library of choice. I really like React Spring. React Spring is a fantastic choice, but Framer Motion made it a little bit easier. In React land, I'll take easy, right? So Framer Motion, to worry about unmounting something, you have to wrap it in a component. So it's like a wrapper div called AnimatePresence. Tnd then you have your condition and then you have your thing you want to animate. It becomes this like nesting doll of components that you shouldn't have to have to do in unmounting animation, right? You should be able to just have your boolean flag or whatever. Turn something off and then the component to be animated and then it should worry about its own thing. And things are even compounded so much more when you're working with a system like Next.JS or Gatsby where the routing goes all the way to the top of the app, which drives me nuts in those platforms and it makes unmounting animations have to be orchestrated from the very top of your application, which is crazy to me. And the main reason why I don't use Next or Gatsby in my own personal stuff. Like I get – Those platforms are fantastic for what they do and I really like them, but I don't use them on Level Up Tutorials because we have a lot of nested routing systems where if I wanted to control the unmounting and mounting of specific components at any given point, like I just can't do it. So that to me has always been a major pain point in orchestrating animations in React specifically nested layouts and unmounting is a giant pain. Framer Motion has made it a lot easier back in the days of React Motion. You had this like really ugly Syntax. And granted, React Motion was fantastic. It was like one of the first libraries to really use render props really neatly, but it was like very hard to look at code to me. I just never really loved it.[00:19:12] SW: Yeah. My understanding is a little bit vague here, but isn't it also true that Sveltes at transitions are in CSS? So they're executed you know inside the browser. You need a possible, reversible, that kind of stuff. That was a selling point to me, but I haven't actually tested how to do that in React. I never got there in React, but in Svelte it’s just part of the normal teaching path.[00:19:36] ST: Yeah. Yeah, right. No. Framer Motion does it in CSS too. Everything's done via CSS transforms. So anytime you're animating anything in the web it's important to use CSS transforms because it uses the GPU. If you're modifying the position, it's janky. So CSS transforms. And one things I do really like about some of the platforms specifically Framer Motion is that they like to take that option away from you. So when you animate the X property, it does all the transform 3D stuff. You don't have to think about it. And I like that because it's not giving anybody an opportunity to make something position absolute and then animating the left property, right? It's just not opening that door whatsoever. So that is like a – I don't know. The React platforms can do some things that are nice for you. But again you end up having to write more code to do the same thing. And Svelte, like I said, the transition element and transition aspect of Svelte overall is just way nicer to me. [00:20:36] SW: Nice. Two of the more advanced ones that I see that you have are crossfade and flip, which are also it's kind of pre-built things. There are talks about them, but I still personally don't understand it. What is your take? How do you explain crossfade and flip?[00:20:51] ST: Crossfade and flip are unfortunately very poorly documented on the site, and I think there could be some improvements.[00:21:00] SW: Good thing you don't read the docs. [00:21:02] ST: It’s funny, because the way I uncovered everything about them is by having them in the examples repo or the examples. Yeah. So it's like that's the way I learned everything about crossfade and flip, because I think one of the – this is actually funny. I could find this on the Svelte site. I should submit a PR for this. I’m sorry. I haven't. There's like one thing that was like really funny on the Svelte side to me when I was really like diving into this. I was just trying to find the API for Crossfade. I was just trying to find the API, and this Svelte documentation under Svelte transition, it's like module export seven functions; fade, blur, fly, scale, draw and crossfade. And then it proceeds to tell you about all of them except for crossfade. It just pretends crossfade doesn't exist after that. I was just like, “Okay. But like what's the API for crossfade? Like where does this go?” In fact if you do a command find, crossfade is only mentioned twice on the entire page. So it's very funny. But no. So, okay. So crossfade is basically used when you're moving something from one like DOM container to another DOM container. So you have one DOM container – You have an item that exists and it's going to be moving like parent containers and you want it to zoom from one container to the other container or fade from one container to another container, whatever you want to be able to control that animation, you want to fade it. There's a React library called – I don't know if this React Over Mind? I don't know. It's early in the morning here for me, but there was a React crossfade that basically did the same thing where you pass a specific ID key to one item and an ID key to another item. And as long as when those components were being transitioned essentially it would take the position and elements of one to position elements to the other one. It would swap them and then do the flip animation. I’m gesticulating here with my arms without realizing I’m on a podcast. [00:23:03] KAK: I’m nodding.[00:23:04] ST: I do this to myself all the time. [00:23:07] AJ: He’s - excellent.[00:23:09] ST: Really, it helps to understand the idea of flip animations. And a flip animation is – Oh my God! I always ruin this, because I always want to say first – First invert, last – [00:23:23] SW: Play. First last invert play. [00:23:27] SW: Play. Either way what it's doing is it's basically doing the animation backwards. So like if you were to have a box and you wanted this box to be 100 pixels to the right at the end of the animation it would actually start the animation where the zero position would be the new position of the box. And then instead of animating 100 pixels to the right it would be animating 100 pixels to the left and then reversing that animation. That way the browser already knows exactly what's going to happen and where it should go. The animations are much smoother. And it's a giant pain in the butt to set up most of the time if you're doing it by hand. I know some people might disagree with that, but for me I don't want to have to worry about any of that stuff. I don't want to have to worry about the inverse position of something when I’m doing an animation. I just want it to look smooth and I want it to go from A to B and I want it to just work. So flip animations are really fantastic for a lot of things because they make animations like that very smooth. So it works really well in that kind of crossfade environment where you know the ending position of what this thing's going to end up being. So in regards to Svelte’s flip animation, it's primarily – For me, it's used for – Let's say you have – In Svelte’s own example, right? You have a to-do list and you remove one item and you know that at the end when you remove that item it's going to collapse down into like three items, right? So let's say if you remove the second to last item. The bottom item knows that it's going to be up negative 10 pixels. So it goes up negative 10 pixels, inverses that and then actually does the animation. But the first two or first three steps of that you don't ever see. It does them behind the scenes without doing anything. It just calculates it all. And then so that way you get this really nice effect of essentially things just falling into place. It's really nice for drag and drop interfaces. It's nice for anything like that. I think Framer Motion is something in React that's like some magic layout thing that's really neat. But in Svelte it's just flip, and I dig that. It's just flip. And I haven't used it beyond the context of those things, but then again I don't use flip animations a ton beyond that context where you have you're moving things in a list or you're changing their position or something like that. They're neat tools to have. They're absolutely neat tools to have. But again in practical animations you probably won't end up using them a ton-ton.[00:25:44] AJ: I mean I think I’m quite jealous because I don't use any of these animations apart from maybe fade. I’m not building the kind of sites where I need to do this stuff and it's such a shame because it is literally there and it's a bit of a game changer. [00:25:57] ST:  It is, and it's a lot of fun. I find this stuff to be a lot of fun before it was a web dev. It was my goal in life to be a motion graphics artist. I had trained to be that. I worked in After Effects primarily. So my training in college was setting me up to do motion graphics. And I worked at a magazine doing motion graphics for a little while. So they had like a CD. They would send out with the magazine. So I got to do all the intro motion graphics for it and stuff. It was a really cool gig. And that's really what I wanted to do. It was like I’m just going to move to LA and work in movies doing motion graphics and commercials and whatever. And then I didn't do that and I chose to work in web. And so it's like I have all that background knowledge, which is probably the reason why I started a video site in the first place. And animations are pretty prevalent all over my site just because it's just fun. It's just fun for me to work on. It's not important to do. It’s just fun.[00:26:47] AJ: It gives a nice effect as well. It's weird how much better a site could feel with just a few small animations. So I think it is a really critical thing to have built into a framework. It totally changes the way you approach your site and how you feel about how well that site works for you. [00:27:03] ST: Yeah. I can work like a little bit of a seasoning, just a little extra kick there. It's like what's going to take your home-cooked food to like restaurant quality food. [00:27:12] AJ: Yeah. That works. Yeah. It’s not just fluff. It's great. [00:27:18] KAK: When it comes to animations and transitions, I’ve been trying to play around a bit with crossfade a while back. And I did it in the context of like switching pages in Zapper. And that was not as easy as I wanted it to be, but that's also because you have to like specify where do you want your headline. Say, for example, a list of blog posts, and you want to go to the actual blog page. You want the title to like fly into the blog page title spot. That was a bit confusing and even in Svelte. But maybe it actually was easy compared to other stuff. Not sure.[00:28:02] ST: Svelte crossfade for me is harder than crossfading in other platforms, but only because the documentation is sparse on it. Like what needs to be – I found myself like occasionally like having things set up to the point where I'd be like, “Why is it not crossfading right now? Why doesn't this work?”And then you look at some of the examples and you're like, “All right. Okay. Does it need to be in a keyed list? Do I need to have the ins and outs? What do I need here for this to work?” When it seems like in other platforms you can just give here – X gets an ID. Y gets an ID. It compares those two IDs, crossfades them, right? That to me could be more simple especially given how simple everything else is. And I would find myself reaching for transition just about way more often than crossfade just because of ease of use.[00:28:58] KAK: Yeah. Speaking of things that are kind of missing or hard to do in Svelte, do you find anything else that's tough to do in Svelte compared to React, for example?[00:29:10] ST: It's a good question. There's the obvious one, which I think it's not something that's tough to do, but it's tough to make a choice in routing, which I think everybody knows is a thing, right? Just because there's no clear guidance. But that's the strength of other frameworks. So it could be a strength that – Yeah. The problem is, is that like there're a lot of options. And then if you're using uh Sapper, yeah, you have the file-based routing, and that's fantastic. I like the file-based routing. But like let's say I wanted to pick a router for whatever I’m doing in the Svelte project. Where do I even look? What was interesting to me was that I found the APIs against the routers to be kind of interesting. Let me see if I can find. There's a router that I actually really liked using Tintro. Tintro? [00:30:00] KAK: That sounds familiar. [00:30:02] AJ: There's always more.[00:30:02] ST: There's always more. That's the whole thing. I found it Awesome Svelte. [00:30:10] AJ: I still use like a Vanilla router. Like I don't use any of the Svelty ones really. I just use a regular JavaScript router just because I kind of I know the API. So I don't really consider it too much. But yeah. [00:30:24] ST: Yeah. Writing is one of the areas where I do like a little bit of magic. And one of the things I really liked in a router is to be able to use. This has been called out by some people. I like to just use atags and atrafs to point my link. And then I don't have to think about all that and let the browser work it out, right? Let the framework work it out. And this this router – Shoot! My site's on Zapper right now. So it's not using this router. Although I do have a project on it. So let me check it out. The router that I found, Tinro. Tinro. Tinro. [00:30:58] AJ: Tinro. Yep. Never heard of that one.[00:31:00] ST: Yeah. I know, right? I didn't ever hear anybody else using it. So every time I recommend it I was always kind of like, “Yeah, Tinro.” So this router was really neat because, one, not a lot of wrappers. Like wrapping, provider components, I just don't like a lot of providers, right? So you don't have to deal with providers. You have a route component, a route component that allows you to even have nested routing. And then you just use normal anchor tags with atrafs, and that's it. Like you have a route and you have an anchor tag. And when any pattern matches that route, it will show whatever is in there. It doesn't matter if it's nested. It doesn't matter where this thing is. The API was just really nice. And I found it just about every other router required you to have different providers in different sort of ways that just – it's like I do. I need this provider when Tinro here does just completely omits the fact that there is such thing as a provider. Then you get into land where it's like Index.JS and React you have a link tag with a two property around an anchor tag. I’m like, “What is going on there?” I like complained about that on Twitter, and Dan Abramoff was like, “Why don't you just set up auto imports?” I’m like, “That's not the point.” He's like, “Why don't you just have an anchor tag?” I’m like, “That's not the point.” The point is, is that you have an unnecessary DOM tree where you don't need one. It used to be like a huge pet peeve of ours in Drupal, is that Drupal would just like add eight divs to everything you were doing. So then by the time you tried to like CSS anything. One time we had like an all-night hackathon and it was me and like two other devs when we were building the initial Level Up Tutorial site was built in Drupal. And the one dev would be like – He was new to Drupal he was like a WordPress guy and he'd be like, “So why don't you just style this one?” We’re like, “Because it's Drupal. We don't get access to that class.” If you're like, “Oh, but why don’t you just style this div?” “Because we don't get access to that. Well, we'd have to hack the PHP template in this particular plugin.” it was like you'd have to like really dive into this plugin, this PHP file just to find where the div was to put a class on it. And like I don't know if it's just like been traumatized from that experience, but like I see some wrapping divs and I’m just like, “Get them away! Get them out of here.”[00:33:08] AJ: I think you've hit on something really important there. I think that people come now and they see these things. They see these tags, these link tags, and they haven't had that power experience of working something like Drupal or something else that does things in a really weird way to understand why. We now go just use the link tag. Just use the atag. Rather like why we make that decision? Why we seem so adamant about doing something that seems backwards because you get all sorts of extra power with a special tag for it and stuff. But there's a good reason. And I think it's very hard. And it might even relate to the whole thing about doing a basic tutorial. You run into a roadblock. Why do you use an atag? Well, because this is why you use it. Actually it's a learning that is so necessary and it gets hard and hard to find. It gets more and more buried in the history of the million and one frameworks you can write websites in.[00:33:56] ST: Yeah. And HTML is not going away. So it's like why would I want to learn these layers on top of HTML when the HTML API is there for me? I don't know. But then I say that as somebody who likes magic and JavaScript framework. So I understand that contradiction. [00:34:11] AJ: You like enough magic. And enough magic is fine.[00:34:14] ST: Yes, exactly. Yeah. [00:34:16] SW: And Svelte is HTML.[00:34:19] ST: Yes. Exactly. Yes. I know. And Svelte is the most HTMLy of all the frameworks and I really appreciate that about it. [00:34:26] AJ: Certainly why I like it anyway. Yeah. It’s close to the bone. It's as close to the bone as I want to be.[00:34:32] ST: Yeah. Totally.[00:34:34] SW: There's a small schism at least in my mind with regards to how styling is done in Svelte. Obviously Svelte comes with scope styles by default. But I think I’m maybe in a minority here at least in the Svelte discord where I try to use Tailwind to get over Svelte and then only use Svelte styles for that. But I was just curious if you had an opinion on that kind of thing. Because like you said, CSS – To paraphrase you, CSS isn't going away anytime soon. So maybe we should just use CSS. But I do find that Tailwind is more ergonomic. Plus I use a design system as opposed to just magic numbers everywhere.[00:35:13] ST: Yeah. For me, tailwind is just something else I have to learn. I can like easily have my own utility class library that I’ve made myself that's like finally tuned to the only utilities that I would need or want. And then I get to invent my own utilities that I can use. So to me I don't want it. I don't want to learn all of the short hands. I don't want to learn all of that stuff. We've spent a good amount of time perfecting our design system and our utility libraries on our own platform. So I just don't really have a super use for it. Not only that, but I like to wrap up a lot of stuff in like useful utility component things and then control it all by CSS custom properties. I am gifted with the benefit that I don’t have to care about browser versions because the people who are using Level Up Tutorials are not going to be on Internet Explorer. So like give me CSS custom properties and give me all that stuff, right? So we've been on grid and custom properties for so long now that like I’m totally out of touch with what it's like to build a site for normal people. And like maybe having something like Tailwind in there that's going to like really just look good no matter what you use those like short hands and it's just going to look good with all the utility classes and stuff. That is appealing to me, but it's appealing in the same kind of way that it's not bootstrapped. But it's appealing to me in the same kind of way that bootstrap was where it takes a lot of the guesswork out of it. And I do like those aspects of Tailwinds. We have a thing on Syntax where every time we mention Tailwinds, we regret it, because we say something and then everybody gets really angry at us. [00:36:51] SW: What did you say about my CSS framework? [00:36:54] ST: Really, really feisty about Tailwinds. So I’m not going to say anything bad about it. It’s just not – For me, personally, I really love the scoped CSSing in Svelte by default, in which it can be a controversial thought on its own just because people take that as saying like, “You just don't know CSS.” Like, “Okay.” It's very frustrating. Yeah. People say like, “Oh, you can't handle the cascade? You can't handle the – Like why can't you control the cascade?” I can control the cascade.[00:37:27] SW: These are the same people that turn around and use CSS modules, because like that's the same thing. [00:37:31] ST: Yeah. They don't. No. It's the people who just like only write SASS still or only write CSS, and that's cool, man. But like they're in addition to the cascade. Having scoped containers is really slick. And in fact I’ve been using styled components a lot like this the scoped containers within Svelte lately. Instead of making actual components, I’ve been making like component wrappers at the top level of my components as like the container component. And then everything inside of that is scoped. Hey, you don't have to worry about it and after that.And like there are some things where you have like interface patterns where this particular CSS only applies. And the only other options are what like in-lining it or writing a new class or BEM or like really nailing down that specificity there in your CSS that like, “Okay, these are all viable things.” But at the end of the day you're just trying to solve the same problem, which is how do you attach some styles to one specific element and scope it to that element? And to me, the fact that you could just drop a style tag and say, “H1 margin top zero,” and have it only apply to this one specific facet of your entire site is like very, very appealing to me, because you can still write the rest of your CSS in scoped design systems. It's funny, one of our latest courses was modern CSS design systems where like that was the whole premise of it, is like how much CSS can we get away with where you're only styling elements? And so no classes for the first 15 videos. We're just trying to get as much of a complete design system as possible with no classes in CSS custom properties. And then after that, then we can start to add some utility classes that we're creating ourselves. And then like you can get so far. In fact in the animating Svelte course, the design system that we use for that course is the same design system that we created in the modern CSS design system. So it's like good enough to use in all of our other content. And that's actually another thing I like to do is like triple dip, double dip, triple dip, whatever, when I’m like learning something. If I can get more content out of it, it's like, “Oh, I’m realizing that the CSS and some of my tutorials doesn't look good. Maybe I should just do a course on making that CSS look good. And then I'll have good CSS for the rest of my content.” [00:39:47] SW: Extra tutorial. [00:39:49] ST: Exactly. That’s always the thought. [00:39:50] AJ: I like it.[00:39:51] ST: Yeah. Oh! Well, we can get a Syntax episode out of it too, huh? [00:39:54] SW:  Aha! Right. [00:39:59] KAK: Yeah. So maybe we should talk about that a bit. Like how is it running a podcast for such a – You've been running this for like so long, right?[00:40:07] SW: Four years?[00:40:08] ST: We just hit our 300th episode. I think maybe we started it in 2017. It's funny for me because Wes and I created Syntax a year before we ever recorded the first episode. The first episode launched June 27th 2017. And so we sat on the idea. Like literally for – Like we have the design document for it and it was like June 2016 and we had like 20 episode ideas written down. We had the name. We had like all of the segments. We had like a lot of like the stuff that is Syntax. We had completely figured out a year in advance and we’re just like – Yeah, we were just both busy. I had gotten a job at like a startup. I was doing Level Up, but it was still part time for me. It was still nights and weekends. And I like to say, like my son was born in May of 2017, and he's my first child, and in like by June 27th, we started the podcast. I quit my job and I went full time with Level Up Tutorials all in one month just because I had this clarity, this weird clarity that came with the birth of my child, which is just like, “I’m not happy doing what I’m doing. I’m not happy in the job that I’m in.” We had this really neat idea. I have these like grand ambitions like, “Now or never. Let's do it. Let's get it.” Yeah. We recorded the first three episodes and we're like, “Listen, we're just going to record – We'll record for like six months and see how it goes.” And we've recorded the first three episodes and the response was like immediate. And by the fourth episode we already had a decent audience. We had – I think Wes and I predicted correctly that like I had 300,000 followers on YouTube. Wes has a billion followers on Twitter and his emailing list and his courses, right? And we predicted correctly that those audiences don't overlap that much. We actually ran some like audience overlap thing. I forget where we even found this code, but it was like for our YouTube audiences. And like he only had like 60,000 people on his YouTube or something. I say that is like – Whatever. But we found out that we had like zero overlap. Like even throughout all those people where it's like the overlap was like nothing. So I think we just got lucky. Yeah, we just got lucky. And Wes is a powerhouse of marketing stuff. So he cooked up the site and shout it out to his emailing list and whatever and it was very big right away. And Level Up Tutorials, like for me, like I had the bones of Level Up Tutorials. The new site was there. It was an e-commerce. I had all the subscription code done because I’ve been working on it nights and weekends forever and ever and ever. And it was like kind of mind-blowing to get eight hours a day to work on it. So all of a sudden I could focus all that like crazy energy I had into it into like actual work. It was a wild month for me. It was like a deranged no sleep. Actually, I wonder how you could – If you listen to those early episodes if you can tell just how little sleep I had gotten before any of it. [00:43:18] KAK: I remember when I started Svelte Radio, I was thinking of having it as more like a news sort of podcast where I like talk about the latest stuff that happened in Svelte, but I only managed to get like a five-minute episode out. [00:43:34] ST: Yeah. That's the problem with that.[00:43:34] KAK: And then just sat there for like months and I didn't do anything. [00:43:39] SW: One episode. [00:43:41] KAK: Yeah.[00:43:41] ST: So there's like a Rust podcast, that's all it is. And like, yeah, you can't get any more than like five minutes out of that like. Yeah, just read the news. Yeah. [00:43:49] KAK: It's crazy because you'd think that there's more things happening, but it's so quick to just blast through the topics, right? It's a lot more fun as well with co-hosts. [00:44:03] SW: Yeah. [00:44:04] ST: It's funny, I was just talking to Wes about this because we were just like planning our 2021 stuff and like I was just talking like, “Man, it's really cool that like I get to just like talk to a good buddy about stuff I really like, and like that's really what it's about for me more than anything. It's like, “Man, I can just like chat web, because like I don't work with anybody else and otherwise I’m just talking to my wife who, she, by all means entertains the idea of listening to me. She doesn’t know a thing about web. She's a psychologist.” So it's like she'll just be like, “Okay, that's great.” But she does know what Node.JS is. She knows all of the JavaScript frameworks. And if I mention one she'll be like, “Oh, is that this thing?” By all means, she actually entertains the conversation. But I’m sure she is very thankful that I have somebody to spill all these things inside of my brain too that actually wants to hear it. [00:45:01] SW: Since you're the veteran podcaster in the room, what is your advice to us and to other podcasters out there who might be thinking about starting a podcast?[00:45:10] ST: I don't know. Keep it fun and educational all the time. That's like the only thing that we've tried to do. And like the fun aspect of Syntax, I think that's just like part of like – And some sort of weird natural rapport that Wes and I had from day one where like I don't know how or why, but he and I just like clicked right away, right? By all means, Wes and I had never even met through like a year of doing Syntax. Yeah. So weren't like – We were acquaintances. We had done video chats and helped each other out in our mastermind group and stuff, but we didn't know each other super well. So like the fact that we had good chemistry is like that was just a kind of special or something for me. But like the thing that we like wrote down when we started Syntax in our initial like design document of what it was going to look like. We wrote down all the things we hate about other podcasts. Not naming names. We didn't say this podcast sucks for these reasons, but we both listen to a lot of podcasts. And another thing, neither of us listen to web dev podcast very frequently. In fact, you guys might be happy to know that this is one of the only web dev podcast I listen to. I listen to this, Syntax, and there's one I pop on every once in a while that like the topics don't always interest me, but when they do, I'll listen to them, Software Engineering Daily. I don't listen to every episode of that, but when one pops up, I like it.[00:46:32] SW: That's a good one.[00:46:33] ST: It is good. So either way, we like went through podcasts that we liked, which were typically like pro podcasts and like, “Okay, what are these things that we like and dislike?” We wrote them all down and then we're just like okay, “These are the things that we like. These are the things that we don't like. This is where we'll go with it.” And we didn't like only having people on to like sell their thing, right? We still get requests all the time. “My boss is releasing a book. He would like to come on your show. And we say, “No. You're not coming on the show.” We only invite people on the show who have something to offer that's not like just a product, right? If they have a product they want to push, that's fine too. But like that's specifically not why we want people on the show. We want it to be first and foremost as educational as possible. We're both web dev teachers. We want to teach something every single episode. We want that to be the focus of things. It was almost like we could distill like what's in both of our tutorial series and try to turn it into just like a slightly different format. And we wanted to have just like minimal overhead. Like here, here's the initial design of our podcast layout, informal intros, quick informal interest. Introduction to topic, talk about the topic, sick picks, end of the episode. That's it. [00:47:47] AJ: Sick picks. [00:47:48] ST: Yeah. So it was like we didn't want to have any more structure to it than like we spend 45 minutes of an hour teaching you something is really it.[00:47:57] KAK: Yeah. I think that's actually sort of what our outline looks like in practice. [00:48:02] ST: Yeah. [00:48:03] SW: Yeah. I think you are very influential in how we evolved it over time. And I think also the fact that we got editing, I think it was a major lift into our quality. [00:48:12] AJ: Oh yes! Huge. [00:48:13] ST: Oh yeah. I think I personally edited the first like 40 episodes of Syntax. And even though I have a degree in audio, it's like I’m still – I’m like, “I’m not a practicing audio engineer in any facet,” and it was never something I super loved. [00:48:29] KAK: Yeah. I did the editing at first, but then I just hated it so much, like I could do it. [00:48:35] ST: It's tedious. Yeah, it's tedious. [00:48:37] KAK: Some people like doing it, I guess. That's fine.[00:48:40] ST: Yeah. My best friend's an audio engineer. He chops up audio all day long. That's all he does. Not for podcast obviously, but like still same regard. That guy could listen to a hundred vocal takes of the exact same word and just be like, “Hmm,” and really get like which one of these. But that's like why he does what he does. Yeah.[00:49:01] KAK: Yeah.[00:49:02] AJ: I have a friend who's a TV subtitler, and he just watches all these soap stuff and he has to like watch the same scene like five times and type the words out and make sure it's like, “Oh! I just couldn't do it. I couldn't even physically do it.” [00:49:15] SW: Anime fans do that for free. [00:49:17] AJ: Yeah, right. Yeah, that’s right. [00:49:19] SW:  Yeah. Hobbyist game translators and things like that, yeah. You know what? It's funny. I really enjoy editing video, which doesn't make a whole lot of sense, because when I edit video, I’m really only listening to the audio. I don't even watch my video when I edit it. I don't watch the video until it's done edited. And then I watch the video. So I only edit based on audio. But for some reason, I really like that. I cannot comprehend why that would be. [00:49:45] AJ: See, yeah. It seems like along the same lines. I just find – I mean I don't have the computer for it anyway. So I can't really do it. But I just find anything like that. I can do it for five minutes and I’m really bored of it and I just – it never gets anywhere. It sits on my hard drive forever and then gets forgotten. [00:50:00] ST: I edit at 2X, because I can't listen to myself talk at 1x. [00:50:06] KAK: Yeah. All right so I think that's pretty much it. [00:50:11] SW:  Speaking of sick picks, right?[00:50:13] KAK: Yeah. But before that I was going to ask you if you could tell us where we can get your uh Svelte course.[00:50:21] ST: Oh yeah. You can get my content at You don't have to go to /pro, but that's the sign up page. When is this episode going to air?[00:50:34] KAK: Which it should be out either tomorrow evening, European time. [00:50:37] ST: Cool. So right now if you sign up for Level Up Tutorials, you will get 50% off the year. A lot of the courses including Animating Svelte are 50% off individually, because we offer a la carte purchases as well. It's like you can do the subscription, but we realize not everybody's company pays for subscriptions. Not to mention like everything's a subscription nowadays. So if you want to just buy one course, all of the courses are 50% off as well from now until maybe a couple weeks from now by the time you're listening to this for our Black Friday sale. We have a timeline or like a countdown on it, but I think I might keep it a little bit longer. I don't know yet. So is where you can find all of my stuff. [00:51:19] KAK: Cool. And then we have sick picks then. [00:51:23] AJ: Sick picks. [00:51:23] ST: Sick picks. Sick picks. [00:51:25] AJ: Time to look on our desks.[00:51:27] ST: Yes, right.  You look around the desks.  You look at the last things you bought on Amazon. You know what? I have a sick pick for you guys that's very on brand for me. If you've ever listened to Syntax you'll know I like podcasts that are typically about like scamming people or things like that, crime podcasts, but not like murderous crime. I like web crime and stuff. I don't know why. But – [00:51:50] SW: Yeah, Darknet Diaries. Yes. Sorry. Go ahead. [00:51:52] ST: Yeah! In Darknet Diaries, we had Jack on the show to read one of our spooky Halloween stories, and it was like the coolest thing ever for me because I’ve been such a fan of it for so long. So like when he agreed to do it I was like, “Oh, yes. Thank you. That's so great.” I have a podcast that's called QClearance: The Hunt for QAnon. And if you have never heard of QAnon, it's a weird conspiracy theory that it has gone through all sorts of different origins. And this is a British guy who has like no connection to the US really. He's just like trying to find out who QAnon is as a person. And it's very good. So QClearance, it's good because it's got all the elements I like about this type of thing. It's got a little bit of mystery to it. It's a very good podcast the host is good. It also has a lot of web things and it goes into the history of a lot of those like anonymous image board, 4chan and 8chan and all the stuff and who owns them and how that ownership has changed. And the sort of like shadiness that goes on in these worlds and who's scamming who here and whatever. But I found it to be absolutely fascinating and it’s on brand for me with that whole thing. So QCearance, really interesting.[00:53:00] AJ: Nice.[00:53:01] KAK: Cool. Cool. I have an author I want to pick. So I’m heavily into like fantasy sci-fi books, and I’ve recently or last few years I’ve been reading Brandon Sanderson. If you guys have ever heard about him?[00:53:21] SW: Yes sir. From [inaudible 00:53:23]. [00:53:24] KAK: Oh! He reads them as well? [00:53:26] SW: Ken’s a huge Brandon Sanderson fan. And yeah, he does fiction writing on the side as well. And I heard about him from there. And then I found his podcast and he just like has a lot of good advice on writing. [00:53:38] KAK: Oh! He has a podcast?[00:53:40] SW: Yeah, with like four other people. It's like a rotating panel of established authors. Not self-published. Not legit, but people like me. But like actual authors who are successful and have like big followings and stuff like that. And yeah, it's really good. Really good. 15 minutes. And that's a different topic.[00:53:59] KAK: Yeah. Did I get a pick by picking something? [00:54:03] SW: I know. It's like – What is your pick? Just his books? [00:54:07] KAK: Yeah. Just his books. They're awesome. [00:54:09] SW: But which one? I think he has a lot. [00:54:11] KAK: I would start with a the series Stormlight Archives. It’s pretty decent series.[00:54:18] ST: Check it out.[00:54:19] SW: Cool! I feel like it's on brand to recommend a podcast. So I guess I’m going to pick Acquired. It's one of my favorite sort of tech-businessy podcasts. I’m almost interested in like the business cycle tech as well. And yeah, I recently signed up for their premium show where they go a little bit into sort of financing of startups. But just the free show is just extremely high quality, The most recent one tells the story of Virgin Galactic, if that's the name of the thing? But they just do a lot of research and then they tell the stories of companies in very interesting ways, and you always find something new learning about them. So that's [00:55:01] ST: Is it on a tiny, tiny network or whatever? [00:55:05] SW: Maybe. I don't know what network. [00:55:06] ST: Every company has a story.[00:55:07] SW: Yeah. They just joined it.[00:55:10] ST: Oh yeah, Virgin Galactic. Cool. Yeah. Okay. [00:55:12] SW:  I mean they tell a lot of things. It used to be about companies that got acquired and then they would rate the acquisition from like A to F, right? So like Facebook acquiring Instagram was an A, whereas something – There's not that many F's, but it could be like AOLTime Warner. That was pretty much of a fail. But like it was an interesting idea. But I think now they've sort of pivoted into just general interesting tech companies that may not have been acquired yet. And the most recent one I think was with the Superhuman founder as well, Rahul Vora. And I’m a Superhuman user and I just really admire the way they ask questions and it's a good rapport among hosts. And yeah, it's techie. So it's on theme for this podcast.[00:55:55] KAK: Cool.[00:55:56] AJ: Yeah. Well, my pick. I don't want people to think that I sort of imagined or sort of invented my pick as Scott was talking about not enjoying crime, like real life crime podcasts[00:56:06] ST: Oh! I do enjoy real-life crime podcasts as well, but not as much. Yes. [00:56:10] AJ: So my sort of pick is a actually YouTube channel called That Chapter. It's this guy who will talk you through, murders missing persons, that sort of thing. He produces videos, well-edited, well-made, entertaining videos, which are quite long you know, within an hour or so or they’re usually about half an hour. At a rate of knots, he does it twice a week I think, which I don't know how. It must be his full-time job. I don't know, but maybe it isn't. [00:56:36] ST: 815,000 subscribers. [00:56:38] AJ: Yeah.[00:56:38] ST: Yeah. It’s probably a full-time job. [00:56:41] AJ: It must be a full-time job, right. I did some YouTube calculations, and it's not earning that much. But then I don't know how it works. But yeah, very entertaining. He's a very good speaker. When I was planning my Svelte Summit talk, which I never actually had time to finish unfortunately, I was going to use the format that he uses to do my talk. It's way more difficult than you imagine, because you're trying to talk about real topics and remember them without reading from a script or having kind of hint because he seems to do it really free flow. And you can see him sort of thinking through his head. And I think I mean he's done so many videos, right? But he's just so good at it now. The flow is perfect. It's very entertaining. If you want to see where he came from, you can watch from his earlier videos and you'll see he's very much – He's more robotic. He's much less entertaining. He looks almost nervous. So it's really fascinating to see his evolution actually through that series. But it's fantastic now. The videos he pumps out now are just brilliant. They're just really great. So when I eventually start working occasionally in the evenings I go and watch a couple of those to cheer myself up with some murder stories.[00:57:42] ST: Yeah. Here’s a channel that you might be – I’m going to toss you back one that is similar, but it's maybe a little bit dry compared to what this is. It's called JCS Criminal Psychology. Have you heard of this one?[00:57:56] AJ: Yes. We finished it. It's amazing. [00:57:57] ST: Crazy good . Yeah. I just found out about this from some Reddit link and I was just like, “Oh my gosh!” Because they show all this footage of like the police interrogation rooms and then they're like analyzing what the police are doing. Their tactics in the interrogation rooms is crazy. [00:58:16] AJ: That was where we found that chapter, because YouTube was actually recommending that chapter based on JCS. Do you know what JCS stands for, by the way, because I didn't when I watched it first?[00:58:28] ST: I don't know. No.[00:58:29] AJ: Jim can't swim. I don’t know – [00:58:32] ST: That would explain the icons. His little icon has got like arm floaties. So that explains that. [00:58:36] AJ: Yeah. I don’t know why it’s called that, but – [00:58:39] ST: That's very funny.[00:58:40] KAK: On that note, thanks for joining us on this episode. Where can people get a hold of you on Twitter, for example?[00:58:47] ST: Yeah, Twitter, STolinski. I’ve realize that's not a great last name. I always joke that I should have come up with like a cooler last name as like a stage name. [00:58:54] KAK: Stage name, yeah. [00:58:55] ST: T-O-L-I-N-S-K-I, or if you want an easy, LevelUpTuts. [00:59:01] AJ: That makes sense. [00:59:03] ST: That's probably easier. [00:59:03] SW: You can always go with El Toro Loco. [00:59:05] ST: Yes, El Toro Loco, yeah. [00:59:08] KAK: All right. Thanks, guys. Bye.[00:59:10] ST: Thank you. [00:59:10] SW: Bye. [00:59:10] AJ: Thank you. [END]
11/28/202059 minutes, 6 seconds
Episode Artwork

Rich Harris talks SvelteKit and the future of web development

This week we get a glimpse into the future of Svelte and SvelteKit! Rich joins us to talk about the new thing in town, SvelteKit, as well as what the future of web development could look like.Some topics that we discuss:- Release date- SvelteKit vs Sapper- Features- Adapters- Ideas about what is nextIf you missed the talk at Svelte Summit check it out here.Picks:- Robot Vacuum- OnePlus 8T- SavvyCal- Begin.comTranscription:[00:00:00] KA: Hello, everyone, welcome to another episode of Svelte radio. I'm your host, Kevin, I run Svelte school. And today we have a very special episode, we have the creator of a Svelte, Rich Harris. But before he gets to introduce himself, we'll kick it off with our other hosts.[00:00:19] S: Hey, I’m Sean, work at AWS on random stuff, including trying to get Svelte into AWS and that is an ongoing mission.[00:00:30] A: Hi, I'm Anthony, and I'm the CTO of Biank. And also Svelte maintainer.[00:00:35] RH: And I'm a graphics editor at the New York Times currently working on SvelteKit.[00:00:42] KA: Whoo, cool. The new shiny thing before we get started, how are you? How's everything with the election and all of this stuff? How's the workload? [00:00:50] RH: For me, thankfully, it's settling down. Last week was quite a busy week for everyone. Certainly in the graphics department at the times and probably in the organization as a whole. It's very difficult to avoid getting sucked into the madness. But you know, what is fun? There's no better place to witness history than from a newsroom, even if it is a virtual newsroom scattered around people's homes.[00:01:10] KA: Something I didn't didn't appreciate about your election coverage is that you're actually spinning up visualizations fairly quickly based on what counties or states are in focus at the time. Like, there's some parts of this that you could not have prepared beforehand, right?[00:01:26] RH: Yeah, there's some sleight of hand, you know, you prepare for a variety of different outcomes. But yeah, like, as soon as the results start coming in, the politics editors, and the graphics editors who are covering this, are bashing their heads together and trying to figure out what is the story. And then that kind of filters down to the people making the charts and maps. And we all come together, we analyze data, and we try and figure out what just happened. There is some infrastructure that's already built out, because you kind of know that people are gonna want to know which parts of the country swaying in one direction. But yes, a lot of it is kind of rapid response, data visualization.[00:02:05] KA: So you've got Lego blocks for building visualizations that will tell you population, this area voted this way or whatever, you've got that sort of stuff?[00:02:14] RH: Yeah, like you know that you're going to need a lot of demographic information about counties, like we know that the results are going to be coming in per county or in New England it’s per township, because they like to do things differently. And you just have all of the data that you might possibly need in a massive spreadsheet at a time. And then you can also plug it in to make something relevant.[00:02:37] KA: Alright, so we're not here for the election. We're here for something that's more exciting. [00:02:48] RH: That’s certainly, perspective[00:02:51] KA: For sure. So we're going to talk about SvelteKit today. So before we dive in to the questions, what is SvelteKit?[00:02:59] RH: SvelteKit is, in one way it's a successor to Sapper. And you could even think of it as Sapper 1.0, if you like. But in another larger sense, it's our kind of vision for the way that you should build Svelte apps in future. It’s something that we've been kind of talking about in a peripheral sense for a long time, we've been talking about how we can evolve Sapper to take advantage of some of the recent trends in front end development, particularly the rise of serverless. And more recently, the rise of unbundled workflows, which I'm sure we'll get into later. But it all sort of came to a head recently, you know, the pace of development on Sapper had hit a bit of a low, at least until Ben McCann really picked up the baton and started churning through issues. And people were getting a little bit frustrated, I think with the progress. And Anthony is one of those people because he uses Sapper very heavily in his job. At a certain point, we're like, “What if we just started from scratch?” Like the big rewrite, as opposed to trying to get all of these ideas into what was honestly kind of a watery codebase. I sort of proposed this very hesitantly in the discord thinking everyone was going to yell at me. And instead everyone was like, “Oh, yeah, let's do that.” And so that was sort of the germ of the idea. And then over the last, I guess, month or so, the idea turned into a prototype, and the prototype turned into a project with a name. And I was, I guess, reckless enough to announce it at Svelte summit as a thing that I was working on. And then at that point, it was like a de facto, this is what we're doing. Now. This is, this is it. So now the whole team is full steam ahead. We've got some new contributors as well, people who haven't previously been on the Svelte core team are helping us out. Andreas [inaudible] is one of them and Dominic who created Sleet helping out in the repo and it's actually looking good.[00:05:00] A: I think that probably the alternate version of that story is that Rich claimed to going on holiday, he went on holiday, he came back a week later and SvelteKit appeared. And then we spent ever since bikeshedding the name.[00:05:15] RH: I promise I didn't do it on holiday. I would have been very sad, I had a really nice break. And if I'd spent it in front of a laptop, I'd have  been very unhappy with myself in trouble. It's just the way these things right, the first 80% of a project is you can build it pretty rapidly. But then once you start to get into the details, that takes the remaining 400% of the time. And that's the situation that we're in at the moment.[00:05:15] A: The modified Pareto principle.[00:05:41] KA: Obviously, I'm not so steeped in the history of Svelte as much as some other people here. But I feel like this is something that happens every now and then in rich land. This idea that a big rewrite would update just a lot of the core assumptions and change the design to something that is much more enjoyable. Is there like lessons that you learn from you know, having done things like these, for example, going from [inaudible] to Svelte? And then from pre Svelte 3 to Svelte 3? I thought that these are pretty major bumps. Right?[00:06:09] RH: Yeah, I mean, I guess the main lesson that I've learned is probably that it is a good idea. Because software, it grows organically, right? And there are layers at the bottom, that very often don't make a lot of sense anymore because things change, especially in the front end world, things are changing all the time very rapidly. And we started sick of dealing with a legacy code base, but because there's actually a new foundation that you want to build on top of them then it is worthwhile. But at the same time, I have also learned every time I've embarked on any kind of big rewrite that it is going to be so much more work than you anticipate. Because the old thing that you're replacing, it did a lot of stuff. And you're, the new thing needs to do all the same stuff.[00:06:59] KA: Just better. Yeah.[00:07:02] A: It’s also I guess, we're sort of building in parallel with Sapper, it's not like we’ve just abandoned Sapper completely. Sapper is now in I guess, in the kind of maintenance mode although it's not really officially announced yet. We're adding to it as we go. And the issue of course there is any new stuff or fixes you put into Sapper have to be then ported across to SvelteKit. So it's actually keeping track of that as well, actually, it's actually quite difficult. So it almost inhibits us, it makes us try not to do too much on Sapper, even though we need to keep it going.[00:07:32] RH: Yeah, and that plus, you know, psychological factors, I think, really driving us to get this work done as fast as we possibly can, in spite of all of our schedules, we really want to get this done sooner rather than later.[00:07:45] KA: Speaking of getting this done. Are we talking hours,days? Try it for real.[00:07:59] RH: The one thing that I've said about timing publicly, other than I'm not gonna say anything publicly about timing, is, I think we're looking at weeks rather than months, I would be disappointed if we didn't have a public beta or beta, we've had a long conversation about how to pronounce that word, sometime this year, which gives us just under two months to the public. And then, you know, a 1.0 version is gonna be a little bit longer, it kind of depends on what people find, when they first try it out. And if there's all sorts of bugs and use cases that we haven't considered, then, you know, might push things out a little bit, but you know, hopefully, early 21, we're going to have it stable.[00:08:47] A: I think also that the reason that committing to an ETA isn't really possible, really even giving that rough guideline, Svelte has no full time maintainers. It has people who have real jobs in the real world who do this in their spare time. The advantage to that, of course is that you know that everything that's going into Svelte and Sapper and SvelteKit, and everything is people's passion, and it's stuff that people want to do, not stuff that they feel is a chore or that they're paid to do against their will or anything like that. It's really a product of passion. And I think that gives it an advantage over something that's maybe run to a sort of an expectation or a schedule or a more official, [inaudible] call it company I suppose.[00:09:32] RH: Also no ivory towers here, everything we build is driven by very real world practical needs.[00:09:39] KA: Now that we know what SvelteKit is and when we can expect it, should we get into some questions? I think the first one that most people that are coming from Sapper are wondering about is what about migration? How easy or hard will this be?[00:09:54] RH:Yeah, so one way to think of it is imagine that we did put out a Sapper 1.0 and we’ve said all along that there's likely to be some API changes between, like, where are we now Sapper 0.28 and Sapper 1.0. And every time we've released a new version of Sapper we've had a migration guide that sort of walks you through the process, it's actually not going to be any different from that. There are some changes that we have to make because we're embracing serverless is this first class idea, but like the bones of the project are going to be relatively unchanged. And so we've been migrating some of the existing sample sample projects like our Hacker News clone and our Real World clone, it's not that much work. Because your file structure continues to represent the structure of the application, we have the same file name convention for dynamic routes, and all that sort of thing. Things that have changed, let's go through the list. Previously, you would have had a custom server.js, because the expectation was that you're going to be running a node server, or you're going to be statically exporting the entire app, we can't make that assumption anymore because there isn't going to be a server in the traditional sense, there's going to be a set of serverless functions. So right now there is no function that will run for every single request, other than the function that generates the session context, which like, includes your user information and stuff like that. And so you can't use things like Express middleware, and stuff like that, which you might have been using before. As things stand like all of this is, you know, subject to change, if it proves that there are a lot of things that people just simply cannot do without having a custom server. But right now, we're trying to lean as far as we can in the direction of being like fully serverless. On the same note, your endpoints, so we used to call these server routes, which has a bit of a funky name, we're now taken to calling endpoints, which is to say that if you have a file like sourced/routes/foo.js, that will respond to requests to the slash foo. And inside that, your handlers no longer take the request and response object that you get when you're dealing with notes HTTP module. Because if your on an ADLS lander environment or something like that, then you don't see those things, you are given an object that represents the method and the headers and the body and everything like that associated with the request. And your job is to return an object that contains a status code, some headers and the body. And so we're basically adapting to that surface, which means that you will need to write all of your endpoint handlers, we might change the preload signature. And we think that we can probably improve that a little bit. And a lot of people don't like the fact that you have this inside your preload functions. And so we might fix that. But everything else is just a few little cosmetic bits, bits and bobs here and there. If you have a very complex build config, like if you've changed the Webpack config, or the roller config in your project, then you'll need to find some way to represent those changes in the new Snowpack config. But that's about the extent of it, I think.[00:13:08] KA: Something I am a little bit vague on is so we're splitting things up from a single server to multiple serverless functions. Do we have fine grained control over which of these are statically rendered? Or which of these are dynamically rendered? I don't know if that's the term.[00:13:23] RH: We do. So there is this concept of pre rendering that can apply to all of the different adapters. We'll explain what adapters are at some point in this episode, I'm sure. And essentially, what that means is that as the functions are being built, we can pre render a subset of the application as static files, and they will just get dumped on your CDN wherever. And then when a request comes in for one of those static pages, it will just retrieve the pre rendered HTML, which is great, because there's no work to do. Having said that, I don't know if you've been following what Remix are doing at the moment? They have a conviction that static site generation is a waste of time. And actually, we should be dynamically pre rendering everything but using cache headers in such a way that it is as if you had statically the pre rendered everything. It gives you the benefit of the dynamic rendering, but without the downside of pre rendering, which is that if you have a very large site, it might take several minutes to pre render all of your pages. So you can sort of amortize that cost over the life of the app. That's a long winded way of saying yes, we do have pre rendering, but also we're kind of thinking about whether that is the right direction, and there's more exploration warranted around that topic.[00:14:42] A: I think it's a very interesting direction. Yeah.[00:14:44] KA: I had a question about like the, so in other frameworks like Next js. you have this gets static props thing, for example. I guess this touches a bit on that. So prefetching data at build time.[00:14:56] RH: Yeah, well Next has get static props and get server side props. If you have a static pre renderable page, then you call one function. If you have a dynamic render page, then you call a different function. We're not doing that, we just have one consistent way of pre loading data, whether it's a pre rendered or not pre rendered route. And the way that we differentiate between pre renderable pages and non pre renderable pages, is you just export a Boolean. Export cons pre render equals true. If that exists on a given page, then the adapter can know that it can pre render these pages. And you don't need to seed it with the pages that are pre renderable. Because it can just look at the route manifest that it generates and identify the statically rendered pages for you. I think is the same idea. But I think the implementation is a little bit simpler. As far as you know, offering an app is concerned.[00:15:51] KA: I think, this idea, especially, you know, just thinking about the caching stuff, if you go down that path, it would mean that you basically a very predictable build times because you don't essentially don't have to build your pre rendered page, they would just get pre rendered on request, that'd be an interesting solution, it would change it from like, O of n to like, maybe O of one. But then I think it's also one of those things that's very contentious, because it's just not a norm to set cache headers in a lot of JavaScript frameworks. It's definitely a bit on Ryan and Michael's side of things. And it's something that so having worked in Nullify, myself, Nullify does stick to the fairly strong view that people don't never, they either never set cache headers, right. Or they tried to do it right. And then the first set of problems, they turn it off, and then they leave it off. Because that's that's the way you solve problems with cache invalidation, you just stop caching. It is an upcoming struggle, I feel like that that we're really going to see play out because of all these frameworks exploring this space.[00:16:51] RH: It is. My guiding light around caching is a blog post that Jake Archibald wrote a while back, in which he basically says there's two reliable ways to set cache headers. One is the content is immutable. It has, like some unique identifier in the file name, like a hash of the contents. And then you can treat that as immutable. Once the browser has it, they can hang on to it indefinitely. because nothing's ever going to change. And that's guaranteed. The alternative is, you're going to need to check everything with the server. And the server can respond with a 304, which means nothing has changed since the last time you had this file. So you can use the version in your cache. But you still need to check everything with the server. And anytime you start to get into or maybe you can hang hang on to this file for a little bit, then don't check for like the next 10 minutes or something. Inevitably, you start getting a mismatch between, you know, you've got some resources cached and some other resources that relate to that resource, uncashed. And it gets out of sync. And this is, this complexity is magnified when you have a server rendered page, which is cached for a certain amount of time. And then if you if you navigate to that page client side, and the framework is just getting the data for that page, instead of the page itself, then that JSON file or whatever it is, will have a separate cache lifetime. And so the server rendered page and the client rendered version of that page will be out of sync. And even Remix doesn't have a solution to this problem, it is a really tricky thing. But I think what Remix is doing is pretty smart. After talking to Ryan and Michael a little bit about this, it turns out that what they're doing is they're actually controlling the deployment as well as the generation of the files that get deployed. So their equivalent of our adapters, they are also responsible for invalidating caches on the various platforms, which is how they're able to have this level of granular control. Whether it's worth thinking about adapters in SvelteKit in the same way, that they should be responsible for deployment, as well as just for building, is something that we probably need to think about. I think[00:18:55] A: I think also, if you're generating a lot of content up front, and then you know, static, generating content, and then you're deploying that content, and then someone changes what their contents based on, and then you have to rebuild the whole thing, you're going to have that build delay, whilst all that content is rebuilt anyway, unless you're gonna have a way to build them one by one, which should be very quick. So if you're rebuilding all that content, every time someone makes a change, then that's basically the equivalent of having a long cache on some stuff and having stale content rendered to the browser. So I don't think either is a silver bullet. It's definitely an issue that needs a lot of thinking about.[00:19:32] RH: Yeah, it's one of two hard problems in computer science.[00:19:34] KA: Right. So TypeScript support, of course.[00:19:39] RH: Yeah, we're gonna have full TypeScript support when we launch, you know, whatever your definition of full TypeScript support is like, we'll have the ability to set up a TypeScript project when you do [inaudible] in Svelte it already, in fact, asks you, “Do you want this to be a TypeScript project?” And if you hit yes, then it will add TypeScript to your package. It will convert the example component to have Lang equals Ts, give you a Ts config, all of that stuff. And it just kind of just kind of works. There's other little nuances about how we incorporate Svelte check into this setup. But the short answer is yes, TypeScript will be supported. We're not making the mistake this time.[00:20:21] A: I think you've also, you've also touched on another point there, that SvelteKit has a CLI, and it has a config file. And that's there's two things that originally we considered to be a not not a good thing. And now they are sort of, they’ve become part of what we're building. So might be interesting to talk about why?[00:20:41] KA: Maybe back up a bit as to why do you get in the old case?[00:20:44] RH: Yeah, so for a long time, we kind of rejected CLI’s in favor of just plain old template repo. And that's your project. To make that easier. We have this tool called DGIT, which essentially clones a repo without all the history, and has some like nice stuff around discovering the repos that you've already claimed in the past, so that you don't need to type it out each time. And it will do offline caching and stuff. But it's basically just cloning a repo and then deleting the docket folder. And that's nice, because you're really, you're showing your work, there's no, there's no magic, there's no, like if you do a Create React app thing. And then at some point, you're going to stray from the happy path and you're going to need to eject from your Create React app setup. And at that point, you're on your own. And what was formerly this relatively self contained thing just kind of splurges all over your file system. And it's just a, it's a very confusing experience. And so we've felt quite strongly that it's better to just give someone some files and say, this is how they interact with each other, if you want to make changes, go nuts. And that way also people can, they can make their own base repos. Like if you spin up a lot of projects, then you might have some opinions about how to set that up about how to do tests and this, that and the other. And so you can make your own repo which is based on ours, and then you've got a project template that you can clone just as easily as cloning our own. But we are introducing a CLI and I think that is largely motivated by the TypeScript thing, if I'm honest, because we've got a situation now where once you clone the Svelte template, you have to sort of run a command that sets up TypeScript. And if you look at the script that does it, it's, it's like breathless, like it's very clever, and it works. But it's also kind of messy. And if we're going to start adding stuff like that, if we're going to have questions about how you want to set up your project, then I sort of think that we need to be in control of how that project is initialized a little bit sooner. And it's also just people know what npm-init aoes, people are familiar with that. So the fact that you'll be able to do npm-init in Svelte, without installing a single thing, that will give you a Svelte project, and you can get started really quickly. I think, I think that's neat. But you'll still have the ability to DGIT from a repo that you maintain, if you have specific requirements. I think it gives us the best of both worlds, gives you a really nice onboarding. But we're still not going down this whole messy eject or don't eject route, that some frameworks seem to like. [00:23:39] KA: So this config file. So that's where you would define your adapter, your pre processors, all of this stuff?[00:23:48] Yes, yeah. So that's another thing that we resisted for a while having a Svelte config file, because config files have a way of getting a little bit unwieldy. And so we sort of said, maybe, let's put the brakes on this and not have a config file just yet. But then what happened, of course, was people in the community, thought, “We want to have a Svelte config file for our tools.” And so people created incompatible Svelte config files. So you know, you have one in the Snowpack starter project, you have one in the Parcel plugin, and they are fundamentally incompatible. So we sort of had to come along and say, we're laying down the law, this is what a Svelte config file is going to look like. And now that we're having this, like official way, like this is how you build Svelte apps, we have a SvelteKit and this is the officially supported way to build Svelte apps. It's less of a problem to have a Svelte config file because the project structure is already just kind of more predictable and more understandable if that makes sense.[00:24:49] KA: Speaking a bit about adapters. Can you tell us anything about which ones are going to be coming at launch? Like which ones are you excited about having?[00:24:58] Also what adapters do? Because Yeah, I myself don't really know?[00:25:03] That's a good question.[00:25:06] RH: You've got two choices, you can do Sapper build, which will create a node server that serves your app. And then you have to find the platform that can run a node server. And that's harder now than it used to be. Like, for example, before [inaudible] now v one, you can just run a node server. And that was great, really easy way to run a Sapper app. Now v two comes along, and you can't do that anymore, because they're gone fully serverless. So that's like a, an indication of the sort of direction in which things are going. Sapper Build was designed for the world formerly existed, Sapper Export, on the other hand, would build your server, it would then start your server and then it would crawl your and make out what it found. There was no in between, between Sapper Build and Sapper Export. Now, we want to be able to say some pages are pre renderable, some pages are not pre renderable. And so that means doing things in a slightly different way, at the same time, we want to be able to generate Cloud Functions that run on Netlify, or Vercel or Begin or any of these other platforms. CloudFlare Workers. Yeah, that's another big one. It's difficult for the framework itself, to be able to satisfy the competing demands of these various platforms. So one of the big changes in SvelteKit relative to Sapper is this concept of adapters. The way that works is when you build your site, it happens in three phases. The first phase is we run it through Snowpack, which is what powers SvelteKit. And that will generate what we call the unoptimized build. And that's just like a one to one transformation of the files in your project. It'll do it twice, once for the server side rendered version of your app, once with the client side rendered version of your app. We then move on to phase two, where we optimize that output, we run both of those applications through roll up that allows us to do things like bundling things into coarse grained chunks, which are better for loading performance, we can extract CSS from your application and write it out as static CSS files. And we can generate the manifest that allows the Cloud Functions to know which code they need to load in order to render the page that's being requested. And so after that, we've got something that is pretty agnostic and doesn't actually do anything yet. So we we applied the adapter to it as a final step, which takes the optimized build and massages it into the form required for the various different platforms be that a node server or a purely statically exported site as with Sapper, or one of the higher function providers that we're going to support. You asked what we're going to support at launch. We don't have like a list yet, but you know, definitely Vercel, definitely Begin, definitely Netlify, definitely CloudFlare Workers, I think. [00:27:57] KA: I'd be happy to help pitch in support forAWS.[00:05:00] RH: Definitely AWS Yeah,[00:28:02] A: It's worth noting, yeah, that a lot of people have come forward and say that they'd like to build an adapter for their platform of choice. And I think that's, that's a great thing. That's a really fantastic thing. The list that we have right now it started off with Rich building the Netlify one, I built the Vercel and Begin ones based on what Rich did with Netlift because, well Vercel was easy, because I'm already hosted on it. And I wanted to work on there. And I want to see how much work it would be because I helped build the original Vercel builder as well. And the Begin because I mean, it’s my pick, is my pick, right? I really like what they do with architects, I really like the fact they have data built in. I really like that kind of stuff. And so I just wanted to see how quick can I get this new thing running on this platform? And how different is it to, to Netlify, for example? And it actually is not that different at all. And that's quite nice thing about adapters they are, they're all turning out to be roughly along the same lines, which is really interesting. Those lines are [inaudible] underneath it looks like so it's pretty straightforward really.[00:29:03] RH: Yeah. So in addition to these official adapters that we're talking about, there's going to be a well documented API for people to build their own adapters. So any platforms that we don't support, people will be able to support them themselves. And actually, there is a conversation happening about how much stuff we want to do ourselves and how much we want to farm out to other people and let them maintain it. But the API is very much not locked down yet. So yeah.[00:29:27] A: Hence why we haven't just invited everyone to build[00:29:31] KA: There's an open question of whether every meta framework like Remix is doing something you know, [inaudible] is doing something, whether every meta framework should have adapters or should every meta framework target a single format? And I may have brought this up with you Rich I don't remember, but Glenn [inaudible] proposed FAB, the front end something application bundle, which are basically containers for front ends and it's a fancy way of just saying let's just standardize what we what we export to so that all the providers know what to ship agnostic of framework and all the frameworks know what to build to. Doesn’t that make sense?[00:30:08] RH: It makes total sense. And I've chatted with Glenn about this. I should have added that to the list actually, we definitely want to have a FAB adapter for SvelteKit. I'm actually surprised that more people aren’t using FAB, it’s such an obviously smart idea.[00:30:20] KA: Because he targeted CloudFlare. He was like only CloudFlare. And then that was the story for like two years.[00:30:27] RH: That's another easy way for us to support multiple platforms is -[00:30:32] A: I think on the flip side of that coin, of course, and I think it’s fantastic idea. I think the flip side of that, unfortunately, is that you can make something that adapts to everything. But abstraction has a cost. And I think that at some point, you encounter a bit where well, this won't work now, because this radically new, different thing that’s super optimized, won't fit into this pattern. So you can understand why there's there's always kind of a, it's not a silver bullet. Nothing's a silver bullet I suppose.[00:30:57] RH: [INaudible] outsource our adapters to FAB but because we do want to be able to optimize specifically for different platforms. But it's a great net to catch the things that we can support ourselves. [00:31:10] KA: I want to move on to developer experience. So this kind of seems like one of the important things with SvelteKit, things like Snowpack, and the adaptors I guess, are also part of that. What are some pain points that you'd like to explore in the future when it comes to bringing the developer experience even further along? Not particularly anything to do with SvelteKit, more like just general thoughts? Hmm. Wow, that[00:31:39] RH: Hmm. Wow, that is a big question. That I think SvelteKit represents a big upgrade in developer experience from Sapper, just because the Snowpack developer experience is so good. For people who haven't tried it yet, like it's worth just trying out one of their sample projects so that you can get a sense of, of how the thing works. It doesn't have any of the delays that are involved in traditional bundlers at development time. And it also has some really nice features like it has error overlays. As soon as there's an error in one of your files, you'll instantly get feedback in the browser, you don't need to have your terminal visible at the same time as you're developing, it just gives you way better feedback. The hot module reloading is really robust in my experience, it's just great. But I think it does open doors to potentially some future improvements that we haven't really begun to explore yet. One of those is the idea of having something like a Storybook type experience built into the framework. I'm not personally a user of Storybook. [00:32:40] KA: Have you tried Svench?[00:32:41] RH: I haven't tried Svench yet no, but it's on my list of things I want to play with. Aesthetically, I just can't get on board with the way that stories are written in Storybook. And also, like it takes a little time for a Storybook to get started. But now that we have this unbundled workflow, you no longer need to point your bundler at all of the components that you want to have in your Storybook, because everything is just dealt with at runtime. So I think we could have a built in Storybook type experience that would be really slick and really fast. But then, you know, once you start thinking along those lines, you start asking yourself, why not just bring this stuff directly into your editor? And so I'm also kind of idly wondering about what an integration between, say, VS code and SvelteKit could look like? Can we start to move more in the direction of wiziwig component editing?[00:33:37] KA: That would be pretty cool. I have wondered because I also faced that frustration with Storybook, we used it at Netlify and a bunch of other open source projects that I contribute to. And yeah, it is way too slow. And that needs to be changed. But the workflow of having independent components apart from your app, so you can develop in piece, but also document and kind of have a live design system, it does make a lot of sense. We all have a source slash components folder anyway, like, let's actually make use of that in some way. I think you're gonna build that as a layer on top, but some people use vim and all that. So it's nice to have a standalone browser version and the browser version, you can just kind of bring into VS code pretty nicely as a VS code extension. And then the other thing to take note of is that people often build their Storybooks as an externally available site, so that people can reference their design systems just for designers and whatever.[00:34:33] RH: Yeah, and actually, this this is a point worth touching on. At the moment, we have this fairly neglected component template for if you want to build a Svelte component for distribution or component [inaudible] for distribution. You don't get as much hand holding as if you want to build an app with Svelte. And we can change that with SvelteKit. I think that using SvelteKit for building component libraries, or even just single components is going to be first class experience, because we can have this storybook type thing in the future. But even without that, you can build your demo site using the components in your source slash components folder. And you can put that somewhere. But you could also have, we haven't built this yet. And like, we haven't really talked about it even among the core team, but you could have a CLI command that packages out as a component language for distribution as well. And I think that could be very powerful, that could cause a renaissance in component libraries in Svelte and you can do things like pre process all of the components in your components folders to strip out the SASS and the TypeScript, and whatever, so that it's easily importable everywhere. But while you know, keeping the component source otherwise intact, and, you know, we can generate export maps, and all of these other things that are a pain to set up yourself, we can just do it for you.[00:36:01] KA: Speaking of things that are a pain to set up, testing, so Sapper had a Cypress included right, at some point, I'm not sure if it still does?[00:36:11] RH: Yeah, it's been removed, actually.[00:36:15] KA: So what's the idea with testing when it comes to the SvelteKit? Have you guys thought about anything around that?[00:36:22] RH: We have an issue open for it. Every time we start talking about testing, like, yeah, we recognize the importance of testing. But honestly, what kind of tests make sense to have in a front end project? It's far from clear like, what stuff you are supposed to be testing, we don't want to have some sort of official recommendations that end up with people writing meaningless tests. A lot of front end tests are kind of meaningless. They're just duplicating the functionality of the frameworks and test suite, which is not a good use of anyone's time. So I don’t know, Anthony?[00:37:02] A: I think, you have to pick the problems you want to solve. And I think for us to determine what a good testing strategy is, is not a problem that we really want to solve or we’re even set to solve. I think a lot of the maintainers especially have different views on what testing is, I'm not even sure now that, I, my view on testing has changed. In the last three years, it's gone from ice cream cones to mountains, and you name it, it's all over the place, it's very difficult to say what a good testing strategy is, it's very app dependent. It's very much about where you are going. I like to build very dumb, thin front ends, and very smart backends. And therefore, I can actually replace the front end or have a native app or anything else like that anytime and not lose the crux of the application. And I think that it does almost make a lot of acceptance testing extremely costly. Because you're writing tests for something that you effectively throw away. It's almost a waste of time to throw the front end away or make some drastic changes to the workflow. I think it's one of those things that it's easy to pull out and say, look to somebody, his name's slipped my mind, the guy who writes testing framework, or testing library. So it's better to defer to someone that came and say, look, go and have a look at what the recommendations are from people who sort of make this their core goal rather than to try and educate as part of building something that's not really related to this at all.[00:38:30] RH: That said, like in a situation like yours, maybe it makes sense to make it easy for you to do testing of your endpoints separately from testing your components. Because if that's where all the heavy lifting has been done.[00:38:42] A: But let's not also forget, like my applications, when I say the front end, I'm talking about everything that Sapper serves. So my testing in logic is in my happy application, it's in my in my API, I don't really have that many server routes. It's a tough one. My API is covered in tests. My front end is definitely lackluster in terms of testing. It's got a few unit tests, and not much else.[00:39:04] RH: Yeah. And there is a cost to having a default, because most testing setups, like they'll need something like Puppeteer or Playwrite. And these are big dependencies. So if you're starting a new project, then you've got to spend several minutes installing all that junk before you can start developing. If you're going to use that then fine. But if maybe you're not going to use that, then do we want to impose those opinions on people? I don't know.[00:39:27] A: And you’ve got browser support and it could be flaky, you know, different, we find the Svelte tests are actually quite flaky on various browsers, on Macs and things like that. And on Windows machines, you've got to worry about that. You've got to have an infrastructure for running the tests. All this kind of stuff is stuff that we really can't define for somebody, I suppose.39:45[00:39:45] KA: I guess the Svelte team doesn't have to decide for people, there’s something that we can do is send people to relevant pieces of information wherever we can find it. Mainly because I've seen people reject Svelte out of hand because they're like, “Oh, look at them,” and they've been like, pointed to that specific [inaudible] FAQ that kind of just does this like [inaudible] a little testing. Yeah, it's honest. It's just like people like to be given the full package. And sometimes it just takes it a little bit of better communication sometimes. So yeah, we can work on that.[00:40:15] RH: I love testing. And it should be absolutely forefront of everyone’s mind all the time. And I absolutely endorse it. But yeah, it's just not something that can be answered quickly or even well, really, in this context. So I agree, FAQs and documentation would be a good place to start. [00:40:32] S: So in Sapper and SvelteKit, we have the router, is that changing anything?[00:40:38] RH: No, it basically behaves exactly as the Sapper router does. We're not changing anything there, which is one of the reasons that it's going to be fairly straightforward to migrate your application. People do keep asking is, “Is this going to be a standalone package that we can use outside SvelteKit?” The initial answer is no, the medium term answer is maybe. There is some complexity around that, like you need to have a good way to. So it needs to work server side and client side, right? And at the moment, because Svelte server side rendering is synchronous, it makes it a little difficult to work with, you know, a manifest that includes dynamic inputs and stuff like that. So there's just a lot of complexity and nuance that we need to work through before we can offer something that can be decoupled from the rest of the SvelteKit CLI.[00:41:24] A: I think when I build projects a lot, I tend to build a [inaudible] of it first. And the boundaries between the different components are always sort of logical boundaries in my head, and in the code. And they're not necessarily physical boundaries, or different projects or modules. And I think probably the same goes for what we're doing here is that there's definitely a notion in our heads that we want to have the router as a separate component. It isn't right now, it is as Rich said, very difficult to do. But every bit of work we do towards the routing, we are consciously thinking, is this isolatable? Can this be separated at some point?[00:41:58] S: One other big topic is the internationalization support, and it comes up a lot, right? What are we looking at on that front?[00:42:09] RH: That is not a problem that we're going to solve for 1.0, that's still going to be a problem that app developers have to solve themselves unfortunately. It's a big and complex and fascinating topic. And when we first started talking about it in the context of Sapper, we generated a huge discussion about the best way to do stuff. I maintain my belief that a project structure like SvelteKit’s, gives you the opportunity to do some stuff with internationalization that is ordinarily quite difficult. But we are just not focusing on that for 1.0 release. Because if we do, it'll be a 2022 release.[00:42:49] S: It also has to be something that someone wants to work on. Right? There has to be interest there right?[00:42:56] RH: I think that there is interest, it's just it's a ‘too many cooks spoil the broth’ type situation, we've got to have a very clear direction that we agree that we want to go in, we can't just sort of open it to the floor and say who wants to work on this? Because we'll end up with absolute chaos. And there's there's a lot of overlapping problems involved, like the routing side of it. Also, how do you express localize text inside your components? How do you generate that localized text in the first place? Like what format do you use? Do you support multiple different formats of localization? There's just so many questions that we need to have good answers to, and we need to decide how opinionated we're going to be in our answers to those questions.43:38[00:43:38] KA: I have an ending question, if no one else has any other topics that they want to raise. What's on everyone's wish lists for Svelte in 2021?[00:43:48] RH: Oh, wow.[00:43:48] A: I mean, that it exists.[00:43:52] KA: I think that will be achieved. So, setting your bar high there.[00:43:59] A: You know, manage your expectations I guess. [00:44:02] RH: I definitely think it will continue to exist. We've talked about how we would love for the Svelte community to be more diverse. We are very typical of an early adopter focused open source project in which you know, our user base is unfortunately slightly homogenous. And, you know, if we can find a way to reach people who aren't currently using Svelte, that don’t look like us, then that would be a wonderful thing. And I think it would be the benefit of the project's health overall.[00:44:33] KA: Yeah, I was gonna raise that. I got to think of something else.[00:44:37] S: I think it's kind of tangential, I'd like to see more accessibility features in Svelte, things like maybe high contrast warnings.[00:44:48] RH: So this is the kind of thing, I hadn't thought of this at all until you said it just now but this is exactly the kind of thing that having a central officially supported project structure like SvelteKit, kind of allows you maybe to do a little bit more reliably, because you can, you can say in a very predictable way, like, this is how you build the application so that you can serve it and inspect it using Playwrite or whatever. And you can't do that if the project structure is completely arbitrary. But if we can say that the majority of our users are going to be using SvelteKit, then that is exactly the sort of thing that we can start thinking about adding to the developer experience.[00:45:27] S: I'll plug Kevin's favorite topic here, Svelte actions. I started actually prototyping a little, you know, project, just just to see, just to achieve consensus on what people think would be nice as official Svelte actions, things we all use a lot like onClick Outside, we all have some version of that anytime we write a model. And then I already forget what else, long press would be interesting for mobile web. Yeah, stuff like that is stuff I'm accumulating. And so there is an RFC. I took a stab at prototyping it. And you know, maybe you will see it merged -[00:45:59] KA: I actually thought about an action for focusing on an input, it would be pretty sweet, focus on loading the page. Anyway.[00:46:10] A: Isn't that the antithesis of accessibility? I think it's like that's the opposite of because I know that the problem if you focus on that attribute, then it's unexpected for users who aren't using keyboards or something like that, I can’t remember the exact rule. [00:46:21] RH: I think you want to avoid auto focus when a page first loads, because people who use keyboards to navigate will expect the focus to be in a different place. I think it is okay to use auto focus in content that is created dynamically. Like if you create a new dialogue, then it's useful to focus the input in that dialogue immediately. But the accessibility rule sort of does this blanket, “You can't do that,” when you add autofocus to an input, which is, I often find myself adding the ignore declaration. [00:46:52] KA: It’s there in HTML. Why would they put in an HTML if it were not supposed to use it?[00:47:00] RH: Left hand right hand.[00:47:02] S: This is what would be nice, with more accessibility warnings. It would help me stop myself from doing stupid stuff like this.[00:47:10] KA: I would also say like inside the Svelte code base, I think there's a lot of to do's left on the accessibility stuff, right?[00:47:17] RH: Yeah, I mean, the biggest one is like when you do have, well the biggest one for me is when you do encounter an accessibility warning, like if you add autofocus, you will get a warning, but it's not at all clear how to disable it. Like you sort of have to know about the like, what the warning codes are, which we don't expose anywhere. And it's not very well done. We need to fix that.[00:47:36] KA: All right. All right. To do list. Let's go on to pics if you have any. I can start. I got myself a robot vacuum machine a couple of days ago.[00:47:45] RH: Oh we can see it over your shoulder.[00:47:47] KA: Yes, yes, exactly. Best purchase I've done in years. Love it.[00:47:53] S: Do you go barefoot in your home? Or are you -[00:47:56] KA: Yeah, I do. [00:47:36] S: No wonder. [00:47:36] KA: I think it's a American thing to like, always wear shoes in the house. Or at least like non Asian thing. I don't know. Yeah, like the Roomba just cleans up things that you would already have on your floor. Anyway, I don't know what I'm saying but -[00:48:13] RH: Does that not rob you of the joy of vacuuming though?[00:48:17] Joy of vacuuming. What? What joy?[00:48:22] RH: Vacuuming is by far my favorite chore. Because you get such a sense of accomplishment. I have one of the battery powered Dyson's which takes a lot of the hassle out like you know you don't need to bend over and like unplug it and then put it into the new socket in the room that you're doing now. I just walk around with this battery powered Dyson and you collect all of the dust off the floor and then like you look at it inside this transparent cylindrical container and you feel a real sense of accomplishment. I think if I had a Roomba I wouldn't get that that pleasure once a week.[00:48:54] A: My wife shows me that right, so we've got, we've got the Dyson too. We've got two of them, one for upstairs, one for downstairs. And what she does every time she uses it she comes in and shows me all of the dirt that’s in it, like it’s some sort of like award. I don't understand it. But now I kind of get it. It's not just her. People do this and are entertained by it [inaudible]. I do however, I will say that I hate vacuuming. I really I don't enjoy any chore really, but especially vacuuming. I do have a Roomba as well. And one of the good things well [inaudible] the fun thing is taking apart after it's done a few cleans and pulling all the hairs out of it and cutting all the bits of it. That's satisfying. That's absolutely great fun. I can sit there for like an hour, taking it apart and pulling all the bits of stuff and hair. It's great fun. Great fun. So you have that joy to look forward to Kev.[00:49:46] S: I got a new phone recently, and I'm quite enjoying. My old phone, I had the Pixel two XL and it served me pretty well but the screen was like smashed up and it was just dying and everything. So I asked people on Twitter what phone I should get between some Samsung Galaxy, whatever the newest one is, or the Pixel five, or the One Plus 8T. And the Pixel five was the overwhelming favorite. So I bought the One Plus 8T. And I've been very happy with it.[00:50:14] A: You made the right choice.[00:50:17] S: Yeah, I made the right choice. Yeah, Anthony was one of the people who steered me towards, I think maybe you actually sent me a YouTube review of the One Plus 8T in comparison with the Pixel and it’s just much better phone, or somebody did, and it convinced me, it's really high powered. And it costs the same as the Pixel five. And it has this sort of nice, turquoise, shiny case on the back, just a very well put together device. So if anyone needs a new phone, then check out the One Plus range. I’m not paid to say that.[00:50:49] KA: Actually, so I moved. I have used, I used iOS, I used Apple iPhones for 13 years since launch. And I switched to Android in February. And I went through the same rabbit hole and I landed on One Plus as well. It was the 6T because I'm cheap. I think my conclusion between Pixel and One Plus is that like Pixel, just randomly, like prioritizes camera over everything else, no matter what it has to have the best pictures, but I don't take many that many pictures. So that's what made me choose the One Plus which is you know, have better specs for everything else. And a decent good enough camera. And I think that's the way -51:24[00:51:24] RH: Yeah, I actually bought a decent camera recently, like one of the new mirrorless ones that is like the DS, the old DSLR, but a little bit smaller. And so now when I go somewhere I want to take photos, I will take that with me. The image that it produces is just so much better than what you get out of a phone camera, that I'm not taking as many pictures with my phone anymore. So it was the same thing for me. It's just not a priority. I think that phone cameras have sort of slightly cheapened the art of photography. And I refuse to participate in this nonsense.[00:51:55] A: I will say that I, I went the other way, I had an iPhone 1 originally, I then switched to One Plus and I had my, I bought One Plus One. And it was stupidly cheap. Because it was when they first launched, they were just basically free almost. And it lasted me six years. And I couldn't actually make it break in order to get a new phone. It's amazing. It just slowed down a bit. And they’d stopped making the OS for it. And I switched to iPhone. And the only thing that's good about this is the health thing with the watch. It's really good. But I miss the Android. And the only reason I’d go back is to go back to a One Plus. The browser on this is terrible. Safari is just a joke, it’s useless. So I'm very much of the opinion now that I might look at Android again.[00:52:37] KA: It's a trade off. My summary is iOS is the better operating system. But then Android has the better browser. So pick your poison. [00:52:47] S: They're both pretty locked down. Right? I guess you can sideload on Android.[00:52:51] Android you can kind of choose what you install. And I think One Plus are very good for actually having customer [inaudible] and stuff. Their phones will take quite a lot of stuff without a lot of modification, they’re a very generic kind of hardware. Well at least they were when I had one.[00:53:03] KA: I've been using a new calendar app, Savvy Cal. It’s by a friend, Derek Reimer, he’s sort of trying to make his make his way in terms of like, indie hacking his own business, and I kind of bought it as a way to support him, but then it actually turned out really good. So it's exactly like Calendly except that it's indie and it looks different. I always get compliments on it whenever I drop a link to people. And I think that a lot of people don't do that. So they do they always do the back and forth emailing or like, “I'm free at least three times. Can you make any one of these?” And it's just better if you just give them a choice. I've been enjoying it. And he's got some like nice, pretty nice team features coming in, which is which is exciting for my team.[00:53:42] RH: This looks this is good. Actually, this looks perfect for what I need. Nice. Nice pick. [00:53:46] A: I think my pick has to be I mean, I said it before, right? I'm really enjoying it. I really like [inaudible] architect. And I really like the fact that it's got built in data. I've started building a small project on it just to see, you know how that actually works. And it's pretty great. It's a pretty great experience. So yeah, that's my pick.[00:54:04] KA: I mean, Brian's a friend, we should try and have him on to chat.[00:54:08] RH: I like products like that where like you know the people who build it. At least a little bit.[00:53:13] KA: Yes, so you can yell at them.[00:54:15] RH: Yeah, but also, so you kind of have a sense of their product philosophy, and whether it's something that you align with.[00:54:24] S: Yeah, it's more relatable, right? Yeah. Thanks for coming on, Rich. Always fun to hear your thoughts. Thank you everyone for listening. And we'll talk to you in a couple of weeks again.[00:54:38] Bye. Bye.[END]
11/12/202054 minutes, 34 seconds
Episode Artwork

Svelte Summit is over, what a bummer!

This week we talk about all the awesome talks that we saw at Svelte Summit. It was a bit long, but wow, was it good! Great Event. And we hope you all come to the next one in the first half of 2021!If you missed it, you can tune-in on the Svelte Society YouTube channel. To get news about the next event, sign up to the newsletter.Show Notes: SVELTE SUMMIT - Check out the talks and the website!Transcription:[00:00:00] KA: Hello, everyone. Welcome to another episode of Svelte Radio. I’m your host, Kevin. And I ran a site called Svelte School and I’m joined by my two co-host, Antony and Shawn.[00:00:11] AJ: I’m Antony, the CTO of Beyonk. I’m a Svelte maintainer. And actually, I can say this now, I’m currently working on Sveltekit, which is quite fun,[00:00:18] SW: Oh, that’s hot. We should talk about that. I’m Shawn. I work at AWS and temporal. I don’t really kind of work on anything, but I do use other GS a lot, so that’s fun.[00:00:30] KA: All right. Last weekend -- it was last weekend, right?[00:00:35] SW: October 18th, I had the date memorized because I was so promoting it so much.[00:00:41] KA: I have no idea. Time is not my --[00:00:45] SW: Ground circle.[00:00:46] AJ: Yeah, I know. Not mine.[00:00:47] KA: All right. What did you guys think? Was it good.?[00:00:50] SW: Yeah. I think we went very well. I wasn’t sure if I was going to stick through the whole event, but it was going to be a long one and it was very late at night and on a weekend. But then, I just found the conversation really entertaining, the talks are cool and I stuck around for the entire thing.[00:01:06] KA: Well, that’s awesome, seven hours.[00:01:08] AJ: Yeah. I mean, I also did stick around for the whole thing.[00:01:12] SW: You cycled like a billion miles.[00:01:15] AJ: Actually, it’s quite a short cycle, because I was trying to moderate the chat from my phone while sitting on the bike, watching the conference. But also, I had like the cycle trainer up and everything else. Yeah, it was interesting, trying to do too many things at one space. I think I did like 20, 25k or something, which is not impressive but it’s worth doing. It was a good feeling as well. What I found was it’s surprisingly easy to concentrate when you’re a cycle trainer watching a conference. I think that I’d like to just go to more events like that, but while cycling because it works really well.[00:01:54] KA: I like working out as well while like watching stuff because it’s nice[00:01:58] AJ: But it’s quite hard, right? I’ve tried running and watching The Simpsons and I can’t do that. It’s just impossible, but this was much easier for some reason.[00:02:06] KA: Cycling is probably a bit easier, kind of in my mind at least feels like it would be easier.[00:02:12] AJ: Yeah. Well, you’re sitting down for one thing, but also, I guess you can vary the cadence quite easily. Like you can just change gear and make it easier or harder if you want to focus on a specific bed. It’s not like you’re having to maintain it constant all the time. Yeah, it works really well, works really well, so I’ll try to do that in the future actually. Then yeah, watching the rest on the TV downstairs, and it was me watching it and enjoying it, and my wife having enforced upon her. That’s, you know, hey.[00:02:41] KA: Which talks did you guys like the most? I think my favorite was like The Web à la Mode one, for sure.[00:02:47] AJ: Oh, yeah.[00:02:47] KA: Like in a creative way, I really like that one. The flying head and --[00:02:52] AJ: Yeah. I think that’s an easy one.[00:02:55] SW: I mean, he actually I think expanded. I personally do a lot of pre-recorded classroom speaking. He’s a first-time speaker and he expanded my idea of what a pre-recorded talking do. It’s like he built that thing, and then played music. Then the rest of the talk was, had that back in music. Now, it’s just genius.[00:03:17] AJ: Yeah. It’s nice to have a pay setter like music wise. I don’t know if you have heard of the comedian, Mitch Hedberg. He’s death now, but he always had this like weird beat going onto like his entire set. It elevates it. It adds like a massive dimension to it, and I’m not really sure why. I can’t remember what the beat is. It’s like — I think it’s somebody playing an instrument called Chuck. When his jokes changed and when his jokes starts to fail, or whatever, which he do a lot because he’s kind of an abstract comedian. He will just say, “Can you just sort of ramp it up a bit, Chuck” and Chuck sort of increase this tempo a bit and change up the way it sounds.” [00:03:56] KA: That’s such a good idea.[00:03:57] AJ: It’s really good. It’s really good that way to do it, actually. So if you’ve got sort of — [inaudible 00:04:00] it’s ridiculous. But if you got somebody who can play an instrument, get him along to your talk, and they can play in the background.[00:04:09] KA: Pro tip.[00:04:09] AJ: Yeah.[00:04:10] SW: Just to mention some of the others. I realized that there’s a lot of curiosity around talks, transitions and animations. I think we have three talks. One, Nicolo Davis on crossfade, and then we had Mark Volkmann on animations and then we had Li Hau on transitions. I thought that was — I always wondered that and it’s kind of wishful for me to actually have talks like things that really explored how they work and what we can do with them.[00:04:40] AJ: Yeah. so another reason that I mentioned his talk is because, it’s really, really difficult to talk on something that’s kind of intricate and complex. It’s very to do talks — not very easy, but it’s easy to do talks on sort of more high-level subject. Building that, building this, building that. But when you try to go into complex detail about an internal of something and do a talk on it, and present, and maybe even life circumstances, which is just next level. But it’s really, really difficult and I think prepping talks, I found that I tend to shy away a bit for more complex subject, because I don’t feel like we’re understanding as good as it should be to get a talk, right? So yeah, I think extra props as people did that kind of talk as well.I think it’s also worth mentioning, Luke’s talk for me, because I think — especially since I kind of had prior knowledge of what Sveltekit was doing. It was really interesting to see how you could deploy an application to Cloudflare Work because that’s — it’s something that’s really pushing the boundaries of serverless and what we’re going kind of thing.[00:05:43] KA: I’ll be that guy. I confess that — I think that talk was above my pay grade. I didn’t really — I have some familiarity with serverkess functions, but I didn’t feel like I got the pitch. So I need to watch it again, because I didn’t really get like what the benefits were. Like is it faster?[00:06:03] AJ: If you’re building an application and you’re responsible for deploying the application. Your kind of primary goal is to get the hosting really scalable, get it resilient, keep the cost down and make it as fast as possible. I think that Cloudflare Work is — and kind of C game work like that will fulfil all of those criteria, because you’re running your application at the edge, like you’re literally as close to the user as possible, really, other than having a machine in that living room that’s serving them. But also, you’ve got that resilience because there’s so many Cloudflare nodes. It’s full serverless because they are basically tied in serverless work. It’s really of interest to people, I guess who are thinking about deploying an application and sort of determining and deciding on what infrastructure they’re going to use. I think it’s I think it’ll go over the head for a lot of people because they might not be in that kind of space where they have to do that. But I think once you start looking at the array of service offering that are on there right now, there’s so many. It’s really hard to pick and choose between them. It goes all the way from kind of sort of the prior art of Heroku where you’re getting a little dedicated virtual machine to serve your application up all the way to Cloudflare Work, which is a very different concept doing a fundamentally the same thing. Yeah, I think that’s the case for a lot of people but I think at some point, you may be, “Uh-huh. I’m going to go and watch that talk now because I need to do this thing.” [00:07:31] KA: I’m a big fan.[00:07:32] SH: Yeah, I know you are. To get it straight, Svelte kit is kind of built with this motto in mind that we want to be able to render from within a worker. It seems like that’s the case, because I also see this happening in VX Land, the new meta-frame that’s coming out this week REMIX from Michael Jackson [inaudible 00:07:49]. They’re also adopting this model, and it seems like the new trend is coming out. It also links in my head to Glen Maddern, he’s the guy who came up with CSS Modules. He’s been promoting this idea for a while, of fabs, frontend application bundles, kind of containers for your frontend that you can ship to [inaudible 00:08:06] workers. He was on this idea like two years ago, everyone just ignored him because it’s just so weird.[00:08:13] AJ: That’s the downside to being the first dork kind of thing. Yeah, just on this point, yeah, Sveltekit is designed to be kind of serverless first because it does seem like the most logical way to deploy an application, and it can be done pretty smoothly while giving you a good death experience locally if done with that in mind. A lot of serverless right now doesn’t really factor that in and it’s quite hard to develop locally, because you try to run this impossible architecture in your local machine.The Fab thing was mentioned to me recently, and I sort of got excited about until Rich’s stuff. Rich had already been contacted by them a few months prior. And yeah, the concept of adapters and Fab house a lot have overlapped. But what was sort thinking is we might build a Fab adapter so that you’ve got these first-class citizen deployment mechanisms for sort of the biggest and for me the easiest deployment platforms. Then for everything else, you’ve kind of got Fab because by writing one single adapter for Fab, you’re opening a lot of doors. I think Fab is an excellent idea. It’s absolutely brilliant and I wished I’ve found it myself a lot earlier in fact, because I think it’s just going to save, especially when you haven’t got the resource to build something in the platform agnostic way, you’ve got this adapter that will allow you to basically build for anything at all, which is great. So yeah, so Fab is pretty exciting actually.[00:09:32] SW: My take on it is that we have too many config clouds in the world, and if we just all agreed on one config cloud, then the world would be a better place. The 15th config file, when they’re already 14 around, because I was trying to do that. But I think because every serverless provider I guess has their own config file, so this would be sort of platform agnostic one.[00:09:55] AJ: Yeah. I mean, I think it’s worth mentioning at this point. I’ve looked at all these providers obviously, part of building the kit and stuff. But also, I’ve look at these providers for a while to determine where I’m going to deploy my stuff to. I think that my favorite so far has been the open GS architect that uses. It’s just really clean. It makes a lot of sense. It’s not any known format in terms of like, it’s not like million passes. But they do have a library, you can pass it with code architect, I think.I just found the format really clean and logical, and if there’s any one standard for config files, which I really don’t think will happen. I would love it to be architect because it’s just great.[00:10:34] SW: I’ll provide the counter argument, which is that if you’re truly platform agnostic, that’s great. You could take a code anywhere, but then you’re also not taking advantage of the platform by definition, right? Anything in that platform can build. You can’t take advantage of it, because it’s going to be unique for that particular platform. For example, offers begin data and you can’t use that anywhere else, so goodluck.[00:10:57] AJ: It’s very true. Howeve, what I would say, it’s almost a store argument actually, because the Begin data interface is extremely simple, right? It gets us that and that does it. I think that — let’s not kid ourselves, Begin data is just them. What’s that Amazon database called, the key value one? Dynamite DB. It’s just Dynamite DB. I think anybody who was this sort of this IT architect format, they could either not have a data element to it and just say, “We don’t have a data element.” Or they can implement a key value against that over anything at all. I think it’s quite abstract enough that you could implement to yourself on anything you wanted to, if I could say. So yeah, I mean, I totally get your argument, Shawn, but I think that obstruction makes things a little bit harder for the implement, but I think it’s definitely possible.[00:11:44] SW: Shall we go back to a frontend?[00:11:47] KA: Oh, yeah. Yes, yes, we will. Let’s talk about Plenti. Did you guys tried this before the talk?[00:11:56] SW: I have not. I checked out the site and — I mean, it’s a cool site but I haven’t tried it yet.[00:12:02] AJ: Yeah, it’s on my to-do list, but then so I have many, many things. It sounds like a great idea. It’s sort of less developer-centric, which is really nice. It’s something I hope to do soon, but I haven’t had any chance to look at it at any depth yet.[00:12:17] SW: I feel bad. I’m going to go try it out because it’s a site builder. They’re betting their business on Svelte, just like [inaudible 00:12:24] bases and we got to try all these things. Otherwise, how are they going to succeed and how Svelte is going to grow with nothing.[00:12:32] KA: I did actually try it like I think maybe a month or two ago. Just download the like starter, their example. It seemed like a nice thing, but I didn’t try anything like more complex on that. But from the presentation, it looked like really nice, very simple, very easy to get going. There are a lot of static site generator in this conference. Well, two.[00:13:03] SW: I mean, then there’s Elder.js, I think — yeah.[00:13:05] AJ: But yeah, I guess that’s what I’m saying. It’s not developer-centric because it feels like Plenti is designed a bit more for maybe a business-minded person who doesn’t have the technical skills to really — because it’s pretty complicated for non-developers. The thing that’s really needed is — either, if they’ve done it a million times over the years, somewhere somewhat we got it right. Building websites, its not going to ever producer the kind of website that you might get build by a dev team, but it’s certainly can build something that’s fast, and light, and appealing and responsive, and flexible enough that you can build at least an MVP or yeah, maybe even run your entire business on it, depending how small you are. So yeah, it’d be good to see something in that space, so hopefully Plenti is that.[00:13:50] KA: I think Plenti is like — so Elder.js is a bit daunting to get started with compared to that, Plenti seems extremely easy comparatively, right?[00:14:06] SW: Yeah, of course I met Elder. Like if I didn’t have Nick Reese on top for support, then I would not have gotten anywhere from --[00:14:16] KA: Yeah. But I think — speaking of Nick, his talk was really nice. I think it showcased like the strength of Elder.js pretty well.[00:14:26] AJ: It did and it showed me kind of — because I knew of it and I knew roughly about it, so I didn’t know much about it in depth, then I was looking forward to the talk because I wanted to actually see it, building sort of simple app in it. It is exactly what I thought it would be, which is, it is specifically designed for SEO. It’s not something you use to build your application website, your underline shop or something. Really, it’s something you build to build an online estate of highly indexable content for marketing, which is — it fits perfectly, but a very different offering to say, Plenti anyways. [00:15:02] SW: I haven’t told Nick this. I’ll just think out loud because that’s my [inaudible 00:15:09] here. Building a statis site generator for SEO, that’s a weird bending thing to me, because SEO to me sounds like, make it fast, make it statically rendered, put all the right metatags and then write great content. That has nothing inherently to do with the static site generator. That’s where I really struggle with this idea. For him also, he really cares about massive scale, so even his demos are — which is always a lot of pages and you can really see that it’s build for size. To me, the build for size and the island’s architecture like the whole Zero.js by default thing, that appeals more to me than built for SEO. Because SEO to me sounds like just set some of the tags.[00:15:53] AJ: Yeah.[00:15:55] KA: Yeah, I think I agree there. I guess for my take away was that, what he’s doing is actually generating a lot of content this indexable without having to write all that content manually. So taking a set of data and giving different views of that data, and then positioning those views at that data, and that search engine can quite easily interpret and use, and Google is going to sort of pull out the questions. Some ways, it has more easy from that content, and it’s going to have more relevance because you’re taking — it’s like when you — that when you’re applying for jobs and you have a bunch of CVs, resumes and you tailor those resumes for each job. So in this resume, I’m a strong JavaScript developer. In this resume, I’m a strong node developer kind of thing.I think that for me where I see Elder.js fitting.[00:16:43] SW: I also want to shoutout one thing on which I changed my mind, which I think that’s a very useful thing for other people to think about. I used to be very excited about this idea of MDX, like you write Markdown and then you write some Svelte inside of it or you write some React inside of it, and it becomes a React or a Svelte component. I think I’ve changed my mind on that. Now, I don’t use MDX anymore. And Elder.js has this idea of short codes, and I think that’s actually more future proof and I think that’s what Nick Reese is also causing. I really believe in that now I think, because it separates the idea of like, “I can have that content with the short code, but I can choose to reimplement the short code in whatever other future framework that I wish to have.” The only thing that I have a dependency on is the format of like, what’s the opening and closing time of the short code and all the meta-data that it provides there. I don’t need all the other stuff, because I’m going to probably going to take it out anyway into some kind of layout component, or some kind of reusable replacement for like H1 A tag, but whatever.I think I changed my mind on that specific thing, so I just figured I shared it. I don’t know. Obviously Penguin will not be too happy to hear that, because I was a big supporter. I was like, “Oh yeah, MDX is like the future.” Then I was like, “Hmm, maybe not.” [00:18:02] KA: Short code is a thing from like the WordPress era, right? Probably earlier than that even, but it’s one of those like I completely forgotten about short codes after I started using Svelte. But then, once you’ve realized how powerful they actually are for static content like this or like generating content from other content and putting it into a short code like counting stuff and all sorts of things. It kind of becomes a must have I think when you start using them. [00:18:41] SW: I think one thing that I wish people were more thoughtful about is how graceful degradation looks like. For example, if I was blogging in MD Specs, right? Then I’ll have a whole bunch of like different Svelte component in my Markdown. But if I was going to render that to RSS, what does that mean? I don’t know. It doesn’t — it’s going to come up like a jumble of stuff. But then when people implement short codes, they’ll do things like, “Okay, I want to embed a YouTube video inside my content, right?” So I’ll say, short code, open tag, YouTube and then the ID, but that also doesn’t degrade very gracefully.What I actually want to do is paste the YouTube URL, so if someone comes to mine without that MDX — the short code passing, we can still just click the URL.[00:19:27] KA: Yeah. That makes sense. It could probably write an Elder.js plug in for that.[00:19:31] SW: My problem with this is not Elder.js. It’s actual Dev2. I used that too as my CMS and then I syndicate it to Elder.js.[00:19:39] KA: Oh, okay.[00:19:38] SW: By the way, that’s an SEO hack because Dev2 forwards all the conical traffic to your domain. So it’s — I don’t know how long it’s going to last. It’s a very, very quickly to rank very highly on Google.[00:19:52] KA: I’m going to edit this out, keep it for myself.[00:19:56] AJ: Yeah.[00:19:58] KA: No, I’m just joking. Should we move on to some of the other talks that we saw? We talked shortly about MD Specs just now or Shawn did mention it. We might as well talk about Peter’s talk, the REPLicant. That was mind-blowing to me. I had no idea how REPL work behind the scenes and how you bundle stuff in the browser. That’s crazy.[00:20:22] SW: The fact that people like this just casually do things like this for talks is mind-blowing.[00:20:27] AJ: Yeah.[00:20:28] KA: Way above my pay grade for sure.[00:20:31] AJ: I think mine too.[00:20:33] KA: It was great, though. It was nice in a way because it introduced like so many topics in a kind beginner friendly way in a sense, like you use TypeScript in Svelte for example. That’s not something you often see. You wrote a rollup plug-in, like all these things to me are not something I know a lot about, like writing rollup plug-ins or bundling or all of that.[00:20:55] AJ: Yeah. I mean, it was well-explained. It was obviously a whole thing, this life code effectively. It’s quite a fit. It’s one of those things again that goes back to, you can do a sort of high-level talk or you can go in depth from something and that’s just massively, massively more challenging I think. Especially then to life coding as well, so yeah.[00:21:17] SW: I think for listeners, I’ll kind of stress the business value of doing something like this. The whole point is to decrease the barrier to trying something out. If I had to download anything, you’ve probably lost like 90% of the people who visit your site, who care about you. If I can hit your site and then see something live immediately and just play with it, then you’ll have a higher chance of people getting it, and then actually trying you up on their local machine.One example that recently happened was Tailwind. They’ve always had some sort of — on their landing page, some animation of what the concept, but they also recently released a Tailwind playground. That’s also another process of like — we have to have some kind of compiling browser type of situation. But it lets you try it out and it also lets you share it. As much as the Svelte REPL is so useful within this small community, I generally feel like Svelte would not be as big today if Svelte REPL did not exist.It’s a similar thing to basically everything in developer tool gate. Like if you are trying to come up with a new format, like a Fab or like show me how to validate and verify my config file. Or like, I’m doing consulting for that I owe and we want to show like a different program and model. Right now, people have to pull a docker container and run it just to see what it’s like — what if they could just run it in the browser. I think this technology is like a really good foundation for demonstrating anything.I’m on Penguin’s read me, which like — he actually cares about docs, which is amazing and he’s got like the ruby playground, the go playground, the Go playground, Rust playgroud. Like everyone prioritizes this for a good reason.[00:22:56] KA: Yeah, I think, speaking of like the Svelte REPL, we should probably try to make that indexable somehow.[00:23:03] SW: One thing I want to do is like Svelte Society or something like that, with like a good name and description, and then people could heart it. Then we could start by like most favorited REPL or just like, you want an example of the model, here’s like 10 different models on REPL. I would love to do that.[00:23:20] KA: Somehow.[00:23:21] AJ: Yeah. I mean, so Svelte REPL, you can save and you can save endlessly and paginate the results, but that’s about it. It really lacks functionality to delete, to rename, to reindex, to share. On sharing links, it’s not as very as straight forward as it could be. It’d be really cool to build the kind of top list of those really good features. So if anyone is out there listening and find this as task or project, there you go.[00:23:46] SW: I’m keen on that, like I want to pick it up as part of my AWS portfolio as well.[00:23:51] AJ: It’s a race, Shawn. It’s a race. You’re going to race with Svelte community.[00:23:57] KA: Some other talks, we had a talk on data visualization, saving democracy with Svelte. That was not the title. [00:24:05] SW: I think that was my tweet about it. I just kind of like, “What the hype, man?” on Twitter.[00:24:12] KA: That was a good talk. It’s always nice seeing data viz in Svelte.[00:24:16] AJ: And then also giving to the two recent IPOs for data exploration company. That’s super interesting, isn’t it, because it’s kind of a hot topic right now. Well, the Snowflake is one. You know Snowflake.[00:24:27] KA: No.[00:24:28] AJ: Well, Snowflake recently did a big IPO and then Palantir went straight afterwards as well.[00:24:32] KA: Palantir, I know. Isn’t that known as one of those —[00:24:35] SW: They do a lot of defense. It’s slightly controversial. I honestly don’t believe that I have — [inaudible 00:24:42] it’d be nice to form a judgment, so I’ll try not to judge. [00:24:45] AJ: But yeah. So it’s interesting because that data visualization piece was specifically interesting. Just because that’s a real world use case as Svelte, pushing the bar a bit because data viz is quite difficult to get everything in a browser in a formal way is tough. The moment when you start adding loads of nodes and loads of data points, everything starts to slow down. I think therefore, you can really showcase the advantage that a compiled framework and also something that’ lightweight and well thought out as Svelte can provide to data visualization. I think that’s the perfect use case in fact,[00:25:20] KA: I think there may be enough here. I see a lot of adoption among data viz people. Like we had Amelia Wattenberger on this podcast. Actually, during the conference, Moritz Stefaner, I enjoy his podcast, Data Stories. He’s a well-know data viz guy. Obviously, I think they use Svelte a lot for data viz at New York Times. I think there’s like French — named Echo. There’s also a data viz shop using Svelte. I think there’s enough here for like a dedicated even for Svelte data viz people. So I really focus shedding a light on this shared tools.Pancake is another another one that didn’t get showing like this summit, but it seems like it’s picking up stream in data viz.[00:26:03] AJ: Pancake is the one I’m thinking right — one answer where ot basically renders SVG first. So it’s actually a service side to graphing framework, which is quite rare. I think that’s quite a special feature that should be noted.[00:26:16] KA: Data viz comp, that would be neat.[00:26:20] AJ: Well, when Svelte Society is big enough, we can have multiple tracks, right? We can have data viz track and have the sort of deployment track.[00:26:28] KA: We actually talked about that yesterday in the retro about having me potentially multiple tracks. I don’t think we actually decided on anything, but —[00:26:38] SW: Yeah. I don’t think we committed to that right now, but it’s possible on the future. I think we’re very inspired by next GS Conf which is also happening yesterday. They had four tracks. I’m a bit conflicted about it, because it’s this whole. I’m very familiar with this dilemma for conference organizers. Because if you have a single-track conference, then you have a shared experience, and everyone can chat with everyone else. Whereas if you have a multitrack conference, you had more choice, but then you also give people more choice stress and you have a shared experience, where if you went to a particular conference, you don’t necessarily know that anyone else share the same experience as you did.[00:27:15] AJ: But also, sort of on the contrary of that. I’d say that if you’ve got linear conference in there, a talk in the middle that you’re not interested in, then you’re going to sort of break up your day a bit. Whereas if you’re a data viz person, then you can kind of focus on the data viz track. Yeah, I think it has advantage and disadvantages. I also believe as Shawn mentioned that the non-fragmented experiences is a richer experience and a better experience. I would say right now, especially that, that certainly tops any reasons for having multiple tracks. [00:27:45] SW: I went to a conference in London where we had two tracks. There was not particular theme, it was like track A, track B. There was one talk on like, React’s Hooks. The other talk was testing in React. The entire audience just like left the testing track and just went to React’s Hooks. It was just so sad. I sat in the testing talk just out of sympathy, but I was just feeling so bad. [00:28:11] AJ: This also happened --[00:28:13] KA: That’s horrible.[00:28:14] AJ: It happened at the Bitcoin Conference where — well, blockchain, cryptocurrency conference I went to. Loads of different tracks and different tokens and stuff. Of course, the main stage got taken by Roger Ver, sharing his Bitcoin Cash that no one cared about. I’ve never seen a large room so intent in my life, because it was just about him.[00:28:33] KA: Oh, it was empty?[00:28:35] AJ: It was empty, because it was Bitcoin Cash and no one cares about Bitcoin Cash.[00:28:37] KA: Wow, that’s so funny.[00:28:41] SW: Is he the Bitcoin Jesus? Okay, we don’t have to turn this --[00:28:45] AJ: I mean, his Bitcoin Cash — he locked onto a boat loads of them, multimillionaire but no one else cares about that code, that token.[00:28:57] KA: It is crypto space, man.[00:28:58] AJ: Yeah, this madness is picking up again.[00:29:00] SW: It’s cool again.[00:29:07] KA: I’ve been talking about this. We should do a Svelte coin.[00:29:11] SW: Yeah.[00:29:11] KA: Probably not. No.[00:29:14] SW: We can bind in the browser with our REPLs.[00:29:16] AJ: Yeah.[00:29:18] KA: Svelte is so fast, he wouldn’t even notice.[00:29:20] AJ: Yeah, right.[00:29:24] SW: Quick shoutout to Annie stock. The thing I was very — I think in speaking, you always have like Service X for first animal Y. Like [inaudible 00:29:36] always has, like, Twitter for dogs or Twitter pets, something like that. It’s just like a nice, fun thing, so Netflix for cats is always a good theme. But like the extent to which she committed to this theme was really impressive. Because she has basically cat versions of every single popular movie. Like Meow-vatar, Game of Paws, Eat, Purr, Leap. Yes, which is great.[00:30:03] KA: And the talk was nice as well, like the intro was also with the flying like StarWars like cats and I don’t know. Pretty neat.[00:30:13] SW: Yeah. Conferences are mixed of entertainment and education, and maybe sometimes we skew too much towards like education or just like — I don’t want to stare at code screen all the time.[00:30:27] KA: I agree. More creativity is nice. It’s like the talk from Svelte Society today, like back in spring, the creative coding session was awesome.[00:30:41] AJ: It’s super nice to get — to convey a complex messages well with something like cats. I think that’s quite a skill. It keeps it more digestible.[00:30:50] KA: There are couple of other talks as well, like the, so you want to pick a router? That was great on like pretty much the fundamentals of routers, and his router as well. We also had on modern fetch in Svelte using stores. Also a great like example of a custom store, I think[00:31:10] AJ: And it’s something that I think a lot of people talk about as well is, how can I basically build data fetching into my store. That’s to cover off a few questions.[00:31:22] KA: Very good example. So there’s actually one talk on this Svelte Summit website that wasn’t in the conference. I don’t know if you guys noticed, but Learn Svelte Using React. That talk was —[00:31:35] SW: You’ll release it today/[00:31:36] KA: Yes, I’m going to release it today. Unfortunately, I didn’t — there was some issue with getting the file to me. So he had uploaded it on some service that didn’t allow it to be downloaded, so I didn’t have time to sort that out, unfortunately. So we’re going to release that as a bonus episode. A few more talks, we have Unlocking the Power of Svelte Actions. Yeah. This is the one.[00:32:04] AJ: A favorite then?[00:32:05] SW: Definitely like that one.[00:32:05] KA: Yeah.[00:32:06] SW: I think he actually have really good ideas for action that I’ve never thought about. People like use CSS.[00:32:13] KA: Yeah. I think also, also like the fact that you can use the life cycle hooks inside of the actions is not something I considered like after update for example or it was after update, right? I don’t know remember. But yeah, great talk and good ideas for actions as well. Then the last talk we have Introduction to Svite as well and the Svelte Animations.[00:32:40] SW: I think he felt a little bit blindsided by the Sveltekit. Maybe that could have been communicated a little bit better. I mean, I’ve enjoyed Svelte and Svite.[00:32:51] AJ: Yeah, absolutely. I think we’ve also — they’ve all sort of this other frameworks of hats of very valuable ideas that we’re considering heavily when building Sveltekit. We’ve now got all these people that are involved to some extent, so hopefully it’s more palatable to them that we’ve kind of taken a bit of their crown away. But now I think they’re all happy to help up, because obviously, it’s flustering that the best possible experience for Svelte user. So yeah, it’s all working well. I appreciate that it feels like blindsiding. The problem of course is that you can’t really pre-announce something before it exists. Rich did go away and build Sveltekit, what you sort of saw in that demo in a ridiculous equipped time as his kind of his ammo. But I mean it sort of head of nowhere.For us too, based on kind of descriptions we’ve been having and mulling over for a long time recently appeared, which is great. It’s very hard to announce when you also don’t know about it yourself. But yeah, absolutely but it should hopefully sort of bring some of these ideas together as well to make something really cool and nice. I’m looking forward to it as well.[00:34:00] KA: Yeah, same here. We had a couple of beginner talks as well, like the The Zen of Svelte. That was nice. Like the intro talk by Morgan.[00:34:11] SW : It was very set, and I think he did his research. He put in some previous talks from Rich, the coffee cup was based. I’m not sure what he learned from it. [00:34:21] KA: The production value was not, like it looked so good with like the moving TV background and a [00:34:28] SW: It’s probably like a DSLR or something[00:34:30] KA: Yeah. Then we had also Prototyping Testing Real Data. That was Daniel. He’s the guy who’s doing the newsletter as well.[00:34:40] SW: That’s right. I’m pretty keen on like making the newsletter more of a thing so that we as a community don’t only stay on discord and Twitter. I think there’s probably a lot more people to reach beyond just discord and Twitter.[00:34:53] KA: All right. So the last talk of the conference was Rich’s Futuristic Web Development. That was new to everyone pretty much.[00:35:02] SW: Just to set the context for people who may not know the back story. When we organized this conference, like we put out a bunch of CFPs and we’re always like — obviously, Rich is always on the table, and just like, “Hey, if you’re free. We know you’re busy and there’s an election going on. There’s more important things in the world than a GS Framework Conference. But if you ever want to submit something.” I think he like never responded on that, unlike a week before.[00:35:30] KA: No, it was less than that. I think it was just like two or three days or something. No, more. Yeah, maybe it was a week. It was very like short notice for sure, but we managed to get at it. So that was nice.[00:35:45] AJ: Well, it’s funny because I guess around that time, he said, “I’m going on a holiday.” So he went on holiday, then when he came back Svelte was written. So I’m not sure what kind of holiday it was.[00:35:54] KA: I think we can probably ask him about it on our next episode that’s going on.[00:35:59] SW: Oh, yeah. Teaser. We actually booked it for next week.[00:36:01] KA: Yeah, we could touch on this I guess, like what is Sveltekit? Can you give us an overview, Antony?[00:36:10] AJ: I can. Sveltekit as it currently stand, and again, we’ve not really said much about it. It is still kind of closed off to that sort of public view. The reason being that it’s very hard to work on something when you’ve got a lot of people weighing in at the same. Right now, we have a bunch of maintainers and it’s really difficult to say to have everything everyone else involved as well would be extremely difficult and it probably wouldn’t move.I think what we’ve don’t is we tried to close off, build something, build a kind of baseline and then produce that baseline. What that baseline currently looks like is essentially a serverless framework. It will handle — we’re very modular, so everything is bunch of modules clipped together. The idea of being kind of pulled in and pulled out where you want. It will essentially do we hope as much as possible, it will be like for Sapper right now. So making the migration path from Sapper to Sveltekit very simple. It’s has various obstructions over deployment, so solving that problem, I’ve built this application, where do I put it, how do I post it. More that kind of is almost built in as a first-class citizen by our adapters, which people know a little bit about, that will take the compiled output of the Svelte app project, the Sveltekit project and turn that into a specific layout manifest, and that it can be deployed to a variety of providers. That’s the current status quo and it can handle completely static vended things, it can handle dynamic pages. I believe what we’ve got to know is a point where you can actually have an application composed of both those types of things. Yeah, I guess the reason you’ve not heard too much about it and there’s not been like a roadmap publicly or anything is, because that brings along with it a level of commitment. And given the schedules, the ever-changing schedules of the maintainers and the people working on this — they are not maintainers right now. What that means is, we end up with over committing and publishing a schedule that probably won’t come to fruit in the way it will, and potentially promising things that never materialized or when they appeared very different. It’s intentionally kind of a vague idea with a little preview right now of what it looks like.By all means, run the node modules, play around with it, do what you can. But right now, the best thing to do is just accept that that’s how it is, and when we get to making it public. It will be a very exciting time because everyone kind of investigate how it works. We expect a huge influx of modules based on people have been saying, so that’s pretty exciting. I just hope that day comes sooner rather than later.[00:38:49] KA: Let’s hope it comes soon, yeah. So if you try this out, don’t like post about bugs on GitHub about it, probably, right?[00:38:58] AJ: Yeah. The likelihood is the bug is known by us. The likelihood is the bug by the time you write that GitHub issue, it would have completely change any way, so the bug will not be relevant. That’s kind of the — [00:39:08] SW: Then new bug.[ 00:39:09] AJ: Well, yeah, there’d be plenty of bugs. For every bug we can create two bugs, right? But yeah, it’s a rapidly changing landscape with no particular kind of — I wouldn’t say it’s directionless but it’s obviously, there’s a lot of different directions and experiments going on. There will be bugs. There are definitely dragons, which is a famous Rich’s phrase I believe.[00:39:30] SW: Actually, mentioned at Pop a couple, because I work in like public communications, so I know that this is the point where we talk about frequently asked questions. The first thing is the fear, uncertainty and doubt from essentially deprecating Sapper and not having a replacement. It’s important to understand that the maintainers is Sveltekit and Sapper are the same people. They have large production apps like Antony, and they are very keen on smooth migration path. Rich is also very aware that like living Sapper and then go like this is for a long time isn’t a good thing for Svelte. He wants it in weeks rather than months. That’s the first FAQ.The second FAQ is also why not Svite and why SnowPack. I think the main answer is, Svite is to tied into the view ecosystem and SnowPack is more agnostic. Those are two FAQs that I saw on Twitter. [00:40:25] AJ: Yeah, it’s an interesting question because obviously Svite works and it’s really good. The fact is that if we start depending on external things, then we can’t make the decisions that we want to make in the most optimal way because we’re always at the behalf of some other person, who may be have different interest than we do. So yeah, not a slight on Svite or whatever it’s called I think is brilliant but it has some beta decisions that you can’t change and we need to have the flexibility change in decisions. SnowPack is excellent. It’s one of those things —[00:40:56] KA: It definitely makes sense.[00:40:58] AJ: Yeah, and SnowPack is heading at the exact direction we want to be in, so yeah. But again, like SnowPack is not set in stone, it’s looking very probably right now, but it’s not set in stone. Everything is still very much influx.[00:41:09] SW: This is our second event, conference, whatever you call it online. The first time around, the Svelte Society Day in April. I think something that we did last time that we didn’t do this time was this live REPL offs. Because there’s more live, we could actually interact with Kev as he was struggling to keep his internet up. [00:41:16] AJ: Sweating profusely.[00:41:38] SW: We had some fun countdown timer challenges. And then this time around, I try to get it started again, but it actually picked a challenged that was too hard. But I think it’s something that — it’s a tradition unique to us that we’ll probably try to keep up next time.[00:41:51] KA: I think I’m pretty much decided on doing this like in a more live version next time. So going back to Svelte Society Day style but using something like StreamYard that doesn’t really rely on my connection, so we can avoid the technical issues. Even if we do get some technical issues, I think that’s fine. I think it’s wort to trade off.[00:42:18] AJ: People are very undertstanding.[00:42:19] KA: Yeah, and it’s worth to trade off of getting like these live, fun, kind of sort of games going between the talks. I think that the route we’ll be taking. Speaking of doing that, there will be another Svelte Summit in Spring.[00:42:33] SW: Oh, we’re saying Spring now. Okay. I didn’t know.[00:42:38] KA: I guess I just decided it as well.[00:42:40] SW: I mean, I also posted the Mount Fuji thing.[00:42:44] KA: Oh yeah, you did with hush emoji, like the shush — like the keep quite --[00:42:49] SW: The hush. Nobody saw it. But no, I think we enjoyed it. I think it’s a good thing for this whole community. It got a lot of attention for people who don’t currently use Svelte. I think this is something that we’re doing a good job for and we want to keep up the momentum.[00:43:07] KA: Yeah, it was super fun, and next time, it will be even more fun because I don’t have to do like the manual emailing and stuff, so it will be great.[00:43:17] SW: Some other things more, we want more woman speakers. We only had Annie this time. I think we’re going to make more of an effort to invite more women, and just make it clear that they’re explicitly welcome and to showcase their talents. I tried to contact some others, but I think I did it too last minute, so we didn’t manage to do it this time. But it’s a priority for us. The event was kind of long, it’s like seven hours, and definitely, people were kind of tired by the end. So we all just went to sleep instead of having like an after-party. Probably we’re going to make it shorter. That means a bit more selection pressure than it was this time around.I think there should be more room for non — like it shouldn’t be just twice a year our conference. It should be like small meet-ups elsewhere as well. We can host everything on YouTube channel and spread the knowledge. I’m very keen on like what can we do outside of the conference.[00:44:12] KA: I don’t know many other frameworks that have kind of a specific YouTube channel for their stuff in the same way that Svelte Society does. I think that’s probably something we can leverage in a good way.[00:44:28] SW: Yeah. YouTube is the second biggest search engine, so we should dominate SEO –[00:44:31] AJ: Oh, absolutely. Yeah.[inaudble 00:44:34] KA: Are we going to start doing some black hat CEO now on like keywords stuffing and all of that. I know nothing about that.[00:44:43] SW: Learn CSS 101 and it just Svelte without telling you.[00:44:47] KA: Yeah. Well, that’s awesome. All right. Let’s move on to picks.[00:44:55] AJ: Picks.[00:44:55] KA: Antony was very excited. He —[00:44:58] AJ: I’m very excited. My pick bizarrely is the British plug, right, it’s the UK plug. And the reason that is the pick is because it was — I was recently reminded. I knew about this anyway, but I was reminded that this is the best plug design in the world. The reason being is because of all the safety features it has. For instance, the longer earth pin that opens the slots for the live and neutral. So when you’re putting the plug in, because it looks kind of junky and too oversized and stuff. When you’re putting in, there’s no change of you touching that life pin because the gates aren’t open, there’s no connection. Until it’s far enough end that your finger wouldn’t get there. That’s pretty cool. It’s big and chunky like this. They’re usually this size. I know that Apple tend to refuse them. But so that you can get a good grip on it and pull it out, and that’s fantastic.Obviously, the old [inaudible 00:45:47]. There’s like a million things [inaudible 00:45:53] built in this plug, and the net result was it’s not particularly pretty but it really works well. I think the other thing is, you can buy these kit free adapters to put into your plug sockets and you can buy [inaudible 00:46:05] here and stuff like that. People put them in there and they block the holes on the socket. But there’s actually an empty pattern in that, right? Because the sockets have this health and safety built in. The gates are closed, you can’t run anything in the holes unless you open the earth first, then run something in the whole. That’s not going to happen. A kid is not going to do that by accident. Those little adapters, plug sockets are actually anti-patent because there’s a potential to actually try and remove them, break them off, leaving the gates for the live and neutral open. They’re actually worse and less safe than not having anything in the sockets, which just blows my mind, why is that and why is that I think.They’re all fuse as well. They all have a fuse in them. [inaudible 00:46:46] there’s a fuse in there and it’s left there. It’s a great design. I think it’s just — it’s like a 10-bit but it’s worth noting that this is a genuinely good plug design, we’re not just — we don’t just love being ugly. Things sticking out the walls. But yeah, that’s my pick. [00:47:04] KA: Nice. That’s a strange pick.[inaudible 00:47:07] SW: I know. I love that you’re passionate about this. [inaudible 00:47:09] AJ: Yes.[inaudible 00:47:12] KA: It’s good appreciate the design of everyday things, the classic book. I think it’s picking up again with 99% Invisible, the podcast that also focuses on the design of everyday things. I think they just put on a book, so much so that my dad heard about it. I was like, “Wow. You heard about it, that must mean it hit the mainstream.” The only follow-up question I have is, you know the American plugs, usually there are two pins, but there’s a three-pin version. Does it do the same thing? Because it kind of has the long line.[inaudible 00:47:38] AJ: Yeah, I don’t know. I don’t think it does. You’ll see that you haven’t got this — you see this, like I’ve got this plastic bit on the pins here. So that even if I got it halfway and I stick my finger there, I can’t touch the actual pin. I see yours doesn’t have that.[inaudible 00:47:52] KA: It doesn’t, no. None of that have that.[inaudible 00:47:55] AJ: But also, without the earth, the US plug tend to wobble out the world, isn’t it? I remember seeing that in America when I was there.[inaudible 00:48:04] KA: Plug are hard. I’m not defending it, I’m just — I’m curious.[inaudible 00:48:08] AJ: No, no. When I was mentioning — well, we were taking about this the other day with some friends actually. That’s what we do, okay. That’s just who we are essentially. He’s in Australia and they also have a similar plug design to us now, a bit more recently obviously, but it’s actually based on an early design of the US plug from 1972, I think. But all it is is exactly US plug, but the pins are twisted slight diagonal, right, so that it doesn’t fall out the wall as easily and it has an earth pin. I believe and I can’t verify this, because he wasn’t entirely sure, but I think it also has the gate system so that the earth pin opens the two other gates. But yeah, so the Aussies are up there with it, but come on, this is the best one. This is why it’s in Hong Kong as well, right?[inaudible 00:48:58] KA: I’d argue it’s the European one is better, but yeah, that’s just me. Anyway, my pick is almond butter. Have you guys had almond butter? It’s the best nut butter you can get. Love it. Recently, I’ve been like doing --[00:49:15] SW: How many nut butters are there?[00:49:16] KA: One for each nut. So peanut butter --[00:49:21] SW: That did not come where you intended it.[inaudible 00:49:22] KA: No, no, sorry. Peanut butter, almond butter, pistachio butter, peacan butter, macadamia butter.[inaudible 00:49:32] SW: Have you scientifically trialed all of this in a blind test?[inaudible 00:49:34] KA: I have not, not. But I love them, like I’ve recently been eating a lot of smoothies and nut butters go very well with smoothies.[inaudible 00:49:46] AJ: They are good in smoothies. That’s a good pick. So interesting, because my wife is now doing sort of dairy-free stuff and using these butters and these milks as alternatives. I would love to share in that with her and support her, but this — especially almond butter, I think it is and soy milk or soy yogurt, it has a very bad effect to my stomach. So I have to stick with dairy. It’s a good job I’m not intolerant, because a lot of those butters are not good with me at all. But yeah, they’re quite delicious actually, especially almond ones.[00:50:18] KA: Cashew butter is another nice one.[00:50:21] SW: I feel like I’ve been not adventurous enough with my butter. [00:50:24] KA: You haven’t tried these things. You should definitely —[00:50:27] SW: I’m still at the margarine, butter boundary. I’m not on the advanced stages of specialized butter.[00:50:33] AJ: Have you had peanut butter?[00:50:35] SW: Yeah, yeah, but I don’t like it. It’s too sweet, to sticky.[00:50:38] KA: Really?[00:50:39] SW: Yeah. You know there’s a special phobia for peanut butter, because it sticks into the back of your mouth.[00:50:44] AJ: It is cloggy. It is cloggy.[00:50:46] KA: It does get stuck in your mouth, right?[00:50:49] AJ: The whole earth one is great, because the whole earth was just — there is no like palm oil or anything in it. It’s just ground up peanuts. That one is not sweet, it’s not salty because they didn’t put any salt in there or anything.[00:50:59] KA: Yeah. If you do a get a nut butter, you should definitely get one that’s just 100% of the particular nut.[00:51:07] SW: Okay. This is the peanut butter podcast. Arachibutyrophobia, that’s the fear of peanut butter sticking to the roof of your mouth.[00:51:16] AF: Interesting name?[00:51:17] SW: It’s a common thing. It’s —[00:51:21] KA: I can see that.[00:51:22] SW: There’s two phobias that I’ve memorized. That one and the hippopotomonstrosesquippedaliophobia, which is the fear of long words.[00:51:30] AJ: Yeah,[00:51:30] KA: Ironic. So Shawn, what’s your pick?[00:51:36] SW: Okay. My pick is the opposite. So after you had your almond butter, then you should workout more. So my pick is working out. I did a poll on Twitter. How often are you working out right now? Forty-three percent out of 3,000 votes said they’re not working out at all. Obviously, there’s a lot of stress going on with life, with working at home, but at some point, it becomes an excuse, and we still have to care of ourselves no matter what the situation. And I definitely was not doing that, I’m not judging other people because I was also not working out, but I started working out again [inaudible 00:52:08]. I’m feeling better and I just want to encourage and remind people that they can do it. Go from zero to one time a week. About 27% of people work out three to five times a week, and that’s probably the right amount, so just keep doing that.[00:52:21] KA: Awesome.[00:52:22] AJ: Yeah, I think that’s a good one. Because I actually work out more during lockdown and it’s occurred to me how little I worked out before lockdown. So yeah, definitely worth getting into.[00:52:31] KA: Yeah, I think there are memes like circulating around where you’re like, it’s like the pre-COVID sort of picture of a cartoon man, and then there’s an after picture. It’s either like this huge fat person or it’s like the super muscular one. So you either go down the path of working out a lot more or you go down the path of eating a lot more. I think that that kind of hold true for a lot of people. For example, me, I have trouble doing things in moderation. I always do things 100%.[00:53:03] SW: So reminder to be healthy, and to eat well and to no electrocute yourself. That’s from us today.[00:53:10] KA: Definitely, and also eat almond butter. All right. And on that note —
10/31/202053 minutes, 13 seconds
Episode Artwork

The Svelte Summit Hypisode

We talk about the upcoming Svelte happening of the year: Svelte Summit. On October 18th at 2PM GMT you'll be able to tune-in on the Svelte Society YouTube channel. We have 18 talks lined up. Don't miss it! If you want to get a reminder, sign up to the newsletter.Show Notes: SVELTE SUMMITTranscription:[00:00:00] KA: Hey, everyone. Welcome to another episode of Svelte Radio. We have a special episode today about the upcoming event, Svelte Summit. But before we begin, we are going to introduce ourselves. So I’m Kevin. I run Svelte School. Then we have Shawn and Antony. [00:00:19] SW: I’m Shawn. I work at AWS and I recently rewrote my blog in Elder.js. It’s fully done now. [00:00:27] A: Hi. I’m Antony. I’m the CTO of Beyonk and I’m also a Svelte maintainer. [00:00:33] KA: All right, cool. Svelte Summit, are you guys excited?[00:00:37] AJ: A part. [00:00:37] SW: Very. I’m very excited. [00:00:39] KA: Awesome. [00:00:40] SW: Awesome. [00:00:40] KA: I am as well. We have so many great talks lined up. And compared to the Svelte Society data we had a couple months ago or half a year ago, it was a long time ago. We only got like 12 proposals. But this time we got around 40, so we’re growing. That’s great. I guess we can talk a bit about some of the talks. Let's start with the –[00:01:06] SW: Yeah. I guess I also wanted to like reflect a little bit on like the journey that we took to get here. Like all three of us, we started Svelte meet ups in the cities that we lived in a year ago. Actually, the first time I came about the name Svelte Society was like at the very first meet up in New York where just kind of like introducing it to people. Then I said like in one year we could have like a – It was like a very tentative question mark, but I knew that the name was right. [00:01:37] KA: It does work well, yeah. [00:01:40] SW: So maybe we could’ve bought the domain back then, but I think it all worked out. I didn’t have confidence or faith that I could do it, so definitely like a lot of credit goes to Kev for being the lead organizer for all this. This is amazing that you actually got all these people together and organized all this, so massive kudos to Kev. [00:02:00] AJ: Absolutely, yeah. [00:02:01] KA: Thanks. Thank you. It is actually quite a lot of work when you think about it, or rather it's like comes and goes, like the workload. So at times, you have a lot to do and then – For example, this week I’m going to have a lot to do because I have to edit all the talks together into one big talk, and you have to like do the website and all of the stuff. But for next time, we’re probably just going to reuse the website or a variation of it at least. I think it works well. It looks good. Wolfer did a great job on the design as well. [00:02:38] SW: Yeah, and community conferences are definitely driven by volunteers, and I imagine every framework, every programming language runs into this when they’re just getting off the ground. And it takes people like you, people like us, to just volunteer and not wait for some other person to do it. [00:02:56] KA: Yeah. It’s very easy to just wait for something to happen. But if everyone does that, it’s never going to happen, right? So it’s a lot of fun as well. [00:03:07] SW: That's one thing I noticed, like being involved in the community opens a lot of doors. You get to meet a lot of people, talk to a lot of people that you probably otherwise wouldn't have talked to, so that’s also fun. [00:03:18] KA: Yeah. [00:03:19] AJ: I also think it’s quite –[00:03:20] KA: Even the guests that we’ve had on even on this podcast has been pretty good actually. [00:03:25] AJ: Yeah. No, I think it’s quite new. It’s something to organize and meet up in your town kind of thing. It was difficult for me because it’s not something I’ve really done or thought I could do before. But I think that taking that to a sort of global scale is a lot more difficult, and it’s something that I probably still don’t think I could do. So, yeah, like Shawn says, well done, Kev. I think that’s something that you really sort of pushed the bar there. [00:03:48] KA: I think it’s funny because in some ways I think it’s easier, and then others it’s harder for some reason. [00:03:53] AJ: Yeah. It’s the others. [00:03:55] SW: I was about to say that because when I was – I think we organized like maybe five or six Svelte Society in New York before everything shut down, and I was responsible for booking the venue, like getting everyone in the door. Sometimes, the instructions to get in the building were bad, and then people would be calling me and emailing me. Then at the same time, like being emcee or I try to sort of form out that job but sometimes I’ll be the fall back. Then also speaking because it's hard to find speakers, and then also being responsible for AV like recording it and putting online because I think the majority of the talk’s audience is always going to be online. So they always want to promote the YouTube and all that stuff like that. In one sense, like doing it online gets rid of all the physical stuff, so you can just post it to YouTube. [00:04:40] KA: Yeah, exactly. So this time around, we also have sponsors. That’s a pretty big milestone I suppose. [00:04:47] SW: Yes. [00:04:48] KA: Thank you, Daddy Bezos and – All right, let’s talk about the speakers or rather their talks. I was thinking we could start with Svelte at the Edge, powering Svelte apps with Cloudflare Workers. Have you guys worked with Workers?[00:05:07] AJ: I haven't. I haven't, no.[00:05:09] KA: I think they’re sort of like – I guess you could call them just serverless functions with a twist because they’re like web workers. [00:05:19] AJ: Yeah, it seems like title functions that sort of a lot like serverless are like on other platforms but more like kid of – I guess they have a lot less power than a real serverless function, but it makes them ideal for just sort shipping out to edge nodes everywhere. [00:05:35] KA: I think this talk is by Luke Edwards and I think he’s going to talk about server-side rendering Svelte on the Edge, which is a pretty cool idea. I'm super excited to see it, yeah. [00:05:49] AJ: I'm always interested in what you can pump into a tiny little function. Low-power device is fascinating to me, so this is kind of like I guess virtual low-power devices, like running your website on a Pi. [00:06:03] SW: That’s fancy. Yeah, I know. I think having worked in Netlify, Netlify also released – Well, Netlify announced Edge functions recently, which are kind of in a similar category to Workers. The thing I caution people – So like what specifically is less powerful, right? So we’re talking like lower memory. But I think that the main restriction that people should be aware of is that the response time has to be very fast. It used to be acceptable for lambda function or for like a serverless function to respond in 300 milliseconds, and you can go up to 15 minutes if you want to. But for Edge function, you need to respond probably in less than 10 milliseconds or like on that order of magnitude, right? Because everything in there is serving every asset that you request. So if you run a slow-running function, then your website delivery is going to be very slow, which also means that you can do a lot of logic in there. But you can do some, and I think that’s where people are going to push the boundaries. I just want to caution people. This isn't like let me take one serverless function and just shove it at the Edge, and it will be magically faster. No. Antony’s right. This is a embedded device that it happened to be running closer to your sort of viewer’s location. So you can do things like internationalization, like same URL send people to different managers based on the IP or their browser just sort of headers. But then also, the thing that Cloudflare is really, really innovating on, which no one else is doing is KV stores and durable objects. So they have compute. That's the thing. That’s workers. But when you add in some form of persistence, so KV stores are eventually consistent, and durable objects are strongly consistent. Then you get to do some things like authentication at the Edge and whatever, like just storing basic bits of data. [00:07:49] KA: That’s actually pretty interesting. I was this week and I was tinkering with actually doing like building my own authentication service. Yes, I know you shouldn’t do that. But mostly for learning, right?[00:08:00] SW: Yeah. [00:08:02] KA: It’s pretty cool because you can store the sessions in KV probably and you can also store like user information, so you’ll have like – Then the thing with Cloudflare is you can just park your domain there and then you would just have your Worker on the route and you automatically get authentication for free sort of. [00:08:26] AJ: It’s interesting actually. I will say one thing, Shawn. There is another service too in KV, and it’s actually a really attractive proposition. are doing it as well. But, yes, it’s something I agree that’s been missing from a lot of providers for a long time. The [inaudible 00:08:40], for instance, doesn't have it and it's so valuable and I think it's a really interesting innovation, like you said. [00:08:45] SW: The funny thing is that – So Begin’s KV is actually just DynamoDB and like everyone could do this. It’s just that no one's like aggressive enough. Brian LeRoux and Ryan Block at Begin are extremely aggressive with serverless technology. Then it gets down to like latencies, right? Cloudflare, the marketing that they have with KV is that it’s really sort of distributed, whereas the DynamoDB one I haven't done any benchmarks. It may not be as distributed as CloudFlare’s offering is, with the corresponding impact on latency. But most people don't care, so that’s fine. [00:09:23] JK: All right. So Svelte at the Edge then. Let’s move onto the next talk, Elder.js. You’re building search engine optimized friendly sites with Svelte and Elder.js. That's a mouthful. Svelte Summit is actually built on Elder.js. [00:09:39] SW: Really? [00:09:40] KA: Yeah. I had a great time building it. I think Nick is going to pretty much show us how to get started with Elder.js, which is great. It has some concepts that are a bit hard to grasp at first, but that have become clear pretty quickly. I don't know if you have any thoughts on that.[00:09:58] AJ: I think this is also interesting to me because I don’t have time to experiment with all these new frameworks and sort of engines. As much as I don’t really do video tutorials, I think having a visual tutorial can be really interesting because I definitely want to static generate everything I have, but it's not always easy. [00:10:18] KA: Yeah. It’s usually that hard. [00:10:20] SW: The thing about Elder.js is that Nick has a very particular way of thinking. That's the way that he freezes it. I've talked a lot with him as I sort of ran into issues. So you kind of have to like kind of buy into that idea. But otherwise it's very well-written. It’s very well-documented. I have rewritten my sites. It is a lot less js than even my separate site because it's using the islands architecture. It doesn't rehydrate the entire DOM, even though nothing changes in the DOM. It only rehydrates the parts of the DOM that changes, and I think that's something that Jason Miller at Google is kind of really pushing. So this will be an important crowning of Elder.js as a real thing. [00:10:58] AJ: Yeah. [00:10:58] KA: Yup. It’s going to be awesome. All right. But then we have REPLicant by Peter Allen. The in-house penguin you could also call him I guess.  [00:11:09] SW: He has a real name. I thought we’re not – I thought we just – [00:11:12] KA: Yeah. I don’t know if he does. [00:11:14] AJ: He uses it for talks I believe. It’s like he’s talking. It’s like his talk name. I’m not sure it’s his real name. It’s just like a pseudonym for talks. [00:11:21] SW: I’m not –[00:11:21] KA: I’m not sure it’s the real picture as well. [00:11:24] SW: Yeah. I think he just hires the guy to play him but he’s actually a penguin. [00:11:30] AJ: That’s a sneaky move. Yeah, a pen name. [00:11:31] KA: I think this talk is going to be on how you pretty much build a REPL, which is something I have no idea how to do. And it sounds super advanced, so that's going to be a lot of fun. [00:11:46] SW: Isn’t there ongoing work to spit out the REPL from the Svelte site? [00:11:49] AJ: It’s kind of already split up because a REPL – I mean, it’s I can’t remember what it’s called – like, that but it’s already split out, and somebody actually opened a PR of the document exactly how to set up an isolation, which is really good because it is tricky to do that. [00:12:03] KA: Yeah. I’m using it on Svelte School But I got the idea from one of Peter's talks. He used the REPL in one of this talks, so I kind of just copied the way he did it sort of, and it works. [00:12:16] SW: He’s one of these developers that builds just like very impressive projects to serve his own needs. Then you find it and you’re like, “How come this is not better known?” So I think hiss Bristol. I think, that was his talk at Bristol JS or Bristol something. [00:12:32] AJ: Bristech. [00:12:33] SW: Bristech. I highly recommend people check out that talk because he made his own slide deck because that's what developers do with the REPL embedded inside, with live reloading and all that. Yeah, and [inaudible 00:12:45] was also really good. Look at the ducks and look at the penguin walking around. Pretty exciting any time penguin puts out stuff.[00:12:52] KA: Yeah. Super satisfying to go to the website and look at the penguin walk back and forth for sure. [00:12:57] SW: It’s so cute. [00:12:59] KA: All right, so next talk. This obviously is my favorite talk, right? Unlocking the power of Svelte actions.[00:13:06] SW: Yup. 00:13:08] KA: This is going to be a fun one I think. I'm hoping to learn a lot because I love actions. I’m going to learn more. [00:13:14] SW: Who is speaking inter alia? Who’s that?00:13:16] KA: This is Kirill Vasiltsov, where I probably butchered his name but yeah. It’s going to be interesting. I'm not entirely sure what we’ll learn about, but it says custom events and extending DOM attributes, sharing animation logic. So that sounds fun. [00:13:37] AJ: I mean, this is just a guarantee to get picked for the conference, right? [00:13:43] KA: Picked? Why? No, no, no. He’s guaranteed to be picked because [inaudible 00:13:47].  [00:13:48] SW: This is conference organizer optimization, COO. [00:13:54] JK: Talk during development. [00:13:57] SW: I think the more everyone understands the usefulness of actions and the more we congeal on a set of actions that everybody uses, then the more we can sort of build it in, and I’m still hopeful for some built-in actions. Having to look up like click outside and simple actions like that, those are as useful as animations. We should have them built in. [00:14:17] JW: Yeah, let's – I should probably do like library for the RFC and see if –[00:14:24] AJ: Yeah, that’s true. That’s true. I’m doing that.[00:14:25] JK: Something happens with that. If not, then the the library will exist anyway, right?[00:14:30] AJ: Yeah. So I think that actions are underappreciated because obviously, I mean, that’s super useful there, adding behavior to Svelte without having to actually edit Svelte itself or try and get a sort of PR approved that changes or increases API footprint, which is obviously not something we like doing. But, yeah, unlike animations, you don’t really hear them that often. It’s weird and I guess the reason being you can do the stuff you do in actions outside of actions. But you really shouldn't because it's just great to have it as a sort of reusable tool. I think that having a talk on that is going to really benefit people because it will help them understand exactly how easy it is because it really is a few lines of code to essentially you always svelte it into something that does your bidding, rather than having to try and work within its constraints. [00:15:14] KA: The Zen of Svelte by Morgan Williams. [00:15:18] SW: What is that?[00:15:19] KA: This is interesting. So he feels that svelte is the most Pythonic front-end framework-ish kind of. Yeah, I don't know much about Python. Let’s see what this is about. [00:15:35] SW: There's a popular sort of rules. I think every major language has these like the Zen of Python or like the rules of Java or something. I think Zen of Pyhton is probably the most one-on-one. I mean, I struggle here with like the analogy because Python is a very different animal, but it’s also a language, and sometimes you could probably draw some useful rules. So this is a lightning talk, right? That can be a prick. [00:16:03] KA: I don’t remember actually. I think so, yeah. [00:16:05] AJ: Is it?[00:16:06] KA: Yeah. It is. [00:16:09] SW: The Excel sheet. [00:16:10] AJ: I mean, Python is one of these things that gets continuous hype, even though it’s sort of one of the eldest languages that’s there really that’s still unused today. So it's interesting to see how this sort of relates to something that's relatively quite new. [00:16:25] JW: All right, next talk. Introduction to Svite or Suite. [00:16:29] AJ: I don’t know, yeah. Or Svite or Svite. I don’t know what it’s called. [00:16:32] KA: I guess we’ll learn at the talk, right? So Dominik is going to talk about how to use Svite pretty much and what you can do with it. It’s also lightning talk. [00:16:43] SW: Yup. For those who might want to prepare for this, check out Vite from Evan You from the Vue ecosystem. It’s spelled V-I-T-E. Basically, it’s one of those DEV tool bundlers that doesn't bundle during development but then bundles during production, and that kind of gives you the benefit of hot reloading extremely quickly. It’s because you don’t have to rebuild the whole thing. But then in production, you can still build. And I think Evan You kind of built it out for Vue and React, and then Dominic kind of built the Svelte plug-in and then called it Svite. [00:17:14] KA: Yeah. It’s actually really nice to work with. You get up and running really quickly. [00:17:19] SW: I’ve haven’t used it that much and I probably should use it more. It’s just that like I always want to go straight to Sapper or Elder, the static rendering thing. [00:17:27] KA: Yeah. But for like small applications, it’s like if you want to make – It probably works for bigger ones as well. But if you just want something up and running, it’s great. [00:17:36] SW: The other thing I want to really get into is this –[00:17:36] AJ: I mean, I use it for docs. [00:17:39] SW: For docs, yeah. That makes sense. There is Svelte docs which I think the React ecosystem really benefits from having a tool like DocuSource which has kind of really taken over documentation and it's really – I mean, it’s good. It's a good API. Everyone understands it. It has syntax highlighting markdown, like all the standard stuff that you might want out of a documentation solution. I think Svelte probably should try to get towards that. But right now, we have a bunch of different tools. [00:18:09] AJ: As a newer framework, you’re going to start with a whole bunch of stuff, and then do goodwill to kind of sort of shine and become large, enhanced, and advanced on what they are. So I think it’s totally reasonable that right now you’re going to have 100 ways to do the same thing. [00:18:23] KA: Yup, sure. [00:18:24] AJ: Like routing.  [00:18:26] KA: Like routing, yeah. And there's actually going to be a talk about that. We can probably talk about that now. So that's the – It’s a lightning talk about picking a router by Alessandro. He's the guy that wrote one of these routing libraries, so that’s going to be fun. I think there are there are so many routers to pick and choose from.[00:18:47] AJ: Absolutely, yeah. [00:18:47] KA: It’s going to be interesting. Yup. Then we have a talk by Ron Oh. I’m not sure how to pronounce that. Names are hard. And the title of talk is The Web à la Mode. So the description is the web is a mouthwatering platform, fashionably served with a side of sweet reactivity. Take a wild ride exploring what it has to offer you and how Svelte ties it all together. This is bound to be a fun talk, right?[00:19:17] SW: Yeah, it has to be at least from the description. It's a fun title. Maybe Ron is pretty interested in cooking I guess. I don't know what à la mode actually means. [00:19:27] KA: No. I took a sneak peek at this talk because I do have the talk, so I can actually watch them already. But it does have something to do with food, so that’s fun. I think it's some kind of pancake or something. I'm a bit unsure. Let's see how on Sunday. [00:19:44] SW: Yeah.[00:19:46] KA: All right. Then Li Hau’s talk, demystifying Svelte transitions. This is another one of those things that are – You kind of use the built-in transitions, but having custom transitions is interesting. So I think Li Hau’s talk is about how it works under the hood, which is always fun to understand. [00:20:08] SW: Yeah. His blog has been just how Svelte works under the hood, like you have to buy the handbook. [00:20:12] KA: Yeah, that’s amazing. [00:20:14] SW: So he’s really taking this idea and exploring it. I think transitions is one of those black boxes thing. I never know what to put in the options. There’s just a whole bunch of like – I guess it's like CSS like in-line styling or something. But then I don't know how to transition things in and out nicely. I think there's that step change between when I look at the docs and I see all these different transitions, and then I try to apply them in like realistic settings. It just doesn't look great. [00:20:45] KA: Yeah. Maybe watching this talk will make you understand how to use them as well. I don’t know.[00:20:51] SW: I remember one time I had a margin collapsing, which is a really bad issue. It would just jump when the transition ended. [00:21:01] AJ: Talks are really fascinating because it's – I think one of the problems Svelte has is the internals are so complex. It is something that’s so different to anything else really that’s out there, and I think it’s just a great community service provider but really how that it’s just basically just to explain as best as possible in a kind of introductory beginner sense how that all works. So I'm pretty excited about this talk actually because it's definitely something that I need to learn more about, and it seems like an uphill slope sometimes, so yeah. [00:21:33] KA: All right. So those are some of the talks that we’re going to see at Svelte Summit. We’re going to announce more of them as we get closer, and there’s a mailing list that you can join on Hit the sign up button and you can just enter your email and you will get updates. I’m going to send out the first email today or tomorrow. We’ll see. Yeah, that’s it. [00:21:56] SW: Extra details as well. You can also hit to the YouTube where we’re going to be putting a premier and you can – If you already use YouTube, you can just hit the sign up or like notify me button or something or hit the bell, like they say, on YouTube. I think it’s YouTube. We have a vanity URL. I think it’s It’s pretty easy to remember. [00:22:16] KA: Yeah. And then –[00:22:18] SW: It’s 2:00 PM, right? Sorry, go ahead. [00:22:19] KA: Yeah, yeah. On Sunday, 2:00 PM GMT, so that’s – I think you said 10:00 EST.[00:22:25] AJ: Yup. [00:22:25] SW: 10:00 EST, 10:00 PM Singapore time. And whatever that is in British time, like 3:00 PM. [00:22:31] AJ: EST. Yeah, 3:00 PM. But also GMT is UTC, right? So it’s – It’s, ignore all the other time zones. UTC is the only important one. [00:22:40] KA: Yeah. All right. There’s one thing I saw thing morning that was pretty cool. Someone posted about having rebuilt their site in Sapper going from Gatsby and reducing the amount of code by 40%. [00:22:53] SW: Wasn’t that you?[00:22:55] KA: No, no. [00:22:54] SW: You were reporting someone else. [00:22:56] KA: Yes. [00:22:56] SW: Okay. I thought that was you. [00:22:58] KA: No. That was pretty cool to hear. On that note, let’s end this show, and we’ll meet up again in a couple weeks again and talk about how Svelte Summit actually was. All right. 
10/14/202023 minutes, 9 seconds
Episode Artwork

Svelte and Sapper in Action with Mark Volkmann

Mark Volkmann has written a great book on Svelte and Sapper. We sit down with him to talk about his background, what's in the book and some more philosophical developer stuff! Keep your out on Svelte Society twitter account. We'll be giving away two copies of the book!Sponsors: Level Up Tutorials brings you cutting-edge, focused & high quality video tutorials for web developers and designers. Support the show and check out the Svelte For Beginners as well as Sapper for Beginners courses. You? Svelte Radio is currently looking for another sponsor! Send me a message at [email protected]. Show notes: Svelte and Sapper in Action book (get 35% off by using code podsvelradio20) Mark's blog and second blog/site Transcription:[00:00:00] KAK: Hey, everyone. Welcome to another Svelte Radio Podcast. Today, we have another guest with us. Before we get to that, let’s do introductions. I’m Kevin. I run Svelte School and I’m heavily involved in the Svelte Society community stuff for Svelte. Yeah, that's me.[00:00:18] SW: I’m Shawn I work at AWS on developer experience. Most recently, I’ve also been working on finally shipping my own site in Elderjs, which is the new Svelte static site generator. It's very fast, because it basically ships almost nothing. Yeah, I really like it.[00:00:38] AJ: Hi. I’m Antony. I’m a CTO at Beyonk, which is a platform for experienced booking. I’m also a Svelte core maintainer. I’m involve with Svelte Radio, Svelte green tea, apparently a lot of stuff that I don't know how I got involved in, but there you go. Yeah, thanks.[00:00:55] KAK: All right. The guest for today is Mark. Mark Volkmann, is that how you say it?[00:01:01] MV: That's correct.[00:01:02] KAK: Yeah. What's your deal?[00:01:05] MV: Yeah. I’m a software consultant in the St. Louis area in Missouri. I work at object computing. We provide training and consulting and all kinds of software development. These days I mostly focus on web development, but I really work in the full stack.[00:01:22] KAK: Awesome. You've written a book on Svelte, right? It's probably why you’re here.[00:01:26] MV: That’s right. Exactly.[00:01:29] KAK: How was that experience?[00:01:31] MV: It was quite challenging. I have a long history of writing. I write a lot of articles for my company that get published on our website and sent out to subscribers to those articles. I’ve been speaking at conferences and user groups for a long time and teaching classes. I had a long history of writing. This is the first time my writing has been examined this closely by a large number of reviewers. It was quite an experience trying to deal with all the feedback that I was getting.[00:02:01] KAK: Nice. Why Svelte?[00:02:03] MV: For me, it's all about developer experience. There's so many reasons to choose Svelte, but I really focus heavily on at least my own productivity. I find that I’m just way more productive in Svelte. A lot of that has to do with the features that are built in that make things so simple and result in you writing less code to get things done. For me, some of the top features are the way that you deal with state inside a component and the way that you share state across component using stores. Both of those are just so much simpler than what I see in any of the other web frameworks.[00:02:41] AJ: Yeah. I like this part that actually – I liked it so much that I took a screenshot of it. In chapter five, you have this table on component communication options and you've got props, slots, events, context, module context and stores and I think that's a really good recap of how these things go. I don't know. I never had it put so clearly to me. but I do have a special preference for stores. They were the first Svelte talk that I did at the New York City Svelte Society meetup.[00:03:08] MV: Right. When you compare it to what you have in other frameworks, like Redux and React, or Vuex and Vue, or NGRX and Angular, it's just a night and day difference in the complexity level.[00:03:19] KAK: Yeah. Your book is pretty comprehensive. I’ve skimmed through it, read parts of it. It seems like the tutorial, but on steroids. It covers pretty much everything. It feels like a good next step after doing the tutorial.[00:03:37] MV: Yeah, I think that's right. I would recommend that people go through the tutorial, because that's excellent. I did really aim to show almost every feature of Svelte and Sapper and have a simple code example of everything. Then show it in a wider context in a sample app that we build throughout the book.I think, even for myself it will be a reference going forward to look up how to do various things. That's really the style of my writing on other topics is to be a reference that I can go back to when I forget how to do something, which is quite often because as developers, we have so many things to remember that we just can't – we have to have a resource to look things up from time to time.[00:04:18] SW: Yeah. Absolutely. I noticed when I was – I was actually reading the book from when it was in more early stages, so there were obviously chunks missing, the stuff I was reading it online. I noticed that there were URLs and things like that that were probably due to go out of date pretty quickly, I just wondered as a person writing a book for something that is quite fast-moving technologically, how do you keep track of what's changed and what you need to update and what hasn't?[00:04:41] MV: Yeah. That's a tough challenge when it comes to URLs. The editor from the publisher encouraged me to not include very many of those things. I push back on that. I understand things go out of date. I would rather have good material out initially that will go out of date than just skip it all together. My tendency was to include as much as possible, even if there was a danger of it going out of date.An example of this is that in the chapter where I talk about different ways that you can deploy a Svelte app and I get into some details about services like Netlify, so I was listing a lot of details about the plans, including the prices. They didn't want me to include the prices, so I ended up scaling it back to just describe the different tiers that are available. I think that was a good compromise. I didn't just want to say, go to the site and see what the current plans are, without trying to give some idea of what the current offerings are.[00:05:45] SW: On what you can and what you can't do with each tier. I think that's really good. It’s also nice.[00:05:49] MV: That's right. On that topic, that's an example where the things I’m discussing in that chapter are not very specific to Svelte. They're just something that you would want to know as a web developer. There are a lot of chapters in the book that are like that. For example, when I dive into details of kinds of testing you can do. At the unit test level, there are some things that are specific to Svelte. Then when you get into end-to-end testing, or accessibility testing, that has nothing to do with Svelte. I wanted to include it anyway, because it's part of the workflow that you'll go through when you write a Svelte application.[00:06:23] SW: On that note, would you say that the desired audience of your book is a developer getting into web development? Or, would you say it's more of a Svelte user, or would you say it's more like an advanced post-tutorial Svelte user, or does it cover all three?[00:06:36] MV: I want to believe that it covers all three. It's certainly good if coming into it, you have some idea of the process of web development. Maybe you've used some other framework before. Then what I’m showing are the specifics of how to do those things in Svelte, but also the things that don't have to do with Svelte; as I said, things like end-to-end testing. If you're aware that end-to-end testing is a thing that exists, the book will help you get into implementing that.[00:07:07] AJ: Cool. I wanted to call out some of the things – I think, just reading through some parts of the early chapters, I want to call the things I really liked. I thought it was very approachably written, but you weren't really talking down to people. It's always a nice balance as to how much you want to explain, versus how much you assume that people bring their context. I really like the await example uses dog CEO, which is exactly what I use.[00:07:33] MV: Oh, nice.[00:07:35] AJ: That endpoint. I was trying to count how many examples you worked out, but it's got to be dozens. Every single chapter, every single sub-chapter has a different example. Yeah, I really appreciate that. Actually, would be a good to have a list of REPLs at the end of here's everything that we walked through. Those are really good.[00:07:57] MV: Interesting that you bring up the REPLs, because as I just found out yesterday, I was invited to speak at Svelte Summit coming up. I’m going to be giving a talk on animations. That's straight out of chapter 10 in the book. It has a number of examples. and I have REPLs for all of those. In that talk, I’ll be giving URLs to all of those REPLs and we'll walk through all of that good.[00:08:20] KAK: That's awesome.[00:08:22] SW: Yeah. That's something I haven't really figured out. Are you talking about the flip animation?[00:08:28] MV: Yes, that's one of them. Yes. That's right.[00:08:30] SW: I still don't know how it works, so I have to look into that.[00:08:34] KAK: That would be a good talk for you then, Shawn.[00:08:36] MV: The crossfade animation can be complicated to grasp what's going on. I’ll definitely cover that. Then a really interesting custom one that I build in the book is one that takes a chunk of text and it makes it appear that it's spinning down a drain. It rotates a couple of times. As it's rotating, it shrinks until it gets to zero size and just disappears from the screen. That was a fun one to implement. What's really surprising about it is how little code it takes to do something like that and it really emphasizes how Svelte animations are built on CSS, which of course gives excellent performance and doesn't block the main thread, all of those benefits.[00:09:19] SW: Yeah, you can pause and reverse it midway. That's always like a “Oh.” Like, “I haven’t really thought about that.”[00:09:27] KAK: Right. I had a question on the chapter just before that, so the chapter just before that, chapter 9 is on routing. That's notably a sore point in Svelte. Did you have any struggles writing that chapter?[00:09:38] MV: I didn't have any struggles, because I’ve done so much of that in other frameworks. I think my opinions on that don't line up with a lot of other people's. It seems that there's a sentiment now that people want there to be an official router that ships with Svelte. For a lot of applications I write that are smaller, they don't need for the URL to change when I go to what you think of as a different page in the app, because I don't need the users to be able to bookmark a page inside it.I understand there's a lot of apps that do need that. If you don't need it, you can just have a hash map of this name goes to this component and I have a store that tells me which one is the current name. It's really easy to write the code that just displays the correct one. That's what I refer to as the manual routing approach in the book. Then going beyond that, if you need the URL to change, it's so simple just to use hash routing. The only negative I know of is that some people don't like seeing a hash symbol as part of the URL.[00:10:42] KAK: Now a word from our sponsor. Are you looking to get better at building websites in Svelte? Well. you're in luck. Level Up Tutorials has tutorials on how to get started. Scott is an excellent teacher and has courses on a broad range of web development topics. If you want to support the show and learn Svelte at the same time, check out the Svelte for beginners and Sapper for beginner courses at Radio is currently looking for another sponsor. If you're interested in seeing this show continuing and want to support it, you can reach out to me. I’ll drop a link in the show notes as well.[00:11:24] SW: Right. I think you mentioned before we had a small break that you have a pretty simple approach to hash routing, mainly because it fits your requirements and some people just don't like the optics of having a hash in the route. If you don't mind that, then the solution for that can be pretty simple and it's pretty easy to integrate with Svelte.[00:11:45] MV: That's right. If you decide you don't want to use hash routing, the next thing I talk about in the book is using a library called page.js, which is not specific to Svelte. That's also a very easy option and it's more capable than rolling your own. I think some people are looking for a more Svelte-specific solution. I know that there are some out there. I mentioned a few in the book. One in particular, Routify, seems to be getting pretty popular now. Then the other thing I would mention is that if you really want a nice routing solution, maybe you should just use Sapper, because it's all built in and Sapper’s routing is also very, very good.[00:12:23] AJ: It's funny that you mentioned people want to Svelte specific solution, because that seems to be quite the thing. If you look at anything like React or Vue, you'll find that people like to have these REPL libraries that wrap existing vanilla components, such as What I found, obviously one of the things I like about Svelte is that you don't have to have these REPL libraries. It's very easy to integrate vanilla JavaScript libraries with Svelte without any intermediary, or wrapping thing around it. Yeah, it's interesting that people want a Svelte specific solution to routing, although obviously, it's quite nice to have that.[00:12:54] MV: Right. It reminds me of the way that a lot of Angular developers will say, “How could you use a framework that doesn't give you a solution for creating HTTP requests? Don't you have to have that?” Why they think that fetch API isn’t sufficient is not clear to me.[00:13:13] KAK: That always gets me when people ask about Axios, that's another one of those libraries, right? I get that it supports probably some obscure Internet Explorer version, but just seems like a lot of work to when you have fetch.[00:13:30] AJ: Right. I mean, so the fetch polyfill supports that as well, right?[00:13:34] KAK: Right.[00:13:35] AJ: In about three lines.[00:13:37] SW: I come from mainly React experience. I would say, for React it's actually needed, mainly because it's so strongly opinionated in the functional programming sense that you have to adapt it, use the data with component life cycle methods. Now you have to use effect and it's always dark magic, so much so that they don't they recommend that you don't write your own and then you use other people's REPLs.That definitely grates me a lot, like I don't want to look at my package JSON and have React-Redux- and then a billion other things that I also import. I definitely appreciate that about Svelte. I think the phrasing that I adopt from Rich Harris is that, let's stay as close to the metal in terms of the native language of the web, which is HTML. Then when you write components, let's stay close to that. Surprisingly, it's a lot easier to integrate everything else.[00:14:25] MV: A thing related to this in the book is that in chapter one, when I’m describing the features of Svelte, I’m comparing it to other frameworks, like Angular and React and Vue. Early versions of the book were a bit more negative about the other frameworks. I was encouraged to tone that down as to not offend people. At the same time, if you don't draw comparisons then people don't have a reason to Svelte over the other options.I’ve done a lot of React development myself. I’ve also worked in Angular and Vue, but I have the most experience in React. I’ve been away from it for a bit doing mainly Svelte, but I’ve had to help some other developers in my company with React applications. It's interesting going back to it after being away for a month or two, seeing it with fresh eyes. I think there's a boiled frog thing that is happening, where if you're in any of these ecosystems, you gradually learned how they work over time. When one more feature gets added, that doesn't seem so bad. It's just one new thing and you already know the previous 20 things, so it's all good.It's the boiled frog scenario, where you don't realize the water is getting hotter and it's getting hotter. If you can break away for a month and do Svelte and then go back to some other framework, I think you'll be shocked at how complicated the code seems and you just didn't realize it before, because you were in it every day.[00:15:53] KAK: Yeah. That's my experience as well.[00:15:55] AJ: Yeah. I think that's reasonable. I think obviously, criticism can come in many forms. I think, criticizing to draw comparisons maybe is warranted, but it's got to be done in a way that doesn't rile people up, because there's no point, I guess, warring over frameworks. You use the one that's best for the thing you're trying to achieve. Obviously, I’m quite heavily biased here. I think that in my opinion, my experience even, it's almost always been Svelte has been the ideal framework for that task and it really is quite adaptable to stuff.[00:16:25] KAK: Yeah. Really is.[00:16:27] SW: I’ll go even further. Most people don't pick frameworks because of the quality of the framework. They just pick it because of the jobs available. I mean, that's how I got to React. The only thing you look for is okay, how do I become a React expert? How do I get advanced React? Things that are complicated actually give you value, because then you can turn around and say like, “Hey, you can hire me because I know all these things.” You don’t really question like, do we actually need all this stuff? That's a similar journey. I call it Stockholm Syndrome. I wonder, Kev, living in Stockholm if you've – Swedish people call it Stockholm Syndrome or not.[00:17:04] KAK: We do call it Stockholm Syndrome. Maybe not the reaction, but – You do know where it comes from, right? The –[00:17:16] AJ: – Kidnapping.[00:17:18] KAK: Yeah. Or was it a bank robbery? You guys know better. I have no idea. All right. Getting back to the book, one of the downsides that I think you mentioned – We mentioned Sapper, so I thought it was a natural transition point. One of the downsides that you mentioned is that Sapper is not 1.0. You seem pretty in favor of Sapper. Obviously, it's a big part of your book. What are your thoughts on Sapper and production readiness and versioning and all that stuff?[00:17:44] MV: Well. I hear a lot of talk among the core contributors that there could be changes coming in regards to modularizing parts of Sapper breaking it up. Maybe some things that are built into Sapper now won't be built in later, but will be an optional thing that you can use if you want to. I just feel there's so much benefit you get from Sapper, that even if in the future I would have to make some changes to an app to work with the new version of Sapper. I think it's worthwhile.There's just too many good things in Sapper right now, amazing things like how code splitting works and how pre-fetching works. I think with every feature of Sapper, you could conceivably just use Svelte and hand-add those things yourself, but that's just too much work. You might as well start with those things out of the gate. I would not shy away from using Sapper now, even though it's not 1.0. I would just be ready to make some changes in the future. I’m guessing that it won't be hard to make those changes.[00:18:49] KAK: Yeah. Do you have any inside information for us?[00:18:53] MV: About how it's going to be split up?[00:18:55] KAK: No. I’m asking Antony if he has any –[00:18:58] MV: Oh, okay.[00:18:59] KAK: - any inside –[00:19:00] AJ: Inside information. I mean, I don't think there's a concept of inside information. I think that would be against the open source framework of mentality. There are definitely discussions about breaking Sapper up, either becoming a series of plug-ins, or it becoming some a thing that pumps out against units of application that are not one big monolithic application, in order that you can deploy them more cleverly, or to gain speed, or performance optimizations.It's all really up in the air. The best place to find out about it is the RFCs. There are a lot of RFCs open right now and a lot of them overlap, or depend on each other, which is obviously a bit confusing. I think it's a matter of yeah, having this wider discussion to determine really what people want and what is optimal, what is doable. Hopefully, checking things like HMR and stuff in there, which has been requested for quite a long time.Yeah, there's lots going on. I think Mark is absolutely right. Modularization is one of the main things. I think that the crux of that is because maintaining obviously, Sapper is quite unique in that it supports any bundler. It's not opinionated about what bundlers it uses. When I say any bundler, I mean, any of two bundlers; webpack or roller.The reason that it can do that and the reason that it is also a problem is because that means it's got to be quite heavily baked into the core of Sapper. I think that one of the main goals is to get – just to pull it out and extract that, so that either it becomes completely bundled agnostic, or it becomes completely bundler specific. One or the other will definitely be an improvement on where it is now. Yeah, there's a lot going on. A lot going on.[00:20:38] KAK: Oh, exciting. I saw one issue about 0.29 that Ben opened, I think.[00:20:45] AJ: Yeah, Ben’s working on 0.29. Well, so working on it. He writes most of the PR. To be honest, he's a machine. I don't know how he does it. He also manages to triage all the things together into releasable units of code. Yeah, it's really good. 0.29 should be again, a quite a minor change. Nothing breaking, but quite a nice change. Then meanwhile, Li Han Tao is – I can't say his name. Tan Li Hao.[00:21:12] KAK: Li Hao. Li Hao.[00:21:12] AJ: Li Hao Tan. I got it right, fourth, sixth time. Showing it right. I always get the names mixed up. Essentially, he's busy working on all the PRs to Svelte itself, so a lot of the commits there right now, which are quite hard to review, because they're quite intrinsic, but some pretty exciting stuff going on there that's been in in-demand with quite a while, like slots and stuff.[00:21:32] KAK: Exciting. All right, so let's get back to the book. I have some questions in general about writing about Svelte. Because for me, some parts of Svelte are a bit harder than others and I’m just curious which ones do you find the hardest to explain so far.[00:21:49] MV: Yeah. I would say, one of the most difficult parts to write for me was when I was trying to explain how service workers are supported by Sapper. I only had minimal experience with service workers myself, so I really had to dig in and describe all the different caching patterns that you can implement, which is another example of a thing in the book that's good for web developers to know, but maybe isn't so specific to Svelte.That was probably one of the most challenging parts of the book. All the rest, I could generally learn from looking at the tutorial and looking at the API and writing some sample code. Before I even got involved in writing the book, I had already written a fairly long article about Svelte. I think it's around 45 pages. That's linked in the link that Shawn shared to my other articles. I had that as a starting point before I even began on the book.Interestingly, Manning was a little hesitant to have me start on it, because I had written that article. They have a feeling that if you've done a lot of the writing before you contact them, they won't be able to get you to change it to fit their writing style. That was a challenge, because I have a habit of really focusing on seeing how few words I can use to describe a thing. That's not what book publishers are looking for. They want more flowery kinds of sentences. I’m not used to writing in that way. I’m used to trying to be very concise in my explanations. There are more words in the book than there would have been if there were no editors. Maybe it results in something that's easier for people to read, but not all of it is exactly my normal writing style.[00:23:36] KAK: That's interesting.[00:23:37] SW: Was it a stretch, like yeah. I have a question about the book writing process itself, because I’ve never written – I’ve never worked with a publisher like Manning. Was it a hard sell to even pitch Svelte as a market that they might be interested in? Or how is that?[00:23:50] MV: It was very hard. Without naming the publishers, I’ll say that I was approached by a lesser known publisher before I got started, asking me to write a book on Svelte, because they saw that article. I didn't want to do it because I thought that it wouldn't get marketed very well, because this was a smaller publisher and then I wouldn't sell very many copies.Then I thought, well, if there's some interest in this, I ought to approach some bigger name publishers and see if they would let me write for them. I was rejected by two big ones who thought that there wasn't enough market yet. Then finally, Manning accepted. That was discouraging that I couldn't get some of the other publishers to be onboard. Yeah, that was tough to get going.[00:24:35] AJ: Sounds like their loss there, Mark.[00:24:38] KAK: It's really the chicken and the egg problem, right?[00:24:41] MV: Right. Yes.[00:24:43] KAK: Yeah. I mean, I think that's a lot of what the work is left to do with Svelte, which is the code is great and then we need to create a lot of noise around it, create a healthy community that looks like there's a lot of stuff going on. That's where publishers are looks to those kinds of secondary indicators to evaluate these things. We all have to do our part.Then we can show someone's written a book on it and then that will be the basis point for other people also writing it as proof points for other pitches, like adopting it at work, or writing their own books.[00:25:14] MV: Right. You're asking about the process of writing the book. One thing that I didn't know before getting into this was the number of different kinds of people that would be reviewing the book for me. Maybe the process is a little different based on the publisher, but at Manning, you are assigned a development editor that helps you get started with the book. This person is responsible for knowing the pattern of Manning books and making sure that your book fits the pattern.They're not necessarily a technical person. They're just good at English and grammar and they know Manning books. Then you're assigned a technical editor and then many other technical reviewers that are looking at everything. Then there's a person that's responsible for executing all the code in your book to make sure that they can get it to work on their machine. Then finally, there's a copy editor that is extremely picky about everything that you've said.One interesting part is that when you're getting started and you're working with that development editor that is not so technical, a very frequent piece of feedback that you'll get is do you think readers will know what this term means? Most of the time, the answer is, “I sure hope so, or they shouldn't be reading this book.” They don't know, because they're not a technical person.Just to give you an example. Of course, when you first start talking about Svelte, one of the things you have to say is Svelte is a compiler. I get the feedback, will the readers know what the word compiler means? I ended up having to add a note in the book to explain what a compiler was. I would hope that most people that want to learn Svelte already know that word.[00:26:59] AJ: Can I interject with an interesting story here that’s related? A few years ago, I used to work for J.K. Rowling, the Harry Potter lady.[00:27:06] SW: Oh, no way.[00:27:08] AJ: Yeah. Obviously, she’s got a whole publishing company that's built into her main office where I worked. They have a girl they employ there who works for the publishing side, who is actually – she's the Harry Potter bible. Everything that J. K. writes, she then reviews to make sure it's factually correct, which I think is so – it's almost back to front, so I found it really amusing. Yeah, she fact checks for consistency and chronology, because there's multiple chronologies in Harry Potter as well, because there's the real time and then there's a wizarding time and then there's the time when you discover things in the books and it's crazy. Her responsibility is to do all that stuff, which I thought was quite fascinating.[00:27:50] KAK: That’s so interesting to hear how it actually works in publishing. Never really known a whole lot about it.[00:27:59] SW: Yeah. There's a lot of references to the appendixes. If you need to know what fetch is, go to appendix B, because there's a lot to cover. I appreciate that. There's a lot in there. There's even stuff on MongoDB.[00:28:12] MV: Yes. Right.[00:28:13] KAK: Did you guys see that there was an infographic floating around a couple of months, or years ago about the shape of the front? This is what you should know as a front-end developer?[00:28:25] AJ: Oh, really?[00:28:26] KAK: It was this huge map of things. It's impossible to have everything in a book. Every year there's one. I think that's a nice point to transition to a little bit more broadly about Mark, your history as a developer. I recommend everyone go to his site. We're going to put this in the show notes. There's two sites; one, object computing, where it has his publication history going back to 2000. That's the earliest one with ant. I don't even know what that is.[00:28:58] SW: Yeah. Probably for the best.[00:29:01] KAK: Then there's Mark's own blog on GitHub and that's more recent writing it, looks like. Yeah, how do you think about what you've seen over the past 20 years in terms of your development experience and how your interests have moved? Where you think what development's going, that stuff?[00:29:16] MV: Yeah. I dropped one more link in the chat, which is just my home page, which has even more links to some technical resources. If you restrict things to web development, then when I started, it was just raw DOM manipulation. Then I got into using jQuery. Then after that, I started using Angular 1. I did that for a few years. Then as happened with most people when there was the debacle of waiting for Angular 2 and it was announced but it wasn't coming and it wasn't coming and then a lot of people jumped on React, I was part of the group that did that. Then Angular 2 came out and I ended up doing some of that all the way through Angular 7.I have to say, I’m really not a fan at all of Angular. It's my least favorite of the frameworks, because it just seems so verbose, and so much more complicated than the others. Then I got into Vue for a while, enough that I was able to do a half day workshop on Vue at the Midwest JS conference. I wrote a couple of apps in Vue. I like Vue just fine, but I don't like that when you define components, you're defining this big object literal with properties that describe your component. Obviously, I like the Svelte approach much better. That's pretty much my history on front-end web development.Before that, I was working in a lot of other languages. I’ve done quite a bit with Ruby. Before that, I was a Java developer for about 15 years. Yeah, but these days it's almost all JavaScript. Although lately, I’ve been starting to dip my toes into some Python, just because it seems to be getting so popular and I felt like I should know something about it.One of the interesting pages you'll see on my blog site, if you go under the Python category, there's a link that says Python compared to JavaScript. That's something that I’ve done very recently. It's a very long blog post, showing side-by-side comparisons of almost every feature of the language. You could see, here's how I would do it in JavaScript, here's how I would do the same thing in Python.[00:31:30] KAK: Wow. Is that style of blogging a way for you to learn about new stuff as well?[00:31:36] MV: It is, definitely. It's certainly a pattern that I’ve fallen into is that if I decide a thing is worth learning, then I’ll really dive into it. I have this innate fear that I’ll forget what I’ve learned, and so I have to write it down. Then after I’ve written it down, I feel like, “Boy, it's such a waste if I’m the only one that benefits from this.” I have to polish it up and put it out in some form, so that other people can benefit from it as well. That makes it so I never can say I’m interested in this thing. Let me look at it for a few days.For me, it's if I’m interested, I’m going to spend two or three months on it and document it well and maybe end up giving a talk on it. I force myself to do that before I’ll allow myself to go on to the next thing, because of that fear that if I don't do it, I’m going to forget it.[00:32:30] AJ: I mean, it's great, because the output of that is fantastic. Yeah, I think I feel like I dip my toes to things too quickly, and so that move between things a lot. I often feel that should be more – that approach you've got there of doing two months and three months is something and really understanding it before you draw your own comparisons is really valuable.[00:32:49] KAK: Yeah. It's interesting, because even for Svelte, I think that's the case. At first, you know the basics. Then I’m going to do an action marketing bit here. Because after a couple of months, you learn about actions and then you get really excited about Svelte. I imagine it's the same for most other things, where there are some features you don't really get as a beginner, but then it clicks and you understand it and you get really excited.[00:33:19] SW: I mean, this blog, I’m still diving into it, but there's so much other very current stuff, like GitHub actions. The way that you use extensions for GitHub, like your GitHub looks totally different from any GitHub I’ve seen. I think there's a lot of serendipity here. The only criticism I have is that you don't seem to have an e-mail sign up, where I can keep informed.[00:33:41] MV: Oh, yeah. I suppose I need to add that. I haven't looked into how to do that. I’ve never been into RSS feeds, or anything like that. Yeah, I should look into that.[00:33:51] KAK: Tiny letter. It's free. It goes out to 5,000 subscribers.[00:33:55] MV: Okay. Tiny letter?[00:33:57] KAK: Yup. It was a startup acquired by MailChimp, but it's free forever. If you get beyond 5,000 subscribers, they'll let you export to MailChimp.[00:34:06] MV: Okay. I’ll look into that.[00:34:08] KAK: Yeah. You even have JavaScript temporal, which is the new API coming to JavaScript. You have a whole thing on this and I was like, I would read this as a blog post if anyone existed.[00:34:20] MV: That's a very recent one that I added the JavaScript temporal part. It was hard for me to figure out what was going on. After I spent enough time with it, a pattern emerged. That's what I’ve documented here. Now it's much more clear to me and I can't wait for this to be finalized.[00:34:38] KAK: What is that?[00:34:39] MV: It's the replacement for things like moment.js and date FNS that will be built into JavaScript. Finally, really good date and time support built in.[00:34:49] KAK: That's awesome.[00:34:50] MV: Another page here I should point out is the Meteor page. I know you're familiar with Scott Tolinski and Level Up Tutorials and the Syntax FM Podcast.[00:35:01] KAK: Yes. He's a sponsor.[00:35:03] MV: He's a big fan of both Svelte and Meteor and combining the two. That got me to take a look at it and see what was really there. Boy, I’m just blown away by that combination. If you go to that page, there's a key benefits link near the beginning that lists some of the most important things about it, the biggest benefits. The use of WebSockets in Meteor is really fascinating as a replacement for what you would otherwise use a rest API for using HTTP requests.It makes it so easy to write apps where you need to push changes out to multiple clients and keep them in sync. Then another really big thing is if you're writing an app that needs user account management where people need to sign up for an account, they need to be able to change their password, all those things. That's just a built-in feature of Meteor. If you combine Meteor with Svelte, you mostly just get that for free.This blog page on Meteor walks through an example of building a to-do list app, of course, because that's what you have to do, but it goes beyond that. It's a to-do list app, where you can sign up for an account and you'll get an e-mail back to verify your account. It's storing all the to-do's in a Mongo database, because Meteor has really great integration with Mongo. It keeps the to-do's separated by user within that same Mongo database. It's just amazing how little code you have to write to get all of that. This blog post goes through all of that using Svelte in conjunction with Meteor.[00:36:40] KAK: We'll drop a link to that in the show notes as well. I really wonder why Meteor never took off, or why –[00:36:46] SW: Yeah, and I’m looking at it. This is Rails for JavaScript. Everyone wants Rails for JavaScript. Meteor is it. I feel the main issue that they had was sticking to their own hand-rolled UI framework for so long, they had one of these.[00:36:59] MV: Exactly. That’s right.[00:37:00] SW: Then also, they have this whole separate other ecosystem, like the Meteor package ecosystem, because they predated NPM, which is something I didn't know when I was trying out Meteor for the first time.[00:37:08] KAK: That’s crazy.[00:37:10] SW: I don't know. What do you think, Mark?[00:37:13] MV: Yeah. I think that's exactly right, that they stuck with blaze for a long time and other frameworks came out, people were interested in those, and so they jumped ship. Then Rest became really popular using HTTP and people forgot about the option of using WebSockets. Now I look back at this and I have to ask myself, “Wait, why are we assuming that it's better to use HTTP?” They just make it so easy. They call them Meteor methods. It's just a JavaScript function you write. You don't write any code to do anything with WebSockets. It just happens under the covers, because you're using Meteor. Yeah, it's great.[00:37:50] KAK: It seems like some of these concepts are coming back in a way. For example, Phoenix for Elixir works the same way, I think. WebSockets and just sending diffs over the –rather than the whole document between pages. It's pretty interesting.[00:38:08] SW: React is also looking into it with React Flight. Probably, there will be a new generation of combat between frameworks when I guess, sockets are back in vogue and when we send diffs.[00:38:21] AJ: Yeah. No, I think I built a real-time trading system for a large oil company, I wouldn't mention the name of. It used WebSockets, rather than Rest for everything. Logging in was about WebSockets as well. It was an interesting experience, because I think that there's just not that level of support for WebSockets. I couldn't just whip out my Rest client and make a connection and see what the payload was and the response. There was no automatic validation, or payload passing. I think that a lot of Meteor methods sound like they built this whole communication protocol by themselves that wraps WebSockets. I think that when there's a mainstream, one of those available off the shelf that might bolster the WebSockets becoming a omnipresent is Rest.I think, I don't know of one. Maybe there is one I haven't looked very hard into it, but I think that would be a massive factor in WebSockets becoming more mass adopted than they used to be, something that's not socket AI, which obviously is quite large, quite unwieldy.[00:39:16] SW: I don't know anything about how it's handled on the server side, but don't you have to keep the socket open, which means that it's hard to scale?[00:39:22] AJ: Yeah, you do. It's a one-to-one thing, isn't it? Several sockets are quite rare still.[00:39:28] SW: That would be why.[00:39:32] KAK: All right. Any last few questions?[00:39:35] SW: Yeah. I have a topic to end things, if no one else has any questions.[00:39:39] AJ: Sounds good.[00:39:40] SW: Yeah. Mark’s quotes seem pretty important to you. They're plastered all over your blog. Could you talk a little bit about why quotes are that important to you and do you have a favorite one and what that means to you?[00:39:51] MV: I think it's just providing some motivation for me. I see a lot of people that run their lives in a way that doesn't match up with the quotes that you're referring to that are on my blog post. If you click on the quotes link, you'll see them. Most of these are quotes from other people. There are a few that are just my own quotes. Like the very last one, “Respect the distance. Do the work.” That one is related to the fact that I’m a marathon runner and I see people sometimes thinking that a thing maybe is easier than it really is and not willing to put in the work to get it done. Obviously, doing something like running a marathon, there's so much training that comes before the actual race that you need to respect how hard it's going to be the distance and putting the work ahead of time to get the result that you're wanting.The same thing is true of software development. I know that people don't want to have their entire lives be studying software development, but I find that if all you're willing to do is put in eight hours a day, it's going to be really tough to progress and learn some new things. Certainly, you don't want to run your life by just always studying software development. There's a distance to learning things and you need to do the work to get the results that you want.Another quote that's in there, “Don't be a dabbler. If you're going to do something, do it well.” That relates to what I was saying about how I try not to allow myself to just look at something briefly. I don't want to dabble in something. If it's worth doing, I want to do it well. Then I’ll move on to something else after I’ve done it well.Yeah, so those are quotes that I put in from myself. There are a bunch from Michelangelo that are in here and one from Theodore Roosevelt. My daughter gave me a birthday card one year that had that Theodore Roosevelt quote which says, “Far better is it to dare mighty things to win glorious triumphs even through checkered failure, than to rank with those poor spirits who neither enjoy much, nor suffer much, because they live in the gray twilight that knows not victory, nor defeat/”A summary of that is you need to work on some hard things and you might fail. That's better than not trying. It's better to dare to do some mighty things. Try even though you might fail. That's also true of software development. Some things are really hard to learn, but doesn't mean you shouldn't try.[00:42:25] AJ: It's interesting. I noticed, sorry, on your blog, well you're on your homepage rather, you've got a link to English buried in the middle there and how you change the English language. I think that's interesting, because it goes along with what you're saying about you write very concisely and very tersely. It's because you just leave off words that aren't redundant. Then if you've read the book, I think it's called Troublesome Words by Bill Bryson. He's written an entire book on this exact subject that people say lots of redundant fluff that doesn't need to be said, because it's obvious. It's implied in the sentence.This is very similar writing to that. It's very interesting. Yeah, tell me whether or not you like cheese. Well, don't bother with or not, because it's possible that you might not. It's implied if you like it, if you don't then you don't like it. It's interesting.[00:43:14] MV: Right. Exactly.[00:43:16] KAK: I need to read that book.[00:43:17] AJ: Yes, good book.[00:43:20] KAK: All right. I guess, that's it. Do you guys have picks? Can be anything?[00:43:26] AJ: I do.[00:43:28] SW: I didn't think about picks. Oh, so Mark, we end the episode by just talking about things that we've enjoyed, or things that we recommend. Then we always look around our desk for – [00:43:41] KAK: Because we always forget it. Yeah.[00:43:44] AJ: I have three picks on my desk. This is great, actually.[00:43:47] SW: Go for it. Go for it. Go for it.[00:43:50] KAK: Let’s hear.[00:43:51] AJ: My pick from last week, did I talk about the Garmin GPS unit?[00:43:54] KAK: Yes.[00:43:55] AJ: I did. Right. Good, because that's on my desk and I wouldn't have covered that. I’ve got to pick this instead. Then this is my pick. This is and people listening to the audio have to see it, but this this is a tiny little computer on a stick that can run things, like Windows, because it's a proper Intel processor. It's not a Raspberry Pi that has an ARM processor. Obviously, you would never use it over Raspberry Pi, because it's slower, it's more expensive and fundamentally, only if you want to run windows or something.I think it's actually, it's some low-end Intel processor. It's got 2 gigs of RAM. It's got some on-board SSD storage, but it's got – it runs off a 5-volt USB, single USB and it plugs into any HDMI port, so you've basically got a monitoring keyboard, plug the USB in there, done. It's got a tiny little fan in it, because it gets quite warm, because it's got a non-efficient processor in it. It is perfect for browser testing. I can actually keep it running in my house all day long with almost no power usage at all. It's relatively silent, because the fan's tiny, only spins up now and then. I just think it's dead useful, if you need to do anything Windows locally. I don't use Windows locally, so I don't have a Windows machine apart from this. It's perfect for that thing. I think that my pick is just the handiness of having a pocket-sized windows machine on hand when those rare occasions, I won’t have to boot into Windows to do something.[00:45:17] KAK: Nice. I didn't know there were stick computers. That's pretty amazing.[00:45:23] AJ: I just googled it one day, because I thought this is what I want and it exists.[00:45:29] KAK: Yeah. All right, Mark you have a pick here.[00:45:32] MV: Yes. I was planning to make my pick be Meteor, but I’ve already talked about that a lot. I could have also picked the JavaScript temporal library, but we've already talked about that.[00:45:44] SW: I’m sorry.[00:45:46] MV: I will pick Jupyter Notebooks. As I’ve been diving into Python, that leads you into looking at Jupyter Notebooks. It's just fascinating. In general, the idea behind a Jupyter Notebook is that you've got this vertical series of cells and each cell usually either holds markdown, or it holds a snippet of code. You use this for experimenting with different things in a programming language and the markdown is there to document what you're doing.In the case of Python, you might have a markdown block, then a Python block, then another markdown block, then a Python block, but all the code blocks are really part of the same bit of code. If you declare a variable in one block and then you can use it in a subsequent block. Then later, you can export that as one Python file and run it as one program.Well, it turns out that you can also use JavaScript with this, so there's a node.js kernel that you add to Jupyter. Then those code blocks can be JavaScript, instead of Python. Also, recently VS code added support for Jupyter Notebooks. A Jupyter Notebook is just a JSON file. If you open it inside VS code, you can do the same things right inside VS code. Those code blocks when you execute them, it shows the output of that bit of code right below that block. It's a great way for experimenting with code, like a REPL, but even better because of your ability to split up the code into separate blocks and insert those markdown blocks. I highly recommend taking a look at Jupyter Notebooks.[00:47:24] AJ: Sounds good.[00:47:24] MV: I dropped a link in the chat of my documentation of what I’ve learned about Jupyter.[00:47:31] AJ: Cool.[00:47:32] KAK: All right. Shawn, what is this? I don't like this. No, I’m just joking.[00:47:37] SW: I was going to say, I love how you write down your learnings for everything that you come across. It's something that I really like learning in public, but I think you are a master at this. I’m just very impressed by your blog. I would also recommend, have you checked out observable, since you are a fan of D3, Mike Bostock who created D3 also created observable, which is Jupyter, but for the JavaScript ecosystem?[00:48:00] MV: Yeah, I have seen that, but I haven't learned how to use it yet.[00:48:03] SW: I mean, from what I could tell, it's exactly the same as a Jupyter. Just that itself hosts the JavaScript so you can just interact with it while it's running. Yeah, cool. I’ll go next. Tailwind is a CSS library, which it seems like Kevin is not a huge fan of. Rich is also not a huge fan. I don't know why it's so hard. I should probably write a blog post about why Tailwind and Svelte go together. It might seem like an odd choice, because Svelte obviously has scoped CSS next to it. Even with those benefits, I think Tailwind comes with it.They've recently been picking up in terms of their commercial efforts and they hired a new developer, Simon, who got me started on this whole journey. He just put out a YouTube series detailing what's new in Tailwind. It really gives you the taste of what it's about, like what the benefits are. For example, imagine adding animations just by adding a single class name. If you need something to bounce when someone's hovering over it, or for example with Svelte, when you do it like a class binding to that class name and it's an animation, typically in CSS, you'd have to do a bunch of keyframes here and then put the animation on the thing. Then with Tailwind, it’s just a single class name. I think those are really good examples. He launched a series of 12 YouTube videos. Very short. Takes half an hour to go through them to see what's up in Tailwind. That's my pick.[00:49:26] MV: Yeah. I should watch those videos, because I haven't quite come onboard with Tailwind yet. Maybe I can if I watch the videos. For now, my hang-ups are that I feel like if I’m going to add a bunch of Tailwind classes to an element, right away I’m making the statement that there's nothing else in my app that wants that combination of things. I’m opting out of sharing that, because I’ve said, “No, this is specific to this one element.” I need to figure out how to get over that if I can.Then the other is that when I’m looking at a Svelte component, I feel like if it's just HTML, I can clearly see the structure of this thing that I’m building and it's not clouded by a bunch of CSS classes being added to it. I feel like, if I move everything out of the style block onto the HTML elements, now the structure of my HTML isn't going to be as clear to me. Those are my current hang-ups.[00:50:21] KAK: Yeah. I think the one thing I have against Tailwind isn't so much how it works. It's more the support overhead that seems to come with it. A lot of people seem to have troubles integrating Tailwind into different projects, because you have to use the purge thing, the auto, what's it called? Post CSS –[00:50:41] SW: Which is built-in to Tailwind now, so it comes by default. No config.[00:50:45] KAK: Yeah. Some people, or at least from my point of view seem to have a problem getting this to work correctly and then they show up oftentimes in the Svelte discord to ask Tailwind-specific questions. It's like a negative feedback loop for me. Sure. Gets to my irritating –[00:51:03] SW: I don't want to make this a Tailwind discussion. I’ll write a blog post. I have responses to all of these.[00:51:08] KAK: Yeah, cool.[00:51:08] MV: That'd be great.[00:51:10] KAK: Yeah. All right, so my pick. It's Svelte Summit. It's just a couple of weeks to Svelte Summit, I think three weeks or so? Yeah, it's really exciting. We have some super interesting talks coming up. Three of them announced so far and when this airs, a couple of more, yours among them, Mark.So far, we have Elderjs and Penguin’s REPL talk. Then also, the one that I’m super excited about, the Cloudflare worker talk by Luke seems super interesting. Yeah. That's it.All right. Thanks for coming on, Mark.[00:51:47] MV: Yeah, thank you so much for having me.[00:51:49] SW: Hang on. I got to do one of these. The audience has been very kind, very quiet throughout the whole recording, so they came in. [Inaudible 00:52:04].[00:52:06] AJ: It's become to sound very strange that now, because actually showed on my screen, you're frozen completely and you have been for a while. It sounded almost like water pouring off a roof. It was very odd.[00:52:17] SW: I think I picked the wrong sound. This one's better. This one’s look more clapping.[00:52:22] AJ: Yeah.[00:52:22] SW: More true.[00:52:24] AJ: It’s more recognizable.[00:52:27] KAK: On that note, that's it for this week. We'll talk to you in a couple of weeks again. Take care, guys.[00:52:33] SW: Bye.[00:52:33] AJ: Thank you.
10/1/202052 minutes, 30 seconds
Episode Artwork

Performance on the web with Houssein Djirdeh

Houssein Djirdeh joins us to talk about performance on the web. We touch on a lot of different topics like bundle size, framework size and much more.Sponsors: Level Up Tutorials brings you cutting-edge, focused & high quality video tutorials for web developers and designers. Support the show and check out the Svelte For Beginners as well as Sapper for Beginners courses. You? Svelte Radio is currently looking for another sponsor! Send me a message at [email protected]. Links: Perf Track Google Lighthouse Lighthouse Tooling Report HTTP Archive smaller-npm-packages Nicole Sullivan: Design Systems, Frameworks and Browsers Picks: Kevin: MX Vertical - I was talking about forearms, not underarms 😭 Shawn: YouTube Premium Houssein: Dark Sky Antony: System76 Laptop Transcription:[00:00:00] KA: Hello, everyone. Welcome to another episode of Svelte Radio. As always, we’ll start with introductions. I’m Kevin, and I ran a site called Svelte School where I teach people about Svelte as well as other fun stuff around the web. Yeah.[00:00:16] SW: Hey, everyone. I’m Shawn. I work on, I guess, on a bunch of things, but currently I’m a senior developer advocate at AWS. [00:00:24] AJ: Hey, everyone. I’m Anthony. Yeah, I also work in a bunch of things, but I can only run my own startup called Beyonk, which I’m the CTO. And I’m also a Svelte maintainer. [00:00:34] KA: Awesome. So, today we have an awesome guest on the show. Can you introduce yourself? [00:00:40] HD: Yeah, absolutely. My name is Houssein. I am a web developer advocate on Google, on the Google team. So I work with Chrome, but I also work in the focused web as a whole.  [00:00:50] SW: That’s awesome. It’s kind of my idea to bring in Houssein on the podcast, because I thought he’d be a good guest. Houssein has basically dabbled in every framework ever. I didn’t know you started out in Angular actually, but I dug through your blog and I was like, “This guy did Angular?” I first met you at Boston, React Boston, where you gave a really good talk that turned into this kind of semi-viral blog post on React performance. And now you’re dabbling in Svelte, and then between you and your twin. You cover all the frameworks. I think that’s a strategy somewhere. So, yeah. I mean, I figured you’d be a really good guest, because you have a cross-framework perspective that most people don’t. [00:01:30] HD: Yeah. No. Thanks for having me. And I’m glad you mentioned that, because I like I’ve never actually properly used Vue, but my twin brother hasn’t. He’s been really involved in that space [inaudible 00:01:39].[00:01:41] KA: So you started out with Angular. So, can you like talk us through the history of like the frameworks you’ve used? [00:01:48] HD: Yeah. Yeah, for sure. Absolutely.  I only gone into web development about 4, 5-ish years ago. And that happened right after I graduated from university. I was in my first job and I was just trying to get my footing and like my first sort of role. And then I sort of joined the web development, and we were building a pretty large insurance platform. And we were using AngularJS. And this was pre-component AngularJS. So we’re talking model view controllers. We’re talking root scope, and bindings, and dependency injection, and services. So that was kind of my first hurrah into the frameworks world, which is interesting, because I think we see a lot of discussion on Twitter and the like about how a lot of people think it’s better to just first understand JavaScript, the basics of JavaScript before you jump in to a framework. There’re a lot of other people who think it doesn’t really matter. Learning is learning. I think that for me was a forcing function for me to just learn JavaScript, because I had no idea what was going on in the beginning. So I felt really lost for at least a few months. Funny story, it was me and my twin brother at the same job sitting side-by-side working on the project for a year. [00:03:02] KA: I can really relate to getting forced to learn JavaScript by doing frameworks.  [00:03:08] HD: Right? Exaxctly. [00:03:08] KA: Same thing for me. Yeah.  [00:03:09] HD: Right? Exactly. But I think after a few months, I started actually also spending some time learning JavaScript on my own, but also trying to understand how AngularJS worked. Like things started clicking and I was like, “Okay. Wow! Now, I can see why it makes sense to use a framework.” And then from then on, it just kept growing where I tried dabbling in Angular 2 when it was brand-new and I started learning how to use Angular 2+. And then about a year after that, I started using React. I actually started using React Native before React, because I was like it might be cool to just build a mobile app, and I had an idea for a mobile app. So whatever time that I had in the side, like I was still doing my day job, but I would go home and I was like, “Let me try to build a mobile app.” It took a long time. I did it and it’s super cool. And then I only used React for the web after I used React Native, which is I think an interesting direction. But I think it was also cool took, because it actually showed me how the framework worked.[00:03:59] KA: Yeah. Most people usually do it the other way around, right? They start with React, and then React Native. [00:04:04] HA: Exactly. Exactly.  [00:04:05] SW: Yeah. Well, you wrote the book on React Native too. That’s fun.  [00:04:09] HA: Yeah. So I worked with Devin, who at the time was at Airbnb, but now he does freelancing and a lot of contracting work. And then I worked for They’re a publishing company. But I wrote an Angular book with them first. So like a modern AngularJS book. Yeah. And it was an interesting idea at the time, because Angular 2+ is already out. And, Nate, one of the main organizers in the publishing company was like, “Maybe we should actually talk about actually building AngularJS apps using all the new tooling in AngularJS ecosystem.” How do you build component AngularJS subs? How do you migrate to Angular 2+? It’s a very interesting idea, and I actually saw the merit behind it, because I’ve seen large AngularJS apps in a lot of companies I’ve worked with, and they’re just trying to figure out what to do with it, right? So I did that first. And then when I actually started dabbling with React Native for a bit, we talked a bit more and we’re like, “Hey, maybe it might be good to have a React Native book.” And then I also introduced to Devin, and then there was Sophia and Anthony, a few other cool authors, which is nice because I wasn’t only the person writing that book. It’s always good to have some extra hands. But yeah, that was a great experience too.  [00:05:14] SW: Obviously, I’ll be using Angular 1 as well. Is writing Angular 1 to 2 pretty much just rewrite everything? Or is there a better way?  [00:05:23] HA: Yeah. I think that’s a great question, and I think it honestly depends what state the AngularJS app is in. If we’re talking about Angular 1.3 where it’s all model, new controls, then yeah, it’s going to be a very hard shift. But if you’re using one of the later Angular 1 versions, which are already using components, I think that transition is going to be a lot easier. It’s still going to take a lot of work, but I think it’s just having that. I think the book that I wrote kind of also try to describe that. It really depends what state and what version of Angular 1 you’re using. [00:05:53] SW: And it depends I guess on having good architecture in the first place, making the right decisions, I suppose.  [00:05:58] HA: Exactly. [00:05:59] KA: So, after React, where did you move? Or are you still stuck in React land?  [00:06:05] HA: Yes. I was working on React, and at that time I was working at a company called Rangle, which is based out of Toronto. And they’re sort of a dev agency, dev consultancy. So I worked on many different projects that used React, a few projects that used Angular. It was nice to actually shift around and just play around with different frameworks depending on my project. I’ve always wanted to just try to Vue. I guess never got the chance to. So I kept doing that. Then I joined Google about a year after in that company, and the role at Google that I had that I mentioned was I’m a developer advocate, which is not your typical software engineer. And for anyone listening who doesn’t really know what a developer advocate is, every company I think has slightly different definition of a developer advocate. But they’re essentially engineers, but they act as a bridge between the core engineering team that are building a project, building a tool, and the community. So if there are new APIs coming out, new features coming out, how do you make sure those are being assessed properly? How do you make sure that developers that use those features know how to use them? What if they have feedback? How do you bring them back and so forth? I also think it’s very different say you’re a developer advocate for something like the web, right? Because we’re not pushing a product. I don’t go around trying to push Chrome. No one in my team does, which is good. So I think that’s also different. So my focus on has been primarily just speed and performance. How do you make sure the web as a whole improves in terms of speed and performance? And the nice thing that I think I have is I joined the team from the Angular frameworks. So it’s more so like how do we make sure we have perform in React apps? How do you make we have perform at Angular apps, and Vue apps? And something that I’ve been doing for the past while now is I’ve been trying to measure and just see the usage of all sites that use frameworks? How expansive is framework usage in the wild? And if we can prove that let’s say billions of page loads every week around sites that use frameworks. I think it’s a very clear cut evidence that we improve these frameworks. We end up improving the web as a whole, right? [00:08:03] SW: Yeah. To me, this is kind of like a very notable shift. Honestly, that time I met you in React Boston was the first that I even knew that there’s this sort of new direction. I don’t know if it’s actually a new direction. But as far as I understood, basically, Chrome hired Nicole Sullivan to lead and embrace the frameworks, because previously Chrome was very much like use the platform and all of you framework people are just wrong. And it seems like Chrome is a lot friendlier. I don’t know if it’s Chrome or I don’t know if it’s Google. Google as a whole is a lot friendlier to frameworks than maybe there years ago, which has been awesome to watch and it enables people like Hussein to actually work on cross-framework initiatives that improve the overall performance of things.  [00:08:45] KA: We’re going to talk about one of those projects that you’ve been working on, the PerfTrack. I don’t know. Would you call that a website or a project?  [00:08:54] HA: Both. Web app, I guess. Yeah. Website. [00:08:57] KA: All right. We’re just going to take a small break for a sponsor spot, and then we’ll be back with more on that. [BREAK][00:09:04] KA: Are you looking to get better at building websites in Svelte? Well, you’re in luck. Level Up Tutorials has tutorials on how to get started. Scott is an excellent teacher and has courses on a broad range of web development topics. So, if you want to support the show and learn Svelte at the same time, check out the Svelte for beginners and Sapper for beginners courses at[INTERVIEW CONTINUED][00:09:29] KA: So, performance track, what is it?  [00:09:31] HA: Maybe a little bit of background before I talk about that exact app. Actually, at the time of React Boston, that was when I kind of wanted to just get some data on how many sights that use React and how well were they performing. And I thought it’d just be a good slide, it’ll be a good data point. Shawn, I don’t know if you remember. I had one slide in my presentation that just talked about, I think, the number of React sites that have a certain JavaScript byte percentage or percentile. I don’t remember the exact numbers. But I just thought it’d be a good thing to just sort of talk about how, “Oh! X% of React sites are doing this in terms of performance. There’s room for us to improve and grow.” So I was just looking for ways to actually do that. I was looking for where I can get this kind of information from. And then there’s this project called HTTP Archive that initially was built by, I think, I few Googlers working on it. And I think Steve Souders was one of the original authors. And now it’s a pretty large initiative. Many Googlers and even external community members are working on it. And the idea behind HTTP Archive is it’s an open source attempt to track how the web is built. And what it does is it actually has a massive pipeline where tests and crawls, millions of URLs every month. Now, I think we’re looking at 5 to 6 million URLs. And then it’ll store data on them, all kinds of data. And it does that by running different tools on them. So, webpage test is one of them. It runs Lighthouse on these pages as well. And the nice thing is it just has this massive dataset where anybody, it’s completely public. It’s free to use, and anybody can download and just look into these datasets themselves. There are different ways to do that. One way that I’ve been trying to do that is by using BigQuery. It allows you to run pretty simple queries to just run complex operations. And I was doing that, and that’s when I started getting some data in React. How many React sites exist in this 5, 6 million dataset? How well are they performing? How many data of bytes are they shipping? And I just wrote this super simple Google Doc that has this information for React and a few other frameworks. And I just shared it with a few Googlers internally. And then a massive sort of thread started where people were super interested in seeing this information and they were like, “Wow! This is really interesting. We had no idea about the scope of size of these frameworks.” We don’t even know like how well they’re performing. And then I realized, “Okay. This is a big bigger than just a one-page Google Doc.” Because then I was just thinking of ways of now how can I visualize the data? [inaudible 00:11:55]  data in my mind. I was using that in talks like React Boston. And I just didn’t know exactly what was the easiest way for people for anybody to sort of see this information, right? So I’ve had this idea of maybe I can build this dashboard type of site. I spent a while coming up with the name. Ended up with PerfTrack. Obviously, it’s not the best name. But at this point it’s too late. And I just an idea of like what if I can just visualize this data in some way? Also make it possible for people to just pick different months, because HTTP Archive crawls happen every month. And then what if they can just start seeing friends in this information, right? What if, for example, Angular, Vue, Svelte, so forth, the authors and developers of these frameworks, what if they can actually start seeing how sites that use these frameworks are performing? And what if they can also see patterns? Let’s say they noticed X% of their sites are performing poorly in one aspect? Maybe that’s for a specific reason. Maybe there’s something that they can do about that. That was the idea of PerfTrack. I built the initial version about a year ago also with Svelte. Didn’t look like anything it did right now. It was like a weekend project, and I just wanted to get something up and running. So it had a significant amount of issues, but I just have something up and running. And then I kind of shelved it for a bit. And then I came back and I was like, “Okay. I think now is a good time to just clean it up and make it public.” And I did that. And I think the one thing that I was really hesitant about was even though all the data is coming from public data sources, which is HTTP Archive and Chrome user experience report, I think I was just super hesitant to have it out in the world because I knew once I did that, people are going to immediately start looking into it and start seeing things like, “Oh, framework X is performing a lot better than framework Y on this aspect. I think framework X is a better framework. This is the framework to use.” And I think that’s just a very unfair judgment to make, right? Looking at a certain number doesn’t mean that a framework is at fault, right? People use a framework or using a million other things. And so I wrote an about page. I try to emphasize that significantly enough. I still get that sentiment time-to-time. But I think it’s natural. As humans, when you see numbers and you just start comparing, you’re bound to do so. But it’s something I’ve been stressing quite often. Yeah, it’s up and running. There’ been a few contributors already actually adding and helping out. Right now what it does is there’s I think about 6 or 7 frameworks at the moment, and it shows some core information from HTTP Archive, like what are the JavaScript byte percentiles? For example, at the 50th percentile, how many bytes or React sides shipping? And it does it for total bytes and image bytes. And then I’m also using Chrome user experience report, which is another data source. And this comes from Chrome’s internal metrics pipeline. That actually tells you real user information. Like user metrics, like how are users experiencing first [inaudible 00:14:37] paying your site? How long does it take them to see the largest element in your site? Are they seeing any layout shifts? And that’s all real information. We’re like we’re not just looking at lab data. We’re looking at how real users experience it. So, there’s a section of the site that does that too. There’s like 6 or 7 metrics where I show that information. But yeah, there’s an initiative called web vitals core vitals, which actually only happen about – I think we announced it about 6-ish months ago. And the idea is we have all these metrics we’ve been telling developers to look at and authors to look at for a while now, right? A lot of people in Chrome are very heavy on these important metrics. Not just Chrome, other browsers as well. But we sort of had this initiative to group these key metrics into one thing. For example, when we say core vitals, we mean three metrics; largest [inaudible 00:15:21] paint, first infra delay and [inaudible 00:15:24]. The reason why we have that is we think that that’s a very good characteristic of performance. You’re not only looking at just paint times. You’re looking at other things, like layout shift and how it takes for the user to interact with your page. And even though that that might change in the future, the metrics might change in the future, the initiative is here to stay. So, there’s a section on PerfTrack that actually show these vital metrics. And I think that’s also for people to see. [00:15:47] AJ: I don’t know if this is a thing that you know or not, but there’s a notion that the service worker now doesn’t really contribute to the Lighthouse score anymore. There someone telling this morning that it’s become less important.  [00:16:02] HA: Yeah. Actually, I’m not super curious. I don’t know if there’s a specific audit that looks for a service worker. So maybe I think he or she was alluding to that, where maybe previously they were talking about a certain audit that suggested using a service worker. And now that specific audit is not doing that anymore, and I think that might be the case. I’m not 100% certain. So I’d double check. Yeah. In terms of performance, like looking at the performance scores, I think using a service worker or not, there’s no specific flag that will show up. It might improve your performance numbers. And if it does, the number would just be better. [00:16:32] SW: Cool. It makes sense. So I’m on this site right now. You can toggle between the frameworks. But in the category section, you have the overall framework, and then there’re the meta-frameworks on top of the frameworks. And I you toggle between most of them, you’ll see that, basically, adding like a static or server-rendering layer improves all the metrics across the board. It just like shifts all the web vitals to the right. [00:16:54] HA: yeah, exactly. And I think that was one nice thing to sort of see, right? We always have these discussions, a lot of people do, about does server-rendering help? Does having meta-frameworks with all these additional tooling by default, like automatic code splitting, static rendering, does all that help by default? I think it’s just nice to see some data. Again, there’re I think a lot of caveats to mention, like the sample size is different, right? When do you kind of filter like React and NextJS? I think there’re always a lot of those things that might mind. But, still, looking at the overall data, it’s still interesting to see how that number actually shifts when you pick a meta-framework over just using all of a certain framework like React. [00:17:30] SW: I have a question about, I guess, the metrics. So, to you it might feel like you’ve been advocating for this for a while, but I feel like the messaging especially on the new metrics, like I guess first [inaudible 00:17:41] delay, and cumulatively, all shifts are like the new ones. That really only picks up like in the past year or so. But I think Nicole, in some of her talks, and I think she did like a tour of conferences last year. So, one of the issues that we have in the framework land is that we definitely take a hit in terms of load time to load more data so we can do client-side browsing, side? Nicole is basically saying we don’t have a metric to do the tradeoff between like, “Okay, we’ll load more stuff in on the first load to make the subsequent loads much faster.” Or is the idea that everything should be async anyways. So we will just like chop it off. What’s the thinking behind that? [00:18:20] HA: Yeah. No. I’m glad you brought that up. Even like in PerfTrack, right? It’s great to see things like paint times. But just like you said, Shawn, when you’re talking about something like using a client-side framework that has client-side routing, we miss a really important aspect, right? The fact that when you have your JavaScript bundles hydrated at the beginning, just navigating between pages, doesn’t need a new document, right? It doesn’t need a new server interaction. I think that’s just really important if we’re talking about buffering works in general. That’s a tradeoff you get from having a large JavaScript bundle to begin with. That’s a really missing blind spot right now in web vitals, in core vitals and metrics in general. Nicole is super invested into that, which is awesome. She’s been doing a great job. It’s so nice to have someone like her and other people in the team that are just thinking of that from the lens of frameworks, as well as just sites that client-side routing in general. So that’s a really missing blind spot right now.But the good news is Nicole and a lot of other people as well on the Chrome speed metrics team are looking into it like actively. I think it’s one of the higher priorities right now. And it might take some time, but it’ll be hopefully in the near term, not in the very long term. We might start seeing things we can use to actually measure, right? And then it’ll be nice to actually look at that and just compare and be like, “Oh! You’re using a framework. Yes, your first paint times might be slow. But you’re getting a lot better in terms of client-side navigations.” One thing that we’ve also been doing in the Chrome team, like we have a small sub-team that have been working on improving frameworks itself, and we’ve been working a lot with the NextJS team, trying to see if we can have that framework improved significantly. So one thing that I did was I actually added some performance marks and measures into NextJS’s routing framework. I just had like sort of a custom identifier so people can actually now measure. And if any NextJS developer could extract that information themselves for every route change they make, but it’s just NextJS specific, right? How do we scale that now? Do we do that for every framework? Every other router? Do I jump into React’s router? Add marks and measures? We could. But we’re also thinking of ways to just have it in a high-level instead of trying to do it for every single routing library and framework that exists, right? [00:20:28] KA: Makes sense.  [00:20:29] SW: Yeah, that’d be awesome. Yeah, I think image, especially for a cumulative layout shift, the image place holder, whatever you call it. Every framework is going to have to have an image component. Gatsby has had this for a while. [inaudible 00:20:41] some PR to NextJS. It seems like it’s a really good thing to have. Yeah, I think we need some primitives at some higher level. I don’t know what that looks like. [00:20:52] HA: For sure. No. That’s a good point. Yeah. It was Alex, Alex Castle who I think opened up the RFC on NextJS [inaudible 00:20:58]. But yeah, it’s super nice to see some core frameworks doing this. But I agree. This might also just mean, right? Like if every framework is using a clone like that, maybe we can have something at the web level that could do this, right? [00:21:12] SW: With image lazy loading, right? I haven’t actually used it, but doesn’t it do that? Doesn’t do that already? Like why do we need a separate component?  [00:21:20] HA: Yeah. So, we do have – Yes, we do have an API now to natively lay and load images. So instead of using third-party libraries or running APIs like intersection server, you can just have a loading attribute in any image. Loading lazy, and that’s it. So that’s super. When we announced in a launch, it was great. I think the feedback is super useful. A lot of people had some interesting feedback about what are the thresholds? Can we control how like as the developer, right? I think that now fine-grained control is not available yet, but at least the functionality is there. So I think the image component, it does lake lazy loading, but it also looks into a lot of other things. It looks into image sizing and responsive images. It looks into having an appropriate place holder. The thing is a lot of things that an image component and a framework like NextJS could do. And the idea I think behind Alex’s proposal is, as a developer, I wouldn’t need to worry about any of these. I just want to have my image, define my image, and then let the framework take care of all of it. So, lazy loading is one thing, but there’s just a lot of other aspects on top too. [00:22:21] SW: Yeah, lots of features. It makes me compare it to React Suspense as well. They intentionally released it without any [inaudible 00:22:30]. Like it was just like a Suspense component, only for loading components. But a lot of people actually want more features. It’s just that we don’t want to release that yet, because we don’t know what it looks like. So I kind of compare it that similar API design. I don’t know. I like API design. [00:22:44] HA: Yeah. No. It’s a good way to think of it too, for sure.  [00:22:47] KA: So, going back to the data on the site, what kind of conclusions can you draw about frameworks, and specifically – [00:22:57] SW: Why is Svelte the best?  [00:22:59] KA: Yes. And React, to be honest, right?  [00:23:05] SW: Svelte is doing very well. [00:23:06] AJ: I have to make an observation here. Because we started, Svelte has – The split is really weird on Svelte. So, most the application, like two-fifths are really small, and then one-fifth is really big. And everything else is in between. And it’s weird and it makes me think that maybe there’s a bunch of people using Svelte because it’s just like super compact and small. A bunch of people are using it just because it’s really nice to use and it got a good DX. But when I was thinking about this through, I think that one of the things I thought was maybe it’s just because there isn’t as many huge sites, like massive like the Airbnbs using Svelte yet that may be that results from a little bit weight in terms of there’s a lot of hobby projects out there, which are quite minimalistic. And maybe it’s not quite the split that I think it is. [00:23:51] SW: I also wonder about double counts. Like what if a site is using two frameworks? Like in mid-transition?  [00:23:56] HA: 100%, yeah. Anthony, also, that’s a great point, right? I think if you just think of it as from the perspective of a typical developer working in a large scale or a medium-sized company or whatever, and they have to build, I don’t know, an application that’s going to last two or three years. I’m sure having those discussions, they’re probably like, “Should we use something like Svelte?” And then when they look at the examples, they’re probably, “I don’t know, but it’s worthwhile. Maybe let’s use React.” I 100% agree. I feel like we definitely need to keep thinking about that too, right? That queue matters. We’re comparing small hobby projects from tech savvy developers who want to try something new versus these large scale method apps, right? So that definitely matters. Also, if you look at Svelte and PerfTrack, the sample size is tiny for I think a number of reasons. One of them being I don’t think there’s a very easy way to detect Svelte, right? So, all these tools here, they rely on some detection methods, right? And unless I know for sure that detection method is super bulletproof, like I’m hesitant to add.  [00:24:54] AJ: How is it detecting Svelte, by the way?  [00:24:57] HA: Right now, it’s actually looking for, I think, spell dash class identifiers.[00:25:01] SW: That’s pretty good. That’s pretty good.  [00:25:03] HA: I’m sure it’s good. I’m sure it’s probably maybe – I don’t know if there’s going to be a false-negative. I’m sure there has to be at least. But I think that’s probably the best way now, right? That we have now.  [00:25:12] AJ: Yeah, right now. Yeah. Yeah, I mean, there was a feature request to change that to be able to change that prefix. We haven’t implemented it yet, but – [00:25:18] HA: Really? I didn’t know that. Okay.  [00:25:21] AJ: It might [inaudible 00:25:22] results. [00:25:23] HA: That might definitely change things.  [00:25:26] KA: I’m looking at like the datasets that are available. So you currently have two datasets per framework, right? If that makes sense, April and May. So are there any plans for adding future months or past months at this point, I guess?  [00:25:41] HA: Yeah, yeah. Absolutely. Yeah HTTP Archive and Chrome user experience where they generate new datasets every month. I’ve just meaning to get the tenth and the time to do so. But I will be adding all the newer datasets. And the idea, what I’m hoping is after your – However long, anybody can use the site and just sort of see if things have changed, right? Month, to month, to month. I think that is just super useful thing to see, right? As a framework author or a developer, just to see the actual changes in the ecosystem. Yeah. No. I definitely plan on adding new ones. I think the one thing I do want to mention too is like these crawls happen in the first of the month, but the data becomes available I think around the third week of the month. So it’s going to be staggered a bit. But eventually I’m hoping to always just have every month there and we can always just look back and use it as some sort of canonical resource of how well framework sites are doing, or they need improving.  [00:26:36] SW: Is there a room for folding these projects into HTTP Archive? Because, I mean, it’s kind of – Like HTTP Archive also has some other metrics and then it also tracks them overtime. Googlers kind of own it. Is there a path there? Or are they just completely separate? [00:26:53] HA: Yeah. So when I built PerfTrack, I was kind of just built it from the standpoint of, “Oh, this is HTTP Archive.” But kind of like my visualization take on it. Like I just wanted to have some certainty of points. And you’re right, because if you look at HTTP Archive’s website, there’s a bunch of different reports. There’s like a state of JavaScript or a state of images report, and they just show some nice high-level graphs on some data points. It’s kind of doing what PerfTrack is trying to do on a lot of other things, which is super cool [inaudible 00:27:21]. So I did have the idea of maybe eventually maybe it could be cool – I don’t know, state of the frameworks report, right? And PerfTrack doesn’t have to be its own thing, and it could be something that just lives in the HTTP archive website. And I’ve been talking a lot with Rick [inaudible 00:27:35]. He actually helped a lot help me build PerfTrack, because he’s built a lot of similar tooling. I don’t know if he’s made public yet, but looking at CMF platforms. How a lot of site is using WordPress is doing? How well are sites using Shopify doing? And so forth. [00:27:48] SW: Oh! That’s important. [00:27:49] HA: And that’s super important.  [00:27:51] SW: Wix.  [00:27:51] HA: Wix. Yeah, Squarespace, and the list goes on, Magento, GRPL. But I think we’re both now talking about it’s cool that we have two separate things, but maybe we should combine them, right? Like combine efforts. I think people would love to see all that information. [00:28:04] SW: For sure. Probably reduce the individual lift for you as well, especially like manually syncing. Another similar sort of initiative that I kind of compare this to is, which was also cross – I guess, cross-tooling, like a little bit potentially political. But they put a single number under every logo. And it kind of makes it a little bit of a contest. And I know you wanted to be very sort of like, “Yes, there are many dimensions on which like a framework can be evaluated.” But would you attempt it to reduce everything down a single number?   [00:28:41] HA: I really would. I can lie and say I’m not tempted to do that. I personally would love to see like a high-level number, right? At least it gives you some sort of indication on how well they’re performing with all the caveats, right? But I’m just so scared to do that, because I know if I do, we’re going to start seeing threat in Hacker News with like, “Oh! Take a look. We have Angular, or React, or Vue performing at this number. Can you believe it?” I’m like, “I don’t know if I’m ready for that.” [00:29:09] SW: And I think it was Jason and a bunch of other people. But, yeah, what they did was they just got the maintainers involved. So everyone had buy-in and then everyone’s like, “Okay, well these are some things that we think are valuable and we’ll try to be better on those. I think it’s more of a buy-in about not ever doing it.[00:29:25] HA: Great point. You’re right. And maybe it’s just more so like how we can serve that information. And I’m glad I just said too, because I’ve talking to the Angular team for a while, and they’ve been giving me some great feedback. They’re like, “Our tool sample size looks interesting.” They’re like, “We’re pretty certain we’re larger than that. Is there something going on in the detection method?” So like they’d been helping me try to figure out if there’s something wrong. And I don’t blame them for thinking that, right?  [00:29:46] SW: Yeah, that is 0.4, and it could be like maybe just it’s Angular 1.[00:29:49] HA: Yeah, exactly. Like the way I’ve done it now is specifically just Angular 2+, which is not including Angular 1. But even then, maybe there’s something missing. Maybe there’s something I’m not doing that’s missing a lot of Angular site. So, you’re right. I think getting buy-in is so important, especially also if we end up trying to show like numbers or high-level indicators that just try to sum everything up. Yeah, I like that. That’s a good way to put it instead of just saying no.  [00:30:11] AJ: Just another question actually around the data that HTTP Archive uses, what does it gets its list of URLs from? How does it pick them? [00:30:20] HA: Yeah. There’re some certain criteria. I generally don’t know if that specifics can be made public. But it literally just fines. It creates a top list in some sense of popularity. And I think when it started, it was much less URLs. I think there’s only about a million. And only about a year or two ago, they kind of moved it up to a 5 or 6 million. It gets the URLs from Chrome user experience report. So even though – And it’s kind of confusing at first, but Chrome user experience [inaudible 00:30:48] separate data source, but it’s sort of also the source of all the URLs, and it’s kind of like just a public mini version of all of Chrome’s internal metrics pipeline. We have our own internal metric pipeline. This is just a small public lens to it. And there’re some specific criteria. One of them that I know definitely is true is I think usage static reporting has to be enabled in the browser. There’re definitely some certain things like that. And then that is all given to HTTP Archive. HTTP Archive gets that list of top URLs, and it does what it needs to do. That’s also something to keep in mind, because yes, it’s a lot of URLs, but we’re also not taking into account the millions of other URLs that are not included into the dataset.  [00:31:28] AJ: Sure. I guess we’ll take about tech stack. That’s the big one. [00:31:31] KA: Yeah. That’s the last question. What did you use to build this?  [00:31:35] HA: I use Svelte to build it. Yeah, I did spend a little time trying to figure out what I wanted to use. The nice thing about just building projects every now and then, I think I can dabble and pick something else. But I’ve never used Svelte before, and I’ve always wanted to. And I thought this would be the perfect way to just get familiar with it. It’s not a small app, but it’s not very massive either. That’s your basic components. I got to worry about how components work together. I got to figure out routing and all that. So I thought this would be a good exercise just start thinking about and how Svelte works. Yeah, I picked Svelte. I was also really considering using Sapper. Did it, and now I kind of regret it. I’ve been meaning trying to figure out how can I add server-rendering somehow with Zapper, which I hope wouldn’t be too bad. But yeah, and it’s been a great experience. Yeah, I definitely enjoyed Svelte a lot. And I feel like the one thing that I really sort of enjoyed was I’m trying to think of it as like if I wanted to learn a framework as a brand-new developer, I feel like I was just so intuitive to just create Svelte files at a script tag at a [inaudible 00:32:36] tag and do markup, and that’s it. I didn’t have to worry about JSX. I didn’t have to worry about dependency injection. I was just like, “If I was to learn a framework from the very beginning four years ago, and if I just saw about the way it was, I’m like, “This would have been perfect for me.” Yeah, that was my first thought using Svelte.  [00:32:54] AJ: That’s good to hear that. That’s kind of the goal, I guess. That’s really good.  [00:32:58] SW: I think the phase that appealed to me from Rich was like HTML is the fundamental sort of language of the web that everyone learns to speak first before basically everything else. And every Svelte file is basically a tiny superset of HTML. So, it seems like a very natural progression. I almost want to – Yeah, I don’t know if it’s appropriate, but like beginners, if they want to start with Svelte first, then I think that’s a really good idea actually.  [00:33:27] HA: Yeah, 100%. Yeah. Like I feel like now, if somebody asked me and said, “Hey, I wanted to use a framework and I just want to learn how component scoping works, what do I use? I think immediately I’d be like just try Svelte instead of suggesting, “Hey, use this other tool. But you got to worry about this and that too, and go learn that,” right? I think Svelte to be a very nice thing to just try out at first, right? No. I agree. I agree, for sure. [00:33:49] KA: So I personally went from React to Svelte, and I was so amazed by the developer experience. It’s really nice.  [00:33:59] AJ: I went from Angular 1 to Svelte. [00:34:00] HA: Oh, wow!  [00:34:03] AJ: Yeah. This is back in the day. Well, I mean, I was previously a backend and I sort of had to do frontend, because I was running a startup based by myself. So I sort of learned frontend, and I learned Angular, because I kind of new a bit anyway. And I have to say it’s like night and day going from all the injector pass and stuff and services. And with actually component-sized, the Angular app, the Angular 1. – I have no idea what it even was, 1.6 maybe. I don’t remember. But it was componentized, but it was just lot of wiring. And we were trying to do the same things and what I looked at Svelte, like what it’s already there. It’s already done. So it was an easy sell.[00:34:41] AH: For sure. When was this? Was this like a number of years ago?  [00:34:44] AJ: This was when Svelte 1 was the thing. So double braces, lots of handle body type stuff. And lots of nice bugs to play with. Yeah, but it was great. It worked. And I started using it for like widgets to put it on the sites, because it was perfect. No runtime, that kind of thing. And then when I had to go work on the main app, it was like, “Oh! How do I move this? How do I move this stuff out?”  [00:35:05] HA: Yeah. That’s when it gets kind of – When you start dreading it. But once you start, I feel like it’s not as bad as its anticipation. [00:35:11] AJ: Yeah. Yeah, absolutely.  [00:35:15] SW: Anthony, I got bad news for you. Hussein uses a router, but it’s not Routify. It’s this thing, Svelte routing.  [00:35:22] HA: It is.[00:35:22] AJ: Svelte routing. Wow!  [00:35:23] SW: I’ve never heard of it.  [00:35:24] AJ: I mean, to be honest. There are so many routers with Svelte. It’s unreal. None of them are official, but there are so, so many. I think Routify is brilliant. Routify, Routify I think is fantastic. But I only use it in one project as well. I use Page.js a lot. I had gone with sort of traditional –[00:35:39] KA: Page.js? Yeah, that’s like a general one, right?  [00:35:42] AJ: Yeah. It’s just of another router, yeah. This kind of works.  [00:35:46] SW: That’s pretty nice that it works out of the box sort of. [00:35:49] AJ: But the fun thing I guess about Svelte, is again – Because it’s quite simple writing. A router is not that difficult. So, a lot of things I’ve done, and I love to think my friends have done actually. We’ve just used the Svelte component with this, and he just changed the angle past them, and it’s done, like your routing is finished. And it’s that easy and it’s like, “Well, do I need a router? Maybe not.”  [00:36:09] HA: Yeah. To be honest, I just wanted to find something, and I found Svelte routing and I was like, “Okay, I think this might work.” [00:36:17] AJ: It worked. [00:36:17] HA: It worked. Actually, it’s done what I needed to do. No. I think that was the one thing I kind of had to get used to. There’s no first in-class router. I don’t know if Rich or anyone, Anthony or anyone involved, right? Yeah. I can imagine.  [00:36:31] AJ: Yeah. There’s a plan. We haven’t really picked one it will be yet, or whether it’s a grand of rewrite, but it’s definitely – It was definitely an opinion of the maintainers that we would going to have a router. They will bring their own. Let’s not be opinionated about it. And it’s just the amount of pushback from the [inaudible 00:36:46] and demand has been right. We probably need a router.  [00:36:49] SW: A lot of people come from Vue and expect a router. It’s usually what I – [00:36:54] AJ: Yeah, absolutely. Or anything else actually, because everything else has a router, right? Everything else.  [00:36:58] HA: Yeah. Yeah.[00:36:58] SW: Yup. So, I was going to ask you like some more general questions about where you think the web is heading in the future. Do you think we’re getting heavier or lighter sites in terms of JavaScript payload? [00:37:14] HA: Yeah. I think we’re definitely getting heavier, and the trends are showing that it’s getting heavier. With that being said, browsers are improving, the JavaScript engines, right? Like parsing, compiling. Even executing are improving. So an example, if you look at, let’s say, Chrome 41 versus the current version of Chrome and try to load the same bundle of JavaScript. You’ll notice how significant the change has been. I think that’s also progressing and improving, which is great. With that being said, I do think sites are getting heavier and heavier, and I don’t generally know if they’re happening proportionally. I think that’s something we – Yeah. And that’s pretty much my job with a lot of the people that I work with. How could we course correct that? It’s not going to be easy, but it’s going to take some time. Yeah.  [00:37:58] KA: What are people putting on their websites that’s so heavy?  [00:38:01] HA: I’m glad you said that, because coming in from a framework’s angle, they’re very – I wouldn’t say anti-framework, but that’s essentially the first thought. They’d be like, “Oh, you’re using a heavy framework.” It’s immediately costing X JavaScript bytes in your site. Consider to use something else. And that’s not wrong. If you’re using anything that has an initial cost, it’s going to really affect your initial performance. But I think when you start looking at also like data as a whole you realize that that’s usually a very small percentage of the total. And you look at, for example, third-party dependencies and third-party bloat. I’ve seen so many statistics. Some of them being 70% of 80% of most sites are coming from third-party scripts. And then you start seeing things like that and you’re like, “Wow! Okay. I spent so much time telling people what to do with their first party code.” But that’s going [inaudible 00:38:50] comparison if they’re fetching a thousand scripts, right? They’re doing a million different things. I think that’s a very costly thing. That hasn’t improved in so long. It’s only getting worst. Like I know a lot of things are happening now in Chrome as well as other browsers. But that’s something that definitely needs to improve. How could we improve the dependency bloat that we have today? [00:39:10] AJ: I think essentially, because when I started Beyonk, again, I wasn’t particularly a strong frontender, and I sort of was learning. I was sticking dependencies [inaudible 00:39:20] or anything like that. And the moment you put Lodash in there, even though with the tree shaking, it’s not that small. And I saw that in there, and I thought I don’t need this. I’m using like [inaudible 00:39:31] out of it. And I pulled it out and I [inaudible 00:39:33] about two megs and I thought, “Well, hang on a minute. How can I – I can do better than this.” So I started looking at all the dependencies. I started looking at moment, for example. Moment is huge. Page.js is basically a drop and replacement, and it’s two kilobytes. So I start on this path and I found [inaudible 00:39:50], a collection of libraries called Just, where it has a bunch of stuff, which is one thing. That replaces Lodash. There’s moment. There’s a whole load of like alternatives, but they’re not very visible. I find people – People always come at Axios, for example. Axios fetches in the browser. That’s zero kilobytes, right? All the stuff is kind of built-in. Why isn’t there a bigger kind of visibility? I think now bigger [inaudible 00:40:12].[00:40:13] SW: Is this just 11 or is there a bigger story? Like why are people still using this stuff?  [00:40:19] AJ: Well, I think it’s just browsers. Isn’t it really? Browsers and string [inaudible 00:40:24], things like that. They don’t, and they probably shouldn’t have every single utility in the world on top of them. It’s getting less and less important. [00:40:32] HA: When we talk about IE 11 or other browsers, right? Like polyfilling is also a huge issue. I think a lot of people, when they build the websites and they need to support legacy browsers, they end up including so many modules, that the vast majority of the users who are using a lot of new browsers don’t need, and that’s a huge one, right? So, there’re been a lot of things that we’ve been advocating for a lot of patterns, like module, no module. I don’t know if you guys heard of that. But it’s the idea of adding a module attribute to a script. That doesn’t have any particles. That’s using neuro syntax. That having a no module script. So browsers can now selectively pick the right one, which makes perfect sense. But a few folks, me, Jason, Gary and other field people are actually looking at ways we can make that even better, because although that’s super useful, a lot of third-party dependencies in general are being published using legacy code. If somebody who pushes something to NPM, they’re not trying. Most, I think. Most package are that aren’t trying. They’re thinking of ways of using the most newest syntax, right? They’re just trying to make it as widely as usable for everybody, for every browser, right? And they just want to make sure that anybody can use a package. And that is also an angle we need to be looking into a lot better. Yeah. I think that browser support is huge. I also think part of it too is just knowledge, right? Anthony, you might be super savvy enough to actually spend some time looking into your bundles, be like why axios to your – But if you think of the millions of sites out there and the millions of developers using millions of like legacy applications, they probably don’t even know what’s actually happening beneath the scenes, right? I think just developer knowledge is a huge factor. Yeah. [00:42:08] AJ: I think actually one of the hardest parts about that process was, and I think it’s using Webpack at the time, was actually installing the plugin that gives you the report of what’s in your bundle. That was probably the hardest bit of the whole process. And I think that’s almost – It feels like it should be built-in almost now, like a flag. Because it’s really important. It’s really important. [00:42:28] HA: 100%. You’re probably using Webpack, bundle analyzer, or something similar like that. [00:42:33] AJ: Something like that. Yeah, rings a bell.  [00:42:33] HA: Exactly. And I agree.  [00:42:36] KA: This talk about like dependencies really makes me want to build like a small website that just shows you like alternatives to all these heavy widely used packages. That would be really nice to have.[00:42:50] SW: You may not need, and then just fill in your dependency.  [00:42:53] AJ: Yeah, that’s a great idea. Actually, there is a guy who’s done this. But it’s very unknown small project right now, but the groundwork is there.  [00:43:02] SW: Well, can you name? Like it’s going to stay unknown if you don’t. [00:43:06] AJ: I wish I could. I have to search my GitHub [inaudible 00:43:08]. Maybe it’s my pix. [00:43:12] KA: Yeah. Sounds like something we could promote at some point.  [00:43:16] SW: I have a couple thoughts on this. There’re a few things. So, one is I think there’s a culture that I really like in Svelte where Svelte is most people’s second or third framework. Most people don’t come to Svelte straight away. So they’re a little bit more thoughtful about dependencies when they come here. When they come to Svelte, partially because they come to Svelte for the bundle size reason. And then I just see like all the tools in Svelte ecosystem tend to be a little bit more conscious about the weight that they add. And I think it’s something that comes from Rich Harris himself, like he wrote a blog post which I really like. I think he said – I think it’s called something like small modules, maybe not. Where he kind of questions like this whole culture that we have of like, “Okay. We’ll import this one thing, then imports this other thing.” And it’s like, “Yeah, it’s a Unix philosophy, but there’s a whole bunch of defensive coding in there, and we don’t really audit what we bring in.” But it does tend to have this like weird upside – Like Stranger Things, like there’s the normal world that everyone else lives in, and there’s an upside world where like it’s just like the duplicate versions of every library that people use. Most of them are done by Lou Jackson for some reason. To me, that’s not a world I want to live in as well, because I want everyone to kind of use like a best in class tool. But maybe it’s just too difficult at this stage. The other thing that comes to mind, I’ve sort of mentioned it on this podcast before, but I think since he’s your coworker, Llya Grigorik, who wrote High Performance Browser Networking. But he also talks a little bit about how we’re never going to reach the – Whatever, like 50% of developers who just continuous to build big sites of the way they always have been. They just always – It just always has worked that way. So they just keep doing that. And if you really want it work, you have to kind of build it into the platform. And I don’t know what the conclusion is, but maybe this is a problem that reaches beyond frameworks and goes into right into browsers. [00:45:10] HA: For sure. Yeah. My frameworks I think plays a part, but there’s definitely a lot more to it. 100%. [00:45:18] SW: So it seems like Anthony found the [inaudible 00:45:21]. [00:45:21] AJ: I did. I did. I will look to that from my stars. Yes. It’s really hard to read out their beliefs. We’ll tweet as well from the account, right? But it’s pioneerpart with a zero after the PI, smaller-npm-packages. Yeah, have a look. It’s a very short list right now, but if people will contribute, it’ll be amazing.  [00:45:40] SW: I kind of call this bending the curve, because it’s very 2020 to bend curves. But like I thought we’re having some impacts. I thought things were leveling-off in terms of – I think one of the other discussion that is coming up is this separation between who build sites and people who build apps. Because people  who build apps, you’re trying to compete with native apps, which are hundreds of megabytes, and they don’t care, because they just do the initial download. And it’s kind of unfair to hold all these sites on the same benchmark and give them the same tools to express what they need. I think there’s this discussion about like what if we had a new document type that was like document type app or something? I don’t know if you’ve seen that, but it’s something that Rich Harris is also gotten into. [00:46:25] HA: Yeah. I did see some discussion around there. Yeah, I think a few other folks also kind of wrote some articles exploring that mindset. Yeah. I remember seeing that, which is super interesting. Yeah, I’m super interested in that kind of information. Like it makes sense to think about things and those lens, but those like how do we make sure things like that could be sustainable in the future. But, yeah. If we’re thinking about predictions, I feel like that’s one thing that I feel like. I don’t know. You might start seeing in – I don’t know. 5 years’ time, if that’s not too conservative.  [00:46:54] KA: Yeah. All right. I think that’s it. Do you guys have any picks? I have one. We didn’t warn you. We never warn our guests about things. We should start doing that. [00:47:03] AJ: Yeah, we should.  [00:47:04] HA: I’m like quickly thinking of something.  [00:47:08] KA: I’ll go first them.  [00:47:09] SW: It doesn’t have to be tech related. It can just be anything that is [inaudible 00:47:12].[00:47:13] HA: Okay. Nice.  [00:47:14] KA: So I’ve picked a computer mouse today. It’s called a MX Vertical. It looks kind of funny. So think of it like a regular mouse, but you turn it 90 degrees. So you kind of hold it in like a natural way. It’s really nice. Nice for your underarms – [00:47:32] SW: Nice for your underarms. What does that mean? Where are you putting your mouse, man? [00:47:38] KA: It’s like the angle. You have your arm in. Gets better if you turn your hand up 90 degrees. Sort of hard to explain, but it seems to be working for me at least. I’m enjoying it. [00:47:51] HA: Nice. Yeah. No. I think I definitely need to invest in something like that, for sure.  [00:47:56] AJ: So, for my pick, it’s going to be – It’s actually weird. This is a weird one. I always like – It’s a tradition now that I have a weird pick that doesn’t make any sense. But it’s a laptop I don’t yet own. I have used them before, and I’ve seen a couple of friends who’ve got them. And it’s a system 76 [inaudible 00:48:11] new laptop. The name has slipped me by right now. I completely lost the name, but it’s there. Kind of alternative to the DELL XBS and HPMV. It’s a very thin ultrabook. The nice thing about it is actually the components inside aren’t soldered to the motherboard. So you can configure the amount of RAM you want. But I’m going to get on with 4o gigs of RAM, because I’ve been stuck with this Dell XBS, which has got 8 gigs of solid RAM for so long. And it really struggles. It’s struggling with this. It struggles with a lot of things. It’s time to upgrade, and I think that soldered RAM should now be a thing of the past. So, I’m looking forward being able to slot some of these sticks in there and stuff. And it’s got this really nice spec. It’s very lightweight. It’s lighter than the XBS. In fact, I think it’s no point. It’s a hundred grams lighter. So it’s just over a kilogram, which is not bad for a sort of very modern i7 laptop with 40 gigs of RAM. And you configure up to a 4 terabyte SSD, which [inaudible 00:49:05]. Let’s face it.[00:49:08] SW: I’m afraid to ask this. But do you guys know how many hours a day you spend on YouTube?  [00:49:12] AJ: Too many. [00:49:14] HA: Way too many.  [00:49:14] SW: You can actually draw it up on your own stats. You just got a YouTube app, and then you just hit the time watched, and it shows you the hours a day. I spend roughly three hours a day, which kind of makes it my second most used app after my podcast player. So I’m just going to pick YouTube Premium, just because it lets you skip ads. It lets you download stuff. And I actually got the family plan. So, my dad works in aviation, which side note, is not doing well. So, he’s been spending all day watching YouTube. And I was like – I saw him and I was like he’s just sitting through a lot of ads. I just got the family plan. And it’s super cheat. It gets a lot of entertainment. And there’s a lot of quality stuff in YouTube, and I like it a lot. So figured I’d pick a Google product here. [00:50:02] HA: Nice. Yeah. I think I have one. It’s going to be really random, but I don’t know if you all use certain weather apps in your phone to just track the weather. This is like the default weather app that your phone comes with. But somebody recently just told me about this app called Dark Sky. [00:50:17] SW: They got bought, right?  [00:50:18] HA: I think so. Yeah. They did. Yeah. I didn’t think I would need that kind of information. But I was like, “You know what? Let me just it.” A couple of dollars. I think it was the first mobile app I’ve ever bought, like ever. That goes to show like how I never try to buy anything on my phone. Yeah. But I was like, “Oh! It’s pretty cool.” Because it kind of shows some super hyper local information. I think it goes down to the minute of like whether it’s going to rain. Whether it’s going to snow. So, I’ve been having fun just playing around the app. But yeah, Dark Sky. A random play. [00:50:46] KA: Does it work like the predictions? Yeah.[00:50:48] HA: It does work. Yeah. [inaudible 00:50:51]. Prediction is new actually for like – Ever since I’ve gotten it the past few weeks, like when it says it’s going to rain at 7PM, it rains at 7PM. So definitely not 100% accurate, but it’s definitely like surprised me. That’s for use. [00:51:08] AJ: I have used Dark Sky in the past actually, and I found it to be very, very accurate. It was almost on the minute, which is quite amazing. It’s a great app. Yeah.  [00:51:13] KA: It’s sort of scary at the same time. [00:51:16] AJ: I felt it was gone, because when Apple bought it, they seem to sort of make it disappear. So it’s good it’s still around, I guess.  [00:51:24] HA: Yeah. [00:51:24] KA: Could be only Android maybe? [00:51:27] HA: No. I have an iPhone. I have an iPhone. I have it. So, Apple did something good. [00:51:31] AJ: Well, I have to get it then.  [00:51:32] HA: Yeah.  [00:51:32] AJ: They actually have a bunch of really cool [inaudible 00:51:33] libraries as well, such as the time zone converter, which is really useful. It’s worth checking out at GitHub too.[00:51:40] HA: [inaudible 00:51:40]. I didn’t know that. Wow! [00:51:41] KA: Okay. So, I think that’s it. Thank you, Zach, for coming on – [00:51:47] SW: Studio audience. The studio audience is very excited. Very excited.  [00:51:53] KA: Thank you for coming on and talking to us about PerfTrack, the web and any and all topics we spoke about today. [00:51:59] HA: For sure. No. Thank you guys. This is great. This was a good chat. For sure.  [00:52:03] AJ: Thank you.  [00:52:03] KA: Awesome. All right, see you next time, listeners. Bye.  [00:52:08] AJ: Bye. [00:52:08] SW: Bye.
9/15/202052 minutes, 5 seconds
Episode Artwork

Tan Li Hau on contributing to Svelte, his compiler handbook and much more!

Li Hau joins us to talk about his experience contributing to Svelte and how he got started. We talk about the best way to get involved as well as his compiler handbook. Enjoy!Sponsors: Mono is a digital product studio that works remotely. Within the Svelte community you might know Wolfr he is a designer that worked on the Routify, Svelte Society day and Svelte Summit website. He wanted to sponsor this episode with a simple message: as a design team, they are open for client projects. They have extensive experience designing web applications with full-on custom design systems. Mono is typically responsible for the UI and UX in a project and they work alongside developer teams. Level Up Tutorials brings you cutting-edge, focused & high quality video tutorials for web developers and designers. Check out the Svelte For Beginners as well as Sapper for Beginners courses. Links:  Compile Svelte in your head part one, two and three Compiler Handbook Plenti - an SSG/site builder for Svelte Shepard - a library for guiding users through your app Does Svelte Scale? Flare in Svelte Meetups: Svelte Society Day France - September 27th, 13 talks! Svelte Brazil - September 1st  Svelte Philippines Facebook Group Svelte Summit is on October 18th - CFP and Sponsors can apply now Picks: £700 dishwasher for £30 using Gorilla Glue GitHub changing of default branch Frontend Horse Kevin Powell YouTube Channel (CSS stuff!) Transcription:[00:00:00] KA: Hi, everyone. Welcome to another episode of Svelte Radio. Today, we have another guest. But first, let’s get into introductions. I’m Kevin. I run a site called Svelte School, where I teach you all about Svelte and what to do and what not to do in Svelte. Soon, we are going to have our first video course. Keep looking. Yeah, that's me.[00:00:26] SW: Exciting. I’m Shawn. Hi. I’m also known as Swyx. I work at AWS as a developer advocate. What have I done with Svelte recently? I played around with Elder.js and I’m working on moving my own site over to Elder.js as a static site generator built in Svelte.[00:00:42] AJ: Hi. I’m Antony. I’m the CTO of Beyonk, which is an adventure, well, a venture experience booking platform. I’m also a Svelte maintainer and I have very high CPU usage. Yeah.[00:00:59] KA: All right. Our guest for today is Li Hau. You might know him from his contributions to Svelte. I’ll let him introduce himself.[00:01:09] TLH: Hello, everyone. I’m Li Hau. I guess, my full name is Tan Li Hau. Tan is my family name. You can find me @lihautan on Twitter. Who am I? I’m a Svelte contributor as well, like Antony. A bit of myself; I’m currently in Singapore like Shawn, like Swyx. Actually, I’m originally from Malaysia. For those who don't know where Malaysia is, it's a Southeast Asia country right between Thailand and Singapore. That's where I’m from. It has better food, no offense, than Singapore. Although the culture-wise and weather and everything is almost the same.I’m currently working at Shopee as a front-end developer. Shopee is this e-commerce platform, we would say the leading number one e-commerce in Southeast Asia. For those who don't know about Shopee, last year we had Ronaldo as our ambassador. It's very funny. I promise you. You can search for Shopee Ronaldo and we get him to do a baby shark dance with Shopee. That's hilarious. You have to check it out. I think a lot of people who are not in this region would think that Shopee and Shopify is related, but we are not.[00:02:30] SW: I had a friend from Malaysia when I was young. His dad owned a restaurant in Manchester and one day he went to the restaurant and he said, “Order anything you like, any food you want, because it's all free. You can have anything you like.” It's amazing. I ordered my what I thought would be amazing dish and it came to the table. When it arrived, he immediately thought it was his and stuck his fork right in the middle of it and stuck it on his plate. I was like, “No.” Yeah, I didn't really eat much Malaysian food that day, sadly.[00:03:02] KA: I would say the food in Malaysia is pretty good. I went a couple years ago. I like it.[00:03:07] AJ: For those who get to eat, I’m sure it's wonderful.[00:03:12] TLH: Hopefully, one day after the pandemic is over then, maybe you guys can come over and I can bring you guys around, hopefully.[00:03:18] KA: Yeah, that sounds good.[00:03:19] AJ: Amazing.[00:03:20] KA: What got you interested in Svelte?[00:03:23] TLH: Well, so I would say I was interested in the idea of Svelte early on. Maybe a bit more background about myself with the company. Basically, in Shopee, I’m on a so-called working platform-related stuff, which means that I work less on future related stuff, but more on fixing your webpack config and table config, upgrading labels and stuff. That's because I volunteered into this role and we made this role into me.I was playing with all this webpack, Babel and all this stuff. Once in a while, we encounter weird bugs, because we upgrade to the latest version. I have to figure out why by basically reading the source code of Babel, for example, to figure out why. Then slowly and slowly, I get more familiar with them and I started to actually make code fixes and make a PR to them. That's how I get into open source.At some point in time, I have this idea of you can play with Babel after a while, I was thinking, why don't we compile JSX and React into what Svelte is doing? Basically, back then was I think Svelte too. I was like, “Oh, you can just compile as well the same template into plain JavaScript. Why can't we do it with JSX?” I was playing with it, but said, it's too hard for me. I can't figure it out. I was talking with my colleague and I was thinking, “Should I invest more effort into this, or what do you think about this project?” He was telling me his advice, which is when you have some cool idea and someone has already implemented, you can either work on your own idea to make it better, or you can actually collaborate with the author and you can do even better things in collaboration. That somehow planted that seed into me.Actually, last year, Hacktoberfest. For those who don't know about Hacktoberfest, so GitHub has this annual event of Hacktoberfest, where you contribute to – I think it's in collaboration with DigitalOcean. If you make three PRs, or maybe five now, you will get a DigitalOcean stickers and swags and t-shirt. That's my main motivation.Basically, I was like, okay, how about just take this opportunity and take a look at source code? That's how I get started. Basically, I’m just reading source code and understand how it goes and find out the easiest issues and figure out how to fix that. Slowly and slowly, I see there's some to-do's in the source code. I was like, “Oh, this sounds doable.” I’m just like, do it and make another PR and yeah. Sooner or later, one day, Rich just inboxed me on Twitter and say, “Hey, do you want to join Svelte?” That's how I get into it.[00:06:23] SW: GitHub and DigitalOcean tricked you into Svelte, sort of.[00:06:29] TLH: I’ve been collecting their t-shirts every year, but I always couldn't get the size right. There's one year, I get it too big. The other year, I get it too small. I just don't know. I just don't know what happened.[00:06:41] AJ: It sounds like SDD, which is swag-driven development. I mean, I think that's quite a reasonable approach to things. I like it.[00:06:51] KA: You're pretty known for a couple of blog posts that you've written, the first one being the compile Svelte in your head part one and you have a couple of others. Maybe, I think you got the idea from Shawn, right?[00:07:03] TLH: Yup. Yeah, Shawn. You want to talk about it?[00:07:06] SW: I was organizing the Svelte society meetups in New York. I was thinking of ideas for talks, because in the way that we organize meetups is very inspired by order at the rocks in typescript New York meetup, where he has a beginner, intermediate and advanced talk, so that everyone who comes to a meet up has something to look forward to. Oddly enough, the beginner ones are actually the hardest to do, because most people don't want to do the beginner talk. They just want to talk about something that is at the edge of their abilities. I was thinking about it and then I was thinking that I don't really understand how Svelte works, so I used that as my beginner talk.Essentially, the Svelte repo has the compiled output. I was just doing a mapping from here's what you have on the left-hand side and here's what it compounds on the right-hand side. Let's try to predict what each of these things are. I ran out of time, because I did that on the day of the meetup. I didn't finish it as a talk. I gave it as an unfinished talk. It did not go so well. Then I went home to Singapore and then I went to Shopee’s internal meetup. Shopee has a really good meetup. They meet every week. I gave it again as an unfinished talk, because I didn't work on it at all.[00:08:17] TLH: I couldn’t tell.[00:08:19] AJ: Really selling yourself out, Shawn.[00:08:21] SW: Quite a bit of my skill is just in time speaking.[00:08:28] KA: Just in time speaking.[00:08:32] SW: You try to do as much prep as possible, but at the end of the day, you realize that you just have to get very good at improvising and whatever comes on the screen. In NYC meetups, we have a fun segment, especially in Manhattan JS and Brooklyn JS, we call battle decks. Battle decks is when you go up in front, they start giving you slides that you haven't seen before and then you're supposed to make a talk based on the slides that you haven't seen. You're talking about whatever happens and then you transition to the next slide and it's show something completely different and then you have to find a way to segue into that.[00:09:02] AJ: That sounds hilarious.[00:09:03] SW: It’s a nice improv thing. Yeah, especially because they fill it with bullshit business terms, which is usually funny. Yeah, leverage your synergies. Yeah, I did that with Svelte. Then I think, Li Hau, saw the potential and actually followed up with a proper –[00:09:18] TLH: I feel it's a very good way or perspective in explaining Svelte. Yeah, so one day I was thinking, that is a really good idea, a good way of presenting Svelte. Also, there's a very catchy title, like compile Svelte in your head. I was trying to figure out a different title, but I’m just bad at naming things, so I’ll come up with titles. I just went the idea, Swyx, telling him, “Hey, your title, can I just keep it? Can I use it? We do the flow. I like the flow, but I will write a blog post about it. I couldn't figure a title. Can I just use it – use your title as well?”He’s very generous. He said yes. That's how the compile Svelte in your head part one comes about. It's just a beginning of Svelte, and I think there's a lot of things to be covered. I wrote part two, part three. There's a lot of things in my mind. In a draft, basically I didn't manage to publish them. Definitely, there's a lot of things to cover, such as if, else, how does a wait looks like and transitions. Yeah, there's a lot of things to be covered.[00:10:24] AJ: Actions.[00:10:24] TLH: Actions, yes. There's so many things to cover. Yes, slots.[00:10:30] AJ: I’ll tell you why I think the title appealed to me, actually is because if you interview for a lot of the big tech companies, the big five, I can't remember what the acronym is for them, one of the things they often ask you to do, even in pre-screening is they'll ask you to write code, but not use a compiler. They'll ask you to talk through it and literally manual looping and stuff like that. I think being able to compile something in your head is actually quite a useful skill for anything really. When you do it and I thought it was ridiculous at the start, because I thought this is so pointless, because we have compilers. It's like not using a calculator. Why you do the math in your head.The reason being is because obviously, you can really understand what your code is doing under the hood and you can spot inefficiencies much more easily if you're compiling it yourself, rather than using a compiler, or relying on tooling. I think the title is genius, actually. It’s super catchy. I really like it.[00:11:17] KA: I came up with the name for Svelte Society and Svelte Summit and blog post titles and that's about it. That's all I got.[00:11:24] AJ: Hey, it’s a skill.[00:11:25] KA: Zero value ad titles actually play a big part in how I think it is. For sure, because it's something that you promise the reader and then you get their attention and then you have to deliver on the promise.[00:11:35] AJ: I think you just described clickbait.[00:11:41] SW: It's only clickbait if you don't deliver.[00:11:46] TLH: Swyx has this term called two words, right?[00:11:49] SW: Yeah, it was a philosophy, I think more than a term, but yeah.[00:11:52] TLH: No, no, no. I mean, I said two words. I was also thinking how do I cram, compile Svelte in your head into two words, catchy title, but I just couldn't make it.[00:12:02] KA: That sounds impossible.[00:12:05] SW: I think, you took it to part one, part two and part three and I think – are you planning to continue? Then you also had a Svelte compiler handbook. Is that a separate initiative?[00:12:13] TLH: Yes, it's quite different. I think the idea, or the I would say, target audience maybe is a very different pick, or perspective into Svelte, where one looks at compile Svelte in your head looks at how actually Svelte’s compile the code into JavaScript and how do you run it. How does it look like in JavaScript, because with that, you have a sense of what is the constraint, or what is the limitation of the syntax itself. There's a lot of things people are asking that I just couldn't compile it to JavaScript. I don't know how to implement it in JavaScript to do that thing.Most of the case, that's the reason why we couldn't do that feature. Basically, Svelte is a compiler. You have to always think about how do you compile that to JavaScript? If you couldn't think about that, or you have to do a lot of things in the runtime, basically, it's a no, no, I think in the Svelte’s philosophy somehow.The other thing would be people are quite interested in Svelte. They want to contribute. After you know how to compile things Svelte into JavaScript, but you don't know how the compiler works. You don't know where things are. For example, if I’m telling you a div element will compile to document.createelement div, but where is that code written in? Which part of it? That would be the reason why I wrote that, because I think a lot of people wants to know and basically, they don't have a handbook, or a place to learn about it. I inspired by the Babel handbook, if you guys know about it.There's this Babel handbook that basically gives a lot of tips and tricks on how to do things in Babel, like how do you write plugins in Babel. That's also where the inspiration of the titles is coming from. Basically, I’m just bad at naming and coming up with titles, so I’m just boring it from everywhere.[00:14:05] KA: It seems to be working though. I’ve read all of them and then I really like them. Some other questions. What's your favorite PR to Svelte? Which one that you've done are you most proud of, or was the most fun to write?[00:14:20] TLH: I don't really know. I think there's one story that's interesting. Basically, I was trying to optimize it in a sense where make it – if you're using a variable in your template, but if that variable is never changed before, like you don't change that variable at all, you could –basically I was thinking like, why not inline it in a HTML? If you have a static element in Svelte, what Svelte will do is using inline HTML to make it shorter than really create the DOM elements. If you start to have expressions, it will de-optimize into creating text notes and defend, things like that.I was thinking, “Hey, this variable is not changed at all, right?” Because there's this number one tutorial. The first thing in on the tutorial will be hello world, cons name equals world and then you just use the word and you don't change the name at all. I was thinking, why not? Just make it, better where you just inline that – when you're doing the inline HTML, you use a string template literally instead. Then that got merged, but then someone pointed out that that will create cross-type scripting vulnerability, because you will never know what variables it will be.That got reverted a bit, where we figure out maybe inner text content and things like that that is cross-type scripting safe. That's interesting. I never thought about that before, to be honest. That was one of my earliest PR. Maybe that's why I remember the most, I guess. Yeah, the first few PRs and I already introduced a vulnerability.[00:16:03] SW: It's definitely one of those things, where you make the mistake once and then you'll never make it again.[00:16:08] AJ: Yeah. Start learning the lesson the hard way. This might be a stupid question, but it's just recently, I’ve heard people calling pull requests, MRs. What does MR stand for?[00:16:16] TLH: Merge.[00:16:17] AJ: Oh, merge request. Okay.[00:16:20] TLH: Basically, it's a branding of GitHub, where pull request is a brand thing. If you go to GitLab, it's called merge request. There's no such thing as a pull request. That's the difference.[00:16:30] SW: Google calls it like the CL contribution or something listed.[00:16:35] AJ: Yeah. I mean, because I know that Linus himself, the guy who wrote git, he doesn't like GitHub's pull requests at all. He's completely against them, the way they work, because he says it's basically an augmentation of the original feature. I wonder what his original feature was called. I don't know.[00:16:52] KA: Yeah, I don't know. This is news to me.[00:16:55] AJ: Now if you look at Linux, look at the Linux source code on GitHub, it's read-only. It's just a mirror.[00:17:01] TLH: I’m using GitLab at work and GitHub in public. I always mix up these two words. That's how I know about the difference between MR and PR, because I just realized that hey, how come GitLab is always using MR and GitHub is always using PR?[00:17:14] AJ: What does Bitbucket use? Who knows?[00:17:17] KA: Well, that's a good question. I think they're using pull requests.[00:17:20] SW: I think they are, because I’ve never seen anything other than pull requests. I’ve never really considered it actually.[00:17:25] KA: Yeah. How would you encourage people to contribute to Svelte for the first time?[00:17:30] TLH: For the first time, read my blog if you don't – If you don't know how it works, I guess, hopefully it's helpful to you. If it's not, also let me know. At least I can edit it, because right now, I guess, that's something that we are lacking of. I guess, maybe after reading it and getting more familiar with the codebase, maybe you should write another blog, or docs, or things like that to telling people how to read Svelte code. I guess it's a bit hard for beginners, especially because it's like a compiler. It's very different than a normal library, because compilers have different steps. It's just very different.[00:18:07] AJ: The learning curve that other frameworks don't really have.[00:18:10] TLH: Yeah. It's really tough, but if you're reading enough compilers, like Babel. I haven't read typescript, but Svelte. After a while, you just maybe mark down MDX and that current thing. After a while, you start to get the catch of how they do things in a compiler. Then you start to see, because they follow certain design patterns in doing things, then you start to get a hold of it, then I guess, you know what to look for things. The learning curve is high and that's how I would recommend people to start.Once you get through that hump and you want to work on features on Svelte, I guess you just go to GitHub issues and find things. We have this new maintainer, Ben. He was very helpful. Basically, he just go to every issues and trash them, comments or close them if it's not relevant anymore.I guess, basically, all the things is in the GitHub issues. All the things that you can do is in the GitHub issues. If you think it's not there, maybe it's a feature that you want, then RFC propose some future requests.[00:19:17] AJ: This is something we discussed at the recent maintainers meeting is how can we aid new contributors getting onboard and yeah, like Tan Li says, one of the things is raising a feature on GitHub as an issue, sure. If it's something that's going to cause a lot of discussion, a lot of bike shedding, that sort of thing, then an RFC is the correct way to go about it, because that's literally the place for that thing. We see a lot of pull requests come in that are a significant feature that's had no real discussion. It's just been someone's idea in an issue. No one's really fed back on it and it's just – it's unlikely to get merged, because what you're doing is you're affecting so many users with your API and the way you think it should work. It's very a unilateral mindset. I think an RFC for an open discussion about how to shape the future of the Svelte API is really important.[00:20:02] KA: Also, you don't have to actually do coding to contribute to Svelte. You can fix documentation. You can blog about it. You can do videos on Svelte.[00:20:14] SW: Test PRs. You can test existing PRs. You can feedback on them. There's loads of stuff. The way I became maintainer is because I was just basically closing issues verbally. Obviously, I couldn't actually close issues, but I was just saying, this isn't an issue, whatever. I’ve tested. This doesn't work, or does work, whatever and that's it. That's how I became a maintainer. That was my path in.Anything is useful, anything that helps the community, anything that helps the burden on maintainers, because there aren't that many of us and we're very busy with our day jobs, I guess. Everything is useful.[00:20:46] TLH: I think, Antony mentioned about tests, right? The best way of raising an issue on Svelte, actually is too – I think most people would – some people just describe the problem, a better way would be come off with a repo on Svelte rebel, a minimum reproducible thing that we can just see, yes, it breaks. I think, even better would be write a test case that breaks and that's even better. Someone would be interested in writing the fix for it. You don't have to worry about you don't know how to write a fix. I’ll be there, I guess.[00:21:21] AJ: Absolutely.[00:21:22] KA: Makes sense. If you could have any new feature in Svelte, what would be the feature you would pick? What's on your wish list?[00:21:31] TLH: Maybe of confession first. I’m not using Svelte at work. Sorry, guys. Yeah, we are using React. Too bad. Actually, what I want on Svelte, l feel there's a very huge potential for Svelte, because it's compiler base, which is a place where it could do is to optimize for the server site rendering, and as well as the hydration part. I think there's a lot of things that can be done. Basically, Svelte can know firstly is SSR, I think it's already done basically, but there's edge cases of SSR, or things that I think SSR can do, like for example, prefetch.Because right now if you're using an await block, basically, server site rendering will always returns you, depending, like the loading is the out resolve or whatever, because the SSR is synchronous. Unless, you're using Sapper. Sapper is different. Sapper does it, where it creates – there's a prefetch magic export where you can do a prefetch to do it. SSR compiled target, if you compile Svelte into SSR mode, you can't do that. It's synchronous, so you can't fetch anything. You can't fetch the await.After that, basically, Svelte can know what elements, or where it's static, especially if you're doing a static site, like block. Basically, a lot of things are static. You don't really have to hydrate. Hydrate as in. How hydration works is that you have to map back whatever is on the DOM to a reference in your code. Then moving forward, just use those reference instead. In the meantime, if you have things like event handler and action and things like that, you run those as well. It's just keep the part where we create nodes. The creation part is kept, because you just claim whatever is on the DOM.For static slides, basically Svelte right now is claiming every element. It doesn't really care whether it's static or not. I feel that there's something that a compiler can do. A compiler should be able to know whether certain things are static or not. There's a huge opportunity to improve over there. That's why I’m excited. That's why I’m being part of Svelte, because I want to try it out. Basically, I guess, React team in Facebook, they are doing their own thing, but I get involved in those things. I just want to try that, like this concept, whether it works or not right. That's what I’m interested in and I want to do something about it.[00:24:00] KA: Yeah. Have you looked at Elder.js?[00:24:03] TLH: I haven't read through the code, but you guys mentioned about it last episode, right? I went through the readmes and it's very interesting, but I haven't really look into the source code yet to see how it’s done.[00:24:14] KA: Yeah. Because, I think he's using or they are using, I should say, a preprocessor for figuring out, like what elements are to be hydrated. I’m not sure how that is one way to do it without having the actual feature in Svelte. I think they default to just using the server side render. They render to server side. I think that's an interesting idea. It breaks some of the – you can't really use actions, if that's your approach, I think, which game over. Yeah. Well, the thing is actions are hydration for single elements anyway, right?[00:24:52] SW: Yes, they are. Yeah.[00:24:53] KA: If you could have that feature, as well as the partial hydration of components, that would be nice. Mostly because I like actions, though. You guys probably know that.[00:25:03] TLH: I mean, a simple idea would be maybe a generated ID on your element that you use action and then you just get element by ID to get that element only and then you apply action on itself. That would be much better than go through all the elements on your DOM.[00:25:20] KA: Yeah. I was thinking about how you would do it and that's pretty much like conceptually, how I figured it would work. I’m not experienced enough to actually implement it. I should try making a preprocessor for something like that. That would be fun. Typescript, how do you feel about that in Svelte? Do you use typescript at work at the moment?[00:25:44] TLH: I think Swyx knows about it. Yeah, we were using flow. Breaking news, right now we are actually experimenting with migrating from flow to typescript, because of the community support that typescript has. It's a pain process, but I guess, we have to go through with that.We started very early with our code base, where we decided to use a static analysis, a static type checking. Back then, I think that was three, four years ago. I think back then, flow is more promising than typescript. Yeah, but you never know these things. We were hoping that flow gets better. I was thinking about contributing a flow, but it's written in old camel and it's just a pain to setting someone to read the code.[00:26:29] SW: What are the pain points? Because I’ve accumulated quite a few stories of flow to typescript migrations on the React typescript cheat sheet. I haven't done it myself. On the surface, it looks pretty similar. There are some minor differences, but what's the pain point?[00:26:43] TLH: The pain as in there's a lot of work to be done, rather than – Yeah, there's just a huge code base that there's a lot of work to be done. That's all. Yeah, and that takes time. You have to make sure that every code that you change or transform still works at its intended. Yeah, I think that's the main problem.[00:27:04] KA: In Svelte, have you tried typescript in Svelte?[00:27:08] TLH: Yup. I managed to make a PR language tools last week, because we just merged this, okay, upcoming feature for Svelte. I think in a Svelte component, basically, you have slots. Basically, you can't know where the user of your component, whether they pass in a slot or not. Back then, it's not possible to do it, unless you go through the props and figure that out yourself. The next version of Svelte would have a syntax called dollar, dollar slots where you can basically get that to know, to figure out whether a certain slot is being passed in.I was thinking, hey, this is a new thing. I think I should add it to the language tools as well to get the type checking for that, at least when you type another slots and then you press dot and then it should suggest you the slot’s names that you use, that would be cool. That's what I was thinking.[00:28:04] KA: That's exciting.[00:28:05] TLH: That is already merged in. You still can't use dollar, dollar slots yet, but I think it's working now, basically, I guess. Yeah, but the syntax itself is not available in Svelte yet. We haven't published a new version.[00:28:16] KA: All right. Do we have any last questions?[00:28:20] AJ: No. I mean, I don't have any questions. I was just going to say that I think Tan Li is basically, the slots man. King of slots.[00:28:29] TLH: I learned a lot from slots. Yeah, in the very beginning, it's very confusing, but I learned a lot and there's a lot of bugs that yeah. I learned a lot, basically with this.[00:28:40] KA: All right. We're going to go into our second segment. First, a word from our sponsor.[SPONSOR MESSAGE][00:28:52] KA: Are you looking to get better at building websites in Svelte? Well, you're in luck. LevelUpTuts has tutorials on how to get started. Check out the Svelte for beginners and Sapper for beginners courses at up. Now we're back to our regular topics. First up, we have plenty. What's plenty? Anyone.[00:29:17] SW: I don't know where it came into my consciousness, because I think it was on Hacker News a few weeks ago. They build themselves as a site builder. I think of them as a WYSIWYG CMS. They can edit directly on the site. I’ve seen this before with forestry's Tina CMS and there's a bunch of CMS's that let you directly edit elements on your page. If you go to, you can just type in – you just edit parts of the page and that's interesting. It's built with Svelte.[00:29:45] AJ: A good choice. A good choice. Always a good choice. Yeah.[00:29:51] KA: All right. Then we have Sheperd.js. This is pretty cool, right? How would you describe this, you shepherd your users on your website to the correct features? It highlights your – how would you describe this? It's like a tutorial walkthrough.[00:30:09] TLH: Yeah, a guided walkthrough.[00:30:10] KA: Yeah, walkthrough. That that's good – a good way of describing it.[00:30:14] SW: It feels like a cartoony type of vibe. Actually, it's pretty similar to Li Hau’s own site, because it has the black borders, very thick shadows. Anyway, I think it's a tool for doing walkthroughs and I think this is something that I haven't needed to implement something like this, but if I needed to do a product walkthrough, I’ll use something like this for sure.[00:30:36] AJ: Yeah. I think it's something that we would use actually. We are using one, a competitor right now, but we're pretty unhappy with the competitor’s bundle sizes and all sorts of other things. Definitely something I’ve been looking into.[00:30:48] KA: Interesting.[00:30:50] SW: CodePen actually uses another version of this as well. I’m not sure what they call it. They talked about it on CodePen Radio, the thing that they used to do in product walkthroughs. I think there are a bunch of these tools out there. I just haven't needed them.[00:31:03] KA: This one is built in Svelte, right?[00:31:06] AJ: Exactly.[00:31:10] KA: Okay. Should we talk about this, the Svelte scale thing, that F. Nelson did?[00:31:16] SW: Yeah, sure. I’ve looked at it a little bit. Honestly, I don't know why he decided to do it this week, but this has been a very, very long standing question about Svelte's overhead, because Svelte, like Li Hau says, if you go through the compiling, you understand that there are some parts which are quite repetitive and that's based on Svelte not having a runtime essentially, or having a very, very small runtime. Rich Harris also talked about this at the Svelte Society Day final talk, where he said there is a crossover point. When we get there, we can actually figure out how to optimize it, because Svelte is a language.What F. Nelson actually did was to essentially run the simulations by bootstrapping pieces of source code from zero source kilobytes to 80 source kilobytes and then translate that to a bundle size of zero to a 150 kilobytes, just seeing how much does that actually generate. How big does your source code base have to be to generate a bundle size of a certain amount? Then plotting a line, like a regression line and then doing the same exercise for React and then plotting the Svelte line versus the React line and seeing where the crossover comes in.Then, he concluded that the crossover point is a 120 kilobytes, which is pretty interesting, because that's roughly the exact size of the React runtime itself. Meaning, that when you get to a point where your Svelte output, your swap compiler output gets to the size of React, then you're actually start – you're starting to be better off using React instead of Svelte.His final point after arriving at that crossover point was that you never get there, because Svelte component source sizes are so small that even the Svelte dev site only gets up to 40 kilobytes, not a 120. The real-world medium clone Svelte site only gets up to 25 kilobytes. You never get to a 120. The conclusion is yes, it scales.[00:33:10] AJ: I think it's worth that final point clarifying that it is actual Svelte source that has to reach that file size. That's a lot of sources and that's a huge amount of source. I don't think all of our applications combine that with built Beyonk are a 120K. If you're building application that big, I think maybe it's even time to consider breaking it down to multiple applications, because I can't imagine how big the application gets at that point. Yeah, it's a pretty important finding, I think, that the crossover point is almost impossibly high and a lot of users will never ever reach it.[00:33:41] KA: There was a point about code splitting, right?[00:33:43] SW: I think when we talk about bundle size, what we're concerned about is actually bundle size correlates to how fast a user downloads your application and actually sees the code, which means that what's the minimum size of code that you need to be in the browser before you can actually interact with the application? My point is you usually won't go there. Even, you mentioned that the whole site takes 34 kilobytes, but that's the entire site. You don't have to download everything to just see the website.I mean, if you say you want that, I don't think any user would go through from the first page to every page, like staying within the same session. Most probably, he will go visit the first page and then close the tab and open again and go to another thing. You don't really need to download entire site to just see the site. You just need that page. That is where you do code splitting, where you basically break down pitch level and then probably if the page is too big, then you break down by component level, where anything that is below the screen where you don't see it on the first time, you don't really have to load them, that would be the code splitting part. I mean, the entire site is 34 kilobytes, I think. I get the number. If you do code splitting, then per page is nowhere near there at all.[00:35:04] AJ: Yeah. If you look at the way that Sapper does code splitting, for example, every component is almost a different chunk, so it does a lot of that heavy-lifting of splitting for you.[00:35:14] KA: Good news for Svelte, I would say, follow this. One element of that is also that he looked at Preact and he also found that Preact had a shallower curve than Svelte, which I think was a very good point in favor of Preact. I think that maybe the other difference then comes with the other out of the box features with Svelte compared to Preact.[00:35:36] AJ: I think what Preact, is only 3 kilobytes, I think, isn't it?[00:35:40] KA: Yes. Yes.[00:35:43] AJ: Pretty small. Super small.[00:35:46] KA: I think this comparison was also with the animation library included, as well as some other part? I think I read that somewhere. Maybe I’m misremembering though. I’m not sure. Anyway, let's move on. The new Svelte Society website. Well, sort of new, kind of new. Last night, or was it the day before, recently anyway, I merged the staging branch into the master branch and so we have a new website. It looks the same, but it doesn't have – the earlier website was only the website for the Svelte Society Day. Now it's the actual website for Svelte Society. All the recipes are there. It's under heavy construction, something I’d like to say. We're looking for help, if anyone is keen on contributing, we welcome that. If you want to add recipes, you do pull requests with a new file.[00:36:44] SW: Yeah. I think the recipes effort was quite successful. We got quite a bit of contributions. Honestly, I think now it's a matter of publicizing that we have them and then making it easy to contribute back. I don't see an edit button here, so you probably need to –[00:36:59] KA: Yeah, that's a good idea.[00:36:59] SW: - probably need to GitHub. Yeah. I mean, hopefully Svelte Society can be a nice second layer on top of the core Svelte API docs.[00:37:09] AJ: I think another, yeah, another good thing is if you see one of those recipes and you're an expert in that particular field, then by all means, feel free to improve it and make it more concise, proof whatever else. Because I think a lot of it is written by somebody who's discovered how to do something and maybe it's not the best way. All that stuff is good as well.[00:37:28] TLH: It looks great.[00:37:31] KA: Yup. Congratulations. It was time to get this merged in. Yeah, things always take too long, or longer than you think, unfortunately. All right, Flare in Svelte. Have you guys used Flutter much?[00:37:52] SW: Only for the first time this week, because we launched a Flutter – we launched Flutter support at work, so AWS now supports Flutter. People are very excited about that.[00:38:02] KA: It’s like amplify for Flutter?[00:38:04] SW: Yes. People are like, AWS is supporting Flutter. It's a thing now. No, it's one service in AWS supports Flutter.[00:38:14] KA: It's better than zero.[00:38:16] SW: It's always funny how you can tell the person is biased by how they spin things. Anyway, so it's a start and I tried it out. It's basically, a more type safe React, which is pretty funny about all the new UI paradigms. Is it 50Y?[00:38:32] AJ: Yup. Yup. It’s 50Y.[00:38:35] SW: Yeah. Okay. There's 50Y, there's jetpack compose from the Android team and then there's Flutter, all of these are all React inspired. All their APIs are heavily, heavily React inspired. It's just weird seeing React paradigms in other languages. It's like, Flutter is in Dart and then the others are in other languages. I think one thing that's definitely in its favor is that it's got a better standard library, like anything that you want out of the box, icons all the way down to scrolling – infinite scrolling lists. All there. It's definitely much more convenient than having to find your own.[00:39:09] KA: Yeah. Yeah. I remember trying Flutter for a bit after using React Native for a while. I was pleasantly surprised by it for sure. Flare is something that you usually use to make animations that you can just import straight into Flutter pretty much. Someone made a Svelte, I don't know what to call it, a library or wrap – Yeah, yeah. Something that makes it possible to import the animations into Svelte as well. That's pretty neat.I haven't used the tool to make the animations, but it's supposedly very easy to make. The downside is that you have to import the flare.js library, which is 7 megabytes big. A bit too big for the web, but maybe if you can make it work for Svelte Native, that would be cool. I haven't tried it, but maybe.Time for our second sponsor spot. We'll be back in a bit.[SPONSOR MESSAGE][00:40:08] KA: All right. Our second sponsor is Mono Company. Mono is a digital product studio that works remotely. Within the Svelte community, you might know Wolfer. He's designer that worked on the Routify website and he also has worked on the Svelte Society Day website, as well as the Svelte Summit website. He wanted to sponsor this episode with a simple message that as a design team, they are open for new client projects and they have extensive experience designing web applications with full-on custom design systems.Mono is typically responsible for the UI and UX in a project and they work alongside developer teams. They love designing web apps and want to support Svelte, because it's an awesome framework. Check out their website at That's We have some meet-ups to talk about.[00:41:02] SW: Yeah. I put some in here just to try to raise visibility for them, in case anyone is in a position to join them. I think the first is Svelte Brazil is coming up on 1st September, which is next week. Yeah, if anyone is speaking Portuguese and/or is in Brazil, I would join. I think they seem to be quite active. I think they have a monthly meet up going, which is pretty cool.[00:41:25] KA: Yeah. Then Svelte Society Day friends at the of September.[00:41:29] SW: Yeah. That’s the end of September. I got more talks than Svelte’s Society Day got, which is great. I am not going to understand them, but we can check it out and see what's up in the French side of things. The organizers are just really responsive on the ball. It's pretty exciting to see. I think the cross-language element is something that I’ve never personally done in terms of community building, but it's actually pretty high potential for Svelte at least, I think.[00:41:57] KA: Yeah. I’m going to bank on YouTube's auto translate thing.[00:42:02] AJ: Good luck with that.[00:42:02] KA: We’ll see if that works. Yeah. Svelte Philippines. This is new, right?[00:42:09] SW: Because of where the community is, they run it as a Facebook group and it's private, so I cannot see when their next event is. If you are in the Philippines, check it out. It's a Facebook group. There's a 150 people there. It's a decent-sized meetup already.[00:42:23] KA: Cool, cool. All right and then the big one, Svelte Summit.[00:42:29] SW: Yeah. Give us an update.[00:42:31] KA: Yeah. We have loads of proposals for talks, which is good, like more than double last time so far. You can still submit proposals as well. If you're interested in doing a talk, it could be long, it could be short, beginner, advanced, intermediate, anyone is open to submit. You can do that on the website. Yeah, check it out. Okay, so I think that's all of our topics for today. Do we have picks? I don't have picks.[00:43:04] AJ: I did have a pick. I’m trying to remember what my pick was. I did have a pick. There's plenty of picks. I think my pick is going to be a really weird, a really abstract one. I just want to say that I bought a dishwasher on eBay. I bought it for 30 quid, because it had a crack in some of the plastic on the side, like the water tank. I basically bought it for 30 quid. It's a 700 quid dishwasher. It's two-years-old.I got some gorilla glue, maybe gorilla glue is my pick. I don't know. I gorilla glued the plastic and it works perfectly. I’ve now got a two-year-old 700 quid dishwasher. That is my pick, because it's probably the best thing I’ve bought this year. Never mind this recently.[00:43:48] SW: Gorilla glue is the thing that it sticks to glass and it makes – is that what it does?[00:43:52] AJ: It sticks to almost anything. The thing it doesn't stick to is this polypropylene plastic. I must say that the dishwasher is polypropylene plastic on the tank. It still sticks. I sanded it down. It sticks fine. The reason I used gorilla glue is because one, it's waterproof, which is impressive for glue. The second thing, it’s actually heat proof, so it can withstand ridiculous heat, like 70 degrees. Also, I think minus 20 as well. It's really, really resilient stuff. It's way better than any glue I’ve seen before. Yeah. Really, really good stuff.I think the way it works is interesting. The way it works is actually, just a quick mention is that when you put it on something, it actually expands. It expands into any pores it finds on the materials you're gluing. It becomes almost part of the material.[00:44:37] SW: That's pretty smart.[00:44:40] KA: Yeah. I wish I was a material scientist sometimes. All right, do you guys have any picks? Should I try to find something?[00:44:51] SW: I can go. Actually, I’m going to pick GitHub's renaming project. A lot of people are interested in moving and renaming their default branches from master to something else. I think main is the default that people are moving towards. GitHub is doing all the engineering for this for us. They enabled the ability to fall back on branches, I think in August. The thing that they just released as a new feature is to set the default for new projects. When you create a new repo on GitHub, you can set it to whatever branch name you like. That's a new feature as well in git itself. Git version 2.28, which is released this year has a new config called init.defaultbranch that you can name. I wrote up a cheat sheet of things that you can do to do this renaming thing and I put it in the list. Basically, GitHub's renaming is my pick.[00:45:45] KA: Cool. Nice.[00:45:47] AJ: Very cool. Yeah, that's nice.[00:45:49] SW: The one thing that it doesn't have right now is mass renaming. I have 600 repos on GitHub. I’m not going to go through and do them one by one. They're working on a tool to do a mass rename.[00:46:01] KA: That'd be pretty nice.[00:46:05] TLH: I have a pick. Yeah, so I was reading – I think recently, I was subscribing to a lot of newsletter. I found this newsletter called Front-end Horse. Very interesting. It's like a horse, as in H-O-R-S-E.[00:46:19] SW: Yeah, Alex trust.[00:46:22] TLH: Detailed breakdowns on how do you do a certain animations. Yeah, basically interesting project. I think the latest issue was that they break down a CodePen telling you the individual techniques and how to achieve that. That was pretty amazing. Because usually when sometimes newsletter will just curate interesting projects, or interesting pens, but you have to figure out yourself. Yeah, this is my pick. Front-end Horse, guys.[00:46:53] AJ: Front-end Horse. That's an interesting one.[00:46:55] KA: Yeah, it's a funny name.[00:46:57] AJ: What is this thing with horses? There's the horse of JS and all sorts of things like that?[00:47:01] SW: Yeah. That is JS. I think that's unrelated. I think there's a horse TLD and it's just better than .com.[00:47:11] KA: It's an actual TLD – hyphen and dot –[00:47:13] SW: .horse.[00:47:14] AJ: That's great.[00:47:16] KA: I thought it was just part of the name or something. I guess it is. Yeah. Okay, so my pick is a YouTube channel, a guy called Kevin Powell. He does CSS stuff and I’ve been binging on his videos the last week or so, learning a lot of neat CSS tricks that I didn't know about. I’d highly recommend it. You can do a lot of things in CSS that you couldn't really do before. They're very neat. You can get rid of a lot of JavaScript and just use CSS instead.All right. Cool. Those are our picks. That was it for this week and we'll talk to you guys in a couple of weeks again.[00:47:58] SW: Thanks to Li Hau for being our guest.[00:48:00] TLH: Thanks for having me.[00:48:05] AJ: There’s a lot more people listening now.[00:48:07] SW: I know, right? Thanks to the people in the audience for staying silent in the entire time.[00:48:17] TLH: Thanks for having me. Tt's been very happy to be on here. I’ve been listening for you guys for the past few episodes.[00:48:24] AJ: He’s a true fan.[00:48:27] TLH: Yeah. There's a lot of things to learn about Svelte. I think that's the only – it's rare to find Svelte podcast or newsletter, I guess.[00:48:35] KA: Yeah, for sure. For sure.[00:48:38] TLH: You guys did a very good job of curating interesting projects that's coming out on Svelte.[00:48:42] KA: Thanks for the kind words. All right. Bye, guys.[[00:48:46] TLH: Bye.[00:48:46] AJ: Bye.
9/1/202048 minutes, 43 seconds
Episode Artwork

Svelte Summit 2020, Sapper is getting some love and Elder.js is really cool!

This week we announce the new online conference Svelte Summit as well as talk about Elder.js - an amazing new static site generator. Oh! And some good news. From this episode and on, we have an editor and the episodes will be transcribed.Sponsors: Mono is a digital product studio that works remotely. Within the Svelte community you might know Wolfr he is a designer that worked on the Routify, Svelte Society day and Svelte Summit website. He wanted to sponsor this episode with a simple message: as a design team, they are open for client projects. They have extensive experience designing web applications with full-on custom design systems. Mono is typically responsible for the UI and UX in a project and they work alongside developer teams. Level Up Tutorials brings you cutting-edge, focused & high quality video tutorials for web developers and designers. Check out the Svelte For Beginners as well as Sapper for Beginners courses. Links:  Svelte Society Day France - September 27th, 13 talks!  Svelte Summit is on October 18th - CFP and Sponsors can apply now! Routify 2.0 Roxi Elder.js - A new crazy-fast static site generator built for SEO and many other use-cases. Partial hydration using Jason Miller's Islands Architecture Svelte Tutorial on MDN Picks: Streamyard Gloomhaven Jack Box Games Transcription:EPISODE 09[INTRODUCTION][00:00:00] KA: Hey, everyone. Welcome to another Svelte Radio Podcast. This week, we don’t have a guest. But as usual, the three of us are here. So, I’m Kevin. I run a site called Svelte School, where you can find tutorials and the training material to learn Svelte. And I’m joined by my two other cohosts, Shawn and Anthony. Do you want to go ahead and present yourselves? [00:00:28] SW: Hey, everyone. This is Shawn. I guess I have to do some self intro. I work at AWS as a senior developer advocate, and happy to be here. [00:00:38] AJ: I’m Anthony, and I the CTO of Beyonk, which is a booking platform, book software for experiences and travel. And I am also a Svelte maintainer. [00:00:49] KA: Amazing. So since last time, what have you guys been up to? Have you done anything interesting? [00:00:57] SW: Well, I can go while you guys think of your updates. I can only think about the things that I’ve been doing recently, which is not doing Svelte. So kind of the biggest community React Conference is called React Rally, and it’s happening tomorrow. And I spent the last two weeks essentially – Well, this is Svelte related. I’ve created Svelte for React. Basically, the way that you do immutability and sort of assignment in Svelte, you can actually just point that over to React. I did that. And then I made a whole talk around it with the whole idea of like why you should be experimenting with different formats and stuff like that. Preparing any talk is big, but I think this conference is special to me because that’s how I first stated. That’s my first ever conference in 2018. That’s the first talk I ever gave. And I owe a lot to that conference. So I wanted to do a good job.[00:01:54] AJ: Yeah. From my point, it has been 38+ degrees here in the UK and it’s very hard to work and very hard to think in that kind of heat. And specially we don’t have air con in our houses and stuff like that. So it’s just a matter of – I don’t even know. There’s no way to stay cool. But meanwhile, I’ve been obviously working hard in my startup, which is Beyonk. And then we’ve been doing a fair bit of Svelte work. So mostly that and making contribution a bit easier. Getting some PRs closed and that sort of thing. Yeah, all kind of very software-related and the crazy heat.[00:02:39] KA: Okay. So I’ve been working these last few weeks on the new Svelte Society Day website as well as the upcoming conference that we’re going to talk about in a bit. Spoiler alert. Then today we are also going to talk about some other stuff. There’s new static side generator. Routify just released their 2.0 release, and a couple of other random things. Let’s get started. First off, Svelte Society Day France. I heard they had like a lot of proposals.[00:03:17] SW: Yeah, they did better than you. They’ve got some proposals so far. I’m not sure when this is going to release, but they’re aiming to close proposals on 16 of August. But they have a good selection. It’s always better to have more, I think. And I think the actual event is happening at the end of September. If I was any good at this job, I would have their URL in front of me. It’s actually Basically, if you speak French and you do Svelte, you should come to this meet-up, or conference, or whatever it is, on the 27th of September, and it will be a good time.[00:03:54] AJ: I think it’s worth noting. We’re talking about it in Discord and they were saying that sort of majority French talks, but not exclusively. So they might have some English language talks as well. [00:04:05] KA: Yeah. I was going to say, I’m going to check it out even if I don’t speak French.  [00:04:11] AJ: Yeah. Yeah, exactly. There might be opportunity there if you don’t speak French. They’ll also still – They’ll join in and participate and sort of learn some stuff.[00:04:18] KA: Yeah. All right. The big one, Svelte Summit 2020. This is the new conference. Yeah.  [00:04:28] AJ: With the shiny, shiny site.  [00:04:31] KA: Exactly. By the time you listen to this, the website is going to be alive, and you’re going to find it on three different URLs. But mainly I would probably go to So this is pretty much the new Svelte society day, but with a shinier name, cooler website and more speakers, hopefully. We’ll see. We’ll be opening the call for proposals as soon as this podcast goes out. [00:05:00] AJ: But what sort of talks are we looking for for these companies?  [00:05:04] KA: That’s a good question. If you’re interested in doing a talk, I would submit it regardless of the subject pretty much as long as it’s Svelte related, of course.  [00:05:15] AJ: And then we can come to Discord and chat about any of the proposals in the society chat.  [00:05:21] KA: Exactly.[00:05:23] AJ: And what sort of length are we talking about talk quite here? Are we doing sort of lightning talks or we’re doing longer talks or –[00:05:29] KA: I’m thinking we should have both lightning talks and regular talks. So a lighting talk would probably be something like 10 minutes-ish. But longer ones, 30 maybe. It’s not a hard limit on like how long or short the episodes can be. Sorry. The talks. [00:05:46] AJ: Basically it’s good because it’s kind of like an opportunity to somebody who hadn’t talked before maybe to have their first talk? But it’s prerecorded I’m guessing. I mean, it theoretically makes it a bit easier, but also maybe doesn’t always make it a bit easier. [00:06:02] KA: Yeah. I noticed that last time. But this time, we’re going to do it a bit differently.  [00:06:07] AJ: Sure. [00:06:08] KA: We’ll do a YouTube premier kind of thing. [00:06:11] AJ: Nice. Yeah. Yeah. [00:06:12] KA: One thing we haven’t mentioned is the date. It’s on the 17th of October, I think. Day 18th. [00:06:22] AJ: This is critical information, right? [00:06:25] KA: Yes. I need to check this out.  It’s the 18th. Good thing I double checked. [00:06:36] AJ: Cool. I will indeed be preparing a talk. I just have to figure out exactly what, because it’s lots of different things.  [00:06:43] KA: Yeah.[00:06:43] SW: Yeah. I mean, I wonder if I should do that or maybe I should just take it easy for this – [00:06:50] AJ: You should give a talk.  [00:06:52] SW: We’ll see. We definitely want new voices and new faces, especially people of color and women and that’s something that I’m very keen on as well. So to have more representative voices. Yup. [00:07:03] KA: Yes, for sure.  All right. So we’re going to take a short break and we’ll be back in a bit. This is the first sponsor of the show, Mono Company. Mono is a digital product studio that works remotely. And within the Svelte community, you might have heard of Wolfr. He coincidentally made the Svelte Summit website design, and he’s worked on the Routify website as well as the actual Svelte Society website. And he wanted to sponsor this episode with a simple message. As a design team, they’re open for new clients and they have extensive experience designing web applications with full-on custom design systems. Mono is typically responsible for the UI and UX in a project and they work alongside developer teams. They love designing web apps and they want to support Svelte, because it’s an awesome framework. Checkout their website, it’s That’s[00:08:10] SW: That’s a pretty nice URL. Yeah. I mean, his designs just look amazing and he just does it so quickly. It’s pretty cool. [00:08:18] KA: Yeah. It is amazing. I don’t understand how he can do it so quickly.  [00:08:24] SW: Yeah. I think designers who can develop or developers who can design are just – They can do so much with so little resources. It’s really cool to watch. Thank you, Mono, for being our first sponsor.[00:08:37] AJ: We met one of merged contributions into the site yesterday and it’s great, because it’s fixed that long-standing issue on the Repl and iPhone where you have to scroll down to get the input-output toggle on. And it’s fixed that. It’s beautiful. I could now code on my iPhone, which is great.[00:08:52] KA: Yeah. That always bugged me a bit to like scroll up of it. Yeah.  [00:08:57] AJ: Well, it’s fixed. It’s done.  [00:09:00] KA: That leads into our next topic. The last Svelte Maintainers Meeting. [00:09:05] AJ: Yeah. So you may have noticed in the last couple of weeks, three weeks or so, the maintenance status of Svelte and Sapper has increased dramatically. Obviously, it’s a kind of combination of the ratings we’ve had so far. Also the addition of [inaudible 00:09:21]. I want to give Ben [inaudible 00:09:22] a shout. He’s a machine. I don’t know how he has time to do all these stuff he dies. But if you can think of something, there’s a PR for it already. He’s opened it and it’s ready to merge, right? It’s crazy. He’s also would be working through and triaging and checking and testing all the existing PRs. A really good addition to the maintenance team there, and I think everyone’s kind of been sort of inspired by that. And so obviously you see the tractions. You see things going in and it kind of eases kind of the block a bit more. Great stuff. He’s yet to join us in a maintainer’s meeting. The last one was where we discussed adding him. What came up the last maintainer’s meeting was a focus on Sapper. Obviously, Sapper was sort of sidelined for a long time just whilst we got Svelte up to a place where we wanted to be. The goal – Sort of the future of Sapper is there’s a lot of talk about modularizing it. Maybe not even having a thing called Sapper, but turning it into a series of roll-up plugins that make up Sapper. So like a routing plugin. A plugin for the kind of internals, bundling, the splitting. This is all underway. There’s a Discord user called Adam B. or AJ Boo on GitHub as well. He’s actually kind of started this prior to us even discussing this. I don’t know how well his stuff aligns with kind of the main vision.I’m supposed [inaudible 00:10:47] of writing RFC on how to split this. But I found that it takes a lot of time to write an RFC. So it’s kind of been delayed. Meanwhile, he’s doing a lot of things that I kind of wanted to anyway, which is great. Yeah, that’s the plan for Sapper, to modularize it and do a lot of other cool stuff and maybe make it kind of have differential root bundling so you can have fully static routes, dynamic routes, SBA routes, SSG routes, you name it. Yeah, that’s going to be a series of stuff that’s going to be appearing as RFCs in the hopefully near future.  Meanwhile, we’re just cleaning up everything else around Sapper. Probably half the PRs that were there are now closed. I think merge didn’t close, which is great. Yeah, looking pretty rosy. Then we’ll have to focus on Svelte again, because now Svelte is becoming the one that’s get sidelined.  [00:11:37] KA: It’s usually our goals, right?  [00:11:39] AJ: Yeah. Exactly. Yeah. And then the next maintainer’s meeting I think should be in one or two weeks away. Yeah, and I can’t tell you exactly what the topics are for that. But we do have quite a lengthy list of topics that will break back reports. [00:11:53] KA: Yeah, lots to talk about. So little time.  [00:11:56] AJ: Well, you could say a little time to talk about it and even less time to do it. So, again, hugely relied upon the contributions from the community. Nice, clean PRs coming in. Looking pretty good.  [00:12:09] KA: That’s awesome. All right. Shawn, do you have anything to add to the – [00:12:14] SW: No. I think to the extent that we have some sort of roadmap. I think it’d be good to publish it. Make the Svelte blog a little bit active. And in terms of – I hate to say it, marketing, having some sort of conscious – Effort to have minor versions and actually tell people like, “Okay. There’s a new minor versions. These are the things that we added.” Stuff like that. Is there a change log? I don’t even know if there’s a change log.[00:12:39] AJ: Yeah, there’s a change log [inaudible 00:12:40] maintainers the change log.[00:12:43] SW: Okay. Yeah, we can publicize that a bit more. [00:12:46] AJ: Yeah. We probably should publish it, the change log. We probably should tweet about it. I might even see if we can clone the society auto-tweeting thing from GitHub. If we can make it part of that or something. However, what I will say about roadmaps is that they can be a double edge sword. Whilst it’s great that people can see and have disability over what, the plans or where they’re going. They also become a kind of tie in a commitment. With the amount of stuff that people are doing and working on, there’s less time and less time to actually make these changes especially when they’re quite large. I think there’s the fear of having a roadmap that maybe is stale or where things have just sat forever and never moved. It’s definitely a consideration, but there are reasons that there isn’t one in any sort of formal sense as of yet. [00:13:36] KA: Cool. Cool. Cool. So, Routify 2.0. I don’t know how much you know about this release, but apparently it’s not as big of a deal as it sounds. It’s just that some of the changes are breaking. [00:13:52] AJ: Okay. [00:13:53] KA: There are some small editions, but nothing major. I think Jake is working on this new framework, Roxi. [00:14:03] SW: Roxi? [00:14:03] KA: Roxy. Yeah, R-O-X-I. I suspect we’ll hear about that in a couple of weeks maybe. [00:14:10] AJ: I mean, Roxi, from what I understand, it’s like modular Routify, right?  [00:14:14] KA: I’m not entirely sure exactly what it is. I’ve been a bit out of the loop these last few weeks, but I guess we’ll hear about it. That also made me think about Roxi. Is that like what do you call it when you switch around the letters? Anagram? Is that what it’s called?[00:14:30] SW: Yeah. Yeah. Anagram.[00:14:31] KA: Yeah. Is Roxi an anagram for Rixo?  [00:14:35] AJ: Oh, yeah. Maybe.  [00:14:39] KA: I don’t know. I’ll have to investigate.  [00:14:43] SW: Well, for those who are less well-versed, what is Rixo?[00:14:47] AJ: Yeah.  [00:14:49] KA: Yeah. Rixo is a person. He maintains the Svelte HMR kind of thing and he made a project called Svench as well. It’s like the storybook equivalent in Svelte lang. [00:15:05] AJ: Yeah. Rixo is HMR guy, is what I call him. He’s a guy who comes and he claims to be some sort of junior and he’s just kind of looking at the HMR implantations and copying them. I’m like, “Yeah. Okay. That’s not junior.” What he’s done is mind-blowing in HMR. It’s just really good, and I’m using HMR in a lot of projects now. In fact, that’s one of the reason I’m using Routify, because I’m using Svite, which uses the HMR plugin underneath and it uses Routify. And it works really well. It works really nicely. It’s a very impressive piece of work.[00:15:38] KA: For sure. [00:15:40] SW: Yeah. I mean, I’ve been trying out Svite as well. And in order to – So Svite is built on top of Vite, whatever. And in order to write Svite, he had to figure out how to write a Vite plugin, which is not documented. So then you just have to dive through the codebase of Vite and figure it out. And he did, and it’s pretty impressive. I don’t know how to do that. So kudos to him.  [00:16:08] AJ: Yeah. Dominik is also and one of those just doing stuff that didn’t seem possible. [00:16:14] KA: Yup. All right. Next topic is a new static site generator, Elder.js. So you guys haven’t used it much. I tried it a big. It was jure released. The name is quite odd, Elder.js. It’s because of the company that released it. It is called ElderGuide, which I don’t even know what you want to call it. Like elderly home review kind of site. [00:16:47] AJ: Yeah. It’s like a care home review site.  [00:16:50] KA: Yeah. That’s right. So the documentation is on that site, which is funny. So you can – Like the top menu shows you like, “Oh, check out the nursing homes, etc.” It’s kind of funny. Anyway, what are the features of Elder.js? Elder.js is kind of like – It boasts like insanely fast build times. I think he mentioned something like building 17,000 pages in like 8 minutes, which is mind-blowing fast. He also seems like one of those guys that just does the impossible sort of. The idea is basically that you set up your data fetching mechanism beforehand. You can hook into the build process at different times and you can manipulate the outputted HTML and so on. One of the major features that I kind of like is the partial hydration. He’s using a preprocessor to look at the components. And if there’s a certain attribute on there, it makes it interactive. And otherwise, it just keeps it statically generated, which is kind of nice. So you can have, for example, a forum that’s interactive but the rest of the site is just static. Makes it so it doesn’t ship double the code. [00:18:20] AJ: It’s pretty impressive.[00:18:22] KA: Yeah. The docs are really good. I think he spent like several days writing these docs. [00:18:29] AJ: I mean, it’s a good way. It’s a good way to kind of write docs for yourself as well, isn’t it? To remind you when you can back to it after a while. Yeah, for sure. Docs can be almost a freebie.  [00:18:39] KA: Yeah. I tried writing a plugin for this static site generator, and it’s just like a regular RSS feed data fetching plugin and it was really easy. Like super, super easy. I would probably like compare it a bit more to Gatsby than Sapper. But it’s not exactly the same. It doesn’t necessarily use GraphQL, for example. Yeah. [00:19:06] SW: Yeah, it doesn’t. My comments on this thing – I mean, anytime someone else writes a static side generator. That means I don’t have to do it. That’s really great. And this is a very significant effort that he did not have to open source, but took the extra time to share it and it’s pretty cool. Yeah, I’m seriously considering rewriting my own site using this, because it addresses the core criticism that people who criticize JavaScript frameworks have, which is when you do the hydration on your site, you’re basically sending it on the HTML and then you’re sending it on the data and then you’re sending on a JavaScript and then you’re re-rendering all that in JavaScript. That seems silly for something with a site that has mostly static content. I think that’s true even for Svelte. But it’s also true for React. So the solution is actually something that Jason Miller from Google has been calling the Islands Architecture. So that’s on his site at  And it’s this idea that, “Okay, you have a site. It’s got a header. It’s got a sidebar. It’s got a middle content page. It’s got a footer.” And guess what? Only parts of the site needs to be interactive. The rest is just static content. So the way that we did it before JavaScript frameworks was essentially like, “All right. We’ll throw in some JQuery and then we’ll do some interactive element and event listeners to those parts of the site.” And then when we transitioned to writing sites using frameworks, we kind of lose that, because we try to rehydrate everything so we have consistency. I think Elder helps to return us to that mode. Because Svelte is such a nice authoring format for collocated like styles and templates, and then maybe JavaScript, right? I think Elder just like kind of assumes that by default, it will only output HTML and styles and it will be kind of scopes styles to that HTML component. And then if you want JavaScript, you have to opt-in by adding this attribute, like you said, which is the hydrate-client, and then that’s an indication to Elder.js that, okay, everything under this part you can hydrate using JavaScript. But it makes for a very, very, very small components and they can all be sort of loaded independently. I think that’s the main innovation here that I don’t it exists in other frameworks. I think this is a world-first, and this is pretty cool.[00:21:36] KA: Yeah, I like it a lot. The reason I built the RSS plugin was to make the new website for this podcast actually. So I’m going to try building something cool in Elder.js to make the website a bit more active and better.[00:21:54] AJ: Sounds good. Sounds good. I haven’t got a use for static site generator at the moment, but it’s definitely something that I want to do, because I just have this dream of having a super high-performance site written in Svelte. That’s slightly a dream. I mean, the sites I have now are fast, but they’re obviously dependent upon APIs and that sort of thing. Yeah, maybe one day, hey. [00:22:17] KA: So many things to try out and test.  [00:22:20] SW: Yeah. I think everyone should have a personal blog that they update. I think everyone should write more. And site generators are just a good application of that. So, someday. I know you’re a busy guy. [00:22:34] AJ: Yeah. [00:22:34] KA: Yeah. Svelte in production.  [00:22:36] SW: So, people, we try to collect cases of people using Svelte in production partially to like encourage others to like give them some social proof that like other people who are actually using this and its production ready. The only way – This question of like is Svelte production really? I mean, it’s kind of an arbitrary standard. And the only way to really answer that is to show that people are using it in production and then gradually to people over the edge. It’s the pin tweet on the Svelte society Twitter, And I just have a bunch of people that might be notable. They are recognizable household names, and if people kind of report their apps as well. This kind of like a nice narrative compliment to the who is using Svelte part of the Svelte read me. It’s on a read me, right? Or is it just the site?  [00:23:28] AJ: I saw the site on that. Yeah. [00:23:30] KA: Yeah. [00:23:30] SW: Oh, it’s on a site? Okay. Because like the who’s using Svelte page is just a bunch of logos. I think it’s good to have like stories of like where? So like an internal app or is it like customer-facing? We talked about in previous episodes like Disney and Square Enix, and [inaudible 00:23:50] Cloud, and Elder as well. Google used it recently for an arts – Like a crossword experiment. It’s not the main Google, but kind of like the Google apps or whatever they call it. I think the big news that happened I think this week, actually, yesterday, was that Alaska Airlines self-reported that they’re Svelte for a pretty good use case. Alaska Airlines, it’s a pretty major airline in the US. I fly it whenever I’m on the west coast. And I was like, “Well, that’s interesting. Where do you use it?” And this is what they said. They said, “We’re using it in a new microsite we built to help guests when their flight is disrupted. The guest is often at the airport when they get the notification. So they have slow connection speeds. We chose Svelte to keep our JS payload low.  [00:24:36] AJ: I think it’s worth [inaudible 00:24:37]. One is you mentioned about the logos on the homepage. That’s actually come up in both maintainer’s meetings. It’s something we want to optimize and we haven’t got a really good idea of how to do it. There’s a notion of maybe having some sort of headline apps kind of like big sites that use it. And then everyone else kind of below or maybe deferred to another page or something like that. Maybe randomizing logos goes to so many of them. That’s something we’d gratefully receive as a PR or a least a discussion on how we could better do that, and my idea is throw it apart maybe. So if there’s someone looking for a first contribution, that’s a very good place to start.And the other thing is about, yeah, using something in production. Is something being production-ready? A question we get a lot is when will Sapper reach version 1.0? When is Svelte version 4 coming out? The problem with this to me, and I say it every time, is that a version number doesn’t really mean anything in terms of whether something is a recent production-ready. I’ve been using Svelte since anyone even heard of it, apart from Rich and a few others, right? And I’ve pushed it to production at that point before it’s even got any traction at all. I’m not a person who follows version numbers very carefully. But what I will say is that try and cast aside the notion of a version number or a stable or a major or anything like that. Decide what you want to do with framework X. Write lots of tests. Build prototype. Build spikes. Test it out. Asses it against other frameworks or the things you got and just kind of assert that it can fulfill in a reasonable way all the things that you want to do. And that’s only real way that you can determine whether something is production ready or not. If you’re relying on an arbitrary version number [inaudible 00:26:29] production ready or not, you’re in for a big shot. So I really disagree with the kind of tie between version numbers and readiness, or appropriateness, or fitness of purpose. [00:26:42] KA: Wasn’t it node that had like the longest like 0. something release thing up until like just a few years ago? I don’t remember. [00:26:54] AJ: Yeah. I mean, there’s also – It did. It certainly sort of went from 0.12 or something to 1. But there’s also a movement. I can’t remember what it’s called. But it’s something like never reach version 1.0. And it’s a group of people. Rightly or wrongly, I think [inaudible 00:27:12] is great. I’m not sure I agree with it in concept. But it’s a group of – A movement of people who want to never ever make their projects reach version 1.0. And they just encourage bumping their minor every time. And I think like it’s probably a bit tongue and cheek. But the underlying message is exactly what I’ve said is about. Don’t fixate on version numbers, because they’re meaningless. They mean different things for every person. They’re meaningless as a thing. [00:27:39] SW: Yeah. I was also going to mention, part of the reason I try to track people using Svelte in production is because that is step one to then having jobs for people who want to use Svelte, right? That is kind of the funnel that goes towards that. There used to be [inaudible 00:27:55] called Svelte jobs on Twitter. That seems to be inactive now. I actually don’t even know who operates it. But we shouted out some major players. Recently, like Apple did some contracting work at Svelte.[00:28:09] AJ: There’s quite a few huge names, but it’s just not everyone announces it I guess.  [00:28:13] SW: Yeah. Well, we’re not going to know everything. But I think just to create a community. I think it’s kind of like a weird cycle. Like you have to pay people to put Svelte, to care about Svelte, to put Svelte in production that feeds into people actually relying on this thing and contributing back to community, and that just kind of builds the virtuous cycle.  [00:28:35] AJ: Yeah. It’s chicken and egg. [00:28:36] SW: It is. So, I just want to shout out that there is an opportunity this week from Open Zeppelin. We’re looking for a security platform engineer. It’s kind of like a full stack opportunity. So they do blockchain and Svelte. That’s a very interesting combination, which are very, very cutting edge. Presumably, you want to get very small JS bundles on your Etherium blockchain. I’m making this up. But, yeah, the reason we track these things in production is to build the ecosystem, and I think that’s pretty important. [00:29:11] KA: Yeah. Okay. So we’re going to take a short break and listen to one of our sponsors.  Have you ever wondered where you can learn more about Svelte? How to actually use Svelte?  You’ve probably heard about a site called Level Up Tutorials. It’s run by a guy called Scott. He makes tutorials about all sorts of things web related. And recently he’s been pretty interested in Svelte. So he’s made a Svelte tutorial and a separate tutorial, as well as I think Sapper and Meteor sort of thing. I’m not too sure. I don’t know much about Meteor, but it sounds cool. If you want to learn more about Svelte and how to use it, go to and you’ll end up at the website with some nice tutorials.  [00:30:05] SW: Yeah. I think it’s like a monthly or annual subscription and it’s kind of all you could eat in terms of his videos. And there’s a lot of just frontend-y, full stack-y content. He’s a full stack developer. He’s just records very high quality videos. If you want to check a sample of his stuff out, definitely check his YouTube channel, where he posts a lot of content for free. And I think it’s a good way to level up, like I said. [00:30:31] KA: Good way to level up. Yeah. All right. So, Svelte on MDN.[00:30:38] SW: Yeah. I put this in there. So MDNs recent [inaudible 00:30:40]. It’s still a very important site. And I think something that people don’t really know is that MDN doesn’t just cover like – It’s not just documentation for web APIs from browser fenders. It actually is a community contributed kind of like wiki type of thing. And it covers anything. And that includes frameworks as well. And OpenSaaS. I don’t know his real name. I don’t know if he’s like anonymous or something. But yeah, open SaaS has been working really hard on the Svelte tutorial on MDN, and it’s coming along. I think it’s on part 6, but 7 chapter out of 8. And he’s even covering – Like the type support with Svelte. That’s feels old now. But it’s still pretty new. Yeah, I think he’s looking for contributors. But then you can also just now check out chapters 1 through 7 of the MDN Svelte tutorial and contributive learning. [00:31:38] AJ: And I think that’s still in the kind of beta state? That’s still ready for final review. So if anyone’s got anyone feedback on them or input, then let OpenSaaS know, and they can be updated.  [00:31:50] SW: Yeah. OpenSaaS is pretty active in like I think the Spanish Svelte community.[00:31:56] AJ: Yeah.  [00:31:56] SW: Yeah. That’s all I know about it. [00:32:00] KA: It’s good that this is a thing though. I didn’t know like MDN had information or stuff on frameworks. It’s the first time I heard about it. [00:32:11] AJ: Yeah. It’s a surprise to me too, but it’s good.  [00:32:17] SW: I think that they recently adapted Vue for the MDN site itself, and that was a mildly controversial decision. But yeah. I mean, they’re friends with frameworks.  [00:32:27] KA: Yeah. It makes sense. Okay. That was our last on topic topic, I guess. So let’s move into picks and other stuff.  [00:32:39] SW: Cool. So we’re going to picks? [00:32:41] KA: Yeah. Let’s do that.  I got to think of a pick.[00:32:46] AJ: He’s going to find a pick really quickly.  [00:32:50] SW: Oh. Okay, I got one. I got one.  [00:32:52] KA: Go for it, Shawn.  [00:32:54] SW: Okay. So I’ve been getting into live streaming. I started a live stream with a friend of mine, Thor, from Stripe. His name is Thor, which is great. He even has like a hammer. Yeah. Yeah. It’s like the AWS and Stripe live stream. It’s every Monday at noon eastern time in the US, which is midnight our time. But the main joy that we discovered is Stream Yard. That’s I think is, and it’s this browser-based version of OBS. If you’ve done any live streaming, OBS is pretty ubiquitous. But I think the problem with OBS is that it’s kind of like hard to configure. Stream Yard is basically OBS with good defaults and it helps you multicast to a bunch of different popular venues. So I can broadcast across Periscope, YouTube, LinkedIn, Facebook and Twitch. But the main ones are YouTube, Twitch and –[00:33:53] AJ: You can live stream on LinkedIn? [00:33:58] SW: Yeah, I think so.  [00:34:01] AJ: LinkedIn stories. I mean, LinkedIn stories. [00:34:03] SW: Yeah, you can broadcast on LinkedIn. Yeah. LinkedIn page, LinkedIn event, LinkedIn profile. It’s amazing how easy it is to hook up. It’s amazing how easy it is to organize like multiple people coming in and you got to organize their location on the screen and do screen sharing as well. All of that usually burns up a lot of CPU on my machine and it makes my machine very slow. But if you offload to Stream Yard, then it’s not that slow. It was just a very pleasant experience. I think this company is like a tool version shop in I think Norway or maybe Sweden. I don’t remember. But it’s a Nordic country. It’s just like a nice tool. Yeah, it’s free for basic usage. So, check it out.  [00:34:47] AJ: You can go and visit them, Kevin. You can go and visit them in Sweden.  [00:34:51] SW: When corona dies down.  [00:34:55] AJ: Yeah, right.  [00:34:55] KA: Unless it’s in Stockholm, then I can go, I guess. So my pick is – It’s actually a board game. Last week, I played a board game called the Gloom Haven with a couple of friends. It’s sort of like a Dungeons and Dragons style game. Super fun if you’re into co-op board games. Yeah, that’s about it. Check it out.[00:35:21] AJ: I like good board games. So I’m going to have a look at that. Wow! It’s expensive. Whoa!  [00:35:25] KA: Yeah. But like the box weighs like 10 kilograms. It has so much stuff in it.  [00:35:31] AJ: Led must be expensive by that – Cool. Okay. So my pick is going to be actually games as well, but more online. So I don’t actually play very many online games. In fact I don’t play any games at all. But I do play with friends especially during lockdown, the Jackbox Suite of Games. If you haven’t hear of the Jackbox Suite of Games, it’s essentially a bunch of kind of multiplayer games. One of the most famous ones being Drawful, which is a lot like Pictionary. You all draw something on your phone. So you stream it via a broadcast kind of [inaudible 00:36:08] Google Meets or whatever and then you draw on your phone a picture. And then everyone has to guess what that is a picture of, and then at the end you see everyone else’s answers and you pick the one that you think is the correct answer. And they’re quite abstract topics. So it’s not easy to see what the original was, and the drawings are very bad because they’re on your phone. So it makes it a lot of fun. We spent – We stream with these games almost every week, if not twice a week. Absolutely loads of fun. My parents can play them. You don’t need to sort of be into gaming or anything to do it. And then they’ve got six party packs now. So there’re six sets of 6 to 8 games. There’s quite a lot to choose from. All sorts of trivia and quiz like that, things like that too. Essentially, it requires one person to have the games, stream their screen over a video showing service and then you can do YouTube or Twitch or whatever. And every one that wants to joins in just uses their phone. They go to the Jackbox TV website and they type in the rim code and then they’re member of the game. You can actually go on Twitch and you can search for Jackbox and you’ll see a bunch of people playing these games all the time. If you want to kind of get a little preview before you dive in and actually buy them. But they’re really good. I really recommend it for catching up with friends whilst just stuck in your house.[00:37:22] KA: All right. I guess that’s it. Thank you every one for listening. We’ll be back in another couple of weeks, I suppose. And yeah, take care. Bye.  [00:37:32] AJ: Cool. Thanks a lot. Bye. [00:37:33] SW: Bye.[END]
8/17/202037 minutes, 28 seconds
Episode Artwork

Amelia Wattenberger, Svelte, D3 and other fun stuff!

This week we had the pleasure to be joined by Amelia Wattenberger. Amelia is a journalist-engineer working at The Pudding where she builds stuff using, among other things, Svelte! We talk about Svelte, D3, React and loads of fun stuff. Enjoy!Show notes and links (in no particular order): Scaling SVG Elements Percent in CSS Svelte Recipes Write Less, Do More (Rich Harris talk, ending on a bit about saving the world using Svelte!) I probably missed some - sorry about that 😬 Picks: Stretchly Focus Stack Centr
8/4/202056 minutes, 47 seconds
Episode Artwork

Rich Harris, The Big Announcement

This week we had the pleasure of speaking with the creator of Svelte, Rich Harris. The topics of the podcast can be seen below but first we have a big announcement! TypeScript support for Svelte is finally, officially here! Hallelujah! Links and other fun stuff: Frontend Masters course by Rich Harris Svite Pancake and Layercake MalinaJS Picks (amazon affiliate links): The Executioner Raspberry Pi 4 Microsoft Sculpt Volumio
7/21/20201 hour, 1 second
Episode Artwork

Svelte Society Day: End of Summer Edition

After a couple of weeks we're once again back, talking about all things Svelte! This episode we discuss a whole lot of stuff: the next Svelte Society Day, maintainers meet, recipes, some new resources and a cool new Podcast Player for KaiOS. Check out the deets below in no particular order: New Svelte Society website (Staging!). Help out by contacting me, i'm @Kev on the Svelte Discord. Amelia Wattenberger's site Svite = Svelte + Vite. Use Svelte and Vite Cloud Native Web Development by Mike Nikles A new static site generator called JungleJS Learn in Public book page written in Svelte. Hosted on begin. Also some talk about Cloudflare Worker Sites. Showcase topics: PodLP, Unofficial newsletter, July 18th Meetup in India, Pokedex, Textmoji, Svelte Society France and CFPs Picks: Sensible Side Buttons, Twitter Links, Foam
7/3/202055 minutes, 47 seconds
Episode Artwork

Hillary Clinton tweeted about Svelte

In this latest episode we talk a great deal of things, I've added most of the links that we talked about in a list below. Enjoy! We're currently looking for sponsors to make sure the production value of the podcast goes up. At the moment we're just doing this on our free time and the editing could for sure be better. If you are interested in talking about this, find me on the Svelte Discord (i'm @Kev). MDSveX, markdown in Svelte. Svelte REPL pull request. Try it out! Frontend Masters course by Rich Harris! Svelte Society Discord. Join and check out the french meetup scene! Svelte Society Amsterdam Meetup. Writing preprocessors and migrating to SvelteJS Open Source Awards! Make sure to vote for Svelte if you figure out how. Request For Comments on built-in Actions in Svelte. Which actions would you like to see by default? Hillary Clinton tweets about Svelte. Sort-of. An intro to Pancake. Svelte in production at and used by Square Enix for the Kingdom Hearts website. Showcase: JungleJS (gatsby/gridsome) and Unicode Lookup. Picks: external monitor, ergonomics and Hey.
6/18/202056 minutes, 3 seconds
Episode Artwork

TypeScript Language Tools

In this episode we're extremely excited to talk with Simon and Orta about TypeScript support in Svelte. From what we can tell, it seems it's already here! What a time to be alive! We talk a bit about what TypeScript is, what it solves and some of the challenges implementing support for it. We end the episode with a show-and-tell where Simon shows us around the git repo where all the work is happening. If you're listening to this you can find the video (video starts 34:22) at the Svelte Society Youtube Channel. Resources: Language Server Protocol Svelte Language Tools Some Issues to take a look at: #11, #4797
6/5/202051 minutes, 26 seconds
Episode Artwork

In Defense of The Modern Web

This week we talk about a bunch of fun topics! In no particular order: Rich Harris' In Defense of The Web Kevins article on actions. Bundler work and HMR in Svelte: Nollup, Vite, Snowpack New contributors resources: CONTRIBUTING, ROADMAP Contributing in practice: Li Hau's bug fix story Built in Svelte: Googles Performance Benchmark Scott teaches Wes about Svelte TypeScript almost here? Next episode we will bring on some of the active contributors to discuss it. Stay tuned! Microsoft releases Azure Static Sites. Builds one live using Svelte! Unfortunately somewhere in this 48 hours stream Scott Tolinski builds a Svelte and Meteor application. Free series! Keying things. Relevant background info: Sebastian Markbåge, Nik Graf. Svelte Workaround Pub quiz? If you're interested, give us a shoutout on the Discord! Discussion about an upcoming official router Shawn talks about his book. Picks: Shawn: Baseus W01 Earphones Antony: Browserstack Kevin: Plausible
5/27/20201 hour, 5 minutes, 37 seconds
Episode Artwork

Post Svelte Society Day

Shawn, Antony and Kevin sit down for a talk about the latest happenings in Svelte land. We talk about Svelte Society Day, some new courses, Snowpack, Typescript and much more. Topic links: Scrimba course Firebase course 7 hour FreeCodeCamp course svelte-forms Svelte Society Day channel: and a gist with information. A svelte CLI? Compile Svelte in your head (Part 3) Transition PR and context from Dan Abramov Ignoring warnings Contribute to a11y warnings Tag named anchor broke apps
5/12/202057 minutes
Episode Artwork

The Beginning

In this very first episode of the Svelte Radio show check out what has been happening the last week in Svelteworld. Show notes can be found here:
12/3/20193 minutes, 31 seconds