Scott Tolinski of Syntax.fm 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.com
- 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: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?
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: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: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: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 leveluptutorials.com/pro. 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 leveluptutorials.com 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, Acquired.fm. 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 acquired.fm.
[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.
Scott Tolinski of Syntax.fm fame joins us to talk about Svelte, React and podcasting. Oh, and he has a new course on Svelte animations! Have a listen!