Svelte Radio

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 sponsor@svelte.school.Links:Perf TrackGoogle LighthouseLighthouseTooling ReportHTTP Archivesmaller-npm-packagesNicole Sullivan: Design Systems, Frameworks and BrowsersPicks:Kevin: MX Vertical - I was talking about forearms, not underarms 😭Shawn: YouTube PremiumHoussein: Dark SkyAntony: System76 LaptopTranscription:[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 Fullstack.io. 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 com...

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 threeCompiler HandbookPlenti - an SSG/site builder for SvelteShepard - a library for guiding users through your appDoes Svelte Scale?Flare in SvelteMeetups:Svelte Society Day France - September 27th, 13 talks!Svelte Brazil - September 1st Svelte Philippines Facebook GroupSvelte Summit is on October 18th - CFP and Sponsors can apply nowPicks:£700 dishwasher for £30 using Gorilla GlueGitHub changing of default branchFrontend HorseKevin 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 ...

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.0RoxiElder.js - A new crazy-fast static site generator built for SEO and many other use-cases. Partial hydration using Jason Miller's Islands ArchitectureSvelte Tutorial on MDNPicks:StreamyardGloomhavenJack Box GamesTranscription: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 france.sveltesociety.dev. 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 sveltesummit.com. 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.  ...

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 ElementsPercent in CSSSvelte RecipesWrite Less, Do More (Rich Harris talk, ending on a bit about saving the world using Svelte!)I probably missed some - sorry about that 😬Picks:StretchlyFocusStackCentr

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

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 svelte.recipes 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

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 pace.dev and used by Square Enix for the Kingdom Hearts website. Showcase: JungleJS (gatsby/gridsome) and Unicode Lookup. Picks: external monitor, ergonomics and Hey.

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

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

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