syntax-transcripts.json

[[{"id":1,"start":2.46,"end":21.12,"text":"Hello, everybody, and welcome to syntax. This is a new podcast that Scott and I are launching. And we already have three episodes recorded. And we'll be launching them shortly. For now we just wanted to let you know that we're going to be launching this podcast. And to sort of get you subscribe to the feed so that when they're ready to drop, you're ready to get them.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"02"}},{"id":2,"start":21.3,"end":27.66,"text":"  And this is a web development podcast filled with tasty tips and treats for web developers. ","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"21"}},{"id":3,"start":27.96,"end":39.42,"text":"Oh, oh, yeah. So a little bit about ourselves. My name is Wes Bos. I am a full stack developer from Canada. And I essentially create training courses that help web developers get better at their job. ","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"27"}},{"id":4,"start":39.66,"end":50.52,"text":"And I am Scott Tolinski, a full stack web developer from Denver, Colorado, where I have created over 1000 free tutorials on YouTube at level up tutorials. ","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"39"}},{"id":5,"start":50.66,"end":81.29,"text":" Awesome. So the idea with this podcast is it's going to be a web development podcast where we take a topic and sort of dive deep into explaining both what that topic is, and all the stuff that surrounds it, as well as talk about our experience with that specific topic. So we're going to go all over t he place everything from JavaScript frameworks, CSS, advancements, CSS frameworks, all the way through to command line tooling, and even some of the other stuff like soft skills that we need as web developers. ","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"50"}},{"id":6,"start":81.38,"end":97.97,"text":"Yeah. And we're really super excited about launching this thing. And we really need your help to make it launch with a bang. So head over to syntax.fm where you can find buttons to subscribe on all of your favorite podcast players like iTunes, Stitcher and overcast ","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"21"}},{"id":7,"start":98.2,"end":105.73,"text":"awesome so actually do that please like Don't be like oh, it should subscribe do it because when it drops, we really want to get this thing to the top of the charts. ","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"38"}},{"id":8,"start":105.87,"end":109.68,"text":"Yeah, just Yeah, really push that like button as hard as you can. ","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"45"}},{"id":9,"start":111.21,"end":126.42,"text":"force touch that like button. Awesome. So we're a syntax FM on Twitter, and the website to grab all of those buttons is syntax.fm. As always, I'm at Wes Bos on Twitter and Scott","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"51"}},{"id":10,"start":126.54,"end":132,"text":" is @stolinski Awesome. ","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"06"}},{"id":11,"start":132.03,"end":135.84,"text":"So with that, we'll see you in the first podcast and a couple days.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"12"}}],[{"id":1,"start":1.8,"end":7.08,"text":"Welcome to syntax where we deliver tasty treats for web developers.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":8.49,"end":18.66,"text":"Welcome, welcome to the first ever syntax.fm podcast. Thanks so much for tuning in. My name is Wes. And here we have Scott say, Hello, Scott.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"08"}},{"id":3,"start":18.66,"end":19.26,"text":"Hey,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"18"}},{"id":4,"start":19.26,"end":61.95,"text":"are we go. So this might be a little bit rough because it's our first podcast, which sort of trying to figure things out. But thanks so much for joining us. Today, we are going to be talking all about react tools, different pieces, different frameworks, different things that you can use with react, and we're sort of going to take a stab at explaining what they are, where they fit in what they do, why would you ever want to use one sort of just clarify, what's this space? And all the different things are? So Well, I don't know. Why don't we kick it off? Just saying hello, until we'll tell a little bit about ourselves for those who are new, and then we'll dive right in. So Scott, hello, hello. Hey, hey, hey, yeah, hey. So","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"19"}},{"id":5,"start":61.95,"end":83.1,"text":"I'm Scott Tolinksi. I'm the creator of level up tutorials where I publish tons and tons of free web development tutorials on YouTube, and then a lot of premium and paid products as well. But really, I've just been a developer for a long time and love to sort of share what I learned. That's that's sort of my whole thing. That's cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"01"}},{"id":6,"start":83.16,"end":86.25,"text":"So what's what's your website? And what's your YouTube?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"23"}},{"id":7,"start":86.55,"end":100.35,"text":"My YouTube is level up tutorials, or YouTube slash user slash level up, tuts, you could just find it through either of those. My personal website is just Scott tolinksi.com. You can get to anything from there as well.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"26"}},{"id":8,"start":100.41,"end":107.04,"text":"And it's likely that you've probably taken one of Scott's tutorials already. He has almost 200,000 YouTube subscribers. 200,000.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"40"}},{"id":9,"start":107.04,"end":111.84,"text":"Yeah, I'm at like, 192,000 Oh, man. That's it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"47"}},{"id":10,"start":111.84,"end":113.04,"text":"200 Yeah, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"51"}},{"id":11,"start":113.04,"end":120.9,"text":"have over 1000 videos uploaded to YouTube. So yeah, wow. And that's, that's just YouTube, I have a bunch of elsewhere as well. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"53"}},{"id":12,"start":121.05,"end":149.58,"text":"impressive. So my name is Wes. And I do similar stuff to Scott as well. I build courses for web developers who want to get better at what they do. So I've got a number of different free ones on everything from Flexbox over to Redux, as well as some premium courses on react node ESX. A bunch of stuff and a bunch of stuff that's coming out, too. So if you're interested in it's at Wes, bos.com, there's a list of all my courses. Awesome.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"01"}},{"id":13,"start":149.659,"end":150.659,"text":"Yeah, great stuff. Cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"29"}},{"id":14,"start":150.659,"end":159.93,"text":"So um, I don't know why should we kick it off? Or you have any or I guess we should we want to talk a little bit about what are we working on right now?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"30"}},{"id":15,"start":160.159,"end":165.06,"text":"Yeah, let's let's go this go for it. Since I went first last time. Tell us what you're working on, Wes.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"40"}},{"id":16,"start":165.449,"end":219.24,"text":"Sure. So right now I've been, I just released my node course about a month ago, maybe a little bit less than a month ago. And I've been spending the time working on platform improvements. So I built this thing called boss monster that runs all of my paid and all of my free courses. And then it's I've just been working on the coupon codes, I've added percentage base coupons were previously only had like a fixed fixed amount off. I'm working on some geo geo coded discounts. Meaning that like, I've gotten a lot of people coming from India, Brazil, and the 60 hundred dollar $120 for a course is just way too much. It's like, like a month's rent for them. So it depends on where they're coming from. So I'm working on implementing some special coupons, depending on where you're visiting the actual website.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"45"}},{"id":17,"start":219.379,"end":225.629,"text":"Wow, cool. Yeah, I'm excited to see some of that stuff. At least how you pull it off. It seems really cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"39"}},{"id":18,"start":225.629,"end":243.569,"text":"That's it's pretty neat. I'm using CloudFlare, which will give you a header and it will tell you which country the person is coming from, which I found out is extremely reliable, and also somewhat hard to spoof, with some of the more popular free VPN. So really,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"45"}},{"id":19,"start":244.02,"end":248.37,"text":"yeah, it actually works surprisingly well. Nice. Super cool. Anything else? So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"04"}},{"id":20,"start":248.37,"end":255.659,"text":"what about you know, that's all I got? I got a new laptop, new MacBook Pro, which I've tried to hook up all the dongles and","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"08"}},{"id":21,"start":255.72,"end":258.079,"text":"stuff that up. Yeah, lots of dongles. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"15"}},{"id":22,"start":258.12,"end":260.699,"text":"yeah. That's about it. What about you, Don? I'm","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"18"}},{"id":23,"start":260.699,"end":268.519,"text":"doing a lot of just a lot of coding. I have several, several projects. I just did my very first live stream","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"20"}},{"id":24,"start":268.86,"end":274.2,"text":"level up tuts I saw that my phone buzzed, and I joined it for a second.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"28"}},{"id":25,"start":274.23,"end":339.3,"text":"Yeah, it was, uh, that was wild because I've never done a live stream and apparently I wasn't quite prepared enough. But uh, yeah, that's sort of what they say is to just go in and do it. So in that live stream, I was just upgrading the level AppStore to react router for so I have so many little projects like that I have. The level of site overall is like kind of an old version of a router. So I'd love to get it on not only react router but react router for with server side rendering. All that stuff. So just really like code upgrades, code updates here and there. And then I have another small project that I'm, I recently met a developer on Reddit, who's also a breakdancer. For those who don't know, I've been breakdancing for 1314 years now. And I built a web app called B boy tools. And it allows basically a whole bunch of like tools that are really awesome for breakdance practice. And I found this guy who's also a developer breakdancer, who, who's now like, thrown up commits left and right, so I'm stepping up my game a little bit on it to really move that project alone.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"34"}},{"id":26,"start":339.93,"end":353.91,"text":"Wow, that's really cool. It's It's funny how often you you go into these like weird areas of your life, whether it's music, or breakdancing, and then you find like other other people that are just like you.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"39"}},{"id":27,"start":353.969,"end":357.36,"text":"Yeah, I know. It's a, it's actually a really, really nice thing.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"53"}},{"id":28,"start":358.08,"end":394.29,"text":"Awesome. Well, let's get right into it. We're going to be covering. Let's see here, we're going to talk about next js, create react app, React dev tools, real quick on react and Inferno, react, storybook, and then Meteor. So we're gonna kind of go through all of these different ones, section by section. Some of them I have absolutely no idea about some of them. I've used quite a bit. I'm by no means an expert on any of these. But I think that's what's going to make this podcast kind of nice, where you're sort of getting a look into these tools as everyday developer wouldn't would be working on them.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"58"}},{"id":29,"start":394.32,"end":399.209,"text":"Yeah, absolutely. I think that's a different strength.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"34"}},{"id":30,"start":399.72,"end":408.959,"text":"Yeah, I think that's also why a lot of people like Scott nice tutorials is that we're not the smartest shove shovels in the shed is that to say,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"39"}},{"id":31,"start":409.68,"end":416.64,"text":"as evidenced by my live stream yesterday, a lot of people commenting Well, it's good to see someone else struggling.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"49"}},{"id":32,"start":419.55,"end":557.7,"text":"Oh, that's great. Cool. So we're gonna start off with next chasse, which I've actually been working with quite a bit lately, I've been building a sort of an administrative dashboard for myself on my courses. So my own course platform, a lot of my admin has actually been just query it up in the database, open up the raw Mongo file, and then edit it from there. And now I'm adding much more reporting, being able to edit, reset and refund customers, all that good stuff. So react is a perfect use case for billing an admin dashboard, because there's a lot that's going on there. And also, that when you're searching for people and filtering data, you don't want to have to do a full page reload on each of those. So I decided to build it in react. And with that, I'm using this new framework called next j s. And it's, it's from the folks you've probably used hyper term before or now to sh, which is a new sort of hosting platform. And what it does is, the big thing that it does is server side rendering without any of the the tears or the pain that comes along with trying to do server side rendering. So out of the box, what you do is you have a pages folder. And if you want to build a website that has like an about page or a customer page, all you have to do is create a component in your pages folder called customer dot j s. And what that will do is it exports a component, a react component, and then when somebody visits that URL, it's automatically going to be rendered right to that URL. So it takes care of all the routing for you. There's there's no react router setup. And yes, it does. It's all its own routing, and then it does the server side rendering of all of your components. So that's really neat if you are either worried about a search engines hitting all of your pages, or be what's called pre loading. So let's say I'm on a homepage, and I want to preload my pricing page. What we can do is we can preload the the entire pricing page component. And then when someone clicks on the pricing page, it's just going to be an instant cut over to the pricing page. Because we've already decided to preload that link.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"59"}},{"id":33,"start":559.67,"end":560.4,"text":"Nice. What else does","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"09","ss":"19"}},{"id":34,"start":560.4,"end":561.39,"text":"it do? Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"20"}},{"id":35,"start":561.41,"end":603.45,"text":"yeah, I mean, to me, I love I love things that that take care of that many things for you. I know some some you know, it gets into that, like the magic territory, right? where some people like a little bit of magic, and I've never been the type to shy away from a little bit of magic, right? I think in when the rails community was in in full force. I think that was one of the most attractive things about rails. Was that it? It did a lot for you. And yeah, I haven't used next to myself, but I've been I've been checking it out quite a bit and that built in server side rendering with the node router just seems like a really nice little time saver. Cuz I mean, yeah, who wants to write routing every single time?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"21"}},{"id":36,"start":604.02,"end":680.25,"text":"Yeah, and there there is stuff. If you want to do custom routes, I'm sure um, but you can get away with like Ford slash customers. And then I would pass the customer ID via query string. And then I didn't have to set up any custom routing, it does all of the the baybel in the web pack stuff for you, as well. And it's just a right about a right amount of magic for me, because it does expose a config file, which will will sort of fold into your web pack. So if there's anything extra that you want to do, it will, it'll do that for you. Yeah, um, one thing I wanted to, to talk about, which is pretty neat is that it adds this concept called get initial props, which is not a standard react lifecycle method. But they add it in. And the way that it works is that it's, it's in a sync method, which means that you have to actually return a value from it before it will actually render your component. And by doing that, what you can do is you if you need to fetch any data on the server, before it actually kicks the HTML out to, what it will do is it will hold up rendering that component, because it's a sink, until you do like, an Ajax requests or something that needs to take a little bit of time to actually fetch some data and bring it back","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"04"}},{"id":37,"start":680.28,"end":690.12,"text":"for the render to happen. So does this give you access to maybe some sort of like a loading component? While you're waiting for that data? Is there like a, you know, while this is loading, throw this up?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"20"}},{"id":38,"start":690.15,"end":719.67,"text":"Yeah. Um, what it will do is, because it can fetch everything, it fetches everything without a page reload, there's a little component. And if you look at the Hacker News example that they have, it's great. They have this little, you know, some websites have this like little loading bar across the top where it sort of cuts across, it gives you one of those. So it gives you some progress in terms of how it needs but again, that that's not there, if you if you need to preload, if you preload some of your pages. Awesome.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"30"}},{"id":39,"start":719.7,"end":720.75,"text":"Yeah, that sounds great.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"59"}},{"id":40,"start":721.26,"end":734.61,"text":"Yeah, big fan, I am definitely going to be recommending it for people starting out in in react because it just does away with any of the the pain that comes along with with setting up your own","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"01"}},{"id":41,"start":734.88,"end":751.71,"text":"nice. And so it doesn't require like servers. It's not basically any server side code or anything like that. It's just essentially, your server side rendering and your routing. But we don't have straight up database queries or anything with it Next, no, it doesn't","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"14"}},{"id":42,"start":751.98,"end":763.68,"text":"have any of the any of that server side stuff included, you sort of bring your own back end, whether that's graph QL. In my case, I integrated it into an existing Express app. Right. So it has support for that as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"31"}},{"id":43,"start":763.71,"end":769.92,"text":"Cool. Yeah. Yeah, a graph. qL is another one of those things that I think we're probably gonna have to have a whole episode on.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"43"}},{"id":44,"start":769.95,"end":779.58,"text":"Do a whole show on that. Yeah. Big fan. I'm drinking what is I'm drinking the Kool Aid, which is the graph qL cute.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"49"}},{"id":45,"start":780.45,"end":782.04,"text":"I've never heard that before. That's great. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"00"}},{"id":46,"start":782.04,"end":786.21,"text":"when I someone on Twitter said they love the Kulin, I thought that was hilarious.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"02"}},{"id":47,"start":787.38,"end":790.89,"text":"Have you you've checked in to Apollo and stuff like that?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"07"}},{"id":48,"start":791.61,"end":800.07,"text":"Yeah, very, very high level had a call with the folks from graph. Cool. Yeah. Which is like a hosted graph. qL pretty neat. They","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"11"}},{"id":49,"start":800.07,"end":801.15,"text":"love these names.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"20"}},{"id":50,"start":801.57,"end":808.44,"text":"Yeah, people are just kind of, it's really funny to see like this, like enterprise database company with like, a hilarious name.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"21"}},{"id":51,"start":810.03,"end":812.82,"text":"I appreciate it, though. I love that. I love every second.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"30"}},{"id":52,"start":813.33,"end":824.25,"text":"It's so for those who are wondering, it's graph. Cool. Because it's a graph QL. But it's graph. Cool. Anyways, create react app is Next up, have you used create react app, Scott.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"33"}},{"id":53,"start":824.73,"end":881.25,"text":"You know what I've I've used it, but only at a brief level to basically explore maybe doing a tutorial series on react. And that was the hardest thing about for me getting a tutorial series on react was the initial setup part of it, right? Because everyone has opinions about what they want to use. And, and I don't want to spend, you know, two whole videos on setup. And if I'm going to do Webpack, I don't want to have to teach you Webpack from the start. So for me, the Create react app was like the perfect solution for getting something like that going. Yeah, but I haven't used it in any major projects, just tutorial based stuff. But it's a fantastic way to get off off the ground. Like I said, there's nothing I hate more than spending so much time writing tooling and stuff like that. Yeah, do not copy and paste. Uh, you know, like, I remember when Gulp was the thing, it was just sort of like you move your Gulp file from one project to the next.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"44"}},{"id":54,"start":881.49,"end":884.19,"text":"Yeah, you have like 800 Gold files going at once.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"41"}},{"id":55,"start":884.19,"end":890.22,"text":"Yeah, yeah, exactly. So anything that can reduce that amount of time for me is is a plus.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"44"}},{"id":56,"start":890.61,"end":1015.77,"text":"Yeah. So for those who've never heard of crate react app, it's essentially like a kind of like a starter kit for react. Um, if you think back to the like, If you've got kids, you got like a Friday night with three hours to kill, and you're like, Oh, I'm gonna try out react tonight, and it's gonna be good. And then, and then cut the three hours later. And you're just sobbing on StackOverflow. Why? Why syntax error angle bracket what is going on. And so what create react app does, it just sort of like sweeps, it's more magic, it sweeps all of the bundling, and build steps and server steps. And all of that complexity gets swept under the rug. And you don't have any dependencies except this thing called react scripts. And it will just take your your main js file in a file called index HTML, it will serve up your index HTML, and bundle your react app for you. And then, at a certain point, you you have all this, it gives you your build server gives you hot reloading, it gives you CSS importing, it just gives you all of that for free, which is great. And then at a certain point it it, it gets to a point where you actually need to customize it a little bit because whereas something like next j s is meant to always be built in next jass create react app is more to like, just get you started to build your application. And then when you need to do something custom, like, for example, one thing it doesn't do is CSS preprocessors currently, so if you want sass or something like that, either got to do it totally separate with a gulp task or a node script, or you have to eject from create react app. And then what that will do is it will, it'll go under the rug and take out all of the magic that it was doing, and give you access to everything that you needed, which is I really like that approach because you just want to get going sometimes. And then once you've got the sort of the MVP up and running, you need a little bit more control, then you can sort of bring it out from the closet and start to work work on it. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"50"}},{"id":57,"start":1015.77,"end":1066.61,"text":"yeah, no, it's one of those things that I you know, we'll get into this later. But one of those things I love about Meteor, right? It, it allows you to get going with like, absolute no effort, right? Get going, Yeah, do what you got to do. And then let's say the idea you're thinking of is a total bust and you want to blow it up. You didn't just waste a whole bunch of time, on the Getting Started stuff. There's there's nothing more frustrated than like, getting all going finally getting into code and then just being like, I don't really feel like doing this anymore. And I just yeah, this time. Yeah. So no, I love tools like this. I'm glad to see this, this come out. I'm really happy to see that, you know, maybe some command line stuff coming to the React community. Again, that was one of the things I loved about the rails community, the rails command line interface, that sort of stuff. So yeah, a plus a plus for me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"55"}},{"id":58,"start":1067.16,"end":1145.79,"text":"Okay, cool. All right. So next up, just a quick one, React dev tools and Redux dev tools, likely you have already used them. If you haven't. React dev tools and Redux Dev Tools essentially allow you to view your application as react sees it not as the the render Dom output. And that's extremely helpful. Because react is all about thinking in components and thinking in terms of state and props. And allow you sort of just appear into that you can change props, and view state and whatnot. So a couple quick tips, I thought that not everybody necessarily knows, when you select a component in react dev tools, what that will do is it'll give you $1 r in your in your JavaScript console and dollar R will be equal to whatever is the currently selected component in your your console. And that's great, because sometimes people are confused by the idea of components. But when you see $1 on the console, you realize, Oh, it's just an object, and there's state and props and, and methods on this thing. And I can call them right from the console without having to necessarily, the thing I use it most for is that like, if I build a method, and I want to call that method, and I don't necessarily want to like hook it up to a button, nice, um, I'll just select the component and then manually call the method right from the right from DevTools. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"47"}},{"id":59,"start":1146.03,"end":1190.52,"text":"I think that's, uh, I haven't done that personally, myself. But that seems like a really nice use case. You don't have to wire it up for anything. You know? Yeah. I think even just like giving a straight up view into what that object is, is just one of the things that is definitely an aha moment in react. Because, yeah, you know, even when you're first learning things, and they show you, you know, maybe like a basic, like rafs example, where you're just using refs very basically, right? And you're assigning a ref, but you might not know that it's just throwing it on to the component, right? It's just in that object. So just really having a total understanding of what is in that object. And what's available to you is endlessly helpful, I think.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"06"}},{"id":60,"start":1190.55,"end":1203,"text":"Yeah, absolutely. And when I teach react in a workshop, and I show people that there's a lot of Oh, it's just an object. Yeah, the day Like not this like sort of like, mystical,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"50"}},{"id":61,"start":1203.03,"end":1210.34,"text":"yeah, mystical thing, CML element thing that has methods into it? Yeah, yeah, yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"03"}},{"id":62,"start":1210.47,"end":1248.86,"text":"um, another little tip I have is sometimes I find people have a hard time finding the component that they're looking for, where they know where it is in their HTML. But what component that is in the React dev tools. If you know what the name is, you can quickly search for it. But if you don't know what the name is, what you can do is you select the element in your your elements panel in the DOM, your regular elements panel, and then you flip over to the React dev tools. And it will try to figure out what is the equivalent react component, and then that will allow you to quickly get to the actual component that is making and rendering out that that HTML to the page.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"10"}},{"id":63,"start":1248.9,"end":1296.9,"text":"And you know, it actually, I think that's a newer feature, too, because that was a pet peeve of mine was that if you hadn't first loaded react dev tools, you'd have to load react dev tools, first let it sort of get itself then you could find your element, then you had to go back to it, and then it would find it every single time. But yeah, even you know, I don't know how recently that was. But that was a just a such a nice thing. When I opened it up, I clicked on the React, you know, tab in your dev tools, and it was already selecting the element. Yeah, that was a nice little improvement there. And I super handy, I do love that they're constantly improving it too. It was one of those things where you have it, and it's an extremely useful tool, but then it just keeps getting better. And you know, that those kind of things are invaluable.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"48"}},{"id":64,"start":1297.34,"end":1307.4,"text":"Yeah, I love it, I even use it. If you want to open up netflix.com with react dev tools. Um, I think it's at least last time I checked, they don't strip the names of their components","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"37"}},{"id":65,"start":1307.4,"end":1379.61,"text":"nice when they push to production. So it's kind of cool, because you can see how Netflix architects, their their components, they have this thing called a job bone that when you click on like a movie, it will drop down the movie details underneath it. They call that a job bone. And it's really neat, like, the react or Netflix has some of the best react devs out there. So it's it's very interesting to take a look at what they're doing. Yeah, it's almost like a new style of looking at someone's CSS, which was like, I always used to love going in and exploring the big guns, CSS and sort of seeing what they're doing maybe why they're doing it. Yeah, I mean, it was like back way, way, way, way back in the day, when Amazon was using as or eBay, whoever is using a spreadsheet. And people all of a sudden, were starting to talk about sprites. Yeah. And it was like stuff like that you didn't know that these people were doing until you dove into their code, or someone did a blog post on it. So being able to see someone else's component structure, sort of see how someone else thinks about react, but not only just someone else, but somebody like the amazing devs over at someplace like Netflix, you know, yeah, to get their ideas onto it is just really awesome.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"47"}},{"id":66,"start":1380.72,"end":1435.23,"text":"That's pretty neat. Real quick, I'll run through Redux dev tools as well. So Redux is sort of a state management library for react. And they have their own dev tools, which allow you to first see what is in your your store, which holds all of your data. In Second, it will, it'll show you exactly what actions have happened. So if you comment on a post, or like a post, or fetch some data, you can kind of they call it time traveling, which means that you can go back in time and and turn off some of those things. And your UI will update as if those things never actually happened. But it's neat, because you can go like, you could go in the middle of five things and turn off the two. And the the first two in the last two would would still work. So I'm a big fan of the Redux dev tools. Obviously, if you're working with Redux, you probably are already using","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"00"}},{"id":67,"start":1435.23,"end":1444.35,"text":"Yeah, I think the council complaints do with both react and Redux, right, doesn't it? tell you hey, you're not using the dev tools? Oh, yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"55"}},{"id":68,"start":1444.38,"end":1462.14,"text":"it'll tell you hey, check out the the Redux dev tools. Yeah, yeah, have them installed. It's a little trickier to get set up because your requires buy in from the code side of things right. To communicate with the dev tools, not like reactive tools, but it's definitely worth the pain of getting that installed. Awesome.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"04"}},{"id":69,"start":1462.83,"end":1463.49,"text":"Great stuff.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"22"}},{"id":70,"start":1463.97,"end":1470.66,"text":"Yeah, um, have you let's talk about preact and Inferno you if you heard of it, these used them before?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"23"}},{"id":71,"start":1470.69,"end":1503.72,"text":"Yeah, so I haven't used I've heard about I've read about I've seen all the the speed comparisons. I've read the blog posts, I have not used preact or Inferno, yet, but I know basic concepts about them. Basically, what they're they're the same API it's supposed to be as similar to using react as it can be, meanwhile, focused on speed and bundle size. So I think I don't know necessary. Why you wouldn't use them? I just haven't. To be honest.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"30"}},{"id":72,"start":1504.859,"end":1544.4,"text":"I'm sort of in the same boat where it will work with your existing react code. I'm assuming you've written in ESX API. So no create class, but extending and whatnot. But one reason is that it doesn't support React Native. It doesn't have the virtual Dom part of things it has. It just uses the real DOM. And it's funny, like react is working on on making it much faster. But there's pretty much just one guy behind each of these projects, or the guy from Inferno now works on react, yeah, like, Hey, we have all of these resources. How are you doing?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"04"}},{"id":73,"start":1544.4,"end":1546.92,"text":"Yes, yours is faster somehow, okay.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"44"}},{"id":74,"start":1548.66,"end":1569.03,"text":"And react is pretty much just one guy, he actually lives around the corner from me nice. And just doing amazing things in terms of performance and whatnot. So it's a whole nother level. That's not really where I'm at right now with the in terms of knowing how all these perfect things happen, but some, some smart people behind it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"48"}},{"id":75,"start":1569.06,"end":1618.8,"text":"Yeah, and what I think with any of these things, you know, preact and reef Inferno are both sound like amazing options, right? Because of that speed. But at the end of the day, you know, Facebook, like they did is going to, to learn and you know, snatch these people up, or or just improve their code to the point where are these libraries worth? Maybe diving into really heavily other than from like a theoretical standpoint to understand how they work? Because with react fiber and version 16, coming out, is that necessarily a great investment of your, your time or whatever? Because, yeah, no, who knows fiber fiber? Seems like it's going to be a total game changer. And I'm getting excited for it. But we'll have to see when it's fully released.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"09"}},{"id":76,"start":1619.64,"end":1646.07,"text":"As far as I see it, it shouldn't even, hopefully not be an investment because you should just be able to alias react to react. And then if you've written your code properly, it should work. But then I don't know I've never done it. So we'll have to see how that pans out. If you are, specifically if you're in I think like the mobile space, or you're very performance conscious. It's definitely something worth looking into. Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"59"}},{"id":77,"start":1646.31,"end":1661.28,"text":"Yeah, I think even react performance would be another topic I think we could dive so much into because there's a lot of neat little tricks, tips and tricks that I think a lot of people just overlook, or maybe don't know about, maybe the rendering cycle and stuff like that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"26"}},{"id":78,"start":1662.54,"end":1664.88,"text":"Yeah, yeah, let's let's put that on the list.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"42"}},{"id":79,"start":1665.21,"end":1667.19,"text":"Nice building the list. Cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"45"}},{"id":80,"start":1668.84,"end":1686.12,"text":"By the way, if you have any suggestions for topics that you'd like us to talk about the whole idea with this podcast is we're going to talk about web development stuff, but also like sort of stuff that's related whether it's productivity or fitness or breakdancing, whatever it is. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"48"}},{"id":81,"start":1686.33,"end":1689.48,"text":"I can I can. I don't know about Wes. But I can speak on breakdancing.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"28","ss":"06"}},{"id":82,"start":1690.32,"end":1819.02,"text":"I can't speak on breakdancing go. But with everything else, I'll try to speak as if I do no. Fair enough. Next up, we got react storybook. This is another one which I have not used. But I'm have recommended to many people because they love the the sort of idea behind it, have you maybe maybe I should explain it real quick. And then I'll yeah, flip it over to you to see your thoughts on it. So the whole idea behind react is that you build not pages or not parts of your site, but you build components. And you build this really modular things that can be moved around anywhere in your app. And as long as you feed your components, the right things, you feed them the right data, you feed them the right functions that they need to to work, then they should be movable anywhere in your application. So I always like to equate this to CSS. If you've ever built something in the sidebar of a website, and then tried to move that maybe to the footer or to like the main section and then your CSS breaks. That's because you are dependent on your sidebar CSS for something that is in your sidebar. Ideally, you would write your CSS so that the CSS just applies directly to that component, regardless of where it shows up on your website. So the same idea is with react where you can then apply, you can put these components anywhere. So react storybook aims to take you out of your application, and build your components in isolation. So what you can do is you build this library of all of your different UI components, maybe have a button, maybe have a danger button, maybe have a button with text in it. Maybe you have a video player, maybe you have a video player with multiple videos and then you can sort of just how Have a list of all of these different components and all the different places or all of the different ways that they may be rendered. And then you can just work on the component where via your styling and your functionality and, and whatnot. And then you just build them in. And then it's like Lego, you got all these components, you started to just click them together and start to build your application. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"28","ss":"10"}},{"id":83,"start":1819.02,"end":1966.14,"text":"and you can have various states of props in there, too. So you can show off one component with x props, and another component with y props, or whatever. So you can see all these different essentially versions of your components that can potentially be modified by what you're passing in. I have used it. In fact, I like it. A lot of the biggest problems I have with react storybook are getting it to play nice with my environment. Whereas I'm not doing all of my CSS in line, I'm doing some CSS in line, but I'm not doing all of it in line, right. So having it work with my CSS preprocessor. And getting it all sort of set up that way, isn't necessarily the most fun thing for me. Yeah. But in terms of like the features that you get, I do love seeing your components in isolation, I love being able to sort of modify how you think about your components that way, and seeing them pulled out gives you a different view and can potentially illuminate some issues that you hadn't necessarily thought of that it's so easy to just think about these whole things in the system that they exist in. But the moment you pull them out of that system, why is this breaking? Or maybe you've not having your your correct, either default props or required props or stuff like that, that you may not have thought of being required or needed. So for me, it's one of those things that's really nice. I like it a lot. But does it necessarily find itself in my sort of heavy workload? That that's the hard part for me is finding time, if it was an automatic, like, here's the kind of tool that I would love it to be, I would love it to scan my directory and just pull out all my components and do it for me, right? Which is not a bad idea. Yeah, it's it's a little outrageous, but it's not, you know, if it could do that, then I would be on board in one second, obviously, because there's no time overhead. But as it is right now, I'm spending a lot of time coding and testing and whatever. And I don't know if storybook ends up finding its way if I if I'm on a team, maybe more time available, I think it would be a superduper great resource, but as like a solo Dev. Not I'm not quite sure I have the personal capacity for it. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"19"}},{"id":84,"start":1966.14,"end":1986.84,"text":"that's true. It definitely would save time on larger sites with a bigger team. Especially if you have different people working on the on different components. Oh, it's pretty nice. That's that's another show we should do is talking about style components and inline CSS in your components versus just a style sheet for your actual application versus","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"46"}},{"id":85,"start":1986.9,"end":1990.53,"text":"Yeah, something like I am it's Oh, and that's a fiery one to people.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"06"}},{"id":86,"start":1990.56,"end":1995.9,"text":"Yeah, people get work But wait, hold on. We have a name for that. What is it? Mama drama","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"33","ss":"10"}},{"id":87,"start":1995.93,"end":2003.61,"text":"mama drama. That's some hot hot takes. Yeah, that that episode will be a soundboard full of hot takes. Yeah, we got to get a soundboard.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"15"}},{"id":88,"start":2004.18,"end":2008.95,"text":"We're gonna get a soundboard where whenever there's drama, we're gonna it's gonna be like mama drama,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"33","ss":"24"}},{"id":89,"start":2009.13,"end":2010.69,"text":"or some drama, Mama,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"29"}},{"id":90,"start":2010.96,"end":2021.61,"text":"drama, drama Mama. All right. Last one, we got Meteor, which is something I've never used. So I'm gonna flip this over to Scott.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"33","ss":"30"}},{"id":91,"start":2021.61,"end":2177.15,"text":"Yeah, so I use Meteor all the time, especially in react projects, for a lot of reasons. For instance, basically, it gets a number of reasons it gets getting started really easy. It has a built in database, which you know, uses Mongo for better or for worse, it's easy to get set up. It bundles it all in, there's basically no tooling configuration out of the box. If you want to add stylist, you want to add sass, you just do Meteor add, stylist, whatever. It takes care of everything, in terms of the build tools, compressing all of that sort of stuff. But really, it basically just allows you to have a lot of things at your fingertips that you wouldn't have reduces a lot of boilerplate. So you have server side code, with node, basically out of the box along with methods that allow you to communicate between the server and the client without having to write an API yourself. So for instance, on the client side, I want to update something in the database, I can just run a meteor call and then the method name, pass in some information, data, whatever, sends it to the the server side, server side can hit the database, do whatever you want. In addition, it also has things like in the latest version of Meteor. There's a lot of really nice code splitting and bundle bundle stuff. So you can do conditional module loading, especially with react, it really makes it. So you can basically have these conditional bundles that greatly reduce the initial load time, right. So if you're only loading up, maybe whatever the user seeing, you can have these bundles of your different components that load at any given point, you can cache those bundles, you can split your your bundle size up that way. So it basically gives you a lot of tools that might be sort of complex, either through a Webpack config or something like that. Or even having to write a like an express back end, it gives you all that stuff out of the box makes it nice and painless. And then it In addition, it comes with this like prototyping insecure mode, where you can actually do database writes directly from the client side. So in your react component, you could do a Mongo insert directly from a method or something like that. It's obviously not something you'd want to leave in. But if you're doing a pet project or something like that, you just want to try something out. Not having to write that API or anything like that can save you a whole ton of time.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"41"}},{"id":92,"start":2177.52,"end":2199.78,"text":"Yeah, that's pretty sweet. I think a lot of the stuff that we're talking about today all breaks down to, I'm super excited about this thing. I've got a couple hours, and I want to jam on it right now. And these tools are great for that. And they also allow you to sort of say, Okay, this is getting real, how do I settle down and make this actual into a production application?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"17"}},{"id":93,"start":2199.809,"end":2236.079,"text":"Yeah, and I think there's a lot of, if there's any concern about Meteor, it's either one that it forces you to use Mongo, which I don't think is going to be forever, the same team that's behind Apollo is believed mostly behind Meteor. So I could see a future where Meteor is using Apollo by default. Is that you that way, you could use whatever database you would like. But in addition, you know, I have several large production apps in Meteor. And if there's any concerns about scaling, I think it's totally overblown. I think you can scale up and Meteor really well. Just Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"39"}},{"id":94,"start":2236.26,"end":2260.61,"text":"yeah. And same for Mongo too. I get a lot of people Pooh poohing Mongo, and I have a couple of fairly large applications running on MongoDB as well, obviously, it's, it's not the most relational thing, if you're gonna do a lot of relationships, that's probably a Postgres or MySQL is, is a good pick for that. But you have to be doing some serious stuff to actually start to run into these issues.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"16"}},{"id":95,"start":2260.61,"end":2303.34,"text":"Yeah, in interest. I mean, that's a big thing is is this fear of scaling up? But how many of these projects need to scale up to the size of something where it actually becomes an issue? Like, yeah, I would have to assume that if anything I made that started in Meteor was ever going to get to be the size of Twitter, or something like that. I would have a team of engineers who can figure that out, right? Like I did that that doesn't need to be a concern right now that needs to be concerned, potentially somewhere in the future. For me, I'm definitely in the camp of Get up Get going. Get get something rather than actually, those were actual lyrics to a goody mob song. By the way, get up.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"40"}},{"id":96,"start":2303.63,"end":2304.17,"text":"Get some","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"38","ss":"23"}},{"id":97,"start":2306.96,"end":2310.98,"text":"CeeLo Green right there. There's like 90s, cielo 1990s.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"38","ss":"26"}},{"id":98,"start":2311.05,"end":2311.71,"text":"That's awesome.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"38","ss":"31"}},{"id":99,"start":2311.71,"end":2317.05,"text":"I'm just dropping rap lyrics by accident. Wow. It's a It's a gift in a curse.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"38","ss":"31"}},{"id":100,"start":2319.63,"end":2332.469,"text":"Oh, that's great. Cool. So what what is a feature of Meteor look like? I realized that like Meteor just sort of dropped what was it was a blade as their their templating engine in place? Yeah, Blaze or react. Right.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"38","ss":"39"}},{"id":101,"start":2332.469,"end":2402.34,"text":"So I don't think that they're they're still supporting Blaise, but what they did is they open sourced it. So Blaze is actually totally underrated as a front end framework. And I think the reason specifically why it is is because there's no like, there's no one using blaze standalone. But if you were to use Blaze, I think you'd be pleasantly surprised. It basically uses a variation of handlebars called space bars. There's some really nice integration with like just general actions, dealing with events and stuff like that. But for the most part, you can use, you can choose to use any front end framework you'd like. So Blaze, view, Angular, whatever, and it plays really nicely. The for me, the future of Meteor, I think is going to be more in the the data layer, we'll have to see. They're doing an incremental update right now to get it on. I think node eight right now is the next version of Meteor. But this 1.5 just came out with the the bundle splitting and stuff like that. And there's like a really cool, I don't know if you've ever used the application days. disk to see what's on your hard drive.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"38","ss":"52"}},{"id":102,"start":2402.34,"end":2403.599,"text":"I have open right now.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"02"}},{"id":103,"start":2403.599,"end":2516.15,"text":"Yeah, Daisy disk love it. So that should be one of the sick to sick pics at some point. But yeah, so Daisy disk has that really cool circular visualization, right. And then the latest version of Meteor, there's a core package that you just add just by Meteor add bundle visualization or bundle visualizer. And it shows you all of where this basically just like Daisy disk where the size of your application is based on what you're importing, and when you're importing it. So that way, you can look at it very clearly and say, hey, why is you know, this being loaded right now when I'm not using it? Except for I'm only using the whole administrative side of the site. When you're on slash admin? Why is it all being loaded? bundle size is huge because of it, you can then figure out really nice ways to not only trim your dependencies, but also trim up your bundle size a whole bunch. Yeah, yeah. So I mean, meteors dropping great features left and right, the team behind it's excellent, really great, talented people. So, you know, I would love to see better integrations with Apollo, if you end up getting sort of like a graph qL system out of it as easily as the meteors tracker system works currently. Then that would be really great there right now, their whole, their whole thing is this pub sub system where you're publishing and subscribing to data, and then it's automatically reactive. So you know, changes on the database automatically get pushed through a socket to your front end. Yeah. So I could see a future where you know that that system is integrated in a way with Apollo or something like that, and then you can have all the benefits of graph QL. Meanwhile, having this the same sort of pub sub system, obviously, I'm not a developer on it. I have no real insight there. But I think it could be a, you know, a really cool future for Meteor if it continues to grow.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"03"}},{"id":104,"start":2516.63,"end":2530.079,"text":"Yeah, yeah, I definitely think that that's something we're gonna be seeing, or you can already do it now in graph qL, so on called subscriptions. I think that is interesting that that might be one of your back end choices for building","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"56"}},{"id":105,"start":2530.079,"end":2544.23,"text":"an app. Yeah. Yeah. Like I said, I'm a big fan. I've published, I don't know, five or six, large Meteor and react applications. And right now, it's my favorite stack. But, you know, obviously, this stuff changes all the time.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"10"}},{"id":106,"start":2545.5,"end":2550.75,"text":"Cool. All right. Well, now it's time for the part of the show that like we like to call","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"25"}},{"id":107,"start":2550.78,"end":2553.48,"text":"sick pigs, sick pigs.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"30"}},{"id":108,"start":2555.099,"end":2633.82,"text":"This is the part of the show where we tell you one thing that we are enjoying this week. And that you should check out and it might be a tool might be a thing might be a dongle, you don't know. So my sick pick this week is an application for OSX for your iPhone. And I think for Android, and a web app is called parcel. And I'm doing a lot of ordering stuff online. I get sticker ship from China, I buy a bunch of stuff from Amazon. And I always hate having to like find the tracking number and check where it is. So personal app will allow you just to throw all your tracking numbers into the app. And then it will give you a push notification on your desktop and on your phone. When there's a change in that actual the tracking of that, which is pretty sweet. And then the One really cool thing is that you can it gives you an email address that you just forward your emails to and then it will it'll sort of detect the tracking number in the email. And then it will add it automatically. So every single time you get an email from Amazon, you can even set up a rule in Gmail, when there is a email that says your order has shipped, then forward to the special number and automatically add it to your parcel app.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"35"}},{"id":109,"start":2633.849,"end":2742.329,"text":"Cool. Yeah, I've never heard of that before. I could see like an everyday situation where that'd be nice. Check it out. Yeah. So my sick pick is something that I've used for a little while. Now, this isn't necessarily anything new, but I feel like not enough people talk about it or know about it. It's a fish shell. I know z sh is really popular. And I personally use GSH for a long time. But fish shell is pretty much just like that fish, z sh where it's a replacement for bash for your shell. And it basically it adds a ton of excellent features fresh out of the box, like the auto completion features and ghosting of your files. So when you're typing, it has like a ghosting auto completion. So you instead of like sort of guessing when you hit tab, like what is this going to autocomplete to if you have two files that are similar name, you can actually see that ghosting and you can change between them. So if you can see that it's you can type in a couple of letters, you can see that it's finding a particular file. I think it's just the up or down key allows you to change which particular file Actually selecting. In addition to that, it's, it's just really nice. There's a ton of extensions and themes and there's additional like, Oh, my z sh stuff. There's also Oh, my fish or fishermen, which are two two versions of that package fishermen. Yeah. And they're both great. You can you can use the command line to download and install themes. I have obviously like a cute little theme with like a little guy like sparkling rays out towards the, the the command and stuff like that, or even just showing you get features and things like that. So my pick is fish shell. I feel like there's probably not enough people using it. It's an excellent replacement for bash or z. Sh, who highly recommend.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"53"}},{"id":110,"start":2743.139,"end":2750.46,"text":"Cool. I've heard heard some really nice things about it. I have a, I've got a course on z sh or Zed sh as we say over here. Oh,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"43"}},{"id":111,"start":2750.82,"end":2752.11,"text":"yeah, I forgot about that. It's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"50"}},{"id":112,"start":2752.11,"end":2754.719,"text":"funny. People are like, What are you saying? Zed sh for?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"52"}},{"id":113,"start":2755.829,"end":2758.349,"text":"Your extra? Yeah, extra carrots and","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"45","ss":"55"}},{"id":114,"start":2758.349,"end":2776.469,"text":"shells. It's it's I don't know, I think Canada should should abandon that said. It doesn't make sense. But I've got a command line power user.com, which shows you how to use the Z shell. In a lot of people have been showing me some pretty nifty things with fish as well. Yeah. Apparently, it's it's fast,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"58"}},{"id":115,"start":2776.469,"end":2791.26,"text":"really fast as well. Very fast. Yeah, both of them are big improvements over bash. So as long as you're using z, sh or fish, I sort of latched on to fish recently and have been very big fan. But yeah. Cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"16"}},{"id":116,"start":2791.26,"end":2795.94,"text":"That should be another. I just wrote that in the doc. That's another we'll do a whole episode on the command line.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"31"}},{"id":117,"start":2795.94,"end":2800.38,"text":"Hey, yeah, I think that's an underrated skill to have Definitely,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"35"}},{"id":118,"start":2800.44,"end":2802.389,"text":"yeah. should be taught in grade schools","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"40"}},{"id":119,"start":2802.42,"end":2803.889,"text":"should be taught in grade school.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"42"}},{"id":120,"start":2806.5,"end":2841.75,"text":"Awesome. Well, that's it. That's the first show in the book. All right, the last segment of this is called shameless plugs. It's where we plug stuff, we try to get you to spend all of your money on us, or our friends, or whatever it is that we need to direct stuff to. So I'm gonna plug my learn node course right now I just released it about a month ago, it goes into building an application with Express Mongo passport. pug, it just shows you how to build an API as well as a server rendered application right on the server. It's become super popular,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"46"}},{"id":121,"start":2841.75,"end":2905.59,"text":"I think it's sold over 6000 copies so far, and people are really, really enjoying it. Yeah, excellent, excellent stuff. Um, and I am going to shamelessly plug my latest series which is React Native for everyone, which is basically getting started with React Native. And you don't have to know react, you don't have to know React Native, only thing that's required. It's a little bit of JavaScript. And we use the Create React Native app, which bless you build an app and something called Expo, which Expo basically holds your hand a little bit makes it really easy to get up and running. And look just like create react app, you can eject out of it anytime you want. If you want to use straight up, create, just React Native. But basically, it takes you through, we build a tip calculator, and by the end of it, you'll actually have an APK file signed and ready to get uploaded to the Google Play Store. As well as whatever the iOS file is, I'm not quite sure what it you know, and you don't end up working with those that much so.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"21"}},{"id":122,"start":2906.04,"end":2916.51,"text":"So you would just there's a bit of an aside, but Expo Expo means you don't have to install Xcode or whatever the dog of react. Android is, right? Correct. But","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"26"}},{"id":123,"start":2916.51,"end":2958.659,"text":"we do in this series anyways. Okay, so you don't have to install Xcode, you don't have to install the Android SDK. But with Expo, basically, it allows you to essentially push the code without rebuilding a native app every single time, it sort of like a native app shell that goes around your native code, it makes it makes one, when you save an update, it makes everything a lot faster, in terms of seeing your changes. But it also like you said, it reduces the overhead of the amount of things you have to install. And you can install Xcode or the Android SDK if you want to use those emulators and stuff as well.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"36"}},{"id":124,"start":2960.4,"end":2964,"text":"Cool. That's a good good so check out Scott's course on","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"20"}},{"id":125,"start":2964,"end":2975.429,"text":"Oh yeah, I forgot to mention Where's store dot level up tutorials.com you can over there. There's a bunch of series but it should be number one on the front page there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"24"}},{"id":126,"start":2976.36,"end":3001.38,"text":"Awesome. So that is the first show in the books. Thanks so much for tuning in. If you could give this a five star or one star or whatever star you thought review on iTunes or whatever pod catcher you are using that would mean the world to us. We're gonna try try like really pump this thing up so that we can get a lot of subscribers and and and really devote some time to doing the show. Isn't that is that it on your","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"36"}},{"id":127,"start":3001.38,"end":3002.639,"text":"end, Scott. That's it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"01"}},{"id":128,"start":3002.67,"end":3005.909,"text":"I got nothing. Awesome. See you later folks yet.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"02"}},{"id":129,"start":3007.109,"end":3017.609,"text":"Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player in drop a review if you'd like this show. Until next time","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"07"}}],[{"id":1,"start":6,"end":11.219,"text":"Welcome to syntax where we deliver tasty treats for web developers.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"06"}},{"id":2,"start":14.91,"end":198.93,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"14"}},{"id":3,"start":200.16,"end":254.22,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"03","ss":"20"}},{"id":4,"start":255.24,"end":269.37,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"04","ss":"15"}},{"id":5,"start":270.93,"end":299.91,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"04","ss":"30"}},{"id":6,"start":300.24,"end":374.19,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"05","ss":"00"}},{"id":7,"start":375.39,"end":403.56,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"06","ss":"15"}},{"id":8,"start":404.67,"end":515.64,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"06","ss":"44"}},{"id":9,"start":516.9,"end":597.99,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"08","ss":"36"}},{"id":10,"start":599.01,"end":600,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"09","ss":"59"}},{"id":11,"start":600.45,"end":831.81,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"10","ss":"00"}},{"id":12,"start":833.13,"end":876.6,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"13","ss":"53"}},{"id":13,"start":877.77,"end":899.91,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"14","ss":"37"}},{"id":14,"start":900,"end":1057.74,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"15","ss":"00"}},{"id":15,"start":1058.91,"end":1129.29,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"17","ss":"38"}},{"id":16,"start":1130.37,"end":1198.53,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"18","ss":"50"}},{"id":17,"start":1199.58,"end":1200,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"19","ss":"59"}},{"id":18,"start":1200,"end":1234.68,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"20","ss":"00"}},{"id":19,"start":1235.73,"end":1332.75,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"20","ss":"35"}},{"id":20,"start":1334.49,"end":1380.96,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"22","ss":"14"}},{"id":21,"start":1381.98,"end":1464.09,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"23","ss":"01"}},{"id":22,"start":1465.11,"end":1500,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"24","ss":"25"}},{"id":23,"start":1500,"end":1723.68,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"25","ss":"00"}},{"id":24,"start":1724.76,"end":1791.75,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"28","ss":"44"}},{"id":25,"start":1793.13,"end":1797.75,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"29","ss":"53"}},{"id":26,"start":1799.34,"end":1799.97,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"29","ss":"59"}},{"id":27,"start":1800,"end":1842.03,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"30","ss":"00"}},{"id":28,"start":1843.44,"end":1903.98,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"30","ss":"43"}},{"id":29,"start":1905.09,"end":1927.59,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"31","ss":"45"}},{"id":30,"start":1930.11,"end":1942.83,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"32","ss":"10"}},{"id":31,"start":1943.88,"end":1960.92,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"32","ss":"23"}},{"id":32,"start":1962.33,"end":1975.95,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"32","ss":"42"}},{"id":33,"start":1977.09,"end":2014.59,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"32","ss":"57"}},{"id":34,"start":2016.09,"end":2070.9,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"33","ss":"36"}},{"id":35,"start":2072.43,"end":2073.3,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"34","ss":"32"}},{"id":36,"start":2074.41,"end":2100,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"34","ss":"34"}},{"id":37,"start":2100,"end":2399.97,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"35","ss":"00"}},{"id":38,"start":2400,"end":2508,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"40","ss":"00"}},{"id":39,"start":2509.2,"end":2541.66,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"41","ss":"49"}},{"id":40,"start":2543.13,"end":2622.27,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"42","ss":"23"}},{"id":41,"start":2623.35,"end":2660.16,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"43","ss":"43"}},{"id":42,"start":2661.27,"end":2699.97,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"44","ss":"21"}},{"id":43,"start":2700,"end":2821.98,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"45","ss":"00"}},{"id":44,"start":2823.42,"end":2890.38,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"47","ss":"03"}},{"id":45,"start":2891.43,"end":3000,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"48","ss":"11"}},{"id":46,"start":3000,"end":3069.39,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"50","ss":"00"}},{"id":47,"start":3070.41,"end":3099.15,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"51","ss":"10"}},{"id":48,"start":3101.67,"end":3125.4,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"51","ss":"41"}},{"id":49,"start":3126.75,"end":3151.38,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"52","ss":"06"}},{"id":50,"start":3153.3,"end":3231.93,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"52","ss":"33"}},{"id":51,"start":3232.98,"end":3259.56,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"53","ss":"52"}},{"id":52,"start":3260.67,"end":3299.97,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"54","ss":"20"}},{"id":53,"start":3300,"end":3329.19,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"55","ss":"00"}},{"id":54,"start":3330.48,"end":3382.56,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"55","ss":"30"}},{"id":55,"start":3383.79,"end":3385.65,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"56","ss":"23"}},{"id":56,"start":3387.78,"end":3600,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"56","ss":"27"}},{"id":57,"start":3600.63,"end":3625.62,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"00","ss":"00"}},{"id":58,"start":3626.79,"end":3636.15,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"00","ss":"26"}},{"id":59,"start":3637.41,"end":3726.48,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"00","ss":"37"}},{"id":60,"start":3727.86,"end":3898.92,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"02","ss":"07"}},{"id":61,"start":3900,"end":3913.799,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"05","ss":"00"}},{"id":62,"start":3915.299,"end":3932.94,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"05","ss":"15"}},{"id":63,"start":3934.23,"end":3936.48,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"05","ss":"34"}},{"id":64,"start":3938.88,"end":3949.32,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"05","ss":"38"}}],[{"id":1,"start":1.319,"end":2.82,"text":"You're listening to syntax","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":3.059,"end":4.59,"text":"podcast with the tastiest web","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"03"}},{"id":3,"start":4.59,"end":5.76,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"04"}},{"id":4,"start":5.76,"end":7.26,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"05"}},{"id":5,"start":7.26,"end":9.6,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"07"}},{"id":6,"start":9.6,"end":10.53,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"09"}},{"id":7,"start":10.53,"end":18.96,"text":"to Episode 100 Hold on, let me get the soundboard on","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":8,"start":18.96,"end":22.44,"text":"board coming in tasty, sick pig.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"18"}},{"id":9,"start":22.469,"end":25.77,"text":"Oh, hell yes, schema, shameless plug.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"22"}},{"id":10,"start":31.02,"end":34.65,"text":"We need a specificity on that soundboard as well, we need","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"31"}},{"id":11,"start":35.13,"end":68.51,"text":"definitely needs to be added. So welcome to the 100th episode of syntax. I can't believe we've been doing it for 100 episodes already, it feels like we just just kick this thing off. But today we're gonna do sort of a meta episode, which is a syntax episode about syntax. We're gonna go through some of our most favorite episodes, some of the most popular episodes which countries are listening in, which apps people are using. We'll talk a little bit about sponsors some questions we have from you regarding the episode, and we just got a whole bag of just random thoughts talking about about the podcast should be a fun one.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"35"}},{"id":12,"start":68.55,"end":77.58,"text":"I should mention that this won't be a clip show. This is not going to be like no family matters episode where you're showing every miracle did or something like that. It's not gonna be Oh, do you","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"08"}},{"id":13,"start":77.58,"end":106.92,"text":"remember that frustration of like sitting down for a nice like, I just happened the other day I sat down for the new Sunny in Philadelphia. I was like, come on. I was like sitting I did chips in a beer. And I was so excited. This is not a clip show. Today's episode is brought to you by Sentry, which does client side server side exception and error tracking and Freshbooks as cloud accounting. We'll talk about them partway through the episode. So Scott, congratulations, one episode, or 100 episodes,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"17"}},{"id":14,"start":106.95,"end":158.06,"text":"we've done one episode for those of you don't know, this is a web development podcast. If this is the first time you're tuning in, you are turning into the 100th episode. My name is Scott Toulon ski with me is Wes Bos. We're both web developers. We both work full stack, primarily JavaScript based stuff, but we've been around the block. So to say, I'm from Denver, West is from Hamilton, Ontario. And we are just, I don't know, I'm personally just pumped. I'm feeling I'm feeling jack today. I'm just excited that this is our 100th episode. I don't know how to else to express that. So thank you, for everyone who's listened to to syntax for all episodes, even if this is your first episode. Thank you for being a part of this. This is the 100th episode. And yeah, I hope it's a lot of fun. Again, not a clip show, I think that should be the title, the title of this episode,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"46"}},{"id":15,"start":158.78,"end":190.8,"text":"I just thought of a really good coding exercise, I would love to know how many minutes or hours or days are there of us talking because we've done 100 episodes, I think probably about 60 or 70 of those are full, like hour long episodes. And then the rest of them are tasty treats, which go anywhere from 12 minutes to 45 minutes sometimes, but a kind of a cool coding challenge would be download our RSS feed, parse all of the episodes and then do a giant reduce to figure out how long there are in total.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"38"}},{"id":16,"start":190.86,"end":217.38,"text":"And that wouldn't be too hard. You've got no feed. So you have all the data. And with a lovely array methods that we have, it should be too tough. So I think that would be a fun challenge. And one that for those of you who are maybe you know, picking up the array methods or or learning this kind of stuff, I think it would be a good challenge. And one that shouldn't stress you out too much. But at the same time, you might not get on your first try. I think that's a good. That's a Yeah, coding challenge.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"10"}},{"id":17,"start":217.5,"end":223.56,"text":"The first person that does that, I will send out a free course. Oh, and I'll send you some stickers as well. Dang,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"37"}},{"id":18,"start":223.59,"end":226.56,"text":"he's putting it out there. That's the Yeah, that's gonna get it done.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"43"}},{"id":19,"start":226.56,"end":230.31,"text":"I think that's going to add syntax FM, and we'll we'll hook it up.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"46"}},{"id":20,"start":230.37,"end":238.199,"text":"Nice. Nice. We should do coding challenges more often. I think that's a nice little invention. You just did just now it just Yeah, yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"50"}},{"id":21,"start":238.229,"end":257.52,"text":"maybe that's what we should add with 100 wrap. So we have new ideas. That's kind of how am I my JavaScript 30 came across. I used to just tweet out these coding challenges. And it was really fun. And I decided to make them into an actual course and show the answer because people would always be like, Here's mine, but I don't know if it's any good. How would you do it? So that's how my JavaScript 30 came around,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"58"}},{"id":22,"start":257.52,"end":316.26,"text":"I think, let's talk about the podcast. So the first ever episode was about react tools. And when when was that it was July 5 2017. And we released our first episode, where we talked about some really cool stuff. We talked about all the things that make your life easier when you're working react, some other hosts. We talked about some tools, we talked about graph qL, which is kind of fun, because I don't think I was doing a little bit of graph qL at that point, but I think it was still pretty new for both of us. We talked about the dev tools we talked about additional libraries. We talked about react storybook which is now just storybook so things things have changed pretty substantially since that first episode and and here we are talking about react. tools and it took us I don't know however many episodes before we actually had an episode on just react it took a 66 more episodes before we had an episode called the React episode. So our first one started out a little bit a little bit higher level than we eventually got to with react.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"17"}},{"id":23,"start":316.47,"end":347.31,"text":"Yeah, I think that's one thing I've learned overdoing it is people really enjoy the very concrete. Like, that's kind of the whole idea behind our podcast is that these are applicable things you can take away to become a better developer, whether it's soft skills or hard skills. And sometimes that is talking about different tools. And then sometimes it is just about like, let's just have an episode that talks about how react works. And that was a extremely popular one where we just explained the very basics of how react worked ridiculous, hasty","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"16"}},{"id":24,"start":347.37,"end":348.21,"text":"sick.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"47"}},{"id":25,"start":348.21,"end":363.39,"text":"So this is a this is the soundboard that we have that we removed because it made a couple of people angry that we kept having we seek more data. I don't know if we overdid the soundboard. I would say we did it correctly. I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"48"}},{"id":26,"start":363.39,"end":379.89,"text":"think if we would have continued to do it at the rate that we were, then it might have been overdone. But I still shady. Andre, thank you for making this on board. Because this thing is so funny. We'll have that I love it in the description of the podcast or the notes. But this thing is absolutely great.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"03"}},{"id":27,"start":380.85,"end":448.92,"text":"All right, let's talk about our first sponsor ever was delicious brains. We started off the podcast as not necessarily a way to make money but just as a way to promote our own courses. So Scott and I, obviously I sell individual courses. Wes Bos calm force us courses. Scott has a subscription Toro service called level up tutorials. And I just love talking tax. That's one thing. And second podcast is a great way to advertise and to reach new people. Because I'm on YouTube, I blog. I'm on Twitter, but there's this whole audience of people who are not necessarily on those mediums, and primarily people who are commuting, and they have like an hour or two every single day and need to listen to something productive at that point. So starting on the podcast gave us access to this whole new audience where almost every week I hear from someone saying, hey, Weiss, I heard I found your stuff through the podcast. I'm so happy when that happens. Because that means like, sometimes you think, oh, there's everybody's on Twitter. That's where everyone is. Right? But no, there's there's people who don't do email. There's people that don't do YouTube, they don't do Twitter. And they just found you by searching web development on a podcast player.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"20"}},{"id":28,"start":449.04,"end":481.71,"text":"Yeah. And at least did stayed first and foremost that this podcast is never and will never, and has never been about promoting our stuff. Even though we do have a section called shameless plugs at the end. There's a reason why that's at the very end of the show. Because it'll you know, if you if you want to skip that part, you can skip that part. It's totally cool. It's it's no, no biggie. But the podcast first and foremost is to provide quality educational material that you can take away something from each episode. So I hope that does come across in every single episode that we do.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"29"}},{"id":29,"start":481.89,"end":510.27,"text":"Absolutely. So we did have delicious brains, which has a plugin for WordPress called WP migrate DB Pro, they approached us to say hey, can we sponsor the podcast? And of course, we said yes. And we scrambled it didn't know how much to charge we were totally new to it, which is great. Because like we didn't, didn't come into it thinking like, Oh, this could be a money making thing. But we'll talk about this a little later in the episode. But it's pretty cool to be able to surface and work with these cool companies that need to be put in touch with the people that listen to this podcast.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"01"}},{"id":30,"start":510.3,"end":561.169,"text":"Yeah, we were sort of talking before this episode started that. It's less of like, we're we're not trying to sell you things. But more or less, these are services that we want to make you aware of, because a lot of the times, it's stuff that we use every day, and we absolutely love. So it's like a joy to work with a lot of these sponsors, because sometimes you're just like, I think it was Netlify Oh, when I first used Netlify, I was like, holy cow. I want to tell people about this. And so I reached out to them, and was like, Hey, I love your thing. Would you be interested in sponsoring the podcast. So a lot of times, it's not just them coming to us. But it's a two way street. And we're we love these services and products and stuff like that. And again, it's all genuine there in terms of what we're presenting to you as sponsored material here. Again, we want to match you up with some of the services that could help you in your dev life rather than just sell yarns and stuff.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"30"}},{"id":31,"start":561.24,"end":566.029,"text":"Except for those brushes that you put in your drill, which everybody bought. Yes.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"21"}},{"id":32,"start":566.029,"end":573.39,"text":"Which are incredible. I just used them to clean clean my bath or my shower the other day, and it was awesome. It was just a great,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"26"}},{"id":33,"start":573.409,"end":640.11,"text":"amazing. I've been using mine all over the house. I love it. Yeah, let's get into the most popular episodes. So this is these stats are a little bit skewed. And that's because on November 1 2017, which I think was about four or five months after we launched the podcast, our podcast rider which is Lipson as well as a whole bunch of other podcast provider like blueberry and a couple other ones. They all sort of standardize on how do you Count a podcast download because everyone's stats were all over the place. And sometimes there was people that use a specific provider and their stats were much higher than, than they should be. So there was like this big thing on November 1 2017, where they adjusted it and a lot of podcasts actually lost about half of their listenership, because of things like pinging, like the headers. If you ping the headers of an mp3 file, it counted that as a download, when it really shouldn't. And like crawlers, thing like bots that crawl mp3, that's not really a listen, all kinds of stuff like that. So we didn't actually know about that happening, because we were just getting started at that point. And our stats were just growing every single episode. So we didn't notice any sort of drop","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"33"}},{"id":34,"start":640.11,"end":643.909,"text":"off on there. And we didn't notice the drop off, because we're too popular is what you're saying","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"40"}},{"id":35,"start":643.98,"end":661.289,"text":"no. But you just have to know that these stats might be a little bit skewed from the first 20 episodes or so they might not show up in here, just because the way that libsyn works is that you can't query the old data as well as the new data in one go, which is done.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"43"}},{"id":36,"start":661.32,"end":704.7,"text":"So but yeah, let's do it. We're going to do a countdown from number 10. All the way up to number one. So if you're interested in some of the most recent most popular episodes here, this is going to be a good list to get started. Number 10. Okay, number 10 is oddly enough, when that starts with the number 11, which is 11 Habits of Highly Effective developers. And this episode is all about things that you can do to essentially set yourself up for success is like, here's how you can get a platform for success if you follow these sort of tips and tricks. And that for those of you who are looking to find this in your podcast player syntax FM that was Episode Number 7411 Habits of Highly Effective developers. I really like that one.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"01"}},{"id":37,"start":704.85,"end":734.58,"text":"Number nine was is jQuery dead? This is a question that we get all the time for people being like, Is it still worth learning jQuery? Should I still be using jQuery? Is it dead or not? There's always that answer is jQuery dead? No. But it's really not used all that often. And we kind of go into it with this less, less of a fiery approach than most of these, like, jQuery is old and antiquated and slow and stuff like that. And we've just dove into some of the ideas surrounding it and why you might not want to be using jQuery in your next project.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"44"}},{"id":38,"start":734.61,"end":741.6,"text":"Yeah. And that was probably maybe is that the most click Beatty title that we have had so far? Maybe? Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"14"}},{"id":39,"start":741.899,"end":756.659,"text":"that's funny thing about these podcasts is the more click Beatty title, the more listens, you get to the actual episode. So writing the episode title is always a task in itself to make sure like you spend so much time building this podcast, you want to make sure people actually listen to it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"21"}},{"id":40,"start":756.899,"end":781.95,"text":"Yeah. All right. Next one is number eight, which is what's new in JavaScript, which is episode number 46. And this was basically a lot of s six s next stuff, that we were just basically talking about new things that have either come or are coming into JavaScript, and should you be aware of them or what you should be worried about, or what you should be thinking of her just to put some of the stuff on your radar.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"36"}},{"id":41,"start":782.1,"end":795.57,"text":"Number seven was Episode 48. That was VS code round two. So I should say, if the numbers were in line with all the way back since the start of the podcast, I bet that via our VS code show would be very high up in this list as well. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"02"}},{"id":42,"start":795.57,"end":798.149,"text":"that was one of our most popular ones to start.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"15"}},{"id":43,"start":798.419,"end":818.19,"text":"I think that's the episode that converted a lot of people to actually starting to use VS code. And then we did about a year later, we did a VS code, round two, which we updated a whole bunch of the new stuff in VS code, as well as some of the stuff that we love about it. So it kind of rehashing some of the content there. People are so hungry for VS code. Maybe we should do episode round three for that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"18"}},{"id":44,"start":818.22,"end":837.75,"text":"Yeah, we should. And I mean, there's just so much stuff. It's one of those apps that just evolves 24. Seven, we should also put together a list of what we consider to be our greatest hits that make it nice and easy on the site or something like that. If somebody wants to contribute a new page that's like Greatest Hits or something, maybe we can make like a pared down list of the ones that we think are","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"38"}},{"id":45,"start":837.779,"end":849.6,"text":"excellent. Yeah, we need something on the website that will allow us to surface because we have so many episodes. Now we need there's a couple features that are going to be coming to the site fairly soon, that will be able to make it a little bit more discoverable.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"57"}},{"id":46,"start":849.69,"end":879.179,"text":"Yeah. discoverability. Next up is number six, which is progressive web apps, which is episode number 50. And this was basically a what when, where, why sort of outlook on how you can get started making progressive web apps, what the heck they even are and sort of the tech behind it and why it's important. I think this is a topic that is again, it's no surprise that this one's popular to me specifically, just because this tech is exceedingly more popular now than it was, you know, two years ago or whatever, when it was still just blossoming.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"09"}},{"id":47,"start":879.299,"end":925.5,"text":"I like those type of episodes where they're explainer episodes, because you hear that term thrown around a lot. And sometimes people just need to be sat down and explained what all the different pieces are so that you're able to have those conversations and not like I'm not sure what all these moving parts are or what a ServiceWorker is, or all these things. So whenever we can have an explainer episode like that. I'm Pretty happy. Yeah, number 18. I'm sorry, number five. But Episode Number 18 is all about CSS Grid. This was over a year ago before I even released my CSS Grid course, which is free at CSS grid.io. We just explained all of the thoughts and ideas behind CSS Grid, what the benefits of CSS Grid are, why you might want to use it, versus Flexbox some of the downsides to it. So that was another really good explainer episode that I liked.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"39"}},{"id":48,"start":925.549,"end":952.649,"text":"Yeah, that was a certainly a good one. I mean, we both love and use CSS Grid. So I think that comes out in that episode. Next step is number four, which is our workflows, design, development, get deployment, all that good stuff. It's episode number 51. And this one was a little surprising to me that it was number four, because, you know, my workflow is refined to a point, but I don't you know, I don't know if it's something that is just incredible, or something like that. I don't know, no, I'm","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"25"}},{"id":49,"start":952.649,"end":954.09,"text":"not proud of my workflow.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"52"}},{"id":50,"start":954.21,"end":958.2,"text":"I think this episode might be more interesting than super useful, you know,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"54"}},{"id":51,"start":958.32,"end":1001.49,"text":"yeah, that's true. People like to peer into how other people do it, or what the ideas are. Number three was Episode Number 66 of the React episode. This is came out in August. So really not all that long ago. And it's it's the third most popular episode that we have. And we just detail into the ideas behind components JSX data fetching props, event handlers, instance classes, lifecycle methods, all that good stuff. So I'm glad to see that that one again, that's another explainer episode where we just take a topic and try to distill it down. It's kind of neat, looking at the top ones, where a lot of the top ones are just explainer episodes. Next one, also explainer Episode 20 JavaScript array methods to make you a better developer. This","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"58"}},{"id":52,"start":1001.49,"end":1042.02,"text":"one also, is there no click Beatty title, Episode Number 43. It has elements of both the usefulness and clickbait Enos in the title, and it's totally accurate. This episode is no surprise that this one's number two, I would expect this one to even be number one. And it's pretty close, to be honest. But this one, we got a lot of feedback that a lot of people said that this episode, open their brain to these array methods in JavaScript and how they're useful. So if you hear the words array methods in JavaScript, and you're not like, Oh, yeah, I know all about that. And you're working in JavaScript put this episode on, because we've heard from a lot of people that it's one of the most helpful resources that they've had on these particular array methods.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"41"}},{"id":53,"start":1042.169,"end":1072.65,"text":"I can't believe it probably at least once a week or twice a week we hear I get a tweet from someone saying I refactor my code. And it smells so much smaller or reads much nicer, or I don't have this mutation that was used to be happening with a for loop. And it's just so cool to see people actually take these things because, like, they were things that Scott and I use all day long. But it's something that I noticed from code that other people write just from teaching in person seeing examples online, where the code could just be so much simpler, if you refactor it to use these array and object methods.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"22"}},{"id":54,"start":1072.68,"end":1132.41,"text":"Yeah, absolutely. Number one, this is a I'm gonna say this is amazing that this is number one, this this episode is my baby. How to learn new things quickly, Episode Number 44. Coming in at number one here. And again, this episode was based off of a talk I did called a too fast, too furious how to learn modern web development quickly or something that you can find that talk on YouTube. It was at Site day, at these eight day conference in 2018. This episode basically took that it just turned it from a 20 minute talk into an hour long podcast where we dove a little bit more into the topics at hand, which is basically some of the stuff that you know, Wes and I were both having to constantly learn new things to present them to teach them to use them in our daily life. Yeah. So this is more or less our tips and tricks as to how we are able to pick things up quickly. And again, I'm really proud of this episode, I can't believe that it's number one, because again, it's based off of a talk I did and all that sort of stuff. So I'm just I'm endlessly psyched about that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"52"}},{"id":55,"start":1132.5,"end":1163.73,"text":"Yeah, I was very not surprised. But happy to see that it was number one, because it's a soft skills episode. And every maybe like, once or twice a month, we'll try to do a soft skills episode, which is things that we've learned as being web developers, or just in life in general, whether it's getting things done, or whether it's just approaching things in a certain way has nothing to do with code, but just how you manage yourself. And number one, which is getting how to learn new things quickly. And number 10, which is 11 Habits of Highly Effective developers. Those were both soft skills, and I'm happy to see them in the top 10.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"52"}},{"id":56,"start":1163.81,"end":1294.26,"text":"Yeah, I think the soft skills ones are easily my favorite episodes, because I like that stuff. I listen to a lot of books about that stuff. I listen to a lot of podcasts about that stuff. And that's really like sort of where my head is at in a lot of ways. And, you know, I don't know the sort of skills are the skills that you you take for granted a lot, especially in web development, podcasts. And some of the other skills that well you might take for granted might be your ability to solve bugs and to fix those bugs. And this way that you can do that is by using services to help you find Discover all those good things. And the service that we love over here at syntax is century. Now I personally love and use Sentry for levelup tutorials. And it is an invaluable tool in my toolbox. One of the coolest things about Sentry is this ability to mark bugs as resolved. And now it seems like that's not like that amazing. But the fact that you can come in here you can get an output if your bugs, you can select your bug or the error that you're getting. And you can say, Okay, I found this bug, I have fixed this bug, and I've pushed a new release. And you can even attach your releases in here and everything too. But if I marked this bug as resolved, and well it comes back if for some reason, right? Maybe you weren't anticipating it to ever come back? It is now it's now as a distinction as being a regression. And that lets you know that hey, this thing that you did that you thought you fixed well, No, you didn't. And maybe you should be taking another look at this. So Sentry again is basically a bug tracking software that gives you all the great information allows you to attach to GitHub issues allows you to find and solve bugs easily. So check out century@century.io and use the coupon code tasty treat and you will get two months for free. And that's even if you already have an account there so check out use that that to that coupon code a tasty treat, get those two months free. See why Wes and I both love and queues century. It's an invaluable tool in my toolbox.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"23"}},{"id":57,"start":1294.59,"end":1303.65,"text":"Alright, let's talk about some of the top countries so this data here is coming from we actually just pass right before we started recording 3 million downloads of our podcasts which is","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"34"}},{"id":58,"start":1303.8,"end":1306.74,"text":"really good that needs a bigger a bigger emphasis than","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"43"}},{"id":59,"start":1306.77,"end":1309.1,"text":"Oh, let me get going here note","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"21","ss":"46"}},{"id":60,"start":1314.66,"end":1317.81,"text":"38 inches man because it's long, cheap.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"54"}},{"id":61,"start":1318.95,"end":1322.61,"text":"I love that one. Get in there and fix it. Yeah, do you smell","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"58"}},{"id":62,"start":1327.98,"end":1335.06,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"22","ss":"07"}},{"id":63,"start":1336.02,"end":1342.86,"text":"These are great. So that is the that I think that's the proper introduction that our 3 million downloads deserve 3","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"16"}},{"id":64,"start":1342.89,"end":1378.62,"text":"million downloads it not too long ago that we passed to Milly as well. It's it's the podcast is it doesn't grow in leaps and bounds but it every single day you get a few more listeners. And over time that really starts to add up. That is over 94 episodes. So we pre record at least two or three episodes ahead of time all the time. Right now we're a little bit more ahead of that because we're trying to get ahead of it for Christmas so we can take some time off. So that works out to be about 30 to 33,000 downloads per episode or so. Which is pretty good. Obviously some of our top ones have much more than that and it all kind of evens out.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"22","ss":"22"}},{"id":65,"start":1378.83,"end":1383.72,"text":"Yeah, and who knows maybe by the time you listen to this, we'll be at 4 million Who knows?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"58"}},{"id":66,"start":1383.93,"end":1393.5,"text":"Maybe Maybe let's go through a top 10 countries so number 10 with so out of those 3 million downloads 38,000 in Poland","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"03"}},{"id":67,"start":1393.53,"end":1395.54,"text":"hey my people what's up?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"13"}},{"id":68,"start":1396.38,"end":1397.25,"text":"Are you polish?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"16"}},{"id":69,"start":1397.49,"end":1398.84,"text":"Yeah, dude Delinski","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"17"}},{"id":70,"start":1400.43,"end":1403.43,"text":"Well, I'm glad that my people are beating your people.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"20"}},{"id":71,"start":1408.65,"end":1410.6,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"23","ss":"28"}},{"id":72,"start":1410.63,"end":1414.35,"text":"Number nine is Brazil with 40,000","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"30"}},{"id":73,"start":1414.53,"end":1421.91,"text":"number eight is my people the Netherlands with 47,000 clearly beating Poland right out Oh come on.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"34"}},{"id":74,"start":1421.91,"end":1426.59,"text":"Next up we have India with 50,000 and some big numbers from India.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"41"}},{"id":75,"start":1426.68,"end":1453.32,"text":"India doesn't surprise me usually in most of the things I do online India's and top five. Usually reef three. Yeah, this next one in this there's a lot of people in India so what the next one is Sweden with 55,000 of those 3 million which is amazing because I really want to go to Sweden so I'm glad to know we have a lot of listeners there we should put this up against like, like a population like what population Yes, we did. Listen this isn't the","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"46"}},{"id":76,"start":1455.21,"end":1459.74,"text":"next step we have Australia Coming in at number five and","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"15"}},{"id":77,"start":1459.8,"end":1506.09,"text":"with Australia had 80,000 now they're starting to really climb these are top four countries. So number four is Germany at 109 and that doesn't surprise me as well Germany is in the top I think that Germans in top four for selling courses as well for me nice a big which is funny because German people have so much holidays that anytime I send a email blast out I get like 40 million German has been like I have like a Yeah, I have like a huge out of office filter reply and I had to figure out like what is out of office out today. Not no longer here or something I had to figure out what all those words were in German and then automatically filter them out of my inbox. Because I literally get maybe 100 just from Germans alone every time I send an email out, yeah. Oh, that's funny.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"19"}},{"id":78,"start":1507.14,"end":1516.86,"text":"Next up at number three is your land is the land of maple syrup. And hockey is Canada at 138,000. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"07"}},{"id":79,"start":1516.89,"end":1540.44,"text":"yeah, that surprises me because there's not there's like only 30 million people in Canada. But then again, I've also I've taught probably 100 Canadians to code so that's probably a little bit biased in my direction. Number two 231,000 is the United Kingdom, which is pretty cool. Yeah, super cool. And then number one, Scott, what do you think it's gonna be? Oh, gonna be China.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"16"}},{"id":80,"start":1540.469,"end":1556.79,"text":"Russia. Number one coming in hot is the Philippines. No, it's the United States of America. 1,200,000. And that is the massive numbers from the US of A so go America. We got the red, white and blue up here on top.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"40"}},{"id":81,"start":1557.18,"end":1568.55,"text":"So about a third, just over a third of our listeners are from the US. It looks like which is good. Like we're pretty spread out around the world, which is kind of cool. I want to see if we can also get city info. Let","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"57"}},{"id":82,"start":1568.55,"end":1583.34,"text":"me pull that up real quick. I want to see what do you think our biggest city is a biggest city. I would have thought it was somewhere in California. But I've already spoiled the results for me. So I am surprised to see that Washington DC is coming in at number one at 43,000.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"08"}},{"id":83,"start":1583.67,"end":1596.18,"text":"The lowest country to get with coming in with one download is the Virgin Islands British Virgin Islands. Swaziland. Northern Mariana Islands. Well, French Polynesia.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"23"}},{"id":84,"start":1596.18,"end":1596.75,"text":"Wow.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"36"}},{"id":85,"start":1596.93,"end":1603.62,"text":"nambia. I wonder if we're represented every single country? I'd like to see at one point, you know, it's funny.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"36"}},{"id":86,"start":1603.65,"end":1628.37,"text":"Let's look at some of our hometowns. Denver is the seventh most listened to city in the United States, you might be able to call that my hometown. I'm not originally from Denver. But I've been living here for a little while now. Wonder where Detroit area figures on this graph? Hey, there it is. It's coming at like 17 Oh, Canada is not showing me the cities. Okay, it's showing me Ontario is the most province.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"43"}},{"id":87,"start":1628.4,"end":1650.69,"text":"So in in Canada, we only see that a majority of the people are from Ontario. After that it looks like British Columbia and Quebec are big. And then the rest are almost almost no, almost no downloads. Just kind of interesting. They're in the northern territories. I got to go on tour and make sure we get up to all those episodes. Nice.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"08"}},{"id":88,"start":1650.989,"end":1669.86,"text":"Cool. Next up, we have, instead of top countries, let's go to the top podcast players to the software. You're using it somebody surprised me a little bit. The first one obviously the most listened to is going to be coming in from apple core media, which you'd guess is probably just the podcasting. I don't even know what you iPhone users use in your podcast to know that it's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"30"}},{"id":89,"start":1669.86,"end":1678.17,"text":"the podcast player. That's kind of like iTunes. It's so confusing. I don't use it. But that's what most people use to listen to.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"49"}},{"id":90,"start":1678.259,"end":1682.28,"text":"That's amazing to me. But it's not that surprised. Yeah, I guess because they did come up with it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"58"}},{"id":91,"start":1682.46,"end":1709.97,"text":"Yeah. Number two, and I don't even know like this number right here. 313,000. I don't know what that is out of. But I'll give you some context. 313,000 is iTunes underneath that is overcast, at 123,000. So just over a third of iTunes is overcast. And that's a very popular iPhone client that's made from what's his name, Marco arment. I use that personally, myself. It's an awesome podcast player.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"28","ss":"02"}},{"id":92,"start":1710.09,"end":1724.37,"text":"Next is Chrome, which surprises me is this people listening@syntax.fm? Because it's coming in at 117. That's quite a bit. So yeah, it's just people listening online, which is a little surprising to me, because podcast apps are pretty darn slick.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"28","ss":"30"}},{"id":93,"start":1724.52,"end":1755.11,"text":"Yeah, I think it's because people are sitting at their desk and listening. And so they just play it right on the actual player. So what that makes me think is that we should get push notifications. I've already logged in issue in our repo for this nice not push notifications by default, because those are annoying as hell. But if a large percentage of our users are listening on Chrome, there's no mechanism to get them back or to let them know when there's a new podcast other than our Twitter feed. So if we had push notifications, I think that's a pretty good use case for it when people opt in.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"28","ss":"44"}},{"id":94,"start":1755.239,"end":1780.47,"text":"Yeah, I think that's great. Next up is pocket casts. And number four, and this is my podcast app that I use. I didn't make this I just use it. This app is awesome. It just had a big redesign. Lately, I didn't know if you're in the Android world, you can sign up for the beta and get access to the redesign. And it is slick. I love this app. I've been using it for years. That's pretty much the only podcast app I've used and loved for so long. So pocket casts coming in big 72,000.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"15"}},{"id":95,"start":1780.71,"end":1832.13,"text":"And that number five on this list is iTunes which I guess does not get lumped in with the iPhone podcast app. I guess there's people listening to podcasts on their desktop with the iTunes software. And it's pretty surprising actually. One thing that's pretty popular lately is Spotify has been coming out of nowhere with podcasts. Listen, I think it's about 8% of our Audience I looked at it a couple weeks ago, for some weird reason. Spotify stats are totally separate from all the other stats in our Lipson dashboard, which is bizarre to do that, but listen to the large percentage did you do Really? Yeah. That's amazing. That's kind of interesting to see what all the different players are where people are, because that also helps us design a better experience better shownotes. If you know that more people are on their mobile and more people are on the desktop. How can we make those experiences better for the parts that are not just listening to us?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"40"}},{"id":96,"start":1832.189,"end":1850.25,"text":"Cool. All right, let's get into some of our lessons learned about sponsors. And again, we mentioned at the top of the episode that like the sponsors that we work with just companies that we love, and love to work with and want to share with you more than anything else. So I hope it never sounds like we're trying too hard to to sell you on something that we don't believe in, you know,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"32"}},{"id":97,"start":1850.309,"end":1920.78,"text":"totally. So sponsors are pretty cool. They pay the bills, obviously, we have to pay for hosting this thing we have to pay our editor who is Adam, Adam is our editor. And he makes us sound so much smarter than we actually are, cuts out all of the arms and ahhs and things that we accidentally say, and we shouldn't make it into the podcast and things like that he is that podcast Royale dotnet. If you are looking for someone to do your podcast editing, he does a fantastic job, we're really happy with him. So we pay him we have to pay to host the podcast as well. And then our time I'll say pay for our own time that goes into it. So we record two a week. One of them's usually about an hour, the other ones a half an hour, each of those takes sometimes the episodes require like hours of research to go into it. Sometimes they're a little bit more off the cuff and but we always do spend at least half an hour 45 minutes prepping for every single episode and some of the other ones where it's like, like the progressive web apps, one was probably at least a full day of doing demos and stuff like that, because that's the thing about doing a podcast, you need to know what you're talking about, at least at some point, right? Like we're not experts on everything. But we need to be able to talk about this stuff. Otherwise, it wouldn't be all that interesting of a podcast.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"30","ss":"50"}},{"id":98,"start":1920.78,"end":1936.77,"text":"Yeah, absolutely. We have to be smart to do this about the stuff that we we are researching. And so that the topics are things that we like just talk about every day all day anyway. So it's like, oh, what are we doing this episode on react? Okay, let me prepare for the topic on react.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"00"}},{"id":99,"start":1937.36,"end":2016.96,"text":"Yeah, that was a quick one. Because we can just look we've teach react, we'd write react all day long. It's not a big deal to talk about something like that. Yeah, for sure. What else about sponsors, they always want hard numbers. So we maintain all of our listens and things like that on there. We're working on getting some like case studies, we have one dev lifts case study, which Devlin sponsored our fitness podcast, it works super well for them, they came back for a whole bunch more, but things like Log Rocket Freshbooks Sentry, it's it's like working really well enough that they can keep sponsoring the podcast. So that's really cool. hard numbers is hard to do with podcasting, because it's not like you can track a click Yeah, you don't get watched by code. Yeah, you can give people coupon codes, or you can give people like a specific link to go to, but a lot of times, it's like, oh, I need a I need like invoicing, or I need like an error tracking thing. Like, oh, what said, West talked about something like that, like 40 times on the podcast. And now I know, right? That's kind of where the benefit where a lot of these come in, it's just kind of like knowing about them. And then at some point, you're going to need one of these services, and you're going to try them out, which is pretty cool. Which is why we love it when people tell our sponsors that they came through syntax, because that shows them that it's working. We've had even I think as Log Rocket says, Man, your your listeners are loyal, they always tell me that they came through syntax. So cool to hear","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"17"}},{"id":100,"start":2017.019,"end":2045.88,"text":"you to everyone who does that. And if you're, if you're going to do that, thank you. Because really, those are the kinds of things that are free for you to do. Right. It's free for you to tell the sponsor that that's how you heard about them. But it helps us so incredibly much. It definitely lets sponsors know that you know, what they're paying for is working or is doing the right thing. So I thank you so much for anyone who does that, because that is an awesome thing for you for to do. But yeah, I think that's pretty much it on sponsors.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"37"}},{"id":101,"start":2045.909,"end":2108.9,"text":"I got one more thing. People ask me all the time, how do you get these sponsors, and it's probably about half people just contact us. They listen to the podcast themselves, or their developers listen to the podcast. And they need to be put in front of some developers. So they come through that I also get tons of email about people who want to do like a YouTube video, or they want to, like pay me to tweet about them. And I don't really do that kind of thing. So I always try to like turn that into No, but do you want to sponsor the podcast? Or will often have people say, Can we like Manning is a good example. Manny wanted to have their authors Come on the podcast and talk about the books and we said, we don't do that. That's not the kind of podcast we are. But do you want to sponsor the podcast and we can maybe feature a couple bucks every single episode and you can still get in front of the the right audience and then it works out nicely. And they said, Yeah, that's a great idea. And we jumped on a call and talk through what that would look like. So it's always about I would just like I see what you're trying to ask from me. But I think that the sponsoring the podcast would probably be a good one. A good way to go about that. Nice. Cool.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"34","ss":"05"}},{"id":102,"start":2108.9,"end":2127.6,"text":"So let's get into our favorite episodes. And this is actually really funny, something that I didn't even realize, until just now about our favorite episodes are Oh, service. Our favorite episodes are consecutive they were released one after the other. So Wes, what was your favorite episode? Ah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"08"}},{"id":103,"start":2127.78,"end":2142.23,"text":"that's great. My favorite episode was object in array methods one episode 43. I talked about why just because the amount of value that people have got from that one just makes me feel good. It's such a pickable thing. You can say like I made this code better because of this episode.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"27"}},{"id":104,"start":2142.3,"end":2175.84,"text":"Yeah. And my favorite episode is the how to learn things quickly, I mentioned that it's based on one of my talks. I felt really strongly about that topic. And it's when I put a lot of effort into and that was episode number 44. So it's actually this is hilarious because our two favorite episodes are consecutive 44 and 43, or 43, and 44. And they're also consecutive in terms of our most listened to episodes, which is number one and two on our most listened to episodes list, which would you prove that we peaked at Episode 43 and 44.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"42"}},{"id":105,"start":2176.05,"end":2183.25,"text":"It's all downhill from here. I can turn it turn it off now. That's it? Yeah, we've done our thing.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"16"}},{"id":106,"start":2185.05,"end":2215.17,"text":"Yeah, it seems like we really need to, we need to, we need to get some fresher topics to bump up those later episodes. But we also need to get some fresher books to do all the sponsors that we'll be getting with our new fresh episode. So this episode is also sponsored by one of our longtime sponsors. So it's appropriate that Sentry and Freshbooks are both sponsoring this particular episode because they've been with us. And they've heard so much. So freshbooks is another sponsor of this episode with the more about cloud accounting software, like fresh books is Wes.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"25"}},{"id":107,"start":2215.23,"end":2313.54,"text":"Yeah, he's gonna tell you a story about fresh books, as you've probably heard me explaining what it is it's cloud accounting, you can do your track your hours, you can make bills on there, you can get invoices, get your invoices out to your clients, you can track all your expenses. But here's a quick little example that I had, somebody contacted me the other day, sometimes people want to buy my courses and they need an invoice before they can pay for it because they have to get a purchase order and the purchase order gets approved. And then that gets sent over. It's like all like, the bigger the business, the harder it is to actually sell something to a big, big company. What happened is that I was doing my Black Friday sale, and someone's like, I want to buy all of them and but I need an invoice and need to go get it approved, and then it needs to come back and then they need to pay it and then you can set me up with the course. So I set up I just shot off an invoice on Freshbooks to them and and sent it on over and then I went and got lunch and then I got an email says hey, I can't pay this thing. I thought you said I could pay with credit card and I said Oh shoot, I forgot to turn on the option because there's an option in Freshbooks or you can turn on paying by credit card and all sometimes turn that off because I don't want to I'd rather them send a check. I don't have to take eat the 3% that the credit card is going to take but in this case, I was fine with it. It wasn't that expensive. So I forgot it. They're standing their credit card and hand eating ramen at us thing and I got this email like Oh crap, but we open the iPhone app, click the Edit invoice button, slide that checkbox on Click Save reply to the email. They paid it within two minutes. And it was amazing. I was like that. How awesome is that? Or I didn't even have to put down my chopsticks. And I got paid. And I think that that just goes to show how awesome Freshbooks Cloud accounting is. Where if you can send off an invoice and manage your client while enjoying some ramen, then you're probably in a good spot.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"55"}},{"id":108,"start":2313.57,"end":2340.81,"text":"Yeah. Nice. Yeah, I love that real world stuff. I think that's uh, there you go. It's important. Cool. So thank you so much for fresh books for sponsoring this episode along with so many episodes that they have sponsored for us so big, big time. Thank you to Freshbooks Next up we have some questions that we've been asked about the podcast itself and I think this is a great one. This is a question for me. And it's what's your favorite soundboard sound? I have no idea","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"38","ss":"33"}},{"id":109,"start":2342.46,"end":2343.39,"text":"how did you have that so","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"39","ss":"02"}},{"id":110,"start":2343.39,"end":2349.98,"text":"ready to go That was amazing. I was just like scanning really quickly. I was like what one wouldn't be funny here. Oh, oh.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"39","ss":"03"}},{"id":111,"start":2352.81,"end":2355.21,"text":"Downtown job downtown job","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"39","ss":"12"}},{"id":112,"start":2355.21,"end":2368.32,"text":"is one of my favorite syntax isms. Where if you didn't hear Scott's Dad told him to do it make sure he does a downtown job with just like to go over and beyond with with the quality of something Yeah, and ever since I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"39","ss":"15"}},{"id":113,"start":2368.32,"end":2399.4,"text":"just call everything a downtown job but a great great and he is absolutely ecstatic that people are using it cuz it's Oh yeah, it was like we were doing yard work yard work for a neighbor or something. You just come out and just be like, you guys didn't even pick up those leaves over there. What are you doing? Gotta be? Yeah. I have probably two I think the 38 inches man is hilarious. That's like a fan favorite. But also, I think my more one of my new favorites. The sirens","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"39","ss":"28"}},{"id":114,"start":2400.48,"end":2401.35,"text":"Which one is that?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"00"}},{"id":115,"start":2401.38,"end":2402.46,"text":"It's in your column?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"01"}},{"id":116,"start":2406,"end":2406.9,"text":"blazin.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"06"}},{"id":117,"start":2406.98,"end":2408.63,"text":"Yeah. Those are all good.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"06"}},{"id":118,"start":2408.63,"end":2413.77,"text":"Where did that come from? I just out of context, these things are so hilarious.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"08"}},{"id":119,"start":2413.8,"end":2415.81,"text":"They're great essay critics.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"40","ss":"13"}},{"id":120,"start":2415.84,"end":2428.86,"text":"Yeah. That's my dog. Nice. I think my favorite one is schema schema, because for some reason I say it funny. I think it's because I'm Canadian. I just don't understand how to say it. Otherwise, schema schema.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"15"}},{"id":121,"start":2429.67,"end":2431.59,"text":"schema, like I'm going schema","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"29"}},{"id":122,"start":2431.8,"end":2434.44,"text":"schema, like skeeball schema schema?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"31"}},{"id":123,"start":2434.5,"end":2437.29,"text":"I'm going skiing with my MA schema schema.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"34"}},{"id":124,"start":2437.92,"end":2440.23,"text":"But there's a s ch Sure.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"37"}},{"id":125,"start":2440.29,"end":2441.1,"text":"Yeah, I don't have a","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"40","ss":"40"}},{"id":126,"start":2441.63,"end":2447.88,"text":"schema. Although the thing I love about this podcast is everyone always gives us a hard time when we miss.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"40","ss":"41"}},{"id":127,"start":2448.71,"end":2460.75,"text":"Yeah, and another thing stop giving us fake names. When we're trying to read out your your questions. We have a hard enough time already with them. We're getting fake names. And I'm gonna my global enough I'm gonna believe every fake name you give me and I'm gonna feel bad.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"48"}},{"id":128,"start":2460.959,"end":2469.65,"text":"When tweeted this morning that Mike Roach was supposed to be Mike rock. my crotch. my crotch that's come on. Come on. That went by both of us.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"00"}},{"id":129,"start":2469.78,"end":2471.15,"text":"Yep. Got by the sensors.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"41","ss":"09"}},{"id":130,"start":2471.189,"end":2485.53,"text":"Next question we have here is what is your recording process? Like? Do you record your streams locally and edit them together? Are there any hacks you've cooked up as developers? So we both have pretty good recording gear, you can go back to the episodes about that. We do it for a living, we","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"11"}},{"id":131,"start":2485.53,"end":2488.8,"text":"record things for a living. So yeah, the gear is important. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"41","ss":"25"}},{"id":132,"start":2488.8,"end":2521.4,"text":"we are on zoom right now just so we can hear each other. But we don't record on zoom. Because that that compresses it doesn't sound that good. So we record locally. I use QuickTime and Scott you What do you Scott logic logic. We just record our our own. We drop it in Dropbox to send it off to our editor, Adam, and then he edits it all together. When else we put our show notes in Dropbox paper, which is kind of like Google Docs. Not sure why we use Dropbox paper and not Google Docs. Do you have any ideas? Why we do that? No.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"28"}},{"id":133,"start":2521.439,"end":2524.17,"text":"Because you started it? No. And I just went along with it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"01"}},{"id":134,"start":2525.1,"end":2536.29,"text":"It's it works pretty well. It's pretty, pretty nice. I like it. That's what it is. shownotes we send that off to Adam as well. He takes our like, jumbled thoughts and makes it into timestamped shownotes.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"05"}},{"id":135,"start":2536.4,"end":2541.78,"text":"Yeah, Adam is invaluable, invaluable. Is that the right word? I don't know. He's endlessly valuable.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"16"}},{"id":136,"start":2543.52,"end":2627.13,"text":"He has value he has value isn't much value. Yes. And then he makes it sound better. I think he applies some maybe add a maybe can cut in I think about what you add to our voices here. But I think it always sounds really good. Well, hey, they're all you syntax listeners, if you thought I was gonna pass up an opportunity to plug podcast way out. Well, you were wrong. That's crazy duck. Actually, I'm not going to talk about podcast right now. But if you want to have a podcast, that sounds as great as syntax does, there are three things you need to remember all of which Scott and Wes do extremely well. Number one, be interesting. Number two, record high quality audio, it is so much easier to produce good audio than it is to fix bad audio. And Wes and Scott are great at this. They have good quality recording gear and they record in quiet environments. They record on separate tracks. They do all that stuff, right. And honestly, it makes my job super easy. And last but not least edit, you always have to edit the first draft is exactly that it's a first draft, it's not going to be perfect. But that's the whole point of editing. Great podcasts are edited. So take the time to edit your show. And your listeners will thank you. Alright, well, congrats guys on 100 episodes, and thanks for letting me be a part of it. Question does Scott practices segways? Or do they come on the fly? Oh, they","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"23"}},{"id":137,"start":2627.13,"end":2655.9,"text":"come on the fly? And then I have a little sunglasses emoji guy? No. In fact, you might often hear with his reaction to my segways because he doesn't know they're coming. A lot of times you might know that that that he might know that there is a Segway coming and that he just doesn't know how it's going to work. Other times. I'll spring them on I'm totally out of nowhere. No, I make them up on the spot. And sometimes they're not as good because of that. But I think that adds to the whole the whole the term of it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"47"}},{"id":138,"start":2656.14,"end":2664.84,"text":"Yeah, that's one thing we didn't talk about was sponsors is that we don't do the typical, like record it after and put some music in the background or something like that. Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"16"}},{"id":139,"start":2664.84,"end":2666.55,"text":"And we're not reading scripts.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"44","ss":"24"}},{"id":140,"start":2667,"end":2714.97,"text":"Nobody knows. It's great. We tell people give us some bullet points of what you want us to cover coupon codes tracking, a free month, whatever it is that you want us to get across to your users. And then we'll we'll just riff on that. And that tends to do the best for our listeners because it's our own experience with the product we've tried. We usually try it out before see what it's like talk about some some pains that we have and where it might solve like that. So I like it. I don't I don't think too many people. Fast forward through the sponsors. I know some some people do. That's I do that with a lot of my podcasts but a lot of people say you're the The only podcast that actually listened to the sponsor spot because we just talked about our own lives. That's One really cool thing about having technical sponsors on the podcast. So we're not just trying to sell razors or something like that. Yeah. Yes. Although we'd","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"27"}},{"id":141,"start":2714.97,"end":2726.94,"text":"like to stay on the cutting edge. So let's talk about Harry's razors. We're here. All right. Yeah. I mean, we could have a whole episode where you're just feeding me sponsors. I'll give you 10 transitions all day until I get tired.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"14"}},{"id":142,"start":2729.43,"end":2731.74,"text":"Alright, what's the next question? You got one? Next question.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"29"}},{"id":143,"start":2731.74,"end":2745.96,"text":"Although I am all for peace. Why did you choose peace as your outro statement? Because it was funny. I think we just wrote it in there. I think you even originally wrote it in our document as a PA Why","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"31"}},{"id":144,"start":2747.19,"end":2749.8,"text":"cacc? Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"47"}},{"id":145,"start":2750.52,"end":2758.71,"text":"We wanted an emphasize piece. No, I think it was just funny that there's nothing behind it. Although it would be nice. That'd be great, too.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"50"}},{"id":146,"start":2758.95,"end":2787.87,"text":"Sometimes the goofiness of this podcast is lost on people or it doesn't translate to maybe other cultures. And we get we get like messages being like this podcast is so cringy Oh, we know it's good. Yeah, we're trying to be goofy. We're just having fun. That's what that's probably the biggest compliment we get about it as well is that it's not dry. And it's it's not like so so stodgy. We are having fun here. And we are enjoying ourselves. And that's why it's so easy to listen to,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"58"}},{"id":147,"start":2787.87,"end":2857.68,"text":"it would be difficult for me to do a not fun podcast, like I would probably be not having fun. I'm just reading you documentation or something like that. Next one we have How did you meet each other and decide to start a podcast? We get asked this question a lot. we've answered it before we can answer it again. Wes, and I both released a course around the same time with the same name called react for beginners. And at the time, I don't want to offend us, but I had never heard of you or your courses. So when you messaged me, and like I have a course with the same name. I was sort of like oh to this guy. And then I went to your thing and saw you had a big audience and that if your course was bigger than my course, and was like, Oh, and I released it afterwards, I guess I'm sort of the dick in this situation. So I will definitely change it. I agreed to change it in like two seconds. And I did already Yeah, it was out of my naming scheme for things. Anyways, I was like, You know what? react for everyone, which is the original title of it isn't as easily found on Google is react for a beginner, so I'll change it. Sure enough, obviously, I didn't do any research, which is something I probably should have done that time.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"27"}},{"id":148,"start":2858.73,"end":2875.47,"text":"Yeah, that was that was really cool of you. So after that, we just got talking. I had been following Scott's YouTube, specifically for the sketch tutorials for like way before that, and I'm not sure how I found it. Someone maybe sent it to me or it just popped up in my YouTube feed. watches on","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"38"}},{"id":149,"start":2875.47,"end":2877.15,"text":"YouTube. Yeah. I don't know how that happened.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"55"}},{"id":150,"start":2877.63,"end":2913.27,"text":"Yeah. But so I asked Scott, if he'd be interested in joining what's called a mastermind, which is a you meet up once a week and just chit chat about business and what's working and what's not. And we started up a mastermind, me and Scott Joel from egghead and Josh, who he doesn't do training he I think he does training at inside of a company now. He had a lot of Meteor stuff as well. We ran that for about a year. And we just talked about starting a podcast for about a year until after a year, we actually started up the whole thing. So we have a little bit more on our origin story about how we met, you can go listen to those, but that's the short and skinny of it right now. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"57"}},{"id":151,"start":2913.42,"end":2968.08,"text":"it's funny, because maybe like a couple weeks before that, I had been looking for a mastermind group. Anyways, I had applied to be in a mastermind group, and really me like a trial run. And it was very serious. There was like seven or eight people in this mastermind group. And I was sort of like, Hey, we're looking for a new member, one of our members left, and we'll give like eight people a trial run. They gave me a trial run. And you know, here's what I believe. I believe that someone was salty enough, because I gave them website advice. And maybe they didn't ask for it. I believe I was denied that position. And that startup group, just simply because they did not like that. I told them that they were loading too many Java scripts and too many CSS is in their website, that's firmly what I believe. Instead of just yeah, I gave him some speed advice, and Hey, man, you're loading jQuery plugin, and you're not using it, but you're loading in anyways. You should not do that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"33"}},{"id":152,"start":2968.53,"end":2999.94,"text":"People ask me all the time, like, Where do I find a mastermind group? And the answer is you just start asking people because there's it's not like a thing that they're always taking people on. So I reached out to probably eight different creators. Yep. And Scott, Joel and Josh was the The only people that were interested in it. Everyone else is either busier or didn't want the me to steal their secrets. It's kind of a weird thing to get together with your competitors and share what's working and what's not working. But I highly recommend it if you are trying to do something like that. Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"28"}},{"id":153,"start":3000,"end":3019.47,"text":"Somebody asked me in my Ask me anything on Reddit, if I view you as a competitor, I do not Oh, yeah, who is a competitor, man, I want you to succeed more than anything. Like I share your stuff all the time. And I'm not putting referral links on there or whatever I just want, you know, I just want to I just want to be big ups to Wes Bos, you know, I want, I want everyone to succeed.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"00"}},{"id":154,"start":3019.65,"end":3049.95,"text":"That's a kind of cool thing is like, I think there's enough out there for the both of us, we both make a good living off of it and enjoy what we do. So the fact that we do this podcast together, maybe we'll talk about that is, even though we do sort of sell the same thing, we just reach so many more people, because we can come together and make this awesome podcast and then eventually reach more people. Because I was asking Scott this earlier, like, we never really gave coupon codes or anything out there. But I definitely think that this podcast has helped my business immensely. What would you say about that?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"19"}},{"id":155,"start":3050.1,"end":3110.64,"text":"Yeah, I would say level up tutorials is not the same business as it was before we started this podcast by a longshot, you know, and and it's, it's, it's done a lot of things for me as a business owner and understanding that sort of thing. And I'm now have the resources to, like see sort of my dreams and goals through in terms of running a business. So it's only going to change even more over the next 100 episodes of syntax. So I'm just psyched. I'm psyched about the whole thing. It's, it's all been great. So next, let's get into the questions that we get asked the most. These aren't direct questions that we were asked, but this is just stuff that people ask us all the time. And so we might not have some answers for you. But we definitely have lots of questions here. The first one is, what episode was it that you blank? What episode was it that so and so sponsor? What episode was that? He talked about this, what episode was it that he talked about the drill brushes, which episode blah, blah, blah. And this all goes back to the fact that we don't have a lot of good filtering on the site, which is something that we'd like to probably improve?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"50"}},{"id":156,"start":3110.73,"end":3152.07,"text":"Yeah, we had some plans for search, I think algolia was gonna hook up something like that with their open source plan. I'm not sure what happened to that probably fizzled out or something like that. But we're gonna get search in there at some point. For now, you can just search on Google and say site colon syntax.fm. And that will allow you to search all of the Sona shownotes it is server rendered react, so you can search them all works. Well. Another question we get is, Can my boss come on the show and talk about Bitcoin? So it's hilarious. anytime anyone releases a book, or is doing some sort of PR tour, we get an email from like a PR person or like an assistant or something like that, who wants to have their like, their boss come on the show and talk about their book. They just","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"51","ss":"50"}},{"id":157,"start":3152.07,"end":3154.74,"text":"see us in training and technology. And they're like, let's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"32"}},{"id":158,"start":3154.89,"end":3157.2,"text":"just do with web development.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"52","ss":"34"}},{"id":159,"start":3157.23,"end":3159.69,"text":"Yeah, blast the trending and technology people.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"37"}},{"id":160,"start":3159.87,"end":3173.19,"text":"So we I've only ever had one guest on and that progress has not gone live at the time recording this. So we'll see how it goes. But we would like we'll talk about a little bit more about that near the end, though. What other questions do we get? Can you do an episode on view j. s?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"52","ss":"39"}},{"id":161,"start":3174.03,"end":3193.2,"text":"That's a great one. And the answer is whenever Wes gets his act together, we can do an episode on Vue JS because I've been ready to go since like episode number 30. Whenever I released my DJ course, I've been ready to go west is dragging his feet here. We need to get west to the altar here. So to say, no?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"54"}},{"id":162,"start":3194.07,"end":3236.46,"text":"Yeah, it'll come soon. We'll also get asked about Angular episodes. And I can probably say that will never happen, just because I don't know anything about Angular anymore. I did do Angular many years ago. But it's all changed since then. And it's probably not something I'm going to spend a whole lot of time learning people ask me that with my course as well. Like, are you going to do an Angular course? And the answer to that is probably not just because, like I consider myself pretty good at react. And I don't want to just make a course on Angular when I haven't built any, like real world applications with it. I don't think that would be a very good course. I don't think you should trust somebody who doesn't actually build this stuff every day. Yeah, do it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"53","ss":"14"}},{"id":163,"start":3236.55,"end":3269.82,"text":"Yeah, absolutely. And Angular actually like a very deep well, it's a very deep well of of topics and their way of doing things where like Vue js, if you have view, you're gonna feel very at home and a lot of the concepts and especially me, because there's concepts from like Angular one, there's concepts from Blaze and Meteor concepts from react, and it all sort of works really well together. Okay, next, we're going to talk about some of our just thoughts. Here's some, here's some thoughts about syntax from the syntax crew. So what are some of your random thoughts here? Wes,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"53","ss":"56"}},{"id":164,"start":3270,"end":3340.68,"text":"I think that it's pretty cool that we have a community built around syntax you can you can see it like on Twitter, people are always giving you the gears like like not being mean, but like, like it's an inside joke about specifity or drill brushes or, or things like that, which is really funny. The Twitter is awesome. There's almost 16,000 people on the Twitter account and I just really liked the syntax Twitter because it's a you can just like retweet the crap out of anyone's stuff or questions that they may have or things that they've built in. You can ask questions on it. You can get some really good feedback. And I think because it doesn't have like a face to it, there's never any of the, like angriness that comes along with like my regular Twitter where you tweet anything and you get like the the D bags come out of the woodwork anytime you post anything. And it's just so refreshing on the syntax, because it's just people that care enough to actually listen to this entire podcast. So it's just a cool community. There's lots of experts on there. So if you have like a question about something or you want someone to weigh in, before we record an episode, I can just send out a tweet on the syntax, and you'll get experts chiming in on specific things about service workers or whatever, because that's where they spend all of their time.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"54","ss":"30"}},{"id":165,"start":3340.86,"end":3374.04,"text":"Yeah, absolutely. That's super cool. And I think some of the things too, is just that, like, there's a lot of podcasts and a lot of voices. But I'd like to think that our voices and how we're like now, not the tambor tambor of our voices, specifically, but like our versions of explaining things and stuff like that, I'd like to think that we have a unique way of explaining things that makes our podcasts special. So that's just sort of a little random out there. I you know, there's a billion people can talk about react, but I think our, our the way that we talk about react or whatever it is important.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"55","ss":"40"}},{"id":166,"start":3374.16,"end":3434.7,"text":"Yeah, like, we've definitely found our little group of folks who support us by buying our courses, listen to the podcast, so we can get sponsors and like, it's really cool. Because like, my, our stuff is not for everybody, right? Like the things that I create is not meant to make everybody happy. The things that I agreed to, it was meant to resonate with a certain kind of person. And we definitely feel like we found those people through both my courses, as well as through the podcast. So people that like the way that we explain things, they found us, which is great. Yeah. So we're glad you found us. What else do we have here? I've just learned a lot from some researching shows asking for feedback from the community. It's amazing. Just this platform, anytime you have a question about anything, or anytime you want to run a show, and you ask for feedback, before you record, you often will get the people that are the experts at something chiming in and giving you some some helpful info. So that's really cool. Well, let's talk about the future. What is the future of syntax look like? Scott? Yeah, so 200? What is it gonna be?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"56","ss":"14"}},{"id":167,"start":3434.79,"end":3483.12,"text":"It's gonna look a lot like Episode Number 43 and 44. Because that was our golden era syntax. No, it's gonna it's gonna be awesome. I'm, I'm so excited. Because he would think that we would be running out of topics, we have too many topics to pick from every single time we want to record an episode, we're throwing out like five or six different topics that we could do it on. So it sounds like we're gonna be running out of ideas here. What I'm excited for in the future of syntax is basically that the podcast will always remain number one at the forefront of it being a most helpful resource, right? The goals of each episode should be that you can walk away learning something every single time and that it's going to help you in your day to day web development, your career or whatever. And that's, that's it that that needs to be the goal of every episode. And I'm confident that it will be.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"57","ss":"14"}},{"id":168,"start":3483.33,"end":3563.04,"text":"Yeah, that's what the tasty treats that's why we say it's a web development, tasty treat podcast, because we want you to walk away being like, Huh, that array method tasted great taste, you know, like to walk away with something or, huh, I'm gonna try that that audiobook that's got recommended or just something like that. Because it's, it's really cool to walk away and say, I'm going to try X, Y, or Z the next time I come across that. Yeah, absolutely. We are toying with the thought of doing some interviews, we've been doing really well with with no interviews. So far, we've been toying with the idea of doing these shows where you do talking to people, where it's not necessarily get the same folks on who go on every single podcast and talk about their open source project or what they're working on or whatever. But more like, we have this huge list. I've sourced from Twitter, were talking to someone who learned to code after having kids. So there's probably a lot of valuable information that it's gotten. I don't have there that it could be extremely valuable to our audience. So we're like, like, how can we use this platform to help people even more by possibly bringing on people and asking them questions or talking to people who did a boot camp talking to people who work at a big company? I learned this really cool. What's this acronym? Facebook, Google, Amazon Fang, have you heard this acronym?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"58","ss":"03"}},{"id":169,"start":3563.28,"end":3564.78,"text":"No. Facebook,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"23"}},{"id":170,"start":3564.81,"end":3630.72,"text":"Fang stands for Facebook, apple, Amazon, Netflix and Google. So talking to people, what is it like working at Google? Is there slides? Is there like lots of our slides. So we have this massive list of things that we want to talk to people about the problem with interviews is that scheduling is often really hard and the audio is not always great. And those are two things that we hold in high regard between Scott and I because we need to record during business hours. Most of the time. We broke that once talking to Sasha because he lives in Japan. And Second, the audio is always a hard thing. So like we can send people a microphone, that's 50 hundred bucks, but that they might be sitting in one of those like trendy fishbowl offices where it's it's echoey. And for me bad audio on a podcast is a huge turnoff. It's a Yeah, it's a turn off. I will literally turn off podcasts, this sounds like garbage. So those are things we have to figure out just yet. But I do think that we can tackle them because of the possible information that lives in other people's brands as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"24"}},{"id":171,"start":3630.78,"end":3675.75,"text":"Yeah, I don't think I think the big thing with interviews is that so many times that not only is it bad audio, but the podcast is is transparently just a stop on the promotional tour. Like here, I see you're releasing a book, let's talk about your book. Let's talk about this. Oh, yeah. And I don't want it to ever be that because there's enough podcasts that do that. Totally. Again, the idea would be that it would be helpful, I have a number in my head number, I mean, like two or three guests that I think will be really, really interesting for our listeners, and we can talk about it after, after the show is recording. I don't want to spoil anything. But I have a couple of guests that I think would be able to solve all of the problems that we have in terms of audio quality while remaining very, very interesting guests. So maybe some to look forward to that a little teaser, a little teaser, right?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"00","ss":"30"}},{"id":172,"start":3675.78,"end":3699.18,"text":"Oh, cool. All right. So that's it. Thank you so much for making this podcast a thing. It's amazing that we can do this as part of our jobs. I think it's it's really good just for our own skills, being able to I feel like I'm better at explaining things, I'm able to much better hold up a conversation in person just from the sheer amount of time that we've thrown at creating this podcast.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"01","ss":"15"}},{"id":173,"start":3699.33,"end":3709.98,"text":"Sick. Thank you so much for anyone who's listened to any of these 100 episodes. And those of you who've listened to all 100 episodes, Jai ganttic Thank you.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"01","ss":"39"}},{"id":174,"start":3710.04,"end":3711.15,"text":"Yeah, you are. Yeah,","speaker":"Unknown","initials":"U","timestamp":{"hh":"01","mm":"01","ss":"50"}},{"id":175,"start":3711.15,"end":3713.4,"text":"you are amazing. That's awesome.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"01","ss":"51"}},{"id":176,"start":3713.459,"end":3736.77,"text":"That's always the funniest part where somebody like finds a podcast like two months ago, and then they're listening to one every day. And then all of a sudden, they it's like they're listening to all 100 I listened to one a day. And you have to wait for one or twice a week is when we put it out. So props to you if you keep up with the the amount because I definitely have some podcasts where it's just way too, too much for me.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"01","ss":"53"}},{"id":177,"start":3737.1,"end":3750.3,"text":"We've missed one section of this episode, which would have been what are your favorite podcast episode titles, and mine would be Keeping Up With The Kardashians. That's my favorite episode title. And I know everyone hates it. So there that's uh, that's it. That's all I got.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"02","ss":"17"}},{"id":178,"start":3750.54,"end":3755.19,"text":"I don't have a favorite podcast episode name, maybe big zips? That was a good one.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"02","ss":"30"}},{"id":179,"start":3755.22,"end":3873.84,"text":"Yeah, that was a good one. That was a definitely a good one. I think it was well read. Just Well, let's go ahead and talk about sick pics, do you have a sick pig cuz I have a sick pick that I've been very fond of. While you're looking for your sick pick, I will go ahead with mine. My sick pick is an app called notion. And now, this app is probably no mystery, because it's been out for a little bit. But I've kept my eyes on it for a little bit. And I'm starting to actually use it very intensely now. And that notion is available at notion. So I'm not affiliated with them. However, I will have a link to my referral link in the show notes. So if you want to help support us in that way, and you want to sign up for notion, click my referral link, that'd be great. But notion is basically you could think of it as like a note taking app on steroids, it does notes, it does like knowledge base stuff, it does cabanne boards, it does spreadsheets and databases, it does to do lists, and it has a bunch of templates in it. And one of the things that I think this is like really sets us apart from other apps is that it definitely feels more like a web site sort of thing. Because you're creating pages, within pages within pages that I'll automatically create hyperlinks for you and stuff like that. And what it turns into is like a giant data resource. And I can have so many things on here. So for level up tutorials I can have which contractors I'm working with at the current time, you know, the status of invoices, I could have a to do list for my video series. So I have like a whole in production verse in progress sort of thing. And I have my design system stuff in here. And the coolest stuff about is you can link in and insert embed current things like I've embedded my figma documents in here. So you can embed your color themes and stuff like that directly in here. There's a desktop app, there's a mobile app, I have been loving this thing I have been spending all of my time in it, and I can't get enough of it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"02","ss":"35"}},{"id":180,"start":3874.05,"end":3920.28,"text":"Awesome. I'm going to sic pick MongoDB compass Community Edition, which is the free version of it. I'm not sure what the other version if you have to pay for it or not. But if you are using MongoDB, and you need some sort of GUI tool to interface with your data, and this is often the case with me because if I build something, I might not build an actual admin UI until it's completely fleshed out and I just need to be able to edit my data directly. I've used all kinds of have apps I use one called Mongo hub for the longest time, but MongoDB compass is fairly actively developed. And I've noticed in the last six months or so it's been getting pretty good. It's a lot of the rough edges that I initially had with it are seemingly gone. So check it out if you need a GUI for managing your MongoDB. It's called MongoDB. compass. Cool.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"04","ss":"34"}},{"id":181,"start":3920.31,"end":3930.39,"text":"I use studio three t. I am interested in learning about compass here, because it looks like it was designed in 1990 and has not changed. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"05","ss":"20"}},{"id":182,"start":3930.75,"end":3947.34,"text":"yeah, there's a lot of these like Java apps that like use their own GUI that are like pixelated and things like that. So yeah, this is such I think this is built in I think that's an electron app. It feels like an electron app. Which, which by I mean, it feels like a like a web app. Yeah. Yeah. That's pretty cool.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"05","ss":"30"}},{"id":183,"start":3947.34,"end":3951.45,"text":"I feel like notion is probably an electron app as well. Do you have any shameless plugs?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"05","ss":"47"}},{"id":184,"start":3951.57,"end":3964.83,"text":"It's gonna shamelessly plug all of my courses Wes Bos calm for slash courses. I probably just sent you tons of emails from Black Friday. So I won't push any further on that. But thank you so much. If you didn't pick it up on Black Friday, Cyber Monday means a lot to me.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"05","ss":"51"}},{"id":185,"start":3964.98,"end":4012.29,"text":"Yeah. And I'm going to again, I'm also going to, shamelessly plug levelup Pro, which is a subscription service for mobile tutorials. You'd access to over like something outrageous, I think was like 400 Premium tutorials right now. And then there's going to be like 300 more over the next year. If you send that yearly save 25%. And I'm going to announce right now you have very little time before the prices are going up. We have so much content right now, so many improvements coming to the platform prices are going up January 1. So if you miss the Black Friday sale, and you still want to get in at a low rate, and you want to be locked into that rate forever, sign up for it level up tutorials.com forward slash pro right now for one year, and you'll be locked into that rate while the prices go up. So thank you so so much for everyone who's subscribed so far. And yeah, appreciate it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"06","ss":"04"}},{"id":186,"start":4012.53,"end":4020.03,"text":"Alright, that's it for today. Thanks for tuning in. See you at Episode 101101. Yeah, please, please.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"06","ss":"52"}},{"id":187,"start":4021.83,"end":4031.58,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"07","ss":"01"}}],[{"id":1,"start":0.359,"end":24.45,"text":"Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski.","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":25.98,"end":26.61,"text":"Oh, welcome","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":3,"start":26.61,"end":130.65,"text":"to syntax today is a hasty treat in the craziest tastiest podcast around we're going to be talking all about where are they now, we're gonna be talking a lot about libraries that have been hot or somewhat hot in the past things that have been widely used or hyped up, and maybe are less widely used or hyped up or if all around disappeared. Today, we're gonna be doing a little bit of where are they now with some of these libraries. Oh, my name is Scott Tolinksi. And with me, as always, is Wes Bos. And this episode is sponsored by our friends over at content full. Now content fall is a great way to host your data. Now in the modern front end web. We're working a lot with front end technologies. And that leaves out a big piece of the puzzle, which is your data. Where does this live? How does it stored these things that you don't even want to have to worry about right? Just give me a list of blog posts and let the website figure it out. So content fold makes that really super easy by allowing you to organize, manage and completely control all of your data. Not only that, but it makes it really easy to access your data when you need it. So we really love content fall as a platform for all of our front end code pulling in data. Anytime that you need to store some stuff, it is the back end CMS of the future. So check it out, head on over to content fool.com forward slash syntax FM and if you sign up for content full, you get a free pair of content full socks, and let me tell you these socks are awesome. What's and I both have the socks, and I'm wearing mine right now. So I'm a huge, huge fan of content fall. And I know Wes is as well. So check it out again, and content fool.com forward slash syntax FM. Alright, so","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"26"}},{"id":4,"start":130.65,"end":178.8,"text":"we're gonna talk about where are they now? frameworks, libraries, things that we use in web development. And probably about maybe five years ago, they were the hotness as we say, these were the up and coming or the super popular pieces of technology in web development. And now five years later, you look back and go Hmm, it's interesting that you don't see that all that much anymore. So it's important to note that we're not going to say that these things are dead, because at some point, you're going to choose these technologies, and you're going to have to commit to them for however many years, it's you can't move around as quickly as that when you have a business to run. But we're saying that these are sort of the Macaulay Culkin of web development technologies where that guy is still around, he's living his life enjoying things, but you don't hear from him all that much anymore. And you think back? Uh huh. Whatever happened to that? Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"10"}},{"id":5,"start":178.89,"end":183.51,"text":"yeah. So what you're saying is that these are gonna make me slap my cheeks and scream.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"58"}},{"id":6,"start":184.68,"end":215.4,"text":"Oh, my gosh, oh, that's terrible. I also want to say that no shade thrown on any maintainers or developers behind these frameworks, I think that's really important. Because often, there are people who take on these projects that are a little bit older and maintain them for security for features for bug fixes, things like that, because their company or their projects actually need them to survive. So props to them for doing that. This is not to say anyone who's worked hard building a framework or maintaining a framework should have any shade thrown on them for that. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"04"}},{"id":7,"start":215.4,"end":217.77,"text":"we were talking about no shade zone,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"35"}},{"id":8,"start":217.86,"end":253.95,"text":"no shade zone, we're talking on Twitter about this. And somebody said, anything that Jeremy ashkenaz put out, and so he's the developer behind backbone underscore a lot of the jQuery stuff, it was hugely influenced influential in the JavaScript community. And anything he touched, was just turned to gold, which is such like, he really shaped how JavaScript like push forward in the last couple of years. A lot of the things that he built are on this list, but I thought that was important to note as well. So let's start it off. Why don't you grab the first one there, Scott? Yeah. First","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"37"}},{"id":9,"start":253.95,"end":269.49,"text":"one is, we have a couple of tools here. So these aren't the same tool, but they're both sort of in the same category, one of which is grunt and one of which is Gulp, both of which had some cute logos. We had one that had like a wild boar when they had like a cup. I mean, was the cup with the straw and 711.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"13"}},{"id":10,"start":269.49,"end":271.35,"text":"Big, big gulp.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"29"}},{"id":11,"start":271.38,"end":319.47,"text":"Yeah, so these tools were largely considered to just be build tools. Now people would call them like a task runner or something, you know, who knows what everyone had like a marketing slang for it. But at the end of the day, the whole thing, the whole thing that these things were doing was taking your code, building it into something that the browser can understand. And then outputting some other code. So whether or not that is things like, you know, collecting your JavaScript files, whether or not it's compiling your sass or stylus, which I would imagine is the first time that a lot of people use some of these was just simply working with sasser or one of those technologies. It would also do things like compress your images, it might build a web font or something like that. It there's a host of tools that these things could do. But at the end of the day, everything involved here was really just a build tool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"31"}},{"id":12,"start":319.5,"end":418.08,"text":"Yeah, I think that I still use Gulp in a whole bunch of my projects. Yeah, I still look at Gulp as one of the best things that I've used in the last five, six years, because it was so easy to use, so easy to build plugins for the plugin ecosystem was was massive. And when we moved over to using the replacements, which is more things like using parcel or Webpack, or whatever, it sucked, because like, first of all, I was coming from this idea of taking something, piping it through all of these transform, and then outputting it somewhere. And Webpack has a whole different thought. And the way that we build apps is totally different. These days, where it's more of like a No, your application requires these assets. And Webpack is smart enough to detect those as the throw. So you approach it in a bit of a different way. So I don't think that Gulp is really going anywhere. I know that a lot of people are still building websites where they just need to be able to pipe in some images and some sass and some JavaScript, they need to run it through whatever transforms they need to do, and then kick it out to a build process. But I do think that because of the different types of apps we are building, especially when you look at things like Gatsby, or next, or, or whatever the tools need to be built into these frameworks for us, which I wholeheartedly welcome. Because I don't just not use Gulp anymore. I very rarely ever have to touch something like Webpack because the frameworks or something like parcel just does it for us. So yeah, I think we went we went back a little bit for a little bit there with Webpack. Obviously, people still using Webpack. But I prefer these tools that use Webpack or parcel under the hood and do the hard work for me.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"19"}},{"id":13,"start":418.11,"end":463.02,"text":"Yeah. And I'll even still reach for Gulp in situations that are like, Alright, I need six images output in different sizes and dimensions or whatever. And instead of using like Automator, or some built in Mac OS thing, I'll reach for Gulp because it's just like a syntax. I know. I know the plugins I know just write a simple utility for myself. So I still see Gulp used all the time. grunt not so much. I don't do like I don't see a ton of people using grunt are suggesting to use grunt as more. I remember when Gulp first came out, I was sort of like, Oh, this is a lot nicer to me than than grunt. And I dropped grunt very quickly. But I'd be interested to hear what percentage of people are still using grunt specifically? Because I just don't i don't see it that much anymore.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"58"}},{"id":14,"start":463.169,"end":471.87,"text":"Yeah, I forget what the differences were, it was something to do with streams versus like, temporary files. And how fast Gulp was over grunt,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"43"}},{"id":15,"start":471.87,"end":474.9,"text":"I remember was a lot of extra syntax compared to go,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"51"}},{"id":16,"start":475.11,"end":508.65,"text":"Yeah, it was. That's the whole like coding versus configuration. A golf was a huge config file, which web pack also is I much prefer the Gulp approach to things where you would just code JavaScript, and pipe them through all of your your, your plugins that you have. So kind of interesting to see us move along. That's probably the saddest one that I see moving on. But I understand why it is. Because the tools are getting better. And the needs, especially with JavaScript, our needs are much bigger with things like code splitting, tree shaking, it's just a lot more complicated that you simply just can't do that with something like gob.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"55"}},{"id":17,"start":508.68,"end":583.11,"text":"Yeah. And I think another thing that these tools that we should mention is that they were an important to bridge to a gap that was like, people who who are getting into compiling things, they would use an app like compass app or code kit was used for a long time. And there were some others, I forget their names even now. But like these tools allowed us to understand the build process more than just opening up an app and selecting a folder and having it do its thing. So let's get into the next one, which is one that we briefly mentioned in the intro, the star which is backbone, and it's sort of counterpart library that's often used, why I would say mostly used with it, which would be Marionette which you would be described as a backbone framework. It just makes writing backbone code easier. backbone would be considered one of the sort of Oji web frameworks In my opinion, were like, this was one of the very first JavaScript based frameworks, front end frameworks, I should say that that really took off to the point where it was highly used and things like enterprise and I remember interviewing for a lot of jobs, even well into Angular, angular one's heyday, that we're still using backbone and lots and lots and lots of work on backbone itself. This is this was one of the first ones West Did you ever have any experience using backbone yourself?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"28"}},{"id":18,"start":583.199,"end":592.83,"text":"Yeah, I think back to it. I remember so clearly taking the peep code backbone tutorial, which was a huge motivation for me building my own","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"43"}},{"id":19,"start":592.949,"end":594.27,"text":"Ember tutorial. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"52"}},{"id":20,"start":594.29,"end":618.48,"text":"yeah, deep code. code was awesome. For those that don't know it. He was one of the early like, screencast stirs that would sell modern web development screencasts. And the whole company got bought up by I think it was Pluralsight, which I thought was kind of cool. So I did build a couple things. I don't think I ever deployed any production backbone code, just because by the time I got up and running with backbone, angular was becoming popular. That is","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"54"}},{"id":21,"start":618.48,"end":624.18,"text":"that I don't know if that was an intentional joke about backbone, but it could be read as one. And in that case, what","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"18"}},{"id":22,"start":624.18,"end":625.04,"text":"was the joke?","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"10","ss":"24"}},{"id":23,"start":625.14,"end":629.82,"text":"The joke is that backbone was difficult to learn. And so by the time you got up and running with it,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"25"}},{"id":24,"start":632.22,"end":669.6,"text":"I think it was definitely difficult to learn. But also it was the first like frame where there was like knockout as well. Yeah, at the same time, and can j s was a big one, or but even before that, we had something called JavaScript MVC. But that was like the first time that people were looking away from jQuery and saying, Hmm, maybe we should use a framework. And it was like a totally different mindset to approaching especially front end developers who had never built any sort of complex logic on the on the back end, you had to like relearn a lot of stuff. And I know people had that having to relearn when they first learned Angular for certain react. But the whole industry sort of was shook up when when backbone came on the scene.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"32"}},{"id":25,"start":669.63,"end":731.67,"text":"Yeah, I read the book, human JavaScript. And that sort of opened my eyes to backbone. And then I actually picked it up, I decided I was going to do a tour of the front end framework. So I picked up backbone, I picked up Ember, which was still pretty young at that time. And I picked up Angular, which was also pretty young at that time. But I remember just being like the Angular, I think picking up Angular was faster. And like you were instantly a little bit more productive with it, even though it wasn't necessarily as structured. And so for me, I like gravitated towards Angular immediately, just because it was easier. But then I did have to learn backbone for a few job interviews and things like that. And I actually went on one job interview, and they were just like, so can you code out for us two way data binding in backbone. I was like, well, I've never done it in backbone. But, you know, I've only been working in Angular lately, the past like few months. And they were just like, Well, can you do an example of two way data binding in Angular? I was like, I mean, I could, but it's going to be worthwhile for this interview. Because it's too easy. It's like,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"09"}},{"id":26,"start":733.02,"end":733.53,"text":"yeah, you","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"13"}},{"id":27,"start":733.53,"end":735.27,"text":"don't have to do anything. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"13"}},{"id":28,"start":737.22,"end":742.14,"text":"So that's, that's interesting. What was Marionette I have never looked into that. I remember hearing a lot about it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"17"}},{"id":29,"start":742.32,"end":777.93,"text":"Yeah. So Marionette was basically just a way to make backbone less verbose, less, sort of boilerplate D, it was sort of just like an extension on the backbone. And most of the time, people I don't think use backbone too much without Marionette. I could be totally wrong on that. But from the things that I worked on, and people I've talked to Marionette was almost always used side by side with it in larger projects. Because when I even interviewed for one backbone job, I didn't, I didn't do very much Marionette, I'd only done just straight up backbone, because I'd read some books and done some examples. And they're like, Oh, you should be using Marionette. Okay. Okay. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"22"}},{"id":30,"start":777.96,"end":793.35,"text":"yeah. Interesting. Next one we have here is package manager. So for the longest time, we didn't have a package manager for JavaScript, you simply would just go to a GitHub or even before that you just go to like a random website or a Google remember Google Code.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"57"}},{"id":31,"start":793.38,"end":797.22,"text":"Yep. Maybe grab the script, download CDN, and just pay Yeah, you","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"13"}},{"id":32,"start":797.49,"end":807.84,"text":"just pasted all these like script tags in the head of your document, and then your page load would be super slow. And that would be your dependency management. And if there was ever and like an update, you probably would never get that. Or you would probably","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"17"}},{"id":33,"start":807.84,"end":818.19,"text":"never even know, I just remember like loading scripts directly from a CDN and being like, I don't know why this is be a problem ever. It's easy. how things have changed. Well, what","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"27"}},{"id":34,"start":818.19,"end":830.1,"text":"came around in the early days was we had NPM, which is the node package manager. And then there was a huge push to make something called Bower, which is a front end package manager for JavaScript and CSS. Another cute logo","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"38"}},{"id":35,"start":830.1,"end":830.82,"text":"here.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"50"}},{"id":36,"start":830.85,"end":902.28,"text":"Yeah, that was that was that was a good good quality logo. I think sticker mule still uses that logo as like their example sticker, which is fine. Right. And the other one was components, which is by TJ Holloway, Chuck. He's the developer behind everything, everything on the internet like Express and I can't what they are stylus, Jade, pretty much anything I love. He's one of those one of my darling web developers. He unfortunately is a go developer. Now, he doesn't do a whole lot of JavaScript anymore, which made me sad. But so he came up with components. We had Bower, they had a big push. But it was frustrating. Because there were like library authors that were like taking sides and being like, No, I'm only pushing to Bower or I'm only pushing. Because what happened is people just started putting packages in NPM for front end, and we're like, what are you doing? This is node package manager. But NPM was like alright, bring it on. We'll be like the the package manager for web development. And slowly Bower and component never components never really got a whole lot of traction. Bower got some initial traction, but people started to side with NPM and I am so glad that as much as people complain about NPM I'm so glad that we only have one person Yeah, now instead of multiple,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"50"}},{"id":37,"start":902.37,"end":923.13,"text":"I understood like the use case for Bower, but it was like solving a problem that I didn't like totally understand at the time or feel like I had. So like I ever reached for Bower, I think I only used Bower and projects where as part of the boilerplate, and it was like, Okay, this is part of the flow of this project. But I don't think I ever really was like, this is the this is the right answer. I am","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"02"}},{"id":38,"start":923.16,"end":941.13,"text":"Yeah, my my only experience with that was, like I composer or PIP on Python, and I almost my only experience was it never freakin work. Yeah, you just like pip install, blah, blah, blah, it would just puke onto the screen, and then it would be broken. And five years later now NPM does that just as well. So?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"23"}},{"id":39,"start":941.91,"end":1038.86,"text":"Yeah. Nice. Cool. So next up we have was compass. Now compass is one of those things that again, was primarily used as a package deal along with sass, when sass first came out, it was sort of like, well, you're going to use sass, and you're going to use compass, because compass gives you all of this extra additional functionality that is more or less not to what a processor does, or preprocessor does, but as stuff you're going to need in CSS, so compass gave you a lot of CSS, like utilities, or sass, things like prefixing, there were some really cool sprite generation tools, there was like a billion mix ins they came in at, you could do things like create triangles and stuff like that really easily with a mixin rather than seat like having to write out that CSS every time. And there was just a whole bunch of stuff that that made your life a little bit better when working with CSS. And I was such a huge, huge fan of compass for a very long time I use compass, it was actually I am going to credit Chris Epstein of compass with some of the I don't know, the the drive that at least started level up tutorials to be big as it is. Because in 2012, I released a couple of tutorials on Drupal and sort of stuff like that. And it just sort of sat around and I released some sass tutorials. And I don't think the world was really ready for sass. At that time, at least the YouTube world wasn't ready for it. And then I released some compass tutorials. And Chris, he started tweeting out my compass tutorials, and that seriously took off my YouTube channel. So I owe a huge amount to the compass project in general. But I'm just a huge fan of this. And I even used the compass app for a very long time as well. This was a big one for me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"41"}},{"id":40,"start":1038.93,"end":1100.73,"text":"Yeah, I remember seeing the sprite generation alone. So we maybe should explain what sprites are for the kids to the podcast. So back in the day, you would have all these little icons that were a PNG. So you'd have like your little search icon that was a PNG. And you would have like a background gradient that would repeat on the X or Y axis that was like a little PNG, or you'd have all of your icons every like little image that you needed to make your website work you needed to have as a PNG and that would slow your website down. Because if you have 40 different little icons and borders and things that are all PNG based, you would have to put them in one big PNG file called a sprite, you set the background position of each of your divs. Like you would say like this span is 50 pixels wide and 50 pixels high. And the background position is like 300 pixels over 200. You'd like battleship Yeah, to figure out where on the sprite. That image was. And it would just show that little thing. Yeah, yeah. Was there one post? I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"18"}},{"id":41,"start":1100.73,"end":1107.08,"text":"think it was like about how Amazon use CSS sprites or something. And that like blog post, like blew up of CSS","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"20"}},{"id":42,"start":1107.08,"end":1107.59,"text":"sprites?","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"18","ss":"27"}},{"id":43,"start":1107.66,"end":1126.92,"text":"Yeah, I remember that coming out. And then every time I would like inspect element on like a search button on Google, you would find the link to their spray. Yeah. Yeah, they would need Yeah, he was fine. The spreadsheet. So that was a pain because you would have to make your own sprite sheets, or I used this website from Jake Archibald called Sprite. Yeah, I love this breakout. Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"27"}},{"id":44,"start":1127.04,"end":1127.79,"text":"Oh my god,","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"18","ss":"47"}},{"id":45,"start":1127.81,"end":1215.32,"text":"it was so hard to make them because if someone was like, cool, but can we have a red search icon, you'd be like, Oh my God. Now I have to like change my sprite sheet. So what this did is you would just export all of your images as separate PNG files. And then you would just set the background image to be like background image, lemonade, search dot png, and then the lemonade script would collect all of your PNGs put them into one big file and then replace the CSS to wherever that image was in the destination, which is such a roundabout way. And now we don't even have to think about that because you have things like svgs and and whatnot. You don't have to worry about it. You don't have like interface rasters anymore. Yeah, totally. So sprite generation. What happened to Compass it basically, it didn't become unpopular. It's just that the entire language progress. So the vendor prefixing either went away, vendor prefixes are almost not a thing anymore, or they got replaced with autoprefixer. And people started to get a little bit overwhelmed with how messy compass code could get because people got like so excited about all of these mix ins and having a variable for absolutely everything. I remember how A project where I was like, Where's this border radius? Sen. Oh, it said in this file, it's related in this file treasure that is imported from this. And I would just like being chasing around, I'm like, I just want a border radius variable, or I just want to type five, and have it show up, right?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"47"}},{"id":46,"start":1215.54,"end":1234.55,"text":"That was always the worst when you had like a big framework type project. And it would be like, Alright, now I want to change this one particular element, you go to that particular element, and it said as a variable, that when you change that variable changed like eight other things. So then you had to make a decision. Do I want to branch this off from this? Or like, How do you like it would just it like complicated things before it needed to be?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"15"}},{"id":47,"start":1234.61,"end":1278.72,"text":"Yeah, Foundation, I think foundation two was very heavy, very heavy on these these calculations. And I often found myself being like, this is unnecessary. For me, at least, that happened. And then the big thing that killed it was that the maintainers themselves sort of like gave it the kiss of death intentionally. They said, We are not going to port compass over to two node sass or lib sass or anything like that. So it was only in Ruby sass. That's what sass initially was in. But that was very slow. So it got rewritten in C. And it got rewritten in Dart as well. And the maintainers of Chris said, I will not port this over because it's not necessary. We have better things now. And this project served its purpose, but we don't need to go any further with it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"34"}},{"id":48,"start":1278.72,"end":1306.8,"text":"Yeah. And cheers for that. It made my life so much better at the time. Yeah, cool. So I think that's it, we have a lot more of these, we're gonna be doing more of these episodes sprinkled out whenever we have, there's a lot of tech that you know, was once used and is no longer used. So I hope you found this episode to be interesting. And we're gonna keep these going. You'll have another one next week. So we're gonna do another Where are they now next week, and we got some more really exciting fun stuff for you planned. So yeah, keep your ears open for that one.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"18"}},{"id":49,"start":1306.8,"end":1309.82,"text":"All right. Thanks for tuning in. We'll see you Wednesday, please.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"46"}},{"id":50,"start":1312.29,"end":1322.07,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"52"}}],[{"id":1,"start":1.319,"end":4.59,"text":"You're listening to syntax the podcast with the tastiest web","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":4.59,"end":5.76,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"04"}},{"id":3,"start":5.76,"end":49.409,"text":"strap yourself in and get ready to live ski and West boss. So welcome to syntax. In this episode, we are going to be doing a another potluck like we do every single month where we answer listener submitted questions. So if you have questions of your own, and you'd like to hear them on a potluck episode, First, make sure it's a good question. Second, head on over to syntax FM, and submit this question that we have a I think it's a button in the top right that just says ask a potluck question. So go ahead and click on that button, ask your question there, it gets submitted to our sheet. And then we go ahead and pick the ones that we think are going to be very good for everyone else to listen to. My name is Scott to Lenski and with me as always is West boss.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"05"}},{"id":4,"start":49.469,"end":53.58,"text":"I am hungry for some tasty treats today. Scott, I can't tell you that Oh, yeah, I'm hungry","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"49"}},{"id":5,"start":53.58,"end":80.7,"text":"to this episode is sponsored by as Wes said before the show two types of books, fresh books in Manning books, which is the joke I think we made before. So there we go. When we want to get further on in the episode, we'll give our sponsors a little bit more time talking a little bit about fresh books and Manning books. So let's get into this potluck where we have a whole bunch of fun questions lined up for you here. I think it's gonna be really good one. Do you want to take this first one? Yes,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"53"}},{"id":6,"start":80.759,"end":270.72,"text":"I do. So the question is from Aaron Kessler, how do you distinguish between normal and virtual pixels on high DPI devices? How do you call pixels? Which tools do you use for optimizing images? So interesting question. So real quick, if you're not familiar, device, screen resolutions are getting really high. So the way it used to be is you'd get like a 19 inch monitor, it would be 1080 P, and you'd have 1920 pixels by 10 ADP pixels. And the actual pixels in the monitor are the actual pixels that show up on the screen. Now we start to get higher DPI devices. So think of a 4k TV, a 4k TV or a 4k monitor has four times the amount of pixels. But if you were to run it at those pixels just get much smaller, because they can still you can still get a 4k 19 inch monitor. It's just that the pixels are much smaller and everything is much crisper. And the problem with that is if you were just to run it at, like however many pixels 4000 pixels wide, everything would be extremely tiny. And you can't necessarily do that. So what high DPI does is that it will scale up the content like your phone, for example is not the first retina iPhone was not 320 pixels wide, it was 640 pixels wide. And then it just doubled everything up. So you you as the developer still thought it was 320, but everything was just twice as crisp. So that's the whole idea behind high DPI, I recently upgraded to a 32 inch 4k display. And this is really good because you can everything. It's not totally retina but everything is very nice and crisp. So the question is how do you handle this way back when the first retina iPhone came out? What happened is that everyone was still using like PNGs for like icons and stuff like that. And you still see it on websites, you'll you'll see a company's logo, and it'll look pixelated, and everything else will look nice and crisp. And that's because they are using a raster based logo or raster based images for that. So what are the solutions, I almost don't care about this at all, because it's Yeah, the devices problem to figure out what the resolution is, whether that's your Mac, and you're changing the resolution for more space or less space, or whether that's a phone where they are scaling up the pixels, you should mostly be using things that are vector base like type is vector based SVG is vector base, all of CSS is vector based. So you don't have to worry about any of that you don't have to worry about sizing or anything. Really the only spot you do have to care about is raster base images. And if that's the case, I will almost for logos, I'll just export it at twice the size for JPEGs. I mostly don't care about it, I just I don't want to people were exporting like double the JPEG for a long time. And then that just caused your your download size to bloat because now you're serving it, you can use things like was this source set on an image tag to provide different images for different resolutions if you want, but I mostly just lean on using vector based things and for raster based just make them a little bit bigger than they have to be so that they do look fairly crisp on high DPI devices. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"20"}},{"id":7,"start":270.749,"end":438.45,"text":"I mean, my answers the exact same really, I don't think about it. And then the only time I do think about it is with my like course thumbnails, which are raster images, and even then it's like just a hold out of an older website. So I think though, those are gonna be going away. And the idea here is that well, now you can do shapes with CSS, you can do shapes with SVG. I mean, you can do so much. So between CSS and SVG, there's really not a whole lot of reasons to really care about this too much more other than just to be aware of that. It's a Cool. So next one we have is from AJ. He told us just to pronounce his name AJ, which is nice. And this question is, what are your thoughts on TypeScript? And selfishly I'd like to be learning about using it with react, any temptation to try it out if you're not already doing so why why not any sources you'd like to share on TypeScript? I recently released a course in November called level one TypeScript. So I have quite a bit of little experience here lately, picking up TypeScript and using in practical ways and things like that. And for a long time, I know we both sort of had been talking about some of these type systems for JavaScript as being like sort of a little bit of the Wild Wild West right now in terms of, there's a bunch of different ones. And you know, what are the best ones which are going to arise and which ones are going to really take care of the market share and things like that, if you've been paying attention, or looking at this stuff at all, you really see TypeScript and reason, both getting a lot of push lately, and I think TypeScript in particular is really sort of like the the popular solution. So I've become a big fan of TypeScript. And over the course of using it, and diving in deeper while making a tutorial series on TypeScript. There are things I don't necessarily like about it. But there, there are so many things to like about having types in JavaScript, in general. So I got used to types. The, I think, mostly just via one back end sort of programming, but also the graph, qL, and Apollo, I mean, everything's typed there. And if everything is typed there, it's going to be really nice to have your whole system be typed, because you can see the benefits of a type system immediately. And TypeScript In my opinion, does have the most to give you a straight up type system with getting in the way the least. And so that's personally why I like TypeScript, I think it's a good thing to learn, it's the thing that you're going to start seeing a lot on job applications and stuff like that. So I would personally add it to your list of skills, it's not a huge time sink to learn it, I don't think it's a huge investment to learn it. So if you're looking to learn in you know, you can subscribe to level up pro or by whatever not intending this to be an ad, you can find videos on YouTube as well just go ahead and at least at least get a basic understanding of what it is and how to use it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"30"}},{"id":8,"start":438.69,"end":643.159,"text":"I'm pretty much of the same way. I think it's really neat. Doing graph qL has made me realize that types are awesome. And it would be great, I don't think I'd recommend it for someone who is brand new to JavaScript to learn it, I think is first learn regular JavaScript and then sort of move up to that it has this there's this really interesting tweet by Devin COVID, who's the the dev behind parcel, that amazing developer and he said, why he's not using TypeScript and people got spicy about that, I thought it was really interesting. And like, you're obviously free to use whatever it looks like he's using flow, which is a another way to do typed JavaScript. It's not its own language. It's just a syntax syntax that you add to your existing JavaScript to get types in it. But it's kind of one of these things like CrossFit, where people start using it. And they're just like, this is amazing. To tell everyone, I think people come off a little bit heavy sometimes. But I think there's a reason behind is that it's, it is awesome. So I'm really looking forward to to picking up a project in it in the future, because I've used it in a couple little demos here or there. But I haven't done anything like significant in it. And it's on my list of highly requested tutorials. So yeah, pretty cool. I think you should definitely check out TypeScript. If you are wondering, I don't think it's going anywhere, especially with the tooling of VS code. Now as well, word next question we have from Luke, I have heard you guys say good things about Digital Ocean before, but I am reading a lot of bad reviews about them on various websites. Are these just frustrated developers? Are there any merit to these claims? So Digital Ocean for those who don't know is like virtual private server, meaning that you can pay five bucks a month and you get a server quote, unquote, and a dedicated IP address, and you get some dedicated RAM and you get some space, put your stuff in, it's just a raw Linux box that you can log into and install all your stuff. They also have this idea of like droplets, your install is a droplet, but they have this idea of like pre made droplet. So you can you can grab like a Rails droplet or a node droplet and just get up and running immediately. The downside to that is that you it's still a Linux box, and you still are managing the box yourself. You're responsible for security updates you're responsible for if you just nuke the whole thing, and it doesn't work. It's not like when your WordPress goes down, you can just call GoDaddy and ask them why is my WordPress broken? Because at the end of the day, this is just it's just a resource. It's just a service that you you can buy. So I think when people the Digital Ocean is amazing, one of my favorite companies ever they are making some amazing stuff. I love everything they do. I think people who are frustrated with digitalocean are frustrated because it's not the handholding that they may have been expecting. Right And the reason it's cheap is because it's a raw box and you Gotta do it yourself. If you do need a little bit more hand holding, you need to go for some sort of managed service like like a Heroku, or now.sh, or WP engine or something like that, where these are services that are meant for hosting your, like Netlify or, or anything like that, where these are services that are meant for specifically hosting specific types of content. And it's going to be easier, but it's just probably going to be a little bit more expensive as well, the the more low level you go, the cheaper it gets, like the the very low level, you get like AWS lambda, which is impossible to configure, but the very cheapest, you could run your website on three cents a month, probably. And then the very expensive is the easiest.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"18"}},{"id":9,"start":643.23,"end":724.02,"text":"Yeah, I remember when I signed up for digitalocean. And I was just like, oh my god, I can't believe how cheap This is. And then I learned everything I had to do myself, which I had never had the experience of managing a VPS before then actually, I guess I had with a media temple. But I don't know, for some reason digitalocean just felt a little bit different. And I really loved it simplicity and the documentation. I agree. I think most people guys are amazing. Yeah, that would get upset with that maybe it got in a little over their head without knowing what they were expected to be doing themselves on this platform. Or maybe they don't have the DevOps training or something like that. I personally didn't. But I have such a fondness of hacking away at those little things and gaining that Yeah, like little knowledge, you're experimenting that way. It's like a fun thing for me to figure out. And digitalocean One of the things that they do better than anybody is in their docks they like they really always have security first. And so they're always telling you to do like best practices and in configuring and you know how to how to do this and how to change the port and which you SSH on and stuff like that. And, and all sorts of like little things that I think that other platforms might just overlook showing you the bare minimum. And so I'm just a huge fan of digitalocean because of that. But again, it is a custom platform, and it requires a lot of work in that regard. So if you don't have that knowledge, by all means, take something that's a little bit more suitable for you.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"43"}},{"id":10,"start":724.289,"end":730.14,"text":"Yeah, like I had to figure out how to install swap memory. Have you ever heard of what that is? No,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"04"}},{"id":11,"start":730.23,"end":733.649,"text":"I've heard of swap memory. But I have not, I'm not going to work with it,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"10"}},{"id":12,"start":733.71,"end":765.84,"text":"you only get like half a gig of memory on your like $5 box. And if you want to npm install that will most likely like rollover, because 512 Meg's is not enough memory to do an npm install. So if that's the case, you need to use some other hard drive on the box as temporary memory. That's what swap memory is. And you have to you have to like dedicate part of the hard drive to it. And it'll it'll temporarily put those things on the hard drive as memory and read them back. And I was like, why do I know this? I'm a JavaScript developer, but it worked. So it was good.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"13"}},{"id":13,"start":766.26,"end":947.61,"text":"Nice. Alright, so the next question is from amo. And this question is really interesting, because we both run our own e commerce platforms, I thought this would be a good fit for both of us. So if you were to build an e commerce store, given that your business requirements specify that custom functionality is needed? Would it be smart to roll your own service? Or use Magento? Shopify WooCommerce? If if the latter what is the development experience like, which is shown a greater ability to implement custom functionality for server and client side code? Assume and time and budget is somewhat favorable? This is a tough question. And this is a question I think a lot of people might I think a lot of people might struggle with the e commerce is not a whole lot of fun in this territory. I know Shopify is is pretty flexible. I haven't used it myself. I have used Magento. extensively. Those of you who have been following level up tutorials for some time knows that Magento tutorials have been around for a long time. I don't want to say I hate Magento. I don't like Magento. Yeah, it's slow. It's incredibly annoying to develop on. And I don't know if Magento two has gotten that much better. But Magento one for the time that I spent with it was never any fun to work with. And we had projects with a huge amounts of skews and stuff like that, and, and the flexibility is fine. If you're good PHP developer, I'm sure you can can make sense of everything. I don't know, I just never loved working in it. I think one of the options here that is missing is a platform called reaction, commerce. And if you check out reaction commerce, they're gonna you're gonna like their website. It's a cute website. I'm going to tell you that right now. They have really nice little design here. But reaction commerce is maybe more of a modern stack of things where it has react on the front end and stuff like that. It's it's quote unquote, a developer's playground. This is the only e commerce platform that I considered when I was building level up tutorials. This is the only one I considered because it's the only one I felt like I could hack together. The things I wanted to do. In fact, the I think the original version of the level AppStore was on reaction commerce that just never went live. So I like reaction commerce for this kind of thing. At some point, you have to ask yourself, Is it really that difficult to build your own thing? We have one of our sponsors snip cart is a really good option to, I guess it depends on what your needs are snip carts really great because they take some of the back end sort of some of the the structure. So to get out of the way. Yeah, it's for jam stack, but I wouldn't necessarily limited to jam stack, I think it just makes the process a little bit easier of building a custom cart. So it's somewhat in between an e commerce platform and a custom cart. So yeah, I think there's a lot of options here. And I don't necessarily have a great answer for you. I'm interested to hear what other people on Twitter or whatever saying about these platforms, I know Shopify is really heavily used. But I would check out reaction commerce.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"46"}},{"id":14,"start":947.789,"end":1042.61,"text":"I think it really like Scott says it depends on what you're trying to do. If you're just if you are trying to get up a store up and running as fast as possible, I would definitely reach for something like Shopify, but Shopify, I know I have friends who run clothing companies on Shopify, it can get expensive really quickly, where you have all of these different add ons every time you want to add a new feature either to build something or pay monthly for one of these specific special add ons that go onto your website. And if you have like multiple currencies, then sometimes they have to run to different stores at the same time. So it can get really expensive really quickly. But that said, the reason why so many people use it is because it just works. You don't really have to sweat it all that much. But if not, I think I go for something like a WooCommerce or any of these other ones that that that Scott has mentioned, I for sure would not build something from scratch myself. Because shopping carts are one of these types of things like, obviously, is my own course platform, I can do that. Because I'm just selling courses and there's like, like 12 different skews, and they don't have shipping. And they don't have shirt sizes and all that stuff. But if I was actual selling physical goods that needed fulfillment, and returns and yeah, there's a lot of discount codes. And there's, it's it's huge, how much logic goes into building an online store. And I would definitely not build something from scratch myself, I would either reach for a service and get up and running, I probably would just reach for a service. And then as I find like, Man, this thing's costing me like 1000 bucks a month, let me just put the time into actually building something out myself reach for something like a WooCommerce, or one of these other open source solutions. That would work better for me.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"47"}},{"id":15,"start":1042.649,"end":1084.17,"text":"Yeah, that custom functionality is like really sort of the kicker is like, what is that custom functionality? And like, how custom is that functionality? You know, because there could be like little things, right? Like, let's go ahead. And when they purchase this, we can do this and this and this for them. And then maybe there's bigger things where it's tying in user accounts to subscriptions and attaching them to course purchases and stuff like sort of we have going on in some of our sites. But if you want to learn some of this stuff to be able to build some custom front end stuff. Well, we have a solution for you, which is Manning books has a really nice book that has was the release date on this thing.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"22"}},{"id":16,"start":1084.31,"end":1086.56,"text":"September 2018. That's fresh","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"04"}},{"id":17,"start":1086.59,"end":1092.93,"text":"in my mind, someone say it's a fresh book. I wouldn't say that. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"06"}},{"id":18,"start":1092.96,"end":1187.43,"text":"that would have been a turnaround. Imagine if we did the Freshbooks sponsor here instead. Oh, yeah, that would have been quite the turnaround. Yeah, quite the turnaround. This book is called a view j s in action. And it's on Manning publications. This book was just published a couple months ago. And it looks like just like two months ago. So it is brand new is from Eric Han chat. And Benjamin list one. That's a cool, last name. Last one. So this is the book that I need. Because if you're looking for a book that is going to teach you how to learn Vue js, this looks like a really good one. So it's includes everything introducing Vue js, adding interactivity, working less forms and inputs, conditionals, looping over your data component design, all the way through to testing, which is one thing that a lot of places don't include, which is pretty cool. So if you want to learn view, j s, check out Manning publications view j, s and action, they've got a special URL, where you it's a bit of a get your pen out, this is a bit of a long URL, or just click it in the show notes, but it's deals.manage.com forward slash web dev. And this is a special landing page just for syntax and it's gonna get you 40% off every book or video course@manning.com use the code syntax 40 to save 40% out they've got a bunch of recommendations that they've got here as well. If you're not interested in view, maybe you want to learn react or Redux or express or anything like that. They got something on everything. So I know a lot of people don't do video courses that's gone I produce if you just want a book, check out Manning stuff. That's great.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"12"}},{"id":19,"start":1187.67,"end":1189.55,"text":"Cool. All right. Nice.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"47"}},{"id":20,"start":1189.58,"end":1215.39,"text":"Next question is from Matt Greg. I feel pretty boss and he did bpos I think that's a little head nod to me at starting projects, but so Terry Pull at finishing them as people who finish courses and projects all the time. What is your advice to getting to that finish line? And I will tell you, what is it the the path to? What's that saying? The path tell is littered with good intentions or something?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"49"}},{"id":21,"start":1215.42,"end":1220.46,"text":"Yeah, something like that I yeah, yeah, I'm wrong all the time. So I'm not even gonna try.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"15"}},{"id":22,"start":1221,"end":1301.67,"text":"This line has good intentions. That's not the saying that I want to say I say the path to finishing a project is littered with unfinished projects. And while I definitely am a big proponent of actually finishing stuff, because like, I think that that's a problem that a lot of people have is that they they start a project and that last 10% is so hard to actually push through it. So my first advice is, just know that that last 10% is going to be the hardest, because that's when imposter syndrome sets in, that's when the hard part that you didn't necessarily think about specific things that you need to put into a project, that's when you're, you're scared to put it out to the world. But if that's the case, then for sure, make sure you push through that last 10%, because that's where I've sort of gained a lot of my momentum in my career is actually finishing the damn thing. But at the same time, for every one thing that I finished, I probably have 10 little silly projects that I've started up and have gone nowhere, but it was just me sort of poking around hacking around at something. And that's really where I've done most of my learning is in these little kind of hacky projects that don't really get anywhere. But I was telling Scott, I was like, you know, Scott, the learning is in the adventure, and he started laughing at me. But I think that's true. A lot of your learning is in just in the adventure if it doesn't necessarily finish something. That's not a total loss. You can learn along the way.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"21"}},{"id":23,"start":1302.54,"end":1315.62,"text":"It's not a total loss of if it's just like a for fun project. But like, yeah, imagine it's a project for a client. Well, finishing isn't a total loss. I didn't finish this project. But I still learned Oh, yes,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"42"}},{"id":24,"start":1315.68,"end":1332.96,"text":"I did a whole bunch. I appreciate the money client. No, I mean, that's like personal projects. But for for client projects, that's the best way to actually finish things is to have your ass on the line where you have to finish this thing because someone's paid you to do it. And you likely have a deadline that you're facing. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"55"}},{"id":25,"start":1332.99,"end":1413.69,"text":"I think I think there's a big distinction there. I'm not good at finishing projects myself, which is one of the reasons that I level up tutorials is such a good project for me, because it's never finished. Like there's there's no end in sight. And I think those kind of projects are good, too. I mean, there doesn't have to be an end of a project Unless, of course, it is a client project. And if this is a client project, I think you do need to work better at like setting micro goals and things like that, making sure everything that is possibly in your to do list for this project is explicitly stated, use to do lists, check yourself off that way. And then that way, you never have this sort of situation where you're like, Oh, this project is dragging. And I don't know where I am or what I'm doing on it anymore, even though it needs to get finished. If you have a very defined list of things to get done, you can always feel that sort of validation of checking stuff off your list. So if you're looking for inspiration and those sort of things, I personally feel validated by checking stuff off my list and maybe give myself a system rewards or something that can take a break after I finished this features, something like that. And so I think that is an important thing. If the project needs to be finished. You do need to find some way to motivate yourself to keep accountable set deadlines for yourself. Even if your client or whoever is not setting deadlines for you have those deadlines and work towards them. Imagine that your butt is on the line, even if it isn't cool. So next one is from a man a man. You really","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"12"}},{"id":26,"start":1413.69,"end":1414.98,"text":"man. Yeah, amen.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"23","ss":"33"}},{"id":27,"start":1415.01,"end":1416.69,"text":"Yeah. Amen. Amen.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"35"}},{"id":28,"start":1416.75,"end":1422.54,"text":"Hey, man. Hey, man. Don't say man. Say folks. Carry on.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"36"}},{"id":29,"start":1423.74,"end":1591.8,"text":"Hello, guys. Thanks for the great podcast. You're very welcome. Amen. Could you please explain how do you organize your files? What is your file structure for you? And both of your projects and other documents had videos and stuff? How do you structure your projects? This one is a question that I think a lot of people ask for a lot of different systems, especially in like react land, because react doesn't have like a way of doing things like some other frameworks would. And this could be, you know, really nice. For some people and other people. It can be absolutely terrifying. They're sort of just like, but without a structure, how do I know where to put things, we put them wherever you want. Whatever works for you, You do you. Me personally, since my platform is the full stack platform, like I have my back end and my front end in the same repo. And it's all very interconnected, and your twinkle there. And what we have in my structure is I have basically a UI folder, an API folder, and a startup folder. The startup folder tells things what to do, whether or not that is, you know, server side rendering, that sort of thing of registering my API and getting all set up that way, telling the front end how to rehydrate data and stuff like that start in the startup. It basically handles things that are going to be taking place both client Or server side on startup, the API folder is really just going to be all of my graph, qL, resolvers, and mutations, anything that's working with my database connecting that way, and any sort of initial setup I need for that API. And the UI folder is just all react components, a big old list of react components, I have one folder for elements, which includes all of my styled components that are, I should say, like root level, block level styled components, things that are highly reusable cards, headings, colors, stuff like that. I have a Utilities folder that includes things like breakpoints and other functions for CSS stuff that are used in styled components. And then I have everything else in a feature based folder. So I have things like, let's for instance, I have tutorial like the tutorial page. So that's in a folder, name tutorials, and everything in there is tutorial page, tutorial player, blah, blah, blah, anything that's related to that all of my tests, and all that good stuff live inside of there as well. And if I need like a one off styled component, it lives in the same file as the React component that's using it, instead of being in any sort of higher structure or anything like that. But for the most part, its UI folder has elements has utilities, and then feature folder straight out of that. And I don't do any nesting deeper than that. All of my react components are named while the files are all named after the component itself. I think that's pretty much it. The test just live right there. And everything is nice and easy.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"43"}},{"id":30,"start":1592.19,"end":1758.42,"text":"Awesome. I like this question, because I've spent a lot of time thinking about mine. And the way I do it for every project is that I have a folder in my computer in my like Dropbox, or in my websites folder that has a number, and every project gets a new number that is incremented by one and that way, anytime I know I need to jump into my wife's website, I just type z 45. And then it goes into like project number 45. And that way, I can either reference the project by its number or by the project by his name. So like the the name of the folder will be like 102 dash, Caitlin, and that will be her specific folder inside of that, I will always have a design folder. And that will contain all of the sketch files, anything that I got from the client or whatever or anything that like, like the logo or anything needs to stay in there, I put that in there. In the root, I often usually have like a project.md, or ideas that MD or whatever, like a markdown file that I use just to collect ideas of things that need to land somewhere inside of there. And that way, anytime I have a phone call with somebody, or anytime I have a quick idea, I pop that markdown file open and just start typing into it. And then also in the root of that depends on like the project. If it's just a like a single application, I'll just have like a code folder and in that and there will live the actual the code base. But for most of my projects, I usually have a front end folder and a back end folder. Inside of the back end folder. If it's an express app, I'll have a controllers folder, a routes folder, a models folder, a views folder, if I'm doing a server rendered application, and then I'll have like a lib folder, or a helpers folder, as I like to call it. And anything that is like not a node module, but is still foundational code to that code base will generally go in the lib folder. And then on the front end, I'll also have a lib folder that will contain the same kind of thing of a components and a pages folder if it's an ext JS application. And I usually like to keep like Scott said, I usually like to keep my component, my styles and my tests all in a feature folder. And then if it's a shared style, I'll move that out into its own styles folder that gets reused through multiple style components. So like every project I do is a little bit different than the last one, which is frustrating to some people because they want to they want to be told, this is where these go. And this is the best folder structure. But whether you're using react or not, whether you're using style components or not, or whether you're using like bem or sass or anything, it really depends on like what your application actually tends to tends to look like but I've really have like just the high idea of having a numbered project with a front end back end design and then just a markdown file though collect any other thoughts that I have.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"32"}},{"id":31,"start":1758.54,"end":1785.27,"text":"Yeah, this is one of those ones. That's an always evolving sort of thing and it always changes how you like it. I've redone the organizational structure of my application a lot of times I mean it's changed so many times So again, this is there's there's no like the way to do it. find something that works for you find something that makes sense for you find something that you and your team enjoy and I'm sorry if if we can't hold your hand too much on that one because that's just that's just how it is. I can","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"18"}},{"id":32,"start":1785.27,"end":1816.71,"text":"tell you one thing I don't like it's when people use feature folders and use it index dot j s so that you can just require the the folder I do I don't like that because it's then you have like eight index dot j s is open at once. No VS code will allow you to see the folder name in there. But I found that really frustrating, especially for my tutorial takers. Yeah, in sometimes people just export the component and then import it into index js and then immediately export it again, there's too much overhead for me. So I don't use, I try to avoid index j s as much as possible.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"45"}},{"id":33,"start":1816.74,"end":1883.28,"text":"So here is where I use index j s, there's only one situation where I use index j s. And it's almost when I want something to be sort of like a package. And I don't, I just don't want to keep this package in its own repo because it makes more sense to keep it more intertwined with my application. So for instance, my styled components library is has an index js. So in my own personal design system, for level up tutorials, in my elements folder is an index.js that collects all of them. That way I can import any component, whether it's a car, or whatever, and it's only for CSS based components. And I do the same thing with utilities but only because the stuff that lives in utilities just things like breakpoints or maybe like a transition function or something like that. So I don't do a with react components. I do it with my stub components. And I found that makes it nice because then it like typically you're importing like I don't want to import a card from cards and then a header from heading you know, I mean, it's like that's that's a little extra to me for Yeah, imports on I'd prefer to just import them all like it's from a library or something. But","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"16"}},{"id":34,"start":1883.61,"end":1893.9,"text":"we should do one of those change my mind podcasts is that we don't disagree on anything. Except what we just changed my mind.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"31","ss":"23"}},{"id":35,"start":1894.53,"end":1995.15,"text":"Yeah. Next one. This is an easy name. Collin. Thank you, Colin, for having an easy name here. Colin asks, you guys mentioned working for agencies in the past, as a freelance web developer, what is the best way to find those agencies and to be employed by them? Also, can you explain what agencies are? I love the show. Thanks. So I've worked for agencies for most of my career. And basically, you could think of it as like a company. That's the idea of a design agency or Development Agency, or any of that stuff, it comes out of this sort of this print world history where more people would hire a print company to design a logo to design a pamphlet to do some print to do some, that sort of stuff, designed posters, whatever, right? And so the print companies, they they hired graphic designers who did logos, who did all that stuff, make things look nice. And the world changed as the world changed. We got computers, and then phones and the internet and all sorts of stuff. And now those agencies do more than just print. Typically. I mean, maybe if you're the best print agency in the world, maybe even now it's like hipstery to start a print agency or something. But typically, these agencies to survive these, they're just companies right that do design as a service. It's like a freelancer but a company, right. And so these companies now have branched off. This is not like a new thing. This has been going on since the web to do websites and web design and app design and app sites and all sorts of stuff, app sites, that's a new thing. So they basically were print shops that have transformed to be digital. their clients are typically companies A lot of it is like b2b stuff, because they're they're fairly expensive. Instead of getting a single freelancer, you get a team, or you get maybe a project manager, you get a couple designers, you get more than one design idea, or developers really","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"31","ss":"34"}},{"id":36,"start":1995.15,"end":2009.1,"text":"popular in like, like consumer products like working for Pepsi or doing a big marketing agency, or when I did, a lot of it was working in with like VH sauces. I worked with Pepsi, all these kind of companies, right?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"33","ss":"15"}},{"id":37,"start":2009.16,"end":2104.5,"text":"Well, so I've been on a lot of ends of the spectrum. So my three agency jobs were very different sizes. My first job was like a small 12 to a 16 person agency. And in that in that agency, most of our clients were local companies. So we wouldn't use a local medical supplies company who needs a website. There's a Yeah, you know, one of the concert venues has an annual concert, and they need like a specialized website for that annual concert along with screen printed posters and logos and stuff like that. One of our big clients was, I think the biggest client for that was just a conference, right? It's a yearly conference. And so those kind of gigs they they keep the company alive, they keep the company open, and they hire, you know, any 12 to 15 people. I had another agency job at the University of Michigan where all we did was internal sites to the University of Michigan. Every single department there, like needs a website with custom needs and stuff like that. So they the clients were even though they were internal, they were all sort of their own own individual projects. And then like you mentioned, I also worked at a big agency where our client was Ford, and with Ford, the agency did all of their, their video, they did their print, they did marketing campaigns, they did a whole lot of stuff, in addition to web work. So it was just like one small component of it. So quote, unquote, finding an agency job, it's just applying for a company that does work for clients. That's it and you'll look at them. I don't know if they'll be like so and so design agency, maybe they will, but you'll see a ton of them around any any major city that you live in or anything like that. I don't know how to Explain it other than their design companies, development companies, that sort of thing. Yeah, yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"29"}},{"id":38,"start":2104.56,"end":2171.88,"text":"So Colin asked, he's a freelance web developer, and how do I work with these companies, because that's how I got a lot of my work is that I was like subcontracted from an agency for the larger client. And the way that I did it was I just really got to know, developers. So the kind of the way in is not through emailing every single one that certainly might work. But what worked for me is that I was just like, friends with the developers or, like, I would do workshops on the weekend with ladies learning code. And there would be often project managers from these agencies coming in, not to learn how to code but just so they can learn how to like talk to talk, and be able to talk to their own developers. And I would say, Hey, I'm also available for hire, if you ever need me. So it would either be the project manager or the developer, they need help. Oh, Wes is really good at x, y, and z. Let's get him in. And he can help us out with this specific JavaScript project or this WordPress products that we had. So that was sort of my way to infiltrate as you, you don't get in at the top, you get on the lower level, because usually, when the developers or the project managers need help, they go to their own network first.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"04"}},{"id":39,"start":2171.9,"end":2240.21,"text":"Yeah, I would say almost anytime we needed outside help from freelancers, we would hire one a specialist, someone who was really good at one particular thing. And then maybe we had seen them on message boards or like if we needed a an expert for this one particular Drupal feature, we would find the person who made the plugin and asked them if they could do it, too, we would hire within the like you said, our network, but also the network of the company, maybe past developers who had left to go do another gig, but were still really good and had that specific knowledge. Or maybe they would want to pick up some extra money. So we would almost go to people that had to work at the company experts. And then I guess after that it is all personal network who you've met at meetups, who you know, can get the job done and who you know, is going to do a good job for that. As a freelancer, that's how to get in, in my opinion, as well. And one of the things you want to make sure if you are a freelancer trying to get some of these gigs, you're gonna want to make sure that you have excellent bookkeeping. And by having excellent bookkeeping, you're gonna make sure that not only do you get paid on time from these agencies come tax time, at the end of the year, you're going to have a clear picture about all that fat cash you're rolling in from these agency gigs he picked up. So the way to do that is with fresh books.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"11"}},{"id":40,"start":2240.28,"end":2351.07,"text":"Yes, you do. So when I worked with agencies, a lot of time, I would bill hourly. And what's interesting about that is because they need to know the breakdown of your hourly work so that they can then push that to the client as well and Bill them hourly for the stuff. So I had to keep really close logs of exactly what I was working on, and what different features because they build client different rates for different types of stuff. So if you use Freshbooks, you can use their time tracking tool right inside of Freshbooks. You can set up a client, you can set up different types of jobs. I know some some agencies charge different for design and different for development, and different for back end front end development. So you can log what type of work you've been doing. And then simply just send off that invoice off to the client. So check it out, if you are going to be working with agencies or just running your own freelance show@freshbooks.com forward slash syntax for 30 day unrestricted free trial. Don't forget to use syntax in the How did you hear about a section sick? Next question we have here is from Peter, I once read an interview Wes gave in which you mentioned that frequently changing jobs is the best way to get a salary increase. Do you believe that to be true is job hopping a bad thing is a criticism justified? So I forget where I gave that interview. But this is coming from me who had taught at boot camps. And I've seen hundreds of students go through boot camps. And I do agree that this sounds terrible that you should just be dropping companies and moving jobs every six months, because that's what everybody complains about millennials doing already. But just from the sheer amount of seeing people who have started off as junior developers, and over the course of four years, trying to become senior developers, I have seen people get extremely well paying salaries by doing exactly this. And it is just job hopping from one to another. So I agree with Wes. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"20"}},{"id":41,"start":2351.07,"end":2442.03,"text":"it's a tough one. Because I don't want to make it seem like loyalty is not a good thing. Because loyal totally company is a good thing. But oftentimes you have to wonder, is this company loyal to you as a person as well, like sometimes you're working for a company for a long time, and you don't necessarily get that same sort of respect back? Maybe the company's not doing well. Maybe you're the first one to go. And you could say, well, I had this other job offer, you know, and I should have taken it. And some of that stuff is is hard to plan out that said every single time I've jumped from job to job, I've gotten my largest pay increases. And it is sometimes even applying for a job and getting a new job or being accepted into a job is a great way to get a pay bump at your current place. And I don't I don't want to say to weaponize that but I personally have had a situation where someone was trying to poach me into a new company, I did the interview process just because they promised to pay me a lot more. I did the whole interview process expecting my current company not to, you know, match or anything like that, because they already told me they couldn't afford to pay me anymore, right. So I did the whole interview process got accepted for the job. And it was a good, good, good pay increase. So I went back to my employer to give them my two weeks, and they basically flat out told me no, they were just like, doesn't matter. Whatever it is, we're covering it. We can't lose you at this point in time. We need you right now. And so I said, Okay, well, let me go back to this other company and turn them down. And I was not trying to play the companies off each other. There was no intention. hardball there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"39","ss":"11"}},{"id":42,"start":2442.03,"end":2442.65,"text":"Yeah.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"40","ss":"42"}},{"id":43,"start":2442.69,"end":2463.09,"text":"Yeah, I wasn't even trying to do that. Because it was a good pay increase at that point in time. And then this company is like, Okay, well, we're gonna give you this much more now. And I was like, uh, okay, so my other job already told me that they would give me a pay bump. So I was like, well, they're gonna give me this much more now. And I don't want to play this off you guys. But they're, you know, you're","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"42"}},{"id":44,"start":2463.23,"end":2465.19,"text":"a shrewd negotiator, right,","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"41","ss":"03"}},{"id":45,"start":2465.25,"end":2512.08,"text":"back and forth. And because of that, they were like, if you say, you'll stay right now, we'll give you that what they just said. And I was like, Yes, I'll stay there. And sometimes, like that could blow up in your face, I felt like if I was trying to play them off each other, then it probably wouldn't have ended well, but the idea here is that like, your current organization might not value or know your value until you're leaving, necessarily, they might not know what you got until it's gone, that sort of thing. So I have always gotten my biggest pay bumps from changing jobs. That said, I do respect loyalty. And I do all respect all that stuff. And I think if a company is treating you really well, you should treat them really well. But in the same regard, it's a high paying industry, if you got the skills to get those bills paid, and all that stuff like that you should take the money, and don't worry about it too much.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"41","ss":"05"}},{"id":46,"start":2512.23,"end":2567.13,"text":"Next question we have for Mark volkman. If I choose next jass. Does that mean I won't be able to use a new react feature like hooks and suspense until slash if next JS team implements it? And maybe we should swap out next is with Gatsby as well? Because this question applies to any sort of framework where react kind of comes along baked in with that? And the answer to that is yes, you have to wait until these frameworks support your updated version of react. But that said, there almost always is a I always am like, I want to use hooks, I want to use suspense. And anytime I've wanted to use these cutting edge features. There's always a canary version of next Jess available. There's Tim nucleons, who is one of the team members on next Jess is always pushing out tons of updates for this stuff. So the answer is yes. But you almost we'll never have to wait because the teams behind these things are excited to use these features as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"52"}},{"id":47,"start":2567.25,"end":2569.98,"text":"Yeah, also the stuffs in alpha still so yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"47"}},{"id":48,"start":2570.19,"end":2586.92,"text":"yes. That's funny. Like sometimes people are like really gung ho about these new things. But you have to wait until they they get like hooks and suspense are not in at the time recording this podcast. They're not in production. Yeah, they're not. They're not solidified just yet. So hold your horses just","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"50"}},{"id":49,"start":2588.13,"end":2598.51,"text":"chill. Yeah, chill. Okay. Next one is from Tyler and Schuster Schuster. It. There's no age, Nick could be Schuster could be","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"08"}},{"id":50,"start":2598.54,"end":2601.51,"text":"sudo. Su stir. Sure. Star sister.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"18"}},{"id":51,"start":2601.75,"end":2708.34,"text":"Okay, got this one. When do you use react dot fragment? And when would you use a div to wrap many return components from render? Okay, so for those of you don't know, at some point last year, I think 2017 2018 I don't remember at this point when react fragment was introduced. But react fragment basically allowed you to output things without a wrapping HTML element. Now for a long time, this was one of the weirdest pain points in react, people would go ahead and they'd have the one to return essentially several different things. And then react would freak out because you need to have those in an array instead of just returning them right. And there's good reasons for this technically, right there, why you need an array for each of those. But it was a giant pain point. Because of the way a lot of developers solved this. Instead of returning an array. They returned a div to wrap around their code, which turned react into sort of like, div hell just divs populating just sprinkled out throughout register a div wrap a div around it, right. That's the only way I'm going to get it to render. And so when react dot fragment was released, along with the shorthand for it, which is like an open bracket, close bracket is my favorite little shorthand. When react fragment was released, you could now use that react fragment or that shorthand to wrap your code and have it work instead of outputting it as array or wrapping it in a div and to me, this is one of the nicest little HTML improvements in react. So when would you use this? I would use it any time you need to not have your code be wrapped in a div, like the decision should not be based on a react sort of situation. For me the decision is a structural HTM Yo thing, right? Like, do you need a div wrapped around this thing if you do, then use a div. If you don't use react fragment, don't use it if you know,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"21"}},{"id":52,"start":2708.52,"end":2749.59,"text":"totally, the biggest use case for using react fragment is grid Flexbox sibling and feature selectors in CSS where the parent child of elements are, are required, like grid, you can't set your grid items to be items that are lower than the grid container, they have to be direct children of the the grid container. So that is extremely helpful when you have one container that is your grid and another component that produces the children the grid items. And previously, you would have to wrap a div around it and then you broke, you broke the grid layout. And now we can just use react dot fragment. I like to call them ghost elements because they render out to nothing at the end of the day.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"08"}},{"id":53,"start":2749.62,"end":2755.83,"text":"That's a way cooler name. That's Yeah, like I want to alias that to be the ghost emoji and then I tried it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"49"}},{"id":54,"start":2756.04,"end":2761.56,"text":"I tried it. It doesn't work. I have a tweet about it. It was hilarious. You could probably write a Babel plugin for it though.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"56"}},{"id":55,"start":2761.74,"end":2764.8,"text":"That sounds sick. I love the name, Ghost.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"01"}},{"id":56,"start":2765.22,"end":2767.71,"text":"Ghost. Ghost ghost fragments.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"05"}},{"id":57,"start":2768.1,"end":2781.84,"text":"That is dope. Uh, but yeah, no, again, I this is one of my my favorite features. Just because you know, one of those things. It's like, should the framework get in the way of writing the HTML you want to write? No, I don't think so. So react fragment for the win here. All right, let's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"08"}},{"id":58,"start":2781.84,"end":2893.86,"text":"jump into the section that is sick picks. This is where Scott and I are sick. Pick an item that is something that is sick in our lives. And we would like to tell you all about it. Alright, my sick pick today is a designer that goes under the handle ghostly pixels. So you know, I'm designing my own redesigning my website right now because it's much needed. And I'm going with a bit of a grungy textured feel, as I do with a lot of my courses has come as a surprise, surprise, surprise. It's funny because like I've sort of just embrace the whole punk grew up as a punk hardcore kid sort of thing. And I just I don't think I'll ever let the grunge Enos go especially now that we are on such a high DPI screens, the very subtle grunge just looks so good to me on these things. So I usually go to True Grit texture supply. They're sort of like the big the big dog in the space. And they have like Adobe procreate extensions, and whatnot, but they're pretty expensive. And they don't give you a transparent PNG. So you have to do that yourself with all that either. Select the black color and take it out yourself. So I found this other designer called ghostly pixels. And he's got all kinds of grunge textures, grit map, wood grain, and they're all like nine bucks. 10 bucks, I think I bought like the entire thing for like 60 bucks. And they just look so good in all of my designs. So big fan of that. Check it out. If you want to support another designer, this is one of those our design episode we talked about little tricks that you you can have and the adding a little bit of texture or a little bit of, I don't know, just finesse and in a day that we talked we talked earlier about these everything's going vector but in an age where everything is going vector, I feel like if you add a little bit of grit and grain as long as you're doing it at two x so it doesn't look pixelated thing. It adds a little something, something to your designs.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"21"}},{"id":59,"start":2894.16,"end":2897.1,"text":"Nice, gritty, gritty to your site.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"14"}},{"id":60,"start":2897.28,"end":2898.06,"text":"It's gritty.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"17"}},{"id":61,"start":2900.1,"end":2901.15,"text":"She's Google gritty.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"20"}},{"id":62,"start":2901.18,"end":2904.57,"text":"It's a efficient course planning software. No.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"21"}},{"id":63,"start":2905.68,"end":2908.92,"text":"It's the mascot of the Philadelphia Flyers. Oh,","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"48","ss":"25"}},{"id":64,"start":2910.39,"end":2914.05,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"48","ss":"30"}},{"id":65,"start":2914.05,"end":2986.38,"text":"So my sick pick is Undertale, which is video game. So I occasionally sick pic video games here. And this one is I have it for the Nintendo Switch you can find I think it's on most platforms at this point. This is a weird, weird game. I don't even know what to think about this game. It's made me feel things in weird ways. I don't know how to express it other than I don't want to spoil anything. It sort of has RPG elements here playing as a child. Again, I don't want to give away too much about this. But all I can say is that this game is like very heavy and unlike anything I've ever played before. And it like put me in some situations where you're making some choices, and a video game that maybe the game is choosing for you or you know, whatever. And it like really invokes some sort of odd emotion and stuff like that. It's a very bizarre situation. I would maybe watch a YouTube video on it or something. Don't watch anything that spoils anything. Because again, the part of the experience with this game is this that you're going in cold. So if you if you are interested in like sort of odd games that are going to sort of have a totally different experience than something you've ever had before, maybe RPG elements, stuff like that, check out Undertale I know it's probably old at this point, but it's really, really cool game.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"34"}},{"id":66,"start":2986.5,"end":2988.18,"text":"Awesome. What about shameless plugs,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"46"}},{"id":67,"start":2988.24,"end":3022.83,"text":"shameless plugs, levelup Pro. There's so many courses on level of pro that if you sign up for one year of level up pro right now you'll get like over 700 video tutorials by the end of your subscriptions. So that's like newish tutorials, I mean, in the past two years or whatever, and those are all premium tutorials. So level up tutorials.com forward slash pro setup for the year save 25%. If you are listening to this before January one, this is your last chance to get this price, the price is gonna be going up January one. So keep your eyes if you want to sign up for the year and lock into that price Lock and load lock into that thing. level of doors.com forward slash pro","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"48"}},{"id":68,"start":3022.92,"end":3058.77,"text":"awesome. I'm gonna shamelessly plug my YouTube channel. I haven't posted a video in a couple of weeks yet, but I have a new one coming up working with IBM, they sent me this little drone. And I'm going to learn how to fly it with JavaScript. So if you want to see that I'm not doing like a tutorial, but I'm kind of just like kind of like this is me I'm I'm showing the code that I write and I'm like pausing every couple of minutes explaining what I've been doing. And it's kind of interesting new take on on doing a YouTube video. So I'm excited to have that up. It will probably be up by the time you listen to this. So check it out. youtube.com forward slash Wes Bos","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"22"}},{"id":69,"start":3058.83,"end":3063.78,"text":"doe. Well, that's all I got. I hope you got some great information on this potluck. These are always so much fun.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"58"}},{"id":70,"start":3064.17,"end":3070.23,"text":"I always look forward to doing these. Awesome. Alright, thanks for tuning in. And we'll see you next week. Please","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"51","ss":"04"}},{"id":71,"start":3072.18,"end":3081.93,"text":"head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"51","ss":"12"}}],[{"id":1,"start":0.359,"end":26.34,"text":"Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Hale. Totally in ski. Oh, welcome","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":26.34,"end":62.15,"text":"to syntax in this Monday hasty treat, we're gonna be diving into another episode of where are they now? We had so much fun with the last one. We couldn't wait to start this one. So in this episode, we're gonna be talking all about libraries, JavaScript, CSS, and just sort of web platforms in general. And where are they now? things that were once hot in the past? And maybe they're still hot today? And or maybe they've cooled off a little bit. So my name is Scott Dylan skene. With me always is Wes Bos. In this episode, we are sponsored by sanity.ai. Oh,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"26"}},{"id":3,"start":62.49,"end":202.38,"text":"yes. So Sanity io is sponsored a bunch of episodes a couple months ago, and they are back for a whole lot more, they booked a good portion of next year already as well, because they are saying that a bunch of syntax listeners tried it. And lots of people are actually using it in their production projects a couple pretty I'm not sure how to say which companies are using it. Maybe I'll ask and talk about that later. But what is Sanity Sanity is it fits into the sort of like headless CMS space, or, as we like to say, on the podcast a boy life, which is bring your own front end. And it's basically something where you can pay for the service, you can log in. And you can create all of your different content types that you want to have, you can have relational content between the two. And then you have this whole sort of like they called the Sanity studio where you can log in, and you can be able to manage all of your content. Now, there's lots of places that do that. But the really cool thing that I like about Sanity is that you can write your own react components to manage the inputting of the data. That means, of course, you can you write your entire front end in Gatsby, or next or react or Angular or anything that can consume their API. But you can also create your own react components on their own back end, which will allow you to do custom inputs. Because Scott and I were talking about that earlier, where your data looks different to everybody, everyone's data inputs are different, they all have different needs. And if you just have your standard, like image, upload, text input description box that doesn't fit everyone's actual real world needs. So being able to kind of best of both worlds, because you could just use like an existing service that will do all of this for you. But if you need to allow your users to input this data in any special way, you can build your own. So check it out, if you want to build a project, maybe over the holidays, and you just need a back end to get you up and running check out Sanity, it's at sanity.io s a n i t y.io, you're going to get the free plan for zero dollars. It comes with two users two data sets and basic usage, you can go see what you get for that. So I'm one of those things where you need to put in a credit card, and then they'll charge you as soon as you go over. You don't need to put in a credit card to try this thing out. So check it out. Thanks so much to Sanity for sponsoring. Again. That's s a n i t y.io. forward slash syntax. Nice.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"02"}},{"id":4,"start":202.649,"end":252.12,"text":"Cool. So let's get into it. You remember in the last episode, all we did is talk a little bit about what these libraries are, what they did for us when they were used, maybe who authored them, and then talk about if they're still used today. And if not maybe what happened to them. So the first one that we're going to get started off in this episode, we're going to be talking about a couple of mobile frameworks. And now these mobile frameworks were sort of around the time when you people might have a separate mobile app that was like a bigger thing than responsive was, or maybe the iPhone apps all sort of looked one particular way with those gradients or whatever. And you just wanted your web app to feel like a just a native mobile app, even though it wasn't. And so some of these like specifically jQuery UI, if I still see an app with jQuery UI, I'm like, oh, boy, it's cuz Yeah, it's been a little while.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"22"}},{"id":5,"start":252.12,"end":330.96,"text":"The thing about the jQuery UI or jQuery Mobile was Oh, yes, actually. We can talk about jQuery UI as well. There was other ones like Sencha touch, I think the need for these things came out because a lot wasn't possible in the browser. When these things came out. This simple having a div that scrolled was just not possible at the time, like overflow scroll did not work position fixed. So you want to have like a bar while you scroll in the content goes over it. That didn't work in the olden days. Now all of those things are fixed. You can start to build your own UI frameworks. Performance is not so much of an issue as it used to be on these things. So I think these like purpose built mobile frameworks are not as as popular anymore because of that. I also think that we're really detaching functionality and what they look like so it To carry mobile jQuery UI, you could use them without the CSS library that it came with. But most people, what they would do is they would just use the the look and feel of it, as well as the touch events and all that stuff that came along with these these frameworks as well. And as design tastes started to change, I can always tell when I'm on a website that uses jQuery UI or jQuery Mobile, just because it just feels that certain way, and no one's stopping you from changing that. But it's just one of those things that you run into.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"12"}},{"id":6,"start":330.99,"end":434.16,"text":"Yeah, I mean, the whole design pattern was like, based off of like that iPhone, like the original iPhone. So they all had that very, like specific look to them. Yeah, so these things, again, I think part of the death of a lot of these mobile frameworks, again, came from just not needing it anymore. I mean, responsive design took off. And that was more of a bigger thing. People didn't have just responsive, like the dedicated mobile apps as much. And the design styles, people wanted to have it look more like their thing, or their app, or whatever, or fit into different design styles. So they just stopped being used. So I think the next one is going to be a fun one. And this is flash, which we all know is a popular, I don't even know what you would call it as a popular alternative to Java Runtime when we're on a time Yeah. Which allows you to do some really amazing things. For the time I you know, some of my introduction into web development personally was through flash development, because at the time, the way you did animations on the web, you had even things like a timeline and ability to have some sort of JavaScript like syntax, which was called ActionScript, which is based on ACMA script. So there was a lot of things that were sort of interesting about flash, there were some really gaudy, you know, futuristic tech, no bump in websites made from it. But there was a lot of like, really interesting web technologies like coupons or things that we used in our normal, or even just playing video in our normal web development world. That wasn't some flashy thing that used flash. And when the iPhone came out and announced, it wouldn't be using Flash. I think a lot of the web rolled was like, how do you even use the web without flash? I mean, that's how big flash was. How do you even use the web without flash,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"30"}},{"id":7,"start":434.22,"end":451.05,"text":"I remember seeing people with like, Android tablets being like, iPhone sucks, it doesn't even run flash. And I remember being so frustrated, trying to like view a restaurants menu on my edge, first iPhone, and it didn't work. There was no flash on the iPhone, very frustrating.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"14"}},{"id":8,"start":451.08,"end":456.6,"text":"My Motorola Droid, I had the original Motorola Droid, I loved that it did flash because I could do have that","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"31"}},{"id":9,"start":456.6,"end":551.34,"text":"one as well I do is I could do all that stuff. And it was fine. It just ran. The reason why they didn't is because splashers proprietary is owned by Adobe. And Apple didn't like that it was a battery killer, because it had to run this entire environment to actually run flash and battery was a huge thing on your phone that that the battery was garbage already with the first iPhone. And then at the same time, we had html5 which sort of ushered in the replacement for the need of a lot of these things. So we had web fonts, we had a video tag the audio tag, because before html5 video, there was no way to embed a video without using either flash or like an embedded mo v file on a Mac only, only audio webcam access saving files to the system. All of these things are now available when html5 came around. So that sort of killed it as well. I was very happy when that thing got lost. And I know that a lot of like the good flash developers were just like, Huh, no big deal. And they just moved over to Canvas and, and JavaScript and started just building amazing stuff. So I don't think that we really lost a whole lot there. Yeah, in terms of the web, yeah, well, we also had was Microsoft Silverlight that was sort of a flash competitor that came along as well. And the only reason I think people remember Silverlight is because Netflix uses Microsoft Silverlight for the longest time. And it was so frustrating because I remember so many like I remember so many days when I was just married and we would make nachos with my wife and sit down on the couch and want to watch a movie and it was like you need to update Silverlight or","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"36"}},{"id":10,"start":553.02,"end":555.96,"text":"whatever, sir like today.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"13"}},{"id":11,"start":556.02,"end":594,"text":"Yeah. Oh, come on. I have to update Silverlight. And the reason why Netflix was such a holdout for that is because there was no DRM on the web. And that was a spicy topic for a long time. Should we allow DRM which is digital rights management the ability to just like before that you could just right click save a movie or a video tag and save the source for that. But it was a huge thing. Firefox did not want DRM on the web as as a consumer I just wanted html5 video. Yeah, on Netflix without Silverlight and but can you imagine why people need DRM? Netflix without DRM","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"16"}},{"id":12,"start":594,"end":595.44,"text":"like? Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"54"}},{"id":13,"start":595.44,"end":597.87,"text":"can you imagine just like Click Save?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"55"}},{"id":14,"start":598.14,"end":603.21,"text":"Yeah, that would have sunk Netflix. Because it would have sunk them I really or at least the the streaming portion, I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"58"}},{"id":15,"start":603.21,"end":624.24,"text":"think the big thing was I don't think Netflix probably cared that much but it was the studio the relationships with the studio, they would not be able to have a video they would not be able to get what's my favorite Adam Sandler movie? Happy Gilmore. If, unless they had DRM in it. So that was the the final dagger in Silverlight that we did that one to do.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"03"}},{"id":16,"start":624.96,"end":627.77,"text":"My favorite my favorite Adam Sandler movie is the Wedding Singer.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"24"}},{"id":17,"start":629.25,"end":630.06,"text":"That's a good one. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"29"}},{"id":18,"start":630.06,"end":636.12,"text":"Courtney and I were just watching and we're like, I feel like this is objectively the best Adam Sandler movie, but that could just be me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"30"}},{"id":19,"start":636.12,"end":637.17,"text":"That's great.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"36"}},{"id":20,"start":637.17,"end":639.02,"text":"Where are they now Adam Sandler movie?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"37"}},{"id":21,"start":639.65,"end":646.62,"text":"Where are they now? Tweet us at syntax FM with your favorite Adam Sandler movie and why make sure you explain why please don't let it be jack and jill. If","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"39"}},{"id":22,"start":646.62,"end":720.03,"text":"If you say jack and jill, I'm just not even going to delete the tweet. Next up we have this is actually going to be for anyone who at any point worked in designing web applications or websites back in the day, when grid systems took off, these things really took off and their grid systems in all sorts of shapes and sizes. I think one of the most popular ones probably ended up being in bootstrap itself. But the grid system goes deeper than just a grid system with classes or something like that the grid system is for a long time was a whole way of designing websites, you had your Photoshop templates, with the margin setup all you know your red lines, whenever you open the document, you had your overlays, and you had your systems in code to make this easier whether or not these were CSS based frameworks or whatever. And I think one of the the first big popular ones was the 960. Gs. Yeah, which is the 960 grid system that dates it right there. Because it's back when computer monitors that 960 was the maximum width that you would go, I remember when we went wider than 960 for the first time as our like design width. Because I was like, yeah, whoa, no, not all computer monitors are that narrow anymore.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"46"}},{"id":23,"start":720.09,"end":754.71,"text":"This is so old that it was before responsive design. And it was just like you have to remember everyone was like we need to make sure our website fits on. What was it like a like a 15 inch monitor or something? I remember I remember people being dismissive of people who had 15 inch monitors and being like, whatever I'm going 11 4011 for those people that have 15 inch monitors, you know, yeah. And there, there was no no way at the time to change your grid system at the time. But yeah, here's the the big question is did you go 12 column? Or did you go 24 column,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"00"}},{"id":24,"start":754.98,"end":792.42,"text":"I never made those decisions. It was always the designer on the projects for our agency that was making those decisions. And we would just sort of do whatever they gave us. I believe most of the time we went 12th. That's what I remember working with mostly, there were like some systems in Drupal I had set up via the Omega theme that's dating a little bit, the the Omega theme in Drupal, that it was all just like you could set up your grid system, we had just like a default one that that went in there and and worked fine. I remember like the very first bit of CSS code that I would write would be like with 960, margin zero auto on the container div, wrapper code","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"34"}},{"id":25,"start":792.42,"end":807.96,"text":"that you write. Yeah, man, that's a bit of a throwback, using the 960. That's like, I remember that's the first one I kind of got into the whole web development that was built by Nathan Smith, who was still pretty active in in the web development community now. So that's pretty fun. Looking back at that, yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"12"}},{"id":26,"start":807.99,"end":815.04,"text":"there was also a couple of others, which you had like the golden grid system. Yeah, golden grid system. I never used the golden grid myself,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"27"}},{"id":27,"start":815.07,"end":828.09,"text":"I think it was more of like a design and thought I always use the 960 gs in code. But the golden grid system was pretty popular as well. There was Suzy, which I think was like a SAS base grid makers, he","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"35"}},{"id":28,"start":828.09,"end":875.04,"text":"was paid like paradigm shifting, in my opinion in grid systems, especially SAS based grid systems. So you had the compass based grid system and things like that. You could do like an overlay. But the cool thing about Susie's grid system was that instead of being bound to classes, like small with the near columns is going to take out 12 columns or something like that, instead of being bound to classes, you get to use mix ins to define your grid system. So you write your own CSS, how it's normally been written, you have this main section, and then the main selector, okay, this gets a grid with, you know, 12 out of 12. And so to me, Susie was really the first framework that took that idea and made it to be something that was like, just totally different. The way you define your grids.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"48"}},{"id":29,"start":875.07,"end":938.43,"text":"Yeah, it's a pretty popular and the other obviously, the big two, which I think are still pretty widely used is the bootstrap and the foundation have grid frameworks. I personally don't use a grid framework for any of my projects. No, I do use foundation on my own course site right now just for a quick and up and running, but I never feel the need that I actually need a grid system and I find that it often would just get in the way of trying to figure out how to make it and I'm just on the The Susy website right now. And I think they explain best why you don't necessarily need a grid system anymore. It says, With the advent of Flexbox and CSS Grid, there are fewer reasons to use a grid library like Suzy. And that's wonderful grid libraries, were always a temporary fix waiting for the browser to take over. Still, not everyone can play with the latest specs and will always be edge cases that require manual grid math. I think that's perfect. Because people always ask me like, what grid framework do you use? And my answer that is I just use grid or I just use Flexbox. And you don't need a framework that uses it. Because it's so simple. It's so flexible, that you don't need something that's built on top of it to make it easy for you.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"35"}},{"id":30,"start":938.46,"end":964.17,"text":"Yeah, so grid systems will probably always be around in design. But in development, who knows? Shout us out if you use a grid system still, which grid system do you use currently? Because I don't think either of us are up on whatever is latest in the grid world other than CSS Grid. So I'm interested to know what what grid systems people are using if they're still using them in development. Next up, we have a fun one, which I know I use this. I don't know if you did but a coffee script.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"38"}},{"id":31,"start":964.23,"end":966.03,"text":"Yes. Huge coffee script user.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"04"}},{"id":32,"start":966.05,"end":967.02,"text":"Yeah. Likewise,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"06"}},{"id":33,"start":967.02,"end":977.67,"text":"my codebase still right now runs on like 2% coffees a night I there's a pull request into remove that entirely. But the code that's running today still is powered by CoffeeScript. Nice. Yeah. CoffeeScript","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"07"}},{"id":34,"start":977.67,"end":1013.58,"text":"is basically Ruby flavored JavaScript. It was a lot of the things that came out of the whole, like the Ruby explosion, right? The whole Ruby explosion of Ruby on Rails, you had sass, which was based in Ruby, or compass, which was based in Ruby, you add Hamel, I think was Ruby based as well. And because of that, I think people were liking Ruby a lot. And then Ruby still great. But the sort of JavaScript flavor of Ruby, or the I should say the Ruby flavor of JavaScript was TypeScript. So I borrowed a lot of things for Ruby, and things that you actually see in JavaScript now like arrow functions and things like that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"17"}},{"id":35,"start":1013.76,"end":1047.72,"text":"Yeah, it was huge variable interpolation. Oh, yeah, keep checking. That's still something we don't have in like, if you have an object, you want to check six or seven levels deep. We are getting that hopefully in JavaScript, but we don't have it just yet. classes, all of the amazing things that CoffeeScript had, we either now have an ESX they're coming to the language, or we have something like that, like TypeScript. So CoffeeScript was amazing for for pushing the web forward, I think it's very similar to Compass we talked about last episode is that we just don't need it anymore. And we should celebrate that because that means that the language has has moved forward.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"53"}},{"id":36,"start":1047.75,"end":1075.47,"text":"Yeah, I always picked up CoffeeScript. And at least initially, because it looked so much simpler to me. There was like less of this syntax garbage. And you know, I had been working a lot in Ruby and Python myself. So I was like, Okay, well, I don't have to use some of the stuff I had to use before. And it just made my code look a little bit cleaner. And I really, I really enjoyed using CoffeeScript. For the time they did it was another tutorial series I did early on and level up tutorials was on CoffeeScript. And another one that like helped propel level up tutorials. It","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"27"}},{"id":37,"start":1075.47,"end":1079.16,"text":"was also before like prettier, or like minifier, like","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"55"}},{"id":38,"start":1079.97,"end":1081.02,"text":"along grittier. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"59"}},{"id":39,"start":1081.17,"end":1117.82,"text":"yeah, so that was huge. Because I felt like I like I was terrible with my code. So sloppy with writing JavaScript, and CoffeeScript was indentation based. So you had to make it look nice. Otherwise, it would break that was really nice. It forced me to actually write nice looking code. Nice. Next one we have here from the same author of CoffeeScript is underscore j. s, the story with underscore is pretty simple. underscore was a hard dependency of backbone. js. So you couldn't use backbone unless you used underscore. And what happened is john, David Dalton came along and wrote lodash that's why it's called lodash. Cuz it's underscore.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"01"}},{"id":40,"start":1117.85,"end":1118.7,"text":"That's a lodash.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"18","ss":"37"}},{"id":41,"start":1119.03,"end":1124.52,"text":"Yeah, it's a lodash. Yeah. I hope everybody knows that. If you're doing this, if you just just found that out. That","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"39"}},{"id":42,"start":1124.52,"end":1138.61,"text":"seems like that would just like cruise cruise over a little bit for a lot of people. Like, I feel like it was a decent amount of time before I realized the whole load. Like, if it wasn't, it wasn't a moment of enlightenment, it might have still been cruising over my head today.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"44"}},{"id":43,"start":1139.009,"end":1178.79,"text":"Yeah. So lodash was initially just a drop in replacement that was focused on performance. And he basically could just take it, it had the exact same API as underscore and but it had a little bit more focus on performance, because john David Dalton was the guy who made .js perf. It's a JavaScript perf testing tool. And he's just a wizard at building things and optimizing. So it was just a nice one. Obviously, lodash has has grown huge since then, it has a lot more. It's really popularized functional programming. It's pretty, pretty neat in what it's done. And it's sort of again, underscore is one of those things that just push the envelope and now we have because of that, we now we have even better things.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"59"}},{"id":44,"start":1178.81,"end":1239.78,"text":"Yeah, yeah. lodash was funny, because for me, it was one of those libraries that like by the time I understood why I needed it, or even did actually need it. Yeah. lodash was like already here. So so like, by the time I was just picking up underscoring being like, Oh, I get it, like, I get why I would use this. Then my coworker would be like, dude, you should be Using underscore, or I mean lodash instead. Cool. So next up, we have a fun one. And this is gonna be a fun one. Because I never used this personally, it's fun for me because I never used it. And I knew it wasn't going to stick around. So I can have a little gloating here. But this one is less, which was the CSS preprocessor that existed right around a little bit after sass started to get popular. And it largely became popular because it was bundled in with bootstrap. And because it was easy to get started with, you could just drop in a script that actually allowed you to use less and not have to compile it ahead of time. So yeah, there was like a browser","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"38"}},{"id":45,"start":1239.78,"end":1246.44,"text":"side compiler. Yeah. And since the development, but he still abused it. And","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"39"}},{"id":46,"start":1247.52,"end":1265.84,"text":"yeah, people shipped with it. I think the compilation or the pre processing of sass, scared people away from SAS, and then they went to less, and then they use less. And they're like, yeah, I'll just stick with this thing. That's not as good as SAS or any of the other offerings out there. It's my controversial opinion on unless,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"47"}},{"id":47,"start":1265.88,"end":1266.39,"text":"yeah,","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"21","ss":"05"}},{"id":48,"start":1266.45,"end":1351.5,"text":"you know what, Wes Bos calm right now still runs on less. And that should that should tell you how old My website is. I'm actually working on a redesign right now. But the reason why I picked less was because it's built on WordPress. And I didn't want like a build pipeline for my own website. So what I did is I found a PHP les library that compiled my les on the fly. And then it wrote a little bit of logic in the head of my WordPress file that just compiled it. If I was logged in. And as admin and a couple other if I had a couple settings turned on it, which is recompile it on the fly, which is pretty cool, because then you could just throw up your last file. And if you're logged in, it would just kind of recompile either in development or production. Probably not a great idea. But it's still it's still trucking, like, like eight years later, or something like that. It worked pretty well. Still trucking. We talked about this on the podcast before, but less also was feature less, it didn't have as many features as SAS caught up is, it was a feature phone, let's face it, it was it's now caught up to SAS and has all the same features. But it's all about timing with these types of things. And as well as like I always know like, there's always like these like, it's like Laravel developers always use view. Yeah, I think that in that whole area, it's they're always using less as well. There's certain like pockets of different developers that are like just crazy about using less, because that's what it is sass was","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"06"}},{"id":49,"start":1351.5,"end":1396.86,"text":"so heavily used in Drupal land. And I the first time I heard about sass was actually at a Drupal meetup and in, he was like the Southeast Michigan, Drupal meetup or something. But the first time I'd ever heard about sass was through a talk on SAS and Hamill, in Drupal. And there were a lot of the most popular themes in Drupal that had a whole SAS build process built into them. So it was really easy to have a theme, like a starter theme that had the whole build process already set up for you without you having to do anything. And so for me, it was really easy to pick up sass and stick with it, and then look over at the less crowd and being like, why would you use this because it has less features, and it is less good. But yeah, that's the joke that keeps on giving. It's not even funny, though. But yeah, so","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"31"}},{"id":50,"start":1396.86,"end":1397.46,"text":"I mean, I","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"23","ss":"16"}},{"id":51,"start":1397.46,"end":1425.42,"text":"appreciate sass, or I mean, I appreciate last. What I appreciate most about less, though, was the fact that I think it was needed to get CSS writers over to the preprocessor side, totally, because it was so easy to get up and running with it allowed them to see the benefits of it without getting stuck in any sort of tooling process that might make them be like, you know, this isn't worth it. So I appreciate what less than that regard, I think it did largely explode the popularity of CSS preprocessors. Overall,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"17"}},{"id":52,"start":1425.54,"end":1469.13,"text":"I think that can be said for almost all of these tools as they were largely a stepping stone in changing how we build apps. Like if you think about Gulp, they totally changed the fact that like if we didn't have Gulp, yes, what was it six to five, which was what Babel was called? Yeah, I don't think people would have picked up this new JavaScript syntax until years later. But because people were already writing sass, and they go, Oh, I can just pop a quick little Gulp task in there. And we can start using these new JavaScript features immediately. You might as well so it was kind of neat that we can you have all of these amazing things that were part of the our web development journey, and most of them change the way we think we're easy enough to get started and pave the way for some of the new things. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"45"}},{"id":53,"start":1469.13,"end":1502.19,"text":"and I hope if you've never heard of some of these things, or if you never use them, at least, that you now have some of the more context to where we are today. Right? Because a lot of these things like you did, they just built up to everything where we're at. And now here we are today. And hopefully some of these things as this episode does is give you that context if you don't have it, because context is important in a lot of this stuff. You don't have to go ahead and learn less or flash or whatever. But it is important to know like why it was here or why it was popular once and why it's no longer popular. so that you can know not repeat history for whatever reasons.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"29"}},{"id":54,"start":1502.52,"end":1520.34,"text":"All right, I think that's enough for today. That's hasty enough. We've got I tweeted out like, what are the tech that was so hot years ago, and we've still got probably at least another shows worth. So if you enjoy this, let us know. And we'll record another one. Yeah. And if there's another thing he thought we didn't cover it was someone just tweeted, cappuccino.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"02"}},{"id":55,"start":1520.49,"end":1533.75,"text":"Yeah, that yes, cappuccino. Wait, yeah. Don't use this as an opportunity to dump on something that is actually still being used, like people. People will be like, what's the hot tech that whatever? And they'll be like Angular like, no. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"20"}},{"id":56,"start":1533.75,"end":1537.17,"text":"when somebody said Angular, it's got like, 400 likes on it? Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"33"}},{"id":57,"start":1537.17,"end":1538.82,"text":"It's like, okay, we","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"37"}},{"id":58,"start":1538.82,"end":1539.6,"text":"get it. We","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"25","ss":"38"}},{"id":59,"start":1539.6,"end":1541.19,"text":"get the joke. Like,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"39"}},{"id":60,"start":1541.22,"end":1548.15,"text":"yeah, people are saying things like someone said, lodash. Somebody? Yeah, I was like, I use lodash. Like three seconds ago. Yeah. What did they say?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"41"}},{"id":61,"start":1548.57,"end":1551.54,"text":"Is lodash what just general JavaScript map. And one","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"48"}},{"id":62,"start":1552.17,"end":1573.08,"text":"thing, people don't have the use cases for lodash. So they think because they can write a MapReduce filter. And we've talked about this, like till we're blue in the face on the podcast, but like, you still need lodash for many use cases that are a little bit more advanced as well as, like events throttling, whatnot. Yeah, that's it for today. Thanks for tuning in. And we'll see you next one. Yeah, we'll","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"52"}},{"id":63,"start":1573.08,"end":1586.88,"text":"catch you later. Please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"13"}}],[{"id":1,"start":1.319,"end":4.59,"text":"You're listening to syntax, the podcast with the tastiest web","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":4.59,"end":9,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"04"}},{"id":3,"start":9,"end":10.53,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"09"}},{"id":4,"start":10.649000000000001,"end":67.29,"text":"everybody, welcome to syntax. Today, we're gonna be talking all about CSS layout, we got this awesome question come through our potluck button. And if you don't know, our Pollak button is where you submit questions to the show. And generally, we answer them on a potluck. However, this question came by john Lynch, who's from west of Ireland, which is kind of fun. And he said, Dear Wesson, Scott, you would make me and I'm sure many other novice front end developers very happy if you could do an episode of syntax FM, and maybe a tutorial on the topic of CSS positioning and sizing. And then he goes into break down this incredibly in depth, CSS layout. So basically, we're just taking this layout that he's given us. And we're going to go through it and talk through some of how CSS works, because it's often an overlooked thing. I even do this myself where I don't have a CSS course out. And I would love to if people ask me all the time, like, when is the CSS course coming out? Because it's such a CSS is hard, don't you think? Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":5,"start":67.649,"end":86.61,"text":"Yeah, the biggest indicator that CSS is hard is just how many people have problems with it or hate it or whatever, or you know, that that classic CSS is awesome. Where the text is going out of the box? I mean, I think that mug right, there is a is an indication of just how hard CSS can be sometimes","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"07"}},{"id":6,"start":86.699,"end":100.92,"text":"I so I've got on my laptop, I met somebody at a conference. I'm totally forgetting who this is. Sorry, if you're listening, but he printed new CSS is awesome ones where the box is properly fits around. And he's like, I fixed it. And I like that, because I actually","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"26"}},{"id":7,"start":100.92,"end":102.45,"text":"yeah, I'm gonna get one of those.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"40"}},{"id":8,"start":102.539,"end":120.42,"text":"Yeah, it's awesome. Because like, if if you do know how to use CSS, you're not going to run into those issues. And, and that joke in that mug that everyone's talking about is a bit of a thing of the past, I think because like, obviously, these aren't issues anymore. It's just that you're having trouble writing it, and you need to probably learn it a little bit better.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"42"}},{"id":9,"start":120.449,"end":147.81,"text":"Yeah, so I've never been in the camp of, of CSS sucks. I've always been in like, yeah, like the CSS fan camp. And like, I never understood why other people had a problem with it. And maybe this because that's where my foundation was right. My Foundation, I didn't come from a computer science background, I came from a design background, and I wanted to, you know, be able to create these things. So I mean, my whole learning and understanding of web dev primarily resolved around learning CSS to start.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"00"}},{"id":10,"start":147.869,"end":189.96,"text":"Well, speaking of CSS, we have two awesome sponsors today, here. First one is Manning books, they've got a whole bunch of deals, 40% off all of their books and video courses. Today, we're gonna highlight one called CSS in depth in motion. So it's in depth and motion, I think in motion just means that it's a video and not actual book from Chris ward. So you want to check that one out. If you're looking to learn a little bit more about CSS. We'll talk about that partway through the show. Our other sponsor today is century century is going to do all of your error and exception tracking on your client side on your server side. We'll talk about them a little bit more throughout the show as well. So how you doing Scott? Hey, doing good. Just take it out?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"27"}},{"id":11,"start":189.96,"end":199.05,"text":"I don't know. I'm getting work done recording tutorials. Doing what I do working on the site. Devin, live in the dev life. Yeah, it's all good. How about you How you doing?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"09"}},{"id":12,"start":199.079,"end":221.94,"text":"Good. I'm just looking at what my next last couple days I am off for the year in this what today is what today is December 13. It's Thursday. And I'm looking at doing another three and a half more days of work. And then I'm done for for the holiday. So I'm looking forward to that. We've got some fun stuff playing with the kids. And we're always trying to maximize that that time around Christmas.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"19"}},{"id":13,"start":221.969,"end":233.28,"text":"Yeah, I was trying to look at the calendar here to see if our audience would be listening to this in the year. Oh, yeah. And maybe you are but the the release of this episode will not be 2019. Unfortunately, the next one will be happy","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"41"}},{"id":14,"start":233.28,"end":235.5,"text":"new year, if you are listening to this in the future.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"53"}},{"id":15,"start":235.529,"end":236.729,"text":"Yeah. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"55"}},{"id":16,"start":237.99,"end":314.01,"text":"All right. So let's dive into it. css layout, we're just gonna go through a whole bunch of different topics related to CSS layout, positioning, display heights, widths, units, you get the point. And we'll probably get through this whole thing. If not, we'll cut into a second show as well. So first one is when do you use the position fixed static, absolute relative and sticky. So when you have an element in CSS, you position it, and by default, it's going to be a position of static. So this is something you're not going to probably apply to any elements, unless you're trying to overwrite something that has previously been positioned. Otherwise, that's static, that's the way it works, the content inside of that element will take up as much space as it needs. And when we say that, we mean that when you put elements on the page, and you put content inside of those elements, the size of that element is determined first, by the whether it's blocked or in line, we'll talk about that. And generally, they're blocked and they go 100% across the viewport, or if it's going tainer and then the height of it is determined based on the actual content that lives inside of it. So that's that's position static. Yep. It's not all that exciting. But we've got other ones, you want to take a shot at explaining some of these other ones. Yeah, let's do a little back and forth here.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"57"}},{"id":17,"start":314.01,"end":347.1,"text":"So the next one on the list, I think of maybe your most used would be positioned relative isn't relative has a couple of uses. But ultimately, what it does is it basically just makes the element positioned relative to its normal position. And one thing that people I don't think knew that you could even do with position element is give or position relative item is to give it a top value, and it would actually bumped it down. So you could do something where you maybe you give your your button, a position relative, and then you give it when you push it, you know, a top of one, and it looks like you're pushing it down a little bit. They","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"14"}},{"id":18,"start":347.1,"end":349.38,"text":"used to be that Yeah, I love that. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"47"}},{"id":19,"start":349.38,"end":350.01,"text":"me too.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"05","ss":"49"}},{"id":20,"start":350.31,"end":378,"text":"But now a lot of that stuff that you would normally have used for that now you could just do a CSS transforms anyways. So I'm not typically using the relative to move things around too much anymore, other than, you know, the way it is. But the primary reason why you're using position relative nowadays, is really just as a container for a position absolute item. Because when you position tonight, um, absolutely, it does. So with the container in mind. So do you want to talk about position absolute?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"50"}},{"id":21,"start":378.03,"end":413.58,"text":"Yeah. So when you're thinking about positioning elements on the page, I always like to tell people picture a bunch of elements that are standing in line at the grocery store. And by default, all of these elements are positioned static, and they just take up as much room as they need. So you might have a little element, you might have a really big and wide element, you might have a very tall element, and however much space that they need, they take up that much space in line now. And when you position something relative like Scott says, you have the ability to start skirting around with Trouble, trouble stance or top right bottom left, I've","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"18"}},{"id":22,"start":413.58,"end":414.9,"text":"never heard that trouble.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"53"}},{"id":23,"start":414.99,"end":422.25,"text":"No. Oh, man, you're gonna get in trouble in this podcast, because I use it a lot. It's the only way I can remember how the shorthand works.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"54"}},{"id":24,"start":422.25,"end":424.5,"text":"I just think about it as clockwise.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"07","ss":"02"}},{"id":25,"start":424.92,"end":430.95,"text":"No, that's wrong, clockwise or like, never eat shredded wheat, that's wrong, it's trouble. It is.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"04"}},{"id":26,"start":432.27,"end":434.7,"text":"So much easier. It's universal.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"07","ss":"12"}},{"id":27,"start":434.73,"end":492.27,"text":"When you apply trouble to it, you can skirt it around it, but it will still maintain its spot in line. So I always talked to people. When I was teaching CSS and ad hacker you in Toronto, I would always be like, Okay, this person is still in line. Maybe they leave the cart there or they put their foot they leave, they leave their shoe. Yeah, but they're running in grabbing like a chocolate bar from from the thing over there are they Oh, I forgot to get sour cream. Let me go run and get it you still maintain your your list. However, when you position something absolutely position absolute, it gives up its seat in line. So it sort of lifts itself up like a ghost. And all the other elements no longer think okay, you no longer get space in line. Because you've positioned yourself absolutely, you no longer take up space on the page. And any other absolute or any other relative or static items that come after that element. Simply just move up, oh, that guy left,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"14"}},{"id":28,"start":492.3,"end":493.8,"text":"it just turned into a ghost,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"12"}},{"id":29,"start":493.86,"end":494.64,"text":"it just turned into","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"13"}},{"id":30,"start":496.26,"end":499.89,"text":"just the assume everything's normal and make money online","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"16"}},{"id":31,"start":500.04,"end":560.299,"text":"to an absolute element, you can still give things a trouble value. So those tr bl the top right bottom left values are going to be relative to the parent container that is relative absolute fixed. We'll talk about this a little bit more as well. How do you see something based on its parent. So that's what absolute is, you can use absolute to overlap things as well. So if you if you need things to obviously overlap each other, you can position absolute them, I would go as far to say in most cases, you probably don't want absolute and this is coming from if you're a beginner learning CSS, but what I see all the time is people say I want this thing to go here. So I'm just going to position absolute it and then give it the values that I want. And that's not great, because because of the reason why it loses its space in line. And then designing the rest of your page becomes really hard because you've got this element that doesn't push things up or down depending on how much content is inside of it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"20"}},{"id":32,"start":560.37,"end":653.779,"text":"Yeah, and that's why frequently you just see a container that's relative and then an absolute thing and then maybe the container has a some you know height and width or whatever. Next up we have positioned fixed, which is a lot very similar to position absolute, I think new people can occasionally get a little twisted up with when to use absolute and when to use fixed fix his position relative to the viewport, you'll see position fixed use primarily and things like pop ups modals maybe like an alert like a toast message or something like that. You'll often see it even like those like full page ad thing, takeovers that are like sign up for my mailing list like that's position fixed, right? So position fixed is again, it's positioning something relative to the viewport so when you are giving it its top, left or top right, sorry, trouble is when you're giving it its trouble coordinates, you're doing so so the if you give it a top of zero and a left of zero, it's going to be in the very top left of the viewport. No container is going to prevent this from being stuck inside of this thing. It's always going to be towards the viewport. And fixed I think fixed is probably getting used less and less. Right I like I like go out of my way to avoid using fixed. There's some like weird bugs in Safari with position fixed specifically with like text inputs and stuff. And so I've just, for the most part, I find a way to use absolute for things especially like now that you can do things like portals in react or whatever very easily to take something and put it at the very bottom of your document like modal, then you can position an absolute and that absolute visit to the actual viewport rather than something position fixed.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"20"}},{"id":33,"start":653.82,"end":702.12,"text":"Yeah, fixed has always been an issue in in Safari. Like for many years, we didn't have fixed that all in Safari just because of the way it worked. And now it's still a pain. Same with viewport heights are a pain in iOS, because of the way that scrolling works. with iOS, when you load the page, it looks fine. But when you scroll, Safari will take the bottom the bottom bar and move it out of the way. So you get more height on the webpage. And that causes this weird like gap where if you are using 100 Vh of viewport height, or if you're using position fixed and doing bottom zero, it doesn't actually stick to the bottom because the viewport is not as big as that. It's such a such a confusing thing. I have a problem with it right now on my own checkout on safari, which I'm trying to deal with. It's it's kind of frustrating.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"53"}},{"id":34,"start":702.149,"end":732.899,"text":"Yeah. And that's one of the reasons why like, I mean, we'll get into viewport units a little bit more in a little bit. Yeah, but like, that's one of the reasons why I almost never use the H if I want like something to be exact to the viewport height. Like I'm always always using it for like things that are like sort of close to 100. Okay, I just want to make this, I want to make sure this, this, you know, main element on the page is never less than, you know, 80% of the viewport height, you do min height, the VH or whatever. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"42"}},{"id":35,"start":732.929,"end":741.179,"text":"that's what I use it for almost all time. Yes, let's save those treats. Because there's a lot of viewport heights or people might not even know what we're talking about. They're pretty, pretty handy.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"12"}},{"id":36,"start":741.21,"end":748.86,"text":"Yeah, I have a note at the viewport height thing. It's this is can we just talked about how dope viewport heights are because I use it for everything.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"21"}},{"id":37,"start":749.159,"end":836.01,"text":"The last position we have, and this is relatively new, it's called position sticky. We've talked about it on the on the podcast before, if you go to syntax FM right now and just scroll the player past where it is it turns into position sticky. And the way that position sticky works is it's positioned relative it just goes where it should be, until that thing is scrolled outside of its container. So the example we have is our the player for the podcast is I don't know about two 300 pixels down from the top. And as soon as you scroll past that it sticks to the top. And the reason is because if you position something sticky, and give it a top right bottom left value, when it is supposed to be scrolled out of the container, it will then start to respect those top right bottom left. So it kind of goes from position relative to position fixed, with the caveat of it not doing that weird thing where we used to do this thing where as soon as it scrolled out of view, you would position absolute it but then by position absolute thing it you would change the flow of the document because by position offloading it, it gives it it gives up it's spot in line and then all the content would would jump up really quickly. So position sticky just takes care of that where the elements still takes up its space in the DOM flow, but it doesn't, but it will stick to the top of the page or the top of the scrolling container if you need it. I think that's a pretty neat one because considering how hard that was","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"29"}},{"id":38,"start":836.189,"end":859.26,"text":"just playing JavaScript how much she used position sticky because let's look at the Can I use for position sticky because I feel like it's one of these things that it's now like opened up to be usable now for really like the first time since it's been released. He had still no iE 11 support that sucks and no hopper mini support no blackberry browser 10 support looks like that's a problem.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"56"}},{"id":39,"start":859.409,"end":866.01,"text":"Position sticky is a nice one though because like you know, it doesn't have to stick to the top of the thing so it just becomes relative","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"19"}},{"id":40,"start":866.04,"end":883.049,"text":"Yeah, that's the use case is when you don't need something to be positioned to get some weird issues with it to some occasionally weird edge Casey bugs, but I love position sticky. It's one of those things I wish I could just use all the time with no fallback knowing that it's gonna work on everything. But you know what we'll get there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"26"}},{"id":41,"start":883.199,"end":951.049,"text":"Yeah, I'm trying to build something into the syntax, that FM website where the currently playing show also becomes sticky when you are scrolling it just so that as you scroll through the list of episodes, the one that's currently playing is stuck to the top. There's some weirdness around using sticky double sticky Yeah. Hostgator is a little weird if they get a coupon, yeah, sticky. So that is the positions, let's talk about heights heights in CSS are a bit of a funny thing as well, because heights and widths do not work the same way. Because if you give something a width, it will immediately size itself. If it is a block or inline block element, we'll talk about what those are in just a second. If you give something a width, or a max width or a min width, then it will respect that and automatically size itself based on its parent container. But if you give something a height, it doesn't always work. And that's because the height of a container is dependent on the amount of content that is inside of it. And unless it's a position absolute item, or you're dealing with a grid or something like that, it will sort of ignore the height that you give it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"43"}},{"id":42,"start":951.09,"end":1007.22,"text":"Yeah, I think this is probably stack overflows, number one question for new CSS developers is like, why isn't my div that has a height of 100%, taking up 100% of the height. And I think that is maybe one of the more frustrating aspects when you're first learning CSS positioning, and you're sort of like, well, it's not doing what I'm telling it to do, because it makes sense that you would say give this 100 hundred percent height, and then it's not gonna do it again, and needs that content or needs its parents to be height 100%, as well. But now that we have the viewport units, or whatever that sort of takes care of that aspect, for the most part, I think of height and width, are specifically with for in responsive web design when you're thinking of like non fluid elements, right. So when you're giving something a height and width, it's not going to adjust when the browser adjusts. So if you make the browser shorter or wider, or whatever, if you're giving it saying, hey, this thing is 400 pixels wide, then it's always going to be 400 pixels wide.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"51"}},{"id":43,"start":1007.34,"end":1047.8,"text":"Yeah, I think the rule of thumb I tell people is you probably don't want to give something a height unless you're trying to give it a height of 100% or 50%. And you know, exactly, because when you give something a height, you automatically are shooting yourself in the foot for when the content of that element needs to overflow it right. And you don't really know what the content of the element is going to be maybe you do when you're designing it. But that will change based on the viewport width based on the font size based on all kinds of different things that you don't have control over. So I always tell my students let the content do the sizing of the height, and you can do the sizing of the width. Yeah, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"47"}},{"id":44,"start":1047.8,"end":1051.61,"text":"don't find myself using height that much overall, anyways. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"27"}},{"id":45,"start":1051.77,"end":1078.23,"text":"the next question we had was, when do you use the max height and max width, and as well as min height and min width. And generally these are sort of just like safeguards on either end that you use along with your, your max height, or sorry, with your regular width and your regular height. So if you don't want something to go bigger or smaller than whatever size that you have, I use max height and max width a lot in Flexbox. And I find myself when I'm using grid, I don't reach for it all that much often anymore.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"31"}},{"id":46,"start":1078.29,"end":1138.26,"text":"Yeah, you'll typically use these things, again, unresponsive things where maybe you have a parent container, like a good use case, this would be you have your main section of the page, right, the main section of that page, maybe you want it centered, so you have a margin zero auto on it, but you always want it to be essentially taking up the full width to an extent. So you would give it like a max width of 1140 or something like that that way and giant monitors its sticks. And it's only ever that wide, it doesn't get super duper, duper wide max width max that I do find these to be pretty useful. Again, it's just for containing your content within certain bounds. But typically, it's for fluid items and things that are changing upon the browser changing. So they also asked about when to use top, bottom left and right. And these are primarily used within positioning things we mentioned relative sticky, absolute fixed. So we already kind of went over these a little bit. But really just giving things a nudge in a direction or position in a specific container spot.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"58"}},{"id":47,"start":1138.31,"end":1164.86,"text":"Yeah, I think also, what's important to say is that usually you'll probably want to use a transform, instead of using a top right bottom left, especially if you're doing animation, like if you're trying to like when you hover over something and it moves over or up and over or translate you're trying to move something Yeah, you just use a transform. And that's going to be more performant for your animations. And generally, it's much easier to work with using transforms than it is from using top right bottom left.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"58"}},{"id":48,"start":1164.9,"end":1182.96,"text":"Yeah. So in that same regard to you know, the transform 3d even if you're just moving something over to the left or to the right or up or down. Transform 3d is going to be putting that on the GPU. So I think in typical situations is going to make your animations a little bit smoother. Don't ask me if that's totally wrong. But I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"24"}},{"id":49,"start":1183.1,"end":1184.04,"text":"is that still a thing? I've","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"43"}},{"id":50,"start":1184.04,"end":1188.27,"text":"always heard that that's the thing. I don't Yeah, is it? Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"44"}},{"id":51,"start":1188.32,"end":1209.66,"text":"I'm curious if that is still a thing, because I always remember all these tricks, where if you want to offload the animation to the GPU and make it buttery smooth, then use transform 3d. Yeah, and those checks almost was like, well, then why doesn't chrome figure it out and offload it to the GPU in the first place? But I still often use that trick because I remember it. And I'm curious now, if anyone know Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"48"}},{"id":52,"start":1209.66,"end":1221.45,"text":"I always use the 3d transforms. I mean, it's just like any good movie. Like, you know, we got transformers, but then you got Transformers 3d. Yes, go for the 3d one. Although Transformers isn't a good movie. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"09"}},{"id":53,"start":1223.33,"end":1375.41,"text":"speaking of 3d, there's other things that need depth, and it's your CSS. This is my favorite. I love this. I was trying to convince Scott to use that transition. But he is too bad though. So I have to say it here. Anyways, we have a sponsor today that has Manning publications. And they have all kinds of great web development books and videos for you to learn. And today we are spotlighting CSS in depth in emotion from Chris Ward, it looks to be just under a three hour course with 56 exercises. And they go into oh boy cascade better specific D best, best activities that fit in and, and inheritance working with relative units mastering the box model making sense of floats, Flexbox, grid position, and stalking and responsive design. So check that out. Manning has a whole bunch of courses on sale just for syntax listeners@deals.manning.com, forward slash web dev. So thanks so much to Manning for sponsoring. Thank you. Next question we had was what about relationships between containers and their children in terms of sizing and where things position themselves so when you position something absolute, fixed or sticky, it will by default, it will just go where it used to be where it was when it was static. But if you apply a any of your trouble to it, top right, bottom left, where it sources, those top right bottom left values from on the page is based on its parent. And the way I always described this when I was teaching is that let's just use position absolute as an example, that position absolute element will sort of start going up the tree and start looking for a parent that is responsible for its positioning in life. It's like a child in line that's looking for a child that's like maybe it has its immediate parent might be neglectful. So it just keeps going up the family tree until it finds some sort of element that is position relative or position absolute or I think sticky as well. So where it bases itself office is where it will find the closest parent that is positioned relative or absolute. And then where that element is itself is is where the top right bottom left values are derived from. So most likely, you're going to just be having some sort of container element, you pop a position relative on there only because you know that in the future, you're going to have a child that is position absolute. And that needs to be the containing element for it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"23"}},{"id":54,"start":1375.59,"end":1461.18,"text":"Yeah, I think that's good. And yes, they're all like, it's sort of like going over the same thing over and over again, because it is very like these things are also closely related that the concepts all sort of affect one another. So you explain one, it's like almost like sort of explaining how and and we did briefly mentioned that there's some things that we haven't really touched on too much with like the box model and things like that just yet, which are, are some, you know, somewhat important to this whole thing as well. And we briefly mentioned that there's a difference between block and inline and inline block items and how they sort of respect space. And by default, you may or may not realize this, depending on what your skill level is. But each element in HTML has default properties that's assigned to it. And part of these things that are adjusted via CSS resets and stuff like that. But one of the things is, is that these elements are by default, either a display block or display inline, or block, inline block, whatever the URL, all the elements in HTML have default properties for this box sizing. And so we often don't think about that. But div is a div because it takes up its space. It's a position block, right? Where a span is the position in line item. And it doesn't take up any space. It just wraps the content. And I think that's important to to know throughout this whole thing is block verse inline, inline block, how it takes up space and how it deals with that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"55"}},{"id":55,"start":1461.57,"end":1498.44,"text":"Yeah, maybe we should just rattle rattle through them really quickly. So you've got display block, which is a div, a paragraph and h1, h2, all of your new tags article, figure, all of these things are display block, which means that they are by default, they span across the entire width of its container paragraph is I think I said all of those. Then you have display inline, which things like the emphasis tag, the span tag, the bold and italic tag, which aren't used all that much often. What other elements are in line by default, are the areas do you know about mark the mark tag?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"21"}},{"id":56,"start":1498.68,"end":1502.88,"text":"I don't know. know about it? No, I never had a mark tag. Now, let","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"58"}},{"id":57,"start":1502.88,"end":1527.06,"text":"me tell you about the mark tag. So the the mark tag is like marquee, it's for like highlighting stuff. It's for marking content inside of it. And I have many times on my course websites, I want to highlight text. And it's sort of like strong, there's some you can look up the accessibility differences between it, but it's being able to highlight text using the marking by default has like a yellow background on it, but just kind of like a highlighter.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"02"}},{"id":58,"start":1527.12,"end":1538.16,"text":"That's kind of cool. No, that's interesting. I almost have never used it. I almost always used emphasis or strong to do any sort of differentiating like that. But Mark, no, Mark. Yeah, interesting.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"27"}},{"id":59,"start":1538.37,"end":1564.83,"text":"There is a kbd tag that's in line as well, which is the keyboard input on other elements are in here are in line, you get the point right. So these elements do not accept a width or a height. So you can you can try till you're blue in the face, but they will not. They will ignore any width or height that they give them. Why because they are Get ready. They are spiral wrap. Right? See, get it? This is my ran wrap. No, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"38"}},{"id":60,"start":1564.83,"end":1565.7,"text":"don't get it at all. I","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"26","ss":"04"}},{"id":61,"start":1567.59,"end":1587.3,"text":"get it here. Yes. If you take a span and your wrap anything with a span, the span will just wrap itself around the entire element, or the text or anything that is inside of it. And it will not go any wider or higher. It started just clings to Yeah, the content isn't there. So it's like cling wrap. Yes. But ran wrap. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"07"}},{"id":62,"start":1587.3,"end":1592.94,"text":"no, I okay, I am getting it now. I think that's pretty good. That's pretty good.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"27"}},{"id":63,"start":1593.09,"end":1637.31,"text":"Yeah, yeah. So if you want to give something like a inline element of width or height, but still not break the document flow, because a block element will always start on a new line and the content after it will always start on a new line. So if you want to give something a width and a height, but still keep it in line of the document, you can make it inline block. And that will have the same effect as an inline element except that it will accept a width and a height. And the default for that is a image tag is inline block, which is great because you want to give an image a width and a hyper, you also don't want it to necessarily break onto the new line, which is what a figure tag is for. If you do want an image to be on its own line, you should wrap it in a figure and give it a caption as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"33"}},{"id":64,"start":1637.67,"end":1639.59,"text":"Yep, yep, yep, yep, yep. Yep.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"17"}},{"id":65,"start":1639.77,"end":1713.93,"text":"So those are the big ones. There's all there's a whole bunch of other ones. There's display grid display flex, there's display table. Yeah, a whole other host of unused one. But I think that's we're not gonna talk about that right now, just as we're trying to understand what the differences are between the two. And then you get into these other elements, like the different sizing of different types of elements. So we talked about a paragraph heading tags, those are blocked, we talked about spans and strong, so those are in line. But then you have these things like image tag, image tag is inline block, we have an iframe iframe is a block element, but many people think that iframe will size itself based on its contents. But since an iframe doesn't know how big its contents are, because it's another web page, there's no way to size the height of it, unless you What's the name of that where you can communicate between an iframe postMessage, you can use this thing called in JavaScript called post message, which will allow you to securely send data from an iframe to the parent document and vice versa. And often, what you can do there is you can just have like a timer, every 400 milliseconds, send the height of the iframe to the to the parent document, and then the parent document will set the height of the iframe for itself.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"19"}},{"id":66,"start":1713.96,"end":1732.5,"text":"Yeah, I think we should mention too, that a lot of times people think they can communicate with their iframes. And to do so like the iframe has to be aware. This, right? You can't just iframe, you know, syntax.fm into your site, and then just start communicating with syntax, right? The site has to be aware of it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"28","ss":"33"}},{"id":67,"start":1732.86,"end":1782.06,"text":"Yeah, that's a huge security issue, if you could do that, because then you could just quickly iframe in, like your bank.com or facebook.com, forward slash messages and then screenshot it or dump the HTML content of it. He can't do that unless it's on the same origin. No, no, no. Okay. Last thing I want to say here is that images and video tags are a little bit different because they are ratios based on their content. No other content in the DOM can have a ratio. So if you want it to be like 16, nine, you want like a div to be 69. The only way to do that is to either stick some sort of image or video that has that ratio in it and then size it up, and it will automatically you size, the width of it, and then the height of it will automatically react or vice versa. Or you can use this padding hack. Have you ever used that padding hack? Where","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"28","ss":"52"}},{"id":68,"start":1782.15,"end":1797.57,"text":"Oh yeah, I use that all the time. I use it on level up actually. So you give something a padding of a percentage of what you want that aspect ratio to be like a padding bottom of 62.5% I think it's the 16 by nine or whatever to get that aspect ratio gone.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"42"}},{"id":69,"start":1797.75,"end":1805.34,"text":"So those are the only kind of weird ones. I was love to have native ratios in CSS at some point. That'd be pretty cool to have. Oh, me too.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"57"}},{"id":70,"start":1805.36,"end":1806.48,"text":"Yeah, absolutely,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"05"}},{"id":71,"start":1806.84,"end":1809.42,"text":"you can keep going. Cool. Next up, we","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"30","ss":"06"}},{"id":72,"start":1809.42,"end":1899,"text":"have the idea of floats. Now, this is one thing that I have not used in a very long time at this meeting, either, yeah, floats. Basically, the idea of floats in the first place is that you float something to take it out of the flow of the document. If you float it to the left, everything B underneath it in the flow of the document is going to scoot up and the thing that's floated left will then be shot over to the left of the flow of the document. And it's only going to take up the space that you give it. So floats were primarily used to do layouts before we had better layout tools. So if you wanted a sidebar on your site, you'd float it left. And if you wanted a content area, you just have it there. And then you give things your width and whatever. And then the container would need some sort of clear fix. Now there's a whole idea of clear fixing, which is what clears the float. Because when you take something out of the flow of the document, the container, the sort of height of the container gets messed up, and it's going to show up, and it's no longer going to respect because the item is out of the flow of the document, that container no longer has that structure to hold it up anymore, right. So because of that we would use on the div you could use going to overflow hidden on the container that would clear the fix, you could have a div that would clear the fix. There was a whole bunch of different things, there was like an after whatever to clear the fix. I have not written a clear fix in any of my code. In years now. No, I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"09"}},{"id":73,"start":1899,"end":1945.2,"text":"don't think I've written a float, let alone like the the use for floats was you have an image and you want the text to wrap around that image, right. That's the only use case that you should still ever use a float. So floats are not bad. But they've just gone back to what they originally used for which is having an image or like another example I use, sometimes I'll have like a blog post, and you want to have like a little tip inside of that like, like a hot tip like a hot tip. Yeah, JavaScript is cool. And you want the text to just totally wrap around the top, the left and the bottom or the top, the right in the bottom floating it will do that. And that's exactly what it's for. But we didn't have layout tools available to us. So people abuse it. And we use floats for for website layout. And thankfully, you no longer have to do that. Because we have Flexbox and grid. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"31","ss":"39"}},{"id":74,"start":1945.47,"end":1962.99,"text":"yeah, it pretty much anything that you would have used Flexbox floats for in layout I'm doing with Flexbox I'm doing with grid depending on what my audience is. But if you were still using floats for layout, I would look into cest using Flexbox, or something better more suited for layout itself rather than what that was originally intended for.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"25"}},{"id":75,"start":1963.26,"end":1983.09,"text":"I think that's why people also use like the grids. We talked about grids on the past episode, like we don't use grids a whole lot anymore. And the problem was that people didn't understand how to fix these issues that you had when you ran into clear fix issues. So they just use a grid and it took care of all of those floating issues for you. But it's not necessary anymore, which is pretty cool.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"43"}},{"id":76,"start":1983.18,"end":2116.98,"text":"Yeah, I think and floats were probably again, maybe number one or number two on stack overflows, see biggest problems. And oh, we want to talk about CSS, you know, improving all the time in you know, we always talk about Flexbox and grid and how they changed how we do things. This is directly how they changed how we do things. And it's going to make things just endlessly easier for new developers picking this stuff up not to have to worry about why the heck is my container now collapsing? Or Why's this whole thing weird? or What the heck is a clear fix? And why does it even exist. So oftentimes, people would you know, they'd have these these issues, they would run to Stack Overflow, they would read it. And then they'd have to learn a whole bunch of stuff like that. All of these things are bugs that we have to keep track of. And one way that we treat keep track of bugs over here is syntax. This is not a good transition, I'm sorry, century. But one of the ways we keep track of bugs over here at syntaxes, via century, and you can learn more about sentry@sentry.io. This is a live stream che it's the place to keep track of your bugs, what's happening in your site. And when something goes wrong, what the problem is, I personally use Sentry on all of my stuff, to let me know when things are happening. And one of the coolest things about century is that it keeps track of your bugs and a nice, detailed, organized manner so that you can go ahead and find them. You can address them, you can mark them as resolved. And then you can watch in horror as that bug comes back. And you can realize that you didn't actually fix it. It's just an absolutely insanely useful tool for having any sort of code that needs to work. Right. If you have a, if you have a code that is being used publicly, and you don't have any sort of error tracking on it, then you are just it's like, it's like you're wearing a blindfold, right? You're purposefully ignoring all of these bugs that could be happening because it's not a matter of if the bugs happen. It's a matter of when they happen. So If you use Sentry for two months, let me tell you, you're going to want to be using it for three months. And you're going to want to be using it for four months and five months and so on because it is totally one of these essential elements of my toolkit. So Sentry dot i, so Sentry dot i o coupon code, tasty treat, check it out.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"03"}},{"id":77,"start":2117.31,"end":2146.61,"text":"I love Sentry for the stuff. I'm just I'm just on my dashboard right now. And it's almost like a game is like, Yeah, I bet I could bring that amount of errors down or I bet I could totally eliminate it. And it's just like a constant thing of like, I just want to have a clean dashboard. I want to get rid of them all. And it's really nice to be able to just like look at all the errors that your terrible coding is making happen and figure out how can I get these down? Right? Yes, it tells you exactly what you need to do if you've got a little bit of time to fix a bug.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"17"}},{"id":78,"start":2146.65,"end":2215.67,"text":"Yeah, absolutely. Yep, invaluable. Cool. So let's go ahead and talk about we talked a little bit about Flexbox and grid already and how they sort of made our lives better from float. If you want to learn more about Flexbox. And grid, we have a whole episode on on grid. It's definitely well worth your time, if you're interested in it. Both Wes and I both have courses on Flexbox and grid. So there's a lot of content there on this sort of stuff. It's definitely Well, well worth your time. One of the things they mentioned is they wanted to talk about responsive design, media breakpoints and stuff like that mobile first. And all of this stuff sort of goes into the idea of how do you want your design to be? Do you want it to be fluid? Do you want it to be sort of static where at these given breakpoints it's changing? Do you know directly? Or do you want it to grow with the site and things like that. And we mentioned if you want it to grow, you're going to want to be using max width, that sort of stuff. If you want it to be static, you're going to be using standard width and whatever. But the cool thing about a lot of these new tools like grid and Flexbox is you can do a lot of responsive web design without even reaching for a media query. There's all sorts of properties here that allows your layout to adjust accordingly, and sort of work really well and all device sizes if you're using those new tools.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"46"}},{"id":79,"start":2215.77,"end":2239.98,"text":"So a question I have for you. And this is something that comes up all the time is your media queries? Do you do mobile first or desktop first? And the idea behind those two is that? Do you first design the website as a desktop website and then start to size it down as you make it responsive? Or do you first start with the mobile website, and then write media queries as the thing gets bigger and bigger to lay it out? So what were your thoughts there? Scott","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"55"}},{"id":80,"start":2240.1,"end":2313.38,"text":"depends on the project. I think if I have the designs laid out in front of me, like here's the mobile, here's the desktop, here's the entire thing. And this designs aren't going to change, like a designer dropped this on my desk and says, code this up, I'm almost always gonna go for mobile first. But in level up tutorials land where I'm designing mostly in the browser, and things are changing all the time, I'm reaching for desktop first, and then I'm doing media queries, I sort of actually work backwards. So the code reads mobile first. But I'm not writing it mobile first or so to just coated up to get something working in desktop. And then when I do my little refactor of in sort of refactor it to be sort of mobile first, but when I'm writing it, I'm typically writing the CSS code, desktop first. And that's for a few reasons. It's because I'm delving on desktop. But also my, the primary use case of level up tutorials is via wider width, like desktop, or a wide tablet or something like that. So for me, you know, first and foremost, the, the main goal is to have everything as good as possible on wider widths, rather than in mobile phone width. So I usually start desktop first design, and then and then sort of tweak it as I go, and then do a little refactor. How about you?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"20"}},{"id":81,"start":2313.54,"end":2381.13,"text":"I think the the question I was asked myself is, do I feel like I'm undoing a lot of stuff? When I'm going to mobile? Did I make things too complex on the desktop? And then I have to unravel all of this complexity and set it back to how it normally goes? If you're answering yes to that question, you probably should start desktop first, generally, or sorry, you should probably start mobile first, meaning that your site will be very simple. And then as it gets wider and wider, it becomes more complex with the different layouts that you have. Personally, I almost always do desktop first. And especially now with the with using CSS Grid. And probably like five or six projects that I've done in the last couple of years, I find that it's just so easy to just rewrite the grid at a certain breakpoint. And if things just sort of slat and fall into place. So I also get most of my traffic on desktop as well. So you need to be aware of, of who is I find that you can often hear people chanting, mobile first mobile first, and they don't have like, they probably that probably works for them. But again, you need to figure out where your audience is visiting your website, and what works best for you.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"38","ss":"33"}},{"id":82,"start":2381.31,"end":2539.32,"text":"Yeah, and sometimes you even have things like a nav that like the navigation, if you're using the same HTML between mobile and desktop, that's one of those things that's always almost very different between desktop and mobile. Maybe you have it hidden via a hamburger, maybe you have it, whatever, but it's usually a sort of very different situation. In that case, it doesn't matter Which one you do, because typically, the CSS is going to be so different. Like, I might have a media query for just mobile and immediate query for just desktop and have them totally separate. So I'm not having to do a ton of overrides and stuff like that. So I think there's different use cases for either or, but with again, with these modern tools, I find myself even needing to write overwrites, and stuff like that less than less than less, because Flexbox is doing so much for me, I'm no longer having to worry about floats and stuff like that. So again, the tools are just making this so so much better as we go on. And, and I think with some of these things that we're gonna be getting into a second here with these viewport units, these are one of the things that like really makes your life easier. In fact, the other day, it was like it was like a couple days ago, I was forced in a situation where I had to write a slideshow from scratch because it was super custom. And I was thinking like, I'm not really excited about writing this slideshow, I'm just going to hack together, maybe I should, you know, fork someone else's and hack together, I don't want to write one from scratch. And then the more I was thinking about how custom the slider is, I just didn't want to have to deal with that. So I just wrote it from scratch, right. But then as I was getting into it, I was like viewport units have made this extremely easy. Like it's been so long since I wrote a slideshow that I didn't realize how easy the CSS has gotten for it. Because you have things like viewport units, you don't have to worry about calculating widths and stuff like that, and all that sort of stuff. So the viewport units of which is Vw VHV men V max, are new ish. They've been in longer than I think people realize, but newest units that just like pixels or percentages are used for sizing things, the only difference is is that these are about the viewport. So if you were to say something is v w, a 100, then that's going to be the width of the viewport, right? It's going to be with 100% of the viewport. If it's Vw 90, it's going to be 90% of the viewport width. So it's important to know that these are always relative to the viewport themselves. So if you say something's v w or 90 Vw, right, and you want it to be just 90%, it's important to know that it's going to be 90 of the viewport not 90% of its container, or whatever it's in like that. So occasionally, you might think of why would I use percentages? Well, percentages are relative to the container, the VW VH relative to the viewport,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"39","ss":"41"}},{"id":83,"start":2539.38,"end":2585.9,"text":"I really like these viewport units, specifically for one thing, and that is perfectly centering something inside of a page. And the way that I do that is I will grab the body and the HTML tag and put a min height of 100 Vh on it. Because by default, the body I think the HTML tag will only be as high as the content that is inside of it. Yep. So by setting it, setting a min height of 100 Vh will automatically make it as high as the browser is. And then if it's higher, it doesn't matter, because that's a min height, right? And then you grab your body, and you can display grid or display flex and then justify and align center pops that thing right in the middle. I use this all the time, because I always do like these tiny little demos, where it's just like one thing on the page. And I want it to like look good. So you just center it and it looks good.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"19"}},{"id":84,"start":2586.03,"end":2642.49,"text":"Yeah, yeah. And I use v H. Again, I mentioned earlier in the episode, I use this all the time on my main element to just say 80 Vh. And that way, you're never gonna have a situation where the footers come in way up. And if your content isn't tall enough, it's like you know, it's not gonna scoot up there and look really weird to give them sort of main area of your site, the standard sort of height. And I love to use this for stuff like that. I remember, it's just like the the sticky footer where you're trying to get the footer on the bottom of the site or something that used to be really yeah, just no fun to do. There was like a billion. Yeah, I remember just thinking like, this is so dumb, I have all these like extra div elements, and percentages, and whatever trying to get this this footer to be sticky, negative margins, and whatever you are doing there. So again, these viewport units are just totally invaluable to me. I use them constantly, especially when just trying to work in anything that relies on the viewport itself.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"06"}},{"id":85,"start":2642.58,"end":2667.18,"text":"Yeah, I actually use them a lot in like mobile typography. Because one thing like, you don't even have to be thinking about what is 100%. But if you grab like an h2 tag, and give it a width of like six v w, then as you resize the width of your, as you resize the width of your browser, the text gets smaller. And that's almost exactly yeah, here. Let me let me send you a pen. No way.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"02"}},{"id":86,"start":2667.21,"end":2668.71,"text":"I did not know this. It's like a fit. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"44","ss":"27"}},{"id":87,"start":2668.92,"end":2675.73,"text":"I use this because like sometimes I find myself like writing like seven or eight media queries. make it smaller as I go along.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"28"}},{"id":88,"start":2675.73,"end":2678.28,"text":"That is that is blowing my mind right now.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"44","ss":"35"}},{"id":89,"start":2678.28,"end":2678.91,"text":"Okay, hold","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"38"}},{"id":90,"start":2678.91,"end":2696.37,"text":"on. Where's slack? Whoa, whoa. This is like a Wayne's World to do. I am blown. It's blown my mind right now. Yeah, so those those of you listening, I hope you've learned a lot from this episode was I just learned something very valuable. Something I'm gonna be using all the time. This is cool. This is very cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"44","ss":"38"}},{"id":91,"start":2696.64,"end":2723.88,"text":"Yeah. So what it is, is you just grab like an h2 tag, say font Size six v min, or sorry, six v w. And it will just make this the font size, like, you know, you play with it until you find like a happy size. And then as the screen size gets smaller and smaller, your text will just immediately get smaller as well. And what I found is that you don't have to fiddle with font size at any breakpoints, because it'll just like it'll kind of scale down with the, with the thing as well, which is pretty cool.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"56"}},{"id":92,"start":2723.91,"end":2725.11,"text":"Gosh, darn it. That's cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"23"}},{"id":93,"start":2725.14,"end":2734.41,"text":"That's cool. Go to go to Kiko dot info. This is my keyCode website. and resize both the height and the width of the like, hit","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"25"}},{"id":94,"start":2734.44,"end":2738.76,"text":"hit a code, any key, any key, press the key, any key got it. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"34"}},{"id":95,"start":2738.79,"end":2741.25,"text":"And then, and then resize the height and the width of it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"38"}},{"id":96,"start":2741.28,"end":2745.27,"text":"I'm resizing the height and the width, I'm grabbing from the bottom right, and it is glorious.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"41"}},{"id":97,"start":2745.75,"end":2787.18,"text":"Yeah, so the the size of the key code I'm using, I'm using V, let me double check what I'm using here, I'm using v min. So I'm saying what v min will give you is it will give you the minimum of the width or the height. And meaning that if the if the height is smaller than the width, it will give you the height if the width is smaller than the height, it will give you the width. And what that does is if if the you sometimes run into situations where the user's browser is really short and wide, or the user's browser is very tall and skinny. And making type fit on that is really easy when you use v min. So go to Kiko dot info and just resize your browser on both axes to see that","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"45"}},{"id":98,"start":2787.36,"end":2809.47,"text":"nice, this is great. This is super bad. And you can use these things to with like calc or any of that stuff do you know modify the value, you could say this is 90 v h plus five pixels. If that's you know, you have a five pixel thing going on or something like that. There's just so many cool things you can do with these viewport units for myself using them just very, very frequently.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"27"}},{"id":99,"start":2809.59,"end":2832.9,"text":"Yeah, before we had grid, I would use them a lot to do like the fix sidebar. Because if you wanted a sidebar to be 500 pixels, and then you wanted the rest to be the rest, you would you would say the width is 500 pixels, and then the rest of it would be 100 vw minus 100 pX, so you can mix and match units there and it will just work out. So isn't the web. Awesome?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"49"}},{"id":100,"start":2832.93,"end":2847.33,"text":"It's so awesome. And you know, this is the ironic CSS is awesome episode. I mean, maybe that's what it should be called. Because it's so it's so good. I I've always been a fan. But man, modern CSS. Let me tell you modern CSS is excellent.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"12"}},{"id":101,"start":2847.96,"end":2855.04,"text":"So I think that's all we've got here. I think we should do an entire episode. I don't think we've done an episode on Flexbox. Have we?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"27"}},{"id":102,"start":2855.04,"end":2860.65,"text":"I don't think so. No, we haven't. We can call it flex and with the boys. Like","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"35"}},{"id":103,"start":2861.55,"end":2889.36,"text":"people get angry last time we said that. So we can call a flexi with the boys are. And I think we should also do a Flexbox versus grid in my CSS Grid IO series. I have a whole video detailing the differences and the same ease of them. Yeah. When do you think it's worth having a episode on the differences between the two as well, because they do have like a large overlap. But then they also do their own thing as well. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"41"}},{"id":104,"start":2889.39,"end":2898.48,"text":"very specific use cases. And I don't know if you saw but it looks like subgrid is moving along nicely. So maybe we have a little bit more to talk about in that regard as well.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"09"}},{"id":105,"start":2898.72,"end":2902.53,"text":"All right, I'm gonna add a subgrid hasty treat to the list.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"18"}},{"id":106,"start":2902.59,"end":2930.01,"text":"dope. Cool. Sounds good. Well, I hope everyone enjoyed this episode on CSS positioning. Let's know if you have any more questions or sort of weird use cases about CSS. Again, this position stuff, a lot of this stuff on this list that we were talking about got totally invalidated as being issues anymore, because of modern sort of stuff. We don't have to worry about floats. We don't have to worry about any of that stuff. We have things like position sticky we have things like viewport units to make our lives so so much better.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"22"}},{"id":107,"start":2930.49,"end":2932.02,"text":"You got a sick pick for me today.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"50"}},{"id":108,"start":2932.35,"end":2957.04,"text":"I do and I have a podcast and now my podcast recommendations have been well received here. So this podcast is a little bit different because it has an end date. It's not a continuous one. It's like a mini series and then sometimes these mini series podcast I like don't want to get invested in but there's been a few lately that I'm like really loving the whole the whole thing we're a podcast is only 10 episodes and then it's done right?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"48","ss":"52"}},{"id":109,"start":2957.22,"end":2957.91,"text":"Yeah, yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"17"}},{"id":110,"start":2957.91,"end":3052.65,"text":"Then I end up having a bunch of these these podcasts and long my thing but this particular podcast is on a topic that I'm very, very, very interested in and that's art. heisting art heists. This podcast is is from wb you are in the Boston Globe. It's called last scene. And there's this art heist. It's one of the most famous art heist in history took place in Boston. The Gardiner Art Museum was robbed of Vermeer and some Rembrandt's or I think it was a couple Rembrandt's and how much other stuff that was like sort of inconsequential but you know, important nonetheless. And it's like the most expensive art heist unsolved art heist right? In this podcast is 10 episodes and it sort of goes over the whole story how it happened, you know, who are the main players and it is fascinating. I've always like really been interested in this art heist, in particular, the gardener eyes to art heist is something I've watched documentaries on, I've watched episodes of whatever on this podcast really opened it up for me. And they, they, they spend a lot of time on, you know, who are the key players and basically where the investigation is now. And it's just so fascinating. It's a truth is stranger than fiction type of story. And that's what I absolutely love. The storytelling is excellent. They get a lot of interviews, interviews of people that people have never been interviewed before, in any regards regarding this art heist, and you get to just see a lot of angles of investigation and stuff like that. So if you're interested in anything like this, anything that sort of like true Crimea, or whatever it's called last scene. It is top tier podcast material right here. I love it. Awesome.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"17"}},{"id":111,"start":3052.65,"end":3095.97,"text":"That sounds I've heard that advertised on a few different podcasts. That sounds really good. I'm going to check that one out till it's good. I'm going to sic pick my drone video that is now out. I mentioned it on a previous episode. But IBM sent me a drone to do a video with which is a it's a DJI Tello drone. It's like $100 little toy drone. And it was so fun to actually code this entire thing. So what I did is I wrote some JavaScript that would power the back end via WebSockets and UDP and our front end and react. And it was pretty fun. People, people tend to like the video as well. So check it out. I'll put the link in the show notes or I'm just Wes Bos on Twitter. You can find it on there. Hey, that's it for today. Shameless plugs,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"52"}},{"id":112,"start":3096.18,"end":3151.71,"text":"shameless plug a little silly. Here, I am going to shamelessly plug my series that will be coming out this month, or should be out by the time you're listening to this. It's so crazy. We're recording in the future here. This series is on design systems will styled components in react if you are interested in styled components. If you are confused about why anyone would like or want to use CSS and JavaScript this course is for you. It's all about how to not only see the advantages of using CSS in JavaScript, but also how to build a design system something that you can elaborate something that you can scale upon and use so check it out. It's going to be available at level up tutorials.com if you sign up at level up tutorials comm Ford slash pro you can save 25% off that yearly subscription and get access to a ton of new series I think I added up it's gonna be like 700 tutorial videos between the stuff that's already there and the stuff that's coming in 2019 so a lot of content check it out little toys comm forward slash bro","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"51","ss":"36"}},{"id":113,"start":3151.83,"end":3153.87,"text":"awesome good silliness Scott.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"52","ss":"31"}},{"id":114,"start":3153.87,"end":3156.06,"text":"I'm selling selling hat on.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"33"}},{"id":115,"start":3156.6,"end":3197.49,"text":"Another pug has commented that we're too silly. On this podcast where we we give ourselves one minute at the end of the podcast to plug our own stuff and it's actually called shameless plugs but I thought that was a that was kind of funny. Anyways, I'm gonna plug all of my courses Wes Bos comm forward slash courses if you want to learn full stack advanced reactive graph qL e6 for everyone react for beginners or any of my free courses. I've got more free courses than I do paid courses. CSS Grid JavaScript 30 Flexbox learn Redux command line power user markdown you name it. You've got it. Wes Bos comm forward slash courses. Thanks so much for tuning in. And we'll see you next week or get it We'll see you next week.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"52","ss":"36"}},{"id":116,"start":3197.49,"end":3198.93,"text":"Peace, peace.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"53","ss":"17"}},{"id":117,"start":3200.91,"end":3210.69,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"53","ss":"20"}}],[{"id":1,"start":0.359,"end":0.87,"text":"Monday,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":0.899,"end":3.42,"text":"Monday Monday open wide dev fans","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":3,"start":3.42,"end":21.66,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"03"}},{"id":4,"start":23.61,"end":24.48,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"23"}},{"id":5,"start":25.89,"end":53.4,"text":"Welcome to syntax in this hasty treat, we're gonna be talking all about pointer events in both CSS and JavaScript, which is something you might not know that they they are a thing in both CSS and JavaScript, we're going to be talking a little bit about what and why and what the difference is and why you might want to use them. And, and sort of, you know, some of the potential pitfalls, downsides, any of that good stuff. My name is Scott winsky. And you are listening to this index podcast with me as always is Wes Bos. How you doing,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":6,"start":53.85,"end":72.9,"text":"buddy? I'm doing great. I'm excited to talk about pointer events. Yeah. Which I had no idea that they were coming to JavaScript, I knew that there was like a unified API for doing event pointer events, but I didn't realize that it was coming so soon, or is already in all of the browser. So I'm excited to talk about it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"53"}},{"id":7,"start":72.93,"end":203.64,"text":"Yeah, me too. This hasty treat is sponsored by Sanity. Now your back end data and everything like that it should reflect the type of data that you have on the front end is in your data is not standard. It's not just a text box and a text area and call it quits with that your content is typically much more unique and dynamic than that insanity is the boy life as in bring your own front end data service allows you to store and use your your API as a service. That is totally gives you a full on ability to have your data in the back end reflect the uniqueness of your data in the front end. And so sanity is one of our favorite tools for bringing your data to your front end websites. Nowadays, we have things like headless sites and front end code that's totally optimized with things like Gatsby j. s, and static sites. But the whole back end piece, what do you do with all of that data? Where is that replacement for the blog post where someone can go in and edit their stuff, or even just store all of their data, let me tell you that Sanity is the the solution of that Sanity is just really super cool. They put together a little demo for us. And we became believers immediately after seeing that demo. And it's just so much fun. It allows you to use like actual components in the back end of your site to give you full end customization of the back end of your site. Again, your your front end code, your front end data is not typical. And Sanity knows and understands that and allows you too, have totally custom stuff. So check it out@sanity.io forward slash syntax, and you're going to go ahead and do you're going to get a nice little free plan here. That is free. 99 is as in zero dollars, no credit card required, it's going to give you three users, two data sets. This is the tasty plan, they put this thing together just for syntax listeners. So check it out at Sanity dot i o forward slash syntax and check it out. Seriously, this is one of those tools that when you're looking for where do I host my data with this thing, Sanity should be right at the top of your list. So you want to check this thing out as entity IO forward slash cindex.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"12"}},{"id":8,"start":203.85,"end":301.82,"text":"Awesome. So let's jump right into pointer events. pointer events are in CSS, and they are in JavaScript. So we're gonna do an explainer episode explain what both of them are. So we'll kick it off with CSS and CSS, we have this thing called pointer events. It's a property it's been around for a long time. And it's it's well supported in all of the browsers. And essentially, it allows you to just ignore the cursor or the clicks on an element. So if you have a div that is overlapping something sometimes, like let's say, for example, I've got an image tag, and that image tag is overlaying some like I'm working on my new website right now. And I'm going to overlay some grunge texture overtop of some of the text. However, I don't want to make my text not selectable, because that's not a good thing to do on your website. And if someone were to try select the text, they would actually be dragging the image instead of trying to select the text. So what you can do is you can select an element and you just say, pointer events, none. And what that will do is it will tell that it'll tell the mouse and any mouse events that you have in JavaScript, the default ones like clicking links, or selecting text or custom ones that you've built in JavaScript, it will tell it just to ignore that element as also, that's really all there is in CSS, you can say pointer events, none to allow the mouse to be totally ignored on an element. And then you also have Porter of pointer events auto, which will flip it back to the default. There's some other other ones that we have here, visible, visible painted, visible stroke, fill stroke, those are all for SVG, which I would imagine would be very helpful in doing some sort of graphing where you only want people to be able to to click on certain parts of the SVG.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"23"}},{"id":9,"start":302.25,"end":355.11,"text":"Yeah, I mean, I use pointer events, none a lot in animation, or just typically visual flourishes, things that are aren't like important to the site, and maybe something that is sitting on top of another div. And maybe you don't want this thing to interact or affect how you know, it is your other actually useful elements on your page, especially elements that are like transitioning outwards, right? If something's it's fading out, or whatever, maybe it's still sitting on the top of everything, you don't want your users to not be able to click something, even though you know, the opacity of this thing is at a point 05. And it's just about done. And user goes to click on it, and he can't do anything. So on transition out states, I'm almost always putting a pointer events, none on them just so the user can't interact with something that's on its way off the page. It's also useful on things like disabled buttons, right? You don't want your disabled button to register any sort of event. You just pointer events, none on button. There we go disabled.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"02"}},{"id":10,"start":355.35,"end":402.93,"text":"Yeah, I actually tweeted about this a little while ago, I'm like, why is there not a like actions event? None. Because I was I had the sweet idea to, I wanted to disable an entire form element. And I was like, oh, I'll just give it a class of disabled and say, pointer events, none on it. But then what I figured out is you can still tab through, you can still use your keyboard to submit the form. Because it's pointer fence. It's not, it's just his mouse, just mouse, it's not keyboard as well. So there's no like keyboard events, none that you can turn on to it. The solution to that is if you wrap your entire form all of the contents of your form in a field set the fields that will accept a disabled attribute. And that will stop you can use the pointer events not to stop people from from messing with it, as well as you can use the disabled attribute from stopping people from submitting the form. Hmm,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"55"}},{"id":11,"start":403.02,"end":409.86,"text":"interesting. I'm always taking care of that stuff with like a JavaScript to check, you know, field or something. But they had an interesting use case.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"43"}},{"id":12,"start":410.07,"end":518.46,"text":"So another use case you could have for it is if you have a pop up that you are trying to fade in the problem with trying to fade in a pop up is you generally have to have three states with a pop up, you have to display none on that pop up. And then you have to display block or grid and then set the opacity to zero. And then you have to the third point, you have to set the opacity to one and you can't go from display none to display block and opacity, zero and opacity one in the same fell swoop, you need to have that sort of three step process, which is annoying in JavaScript, because you have to like set a class of opening and then set a class of opening and open like, like two milliseconds later in order to make that transition happen. So one way you can go about it. I know there's there's lots of solutions to this. But one way I thought you could do it is if you set the opacity to zero, and by default, that will hide the entire thing. But per setting opacity, zero does not hide it from mouse clicks, meaning that it's invisible, but it's still there. And if it's overlapping your entire website, users won't be able to interact with your website. So setting a pointer events, none on something that has a zero opacity will make it so that all mouse clicks just go right through that element. So you can't see it. And no a JavaScript events will fire on it. And then when you add a class of open, you just put a pasady one on it and change the pointer events back to all Yeah, which I thought was a pretty cool, I didn't know if other people had used it. So I tweeted it out. And Benjamin de Kock, who's like stripe designer developer does all of the amazing layout said, this is pretty much what I've always been doing. So I thought that was pretty good. And this is actually how I figured out that there was a difference between JavaScript pointer events and CSS pointer events, because CSS pointer events are very well supported. And you can go ahead and use them today.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"50"}},{"id":13,"start":518.49,"end":525.57,"text":"Yeah, CSS pointer events have existed forever and ever seems like I don't even know when that was that was that added like CSS one?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"38"}},{"id":14,"start":525.689,"end":527.94,"text":"Yeah. Let's look it up CSS one,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"45"}},{"id":15,"start":528.87,"end":530.94,"text":"before CSS to the revenge.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"48"}},{"id":16,"start":531.39,"end":544.4,"text":"So if you look at pointer events on Can I use, I was disappointed to see they weren't in Safari. And that's how I found out that there. Those were JavaScript pointer events. And if you scroll down, you'll see CSS pointer events. Oh, and","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"51"}},{"id":17,"start":544.439,"end":550.95,"text":"their little what it says, I don't know. Ie 11 was the first version to support pointer events and IE, is that","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"04"}},{"id":18,"start":551.01,"end":555.48,"text":"in CSS? Yeah, yeah, so like they're not like they're not super old.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"11"}},{"id":19,"start":557.1,"end":558.69,"text":"See chrome version. You had them.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"17"}},{"id":20,"start":561.39,"end":564.09,"text":"Firefox three you rolled out Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"21"}},{"id":21,"start":564.21,"end":568.83,"text":"I can't believe that that iE 11 really took it that long to get them I'm surprised about that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"24"}},{"id":22,"start":569.13,"end":591.84,"text":"Ooh, there's a carrot color property in CSS that's sick. Anyways, that's not a really good pointer events but they are very well supported the only thing they're not supported in is Opera Mini which is not issue just because of that's not what Opera Mini is over a mini is a stripped down text based browser. So it's not like people are always like oh up or mini but like that's not you look into Opera Mini is so you don't need those features there anyways.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"29"}},{"id":23,"start":591.87,"end":594.63,"text":"Yeah. And how many people are using Opera Mini anyway?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"51"}},{"id":24,"start":594.92,"end":610.55,"text":"Go 2% of the globe. So it's not nothing but those those 2% are you They're using it for a reason. It's because they're on a slow internet connection and they need something in the middle that will then strip out all of the images and or compress the images and strip out all the CSS and whatnot.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"54"}},{"id":25,"start":610.86,"end":616.26,"text":"Okay, well, maybe I'm, maybe I'm wrong about upper there. That does seem like a totally valid use case.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"10"}},{"id":26,"start":616.52,"end":637.11,"text":"Yeah, maybe we'll do a hasty trade on what is Opera Mini. And maybe we'll open up our but I've used browsers like this in the past, back when I had my Blackberry, where what happens is, there's a service that sits between you and the server, and it will then deliver you a compressed version and a dumbed down version, not dumbed down. But basically, people are just trying to get the content out of it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"16"}},{"id":27,"start":637.2,"end":640.95,"text":"Yeah. So that's pretty cool. I wonder how that works with a single page apps?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"37"}},{"id":28,"start":641.13,"end":649.28,"text":"I don't know. Because it for me does support JavaScript. Maybe I should just download it somehow and figure out what does these websites work?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"41"}},{"id":29,"start":649.38,"end":714.39,"text":"Yeah. All right, cool. Well, let's get into JavaScript pointer events, which are a little bit different. Because you think is CSS Prime events is just being hate registered a click or whatever we can interact with it or not interact with it, or JavaScript pointer events are essentially sort of the modern take on the the clicker touch a mouse events that we've had for so long, right? Instead of mouse down or, or, you know, touch or whatever like that, we're now able to use pointer events, which account for things that are relevant in the year 2018, such as we have no longer just, you know, a mouse and keyboard, we have a mouse, potentially a pen, if you're on a tablet, or you know, those giant note phones, or you have touch. And so this API allows us to interact with websites using the tools that we're using in the year 2018, or 2019. That is mouse pointer touch. And I think this is pretty cool. It gives you all sorts of things like pressure and tilt, and all stuff like that. But not only that, but it encapsulates all of these things in one API, rather than having to have these separate events for different things are writing some sort of code that aggregates that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"49"}},{"id":30,"start":714.54,"end":732.18,"text":"Yeah, I guess it's funny, because we had clicks, and then you had touch. And then you had the ability to have multi touch, which I think Safari can and I think chrome was walking track up to like, I think it's like 21 different touch points. So I haven't got my toes out to try it yet. But I was asked Should we","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"54"}},{"id":31,"start":733.05,"end":734.73,"text":"get those piggies man, let's get them gone.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"13"}},{"id":32,"start":735.9,"end":794.64,"text":"You should be able to use the like, many, many touch points on a website. And then like, like Scott says, We have we've got pens, those pens have different pressure gum with your finger on safari, you can you can tell somebody made a scale with the touch sensitive Safari API, which I thought was amazing. Oh, cool. They figured out like like, what is the the pressure of different touch points on safari? And then if they just laid their phone flat, and they put an item on top of their phone, and they registered the amount of force with that touch? And they kind of figured out how many how many grams or whatever that thing was, which I thought was so cool. Yeah. And then there's like, there's there's game pads as well. There's the pointer events API doesn't seem to encompass gamepad, there's a separate API for using game pads. But I would imagine that like even if I think about like the Wii mote, yeah, the you know, the remote like follows you around, that would probably be encompassed under pointer events as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"15"}},{"id":33,"start":794.67,"end":849.39,"text":"I'm really interested in that. Because one of the projects I did in in school via software called max MSP was using we modes to control like, I was like video manipulation and audio manipulation software that I had written. So I made like, essentially like a drum kit. And then it was rigged up to an audio application Ableton Live. And then if I were to click the V mode trigger, and like whip the Wii mote based on like how hard I whipped it, the accelerometer data would come in, and it would like totally destroy the audio, it was like a really cool thing. And like, sometimes I wish that that stuff was more capable in the browser. So I'm really interested in exploring more of this stuff. And now, you know, maybe potentially getting some of that data. I'm sure someone's written some sort of wrapper API for the infrared data for something like a Wi Fi motor, or joi con or something like that. But I think there's like alternate interfaces are so interesting.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"14"}},{"id":34,"start":849.63,"end":859.98,"text":"Totally, there is web, Bluetooth and web USB, maybe that would be a fun little episode where we each order something that is USB base and try to build something with it. And just in the browser.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"09"}},{"id":35,"start":860.04,"end":861.72,"text":"Yeah, I'd be totally down for that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"20"}},{"id":36,"start":862.83,"end":875.16,"text":"Let's talk about what events we do have here on the pointer events. So there is over which is fired when the pointer device is moved into n elements, test boundaries. And what is hit test.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"22"}},{"id":37,"start":875.16,"end":882.63,"text":"Let me see what seems like more of a mouse based thing or you know, does this pen does it track when the pen is hovering? That's actually an interesting point. I wonder if it does.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"35"}},{"id":38,"start":882.66,"end":931.5,"text":"Yeah, so the hit test is the process the browser used to determine a target element for a pointer event. Typically, this is determined by considering the pointers location, also the visual layout of elements in a document on a screen. I'm not sure I understand what that means. I'll look into it. This is fairly new to me. I've I've always just done in the past, I've coated it with mouse. And then I use the touch events to sort of supplement that and provide a bit of a better experience. But it looks like like I bet once Safari push it ships this thing or using the polyfill. We'll talk about that in a second like this, we won't be writing click events much longer, we're going to be using pointer events. So there's over, enter, down move. So move is what you're tagging. Because it's potential that the the stylist will move over the screen, but you're not actually touching the screen. So that you need to be able to keep track of that, right. Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"42"}},{"id":39,"start":931.55,"end":937.29,"text":"So move move is firing when you're hovering and not when you're clicked down or touched down or on touch?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"31"}},{"id":40,"start":937.32,"end":979.74,"text":"Yeah, well, I would imagine, with a pen, if your pen is close enough to the screen that is registering but not touching the screen, that would fire a move event, I think that would probably fire a move event when you're touching it as well. But you'd have to have a Boolean of if it's down or not, up, cancel pointer out where I guess where you if you were to pull the pull the pen totally away from the actual screen pointer leave. And then there's get pointer capture and lost pointer capture. So it's, it's a lot more complex. events themselves can can be pretty complex. But this gets a lot more complex. In most cases, you probably won't need all of these. But it's it's kind of nice to have a simple API that encompasses all of these different types of inputs.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"37"}},{"id":41,"start":979.86,"end":1011.24,"text":"Yeah. And again, I mean, everyone's using new inputs now. And you have to account for that. And one of the cool things is that we know, have to account for them individually as one API, one API, and that I think that's the the dream right there. That's like, there's some cool stuff. I'm really excited about this, because I have an iPad with a pen. And it's like making me want to go do some experiments with this thing and see, yeah, we have this, this pen will interact with this API. Maybe it's worth, like putting together some sort of a playground for this stuff.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"19"}},{"id":42,"start":1011.63,"end":1049.19,"text":"Yeah, because so I've got in my JavaScript 30 course I've got like a canvas demo. And based on how long you're dragging the width of the the canvas painter gets bigger and smaller, and the color of it just changes. Like it goes through the entire rainbow. Yeah. Now I'm thinking like, could you? Could you modify that demo to take in pressure, as well as I don't know some other like, tilt? Because you're telling me or it shows me in the docs here that you can get the tilt of the pen? Yeah, based on what angle? You're tilting the pen. Could you map that to the rainbow and, and change the color based on that? That'd be pretty neat.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"51"}},{"id":43,"start":1049.4,"end":1055.49,"text":"I wish I had more time for just playing around with this stuff. Because that all sounds like a lot of fun. That sounds like a lot. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"29"}},{"id":44,"start":1055.7,"end":1073.97,"text":"you should do like a hackathon day where you just put out a video of a couple things that you would love you've been meaning to try. Yeah, and make a video out of it would be pretty fun. Yeah. Cool. Um, what else about this pointer events? I think that's that's about it. It's pretty simple to understand. I think that Oh, we'll talk about support.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"35"}},{"id":45,"start":1073.97,"end":1120.47,"text":"What is the bummer? support? support? Yeah, it's actually pretty widely supported. And it's in IE 11. It's been in Chrome since like 2016, and Safari, like what's going on safari? Why? Why can't you get this together? Safari does not have support for this. However, there is a polyfill put out by the jQuery team called Pep. Pep stands for pointer events. polyfill. Yeah, thank Yeah, I mean, that makes sense. So unfortunately, it's not in everything, which you would want it to be. But no, it's not in Safari. And even in the like, the future version of Safari on Can I use is read that. So there is some caveats there. I think they're working on support for it. I think you might have a little bit more info on that was,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"53"}},{"id":46,"start":1120.55,"end":1130.57,"text":"yeah, if you go to web webkit.org, you can you can see the status of what they're currently working on. It says in development. So I'd imagine in the next major release of","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"40"}},{"id":47,"start":1130.6,"end":1140.3,"text":"Safari, we'll get it now. Excellent. Here, according to Can I use the next major release of Safari will have it available, but only under an experimental features flag.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"50"}},{"id":48,"start":1140.56,"end":1190.33,"text":"Okay, so that means it's probably just about done. They want to test it out before they push it, which I don't mind because, like, what used to happen is that they would just release it and then or it would be released under like a vendor prefix. Yeah. And then people would implement it and then there'd always be like, a, you have to like it works but so far it does it in a weird way. And and now so what they're doing is they're just like, not releasing it to anyone unless you want to try it. And I think that's a better way to do it. So that it's for sure. solidify by the time it gets into all the browsers. And I don't mind because the the polyfill I've talked to a couple of people actually use this in real client facing projects. And the polyfill have worked just swimmingly, right, it's JavaScript, so you can probably fill up pretty easily. So it's, I think it's probably something that we can start using today. If you are okay with including the polyfill.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"00"}},{"id":49,"start":1190.36,"end":1201.47,"text":"Yeah, yeah, I'm excited. I'm gonna start using it. I'm gonna start trying some stuff out. I'm gonna start getting getting down with some Pen Pen action going on and some interactive stuff here and see how it works. It looks cool. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"50"}},{"id":50,"start":1201.53,"end":1213.68,"text":"I've got the Surface Book here, which has a pen. And I think that that does pressure as well. So that would be maybe over the holidays if I want to have a little fun little fun with it. I'm gonna pull that thing out. A little","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"01"}},{"id":51,"start":1213.68,"end":1217.19,"text":"fun with the pendant surface. I'm done for that. Awesome. Cool. All right, well, I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"13"}},{"id":52,"start":1217.19,"end":1228.34,"text":"think that's it for today. Hopefully you learned a thing or two. If you have any other use cases for pointer events that you have found handy. Make sure you tweet them at syntax FM and we will retweet them so that everyone's knowledge can get bigger.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"17"}},{"id":53,"start":1228.38,"end":1241.3,"text":"Yeah, I want to see some some code demos and examples too. If you've you hack together something that's like fun with this, or if you want to, if this sounds interesting to you go hack together something I want to see some fun examples of what people are doing with this cool stuff.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"28"}},{"id":54,"start":1241.52,"end":1247.22,"text":"Absolutely. All right. That's it for today. Thanks for tuning in and we will catch you later. Please","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"41"}},{"id":55,"start":1249.2,"end":1258.95,"text":"head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"49"}}],[{"id":1,"start":1.319,"end":10.5,"text":"You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":10.529,"end":69.62,"text":"Welcome to syntax and Happy New Year to everybody. I know that our first show of 2019. But it is the episode where we're going to take a look back at what happened in 2018. In the web development world, as well as what are we looking forward to both our own personal goals as well as our predictions for what will happen in 2019. Today's episode is sponsored by two awesome companies. The first is century which is going to track all of your client side and server side errors and exceptions and provide you a whole bunch of data around what happened when this error happened. As well as Manning books. They've got a 40% discount for all of y'all at deals.manning.com. For slash web dev. Today we are spotlighting a book called electron in actions design I get a question about all the time. Do you have an electron course I don't. But this looks like a fantastic book to learn how electron works electron is the would you describe electron now Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":3,"start":70.259,"end":114.66,"text":"electron is basically a way that you can publish desktop apps for both Mac Linux windows, whatever via the front end tools that we know and love like JavaScript and node j s. Well, I guess no J's is not a front end tool, but JavaScript, HTML, CSS, that sort of stuff to build actual legit applications. What's awesome about electron is that you can reuse components that you've built and things like that and react and, and oftentimes it makes having a web app and turn into a desktop app very, very easy. I love electron. It's one of those things that we often maybe talk a little bit about sometimes is like, maybe these apps are eating up the CPU or something like that. But a well made electron app is a well made app. I mean, VS code is is proof of that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"10"}},{"id":4,"start":114.749,"end":118.74,"text":"Yeah. Awesome. So check those out. So How you doing today, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"54"}},{"id":5,"start":119.099,"end":125.85,"text":"I'm doing good drinking water from a giant boot. And I'm loving 2019 living the 2019 life,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"59"}},{"id":6,"start":125.939,"end":131.61,"text":"even though it's still 2018 on our recording this. This is one of the last of that energy, though. I'm","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"05"}},{"id":7,"start":131.61,"end":143.25,"text":"feeling the 2019 energy. Yeah, we're not not just writing the show notes for this. This episode got me really hyped to start this year off, right? How about Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"11"}},{"id":8,"start":143.43,"end":188.759,"text":"yeah, totally. Me too, as well. It's it's nice to like, look back at the year and see everything that you've accomplished, as well as where we've moved as an industry in general, in webphone. I look back at the last year's version of this episode. And I was just looking at like, it was very like, not early days, but a lot of people were starting to notice things like next and Gatsby and one of our predictions was that tooling will get better. And I'm just like, ah, we've read a year is not really all that long. But we've really come a long way in terms of our industry, and just just a year. So let's get on into it. The first one is we're going to talk about what was hot in 2018. We'll take a look back. And then we'll take a look at forward what what looks what 2019 is looking. So you want to kick it off there? Oh, yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"23"}},{"id":9,"start":188.97,"end":290.82,"text":"Yeah. And it's funny, because you I mean, you you just briefly mentioned it. But one of the things that I think was hot in 2018 was just really that tooling overall got a lot better. I mean, everything from mean, you think about even the improvements to things like create react app, and view csli. Next JS Gatsby parcel Webpack. For made it configurations easier to get started. I mean, there's just so many things built around this that have just again, like we even predicted, and we said that this kind of stuff would happen. Because you know, honestly, you don't need to write Webpack config from scratch for every single project, right? I mean, you've probably written one. And sometimes this stuff can be abstracted out into its own ideas or platforms, like create react app. And these, these things have totally grown in 2018 and even grown within themselves and just improved, improved, improved. And we recently just saw the crate react app to come out, which made a lot of things a little bit nicer and easier for everyone. So this was a big theme, I think, in 2018. And the amount of time that I spent about tooling is gotten way, way less than and many times now when I'm starting a project or even like maybe a quick code example or something like this. I do one of two things. I either just fire a parcel, because it's superduper easy. You just include a file and then it just starts doing its thing or I had to an online platform like code sandbox or something like that, and just fired up there. But almost never Am I thinking about tooling to start a project. Or maybe even it's Gatsby, I guess the most sites I did for client work or for myself this year was in Gatsby. And again, you're not thinking about the tooling there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"03","ss":"08"}},{"id":10,"start":290.999,"end":389.1,"text":"Yeah, I'm just thinking back to everything I built this year and I did a workshop on progressive web apps that use parcel I built a bunch of sites using next JS I'm starting my own Gatsby base site right now, I don't think that I wrote an entire line of a config, I probably wrote a little bit of Babel config here or there. Yeah, I did write a little bit of Babel config in my advanced react course. But like, I think that was one of the hugest groans and pain points. I remember saying, like, near the start of this podcast, it's gonna get better. There's no reason why we should have to be writing this every single time we started an application. And it definitely has gotten gotten way easier. Even what pack itself is moving towards the sort of zero config thing where you don't necessarily need to be able to write these things. I'm so excited to just look back and say, like, wow, this stuff is so much easier than it used to be. And it's only getting easier, even like Babel with the preset envy. No, that's probably not this year. But that makes it really, really, really simple parcel parcel is just over a year old now. And it's making things really simple. They're doing some really cool code splitting stuff with parcel two that is going to be coming out. So I think even looking forward into 2019, this stuff is just going to get more powerful. Because I think they've they've reached the easy, and now they're looking at like what can we do to make things more more powerful, because I know, Dan Abramov has been tweeting some stuff with the what was it his like hot reloading, and whatnot. He's He's reworking how that stuff works to work with react hooks. So it's a good time to be alive, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"50"}},{"id":11,"start":389.58,"end":485.76,"text":"Yeah, I know. And then, man, everything. It's almost like you wake up every day, and it gets better, better and better and better. And by the end of the year, you look back, and you're like, Wow, I can't believe how many things have improved or grown. I mean, as even as we're talking or whatever, I'm adding things to this list that we have here already. Because it's like something else pops into my brain, right? I mean, things are just constantly getting better. And one of those things, I think that got better in 2018 was graph QL. Overall, I mean, yeah, it got easier, it got more accessible to pick up and just start experimenting with more graph qL API's exist now. So there's more that you can can play with, if you just want to try it out. platforms like Apollo just continue to evolve and impress like, Apollo has just continued to see growth. And and that's one of those things I'm excited for this year is to see even, you know, the continued growth there. And then that world, but also, I mean, you mentioned that you're doing a Gatsby site, I did a lot of Gatsby, this this year, Gatsby really made graph qL accessible, I could imagine that a Gatsby sites were maybe a lot of people's first experience with graph qL because he to build a Gatsby site, you don't need to use graph qL at all, you can do use it with the React stuffs and some static data, whatever is in there, and it works and build your site. But maybe you want to try out querying on a graph qL API with a markdown file or something like that. And Gatsby makes it super duper easy to get started with that. So these kind of tools, I think, just made Gatsby, you know, into the or not Gatsby graph qL into sort of a more usable space for a lot of people.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"29"}},{"id":12,"start":485.97,"end":526.669,"text":"Yeah, absolutely. I think because Gatsby doesn't require you to implement the API yourself, or implement resolvers or have to tangle with authentication. Yeah, it's it's just a query, you're just pulling data. I think that's really cool. I also have become a big fan of the graph. qL playground. Yeah. Which is like, it's like graph qL graph. Cool. How do you say that, like the graphical graph, graphical. It's like the graphical interface that you get with any graph qL instance. But this has a much nicer interface to work with it. You can have tabs, so you can save older queries. It's just such a nice little I have a desktop app installed. Anytime I'm working with graph QL. I boot that thing up? And","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"05"}},{"id":13,"start":526.669,"end":550.74,"text":"yeah, I don't like the off off piece of that, though. Like with graphical. Yeah, in Apollo it like, had my auth tokens set up automatically. And like, No, I have to do it manually. And then, like, I have to do it each time I open graph. Oh, yeah. The only downside for me the interface and the saving all that stuff is great. But I wish it auto had my auth token in there just like graphical did.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"46"}},{"id":14,"start":550.86,"end":559.26,"text":"Yeah, that would be That's true. Because anytime I have to do that, I have to take my tokens and paste them into the HTTP headers, which is annoying. Yeah, if you want to do that,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"10"}},{"id":15,"start":559.35,"end":609.919,"text":"Yep. Yep. One of the other cool things in this space has been graph qL companies, especially ones that are doing maybe like API's as a service, and making this data available via graph. QL. So then, just like we mentioned before, with like Gatsby, you don't have to write your resolvers and mutations and stuff like that. You don't have to set up some sort of graph qL API. So these services like Hasura Prisma, take shape graph, CMS content vault has a graph qL API coming out. A lot of this stuff. I think this space is has been growing and you know, in my predictions for 2019 I think it's gonna continue to grow in this space, but really just making it super easy. We're easy to set up sort of a back end for these modern sites, and even maybe just like build a Gatsby site or something like that. So yeah, these these services have all evolved. And yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"19"}},{"id":16,"start":610.23,"end":628.26,"text":"yeah, I had a note little later on. And then I was gonna talk about it now. But I think this whole, like headless space is so hot right now, a lot of people are taking a look at all of the different platforms, even if it's not like a, like a paid platform. There's lots of open source platforms out there. You hear a lot of people talking about headless WordPress right now as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"10"}},{"id":17,"start":628.279,"end":632.539,"text":"Yep. There's a WordPress graph qL API plugin.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"28"}},{"id":18,"start":632.76,"end":682.799,"text":"Yeah. And it works well with advanced custom fields, which is a plugin that a lot of WordPress developers use to create the interfaces and have existing data stuck in it. So it's just like a really cool space. Because I think people are, it's no longer that you build your app in like a server rendered. And then you use react to just like, kind of add additional things are starting to see people say like, I really like this experience of building in view, or in react or whatever. And I'm going to move totally over to the headless, which is, you write your front end in react or view or whatever. And then you just talk to an API on the back end. It's any number of these the headless spaces, even just from the sponsors on our podcast, you can tell that there are plenty of companies that know that this this area is becoming a real hot.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"32"}},{"id":19,"start":683.1,"end":742.11,"text":"Yeah, absolutely. Also, I mean, another thing that, you know, has gotten evolved is CSS. I mean, CSS is always evolving. And I think in the last episode, you mentioned about that CSS is awesome mug, that's actually correct. Instead of the one where it's out of the thing. I think CSS got more more awesome. I mean, more awesome inside of the actual box. I mean, for one more people are using grid than ever before, which is no surprise, considering grid just continues to sort of become more and more useful as the browser support becomes, you know, more acceptable to be using grid. Now, I've been using grid significantly in 2018. And I personally, I just, I look forward to the day where every single person can reach for grid as the main tool and not even think about anything else other than maybe Flexbox for when Flexbox is appropriate. But I think grid is one of those things that grew in 2018. And every single subsequent year until, you know,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"23"}},{"id":20,"start":742.14,"end":743.07,"text":"yeah, yeah, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"22"}},{"id":21,"start":743.07,"end":745.77,"text":"think grid is just gonna keep keep on that rise.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"23"}},{"id":22,"start":745.8,"end":795.6,"text":"Yeah, I can add some context to this just because in like, November, December of last year, I was finishing up my grid course. And then I released my grid course in January of this year. And when I was building it, it was mostly like a future tech kind of thing. When I released it, at that time, it was still a lot of people saying like, Okay, this is great. I can't wait to use it. I learned it, but I'm not like using it in production. And then now at the end of the year, I'm seeing lots of websites, lots of people say, Okay, I'm using this in production. Now this is actually something I'm able to move ahead. It's totally based on on browser support, I guess as well as people learning it as well. Being able to, to move away from we talked about the people using existing grids based on bootstrap, or people that have had been using Flexbox as a sort of stopgap until we got full grid support.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"25"}},{"id":23,"start":795.809,"end":809.7,"text":"Yeah. And I would imagine, once you get a taste of grid, if you are able to use it, you're gonna be using it because it is imminent, that positive of a developer experience that once you use it, and you're able to continue to use it. I think it's hard to put it down.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"15"}},{"id":24,"start":809.76,"end":821.429,"text":"Yeah, totally. I think like if you were to sum up the hotness words of 2018, I would probably say grid isn't there. I would probably say graph qL is in there. I probably say Gatsby is in there,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"29"}},{"id":25,"start":821.61,"end":828.24,"text":"dude. Geez, were his deed out. 20 feet out. Graph QL. Gatsby grid.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"41"}},{"id":26,"start":830.039,"end":832.98,"text":"The GTE out 2018. That's exciting.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"50"}},{"id":27,"start":833.19,"end":935.1,"text":"So just like a grid. Another thing that once you try it, you're not going to want to stop using it is sentry@sentry.io. Now Wes and I both use Sentry to track all of our bugs. And let me tell you why. Because once you have that visibility into the things that are happening in your code, it's hard to live without it. In fact, Sentry gives me so many visuals is like what's happening? What are the bugs? What do I need to resolve? What do I need to keep track of Sentry has it all right there for you in a big table showing you when these bugs last occurred, you can look at the last bugs in the last few hours or even the last couple of days and stuff like that, and really get an amazing glimpse into what's happening in your application. And so much so that, well once you start having things published without a system like century, then you start worrying about all of the things that could potentially be happening. Maybe it's these bugs here or there that you're going under the rug. And while the last thing you want is your customers to be the first ones to tell you about a bug so if you want to check out century and we highly recommend you do head on over to century dot o and sign up using the coupon code tasty treat all one word, all lowercase, and you will get two months free. So please do that those two months are enough to convince you trust me. So sign up sentry.io tasty treat as the coupon code, get those two months free and see why we can't live without century letting us know where our bugs are. So okay, so this was the CSS world. What are some more stuff that happened in 2018? Specifically react because react had a big year in 2018?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"53"}},{"id":28,"start":935.37,"end":947.07,"text":"Yeah, I was just looking back at the React blog to see what fell in in 2018. And what was before that, because even if you look at things like, we got fragments was that in this year, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"35"}},{"id":29,"start":947.07,"end":956.01,"text":"think it was, I don't I don't even know at this point. I know, React is just been a steady stream of improvements totally a couple of years.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"47"}},{"id":30,"start":956.01,"end":1032.3,"text":"I'm gonna say we got fragments just because we got Babel Babel seven this year. And that's when the easy use of fragments came out. That was great, the big two that we got. And as of recording, this, the hooks is currently being approved. So it's going to come to react. So it's not, it's kind of just a tail end thing. We'll probably talk about this next year on our year in review of, we finally got hooks, and now we are actually using it. And then the other one that was announced, but it's still not rolled out yet still being cooked is suspense. So hooks was the new API that allows you to use state allows you to use contacts, it allows you to do side effects and things like component will mount component did update and component will unmount without having to use a class. So you can just use a regular function, it allows you to sort of disassociate a lot of your stateful logic from your classes and just put them into their own own little hooks, which is nice. It makes sharing things like stateless stateful logic and any any other logic that you have, it makes it sharing it with the other components much easier. What that means is that we are going to see a lot less of high order components, and a lot less of render props. And of course, a lot less of actually seeing classes.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"56"}},{"id":31,"start":1032.54,"end":1059,"text":"Yeah, and I don't know how much you got to use hooks this year, but I've been using them. And I love them, I absolutely love them. And it doesn't seem like a huge change on the surface. But I would say the cleanliness and just the visual of my code, the readability of my code, the organization of it, the ability to break things out, and things like that have just gotten so much better. I am just I'm totally sold. I'm very, very much.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"12"}},{"id":32,"start":1059.48,"end":1089.27,"text":"I've used them in probably three or four different situations. And I wrote one little custom hook that was listening for a web socket on Mount, updating the WebSocket when change and listening when it was unmounted and had its own internal state inside of that hook. And I just all tightened it up into this nice little thing called use socket. And then that gave me that just pipe to me state whenever the data changed. And I was like, This is tidy. I like this a lot.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"39"}},{"id":33,"start":1089.42,"end":1097.04,"text":"Yeah, it's like Lego pieces for functionality, like totally like components where or, you know, just structure and things like that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"09"}},{"id":34,"start":1097.88,"end":1152.86,"text":"suspense, maybe we should explain what that is, we haven't even had a show on react suspense just yet, because it's still I've had a talk twice on react suspense. And both times I've had to have some major updates to how it works. But the idea behind suspense was or is that you're able to suspend the render of a component based on fetching a synchronous data, as well as being able to disassociate where you fetch data from where you show your loading screen. So generally, your loaders and your fetching data tend to happen in the same place unless you have some weird pub sub set up. And suspense is going to allow higher components to be able to know when its children are fetching data, loading images, loading code, split bundles, it's pretty neat. I haven't used it's still like very, very early days for this, I would I would expect that we probably will get suspense in March, April of 2019.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"17"}},{"id":35,"start":1153.05,"end":1184.94,"text":"Yeah. And I'm really excited for server side rendering with it, because that's the that's the one piece, you know, I can't touch any of this stuff on the level up codebase until, you know, full server side rendering picture is there and stuff like that. So I'm really excited for the full release of all these things, and, and really interested to see is how they make server side rendering different or easier or whatever. I mean, things like suspense with code splitting, plus hooks. I'm just feeling like, yeah, this was a pretty sweet year for react announcements.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"13"}},{"id":36,"start":1185.15,"end":1219.02,"text":"Yeah, I'm excited to see what it's going to do to next j s. Because next .js currently has this get initial props lifecycle method that you can fetch on the server, and that's in a sink, but it's only at the page level and if you have a component that is seven, eight, levels deep that you need to like fetch data in for server side rendering, it's a bit of a pain, you have to walk the entire component tree and find any promises inside of that. And suspense is going to do that for you under the hood. So I expect that get initial props is going to be greatly simplified and much more powerful in next. Yes,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"45"}},{"id":37,"start":1219.26,"end":1294.98,"text":"yeah, cool. Another thing that we saw was a lot of improvement in the React dev tools, which is, it's a low key underrated thing. You know, when when something has very good dev tools, it always makes your life so much easier. And the fact that the React Dev Tools aren't like stagnating on sort of staying the same as the React dev tools are sort of constantly finding ways to make themselves more useful to you. And one of those things that that came out in that regard was the profiler, which is sort of like a way that you can look more deeply into how your react components are performing how they're taking a time, the sort of hold tree, what that kind of graph called is that called a flame flame. Yeah, flame chart. So the flame chart, just like you have in sort of Chrome dev tools to check the performance of your site in general, but it's all react based, React specific and really, really gives you just an insane amount of visibility to solve maybe one of those lingering slowdowns or something that you're trying to figure out where the heck, this slowdown or this issue is happening. So I'm, I'm just, I don't know, I'm so happy with how the React ecosystem has evolved in all sorts of ways. And again, the dev tools have just made it easier and easier and easier to that was","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"19"}},{"id":38,"start":1294.98,"end":1360.71,"text":"so cool, I was looking into what they do, and they show you what caused a trigger. So it'll tell you which piece of state or which problem triggers a rerender, and how long that took. And it's not something you're going to use every day. But you better bet when you hit a really weird bug that's crashing your app, or is causing a leggy interface that's gonna really help you out. We also got the new context API. So context API was solidified in 2018, meaning that we no longer have the older context API that we have, we have the new context API, which allows you to define data in updaters. And anything you want higher, and then access it lower, along with react hooks, this is going to make accessing data anywhere throughout your application much easier. So I think it's funny because we look at all of these things, hooks, suspense, Dev Tools and Contacts API, and they all are focused on both, I guess they're focused both on developer experience, they make our lives easier, but also it makes things better applications at the end of the day, because you're gonna have better performance and better UI specifically in the suspense stuff.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"34"}},{"id":39,"start":1360.98,"end":1445.16,"text":"Yeah, better applications easier. If one of those changes to hooks, well, not changes to hooks, but part of the thing with hooks in the context API, I think that's gonna make way more likely for me to use the context API because well, it's a little bit more, I don't know, it's a little bit more succinct than the render prop method and stuff like that. Not to mention, I was doing most of my state in Apollo. But this actually kind of looks very, very streamlined with with the new hooks context. So let's talk about JavaScript frameworks overall. Now, because we do primarily talk about react on the show. But there's been a lot of involvement, or even evolution in a lot of these other frameworks. For instance, svelte, in particular, I think, has been making a lot of noise, you saw it on the state of JS survey, where it showed up as the number one JavaScript framework that didn't like that was the write in candidate. So it was written in and it had the most votes. So speld, I think, is one of these cool things, if you don't know about it, it's basically a JavaScript front end framework that disappears on compilation. So instead of shipping the library every single time, you just ship a code. And the framework itself compiles away. And this is like, compounded when you do things like code splitting, because now when you have a new bundle coming in, it's just that that bundle and not the bundle with the library and all sorts of stuff. So spelt, I think, is one of those ones to keep an eye on in the future. But I think the noise that it made in 2018, is enough to definitely pay attention.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"40"}},{"id":40,"start":1445.46,"end":1503.18,"text":"Yeah, I think also view continue to impress and evolve, it's just getting more and more popular is seeing people that are just like betting their careers on it, which is really cool. It's It's It's I think, like the two big frameworks, now our reactive view, at the moment that might change in a year from now, obviously, there's still lots of other frameworks out there, a lot of people still using Ember, Angular, things like that, but view really, they like sort of came out of nowhere last year, and then this year, it's just like, super strong, super, super evolving. And you see a lot of like, really competent developers putting their weight behind it. What else happened in JavaScript frameworks, I'm just thinking about what the server side look like. And I think it stayed like fairly tame. A lot of there's a lot, no tools around graph qL, but a lot of the stuff is still just based on express that was kind of cool to see not not a whole lot of thrashing. In that we'll talk a little bit more about this. server side stuff in our predictions, though, for coming years.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"05"}},{"id":41,"start":1503.45,"end":1543.65,"text":"Yeah, there's a few look sort of oddball things that happened just recently, even well, Microsoft, who was impressing with the Edge browser as well, they just announced that well, they're going to be moving to Chrome based engine instead of what was the one previously called, I forget what it was called. I'm blanking on it. But they're moving to a chromium based system now making it so that essentially, Firefox is really the only player who's not. And for better or for worse, you know, it's gonna make things maybe a little bit easier to think about maybe compatibility wise. But in the same regard, it's definitely said that there's less competition.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"03"}},{"id":42,"start":1543.89,"end":1621.71,"text":"Yeah, that was a bit of a weird one that I didn't see that coming at all. And it's interesting. So for those who maybe didn't hear is that they're going to take the engine out of Microsoft Internet Explorer, and just use the engine from Chrome, which is what happened to opera, what maybe like five or six years ago, and then just couldn't couldn't compete or couldn't keep up with it. And like the like, I don't know, web developer in me is goes, like Scott said, I'm a bit sad that there's less competition. But also, all of the browsers will still take part in the standards progress. It's not like everything is just going to be chrome and Google has, Google has the control over what the web does. Now, there still is a full standards process for that. And all of the browsers are still like, Microsoft still cares about what happens to the internet and what happens to web browsers because it's a major building block of their operating system. So they they care that I don't know, like web payments, make it in or they care that web USB makes it in or whatever it is, is going to be happening. So I don't sweating at all that much. Like part of me is like, Hi, yeah, that sucks. That it there's less competition, but like the actual like, person who writes code in me is going like, Alright, this is good, because now I can finally move ahead and some of these things.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"43"}},{"id":43,"start":1621.89,"end":1672.17,"text":"Yeah, I had that I had the same reaction in that regard. There's some Microsoft actually did a lot this year. I mean, besides VS code, which we'll talk about a little bit, Microsoft did so much stuff. They bought GitHub, which is a big deal. But it turns out that GitHub has, since they've been purchased by Microsoft has been steadily adding a lot of really great features. I mean, every time I open GitHub there, it seems like there's something new, that's something that I feel like people have been asking for whether or not it's referencing issues, sticking issues, that sort of thing, and actions and all sorts of just like new updates. It's actually amazing. So I think a lot of people's concerns about what would happen to GitHub after Microsoft purchased, it can maybe be put to rest a little bit because they seem to be doing fairly well with GitHub so far.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"01"}},{"id":44,"start":1672.35,"end":1742.1,"text":"Yeah. And you know, one thing I'm really excited about is that like, so there's all these things like Microsoft is adopting Chrome, Microsoft bought GitHub, Microsoft has VS code. And then GitHub just bought spectrum vector is the kind of like, chat meets form for developers. And it's really aimed at figuring out why are we all in Slack, and this closed platform that deletes everything, and it's not searchable, and it's kind of a pain in the ass. And it's kind of the best thing we have right now. Other than like, using like a discord, or some Git Git or something like that. So spectrum is looking really promising. I'm still not like hundred percent sold on it. That's why I haven't moved my own slack over to it. But the fact that GitHub bottom means that they're saying, yes, there is a problem for developer communities. The old like PHP, Bolton board is dead. And for some reason, we're all on this proprietary slack platform that is terrible for open information. So looking forward to seeing what GitHub is going to be doing with that, which is pretty cool, because Microsoft bought GitHub, GitHub bought things. So maybe we're gonna have paperclip in","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"52"}},{"id":45,"start":1743.45,"end":1765.56,"text":"spectrum Pretty soon, we can only hope. We also have in VS code also saw a ton of updates. I mean, we sort of briefly talked about this, but VS code, has she gotten better offer, I look forward to the monthly updates, and I'm on the insiders build. So I'm getting them very frequently. But every single time that that changelog comes out, I think everybody is like psyched to see all of the improvements that happened to VS code constantly.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"03"}},{"id":46,"start":1765.59,"end":1783.05,"text":"I cannot believe how quick they are putting it it's almost overwhelming. I'm like, Oh, it's been a month already. How are they putting out this much amazing stuff. And at the same time, the editor is getting like faster and better. It's not like they're adding more features and it's getting bogged down. It's unreal. It is","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"25"}},{"id":47,"start":1783.17,"end":1820.36,"text":"it is very unreal. It's it's just getting better and better and better. And I think that's going to continue I think there's there's no reason to think that VS code won't just continue to grow and in 2019 and if you want to continue to evolve in 2019, you're gonna want to head on over to deals.manning.com Ford slash web dev. And what you're gonna get is 40% off every book or video course. And that includes a video course on electron intent. vs. Code is built in electron and it is one of the very best electron apps out there. So with more about this deal, this sick deal is with bots.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"43"}},{"id":48,"start":1820.88,"end":1868.82,"text":"Yeah, so they've got all of their books and courses on 40% off with the code syntax 40. I'm going to spotlight a book from Steve Kinney called electron in action, it's going to show you everything you need to know to learn how to build electron applications. It looks like you can learn how to work with multiple windows, building a notes application, using native file style dialogues and facilitating their inter process communication, testing the application having a tray module menu bar library, pretty nifty. I think it's so cool that if you know JavaScript, you can both build a server application, you can build a client side application and you can build mobile applications and now you can with electron you can build desktop applications, which is super cool. I think I'm gonna check this one out myself. Maybe over the holidays.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"30","ss":"20"}},{"id":49,"start":1868.85,"end":1878.96,"text":"Yeah, you should because Steve Kinney is excellent. He's the organizer of the dinosaur JS conference, which is like one of the greatest conferences I've ever been to so Steve's a really cool guy.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"31","ss":"08"}},{"id":50,"start":1879.17,"end":1897.47,"text":"Oh, awesome. just sent a follow on Twitter he Steve Kenny on Twitter if you want to follow for more about electron so check that out. If you are interested in electron again as deals dot Manning comm forward slash web dev, use the code syntax 40. All one word for 40%. off at checkout. Thanks so much to Manning for sponsoring.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"31","ss":"19"}},{"id":51,"start":1897.8,"end":1947.39,"text":"Nice, cool. So let's keep this rolling into 2019. What are our predictions for 2019? We're gonna see how good we do at the end of the year, maybe? I think that a lot of these predictions, I don't know if you've listened to the rest of this episode are going to be fairly obvious. I think the headless CMS game Personally, I think this is going to get really real in 2019. I think this is one of those things that's just going to continue to evolve not only the platforms that are already existing, but I think more people will throw their hat into the ring, I think there's going to be more platforms that are built and designed for headless CMS stuff that are going to make it easy to just host an API somewhere and just fire up a static site or even a dynamic site or something like that. And I think this is just something that's going to continue to get more and more competitive.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"31","ss":"37"}},{"id":52,"start":1947.6,"end":1994.43,"text":"Yeah, I totally agree. I think also, we're going to see major leaps in the like rails for JavaScript, where you just like install this thing. And it comes with authentication and file uploading, or like the Laravel for for JavaScript, we're probably gonna see. So we had Sasha, on talking about Vulcan j. s, seems like Keystone is actually working on some stuff. Well, there's a couple other players in the space that are looking at the sort of like, you just like have an app with all of the things that you're most people have, like most notably authentication systems, file, uploading interfaces, rolls, you get the point, right. So I'm excited to see where that goes. Because that's been something I've been talking about on this podcast for probably a whole year where I hope that we will see it in the near future.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"27"}},{"id":53,"start":1994.67,"end":2036.55,"text":"Yeah, and I think, from what we've seen so far in react over the past year, and what's already been announced, concerning there's just a ton of stuff that have been announced that's not going to be released until 2019. And a full capacity, I think react is obviously going to continue to see a ton of growth. And the changes that are coming in react are just going to make everyone's life better for whether that's with suspense and code splitting. And the hooks are going to make the initial onboarding and learning process easier for people, I think react is going to continue to see growth. I think, again, all of these, these additions to react are going to just show how excellent and how evolved, that continues to be.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"14"}},{"id":54,"start":2036.64,"end":2085.38,"text":"I also think developer experience will continue to get better. We're seeing this a lot, even in this year, where via build tools, as well as the API's that we're seeing and things like react are getting much easier for developers, I think we're hearing a lot more groaning or a lot less groaning sorry, we saw in the state of jazz, that people are overall happier with where JavaScript is at right now. So we'll probably see that I think that CSS and JS people will still be complaining about how CSS works. I logged on to Twitter this weekend. And it's funny, like probably three times over the last couple of months. I've logged on to Twitter and the on a weekend and people are just fighting about CSS. And they're like a huge thing, where people take time out of their weekend to talk about it, whether they hate or love, CSS and js.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"33","ss":"56"}},{"id":55,"start":2085.92,"end":2096.21,"text":"Yeah, right people, people who write CSS and JS don't know CSS doesn't want to embrace the CAT scan. There's just so many stupid arguments on both. Yeah, so just do do what makes you productive.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"34","ss":"45"}},{"id":56,"start":2096.48,"end":2106.38,"text":"I will predict that people will still be whining about it. And I think if you Have a productive 2019. Stop whining about it and just pick one and don't fight the people on the other side.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"34","ss":"56"}},{"id":57,"start":2107.35,"end":2109.27,"text":"I think you are absolutely correct.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"07"}},{"id":58,"start":2109.57,"end":2111.4,"text":"Yes. What else do you think's gonna happen?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"09"}},{"id":59,"start":2111.58,"end":2181.86,"text":"I think some of the things that we talked about earlier in this year with design tools, I think, design tools are going to get more code he. And we've seen this from things like framer x, more recently, there's been a new hot one, that's a Kickstarter called modules, that is very react based. And they actually look to be more than just react based. But they're sort of these like design tools that are going to make code prototyping really easy. Maybe it's a design tool that spits out react or accept react components and allows them to be inserted into the design. Again, I think there's going to be some major advancements in this space, we did predict that it was going to get more Cody last year, and it certainly did. So I think that's just going to keep on continuing to happen. I think platforms like figma are gonna just continue to improve constantly figma in the same regard, like VS code is one of those things where every single month, there's just some crazy new feature that you've been asking for, or other platforms don't have yet. Or maybe it's some other platforms, hot new feature, and figma is just like, Oh, yeah, we can add that too. Hold on one sec, you know. So that's one of those platforms, I think that's just going to keep on evolving.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"11"}},{"id":60,"start":2182.19,"end":2207.55,"text":"That's exciting. One thing I hope we will see in 2019 is ESX modules in node. So it's probably been at least two, two and a half years of people looking at how do we get the import style from regular JavaScript into node, which is currently on common j. s. I know that there are tools out there, but there has not been a five a finalized spec of what that will look like. So I'm excited to see if that gets resolved this year.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"22"}},{"id":61,"start":2208,"end":2229.9,"text":"That's one of those things that I've always loved about Meteor is that your Babel config is the same on server and front end. So they've had imports imports forever. Yeah, forever and ever and ever. And so I've almost like not never, but in the past, I don't even know how many years I like don't write require ever just because I don't have to I think the first time I wrote requiring a long time was when I was doing my electron course. And I was just like,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"48"}},{"id":62,"start":2229.96,"end":2238.21,"text":"Oh, yeah. When you do a Gatsby site, and you write your Gatsby node, you have a transpiler on that. Oh, no, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"09"}},{"id":63,"start":2238.21,"end":2241.92,"text":"use require I use require there. But that's only what you're requiring,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"18"}},{"id":64,"start":2242.17,"end":2296.38,"text":"like three or four things or it's like in the in the starter file are ready. So you don't need to require yourself you right? Yeah, yeah, totally. And Gatsby does a lot of the the requiring for you when you you just specify which plugins you want. So I'm excited. I know it's such a small thing. But it's it's such a huge decision in the industry. I'm so excited to stop accidentally importing things in my note and just stick with one forever. And then also a one thing I hope we see is the server side hot reloading. Yes, it hasn't gotten a lot of love. I think it's just technically very hard to actually do. But the fact that I need to still need to restart my server, even like I was doing some Gatsby stuff the other day, and I'm writing custom, like create pages and custom imports. And every time I change something in how that works, I manually killed the server myself. And then I was gonna write like a node mon to watch that file, and then rerun Gatsby develop. But I hope that that whole server side hot reloading gets a lot easier in the future.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"22"}},{"id":65,"start":2296.65,"end":2376.23,"text":"Yeah, that's a good one. I think I'm also hoping for that as well. I think in 2019, I think we're going to see more wasum stuff, webassembly, whatever that looks like. I'm not quite sure yet. But I think we've seen enough of it in 2018, to know that it's just going to continue to improve and grow in all sorts of different directions. I mean, you can now have all sorts of different libraries integrated into your your JavaScript code, or your node cord, you could have a rest module or something converted to gasm. And used right in your project. I mean, I think there's going to be a lot of growth in that department as well, that should be superduper. Interesting for all of us. I also think code splitting is one of those things, that's going to get easier. And we've already seen the effort made in react. But I think overall, it's so easy to write a application right now that does not code split and serves this giant bundle. And while that isn't great, it's just so easy that so many people find themselves just doing it and not even thinking about it. So I would love to see code splitting just get easier and easier and easier. And that's one of the things that we're obviously seeing with react right now and how they're they're working with that. But dynamic imports and code splitting, just sort of just making it effortless, would be very, very nice.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"38","ss":"16"}},{"id":66,"start":2376.27,"end":2430.17,"text":"I think you're totally right on that. Like it comes back to the the tools that we've had, I think that we're seeing, not necessarily like developers only care so much about image compression and code splitting and offline mode and they would like these things, but you have to make sure that it's it's actually easy for the developer to implement them and we're seeing like parcel two is going to have a lot of that easy code splitting set up in They're require syntax or sorry, the import syntax will just work like that, which is really cool. It already doesn't and parcel one. Things like yeah, I know we keep saying Gatsby in this thing. But the Gatsby just like makes it work without you actually having to do a whole lot of setup, which is really cool. So no, I totally agree with you. I'm really excited about that for for the next year. I'm really excited to take a look back at this in one year, and say like, Okay, how far did we come for these tooling thing?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"39","ss":"36"}},{"id":67,"start":2430.18,"end":2642.4,"text":"Yeah. Yeah. I mean, because let me tell you, I, I have server side rendering. I have code splitting. And I have Apollo doing all of my data. And let me tell you, that was not easy. That was a lot of work. And it was a lot of frustration. To get all three of those things. It was almost like a triangle of like, you can have two of these things, but not all three. And by the time I got it working, I was just so like, I never want to touch this again, that I'm just hoping that that experience is not something that's perpetuated forward as we continue to improve our tools. Okay, so let's talk a little bit about our own personal reviews. We've done like the tech world reviews. So let's talk about our 2018 and our 2019. Yeah, so 2018 was pretty sick. For me, I released, I think I released why released at least 12 new courses. So that's a lot of videos, each one's like 20 videos long for level up Pro, I feel like I released more content than just that I had some bloggie videos on YouTube, and I had some additional content. But I released a lot of tutorials this year. And because of that my workflow got refined, my videos overall got refined, I got a new higher quality video camera, that shooting 4k, it's excellent, I'm recording screen recording in 4k, I've just overall refined my process and refined the production of my tutorials. So that's always great, because you know, each year goes by you want to continue to make that video content better and better and better if that's what you're doing for a living, right. I also saw major growth in level of tutorials as a platform from not only from how many users are on it, but from the changes to the platform itself, the code got better. using things like Sentry gave me more visibility into my code, that's not an ad, it just did all sorts of things in my platform got better in terms of code, quality code, organization, reliability testing with react testing library, I feel better about my code base right now than I ever have before. And I'm very confident once hooks and suspense and all that stuff comes down the line, it's just going to continue to be better. I also hired my first employee to work on the site. Typically, I'm the only dev on level up tutorials, I've been working on it forever and ever and ever by myself. Now I have a good friend of mine, Eric working on the code base, and he's just been doing an amazing job. So I'm just so psyched for that, because now I don't have to wait for me to be there to do every single little update on this thing, he can go ahead. And he's doing excellent work. So I'm absolutely loving that. And well, I did a lot of stuff. In person for the first time, I'm so used to being behind a video camera, or just a microphone, that I never really reached out and branch off to do conference talks. So I did both my first meetup talks this year, as well as my first conference talks this year. And we even did a live episode of syntax. So I really upped my speaking game in public, which it was actually easier than I was anticipating. Because it turns out when you spend so much time talking in front of a microphone, or just talking in general, it's really not that difficult to make that transition to talking in front of people. It's just a different backdrop that you know, so if I, I was able to improve my talking abilities or whatever. And I was really psyched, how all of my talks went this year, how our live show and this year, it made me feel very confident about doing more talks in the future, which had always been something that sort of well gave me a lot of anxiety overall.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"30"}},{"id":68,"start":2642.73,"end":2820.93,"text":"Wow, productive year for you. I'll go through my 2018 I released two major courses I released my CSS Grid course in I think January and then I also released my advanced react course in I think it was October October November I forget was about a month or two ago, the advanced react course was probably the biggest thing I've ever undertaken in a course just because it was such a new technology everything was changing very quickly. So I was very happy to to get that thing out as well as very happy how well received it's been been doing really well and people are learning a lot about react as well as graph qL and all the services around that was pretty cool. I spent a significant amount of time working on a and planning out a just a JavaScript course. So if you haven't heard yet, probably my next one will be a vanilla or not necessarily vanilla, but just an introduction to JavaScript. And that is the language itself browser API's design patterns. Lots of exercises. I've taken a lot of what I've learned, and what people have really enjoyed in my JavaScript 30 course. And I'm going to say like, Okay, what do people like about that? I've talked to like hundreds of people about like, what were your pain points when you're learning JavaScript? Or what are the holes in the things that are out there right now for beginners to JavaScript. So I spent a lot of time on that I'm still a ways away on that, just because it's, I want it to be like a, like a rock solid resource for learning JavaScript. So that will come out sometime next year, which I'm really excited about. I've delegated a lot to a contractor on my course platform, which is really exciting. And that was cool, because it's not like I'm working less on my platform. But it's just that we can get more features being pushed out. I've continued to work well as an assistant. So I've had a system for probably a year and a half. Now that's working really well. I spoke at lots of conferences, I did lots of workshops. I don't even know how many I did probably spoke at around seven or eight different conferences, I probably did five or six different workshops, which was good. Those take a lot of time. I love doing them, but they take a lot of time to prep for them and make the content. We did a live syntax at jams calm just a couple months ago. That was super fun to do I mess up for the first time. Yes. That was good. Yeah, I, I spent a lot of time this year focusing on my Instagram, continuing to see Twitter is still like the spot where web developers hang out. But I don't like putting all of my eggs in one basket. So I've sort of doubled down on what my Instagram was, I think I grew it 910 thousand people over the last year, which was good. And then I've continued to post my Hot Tips on Twitter. Twitter's still doing super well, for me growing that thing. It's it's just growing at a really good clip right now is seeing a lot of good feedback on the type of content that I've been posting. So that's been been really good. Nice. Yeah. goals for 2019. Let me know what you want me to go through mine and then go through yours? Or should we? Should we make our announcement right now?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"02"}},{"id":69,"start":2821.23,"end":2833.98,"text":"Yes, we each have an announcement that are somewhat Well, not somewhat. They're totally related, but not the same announcement? Well, I guess it is the same announcement. And let's just get it over with we are both having babies","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"01"}},{"id":70,"start":2833.98,"end":2848.59,"text":"together. No. No, so yeah, with our respective partners, we are each expecting a new baby in 2019. Mine is coming late June and yours is coming.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"13"}},{"id":71,"start":2848.89,"end":2850.27,"text":"late May. Yeah, so","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"28"}},{"id":72,"start":2850.27,"end":2863.29,"text":"very close together the girl. That's super exciting. We don't know yet. We're still, we still have to wait a month or two before we can figure out what we will having. But I'm super excited about it. Congratulations to you as well, Scott. Yeah, congratulations,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"30"}},{"id":73,"start":2863.29,"end":2878.86,"text":"man, I am I'm so excited it's gonna be, it's gonna be a fun couple of months for both of us. So we'll see what happens to those episodes of syntax around that, that time, when both of us are sleep deprived, rather than just one of us.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"43"}},{"id":74,"start":2878.89,"end":3138.66,"text":"Yeah, it's gonna be interesting, we might have to pre record a whole bunch before we get overly sleepy. So along with that, I'm planning to take some parental leave. So the one kind of neat thing about working for yourself is that I don't get parental leave from an employer. And we also don't get maternity leave from the government in Canada, I think you get eight months or something like that. I forget what it is. But we don't get either of those because we're self employed. And we don't pay into employment insurance as a choice, which means that we don't get any maternity leave. So we have been just like talking about what that's going to look like. And I think that we're going to take a couple months off myself, we're not totally sure that podcast will obviously still go on. I'm not sure. Like, obviously, I can't totally cut off because I still have a business to run. But I think that there's going to be a couple months there in the summer where where I take off and spend some time with the new family. And we'll probably do some sort of episode about that. Or I'll talk about what that looks like. If you have I know that a lot of people in our industry have taken parental leave as well. If you have any tips for what to do on that. I'd love to hear them. Yeah, what else schools I'm just gonna kind of keep doing what I'm doing over the next year. Everything is working out really well. I've sort of hit a really good spot in in what I'm doing in terms of my free stuff as well as my paid courses. So keep doing that. I've got a new website in the works I've been working on for about a month, I got this nice new logo that I'm super happy with. I am working on a new site and I'm moving over to Mark MDX which is like markdown in JSX. And I know put all of my blog posts and everything on GitHub, so people stop emailing me about spelling mistakes. I told you I'm working on a JavaScript course platform upgrades so I've had probably last like four months have been working on platform upgrades and none of that is live yet just because they are such such a huge change to the back end. It might not look like a whole lot of difference but it's a indication system is doing been reworked, the whole back end is written rewritten in react. So once that goes live, I'm going to be working on like a faster rollout where every commit is just immediately pushed out once it passes the tests, then pass that course wise, I want to do some sort of CSS course, maybe a VS code course more react. I'm not sure what I want to do after the JavaScript course. But I've got some ideas I'll probably have to after my JavaScript course I'll probably have to update my react courses as well. Once suspense and hooks are solidified. Once all the libraries know about hooks people emailed me like the day after hooks was announced and scores Yeah, is your is your course valid for hooks? And I was like, no, that came out yesterday. And it's not finished yet. But once they're all solidified off the update all my courses, so that they use the latest and the greatest, one of my goals is to publish eight YouTube videos. So I always talk about goals being smart goals, and it has to be specific, I didn't do a whole lot on YouTube this year, other than automatically push out my my free courses every every week, as well as I did like a couple little code alongs. But I really like doing that stuff on YouTube. I love doing that sort of informal off the cuff stuff on YouTube, people really like it. And that that's a huge, like growth opportunity for me. I'm at 60,000 followers right now, which is not great. So I'd love to, to grow that into something a little bit more significant. So I think I'll probably spend a little bit more time on on YouTube videos, as well as Instagram. These are like different platforms that I even though I'm comfy. In my Twitter, it's important to know that at some point, and I think even already, people are sick of Twitter, especially with a lot of the the negativity that surrounds Twitter, I know there's a lot of amazing people on Twitter. But there's also just a lot of like arguments and bots and negativity out there and bots. So and just like a lot of like politics and stuff, which you have to pay attention to, but not necessarily your entire day. So I'm going to spend a lot of time focusing on those other platforms to make sure that I still have a bit of a hold on them. Should Twitter go away at some point. So those are my goals, we'll see where they go. I was looking back at my goals for last year. And I definitely didn't hit all of them. But I definitely did have a fantastic year, and I'm very proud of, of what I accomplished.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"58"}},{"id":75,"start":3138.9,"end":3321.75,"text":"Yeah, I mean, if my 2019 can be as productive as my 2018, then I'm doing the right thing. So Mighty 2019 is going to continue to see a lot more courses for me, I mean, that's sort of my bread and butter is making and releasing courses. I probably already have enough courses planned for next year that I could fill out the whole year. But you know me, I like to keep those open ended and evolve as we evolve as we go. So I'm going to be releasing a lot of courses, they're going to continue to get better, just like as they always have. That's the sort of the plan. I think in addition to that you're going to see, I have no like major announcements right now. But you're going to see so none Scott level up tutorials courses, and I think they're going to blow you away, because I am very, very excited about them. And I have no announcements at this second. But when I can announce something, I'm going to be very excited. And maybe one of those is going to line up when I'm on parental leave myself so that I'm not trying to record a course and plan of course, while a newborn is here. So that's going to that's going to happen in 20 2019, I'm going to be releasing some courses that aren't based off of my work, which is going to be really, really exciting for me and also terrifying because the only people who have ever released content for level up tutorials is me and the CO creator of level up tutorials who has since not been active in level tutorials since maybe 2012. So the new territory for me, there's gonna be a ton of platform updates to my code base, there's so many updates that we've been working on that are they're like sort of at a bottleneck that need a little bit more. So there's like maybe like five or six major features that are coming to the level of tutorials code base that are just sort of waiting on a couple of small things to get out. And so I think the early part of 2019 is going to see just an incredible amount of new things and level up tutorials comm I would like to hire more people to work on this site, both front end back end. However, if you are a inexperienced noted developer and if you have even more if you have experience with brain trees API in particular, I'm looking to lighten the amount of stuff that I'm working on server side just because I'd like to focus more on on course content, reach out because I am looking to hire a contractor who's a excellent no developer. Also more free content. I've been you know, I built level tutorials on free content, and it stinks when I don't have the time to do it. So I want to do more free content, both courses, both blog videos, both learning things, stuff that I've picked up here and there, maybe some code bloggie stuff, maybe some you know, level up talks about the news of JavaScript stuff, who knows it's totally open ended, but I'd love to do more frequent That's, that's really part of it more real world teaching sort of stuff. And I'd love to see my code base using hooks and suspense in a real way that make things even better. Because you know, me, I love evolving my codebase. That's pretty much it for me, I'm gonna have a very productive 2019 I'm going to have a new baby girl. And I'm very excited about all of that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"18"}},{"id":76,"start":3321.75,"end":3367.77,"text":"Like it. Yeah. So hopefully you enjoyed this, hopefully you have a very productive and exciting 2019 as well. I'd love to hear what you are hoping to both see in our industry, as well as what you are hoping to do, personally and professionally in 2019. Make sure you tweet at syntax FM, let us know that. I think it's just good to hold yourself accountable, put them out there, and then come back to that tweet a year later and see how you've done. Yeah, if you want more info on setting goals, we have a really good podcast episode number 67. It's called goal setting. And that goes into how we actually set our goals and how we figure out how we're doing and course correction and all that good stuff. So go back to that if you want a little bit a year end your start motivation. Nice. What about sick Peck CMA sick picks, today,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"55","ss":"21"}},{"id":77,"start":3367.919,"end":3479.55,"text":"I have a sick pick. It's this TV show I've been obsessed with. I'm sure a lot of our listeners in the UK are familiar with this show already. But we just got it on Netflix here in the States. And it's only one season on the Netflix. But I have gone out and sought out a lot of the other seasons, because they're available on YouTube very easily. If you just Google it, this show is called fake or fortune. And it is all about art. Someone has a piece of art, and they're trying to figure out whether or not this thing is legit. Maybe it's a famous artist, or maybe it's someone like popular figure, like there's one that I think that was there trying to see if it was painted by Winston Churchill. And what's amazing about this is that this show keeps you on your toes. Regardless of what you think halfway through the show, you might not think that by the end of it, because they do all these different testing methods. They basically approach these works of art that they don't know who created them, or they're not confirmed who created them. And they use all of these different investigative techniques to figure out if this was this particular artist, or maybe it was a fake, or maybe it was someone else entirely. Or maybe it was an assistant who made it or something like that. But the whole point of the show is like forensic techniques, they're doing like science where they're looking at even like the chemicals used in the paint, they're looking at the context, they're looking at just under layers of the paintings to see you know, where the potential origins are, what country was made in, and I'm just like, constantly blown away by the show, because they'll just be like, Okay, well, the paint was this type of chemical and the canvas was this type of Canvas. And the style is this, therefore it must have been painted in this year in Venice. And they're like dead on every single time. It's so good. It's extremely interesting. And I love this show Faker fortune, check it out.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"56","ss":"07"}},{"id":78,"start":3479.55,"end":3523.29,"text":"Like it. I'm gonna pick the heavyweight podcast, it's from gimlet. So you may have heard of it, it's pretty popular. And I was trying to explain it to my wife about like, what it is, it's just goes into people's lives at different point where they had something in their lives that changed their life forever. And whether it's being bullied as a child, or whether it's falling in love. And it's just really interesting. It's so hard for me to describe what it is. But they're just stories of people's lives. And the Jonathan Goldstein, who's the host of the show, does a fantastic job. He's hilarious. So if you're looking for something that is a little bit lighter, even though it's called heavyweight, but just like kind of a light listening, kind of interesting. Check it out. It's called heavyweight.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"57","ss":"59"}},{"id":79,"start":3523.769,"end":3529.44,"text":"If you were to sick pick that first. Before I did mine, I would have picked the movie heavy weights, because that's an awesome movie as well.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"58","ss":"43"}},{"id":80,"start":3531.12,"end":3532.73,"text":"Awesome. Any shameless plugs?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"58","ss":"51"}},{"id":81,"start":3533.01,"end":3572.88,"text":"I have a course coming out. Well, okay, well, this is January, I had of course come out in December on styled components and design system. So if you are interested in potentially arguing about CSS and JS online, you should fire up my my course I don't have a name for it at this point, because we're recording this ahead of time. But again, it's on CSS and j s style components specifically designed systems organization, all that good stuff about what are the benefits, why you might want to use them and how to use them and how to use them organized and well. So check it out, level up tutorials, comm you can sign up at level up tutorials.com forward slash pro and get 25% off that whole year of level up Pro. Thank you so much. So check it out. Sweet.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"58","ss":"53"}},{"id":82,"start":3572.88,"end":3590.82,"text":"I'm sick pick all of my courses at Wes bos.com forward slash courses. If you want to learn anything about JavaScript kick the year off, right? Check it out. And that's it for today. Anything else that's got nothing. Awesome. Thanks so much for tuning in. Have a fantastic year and we will see you in the next one you face.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"32"}},{"id":83,"start":3592.74,"end":3602.46,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player. Drop a review if you like this show","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"52"}}],[{"id":1,"start":0.359,"end":24.48,"text":"Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally at ski.","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":25.89,"end":68.76,"text":"Welcome to syntax and this Monday heastie treat, we're gonna be talking about CSS units. And we're gonna be talking a lot about different units in CSS, most of what you've probably heard of, but we're going to be talking a little bit about when and why you might want to be using some of these things, upsides, downsides, tips and tricks, all sorts of stuff. And it's going to be a lot of fun, because CSS units is really one of the most used things in styling your website if you think about it, because well, how many times do you use anything without a unit. So these units are going to be very important to how your CSS scales and how it works over all. And it's going to be really, really fun now My name is Scott one ski and with me is always is Wes Bos. How you doing?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":3,"start":69.15,"end":70.83,"text":"Doing well doing? Well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"09"}},{"id":4,"start":70.92,"end":149.22,"text":"Nice. This episode is sponsored by Log Rocket. Now head on over to Log rocket.com Ford slash syntax, and you're going to get 14 days free of Log Rocket. And let me tell you a little bit about Log Rocket. This is such a great way to get better visibility into the things that are happening on your website. One of the coolest features about Log Rocket is called session replay. And where you get a pixel perfect video replay of what happened when this bug happened. So a bug happened, you get the error message, you know it exists. But you don't know exactly what user did to trigger this, maybe they Click these buttons in this very specific sequence. And for some reason that sequence is causing you problems. So check it out. The session replay is just an amazing feature for you to get that visibility that you've never had before. Not only that, but it works with things like your Redux state. It shows you the network activity and gives you the council log errors as everything's happening. So if you want complete visibility into your bugs, and you want it to integrate well with all of the tools you know and love like century, check out Log Rocket at Log rocket.com forward slash syntax get 14 days free, super duper, super cool tool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"10"}},{"id":5,"start":149.459,"end":289.07,"text":"All right, so let's get into it. I sent out a tweet the other day, it says I often hear people say that M's aren't used in CSS anymore. And they're still useful. Here's an example. And it went on to give an example of when you might want to use an app. And we'll talk about that in just a second. So I think it's funny that CSS units can become popular in some ways of sizing things can become unpopular, because there's some like new version, it's sometimes you see that with CSS Grid come along, and people say well no longer need Flexbox. And it's like No, these things are added to the language because they solve a specific problem that doesn't make the old things not useful. So we're gonna go into all of the different, not all of them, but a lot of the different units that we have in CSS in when you might want to use them, starting with M's and rems, and what they do. So maybe I'll take a stab at how EMS and rems work. So EMS and rems are both relative units, meaning that when you set a let's use a font size, when you set a font size to two M or two REM, they are going to be two times the size of something else that it is relative to and the difference between EMS and rems is that EMS is always based on the parent that has a font size set on it. And rems is always based on the root, which is your HTML element. So if you set a font size on your HTML element, and anywhere in your application, you set something to be to ram like so let's let's give a simple example of HTML font size 10 pX anywhere in your page that you set something to be to ram, it's going to be 20 pixels. However, with EMS, it's just going to go up the tree much like position absolute works, it's going to go up the tree looking for a parent that has a font size set on it. And a lot of frustration with EMS stems from people are having messy CSS where they've set a font size on a parent. And then they set a font size on like a child inside of that parent. And then they set a font size on like a parent or like a paragraph tag inside of that. So what happens there is you've amplified your your EMS three times to be three times bigger and then people don't understand how EMS work. So that's what they are. I think they're both very, very useful. You want to take a stab at why you might want to use EMS and why you might want to use rems. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"29"}},{"id":6,"start":289.08,"end":353.16,"text":"I mean, largely in the case of EMS, you're going to be wanting to use them in the situation where the size of it needs to be dependent on its container and likewise with rems, where Well, the size of it is going to be, again, like you mentioned relative to the overall document. So rems end up behaving like this thing that can scale based on the body font size, or the HTML font size, but it's a scaling all together, right? There's no sort of relative scaling of any of this stuff, or EMS. Again, it's all based on the container. So if you have something that's self contained, and you change the font size on the container, it's going to change things all the way down, where you're going to be changing it more of like a global thing, maybe you have like a layout style, that's, that's for the entire document. And then maybe via media query, it's changing for the entire document, all of your font sizes jump up just this little much more, rather than changing container based specifically.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"49"}},{"id":7,"start":353.34,"end":439.44,"text":"Yeah, so the examples that I give often are, if you have a component, and inside of that component, you have a heading, and maybe have like a subheading, and maybe you have a bunch of text, then maybe you have like some footer further text, those, all four things need to have different font sizes. And if you ever want to scale up that entire component, you'll need to set the font size on the container. And then every element inside of that is going to be based off of the font size of that container using an M. So I gave an example on Twitter, where I have my headings for all of my new blog redesign are all different sizes, h1, through h6, are all different font sizes, and each one of those has this little like yellow square that's in the top right hand corner, just kind of a design embellishment. And the size of that square needs to scale up and down its width and height based on how big the font size is. And I could set a selector for every single heading tag all six of them and set a different width and height for each one. But what I did is I just set the font size on the h1, h2, h3, and then set the width and the height of each of those to be 0.75 M. And then what that does is as the font size of the heading tag goes up and down the corresponding square Also, you can do this with buttons as well, the corresponding actual element on the page will scale itself up and down without having to manually go in and do that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"53"}},{"id":8,"start":439.52,"end":503.1,"text":"Yeah, one of the main examples that I use for rems, specifically is for things that aren't, they're more global, right, like margin. Yeah. So if you have a vertical rhythm, right vertical rhythm, sort of like a vertical grid, sort of you can think of it as like various lines. And each line takes up this amount of space, whether that's pixels or whatever, right, let's say each line takes up 16 pixels, your fonts are typically going to your text size throughout, the whole thing is always going to line up essentially either on one of those lines in between those lines, whatever it's it's taking up that space to keep that vertical spacing, uniform and organized. So I end up using this a lot for things like margin bottom, where the margin bottom one REM is always going to be equal to essentially one line and my vertical rhythm that way I can do like a margin bottom one REM margin bottom two rooms, and know that it's taking up two lines in my vertical rhythm or one line in my vertical rhythm or something like that, again, because those aren't dependent on the container, those are dependent on the overall vertical rhythm of the document.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"19"}},{"id":9,"start":503.22,"end":533.58,"text":"Yeah, I tend to use rems almost all the time. But I do reach for EMS, when I need a specific use case like the one I I just explained there, which is pretty cool. I did hear from some people on Twitter who the do all of their typography in EMS, I think that's great if you have the like your code is as neat and as clean and you have control over all of your components, setting the font size yourself, but I do know that the EMS can get out of hand pretty quickly when you accidentally have set a font size on two different things and they start to multiply each other.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"23"}},{"id":10,"start":533.73,"end":578.01,"text":"Yeah. And they definitely can confuse newer CSS developers. Definitely. I mean, one of the reasons why they're confusing is because it's difficult to make that conversion if you've been thinking in pixels, right? Like I'm thinking this font is 14 pixels. Well, what the heck is that in M's or rems? I mean, rems is the easier one to figure out because the document, but what is that right? And so a lot of times people pick up this trick where it's setting the HTML font size to 62.5%, the magic percent, that makes one REM equal to 10 pixels. The reason for that is that you can now say 1.6 REM instead of 16 pixels, and your font conversions, if you're moving everything over to M just gets that much easier. Is this something you use or have ever used?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"53"}},{"id":11,"start":578.07,"end":614.58,"text":"Yeah, so I've always just manually set the font size on my HTML to 10 pX, and then that means everything is base 10. And I can easily calculate out from there. But I just googled like, Why do people use 62.5 instead of just manually setting 10 pX and I couldn't find a great answer, but I think the reason is because if the user sets their own font size in their settings. Apparently, this will respect the user's font size and still bump everything up. Whereas if you manually set 10 pX, then it will override the user's font size. So that was interesting. I think I just learned that myself.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"38"}},{"id":12,"start":614.66,"end":641.3,"text":"Yeah. I've only ever seen the 62.5. That makes sense for about the 10 picks. But yeah, just Google that just now and see the same thing. So this is not something I ever really used. I feel like if I need those conversions, I usually just look them up. I don't know why I never really liked this. It seemed kind of weird to me. But at the same regard, it is easier to figure out and if Yeah, if you're wanting to just convert over then it's easy. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"14"}},{"id":13,"start":641.46,"end":651.27,"text":"It's because you're American, and you used to having weird mounts for everything. And I'm Canadian, I'm used to everything being base 10. And making sense. So","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"41"}},{"id":14,"start":651.51,"end":656.76,"text":"we should go, Yeah, like feet, we should get a feet unit and CSS says one,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"51"}},{"id":15,"start":656.88,"end":675.21,"text":"there is interest. We'll talk about that. That's rems and M's extremely helpful to sort your type in it. I also use rems and M's for like Scott said, padding margin, things like that, or I need them to scale up and down the beauty of using rems, let me tell you a little story one minute and tell","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"56"}},{"id":16,"start":675.21,"end":676.5,"text":"you a little story.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"15"}},{"id":17,"start":676.59,"end":724.5,"text":"I had a student once design their entire website when they were accidentally scaled in. So they had to hit command plus, and they zoomed in the website and they built the entire website. So they were adjusting everything to look how they wanted it. But everything was off. And then I they're like my media queries aren't working. And they're not like clicking at the right points. And I was like, Oh, you're probably zoomed in and I zoomed out and the whole website was much tighter. But website, the saving grace was that they had built everything in rems. So all they had to do is change the base font size to be a bit bigger, and everything scaled up. And that's the sort of the beauty of using something like M's or rems is that if you ever want to scale anything up or down, you can just change your base font size, and those things will scale up accordingly. Cool. Well, what about pixels?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"16"}},{"id":18,"start":724.59,"end":784.44,"text":"I was gonna say, in addition to rems and M's there is a lot of other units, including one that is probably the king of units and CSS, as we know in terms of usage, which is the almighty pixel. And I think this one's gotten a bad rap people. Sometimes they want to say don't use pixels or amzer M's or king or whatever pixels. They're still very widely used. And well, I think it's maybe because of what high density displays and things like that people were thinking like, well, maybe we shouldn't be using pixels, because well, now what is 16 pixels isn't 16 pixels before, however, we don't have to worry about that because a pixel in the browser has pretty much become what a device pixel is on something like Android, right? If you've programmed for mobile, you'll know that if you set something to 16 dP, it's not a absolute 16. It's a 16 based on whatever the resolution of that devices. So honestly, we don't have to worry about that too much anymore. And I find myself using pixels somewhat frequently.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"04"}},{"id":19,"start":784.68,"end":840.15,"text":"Yeah, pixels got a bit of a bad rap years ago, because what used to happen is if you someone were to scale up the website, the type would scale up, but the UI wouldn't, and then your whole website would look broken. And that was always the big test, whatever. Now in all browsers, if you scale up a browser, the entire UI of the website, type in background images, and everything will just scale up accordingly. So it's not a big thing anymore. And also, I find it kind of funny how we are all doing just using rems, and setting a base font size and then we just all are mentally calculating how many pixels we want. And then just making that instead of saying 16 pixels, we just say 1.6. REM and Oh, that's nice. You know, it's no different. It's not yourself. Yeah, there's at the end of the day, all of our screens are built in pixels. So pixels are totally fine. Don't feel like you're doing old technology. What about points, points? I've never used points of you","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"04"}},{"id":20,"start":840.15,"end":870.96,"text":"know, I've never used points. But it's always the worst when you get a like a Photoshop file or something from a designer, and the fonts are all in points. And you're just Oh, yeah. Okay. Did they mean these to be in points or pixels or whatever? No, I never, I never ever think about points in web development whatsoever. Yeah, but it's actually one more thing on pixels. If you want to see how frequently pixels are still used in design, I would find any major website, inspect their source, look at their CSS a lot, a lot, a lot, a lot are just using pixels for fonts and all sorts of stuff. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"00"}},{"id":21,"start":871.05,"end":929.46,"text":"yeah, one other thing I'll say is that M's are specifically sometimes better for type than pixels. If you are doing one of those websites where you want to be a let the user increase their font size. Because often if the user is trying to increase it themselves by zooming in, or if they have if you're trying to just increase the root, like the root RAM, often you're like you're merging your padding, sometimes maybe probably not borders, but all of those things are those things also scale up and it's unreal. likely that the user wants to scale up padding in the same accordance that they want to scale up the font size, right? Like they don't need extra padding to be shown. They just need the font size to be a little bit bigger. So it's a little bit more readable. So in that case, I think M's will for sure without word. Yeah. What else do we have here? viewport units. We talked about this in a past episodes, we won't go too far into it. But they allow you to scale based on the height, the width, or the min or the max of those two. It's a percentage of how big the viewport is on your screen.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"31"}},{"id":22,"start":929.58,"end":932.49,"text":"It's my favorite unit. It's my favorite unit. It's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"29"}},{"id":23,"start":932.88,"end":939.18,"text":"10 units for me. We had a really cool like use case for it in the last episode, honestly, yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"32"}},{"id":24,"start":939.18,"end":950.22,"text":"I am still loving that. And in the funny thing is, before I even saw that use case, I was still like, Oh, I got the heart eyes emoji for viewport units. And now that I have that example, it's like double heart eyes emojis.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"39"}},{"id":25,"start":950.43,"end":982.5,"text":"Next we have ch units, which are character units and a one ch is relative to the size of a zero in a font size. So this only really works well with monospace fonts, where all of the characters are the exact same width of each other. But if you ever want something to be exactly if you've ever wanted text to go exactly the width of an actual element, you can use ch units to use that I've only ever used those in fun little demos and never found a real use case for it in production. Let me know if you have though,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"50"}},{"id":26,"start":982.5,"end":993.39,"text":"have you? I have not No, I've never used them. No, I just don't. I never found the reason to use them. Just like I know you. You've recently used an inch unit right? Or an internet centimeter unit.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"22"}},{"id":27,"start":993.51,"end":1034.25,"text":"Yeah, inches and centimeters and millimeters are available as well. Yeah, in print style sheets, if you've ever need something to actually be so I was printing envelopes, which envelopes are physically done in inches. So if you need something to be at the very top right hand corner, like a stamp, you need to position them based on inches. So I size up the page, the whole print CSS world is weird is wild and weird. Yeah, but it's all available for you there. I've never used it in real life, though. I always joke that clients used to come back to me like he moved the logo over an inch. And you have to like kind of be like, oh, there's no inches in Let me pull up","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"33"}},{"id":28,"start":1034.25,"end":1089,"text":"my ruler and hold it up to the screen. What else we got here we have percentages, which are just a famous unit in general, because well when ticularly I mean percentages has been around forever in CSS. But I think the the like the big take off for percentages was when mobile first and mobile web design really came about. And all of a sudden, you were figuring out, well, okay, this div is no longer 960 pixels wide, this div is going to be 75% of its container. And you are doing all that math. I mean, when responsive web development first came out, that was like sort of the big thing it was do math, find the percentage that's your container with float it Alright, do math, find your you know, and in that way we were building fluid designs and fluid designs have been around for a very long time. But now that device screens have been more fluid percentages have been just, you know, a key part of understanding CSS in general for a very long time.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"14"}},{"id":29,"start":1089.42,"end":1094.36,"text":"I have a question for you about media queries. How do you write your media queries when you are trying to write when","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"09"}},{"id":30,"start":1094.6,"end":1127.6,"text":"I write my media queries using an object a JavaScript object? I do above dot med. And then guess what? Above dotnet? is some value whether it's like 960 pixels or something like that. But yeah, value actually gets converted to EMS. Um, let me double check. Let's see breakpoints. Yeah, that is converted to EMS, via division by 16. And so the code that's output into my code base is an end. But I really only think about it as a pixel value. Hmm,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"14"}},{"id":31,"start":1127.7,"end":1161.93,"text":"that's interesting. I do all of my media queries and pixels. I've tried them in AMS. And it confuses me. And you can do them and Rams and seeing all these like obtuse things. And at the end of the day, I understand that I want this thing to be to look this way when the screen is above or below or in between this pixel value, because at the end of the day, our screens are just in pixels. And I've never run into the situation where I want to scale up or down my media queries accordingly. Because I know that's something that they can do. It's just not a use case I've ever actually needed. So I write all of my media queries in pixels. And it's it's worked out well for me.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"47"}},{"id":32,"start":1162.17,"end":1179.32,"text":"Yeah, in fact, I only do that M division, because that's the way the code in the style components documentation was written. And I copied and pasted it. Well, I copied and modified and pasted it, but I didn't modify the damn part. I just don't think about it. Yeah, just don't even think about it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"22"}},{"id":33,"start":1179.51,"end":1197.39,"text":"Yeah, it works. Other units we have are, specifically when we got Flexbox and CSS Grid, we got the flex grow and flex shrink values, which are unitless, which can be very, that's a frustrating thing for people who are picking up Flexbox right, they flex on a container and their image is doing some wonky stuff and","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"39"}},{"id":34,"start":1197.39,"end":1208.04,"text":"they're just like, Yeah, why is this image being split? wished and you need that that flex shrink value of zero or one. It's sort of an interesting property overall.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"57"}},{"id":35,"start":1208.49,"end":1235.46,"text":"Yeah, it's it's a weird one to get your head around, especially because there is no unit, it's just the amount of free space that is left or the amount that are Sorry, sorry, it's not the amount of free space is the amount that it should grow in proportion to the other flex items, or the amount that itself should shrink, according to its siblings. Which is a little bit confusing. It's a bit better in CSS Grid, because we have these fr units, the they're like flexible units, or I like to call them free space units.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"08"}},{"id":36,"start":1235.49,"end":1239.75,"text":"There were a few year unit, this my Rookie of the Year is the FR unit.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"35"}},{"id":37,"start":1239.75,"end":1270.68,"text":"Love it the Oh, yeah, it's so good. So it will take after like when you have CSS Grid after you've divvied up the space that have hard requirements, like if a column has a hard REM m, or pixel or percentage width, or height to them, after that you've got extra space leftover and then and then the extra space will be divided up via the FR unit. So if something has to fr and something has one fr the one that has to fry off twice the amount of the free space, it'll take up two thirds, yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"39"}},{"id":38,"start":1270.68,"end":1277.22,"text":"two thirds of the total space, and the one will take up one third. So you add up all the F RS and then it's a fraction.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"10"}},{"id":39,"start":1277.57,"end":1291.61,"text":"So you can you can do them. I sometimes I do them 100 base just to like kind of think in percentages. So like 50 fr, and 25. fr is 50% and 25%. You can make them as big as you want. Because there's no, there is no basis there. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"17"}},{"id":40,"start":1291.65,"end":1322.1,"text":"I use these constantly. Obviously, they're they're they're very, very useful when doing any sort of grid. Because most of the time, things don't need a hard requirement. They just need this sort of space for this sort of space. And when they do need a hard requirement, you give that pixel that M that ran that value, whatever. Use these fraction units for everything else that needs to grow accordingly. But yeah, these are these are great units. There's a whole bunch of extra units. We never even think of like degrees. And we talked about them in another episode. There's like yeah, radio radians and Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"31"}},{"id":41,"start":1323.87,"end":1331.55,"text":"Have you heard of that? Which one, the x x, the relative relative to the x height of the current font, have never heard of that,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"22","ss":"03"}},{"id":42,"start":1331.73,"end":1341.72,"text":"before? Never heard of it, never used it. And maybe it's just because I'm not typing enough. I need to get my type skills up to have a better understanding of when that would be useful. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"11"}},{"id":43,"start":1341.72,"end":1348.56,"text":"I think that's all the other units that I have. And just looking at it, there's there's a bunch of print ones that are probably not use all that often.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"22","ss":"21"}},{"id":44,"start":1348.56,"end":1367.4,"text":"If you are out there, and you have a favorite obscure CSS unit that you have an interesting use case for, let us know I'm interested in some of these obscure yet and what are the best use cases for them. So if you're using one of these, these interesting ones, let us know league is there. They're fun. And they exist, but I don't necessarily find myself using them ever.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"28"}},{"id":45,"start":1367.94,"end":1422.84,"text":"My favorite was turned turn Yeah, turn turning if you want to turn something like a quarter turn 0.25 turn instead of 90 degrees. And I tweeted that and people were so either so into it are so salty about they're like, why not just calculate the degrees and like that the reason you don't in case? Because like, yeah, how much is a 37%? Turn in degrees? I don't know, was 0.37 times 360. And then round the decimal place that you end up with? Yeah. So it turns out pretty cool. When you aren't thinking in degrees. Just how much of a full turn should it turn itself? Word? Yeah. So I think that's it for today. Let us know your favorite units or whatever or how you like to approach your type and other people that size their type very specifically with EMS and rems, and I'd love to hear how you do it. So tweet us at syntax FM on Twitter.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"22","ss":"47"}},{"id":46,"start":1423.079,"end":1425.03,"text":"Cool. I don't have anything else on CSS units.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"43"}},{"id":47,"start":1425.03,"end":1429.02,"text":"Thanks for tuning in. We'll catch you on the next one. Please","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"45"}},{"id":48,"start":1430.97,"end":1440.75,"text":"head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"50"}}],[{"id":1,"start":1.319,"end":10.53,"text":"You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":10.559,"end":43.74,"text":"Hello everybody and welcome to syntax. This is the podcast with the tastiest web development treats out there. Today's episode is sponsored by two awesome companies. We first we got Kyle Prince Lou's freelancing course which is available at study web development, comm Ford slash freelancing. And we've got dev lifts back to get you in shape for the New Year DevOps that I Oh, they have some special plans running for the month of January. So stay tuned for some more details about that with me as always, today is Scott to Lynskey. How you doing Scott D,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":3,"start":43.769,"end":60.27,"text":"it's a new year to new me, and I'm ready to go. This is gonna be our first episode in a little bit. So we're gonna see how it is. I think we're both pretty highly caffeinated though. So hopefully, is turning out that works for us. Yeah, that gets things going because you know, I'm gonna need it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"43"}},{"id":4,"start":60.329,"end":70.47,"text":"Yeah, absolutely. I'm actually feeling pretty good. I had a nice time off with the holidays and just long enough, and I was like, excited to get back to work. And it still felt pretty good. So that's, that's good.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"00"}},{"id":5,"start":70.529,"end":71.16,"text":"Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"10"}},{"id":6,"start":71.189,"end":99,"text":"All right. So today is a potluck episode. A public episode is where you go to syntax.fm. And you can submit your question to us, and we will attempt to, to answer it for you. And these are always fun, because we go through a whole bunch of different topics and spending just a couple minutes on each one. So today, we've got questions for newbies questions about cron jobs, questions about learning stuff quickly, event tracking, all kinds of stuff. It's gonna be a good one. So let's jump on into it. You wanna grab the first question there, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"11"}},{"id":7,"start":99.089,"end":240.06,"text":"Oh, you bet. First question is, this is from David, no last name here. It says, where's the best place to start with j s coming from WordPress bootstrap scaffold with express or is bootstrap two older now? Okay, so this one is a little bit tough. I wouldn't I wouldn't even necessarily go to bootstrap in general, if I'm looking to learn j s, just because I generally see bootstrap is more of just like a HTML and CSS sort of thing, right? Yeah. So for me, it depends on what you're trying to learn with JavaScript? Are you trying to learn how to build just general little doodads and wickets and things like that, right? If you're just trying to build little things here and there, then, you know, I might take a basic JavaScript sort of training aspect to it and learn sort of the fundamentals of JavaScript. But if you're looking to replace that sort of WordPress flow that you had before building some sites that are maybe for clients in that sort of way, I might take a little different approach to this. And this, I don't know if this isn't necessarily controversial at all. But you know, people tend to say, learn, you know, the foundations first, before you pick up a framework, don't learn the framework until you learn blah, blah, blah. But personally, I've learned quite a bit of JavaScript myself through frameworks specifically react because it's so JavaScript do it now view is pretty JavaScript as well. There's a little bit of magic in there involved. But, you know, if you're trying to replace that WordPress gap, and you want to get some experience with JavaScript, I would honestly pick up react and Gatsby take a basic react course learn, you know, what's doing what, where, and then I would take a Gatsby course. Because gets these really one of those platforms that does eloquently fill the void of WordPress, if you take react and you're not super into it, maybe try a view course, there is a view, comparable version of Gatsby called the grid sum, which is very, very similar, basically borrows all of the ideas from Gatsby. And I personally, I like I like using frameworks to learn JavaScript. Now, I understand that not everybody sees it that way. But I personally learned quite a bit of JavaScript through frameworks. And I don't think it's a bad approach.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"39"}},{"id":8,"start":240.329,"end":332.46,"text":"Yeah, I agree as well. We've said this many times in the podcast where like most people who learn web development and by learning WordPress, they didn't sit around for a year learning PHP, what they did is they they started just sort of hacking away at WordPress, and through that you sort of struggled through and learn the basics of PHP. And I think that the same can be done with JavaScript, not saying that you should not know a line of JavaScript, obviously, do a little bit of fundamentals get kind of comfortable with how things are working, but then reach for one of these like starters that you get with Gatsby as all kinds of starters. And I think through that you can sort of work backwards and you're gonna find it's gonna be frustrating, but you'll find yourself in a lot of situations where you'll say, oh, man, like what is this thing right here and you have to go and learn that or I need to loop over a list of things or I need to combine these two elements into one and I think that's a kind of a neat way at at approaching it. So if that's what you're looking to do, if you're trying to like replace your WordPress, then I would go with that. Otherwise, if you are just looking to like sprinkle on a little bit of JavaScript into your WordPress websites, I would probably go and look at a, like a vanilla JavaScript course out there also have a free one JavaScript thirty.com. There's lots of stuff out there that you can get it get up and running, which is good, because I know a lot of the WordPress plugins are still based on jQuery, which is not necessarily a bad thing. But if you want to be a little bit more future proof, if you want to learn some more modern stuff, I would probably focus on your vanilla JavaScript skills there.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"00"}},{"id":9,"start":332.639,"end":334.59,"text":"Yeah, absolutely. Super cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"32"}},{"id":10,"start":334.709,"end":356.52,"text":"Great. Next question we have from Daniel holick. Just a general question about cron jobs, how to set them up and the best tools to use? Should they run on their own server? Or can they run on the application server? How does your application server talk to the cron server? So let's back that up a little bit. A cron job is a How do you explain current cron job is something that happens?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"34"}},{"id":11,"start":356.819,"end":373.23,"text":"Do you think we'd like a tie, like an alarm clock, right, and the alarm clock goes off? at a set schedule? Whenever you program it, right? You tell your alarm goes off at 6am? It's gonna go off at 6am. So you could think of it as like, basically, like an alarm clock? Yeah, I don't know. That's, that's what I think of it like,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"56"}},{"id":12,"start":373.259,"end":522.119,"text":"Yeah, exactly. So if you have something that you need to do every x amount of time, every day, every month, every Monday twice a day at three o'clock, if you need to do something at a set interval, every x number of days, time, whatever. So some examples of that might be might need to backup a database once a day, I have that on my server, I backup my database, once a day, you might want to run some cleanup jobs, you might want to run a daily scrape and a daily email. So I've talked about before, I used to run a daily deal aggregator, and part of that the entire thing was based on cron jobs, because I think once an hour, we would scrape the website for the deal. And then once a day at 7am, we would gather up all those deals and put them on the website as well as gather up all those and send off the data to MailChimp. So you end up writing a lot of these sort of like scripts that need to be run at a certain point. And and then what you have is you have a script. And these scripts can be written in any language, or they can be written in PHP, they can be written in node that can be written in bash, and then you tell your server please run this command every let's once a day. And what you do is you would say like node send emails, j s, or bin bash, backup and once a day, and then the server server will run those for you. So that's pretty much how it works at a very low level. How do you make a cron job should you use it on your own server, at the very lowest level, you have cron built into your server, so all Linux servers will have cron jobs built into them, they'll have a folder, or they'll have a file on there where you can just crack open the cron job and add an extra line, you write this little syntax that is comprised of numbers, forward slashes and stars that correlate to how often they should happen. And then the server will just simply rerun those. So for an example I have on my own server is that once a What is it like once every three months? What How often do you Let's Encrypt certs expire? I think three months, three months? Yeah. every three months, I run this command that's called cert bot renew. And that goes off and renews all of mine, my servers early on a Sunday morning. And then I have another cron job that I don't know, 20 minutes later, or when that's finished, it will reload my nginx config. And I had some trouble with that earlier because I was running them out of sync. But that's kind of how it works. And then Have you ever used node cron there, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"13"}},{"id":13,"start":522.119,"end":526.26,"text":"I have used node cron. Yes. That's the only one I've used to be honest.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"42"}},{"id":14,"start":526.589,"end":558.049,"text":"Okay. So you can instead of like writing like a low level cron. in Linux, you can write like a JavaScript cron based job in node, it has this JavaScript interface for it. So that's great, because it's really easy to write them. The only downside I think there is your your node app has to be running, which in some cases, you don't want to have a script continually running. You just want to like start up that script, do your work, and then and then shut it down. But I think that's what I would reach for. Where do you run your do your cron jobs, Scott, or do you have any cron jobs?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"46"}},{"id":15,"start":558.089,"end":560.07,"text":"I have no cron jobs. Oh, there","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"18"}},{"id":16,"start":560.07,"end":560.64,"text":"you go.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"20"}},{"id":17,"start":560.659,"end":582,"text":"But, you know, that's it. I have had cron jobs in the past and now for level up, but for other projects, for scheduling and stuff like that. And they typically run for me just on the same server that my application ran on. That said, small application, little user base. It wasn't necessarily too complex. So it wasn't necessarily a danger or anything like that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"20"}},{"id":18,"start":582.02,"end":613.52,"text":"So as you get into more and more cron jobs, there's this idea of just running a separate server or a separate service. There's a lot of like GUI services out there that will allow you to log in and have a nice interface for creating your cron jobs. And they will tell you some stats of how many times they ran when they ran last time. They ran the result of that, that thing being run. I did a quick Google and there's like hundreds of different services. The funniest one I found was called dead man snitch calm. There's just like a like a GUI for setting up these cron jobs.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"42"}},{"id":19,"start":613.95,"end":628.86,"text":"I would love a GUI for that. That's something that I would actually use the GUI for. Because you think about like a calendar, you're setting reoccurring events. That's like that's like prime for a nice little interface there, even though I mean, it's not that hard, either. But it would be cool to have that visual of it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"13"}},{"id":20,"start":629.029,"end":697.529,"text":"Yeah, me too. I just don't have that much use case, right. Now for cron jobs saying, because I have a lot of stuff is is a lot more event based, like even I think about like, I have a script that will freeze people's accounts when credit card fraud is detected. And that's not based on a check every so often that's based on something called a web hook. And that comes back from my payment providers. And whenever they suspect something fishy is going on, it will ping my server, and that will run a script that will freeze that user's account. So it's not necessarily a cron job, but it's more of a web hook. So do I have anything else to say about cron jobs here, let me just pull this up. Oh, yeah, writing the little syntax for how often something should happen. Like, if you want to run everything at the 10, like 110 210 310 of every hour, but only Monday, Wednesday, Thursday, and Saturdays, then you have to write these really complex cron tabs. So there's all kinds of good websites out there My favorite is corn tab comm where you can just it's a nice little GUI for for typing in when and how often you want it and then it will spit out the crontab for you.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"29"}},{"id":21,"start":697.62,"end":718.289,"text":"And you know, a node cron has a whole examples folder and their repo. So if you want like legit examples, they have they have really nice in code examples to to get that information. So every 30 minutes every 10 minutes between nine and whatever complex examples, simple examples, but in case you want to see it in the context of node, cron, it's right there too.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"37"}},{"id":22,"start":718.919,"end":754.35,"text":"Another thing you should make sure of is time zones, which is one of the hardest things in the world. But yes, if your server is in different time zone, then your development machine make sure that you're are thinking about that when I was doing that daily deal thing I was in Eastern, the server was in LA whatever timezone that is and then we were scraping like websites and had to send it out at 7am of the timezone that is of the person who was who was viewing the email. So it's so confusing, because you had to scrape it at 7am of the websites. But I had to figure like, okay, translate that it's much better if you just kind of do it all in UTC,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"58"}},{"id":23,"start":754.35,"end":823.169,"text":"I was doing, like a scheduling app. And it was so difficult, because if someone was trying to schedule an appointment, and let's say they're scheduling an appointment in Denver, and then they're in, let's say, Germany, you know, what times do you show them? When do you send them the alerts, and all a good so complex and so confusing so quickly? It's just the Yes, it's just a lot of a lot of date stuff. And you know, one of the things that's so complex and confusing is hitting the gym getting fit. I mean, it's a new New Year new you, and you might not be ready for it. You might walk into the gym and look at all these things like, Huh, I have no idea it's looking like rust Lang to you or something. You don't even know what it is yet. You're just interested by it. So that's where deadlifts comes into play. Now deadlifts have been a longtime sponsor of syntax, and they are the best way to get a handle on what you should be doing in 2019 or whatever year you are listening to this time traveler and you can get fit you can get healthy and you can get a better mind and body.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"34"}},{"id":24,"start":823.35,"end":843.929,"text":"Yes, I'm glad that you said in mind there because so it's a new year everyone's got new year's resolutions New Year new us new year, my wife and I always joke because all of last year I said that like New Year new me anytime like oh yeah, like it's like a Tuesday night and you crack a beer. Oh, a beer on a Tuesday, my new year new meter. I've been doing that exact same thing.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"43"}},{"id":25,"start":844.44,"end":847.11,"text":"I feel like Courtney is probably super annoyed by it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"04"}},{"id":26,"start":850.11,"end":980.58,"text":"But we were celebrating how I successfully did that New Year new me for an entire year. Anyway, it's a new year and it's a new you and you probably have some goals and those might be losing weight and those might be getting a shape but those goals also might be getting better at web development. And this is not really a slant that deadlifts tells me to take I just think that it's very true. If you want to absolutely nail being a web developer, you cannot ignore the mental the physical side of things. So just over the holidays, not going to the gym eating poorly. I noticed that I had such like a brain fog the first week back and after just a week and a half of going to the gym a couple times a week lifting heavy weights and sweating it out. I noticed that like this week and last Friday. I'm like so much more on it than I was the the previous week and I think it's really important just to spend your time focusing on your health if you want to really slam dunk being a web developer, so dev lips has been on in the past, they've got these two different plans, they've got fit start, which is good for beginners who are looking to sort of get back at it. And you got dev lips premium, which is you're going to get like a lot of hand holding, you're going to get a lot of laser focused approach, you're going to get access to JC and dad, who are also web developers and personal trainers getting this thing up and running. However, right now, they've got just for January, just for January, they have back for a limited time, which is their eight week plan. So this is actually something that I went through myself over a year ago now. And I highly recommend it. Basically, you talk to them, you'll do a survey, talk about what your goals are, how you want to work out, do you want to go to the gym? Do you want to just do something at home? How often can you go. And from that, you're going to get a personalized training and a nutrition plan, which is really, really cool. So I went through it myself, I had a little talk with them, I filled out a form. And I said like, this is what I'm looking to do. And they gave me this awesome plan, which is great, because I just had to go to the gym, open up my phone and look at the plan. And I knew exactly what I had to do every single day at the gym. I told them I can only go three times a week. And they have that out. So I'm not going to gush too much more about deadlifts. Because you know that I love them.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"10"}},{"id":27,"start":980.61,"end":982.02,"text":"It's great. Yeah, it's great.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"16","ss":"20"}},{"id":28,"start":982.049,"end":1016.01,"text":"If you want to check it out, use the code New Year 19. And you're going to get 50 bucks off the one time purchase price of 199, which is great. And then we also have for their other their fit, start and fit premium. If you're even more interested in those, you can check them out. Use the code syntax, and tasty and those are going to get you 50% off those plans, respectively. So thanks so much deadlifts for sponsoring. I know a lot of you listening have already gone through the dev list program. And then I'd love to hear also anyone who's who's joining in this year.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"22"}},{"id":29,"start":1016.13,"end":1038.56,"text":"Yeah, yeah, we should have a little like fit. Check in little, you know, progress thing. Because I've been, I've been tweaking my, my fitness stuff and been working hard. So yeah, I'm excited. This this year always brings those kind of energies, you know, New Year sort of stuff. Next question we have is from another West, West, or weird or West? Or","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"56"}},{"id":30,"start":1038.78,"end":1041.63,"text":"it'd be cooler for others to Bobby or Yeah, one one name? Yeah.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"17","ss":"18"}},{"id":31,"start":1041.87,"end":1166.04,"text":"When are you Canadian? What new skills frameworks or projects are you looking forward to learning or attempting this year in 2019. And we kind of talked about this in our last episode by that this was maybe a little bit different than some of the things we talked about in the in the previous episode, where we talked about what we're looking forward to and stuff like that. This is a little bit more specific to what we want to learn. Now I personally am always looking to get better at the things that I'm doing. So I would love to get better at graph QL. Now my whole API is graph QL. And I've been using it now for I don't even know it's been a while. But I think there's always stuff to learn about it, whether that's like optimizing the API itself, making things a little bit more elegant, just improving it. So I am consuming a ton of graph qL content, just blogs and podcasts and whatever, whatever's out there, I'm all over it. I also want to get into more perf based stuff, I spent a lot of time on performance for level up. But with some of the additions to react coming, I think it's going to be even easier. So I will be doing quite a bit more things with code splitting, not that I haven't already. But I want to get into doing more things like prefetching. I want to optimize sort of loading of certain aspects, both database and front end stuff, I want to really get into suspense, React suspense, because I think it's going to be amazing, and how it's going to potentially affect the data loading throughout the entire site. I think it just gives you a lot of tools and flexibility to decide how that data is coming in. Once the server side rendering pictures, and I'm excited to dive in, and then hooks, you know, hooks are going to be a big deal throughout the course of the year. I've already worked with hooks quite a bit, but I am looking to learn more. We mentioned in the hooks episode, the use hooks mailing list, and every single time I get one of those. I love it. I love pawn through already using some of those hooks from that mailing list in the level up site, and I'm loving it. So I think it just want to get better at all this stuff. The stuff that I'm doing. That's it. Hmm,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"21"}},{"id":32,"start":1166.16,"end":1274.16,"text":"yeah, the hooks one is interesting, because like I've written a couple hooks myself, but every time I see somebody else write a hook, I like break it down and go, Oh, that's such a neat way to use it. Because it's it's one of those things that I don't think we've totally figured it out yet. And it's this new tool that we're just starting to see lots of new use cases for it. Absolutely. Personally, I am also really excited about the new stuff in react, which is lazy loading, react, suspense and react hooks. I think that's really going to make writing react much easier and much more enjoyable as at the same time. I'm letting us build better websites like I think like, they're going to be faster, they're going to be a better code split, they're going to be loaded on demand, all that good stuff. And it's going to be easy to author because I think that's maybe like that's like one, one theme of the year where, like, we always talk about doing these things like code splitting and, and lazy loading. And in the past, it's just been hard to do that. And that's why most people don't do it. But I think that, as the developer tooling gets much easier, it's going to be way easier for us developers to make better websites. I'm also building a new website on Gatsby, which I'm really excited about as well, for my own website. I'll talk about that a little bit more. I've got a whole bunch of questions about why and what and WordPress and all that good stuff. So we'll maybe do a little hasty treat on it. I'm excited about CSS subgrid, which are going to have a show coming up on that. I'm excited about that the whole rails for node, I think that this is going to be a year where we're going to see significant movement in the kind of batteries included framework space. And then finally, CSS Houdini, which is the sort of the JavaScript API that's going to let you implement Custom CSS properties and values. So a lot of cool stuff, maybe we'll come back to it at the end of this year, and see how much of that I really did work with. But those are high on my list.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"26"}},{"id":33,"start":1274.19,"end":1294.14,"text":"Yeah. And I'm going to go ahead and move CSS Houdini onto my list, because I'm going to spend some serious time with CSS Houdini, I love the whole look of that. We talked a little bit about it at our live show. But just some of the cool demos, I think there's a lot of growth that needs to happen there still, but just the fact that it exists is pretty darn cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"14"}},{"id":34,"start":1294.47,"end":1432.35,"text":"Absolutely. Next question we have here is Wesson Scott, I listened to your podcast, there's no name on this one, by the way, I listen to your podcast on a regular basis and wanted to ask you to if you use any particular software for tracking analytics on your site? If so, do you ever use this data to run split tests? And lastly, if you're running split tests, what is your preferred method in doing so to use a third party solution for so I split tests for those who don't know is the this idea of building a website and running a whole bunch of different combinations. And the most simple example is, you have a homepage, that looks one way and then you have a secondary homepage, that looks a different way. And then maybe you see Oh, the picture of Scott smiling with a blue button makes sales go up 10%. And then you start to use that and people get really, really in depth with it. Because you can make a whole bunch of things like the font, the picture, the colors, the size, the price, all of those things that are related to a website, you can make those variable, and then these machine learning algorithms will just play with all of those different variables and come to a which one sells the most things or which makes people stay on the page the longest or, or which specific blue is like I've heard crazy stories about these big companies testing out 40 different shades of blue. And, and seeing that, so it's kind of interesting. And running. In order to do that you need lots and lots of data to look at. So I don't really track a whole lot. I wish I tracked more. What I do track is obviously the standard Google Analytics stuff that comes for free. I track purchases, when so when something buy something, I ping that back to my Google Analytics, and that way, I can see how many people are visiting the website and actually converting at the end of the day, I also have my email provider, which is currently drip, they have a whole bunch of event tracking stuff inside of it as well. So if somebody opens an email and then buy something, I can see like what portion of the people who opened it bought something. However, I almost never look at that analytics just because almost all web developers run ad blockers and those analytics are so far off from my actual analytics that I know how many I'm selling, that it's almost like not worth looking at. Because it's just not good analytics at all.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"34"}},{"id":35,"start":1432.38,"end":1491.99,"text":"Yeah, I run into some issues with some of this stuff, because it's just sort of it's not necessarily worth it enough for me at this point, right? Because again, you need lots of data points. And I don't have the data points, you know, I have good amount of data. But do I have the amount that it's actually going to be worth my time setting it up, configuring it out, getting it going, doing the test, looking at the results and all of that stuff? Not yet personally, in the future, you know, maybe you'd hire out somebody to do that sort of thing. I haven't done a B tests because there are things that I I know will make a big impact that I don't need a B test to tell me are going to make a big impact that I still haven't gotten to. So it's like until I'm looking to optimize beyond the point of my own visibility. When I'm looking for visibility, then that's probably when I'll go more in that direction. I'm not saying I think it's extremely valid but me personally, I'm not needing it needing needing it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"52"}},{"id":36,"start":1492.32,"end":1558.83,"text":"This type of thing I get emails about and questions about all the time when people are saying like, how should I track this and what should I be tracking And the person hasn't even like built a product or like had managed to market it or something like these, like a be split testing, running analytics, this is what's gonna happen when you're making a million bucks. And for a couple weeks worth of work, you can squeeze an extra, like 70 $100,000 out of it. And you can like, Oh, that's well worth it at that point where you've got so many visitors, you're selling so much, where a one to 5% bump in sales is going to be extremely significant for your bottom line. And that's where a lot of these companies get get heavy into it. Yeah, it's not really something I my return on. It's the same thing with Facebook advertising for me right now, my return on spending time on these things, or hiring it out and having to spend the time in meetings and talking and implementing it into your platform. It's just not worth it in the long run versus just making another course and versus providing good value content.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"52"}},{"id":37,"start":1559.04,"end":1618.23,"text":"Yeah. And it's funny, we had a question in the submitted for the potluck. That was the asking is I didn't answer this question for a reason. So I'm sorry to the person who asked this question. I don't have it pulled up right now. But there was a question that was basically like, what choices? Can you step through all of the choices that you would make for building an application that scales from back end front end to testing to design to blah, blah, blah to the entire project? How would you make those choices to build an app that scales right away? And then it followed up with I have a really good idea for an app, but I don't have a lot of money to spend on it, or whatever? The answer is, if that's the situation, then I mean, there's a billion good ideas, and it takes a little bit more than that to want to build this thing. Now, granted, you could spend all the time and money to build something that's rock solid to grow. But if you haven't tested your idea a little bit, you haven't actually done that sort of work, then, then you might just be throwing a lot of time out the window.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"59"}},{"id":38,"start":1618.32,"end":1702.05,"text":"Yeah, I think I got this question in my Instagram, on my Twitter dm on my ama, I think I got every possible way that I can connect to someone I got this question from this person. And the question was like, I'm going to build this like next Twitter. Yep. And how do I scale the entire thing? What technology do I and like, you're thinking about the wrong problem, you should really be thinking about are people going to use this thing, because if you have scaling problems, you are in a very, very good spot to actually have it. Because scaling problems can be solved to a certain point by simply just throwing more money and more server time at it to an exam. Yeah, to an extent, yeah. And then at a certain point, it becomes like, I am on drip right now for my email. And it's dog slow, like sometimes takes two or three hours to calculate a segment of my list. And now that's biting them in the butt. But they are likely making millions of dollars a month from this thing. And they're able to go hire the smartest people in the world to solve these scaling issues that they have. Nice. So segment.io are actually it's segment.com. What this will do is it will give you one interface for tracking things. And then it will push that data out to Google Analytics. And I don't know hot jar and all these other tracking things out there that are are going to track you across the web. I haven't checked it out. But I know that's what a lot of people use in the big business world word.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"58"}},{"id":39,"start":1702.68,"end":1811.01,"text":"Cool. Next one is from Kumar appear up if I got a last game that you think that was good, nailed it. Cool. Yeah. Good. I'm glad about it. I just went for it. I didn't, there was no hesitation there. This question is, what's your best tip for young coders to stay productive and not lose time. And my tip is to make it easy on yourself. Because a lot of times, we think that there's some like that, we're going to be good enough to just buckle down and do this productivity stuff. And I've talked about this before, but I use applications like one called focus for Mac OS, and I don't know several for my phone and things like that, that block specific apps that I know I reach for, they block specific websites that I know I reach for, and a lot of these like focus for Mac will shame you by giving you a quote about like wasting time or something. And every time I get one of those quotes, it makes me feel upset that I decided to open up, you know, Reddit or something while I'm should be working. So I highly recommend letting the robot do the blocking for you. It's not like hey, like I don't have the self control. But these things help you build the self control. Another thing you can do is to stay excited about the work that you're doing whether or not it's a problem or a technical issue, or maybe it's a new new thing you're trying to learn. I am always more productive. I'm always more in the zone when the thing I'm trying to learn is something that excites me It gets me going it makes me want to to work on it. And I follow that down the rabbit hole, right? It's like I got to work on this thing. And so for me, that is the most important thing to stay productive is to really Enjoy and be excited by what you're doing. And in those times when you're not excited, you're enjoying it, block of the stuff, take breaks, go on walks to that sort of thing. That's how I do it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"28","ss":"22"}},{"id":40,"start":1811.04,"end":1852.92,"text":"Yeah, totally. I think first of all, you're 17, you could spend 10 years, I still be younger than Scott and I, at this, this kind of thing. So you have tons of time, I know that you feel like you want to rush into it. And you want to be building this like amazing stuff. I remember that all too well, of you're just hungry to build stuff. But your skills are way behind where you actually Wish you you were. And the idea is that you just like how do I like rush through this so I can get to that. And first of all, you can just put in put in lots of time. But second, I wouldn't sweat it all that much. Because you're so young, that you can probably get really, really up to speed and become a very good developer in probably like three, three and a half years.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"30","ss":"11"}},{"id":41,"start":1852.95,"end":1857.57,"text":"Yeah, I was very productive at that age at the skate park. And that's pretty much it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"52"}},{"id":42,"start":1860.66,"end":1926.81,"text":"Just true. Like I was actually building websites at this point, myself, but I didn't feel like there was so much on my shoulders, it was just sort of a fun thing. And that's what leads me to my next point is that excitement about what you're working on is the biggest productivity hack. So she when you are first starting it on, if you try to like force yourself into it, if you try to put in too much more time, then then you should that's like a great way to to lead to burnout. And that's a great way to start to hate what it is that you are initially excited about. So making sure that you do have good balance, whether that's hanging out with friends, going to the gym, having other hobbies is pretty important as well. Also with that we have a whole show on productivity that are other hacks because like I have that myself, I just deleted the Twitter app from my my computer for this week, just to try it out. Just trying to use the web interface because I find that I probably will spend less time doing that. Nice. So yeah, good luck. Kumar. 17. Seriously, if you keep at it, you could be in a really good spot where you're going to be much younger than then most people would where when they even thought about starting. Yeah, web development.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"31","ss":"00"}},{"id":43,"start":1926.84,"end":1927.86,"text":"Yeah, absolutely.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"06"}},{"id":44,"start":1927.92,"end":1940.07,"text":"Hey, Wes. And Scott, I am 17 and learning web dev. So I might have insinuated that the last asker was 17. You might not be but hopefully you're 17 as well. And learning web dev, I'm","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"07"}},{"id":45,"start":1940.489,"end":1941.99,"text":"concerned coder coder,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"20"}},{"id":46,"start":1942.019,"end":2029.8,"text":"a young coder. Okay, that's fine. I'm pretty concerned about my skills and have an I am having imposter syndrome. I am not sure if I should start freelancing. Please tell me if I'm ready to freelance work. So I really like this question. Because I was in these shoes when I was 17. And I remember being like, Am I Is it okay, that I, I do work for other people. Because I don't have a company. And I'm just this guy on the internet. I know how to make websites kinda. But is it okay that I would charge people money for this kind of thing. So I think the important thing to note here is yes, you start taking on freelancing work here. But make sure that the type of works that you take on is low stakes. So whether that's like one of my first websites ever was for a pool company, it was just a friend's dad needed a website for his pool company to go online. And that was really low stakes, because it was just a pamphlet website where we had some photos and some contact information and some information on there. So low stakes, family, friends, volunteer for people who a website is not going to make or break their business, because it is possible that you will hit a roadblock and it'll take you longer than than you think. But I also know that I grew so much in that time myself where I was really because it was for money. And because it was for somebody else, I had to push through those hard times. And I had to I had to make sure that I learned it. Because just shelving it because I didn't think I was there yet was just not an option.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"22"}},{"id":47,"start":2030.1,"end":2139.65,"text":"Yeah, and at this age, you might not have the best freelance skills, especially if you don't have any prior experience. So don't expect everything to be easy going because one, you might not have great communication skills. That's something that you're going to learn and you're going to practice quite a bit once you actually start freelancing. And two, you might not have these skills to work with clients yet because you haven't had that experience not just talking to clients, but like, actually understanding what a client wants. Because one of the problems that I faced when I first started freelancing is I had this idea in my head of what this site could look like. And that idea did not necessarily match one to one with what the client saw. And because I thought I was the person who had all the answers, obviously I didn't. I was trying to move their direction closer to my direction, when in reality, you want to be working close more closely with what they want to be seeing, right. Like I had this vision, and it wasn't about my vision. You know, it took me a little while to learn. That's not about my vision. It's about their vision. And these are sort of a lot of skills that you need to pick up but again, the low stakes aspect of it is Totally key because you don't want to get in over your head too quickly have a big problem, have a bad experience and feel bad about it or whatever. I mean, everything's a learning experience. But again, low stakes will help you very much so. And if you want to gain some skills to become a freelancer, maybe avoid these potential pitfalls at all, because, well, who likes failing things or having problems, you might want to pick up a course on freelancing. And there's a really excellent course that we recommend over here at syntax called how principles to freelancing course. And this thing is really great. So it gives you a ton of stuff. So with more about this course, is Wes.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"50"}},{"id":48,"start":2139.78,"end":2239.32,"text":"Yeah. So Kyle prinsloo, sponsored a bunch of episodes in the past, and he is back for another episode, which is great, which means that a lot of you are buying the course and enjoying it, which is cool. So the thing about freelance is that you don't necessarily like have a mentor or a boss or a company that will help you learn, especially the skills that is like talking to clients and positioning yourself blogging, SEO, marketing, how to get paid how to how to price yourself. So if you want to learn the skills, that is everything surrounding freelancing, you want to check out study web development, comm forward slash freelancing. And this is a complete bundle that includes a freelancing and beyond ebook, a whole bunch of HTML and CSS templates, private Facebook community, which I think those are, I'm part of a whole bunch of these private Facebook communities for different things like I'm part of one for email marketing. And whenever I have a question about something very specific, it's nice to be able to post it in there. Because first, it's private, it's not embarrassing to just ask the entire world. And second, you get people that who are also invested in the exact same thing, you get access to the slack as well portfolio a whole bunch, I'm not going to go through everything that is in here. Because there's all kinds of questionnaires and checklists and whatnot, you can check it out at study web development, comm forward slash freelancing. So pretty cool little package, or not a pretty cool, huge package that we've got here, and you want to buy the bundle. And if you use the coupon syntax, all caps, you're gonna get 25% off that. So go ahead and grab it at study web development, comm for slash freelancing, big, big","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"39"}},{"id":49,"start":2239.32,"end":2241.44,"text":"package. That's what I got.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"19"}},{"id":50,"start":2244.23,"end":2260.08,"text":"Next question we have here is about react, native question is React Native. What is it? How do people tend to use it? If you want a native app and a web app? Are they're separate? Or do they share code? Can we start nagging west to do of course on it, David? Hey, all right.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"24"}},{"id":51,"start":2260.109,"end":2399.34,"text":"Yeah, so React Native. It's a platform for building native apps, how do people tend to use it, they tend to use it a lot like any sort of react based platform where like, create react app or something where it gets you started. But more so than that. They use it to build a full out native app. And sometimes it starts with create react app, and then you move it into an Android environment or in Xcode environment. But typically, I think that when it started in React Native, it typically stays in React Native, if you want a native web app, or native app and a web app, are they separate? Do they share code, they typically do not share code, it's a misconception that it's like a right once publish everywhere sort of platform. And it's more of sort of a, you can utilize the tools that you know, from web platforms to build native apps. So there isn't necessarily code sharing. Now there is something called React Native web, which allows you to use React Native components for the web, which then would allow you to share some code. But I have not used that myself. I know there, there are people that use it, who like to have that aspect of it. And that seems like a pretty interesting Avenue, but just out of the box. Because native environments have very different things like the styling aspects of a native app is very different than web styling. The components themselves, you know, there's no standard HTML tags, you have things like a view and a list view and things like that are touchable area instead of a button. So there are some pretty big differences that sort of bridge the gap but that said that you still get to use all of the React goodness that you know and love, you want to use react as you you know it you can do so. So that's typically why people love React Native now, I personally have a couple of React Native courses on level up, and it's pretty cool platform, I will caution that it is one of the more frustrating platforms that I've worked on. things break for no reason. Occasionally, compilers give you error messages that just restarting the compiler fixes. And sometimes your entire project gets in the red and it's a little tough to get out of it. Now it seems like there's been a lot of progress about React Native being made. And I think this year will be really interesting for React Native in terms of how it's simplified and how it's improved and how it grows as the platform because it seems like every React Native grows quite a bit.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"40"}},{"id":52,"start":2399.55,"end":2487.15,"text":"Yeah. I think we should mention like, the idea behind React Native is that the UI like the the interface of your application is native, meaning that on iOS, it's built in the iOS, like Scott said, you have a viewport and you have a text tag, and you have an image tag. So you don't use HTML tags, and you don't use CSS to style it, you use the native thing. And that's why the React Native apps feel good. We've all been on websites where they don't feel like they've been done natively. And then there's also one for Android as well. And then a lot of the business logic is then done in JavaScript. So obviously, you make all of your classes in JavaScript. But if you've got a whole bunch of logic around fetching data, filtering, data, authentication, all that stuff, often, that business logic, it will be written in JavaScript unless it's something that you have to use a native bridge for, in order to talk to it. So I haven't built a whole lot in React Native, just a couple little apps as testers here or there. But I do know that you can share libraries or like shared business logic between the two. But as Scott said, it's not right once deploy everywhere, you still you need to rewrite your your UI once for every platform. So once for the iOS, once for the web, once for Android, if you do have some like logic that's around data fetching or filtering data, or anything like that, that sort of behind the scenes that can be shared between all of them.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"39","ss":"59"}},{"id":53,"start":2487.23,"end":2498.67,"text":"Yeah, and you could share quite a bit between iOS and Android. And there are even some, like theming libraries that will spit out the human design guidelines and the material design guidelines with the same components. So you don't even have to think","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"41","ss":"27"}},{"id":54,"start":2498.67,"end":2500.13,"text":"about it. Oh, that's cool.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"41","ss":"38"}},{"id":55,"start":2500.17,"end":2514.48,"text":"Yeah, when I write React Native, I'm typically not doing two separate things, unless it's like, okay, now I have to account for the Back button in in Android or something like that. But there is a good amount of reusability there, in my opinion, or in my experience,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"41","ss":"40"}},{"id":56,"start":2514.51,"end":2550.48,"text":"that's cool. People ask me all the time about React Native, and I just send them to Scott, because I've looked at it, but the there's a lot of like churn in React Native, and that thing would go out of date so quickly. It does a lot of tooling. I think it's just a bit like hard at least last time I saw it, it's a bit hard. And often when things are like Scott says it's, it's it's frustrating. Often that frustration comes back on me as a tutorial maker, and not necessarily the the framework itself, which it might be me, and in some cases, it certainly can be. But I know in a lot of cases, it's just a frustrating framework to work with, because it's so new.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"54"}},{"id":57,"start":2550.54,"end":2606.04,"text":"Yeah. And it's funny because I would I would list, my one large React Native course I did is maybe one of the worst professional decisions I've ever made. Now, I don't I don't sell this course anymore. But I always like, Alright, I'm gonna go all in and I'm going to make a huge course it's going to be giant, it's going to be all encompassing. And it was seriously out of date in like, two months, and I spent so much time on it, and it like absolutely crushed me. So that's one of the reasons why I was like, Okay, I'm gonna do smaller, especially if I'm approaching this from React Native smaller tutorial series, they go out of date, I can just redo it. That said, I do have a new intermediate level React Native series coming out in 2019. No total announcements on that yet, but, uh, it's gonna be really cool. I have a lot of interesting ideas going on here. And I think everyone is going to be very excited by it. So that's all that's all I can say. Right now.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"30"}},{"id":58,"start":2606.04,"end":2630.58,"text":"Somebody sent me a message on Instagram. The other day, I posted my screenshot on my Google Home app with all my lights and stuff in it. And someone said, Did you know that's built in React Native? And I said, ha, I didn't I didn't really true. I didn't know if I don't know if that's true or not. But maybe maybe somebody knows. It's a good example of of apps that are built in React Native tweet us at syntax FM, because I would love to check some of them out.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"26"}},{"id":59,"start":2631.03,"end":2639.88,"text":"Yeah, I want to see some cool. Well, I think that's it or do you want to move on to a sick pics? It's been a little bit of a while here. So do you have? Yeah, take for us.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"51"}},{"id":60,"start":2639.91,"end":2751.66,"text":"So I've got two sick pics. Is I finished that I've it's what days Today is January 8, and I've done two books in the year already. Like I'm on fire. So I did the book, would you recommend it called Bad Blood which is about theranos Holy smokes. What what enjoyable, twisted crazy did is write a story. So it's it's a book about how the startup in Silicon Valley was going to revolutionize blood testing with the prick of a finger and turns out it was all lies and it's it's nuts. So I recommend that that's just kind of an aside because Scott's already sick pick that but I'm going to sick pick the chip Gaines book. I also read he's got a book. Yeah, it's a chip Gaines is the husband of Joanna Gaines, who and they are the stars of the fixer upper and Magnolia Empire. And me and my wife Caitlin admire them quite a bit. They're about 10 years older than us. They're both entrepreneurs. They're both sort of go getters And we see a lot of hopefully we see a lot of similarities between them. And so I went and grabbed his book and I listened through it, it's it's only five and a half hours on audiobook, I listened to it at like 1.75 x. So it only took me a couple hours to get through it. And he's just got an awesome outlook on life. And in terms of like talking to people talking with employees, how to treat people how to how to take risks, how to love mostly, he's just like family first, it just crazy because they shut down their TV show, which was the most popular show on cable television. And in the height of it, they shut it all down because it was becoming too much to run their business, run their family and do this TV show. So I really enjoyed it. Somebody else told me to check out the other one, which is the Magnolia story, which I'm gonna I'm gonna check out as well. So that's a sick pick for me.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"59"}},{"id":61,"start":2751.72,"end":2754.63,"text":"Nice. I'm gonna have to I didn't know he had a book. I'm a big fan of,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"51"}},{"id":62,"start":2754.96,"end":2758.38,"text":"I forgot to say what it's called. It's called capital gains.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"54"}},{"id":63,"start":2758.38,"end":2759.1,"text":"That's and the tagline","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"58"}},{"id":64,"start":2759.1,"end":2762.43,"text":"is smart things I learned doing stupid stuff.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"59"}},{"id":65,"start":2762.88,"end":2928.36,"text":"Love it, love the title, then they're one of those if it's just too too good to too good. I'm gonna pick pick something that is for the New Year new type of person. And that is going to be the tidy up show on Netflix, if you've got watches or tidying up, sorry, tidying up, yep, with Marie Kondo. And this, I think came out on Netflix, either like January 1 or second, I was like flipping through Netflix, and I saw it. And I had never read her book, I was aware of her book. Her book is called the life changing Magic of Tidying Up. And so we I watched the first episode and maybe like 15 minutes into the first episode, I was like, Courtney, not like you have to watch this. But you're going to love this show. And I think I should stop watching it. So we can just watch it together. And we've since gone through every episode of the show, because it is brilliant. It's like It's like hoarders. But without the shock and horror, sensational sort of stuff. It's like actually useful. It's like, here's some people's houses that are very normal people. And here's the various states that they exist in. And here are the various issues they're encountering. And she comes in and teaches them sort of her method about tidying up and cleaning up. And you might think that there's no way that that could fill up eight shows. But every single show has sort of a different angle, a different story, and only a totally different learning experience out of it. And it's like one of those ones that after the end of each episode, there's like almost like an overarching message about it, about the experience. And I just found that so, so good. I'm sure a lot of people have tuned into this already. I was so good that by the second episode, I bought her book, I read her book in one day. And you should see our house right now our trash bin is full, but filled up for like weeks and weeks and weeks. Now, our recycling, we have two recycling bins and they are just jam packed. Our donations are we had to move them into a whole room of their own because the donations were taking up so much space in our house. And we aren't we're not hoarders we don't really have that much stuff. But we were you just look around and you think, yeah, do I really need this and maybe I'll Instagram a photo of my dresser drawers right now because they are impeccable. And every single day I wake up and I open my drawer and my shirts are all there and this little specific folding method. And I select one out, and it brings me joy. And I'm all in on this. It is like it's so funny, because it's like, we weren't really that messy people but we have a new baby coming into our house and we want everything to just feel so much better. So I'm just, I'm pumped. I love this show. I'm gonna rewatch it. Man,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"02"}},{"id":66,"start":2928.42,"end":2951.4,"text":"Caitlin and I were looking at it the other day and we're gonna watch it together and I think tonight is the night that we are yeah both around. So it's so good. We I think we Kaitlyn read the book a couple a couple years ago and we did a huge purge of our house and and now that we've got the next baby coming in now we're just like, getting rid of everything left and right and donating everything. And it's crazy how quick that stuff sort of creeps in.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"48"}},{"id":67,"start":2951.55,"end":2960.88,"text":"Yeah, I had like a VHS is that us? I don't even have the edges player in the house. It's like, why do I have this? Like, I don't know why I just held on to it because it was one of my favorite movies. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"11"}},{"id":68,"start":2961,"end":2961.93,"text":"I don't know, man. I","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"49","ss":"21"}},{"id":69,"start":2961.93,"end":2965.2,"text":"gotta watch it somewhere else. I mean, it just changed the way I thought it I stuff.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"21"}},{"id":70,"start":2965.23,"end":2968.29,"text":"Yeah. Sick pick. What about a shameless plug? Shameless plug,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"25"}},{"id":71,"start":2968.53,"end":3012.84,"text":"I have a new course on styled components called level one styled components. And this course is all about building a system to grow your design with. So it's all about structuring your styled components, different libraries that work with styled components, how to do sort of bem style work within styled components using various libraries, how to get some of that functionality back that maybe you're missing from SAS, with some other additional libraries, and really just how to structure organize and keep your code in a way that makes it really shine. Makes it spark joy with your stealth components. So check it out level one style components available at level up tutorials, comm you can sign up for the year and save 25% or percent your choice. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"28"}},{"id":72,"start":3012.87,"end":3053.43,"text":"that's it. Awesome. I am going to plug all of my courses. So I'm just looking at our stats on our podcast is growing every week. So if you are new to the podcast, Scott and I make courses, Scott has level up tutorials I have, I don't have a name for it. It's just the Wes Bos courses. And I have all a list of all of my courses available at Wes bos.com forward slash courses, bunch of free ones and a bunch of paid premium ones. And they are all currently on sale who just for a little New Year, you can use the code syntax for I think it's an extra 11 bucks off as well. So you can sort of stack that on top of the current sale. So enjoy if you want to learn anything about react or ESX or graph qL or you name it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"12"}},{"id":73,"start":3053.43,"end":3055.77,"text":"I'll teach it to you. You name it","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"53"}},{"id":74,"start":3055.92,"end":3065.13,"text":"except for React Native or new j s apparently. That's my new year's resolution is before the end of the year to do a show on view.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"55"}},{"id":75,"start":3065.16,"end":3066.93,"text":"Oh my gosh.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"51","ss":"05"}},{"id":76,"start":3067.95,"end":3070.62,"text":"Awesome. So that's it for today. Anything else to add?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"51","ss":"07"}},{"id":77,"start":3070.62,"end":3071.16,"text":"Nothing.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"51","ss":"10"}},{"id":78,"start":3071.16,"end":3074.04,"text":"All right. We'll see you next week, dude, pace.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"51","ss":"11"}},{"id":79,"start":3076.02,"end":3085.8,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"51","ss":"16"}}],[{"id":1,"start":0.359,"end":22.32,"text":"Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott El Toro.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":25.95,"end":138.69,"text":"Oh, welcome to syntax in this hasty treat, we're going to be talking all about CSS Grid level two, aka CSS Grid with sub grid. Now, I'm very excited for sub grid. Wes is very excited about sub grid. And we're gonna be telling you a little bit today about why you should be excited about sub grid and the changes improvements coming to CSS Grid. So my name is Scott Tolin ski. And with me, as always, is Wes Bos. Hello, everybody. Hey, this episode, this hasty treat is sponsored by century. Now you can head on over to sentry.io. And check out everything that Sentry has to offer. They are the best place to solve your bugs. I had a really interesting bug this weekend actually, in which a an edge case of certain people were getting declined notices on their credit cards when they weren't actually declined. And this, let me tell you century's interface made it so easy for me to determine how people were having this bug who was having this bug how many people were having this bug, right, I could tell if it was an emergency situation, or just a, you know, a little situation. And sure enough, it was an edge case here. And I could figure that out. But century absolutely saved my bacon this weekend, being able to gain the visibility into these issues. So Sentry tracks all of your bugs issues, keeps them all in one lovely place, and allows you to make sure that they are taken care of correctly. If you want to sign up for Sentry and get two months free, you can hand that over to sentry.io. and sign up, use the coupon code at tasty treat all one word, all lowercase, tasty treat. And again, you'll get two months free of century it's something I highly recommend. It will save your butt.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":3,"start":138.81,"end":257.88,"text":"Awesome. Also century is hiring. I said I'd shout this out. They are hiring a whole bunch of positions. But the one we're shouting out is the developer evangelist. So if somebody what is the developer evangelist, it's a you're a developer, but you're sort of public facing for the company, you're creating video tutorials, speaking at conferences, being on Twitter, and just helping people out in general, I was thought that was a pretty cool job to be a developer evangelist. So they are looking to hire someone for that they are headquartered in San Francisco. But Ben did mention that remote is possible, especially as a developer evangelist, I think you do a lot of flying, going to various conferences and whatnot. So seems pretty cool to work there. You get a GIF when you are hired. They like create this hilarious gift for you when you get hired, which seems cool. There's other minor stuff like medical coverage, and dental and minor stuff like that. So just check it out. We'll link it up just century.io forward slash careers. If you're interested in applying for that we should get some syntax Pham, working at century. Nice. All right, so let's talk about CSS Grid, or level two or CSS sub grid as it's called. So we've had CSS Grid in the browser for probably about a year and a half now, it's starting to become extremely popular, people are starting to implement into their own applications because of the browser support. And one sort of thing that we run into is this problem of being able to align sub sub items of a grid face on the parent grid. So we're, this is gonna be a bit hard because it's very visual. But we're gonna use the the concept here of a grid, a grid item. And then a, we'll call the the third item that is inside of the grid item, a grandchild item. So you have the main grid, you have your items inside of that. And then in each of those items, you might have more sub items or more grandchildren items. So yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"18"}},{"id":4,"start":258.45,"end":309.95,"text":"I like to think of it as like you have the grid, right. And you have your children, right, which adhere to that grid, but the children inside of that child need to adhere to the same parent grid right now as you can't do it. Like this is about the, like you said the grandchild right, that needs to adhere to the larger grid. And this is like one of those things that you might not understand the benefit of it until you see some really practical examples. And we'll give you some links, some blog posts and stuff to look at to see some nice little visuals explaining some of these use cases. But again, I like to think about it's like you got something nice Did that needs to adhere to a larger grid, there's some really, really cool things about CSS Grid level two or sub grid that we will be getting into in this episode stuff I'm very excited about.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"18"}},{"id":5,"start":309.99,"end":435.6,"text":"Yeah, if you're at your computer right now, head over to the show notes at syntax FM and click through to Rachel Andrew wrote a blog post on her own website, as well as a blog post on smashing mag. And she's obviously one of the developers defining she's worked for, like eight years on defining what CSS Grid is, if you google anything, CSS Grid, her stuff is going to come up. So we're gonna attempt to break it down. Why do you need it? What is the problem? And how does it actually work? So here's the visual problem that we have, like Scott said, It's when your sub items or when your grandchildren items need to adhere to the parent grid currently, that's that's not possible. So if you have like a layout of cards, where you've got three cards across this example that they have in smashing mag, you have a grid with three columns, and each of those columns has a card. And then inside of that, each of those cards, you might have a heading, you might have a footer, and you might have a content area. And you want all of those heading content areas and footers to align with each other, the problem that you have is that you could give your headers like a fixed height, where you just like figure out, oh, here's the biggest one, and you give them a fixed height, and then they all look the same. But ideally, you don't want to give your items a fixed height or a fixed width, you want to just let the content decide. And you want all of the cards headings to be exactly the height of the largest card item, item, but they're not related in any way. So this idea of sub grid is that you can have correspondence between all of the grandchildren items with the sort of parent grid that we have. So that's helpful for card layouts, that's helpful for whenever you have like, I've often had an option where like, let's say you have a list of buttons. And then you have like you have three buttons, and then maybe you have two additional buttons, but they're wrapped in a div. And that becomes a problem because you know that the grid is only between parent child and not parent grandchild. So sub gradable will sort of alleviate this issue that we have.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"09"}},{"id":6,"start":435.78,"end":509.49,"text":"Yeah. And the coolest thing about sub grid, in my opinion, besides what it does is how easy it is to use. Because you have this layout, right? Like you mentioned this card layout. And you might be thinking like, Well, how do I how do I attach this thing to the parent? Well, all you have to do is define either or both of the Well first you have to declare that the child is a display grid itself, right. And typically, that just creates a new display grid. And then you have to give it some grid template columns and some grid template rows. But with sub grid, you can take either or both of those and just say, hey, the grid template columns and rows are based on sub grid. So the property value is just sub grid. And then all it does is it adheres to the larger parent grid to get its values. And it's going to stay in line with that parent grid. So you don't have to redefine the fractions, you don't have to redefine the column width, you don't have to redefine any of that stuff, simply by having the value of subgrid. It just looks upward in the chain to what that grid is. And it's going to adhere to it. It's it the syntax for it is so dang elegant and beautiful. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"15"}},{"id":7,"start":509.49,"end":524.37,"text":"I thought it was so cool. Because you don't have to define your grid item. You don't have to define like a span or a start or stop on that. But you can just then go one level deeper and define a span a start or stop on that sub item.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"29"}},{"id":8,"start":524.46,"end":545.07,"text":"And you can mix and match I mean, so you can use you can buy this giving it display grid, you can tell look columns to be sub grids. So the columns will add here to the parent grid. And you can tell the rows to be its own thing with its own row width or its own row height. Height. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"44"}},{"id":9,"start":546.12,"end":549.17,"text":"blanking on the word heights how to rows work. Yeah, yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"06"}},{"id":10,"start":550.4,"end":558.9,"text":"You can define all the the totally separate, completely separate grid while still maintaining that sub grid for the columns. That's, that's superduper. Cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"10"}},{"id":11,"start":559.11,"end":605.64,"text":"Yeah, that's, I think this is going to be extremely helpful in a couple situations first, when the designer designs that thing, and you're like, well, that's not really possible. Now you can and then the other thing that is going to be helpful is when you use like a CMS that gives you the HTML Yeah. And it dumps out and often especially things like WordPress, Drupal, whatever, they will just dump out some HTML for you. And your hands are tied. You can't like move things up a level and have them as grid items. Now you can one thing I didn't find out and I looked for this for quite a bit is how can you can you sub grid more than one level deep meaning that if you have items nested more five, six levels deep. Can you sub grid sub grids sub grids sub grid?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"19"}},{"id":12,"start":606.24,"end":607.98,"text":"Let us know. I don't know, either.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"06"}},{"id":13,"start":608.01,"end":615.69,"text":"I don't think you can. But I like all of the examples I saw were just three levels deep. Yeah, but maybe I would love to find that out.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"08"}},{"id":14,"start":615.81,"end":654.51,"text":"Yeah, please let us know. We will tweet you out. If you have the the answer for that one. It is funny. You mentioned the CMS thing. We used to have this there's a long running joke at one of our agencies, because we did a lot of Drupal and Drupal loves to give you a lot of Dibs, just a lot of divs. And we used to be like, Well, why don't you add a class to this div over here. And then we can do this. And then the other dev would be like, oh, because it's Drupal? Like Okay, okay. Okay. Well, why don't we add this and this and this? Because it's Drupal? Oh, okay. Okay. So, like, I love that the the CSS is going to get better in a way that your hands will no longer be tied on some of this stuff.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"15"}},{"id":15,"start":654.57,"end":719.55,"text":"Yeah, I think back to all of the JavaScript I used to write was just doing things like equalizing columns where you found the max height of three of them, and then, and then every resize, you had to like, change it. And that's no more you don't have to write any JavaScript for that. It can all be done with CSS Grid and CSS sub grid, we'll talk real quick about browser support. It's not in any browser, yet. This is still a a Working Draft, the last it was updated was October 2018. It's looking like it's nearing completion, what we will probably start to see next as this thing, as the spec is wrapped up, we'll start to see browsers actually implemented behind a, a feature flag. So you have to go in and turn it on to play with it. And then and then once that's out, it'll start push it. So it probably is, at least I would say probably at least a year out. This is just me, looking at what it's at right now, before we can actually start using in the browser, maybe even longer if you want to wait for browser support. Yeah, but I also did see somebody somebody implemented it with Houdini, which is so cool. You could","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"54"}},{"id":16,"start":719.64,"end":721.08,"text":"it's almost like a polyfill. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"59"}},{"id":17,"start":721.11,"end":724.2,"text":"yeah. poly filling CSS that's not available yet.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"01"}},{"id":18,"start":724.38,"end":762.45,"text":"Yeah. Huh. Huh. What is it? I think Rachel says in her smashing mag that it's like, a year out ish. And that's in July 2018. So I would love, love, love to be able to start working on this in 2019. And, you know, I, again, I think there are a lot of solutions. There's the areas of the level of tutorials website that I look at, like specifically like the products listing, and maybe the tutorial cards, and I'm just thinking sub grid would be absolutely perfect for me right now. And so I'm, I'm ready and waiting. So after listening to this episode, I hope you are ready and waiting as well.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"04"}},{"id":19,"start":763.53,"end":786.51,"text":"I think also, electron apps are going to benefit from this because a lot of people build, like I use a couple electron applications where the interface is very complex. And I can imagine that they would be really helpful to build these complex application interfaces. And the beauty of that is that you can just as soon as it hits electron, you can start using it. You don't have to wait for all the different browsers to catch up. Very","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"43"}},{"id":20,"start":786.54,"end":788.61,"text":"Yeah, that's a big plus, I never thought about","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"06"}},{"id":21,"start":788.64,"end":816.87,"text":"Yeah, so I'll recommend you check out this smashing mag article, Rachel goes into talking about how you can also name the lines as well, you can name the lines on your main grid. And then because the way CSS Grid works, you can also you can give a lines, multiple names, as many names as you want. We've done that in a couple of my CSS grid.io tutorials. But you can also name the sub grid lines as well, which is pretty nifty. I thought that was pretty cool that you could do that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"08"}},{"id":22,"start":817.079,"end":841.5,"text":"Yeah, I love that just simply by declaring that X, Y, and Z or your your rows or columns, in particular, are in subgrid, that you can be sure that when you're giving it specific values, it's always going to go up to the parent. I think that's it just seems like it just works. And I can't wait to use it because it again, it's just exciting. I feel Yeah, this entire episode is just like, I can't wait. Sounds great. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"37"}},{"id":23,"start":843,"end":867.27,"text":"Yeah, it's pretty. It's also like you can read through the entire spec in probably 20 minutes. It's Yeah, it's pretty simple. Like, I think we're done the podcast. Yeah, that's it. It's a pretty simple thing. Obviously, they've taken lots of time to make sure that they absolutely nailed it. This is not an easy thing. layout in general is not an easy thing to spec out. But I think once it comes to just us using it, it will be definitely really easy to use. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"03"}},{"id":24,"start":867.27,"end":871.17,"text":"absolutely. Cool. Do you have anything else on subgrid CSS got","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"27"}},{"id":25,"start":871.17,"end":875.25,"text":"it for me. I'm excited for it. And that's it. Awesome.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"31"}},{"id":26,"start":875.49,"end":890.94,"text":"Cool. Well, I look forward to it as well. And All right. Well, that's it. We will see you on Wednesday for a full on tasty treat piece, please. Head on over to syntax.fm for a full archive","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"35"}},{"id":27,"start":890.94,"end":897.66,"text":"of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"14","ss":"50"}}],[{"id":1,"start":6,"end":11.25,"text":"Welcome to syntax where we deliver tasty treats for web developers.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"06"}},{"id":2,"start":14.49,"end":81.33,"text":"Hello, everybody, welcome to syntax. We're here again for another sweet podcast full of tasty treats. This podcast is sponsored by fresh books, cloud accounting, go to freshbooks.com Ford slash syntax and enter in syntax into the head to hear about a section. We'll hear a little bit more about them partway through the show. Today, we're talking all about productivity hacks, how do you squeeze that extra little bit of time, or productivity out of your computer out of your workflow, these little things, these little changes to your life, whether it's a specific app, or whether it's a way that you tackle something can can really help you get an extra 2030 40% out of the way. And sometimes you see these people and you go, like, how do you get so much done. And it's almost like, it's almost always that they have some sort of system in place, they use a bunch of tools, they've spent the time focusing on their process and their productivity so that when they actually gets down to work, they can have a lot more output than normal. So I'm a huge productivity geek. What about you, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"14"}},{"id":3,"start":81.839,"end":104.52,"text":"Yeah, it's one of those things you can't, you can't ever get too much of Well, I mean, you probably get too much of it. Yeah. But it's one of the things you can really optimize so many things that you may not even understand are holding you back and various Time, Time sinks and stuff like that. So finding ways to optimize and improve the little stuff is super duper, duper handy, pretty much 24. Seven.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"21"}},{"id":4,"start":105.54,"end":150.84,"text":"Cool. So why don't we start off with probably both of our favorite productivity tool, which is Alfred. And Alfred is a does a lot of things. But the thing that everyone knows it for is it's that application launcher, where when you hit option space, it opens up this bar that you can type in, and you can type all kinds of stuff in there, most likely you want to open up an application and will quickly pop it open. So you're not rooting through your list of applications. Now, I OSX, or Mac OS has totally ripped that off in the latest version. However, it's not nearly as good. So if you're using that, I definitely recommend you switch to Alfred, and let's talk about why why do you like it? Scott, what do you use it for?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"45"}},{"id":5,"start":151.13,"end":264.32,"text":"Yeah, I like it for Well, in addition to like doing sort of custom workflows, there's just a lot of little handy extras, I mean, even doing all of your math directly in it, you can just do the quick math right quick math pops up, you don't have to open a calculator or anything like that. Actually, I think the Mac OS version can do that too. But it gives you a lot more options to have more of these type of things, right. And you can build your own custom ones directly within Alfred. One of the things I use Alfred most for is getting myself set up in a particular environment. You know how many times let's say I'm working on a WordPress site, you have to go to your apps, your doc open up MAMP or whatever way you're serving your PHP. And then you have to open up your browser localhost port eight, whatever, you have to do all that stuff, and I have mine, basically, I can just do you know, command, enter, and I can start typing MAMP Ma, it will open up MAMP it will open up a tab in my browser, and it will just get me set up and started basically saving you a little bit of time here, right? Like three keystrokes for doing something that would have taken I don't know half a minute to click through but still it's saving you some time there because you don't have to do that you know ever again also, I did use it a lot for browser tab stuff right? Maybe there's sites you go to all the time specific locations and for a little while have like all these level up tut's sites, right I have my accounting stuff, I have my my my repos. And a lot of times, if I'm working on level up tough stuff, I want all of it to be open. And I don't want to have to open up all of these tabs, I can just do you know, Alfred, and then type in L UT, hit Enter, and it opens up everything I could need for my accounting stuff, to my app to my death to my repos, any of that stuff in the browser, and it will open up iterm and all that stuff for me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"31"}},{"id":6,"start":264.63,"end":307.56,"text":"Yeah, it may seem like a bit of like overkill to schedule these things. Yes, you're saving half a minute. And that probably will add up over your lifetime and allow you to retire early or something silly like that. But I think also just the the mental energy of thinking, what is it like having to make all these decisions, you really only have so much bandwidth per day to make all these decisions and to figure out what needs to be open. So if you can just like take yourself out of remembering those eight things that need to be open. It's sort of similar to when you're scripting, maybe a gulp task or anything like that. It's Way better to automate that process, rather than to have to remember every single step along the way? Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"24"}},{"id":7,"start":307.58,"end":330.6,"text":"yeah, definitely. And like, like you said, these things aren't going to be to shaving a ton of time off. But it does make your life better on a consistent basis. And once you get into that muscle memory of, you know, I'm working on level up lsvt, enter, whatever. Okay, that's it. That's all I had to think about. And yeah, reducing that decision, fatigue is where it'll make your decisions better for the rest of the day.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"07"}},{"id":8,"start":330.84,"end":372.87,"text":"Exactly. So Alfred comes with some built in workflows, it comes with the ability to add other people's workflows. And you can also make your own which is, which is what Scott was just talking about. So there's this workflow editor, which allows you to do everything from run terminal commands, which will allow you to output scripts, to open up applications to open up tabs in your browser, you name it, it comes with all of that stuff built in. So being able to customize workflows, and select other people's workflows that are handy. Is, is amazing. So maybe let's talk about some of the other workflows that we use. Um, do you have any? Or do you want me to go?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"30"}},{"id":9,"start":373.59,"end":395.1,"text":"You can go for me, I pretty much write all my own workflows, which I'm thinking now is probably a terrible idea. As I'm starting, you know, from scratch every time like, Oh, I should should do this. I guess I don't have the the knowledge of like a Alfred riepe repository of like, excellent workflows. Like, I feel like, that would be really helpful for me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"13"}},{"id":10,"start":395.37,"end":469.26,"text":"Yeah. So if you go to Alfred app.com, for slash workflows, you'll see that there's tons and tons of different workflows that will integrate into some of the more common ones out of us is converting a hex to RGB, or being able to do time zones. So if for example, if I want to know what time it is, in India, or in China, or in San Francisco, or in Denver, I just type Tz and then the name of the city, and it's going to automatically pop down a list of all the times. So like, you know, like those people, and I do this myself, when you Google something like what is $100 Canadian in us? Or what is the time in India right now and you have all these things that you Google? Well, you shouldn't even have to wait for your browser tab to open you should be able to access that information right from your Alfred and doing timezones with the timezone one and doing the there's a conversion one that I use all the time for converting money, converting kilometers, converting kilograms to pounds, all of you Americans have the most messed up system for measuring things. So I always need to convert it into a sane metric, or Canadian dollars. And that saves me tons and tons of time.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"35"}},{"id":11,"start":469.65,"end":477.02,"text":"We know this. I mean, we know this guy I wish so desperately, we could just abandon it all and head to the metric system.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"49"}},{"id":12,"start":477.719,"end":479.55,"text":"I don't know if it'll ever happen.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"57"}},{"id":13,"start":479.55,"end":493.32,"text":"I know. Oh, man, I can't believe I didn't know about this. Yeah, I've used Alfred since like version one. And I've never seen this page on their website. I guess. I downloaded it, installed it and then that was the last time I went to their website.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"59"}},{"id":14,"start":493.35,"end":519.39,"text":"Yeah, there's there's one called kill in you know, sometimes you need to kill a process and you open up your Activity Monitor and you hunt through and you find your node process and you kill it. There's one or you just type kill, and it'll populate all of your node processes and you can just type node and then you'll find all the node processes or anything that has the word node in it. It's like a fuzzy search and you can kill them right from Alfred. Which I love that. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"13"}},{"id":15,"start":519.45,"end":522.96,"text":"yeah. Do you use this pack pakal","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"39"}},{"id":16,"start":523.289,"end":525.33,"text":"Oh, that's the one I use Dale.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"08","ss":"43"}},{"id":17,"start":525.72,"end":528.24,"text":"Yeah, cuz it looks like Alfred still links to there","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"45"}},{"id":18,"start":529.02,"end":553.55,"text":"when you when you go ahead and click off to them. So yeah, I was just manually downloading them on but that's terrible because they'll never update so this package is sort of like NPM for Alphard package. So you can you can install them there's ones for Spotify and iTunes there's a whole bunch of themes on there. I have my own cobalt to theme for Alfred. It's pretty pretty nuts all the different workflows that go into it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"49"}},{"id":19,"start":555,"end":556.47,"text":"Nice. Oh yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"15"}},{"id":20,"start":556.71,"end":659.7,"text":"Some other tips that I use on here is large text quickly. So sometimes you just need to I do this all time when I'm teaching and and I need to get a URL to everybody or I need to post the Wi Fi password or I need to like post something huge on the screen. In Alfred you just open it up and you type your thing and then you hit I believe it's command Yeah, you hit command L and it will just take whatever you've typed into Alfred and put it in big white letters, a black background all over your your screen so kind of neat. I've also used it like on an airplane we Intel people are watching what you're doing this type into it. watching me in the screen. Um, what else? A little tip, when you're doing math, you can turn on the ability to ignore commas. So often all a copy paste like 2000 USD, and that will have a comma after the two, you can turn off the ignoring, or you can turn on ignoring of commas so that it will do the math and ignore the actual commas for you. I'm just trying to think about there's so many that I've used here, and I'm all excited about it. Now that there's some other ones here, oh, font, awesome. Look up. I know that you're not supposed to use Font Awesome anymore, because SVG is the way to go. But if you still have a website with fun, awesome. And you need to know what is the class like fa, dash Twitter, the font, awesome workflow, you just type FA space, and then you can just like, search for the name of the thing that you want. So arrow, play, whatever it is, and I love that because I hate going to Font Awesome website and looking at the 12,000 icons that are available there and searching through it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"16"}},{"id":21,"start":660.329,"end":666.45,"text":"This leads me to another thing. entities HTML entities, yes. Is there one for that?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"00"}},{"id":22,"start":666.48,"end":667.89,"text":"There is there's a Okay,","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"11","ss":"06"}},{"id":23,"start":667.92,"end":671.64,"text":"there's a widget for that. And that'd be psyched to not have to use it was like a decode","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"07"}},{"id":24,"start":671.64,"end":681.57,"text":"and encode. So you you pop in an entity, like EAX something you? And actually like my French accent there? Yeah, you're welcome.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"11"}},{"id":25,"start":681.81,"end":683.88,"text":"I mean, you are Canadian, there's a bit of that there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"21"}},{"id":26,"start":683.939,"end":705.12,"text":"So it will it will kick out the HTML entity, it will kick out the like, there's like two other ways to encode it like base 64 encoded and like another way, and then if you put an encoded value in there, you can decode it into whatever the equivalent is on there. So that one is I use that one quite a bit as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"23"}},{"id":27,"start":705.449,"end":713.94,"text":"Nice. Yeah, that's it. There's, you know, having to remember the right angle, quote, or rank or whatever. But having to remember those is no fun.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"45"}},{"id":28,"start":714.209,"end":739.56,"text":"Yeah, exactly. Here we go. I have a I have a screenshot on my workflows on my Wes bos.com for slash uses. Dev docs. That's another really good one. So if you need the docs real quick for array dot push, you just type JavaScript space push, and it will bring down all the documentation for whatever methods specifically match that one. Ah, let's see. What else do we have here kill.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"54"}},{"id":29,"start":740.22,"end":753.87,"text":"I'm looking at the this, this pakal site and and see like a Stack Overflow search, I could see that being super useful. Obviously, you could search just like limit your query to stack overflow. But it seems like this is just a nice way of making that super seamless.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"20"}},{"id":30,"start":753.9,"end":768.99,"text":"Yep, there's one for turning on. There's a lot that just turn on and off thing. So turn on sleep, turn on flux, turn on Wi Fi, whatever you turn off Bluetooth, you know, you want to toggle these things really quickly. There's a lot of workflows, I would just turn these things on and off real quickly.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"33"}},{"id":31,"start":769.83,"end":772.47,"text":"Nice. So yeah, big fan. super handy.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"49"}},{"id":32,"start":772.59,"end":810.09,"text":"Oh, I remembered one more. And that is Alfred has this built in. And it's the clipboard history. So if you don't mind some application, keeping log of all of your clipboard, you can have a clipboard history anywhere I know sublime tax, and a lot of editors have clipboard history built in. But if you copy something, and then you accidentally copy something else, and you lose whatever was in your your clipboard, this will give you a list of I don't know 10 or 20 of your previous clipboard items. And you can always get them back, which is really saved me saves me all the time.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"52"}},{"id":33,"start":810.449,"end":924.8,"text":"Yeah, so I'm gonna blow your mind here with an alternative to this. Yes. This is an app that used to be called Well, it was an app called clip menu and it is existed for a long time it was free was just sort of existed, and shit might not have been free. But either way, I hadn't seen an update in forever. And when I went to use my new computer, I found out it didn't. There's no way to install it. The installer was totally broken. So I started to explore some new alternatives to clip menu and I found this app, which is actually clip menu open sourced with a ton of updates called Clippy. So the get the pages Clippy CL IP y hyphen, app.com. And Clippy is basically the continuation of this clip menu app that I use so much. And it is totally configurable. You can say, hey, use, remember the last 100 things I copied, whoa, it can copy a rich media. It can paste in like images and stock images and stuff. It's pretty darn sweet. You can also actually use it as my primary like global snippets manager. The keyboard shortcut on your computer is just Command Shift v. So that's super easy to use compared to Command V, Command Shift v. and you get all of your history, your past hundred things and then your snippets, wood you can organize into folders and stuff like that, which I use pretty pretty frequently. But there's the preferences if you don't want it to copy The rich media you don't want it to save you the last 100 things. You can have it save the last 10 things if you want, but it's open source. So you github.com forward slash Clippy forward slash Clippy, double forward slash clippies. But if you go there, you can see it's totally open source. So you don't have to worry about them, like sending your clipboard history off to another service, because you can go look at the source if you want to.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"30"}},{"id":34,"start":925.229,"end":942.3,"text":"This is really sweet. I just, I just installed it. Yeah, super excited for that. Because Yeah, sometimes I have like, like three or four elements in sketch, and I copy them. And then I want to call me something else by accident. I want to still get those elements back. So it sounds like this will do that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"25"}},{"id":35,"start":942.569,"end":968.61,"text":"I use this thing. Literally 24 seven. I think like, most of the time, I'm pasting anything. It's it's, you just start to use your computer differently. I copy things freely. Like if I see something, just Command C, Command C, Command C, whatever, you never know when you're gonna need it. Yeah. And then it's always just hanging out in my last 100, clipboard items. It's pretty easy to find. And you can even navigate it by keyboard and stuff like that. So this is what I use for my clipboard management.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"42"}},{"id":36,"start":969.449,"end":974.7,"text":"Wow, that's that's great that this is like the whole show them. I can't believe that. I had never heard of that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"09"}},{"id":37,"start":975.029,"end":992.34,"text":"Yeah, I well, it. It only it took me getting this new computer to have to find an alternative to clip menu, which I was just so excited to see that it was one open source like the creator allowed it to be open sourced and to that it was so excellent. So yeah, pretty psyched. Pretty sweet.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"15"}},{"id":38,"start":992.819,"end":1006.65,"text":"So that's that's Alfred, there's so much that goes into Alfred, he even has his own snippets manager built into it. I use something else for that as well. But check it out. If you haven't done Alfred, it's worth spending a little bit a little bit of time with it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"32"}},{"id":39,"start":1007.099,"end":1008.21,"text":"Yeah, absolutely.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"47"}},{"id":40,"start":1009.049,"end":1013.97,"text":"Let's talk about to do apps. What do you use for? Do you use it to do app? If so what do you use?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"49"}},{"id":41,"start":1014.209,"end":1129.58,"text":"Yeah, I have one of the world's worst short term memories. I actually, my wife is a doctor of psychology and, and she has done more, you know, tests on me than I can, you know, possibly comprehend while she was getting her degree here. And one of the tests, she found out that my short term memory is so bad that it prevents me from having an IQ. Because I'm I'm really good in some areas and really deficient in other on the short term memory totally kills, like some aspects of my, my IQ test. So I have the world's worst short term memory. And because of that, I need a to do manager like crazy. So I used to do list, which is a site and native app. Well, it's an electron app. And there's a really excellent both Android and iOS app for it. And as far as it goes, it's it's feature rich enough that it's a brilliant to do list with sorting and categories and filters and whatever. But it doesn't overwhelm you with being too. Too much stuff. It's not trying to do too much stuff. It's not a repository for everything. Yeah, you can, it's essentially a to do list and you can schedule and time and collaborate on things with other people. And I use it so heavily that my daily to do list is pretty much planned out on their 24 seven, and anything that I need to accomplish ends up on there first, I use it for sorting of issue queues and stuff like that on projects I'm working on to remember, and I use it for planning my level of tutorial series. I use it for everything. restaurants that I want to go to whatever if I need to remember anything. It goes into detail as to because I'm sure as hell not remembering it. Otherwise, it's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"54"}},{"id":42,"start":1129.58,"end":1132.71,"text":"like sweet, do you? Are you paying for it? Or is it free? Yeah, I'm","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"49"}},{"id":43,"start":1132.71,"end":1147.02,"text":"paying for it. I've been paying for maybe two years now. A big fan. As far as to do list apps go I like it because it's it's simple, but has enough features. I think that's sort of the sweet spot is what you want it to do. sort of thing.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"52"}},{"id":44,"start":1147.05,"end":1147.89,"text":"Yeah. For me, I","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"19","ss":"07"}},{"id":45,"start":1147.89,"end":1170.9,"text":"don't I don't want this monolithic sort of thing that does a whole bunch of stuff other than to do lists. You know, I tried using things like Trello to manage to do lists, and it just did too much stuff that wasn't wasn't a to do list for me, right? Yeah, not that Trello isn't an amazing tool for all sorts of other things. But for to do list. I used to do list big fan big fan.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"07"}},{"id":46,"start":1171.17,"end":1374.39,"text":"That's pretty sweet. Um, this looks very similar to what I use. And I use a thing called things and things is a to do app. And I've used it for probably 810 years now forever. It's funny like I bought it I think seven years ago I finally broke down and bought it and after seven years they released things for which is just about a week or two ago and I easily bought a no problem. I was super happy with it. So things is a to do application for OSX. And I believe there's a Windows version, but there's one for for iOS as well, they'll sync together. And the whole idea behind things is this philosophy called Getting Things Done. And if I highly recommend that you read the book by David Allen called Getting Things Done, it was just released for like, sort of like a modern, like, email based era, it's been around forever, it's like kind of this cheesy, like corporate thing that like, if you work at a bank, you wear it, and it's as cheesy as it is, is really, really good for anyone who has problems, getting things done, being overwhelmed with the amount of stuff forgetting things, unable to, to focus on on the task at hand. So the whole idea behind getting things done is you get it out of your head and into your system. So if it's if you're trying to, like use mental energy to remember these things, that's bad. So you should put it into your inbox, which is things has the concept of an inbox, and you just dump it in there. And then once you are in things once it's out of your head, and once you have some time, you have the ability to assign these things, these tasks to different aspects of your life. So they're called projects in things. So you can drag them into specific projects. So I have one for things that I need to do for my own course platform, things I need to do for the podcast, things I need to do for my entire life, like things that need to be fixed around the house and whatnot. And then every day, or what I'll do is I'll open up things, and there's a today section, and then you drag things out of your, you can drag things out of your different projects and put them into today. So you know exactly what's on your plate, what order you can tackle them in on, they're still associated with a certain aspect of your life. But you can you have sort of like a order of operations, and there's a whole lot more to it, you can assign dates to things, you can have attachments, you can put notes on them, I don't use that stuff all that much, it's part of why I like things is that it's, it will allow you to go as deep as getting things done will let you but on the surfaces surface, it's very, very simple. There's another big one out there called Omni focus, which is like if you can learn to use that you're a monster because it's amazing. And it's just it's like well oiled machine. But it takes there's a big hump and I found it was too hard to get over that hump of learning how it actually works. So if you're interested in like getting things done, read the book, and then get things or to do list or any of these ones that have project based tasks. Because they'll definitely, definitely help you out and simplify your life. You don't have that anxiety of forgetting things or having too much on your plate.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"31"}},{"id":47,"start":1374.75,"end":1416.87,"text":"Yeah, and it looks like I'm I hadn't heard of things I'd only heard of to do it. Because obviously you find a solution that works. And yeah, you don't go searching for too much more. But it looks like they do the really the same thing. I'm hearing you talk about this. And it's like exactly how I it's exactly the same anyways. Yeah. So it's funny that we both have the same process. And I also arrived at to do it after listening to getting things done. which I found to be just for for me, like I said, with the short term memory issues it is like it's brilliant when you you feel like actually in control of things. So yeah, getting things done is just a totally invaluable for productivity overall.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"54"}},{"id":48,"start":1416.9,"end":1441.38,"text":"Yeah, I would say I'm just looking at the the website now things is a one time 50 bucks for the Mac App. 10 bucks for your iPhone app, and 20 bucks for the iPad. So huge downsides to that is there's no web interface. And if you move away from the Mac or an iPhone, then you are out of luck. So yeah, I would probably if I was picking it up today, I would probably pick up to do his","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"36"}},{"id":49,"start":1441.98,"end":1447.56,"text":"To Do List cross platform desktop web, Android, iOS, Windows. Yeah. So don't","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"01"}},{"id":50,"start":1447.56,"end":1463.49,"text":"don't get things get what it does, but don't buy it because unless you're you're all in on OSX and not now ever gonna move. Cool. So that is that is our to do apps. What do you got next for me, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"07"}},{"id":51,"start":1464.72,"end":1570.17,"text":"Yeah, let me check. Yeah, so here's something that I use a lot in a more web developer sense here. I use a ton of aliases in my command line. So for I use, I turn with fish shell if you're using bash or whatever, any of these things, you can set up aliases. And you know, I don't know if if everyone sets up a lot of aliases, but if I'm if I'm typing something, essentially more than a couple of times into my command line over the course of a couple months or whatever, I'll set up an alias for it. For instance, even get the the any of my sites running You know, typically you put in a script in your package file, which is, you know, NPM start or whatever. And then you have to type in NPM, run start. And I am so crazy about these aliases that I don't want to have to type in NPM, run start, I want to type in start and just run start it. But in addition, I actually have everything forget, right? You know, instead of doing git add period, or whatever the command that you use, typically for your Git commits, I just do add calm, I use calm for commit calm and then type the commit message, then you don't have to write git commit hyphen, M, then the commit message, just like little things like that, that are really personalized for me, like, I'm not going to publish these things out and have everyone use them because they're, they're, they're terminal commands that I'm personally writing. And they're not meant to be sort of globally used. And I found that writing these very, very personalized get snippets, or command line snippets, can just like really, really just, I don't know, remove a lot of typing from your life, especially things you type a ton, like a git commands, or NPM installs and stuff like that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"24"}},{"id":52,"start":1570.68,"end":1599.36,"text":"Yeah, I use those quite a bit as well. One specifically that I use all the time is, you know, when you, you start a new project, and then you forget the Git ignore, and then you add a whole bunch of like, dot files or whatever, it doesn't need to go in the repo. And then you have your Git ignore, it's sort of too late. So I have this alias for like git, like, oops, or whatever I aliased it to, and that will just remove anything that's in my dot file that I've previously added. To the repo.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"26","ss":"10"}},{"id":53,"start":1599.66,"end":1621.14,"text":"Yeah, nice. I saw somebody had a hilarious snippet that was just like, or alias that was just like, please. And all it did was like rerun the previous command with sudo, and whatever. So you don't have to type the command again, or whatever. And you can just say, Oh, I ran this. Oh, gives you a new permissions error, please enter. And like, I just think that's hilarious.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"39"}},{"id":54,"start":1621.2,"end":1627.56,"text":"I just added a card to our show ideas for the command line, because we'd do a whole episode on command line stuff.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"01"}},{"id":55,"start":1627.74,"end":1634.91,"text":"Yeah. Okay. Well, then let's not get too much more into those then. What else do you got? I know you make heavy use of text expander.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"07"}},{"id":56,"start":1634.94,"end":1730.46,"text":"Yeah, so text. expander is probably my most used application besides Sublime Text in the browser. And I find a lot of people don't really understand what it is because the first thing that I hear from everybody when I talk about text expander is like, you know, Mac OSX has that built in. And it yes, it is obviously a text expander. So you write hi and hit tab, or you write hi and Dhoni and hit tab, it will just automatically expand it. That's the very basics of it. But text expander is useful for a whole lot more stuff. So I primarily use text expander. For coding, I've actually stopped doing snippets in Sublime Text, and I've moved all my snippets over to text expander so that I can use them whether I'm uncle pan or another editor, no problem. It has a clipboard paste into place. So like let's say I have a support email. That's what I use it quite a bit for. And I want to reply to somebody with like a canned response. I'll have a snippet for that. And it will say, Hey, your name, thanks so much for the email, and then it will give them the canned response. Or even just that one little part, hey, blah, blah, blah, thanks so much for the email that takes me like 10 seconds to write, or one second with a snippet. So what I'll do is quickly copy their name into my clipboard from the email, and then I'll hit the snippet, and then it will automatically reply to them with their name in the thing. So it'll take whatever's in your clipboard and paste it right into this actual snippet. So it'll interpolate actual data. So that is really sweet.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"14"}},{"id":57,"start":1731.42,"end":1745.22,"text":"Yeah, I, I was going to start using text expander. And then they moved to the subscription model. Yeah. And then I just started Googling text expander alternatives because like, I can justify paying a subscription to that","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"28","ss":"51"}},{"id":58,"start":1745.25,"end":1766.43,"text":"I yeah, I'm still on the the one time payment. I hate that all these apps. That's part of why I like things. I don't like that all these apps are moving to a subscription model. I much rather pay for a once and be done with it and not have it. chip away at me every single time there is a really nice alternative to text expander that's called I find it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"05"}},{"id":59,"start":1767.36,"end":1801.26,"text":"While you're looking. I think the speaking of apps that are productive that have gone to a subscription model. I used to use Ulysses all the time, which is just like a basic note taking app, but it's really nice. It has like nice synching features. It has a you know, markdown support and stuff like that to make really nice looking notes. You can download themes for it. I know. I'm a sucker for themes for stuff. So but they just went subscription model and I can't believe it because it's not that like I already paid for this app. I paid a decent amount for the app and now it's subscription model. And I'm just like,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"27"}},{"id":60,"start":1802.34,"end":1802.88,"text":"Ah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"30","ss":"02"}},{"id":61,"start":1802.909,"end":1806.99,"text":"yeah. All right, my own. All right, my own electronic note taking app.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"02"}},{"id":62,"start":1808.37,"end":1949.46,"text":"Yeah, I get it because they need to like continually pay, or they want to make more money, but I just hate, I love being able to pay for it once. And then every time you have a major update with nice new features, major updates, it's do it. So the alternative is called a tax, then it's five bucks, one time payment. I used that for maybe a year until I got pretty heavy into some of the stuff that TextExpander did. And then I had to actually buy it, because so let me talk about some of the other stuff that has dropped down variable data. So one thing I used to do for student discounts before I completely automated the student discount process right now, but before I used to reply to them, and there was a Hey, can I have a student discount? And then I would, I would say, hey, blah, blah, blah, clipboard name. Thanks for the email. And then I would like ask them a question about about their school, depending on how much information they've given me. So if they've left out some information, or if they've given it all, to me, I want to say that sounds really interesting. Whatever it is, so what it will do is it'll pop up this little interface and give you a drop down of like six or seven possible questions. And then we're able to select one of those, and it will insert it in. So sometimes your snippets aren't just current carte blanche Is that a thing? So you have to be able to make them a little bit variable and having this possible drop down of options. Is is super helpful in text expander. And then the final one I use is called case sensitive expansions. So I always say, let me know, you type Lmk. And it'll expand to let me know. But sometimes, I'll be it'll be in a sentence where it says, I'm getting them Tuesday. So let me know if you want in. So that's all lowercase. But then I might have a sentence that says, Let me know if you're interested in coming. So that's capital, let me know. So TextExpander will allow you to say like capital L, M, k lowercase, and then that will expand to the proper case, which is super helpful. You don't have to spend time going back and correcting any of the stuff that it has. So if you think text expander is just expanding, take a little bit more time looking into it. Because time invested in that air is always paid back.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"30","ss":"08"}},{"id":63,"start":1950.179,"end":1959.81,"text":"Nice. Yeah, it's amazing how those like that little like that case sensitive thing. Yep. It's amazing how those like little things just add up to be such like nice quality of life improvements.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"30"}},{"id":64,"start":1960.29,"end":2029.35,"text":"Today, we are sponsored by fresh books, fresh books is the bee's knees for anytime they need to do your books with a small business, medium sized business, large business, whatever it is keeping track of your invoices in different currencies, being able to expense being able to remind one of my favorite features is the the like robot reminder. So if you've got a client that's not paying, you can log in, you can see that they've logged in, and then you can make Freshbooks follow up for you. So you don't have to and that really like saves a little bit of your relationship. So it's not you that shaking down a non paying customer, it's the system or the robot that will shake them down and say, Hey, reminder, this is the unpaid invoice. Make sure make sure you pay it. They've got online payments as well I use stripe and PayPal credit cards right on my invoices, so people can pay them right through. They're really great. Go to freshbooks comm forward slash syntax to get a 30 day free trial, make sure you enter in syntax into the How did you hear about section so Scott and I can feed our family and pay for our MacBook Pros? Yeah, absolutely. What else do you have?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"40"}},{"id":65,"start":2030.76,"end":2089.65,"text":"Yeah, so um, this is this is one that is a little less techie, I use pen and paper pretty heavily. I use a graphing paper like those big old graphing notebooks. And I always have a pen and a graphing notebook handy at like all times to jot down notes to plan to draw things out. Because you know, you could open up an app and start drawing out some diagrams in the app or whatever on a tablet. But to me, like the ease of use of not having to turn it on and grab it, pick it up and just start drawing or writing is is really important for me, because like I said short term memory things come in, they go out very quickly. So I committed to paper and then I'll make a further organization of those notes into to do list if it requires me to do any further action on it. But a pen and paper is extremely extremely, extremely important for remembering ideas and keeping things getting things down and just keeping stock of everything.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"50"}},{"id":66,"start":2090.19,"end":2106.15,"text":"Yeah, I used to use pen and paper quite a bit. I had like a moleskin where I would take notes in it and I've since moved to just using Evernote for that but I definitely missed the The freedom and the distraction list that pen and paper gives you so maybe I need to give it another shot.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"34","ss":"50"}},{"id":67,"start":2106.44,"end":2131.86,"text":"Yeah, and part of the problem with like a moleskin, is there still a barrier to entry? Right? You got to open it up, like I'm using like a spiral, big full sheet, graph paper. And so like, it's always open, and there's always a pen sitting on it. So I don't even have to open it up. I just open the cap off dependent start writing. Ease of use is important for me there. But yeah, that's definitely definitely something I use all the time. Yeah, what about you anything else,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"06"}},{"id":68,"start":2131.94,"end":2205.21,"text":"I've got a quick one right now, which is video speed controller for Chrome. So I've talked previously about watching content at 1.5 to x, even three x in some cases. And what video speed controller will do is it'll hitch on to any html5 video, which is almost every single video on the web now, it'll give you this little tool where you can increase the speed playback rate of the video, as well as jumping around in it. So I find that both very helpful because on YouTube, you can skip ads really quickly, you can hit it once, and it's past that five second wait time. And second, if you are watching anything, I never watch anything at one x, it's always at two, two and a half three x. And that is huge for being able to consume content quickly, I find that I often close stuff down when it's one x because I get bored of it. And I find myself drifting. Whereas if it's way faster, I'm paying attention and getting a lot more, getting a lot more in which is terrible for conferences now because I go to a conference and I'm sitting there being like, this is so slow, I could probably get this done in 20 minutes with speed and jumping.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"31"}},{"id":69,"start":2205.75,"end":2231.94,"text":"Yeah, that's hilarious. Yeah, I do. I mean, I do all that podcast set to x and all that stuff, too. So definitely one of those things I can help you get through stuff that is if you can, like focus on it. Sometimes if it goes too fast, you'll start to gloss over a little bit as well. So maybe it's a little bit about finding that sweet spot that you personally can handle. I'm sure it's a little bit about like speed reading to just like takes practice.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"45"}},{"id":70,"start":2232.96,"end":2244.98,"text":"It definitely takes a lot of practice, maybe a year to get out to two x but it's just inch it up by 10%. Every single time that every couple of weeks and you're gonna learn your brain will catch up. No problem.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"12"}},{"id":71,"start":2245.4,"end":2351.46,"text":"Yeah, let's talk about keyboard shortcuts. Because keyboard shortcuts are really important for a lot of reasons. And in memorizing the keyboard shortcuts, you don't have to take your hands off the keyboard to work. But one thing I like to do is I'm not afraid to modify keyboard shortcuts and applications and really set up things that I do all the time. For instance, I edit a ton of videos, if you've seen any of the thousands of videos on my YouTube channel, I did all those by myself and for editing, your frequently wanting to cut the video, and then maybe roll up the current time to where the playhead is and stuff like that. And those keyboard shortcuts on Mac OSX they'd be like command to bracket command right bracket or I don't even know what the blade tool one is. But I use this all the time. And so what I did is I moved those to even just straight keys without modifiers because you don't type really in Final Cut that much. So I have the C key for cut the X key for to move up the cut up until and then the Z key for the opposite of that. And I edit videos like I'm playing the piano, I'd never take my hands off of those three keys. And I move my mouse to control the playhead. And I just quickly click lick lick lick lick, and I'm just tapping. And I've gotten so good at it. But I wouldn't, it wouldn't be possible if you had to do command bracket or whatever, take your hands off of their current orientation, I can just leave them on those keys and really chop up videos so quickly. But you know, if somebody else came in to use my setup, they might be like, what the heck is going on here? Yeah. But it's your setup, right? If it's your hairs, it's gonna make it a lot easier. The things you do all the time, make them easier for yourself with keyboard shortcuts.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"25"}},{"id":72,"start":2352.23,"end":2356.98,"text":"Oh, that's a really good one. And so do you set those you set those shortcuts in the app itself?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"39","ss":"12"}},{"id":73,"start":2357.399,"end":2379.98,"text":"Yeah, it depends. Final Cut has really nice keymapping. So for that I use the the in app version. I think there's most of the time. Yeah, most of the time things. Sometimes. It just sends you right into the Mac OS settings for keyboard shortcuts and you do it in there depends on whatever the app is pretty sweet. Um,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"39","ss":"17"}},{"id":74,"start":2380.169,"end":2494.8,"text":"so I have gotten a lot on keyboard shortcuts here. So previously, in episodes I've talked about using something called carabiner elements, which will allow you to map your caps lock, which is a useless key, no one needs a Caps Lock key. It'll map it to the combo combo of shift control, option command and that will give you is a sort of a fifth modifier key that will allow you and it's no apps will ever use that. So you can do caps lock, Q, Caps Lock, a Caps Lock arrow, and over and over and down. So I use carabiner to map it. And then I use a, what is it called better touch tool to map all of those keyboard shortcuts to launching applications to minimizing windows to two snapping windows, the left or the right to move into two different monitors, all kinds of different stuff that I have for, for launching different apps and moving around my Windows is is super helpful, you never have to worry about overwriting any of the built in keyboard shortcuts. So definitely check that out. You're, you're interested in it. Nice. And then I just want to talk about like, like keyboard shortcuts that everybody should know, part of teaching in person makes me realize that most people don't know any shortcuts. So like a little tip is, whenever you're in an application, just open up the menus and click on all of them. And they always have the keyboard shortcuts beside them. So for whatever action you're trying to take, take us back in and figure out what the keyboard shortcut is. But there's a couple that are just like system wide that a lot of people don't necessarily know. And it's like, it's sort of like beginner stuff. But I think a lot of people just don't even are totally oblivious to actually having them. So","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"39","ss":"40"}},{"id":75,"start":2494.83,"end":2503.92,"text":"yeah, some of these are infuriating when you see people giving like a conference talk, yeah. And they're not using one of these like basic keyboard shortcuts, you're like, oh, man, why are you doing that? That's awesome. touching","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"41","ss":"34"}},{"id":76,"start":2503.92,"end":2572.29,"text":"your mouse. Yeah, the one that gets me all the time is I have students drag their windows around. So like, they'll they'll have their editor. And then they'll have a browser. And then they'll drag the browser like off enough that so that they can see it, and then they'll drag, drag their browser back up. And so they can get back to their code. And they're just constantly like shuffling papers around on their desk with all these different apps, when the two that everybody should absolutely know is command tab or all, or whatever it is on Windows control, control will open up your app switcher. So you can hold down Command and just keep hitting tab to switch between all of your apps or or use your arrow keys to switch between the two. And then the lesser known one is command backtick will allow you to cycle between multiple windows of that app. So you got three versions of Chrome open, or you got two Sublime Text, windows open ended a cycle between those two, you hit command backtick. And that will do the same thing as command tab. But for only that application with multiple windows open.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"43"}},{"id":77,"start":2573.82,"end":2589.54,"text":"Yeah, another one very simple. You probably use it all the time. In most applications, Command T if it has a tab will take you to a new tab. So Command T is something I use all the time, right, because working with tabs is pretty common.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"53"}},{"id":78,"start":2589.6,"end":2594.79,"text":"Yeah, and Command Shift t if you accidentally close a tab, it'll reopen the the latest tab.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"09"}},{"id":79,"start":2595.38,"end":2597.85,"text":"Yeah, man shift T is a definitely a big one.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"15"}},{"id":80,"start":2598.57,"end":2662.74,"text":"Another one that gets me when people don't do is being able to move around your text editor or your email or just text with your cursor quickly, you shouldn't have to like move your mouse and click where you want to go, you should be able to jump by word by word and move along. So first, actually, I tell people to go into your keyboard settings and crank up the key Repeat as fast as it goes. So that when you hold down your arrow key, it just flies instead of you waiting there and look looking at the screen. And then second, if you use whatever we got here, I don't even know what the keys are, I have to look at my actual hand. If you want to jump word by word, you just hold down Option and use your arrow keys. And that's much faster than moving letter by letter. And then you can use Command arrows to move line by line so to the front of the line or the end of the line. Nice and quickly. And if you want to select the text in any of these combos, you hold down shift. So I'll put these all in the show notes. Yeah, because you should learn all of them.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"18"}},{"id":81,"start":2662.74,"end":2696.64,"text":"And this is one that I use all the time in VS code for to copy a line or to move a line. So if you hold down in like Vsq I don't know if it's the same with other text editors, I would guess I would assume that it is if you hold down Option and hit the up or down key it's moving that particular line up and down. I found a lot of people don't use that. Another one is if you hold Option Shift and hit up or down it copies the line and moves it up or down one. So if you need to copy a particular line or you want to move a particular line, those two are used constantly by myself.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"44","ss":"22"}},{"id":82,"start":2696.85,"end":2715.36,"text":"Yeah, absolutely. I'm switching tabs between mean switching between tabs really quickly hold on Command Option, use your arrow keys to switch between tabs. If you need to. If you need to jump to tab two or to tab three, just hit command one, command to command three command for those will jump to the first, second, third and fourth tabs. Unless","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"56"}},{"id":83,"start":2715.36,"end":2717.4,"text":"you're in VS code. That's no","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"15"}},{"id":84,"start":2717.79,"end":2718.66,"text":"good. No, if","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"17"}},{"id":85,"start":2718.66,"end":2742.24,"text":"you hit command two in VS code, it takes you to a second window and if you have one window, it opens up your tab in a new window or whatever. And so I actually if you go to my GitHub s Alinsky, or they level up tuts GitHub, I'll put in the show notes. I actually have a keymapping in my Zed just their guests, guests.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"18"}},{"id":86,"start":2742.75,"end":2744.25,"text":"I think g OSS","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"45","ss":"42"}},{"id":87,"start":2744.55,"end":2767.98,"text":"D asks, yeah, yeah, whatever that is, I have a snippet in there, you can paste it into your key bindings, and that actually successfully remaps, one through nine to year one through nine tabs correctly. There's like eight open issues or even more than that on the VS code in there. I don't know like what it is, if it's that that's like a Windows thing or what, but they're just sort of like, why would we want it to do that? Yeah. Like that's how every other application is.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"44"}},{"id":88,"start":2768.07,"end":2780.43,"text":"I think that that's part of why Adam had such an easy win is that they just copied everything sublime did in the VS code has a bit of different shortcuts. So you gotta spend a bit of time relearning, which is always frustrating, but I guess worth it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"08"}},{"id":89,"start":2780.79,"end":2786.28,"text":"Word. Yeah, anymore. Their killer keyboard shortcut Hillary sequence. I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"20"}},{"id":90,"start":2786.28,"end":2810.97,"text":"think that's, that's all of my keyboard shortcuts that I've got there. I've got some, some other like, I guess like softer ones. That's not necessarily an app. But sometimes I find myself just opening up Twitter, or doing command tab and opening up a website, which is mindlessly, like, how many times have you been on Facebook, closed Facebook, and then new tab and type Facebook? and go do it? Right?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"26"}},{"id":91,"start":2810.97,"end":2811.51,"text":"Yeah, absolutely.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"46","ss":"50"}},{"id":92,"start":2813.04,"end":2849.01,"text":"What I'll do is, I'll rename my Twitter app every week to something like, Don't open this, or, or deep work, or what does something silly so that when I hit option, space, Tw, Twitter does not pop up. And allow me to open it mindlessly, I have to explicitly remember what I called it or find the icon. So as good as Alfred is it also, it will make that habit in your brain. concrete. So you have to do things to stop yourself from mindlessly opening up distractions. Yeah, so","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"53"}},{"id":93,"start":2849.01,"end":2923.68,"text":"here's something along the same vein as a productivity thing, I use an app called focus, a focus comm where you can set it up and say, Hey, do not Lau me to visit any of these websites. And by default, it has all the big ones like Facebook and Twitter and Reddit and whatever. I obviously have YouTube unblocked from there, because I use YouTube professionally. And then so basically, if you open up a tab while you're focusing, and you can set schedules, and whatever it gives you like a quote, that is pretty much shaming you into working. And it's not like an aggressive quote, but they're like, you know, they're inspirational quotes that make you think like, Oh, yeah, that's right. And that's actually the worst. Because when you get that muscle memory, and let's say, you go to Facebook, you, you maybe you're focusing, right, I have focus turned on, I go to Facebook, it gives me the air, I close the tab, I do something, I hit the tab again, I go to the Facebook, gives me the air, and I'm like, Oh, yeah, I just did this second ago. Like, it can really make it apparent how many times you're browsing to this stuff, without even knowing it mindlessly, whatever. And this just really prevents you there. You can even block apps with it. I think it's Mac OS only. No windows. Sorry, windows, folks. But I'm sure there's a ton of other applications that do the same thing. Yeah, I use one blocking yourself.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"29"}},{"id":94,"start":2924.009,"end":2947.14,"text":"Sorry, no, no, I used to use one called self control, which will essentially just put an entry into your hosts file and block it. Which is funny because you can't actually edit your host file. So if you're trying to do some dev work at the same time, you're out of luck. But I switched to focus, because it'll allow you to block apps as well, like TweetDeck, or whatever that you're using on your desktop.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"48","ss":"44"}},{"id":95,"start":2947.41,"end":2965.32,"text":"Yeah, and you can turn on hardcore mode, which allows you to not be able to shut it off, or change the settings. If you are like, if you find yourself, hey, well just bypass it by quitting focus. And then the hardcore hardcore mode is gonna say, Ah, you know, it's the Jurassic Park Dennis nedry in there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"07"}},{"id":96,"start":2967.15,"end":3052.02,"text":"That's pretty sweet. I'm just looking here I've got any other from I have a whole email workflow called the breakout email management workflow. Maybe we'll save that for another podcast, sort of going into all the different pieces of it, how I manage my email or try to at least manage my email. So we'll we'll save that one for now. I guess my last one that I have is just like automating any sort of exports. I don't use this one a whole lot anymore. But sometimes when you do a design that's heavy on custom elements in Photoshop or sketch You need to export them. But then you make a change to the design, you need to re export them in sketches is pretty easy, you can just like, you can just re export them and they'll go to the same folder and overwrite them. You can even script it. With some command line tools, every time the file changes, you could like get a gulp task that will re export your sketch project. But when I use Photoshop back in the day, there was one called slicey. And then you just name your layers like the back in the day, it was like button dot png or hero jpg, and then it will you just drop the PSD into slicey. And it will kick out all of your actual value. So anytime the PST changes, it will just regenerate all those assets for you, you don't have to worry about like, you don't have to worry about slicing and dicing it up again. So I was a huge time saver for me when I was doing that kind of work.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"27"}},{"id":97,"start":3052.919,"end":3083.1,"text":"Yeah, and along those same lines, I know I mentioned figma a bunch of times in figma. If you set all your exports or like assign a layer or a particular component to be exported, they have like a really nice export all button in the top right. And if you select that it gives you just like a bunch of checkboxes. So same thing, you can just re export all of your things over and over again, if you want that way, just by putting all of your exports in one one spot, I guess sketch kinda does that too. Right? Yeah, yeah, kind of all of your exports there. Yeah, absolutely.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"52"}},{"id":98,"start":3083.16,"end":3131.55,"text":"Pretty sweet. Um, and I guess the last one I have is maybe you selling so much of this, I use something called Cloud App. To take every time I take a screenshot, it will automatically upload it to cloud app. And you can also take video on it really quickly. You can take webcam video, you can put annotations on top of it. So anytime you're trying to get feedback, send somebody a screenshot of something, you can drag and drop files right into this thing. I whenever I do a podcast with somebody, like even Scott, and I need to give them the audio, I just drag it into it, it gives you a link immediately. And then it will upload I can go have a beer or something. Well, the upload is actually happening. You don't have to wait. You don't have to wait for it to be finished in order to give them a link to something so big fan dues anything like that?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"51","ss":"23"}},{"id":99,"start":3131.85,"end":3156.72,"text":"No, no, I don't Not really. I have a separate I used record it for recording gifts and sharing those first stuff. But I for the most part, I use Google Drive and just save everything there. And then you do have to wait for the thing to upload to get those links. But I did just get gigabit internet. So I'm not waiting too long right now. But yeah, definitely. That's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"11"}},{"id":100,"start":3156.72,"end":3213.72,"text":"pretty sweet. Another thing I use it for is like a GitHub issue, I'll take a quick animated GIF, it will automatically host it. And then you can just embed that thing. You just do the name the URL of west.io forward slash c 949. And then you do forward slash content or forward slash Hello dot png or Hello dot GIF, and then it will just embed it right into that thing. You don't have to worry about it. Sometimes I've run into the issue. It's gotten quite expensive. And I don't have like I have like pay like 20 bucks a month, which I think is a bit too much. And then I still if I tweet something out and it gets popular, then I still run out of bandwidth. And then they like take it down which is so frustrating because I know how much bandwidth costs and it's not $20 a month for me tweeting out a link to something so that's as a bit of a downside to it. But for almost everything else. It's great. Nice. Cool, what about a sick pick? You got a sick pick here today, Scott.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"52","ss":"36"}},{"id":101,"start":3214.35,"end":3310.29,"text":"I have a sick pick. Okay, so phone cases, right? They're sort of a necessary evil. You have unless you're living life dangerously you probably have some kind of phone case which I have lived live dangerously a lot. I hate phone cases. I hate how bulky they make your nice phone feel. Okay, I have the Nexus six p and hopefully it's a new pixel phones very soon, right, but the phone feels so nice. Last thing I want to do is wrap the whole thing in a giant bunch of plastic. So I found this case, it is incredible. It's the rhinoshield they have some awesome videos of them dropping them and it's really just a bumper. It's a thin plastic bumper. There's nothing on the front, nothing on the back. But it raises your phone up just enough like I've dropped to this phone on concrete so many times and it looks brand new. And you still have access to like the back of the device. So it still feels like a nice premium thing in your hand. It's not like a just a giant chunk of plastic and it's not that thick. You if you have wireless charging, which so many Android fans do and you wouldn't iOS fans or don't experience the joys of wireless charging, no like it still lets you have that wireless charging. So for me, it's rhinoshield I think it's called the crash guard bumper. But there's a ton of videos on YouTube of them testing their phones, just dropping them On searches stuff, and I can personally test that I have dropped this thing hundreds of times with this case, and not a single scratcher done on it. So big fan.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"53","ss":"34"}},{"id":102,"start":3310.77,"end":3311.85,"text":"That sounds pretty sweet.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"55","ss":"10"}},{"id":103,"start":3312.39,"end":3398.55,"text":"Yeah, yeah, my last time not having a phone case and didn't like comic tragedy. It's like one of the most ridiculous things in my life. I was like trying to install a floodlight in the house. And I was like a story up on a giant ladder. And, and so this is like, it's a total cartoon here. I had my phone I was so like, careful with this phone. I never ever broken it. I was just like, I didn't have a case. I was just super careful with it. This is the last time I had a phone without a case. And I went to take the ladder down, which is giant tall ladder. I take the letter, I trip over a garden hose, the garden hose. Oh, no, I'm sorry, I didn't trip over the garden. I kicked the garden hose. Because it was in my way, like get out of here. garden hose flies. And it actually turns on because it's one of those handled ones. And it's on the jet mode which sprays right at me. I'm holding a giant ladder above my head. So I dropped the ladder on my head. I dropped the ladder in the hoses still spraying me and my phone falls out of my pocket and completely shatters. Oh, and I'm sitting there like soaking wet. And I get inside the house. And my wife's just like, Hey, what happened out there heard a bunch of noise and I was just like, I need I need 15 minutes here. I can't talk about it. This some stuff just went down outside. So ever since then. I've been really good about a phone case because you never know. And some like, you know comic mischief is gonna go down and you're gonna be the victim.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"55","ss":"12"}},{"id":104,"start":3399.12,"end":3416.79,"text":"Yeah, I used to never have a phone case and I dropped it one too many times. And I dropped mine and it bent the side which means that you can't go for like the hundred dollar Apple Store replacement. Just not the end of the world when when they can do that. But I finally got I don't know what it is some black one out to check this one out, though.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"56","ss":"39"}},{"id":105,"start":3417.18,"end":3423.21,"text":"Yeah, they're cheap. 24 bucks or whatever. Yeah, I like them. rhinoshield. Cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"56","ss":"57"}},{"id":106,"start":3423.24,"end":3545.88,"text":"Well, what about sick pick is another book some people seem to like the the What did I recommend last week or two weeks ago, I recommended the essentialism book, The disciplined pursuit of less, I recommend another one. It's called Deep work rules for focus success in a distracted world. So I think that what is happening now in our society, with all of the distractions that we have, and the internet and everything going on, is that it's no longer okay to be like the middle of the road at something, and it's no longer okay to just be mediocre at something. And there's a huge opportunity for you just to kick ass at whatever it is that you're doing in your job by learning to be more focused. And that's the whole idea behind this deep work book is how do you get into the state of flow? How do you get into the state where you are just totally in your actual work in going going at it 100% and not being distracted by all the other things that that goal that are going on in your life. And I feel like you can get a huge competitive advantage in life if you're able to get yourself into that state of deep work. So I read that I've read it, I think twice. Now I've recommended it to a whole bunch of people. And they've all said it's like a life changing book. It's it's really, really good. It's by Cal Newport, who I'll probably recommend a couple of his other books as well. But if you feel like you are a little bit distracted, or if you feel like you could probably get an extra 30% out of your day by not being so distracted. And that could mean other things. A lot of times people think it's just people on Twitter too much. But Twitter is part of my job. So I do do do go on it quite a bit in the day. But other distractions, being able to get into that state of flow, where you're just cranking through work is really great. So check it out.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"57","ss":"03"}},{"id":107,"start":3546.23,"end":3548.52,"text":"Now it's a nice topical tick. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"06"}},{"id":108,"start":3548.67,"end":3550.2,"text":"For productivity. There you go.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"08"}},{"id":109,"start":3550.35,"end":3551.7,"text":"Yeah, like that. Dang.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"10"}},{"id":110,"start":3551.82,"end":3563.67,"text":"Like, like I said, I love this kind of stuff, being able to squeeze a little bit of extra. I wouldn't say I'm a pro, but I'm definitely interested in it. I always like to try apply different techniques.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"11"}},{"id":111,"start":3564.23,"end":3567.51,"text":"Nice. Yeah, I think there's a lot lot to learn there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"24"}},{"id":112,"start":3567.98,"end":3573.09,"text":"Awesome. So I think that's it for today or do you have any shameless plugs? Are you good for today?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"27"}},{"id":113,"start":3573.27,"end":3575.01,"text":"I'm good for today. Maybe next time?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"33"}},{"id":114,"start":3575.52,"end":3597.45,"text":"Yeah, I don't think I don't think I have anything either. We have been getting quite a bit of good suggestions for shows up on Twitter. So if you have a topic that you'd like to hear us confidently talk about then. Even if we're not so smart about it, then let us know tweet me I'm at Wes Bos and Scott you are","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"35"}},{"id":115,"start":3597.779,"end":3599.97,"text":"at S kolinsky awesome.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"57"}},{"id":116,"start":3600,"end":3601.73,"text":"See you next time. See?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"00","ss":"00"}},{"id":117,"start":3605.069,"end":3615.57,"text":"Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"00","ss":"05"}}],[{"id":1,"start":1.319,"end":10.53,"text":"You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":10.559,"end":73.56,"text":"Welcome to syntax. This is the podcast with the tastiest web development treats today we're gonna be talking all about tips for a better work life balancing and get the most out of your work day and the most out of your the rest of your life. Pretty excited about this one got a whole bunch of tips from it with me as always, Scott Tolinksi. How you doing today, Scott? Hey, I'm doing super good. I went on a little bit of a, I was calling it a an apology tour yesterday, which is making me feel the apology to her was somewhat cut short, but then resumed in a much greater way later. So I got a couple stories. You got time for him? Yeah, let me talk about our sponsors real quick. And then we'll hear those stories. First one is sanity.io. They are in the headless CMS space. And today we're going to talk to you about something called their new portable tax, which is the new spec as well as the tool. And Freshbooks, which is cloud accounting for small businesses, freelancers, so we'll talk about both those companies partway through the episode. So tell me about your apology tour and all of your all of your woes. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":3,"start":73.56,"end":339.12,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"01","ss":"13"}},{"id":4,"start":341.52,"end":349.65,"text":"I know. I just did like why I remember like, at some point, when I saw the logic board, I was just like, Why? Why is this happening to me? Oh, my","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"05","ss":"41"}},{"id":5,"start":349.83,"end":635.46,"text":"gosh, I hate when stuff happens like that, where it just keeps the ball keeps getting dropped. There's a YouTuber I follow on YouTube or watch on YouTube called rich rebuilds. And he's just been detailing his process his like three month process to buy a used Tesla from Tesla. And they keep dropping the ball. They're like it's ready for pickup. And then it's not. And then Oh, man, you just go and go Google rich rebuilds on YouTube. Yeah, he dropping the ball. And part of me feel sorry, because there's so many moving parts in these companies. And no one is like, solely responsible. But part of me is just like, Come on, get it together. Go. I know, my first call to Apple was a nightmare too. And I was like, well, the computers showing this error message. I've tried doing this than this than this. I've tried booting into safe mode, and it works in safe mode. And then the tech will be like, okay, we want you to hold the shift key to boot into safe mode. I'm like, I just told you I did that. Like I told you it worked. So I don't need to do that again. But yeah, no, I'm just glad it's all over. So let's get into our episode about work life balance, because you know, mine's been a little rocky lately, and I'm happy to get a little bit more than yesterday was an excellent time to practice sort of being Zen like, so this is gonna be one of those things, I think that is about how to get your work better and better. Alright, so these are gonna be a bunch of tips on how to get the most out of work and life. But they're not hard and fast tips. Because I think part of the beauty of being a web developer and even more so part of the beauty of being a self employed web developer, as in a lot of you are is that you do get to enjoy some flexibility, you do get a tick off and go snowboarding in the middle of day if you want. And you do get to do a little work at evenings if you'd like as well. But I think work is a big part of our lives. And these are tips that are going to hopefully allow you to get the most enjoyment out of both work. And both life, this isn't going to be like a show where we say don't work so much or don't do it. It's more about like, how do you slam dunk working? And then how do you also get the most enjoyment out of your life when you're outside of that, and not so much that they're both kind of mushy? And you don't enjoy either of them? Yeah, you're gonna be LeBron James, at work. And you're gonna be Michael Jordan, in your lamb Indies. slamet. Cool. So yeah, I think this first one is really interesting. It's really to know when you're at your best, like when when is the time of the day in the mindset of your day that you are working your very best. So whether or not that's the standard nine to five, or that's, you know, seven to two, and then three to six, or whatever. What is that time where you really feel in the zone. And this is actually a tough one for me, because I was definitely the night owl type. You know, I work really super late. And I could really zone it, then that I found out that I'm also good at zoning it at like 7am. And if I do the 7am thing, then I don't have to stay up till midnight, and I don't have to feel like crap the next day. So experiment with this one. If you think that you're a night owl or your morning person or whatever I would, I would honestly, this is one that you want to actually try something else and see if maybe you are actually more productive at a different time. Yeah, I agree. I used to be a huge night owl as well. And that started shifting when I got married and had kids and right now I work a pretty standard nine to five, but I'm really looking forward to next year when my daughter starts school, drop her off at school I like eight you can be home by like 815 ideally, I would start at like 6am 7am as early as I possibly could. I can't do that with kids right now. But I definitely work the best in the morning. So when when it's time to get going. I just can't wait to run upstairs and start working. Yeah, yeah, and that's a big next one we have here and this was really helpful when I first started working for myself which is work when it's time to work in life when it's time to life. So if you work from home or even if you work at an office and you have access to your your daily things, it can be very tempting to tend to your your life's things during the day. So whether that's doing laundry, whether that's making phone calls, whether that's Just like I don't know, just stuff that I get sucked into all the time is searching classifieds, when I'm should be working, is searching for bikes and whatever it is that that's online on there. So having that discipline to be able to say, like, now is the time to work, and now is the time to do life and vice versa as well, we'll talk about this a little bit more as well, where when you're done work, you should be done work. And it's okay to think about those things. But if you let that bleed into your lifetime, and if you let life stuff bleed into your work, again, it can start to get kind of mushy, and then it's not so great.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"49"}},{"id":6,"start":635.539,"end":916.289,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"10","ss":"35"}},{"id":7,"start":916.47,"end":960.149,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"15","ss":"16"}},{"id":8,"start":960.149,"end":966.87,"text":"not ready right now either. But that's just because I'm a Marie Kondo doing it right now. So I pulled everything out, it's all all over the place.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"16","ss":"00"}},{"id":9,"start":966.96,"end":1092.54,"text":"One other thing about having a defined space for work is that I think there's something mental about sitting down at your desk or standing at your desk, where this is where I do work. And it's not the same as sitting on the couch or sitting at the dining room table. Because those are mixed spaces. And in both from at least in Canada, from a tax write off point of view, that's really important. Because you cannot use mix space to write you cannot write off a mix space, like I sit at my dining room table eight hours a day, that's a couple, maybe a third or half of my day, I can write off and it doesn't work like that. But having a defined room that is only for doing work does let you you write part of that stuff off. And then there's also a mental shift where you sit down and you're in work mode. And then as soon as I close the door to my office and leave, I'm out of work mode coming down from that as a little trickier. We've talked about that in the past as well, though, we're going from work mode to family mode or to life mode is hard, because you don't have a commute. Mm hmm. Just go down a set of stairs. That's one thing that I've been trying to work on as well. Yeah, that one is tough. Because, you know, I mean, our problems are so logical and so non emotional, right, and the code problems. So we're our brains get stuck in this logic mode, where we're trying to solve problems. And we're looking at things like this. And that isn't always the best state of mind to be in when interacting with your family, you want to be less logical, more, more emotional, more connected more there. And that transition is tough. I actually personally did have, you know, I love that aspect of having a commute, you could listen to music, you could listen to podcasts, you could take that time, if you you sort of know the general time. And then when you're home, you're home. And that's like that bridging the gap. And again, now I don't have that to the same extent. And it is a little bit tough. But I mean, talking about defined spaces, one of our sponsors has one of the coolest defined spaces, because their back end has some amazing tools to get it totally customized. To be what you want. If you're looking for a headless CMS backend solution that really allows you to make it your own space. Sanity is really it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"06"}},{"id":10,"start":1092.719,"end":1366.26,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"18","ss":"12"}},{"id":11,"start":1366.26,"end":1366.86,"text":"which is","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"22","ss":"46"}},{"id":12,"start":1366.92,"end":1368.12,"text":"if you ever heard of this genre of","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"22","ss":"46"}},{"id":13,"start":1368.12,"end":1373.19,"text":"music, I mean, no. Is it the chill beats to study to music?","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"22","ss":"48"}},{"id":14,"start":1373.25,"end":1627.68,"text":"No, no, that's a little bit ravy. For me those every time I find these like deep concentration, they feel a little ravy for me. So the head Bob is like this very interesting genre of music. That is I initially found it out from Casey Neistat, his vlogs have a lot of this similar music to it. And I was like, What is it about his music and I looked it up and it's a genre called head Bob. And I've just been kind of curating a little playlist here and there. And when I need to zone in on something I throw that on the dice. So don't Urban Dictionary head Bob though, cuz I googled it. And that's what came up. What else do we have here? blocking distractions is really important. I love Love, love the Do Not Disturb notifications on the Mac. That's turns off all push notifications. In general, I am very aggressive against push notifications. So I don't have them turned on for Twitter don't have them turned on for Slack, I don't have them. I pretty much don't have them turned on for anything other than email, on my phone, as well as on my desktop actually don't even have them turned on for email on my desktop as well just aggressively turned off. And that allows me to not get pulled out of that zone, which is so easy to happen when you're finally in it and you see a notification. Maybe it's something that bothers you. Or maybe it's something that you feel like you could just get down really quickly, then that pulls you out of it. Yeah, one of my big things is just simply even turning my phone upside down and not even like wanting to look at it because sometimes if it's your phone sitting there, maybe you get that like the Ambien notification or something that pops up and it just catches your guy and maybe you're thinking what is that and then I look over and the Detroit Lions did something that's not going to affect them in any sort of way because nothing affects them they just lose. So I did not need to read that notification. You know, the next one we have here is keeping hobbies. We talked about this a lot on the show is having hobbies both code related outside of code away from screens, that sort of thing. I personally have a lot of hobbies. You know, I play several instruments. I've been breakdancing for 1516 years. I work out in the gym. I spend time with my family if that's considered a hobby, but like, my recommendation is to have all sorts of hobbies both physical and relaxing are both like something like yoga would be probably both where you're actually getting moving, but it's relaxing at the same time. You want to have stuff that's away from screens. And I'm really bad at this. I spend way too much time staring at screens. I work all day on my computer and I play my Nintendo Switch and I watch them TV. Like I need more time away from screens. And I think everybody Yeah, I'm the same way I don't have a whole lot of hobbies anymore Just because like kids I don't have a whole lot of time but I definitely do keep a couple I like to cook I'm really into fermentation and looking to get into curing as well. So those are kind of fun fun ones to focus on as well as like barbecue and and whatnot. It's funny, they I've never heard somebody say that they're into fermentation. Like, I'm really into fermentation. I am I'm super into fermentation. I think that it's it's amazing. I have this this is like a bit of an aside but I have been fermenting garlic in honey woo for like a year and a half. And it's gotten to like a pretty gnarly stage. And I'm too scared to try it now because like, the thing about honey is that it's not pasteurized. So there's a potential for machoism, which will make you die. So I had to buy like this like pH monitor test if there's botulism in it, but it's been so long now that I'm a bit afraid to even even test it out now. Yeah, I don't blame me that would that definitely sounds scary to me. Yeah. I don't want to die. that would that would suck. Yeah, yes, yes. Please refrain from dying, that'd be great. The other one we have here is keeping up with exercise as well. We've said this many times on the show as well, where it's just amazing how regular exercise a couple times a week will make you so much more focused when you're at work and so much more present when you're you're outside of work. Because there's at least for me, I develop a huge mind fog when I'm in either one, when I haven't been exercising for a while. And it's easy to forget how good you feel and how focused laser focused you feel when you do have that exercise.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"22","ss":"53"}},{"id":15,"start":1627.71,"end":1772.1,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"27","ss":"07"}},{"id":16,"start":1772.1,"end":1772.85,"text":"Yeah, right.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"29","ss":"32"}},{"id":17,"start":1772.88,"end":2035.23,"text":"So I highly recommend going and back and listening to our productivity episode as well as reading the book getting things done by David Allen. It seems a little cheesy, so good, but it's super good. And you will enjoy it. You will enjoy it. Absolutely. Yeah, it's one of those books that I come back to all the time, just because of how many just important reiterations of that same idea you need. I mean, one of our sponsors here is going to really help you remove distract From your life as well and prioritize thing and that sponsor is a longtime sponsor of ours, which is fresh books. Because with fresh books, you really it gives you so many these excellent features that you don't need to keep track of things you don't need to have email so and so on your to do list or you don't need to have reminder to rescind up this invoice Freshbooks keeps track of all that stuff for you. Freshbooks is my favorite. We all know that by now, if you are a small business, if you're just sending a couple invoices to people sign up for Freshbooks because it's the best way to manage it. So I'm just gonna hang on a spotlight a couple of different features that I like about Freshbooks. First one is the branding, you can easily create custom invoices that have your logo and reflect your brand colors. So it doesn't look like a typical invoice that you get from every single thing. It looks like an invoice that is branded to your company, you can take invoice customization further by adding your own payment terms and personalization. Thank you, when someone pays it, you can send them a thank you email, multi currency, this is one that I use quite a bit because I've filled people in pounds and Canadian dollars in US dollars. And when it's in Canadian dollars, there are certain taxes that need to be applied. So it's really complicated to keep all of that up in the air and freshbooks just does a great job at it. So if you want to try Freshbooks, please go to freshbooks.com forward slash syntax and enter syntax in the How did you hear about a section, you're going to get a 30 day trial, no catch, no credit card required. Thanks so much to Freshbooks for sponsoring. Nice, cool. So the next one here we have is to walk away from difficult problems. And this one is super duper, duper tough to actually do. Because when you have a difficult problem, the number one thing you want to do is continue to bash your head against that wall until you solve that problem. I'm very guilty of this. And it is one that is important to understand that that is not always the right approach. Sometimes it's the right approach, right? Sometimes you've got the time, sometimes you're in the focus and you're in the zone and you want to just keep hammering away at this thing. Other times, that's not going to do it and you're going to get frustrated. And it's going to take you twice as long or three times as long as four times as long to do something. My number one tip for this is to take a walk outside my boss and I we used to have this really is not a great office, it's a big office. But because it was so big, if you did a lap around the office, that was a pretty decent walk. So if we did maybe like three laps around the office, by the time we did three laps or so we would feel really good. We'd feel we talk about non code stuff, we talk about whatever we're interested in. And while you're doing this, you're taking the walk, you're getting some fresh air, your brain is actually working on these problems still, and you're not even thinking about it. And then coming back to your desk, it almost always feels like a whole new mind a whole new game ready to go ready to get into something new. Yeah, at the same time, often what I'll do is I will have a problem. And I know that I'm not going to finish it by the end of the day. And if I find myself pushing it, that problem right till five o'clock, I'm just grumpy at at five o'clock totally, it takes a while to come down from it. So usually what I'll do is, if I know that I'm not going to finish it around 430, I just drop it and walk away from it. And what will usually happen is while I'm doing the rest of my life, my brain will be chewing on it. And I'll come up with possible options. And what I'll do with that is I'll take those things, and put them in my my to do list application because I know Oh, that's how it could probably solve it. And there's this whole mantra of out of your head into your into your system. And that will allow you to say, Oh, you don't have to go run and grab your computer, you don't have to go run and write it down. You can just pop it into this application. It's in your to do application and you know, all maybe I should try approaching it this specific way. And more often than not walking away for a day or just walking away for a couple hours going to grab a coffee, it's going to come to you and you're going to be much more productive, you'll solve that problem quicker, which is really good. And I think that it's not going to affect the rest of your work as well as your home life as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"32"}},{"id":18,"start":2035.26,"end":2325.78,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"33","ss":"55"}},{"id":19,"start":2326.05,"end":2509.73,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"38","ss":"46"}},{"id":20,"start":2510.04,"end":2511.48,"text":"Nice. Cool. I love it.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"41","ss":"50"}},{"id":21,"start":2511.48,"end":2512.98,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"41","ss":"51"}},{"id":22,"start":2513.07,"end":2592.3,"text":"Shameless plug is all of my courses at Wes bos.com forward slash courses. If you want to learn anything about react, advanced react, graph, qL ESX, node back end, heavy lifting vanilla JavaScript, Sublime Text Flexbox command line powers, I got billions of not billions, billions, literally several courses on there. You can check them out. Some of them are paid, some of them are free. If you've never taken a course by me, you can just take a maybe I would recommend taking the CSS Grid or the JavaScript 30 course just to get a feel for how I teach, see if the way that I teach really connects with you. So that's that's, that's my business. Cool. And you can also head on over to level up tutorials comm forward slash pro to become a subscriber where you get access to all of my content. For those of you don't know I put out a new tutorial series every single month on level up tutorials on topics from react to CSS to all sorts of stuff so check it out, level up tutorials.com forward slash pro sign up for a year and save 25% Can Can we just clarify that it's level up? tutorials.com Did you see that tweet about your how you pronounce it literally. Someone said just breathe. listen to the podcast for a year and I thought he was always saying love love tutorial. Oh, yes.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"53"}},{"id":23,"start":2592.33,"end":2603.94,"text":"No, I it's one of those things that I've been saying. You know, like in my YouTube videos, Hey, what's up discoverable? oil? Thank you so much for like, I just I just do it and I can't I can't do I can't turn it off. I can't slow it down.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"43","ss":"12"}},{"id":24,"start":2604.06,"end":2621.42,"text":"I have the same problem with boss. I always forget to clarify that boss has one asset. Because everywhere else, yes, it has two s's. So I always forget that. And people are like what's going on with it? I'm sure people can figure it out eventually. But it's just one of those little hindrances, right? Yes, that affects a small portion of people","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"24"}},{"id":25,"start":2621.49,"end":2625.6,"text":"level up. tutorials.com level up.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"43","ss":"41"}},{"id":26,"start":2626.68,"end":2647.92,"text":"Calm is about SEO. You got it. You are slash Yes. That's the tilty forward one www. w w w w Yeah. Okay, good. All right. That's it for today. Thanks for tuning in and supporting Scott and I in our businesses. If you've got any tips, make sure you tweet them at syntax FM. And that's it for today. Anything else to add?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"43","ss":"46"}},{"id":27,"start":2648.01,"end":2655.18,"text":"Oh, no, I don't I think this is it's a little late dad this. But it's important because this stuff is important. That's it. That's all I want to say.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"44","ss":"08"}},{"id":28,"start":2656.02,"end":2660.58,"text":"Awesome. I like it. Get your next week. Please, please.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"16"}},{"id":29,"start":2662.47,"end":2672.19,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"44","ss":"22"}}],[{"id":1,"start":0.359,"end":21.33,"text":"Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":23.61,"end":24.48,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"23"}},{"id":3,"start":25.95,"end":300,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":4,"start":300,"end":499.83,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"05","ss":"00"}},{"id":5,"start":500.88,"end":599.97,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"08","ss":"20"}},{"id":6,"start":600,"end":743.91,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"10","ss":"00"}},{"id":7,"start":745.98,"end":900,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"12","ss":"25"}},{"id":8,"start":900,"end":1200,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"15","ss":"00"}},{"id":9,"start":1200,"end":1259.01,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"20","ss":"00"}},{"id":10,"start":1260.9,"end":1270.68,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"21","ss":"00"}}],[{"id":1,"start":1.319,"end":2.82,"text":"You're listening to syntax,","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":2.849,"end":4.59,"text":"the podcast with the tastiest web","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"02"}},{"id":3,"start":4.59,"end":6.12,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"04"}},{"id":4,"start":6.149,"end":9,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"06"}},{"id":5,"start":9,"end":10.53,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"09"}},{"id":6,"start":10.53,"end":18.03,"text":"Welcome to syntax. This is a web development podcast. My name is Wes Bos with me as always is Scott Tolinksi. How you doing today, Scott? Hey,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":7,"start":18.03,"end":45.9,"text":"I am doing super good. I'm feeling really good. In my office right now I've been konmari seeing everything and everything that feels very, like open and free. We just did our entire kitchen. And we just donated like half of our entire kitchen. So Oh, man, everything in this house feels great. And when you work from home, it is really important to have your workspace or your home life, your home space, everything feels so good. So I'm feeling good. I'm ready to go. I'm feeling nice and refreshed. How about you?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"18"}},{"id":8,"start":45.9,"end":138.69,"text":"Awesome. I'm feeling good as well, I'm, and he's still clean up my office. But we've definitely been feeling the contrary as well. Yeah, in our house here. Today's episode is called the freelance client lifecycle. And I think we're gonna actually break this up into two episodes. And we're basically going to talk through all of the steps from like meeting your client and gathering requirements all the way through to deploying the website and handing it off to the client and fixing any bugs. And we're going to go through each of those steps and sort of explain what it is that you do here because we get a lot of questions about freelance just because the beauty of being a web developer is you can work for yourself, or you can just like make an extra couple thousand bucks on the side and pay for your family's vacation or buy a new laptop or whatever it is, you can always make a little bit of side money doing freelance. So we're gonna go through all of that Scott and I, I myself have been a freelancer for I don't like 10 years or so I've gone through hundreds of clients, client projects, and I have this sort of down Scott as well as done quite a bit of client work as well. So we're gonna lend our thoughts to this. Today's episode is sponsored by two awesome companies Log Rocket, which lets you replay what users do on your site, helping you reproduce bugs and fix issues faster, and a tech meme ride home podcast, which is kind of cool. We're having a podcast sponsor our podcast, they do a daily podcast about what's going on in the tech world. It's called the ride home by tech meme. We'll talk a little bit more about those, both partway through the episode. So I already asked you how you're doing, Scott. So we jump right in.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"45"}},{"id":9,"start":138.749,"end":139.5,"text":"Let's jump.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"18"}},{"id":10,"start":139.709,"end":177.539,"text":"Yeah, so let me just kind of frame this, I guess we're gonna first talk about gathering requirements, producing a quote, producing timelines, creating a contract setting expectations. And we're assuming that this is a project that has both design and development baked into it, we understand that not all projects have that. So the design phase of the project, the development phase of the project, feedback and revisions, deployment, handoff, bug fixes and support, and finally, what to do when things go to shit. So we probably will get up until design depending on how long this takes today, and then we'll have a part two next week that will finish this off.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"19"}},{"id":11,"start":177.599,"end":215.46,"text":"Yeah, the sequel. Cool. So I think one of the first things I'm going to mention before we even get started is that we won't be covering how to find clients in this episode, I think that might be worth an entire separate episode, because that is like a whole thing is finding clients and building those relationships and growing those things that we've talked about a little bit on the show, but we're not going to be covering how to actually come across these clients. This assumes that you have a client, you have a project, and you are ready to go. So since we are ready to go, let's get into it by gathering requirements, which is typically the first thing you do when you start a particular project.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"57"}},{"id":12,"start":215.639,"end":275.61,"text":"Yeah, so I really like this phase of it. And I think that this is probably the most important part of the process, often you want to rush into just building the thing or designing the thing because that's, that's what you do. And that's your occupation. And that's what you're probably excited about. But spending time on gathering the requirements of the project is really, really important. And if you botch this, you're gonna have change orders and what's called scope creep happening throughout the entire project. And I think that poor planning is why agencies have dedicated project managers, it's a full time job just to manage your actual client. And I think that it's also why many freelancers hate their clients, we get a lot of questions that are sort of have a tone of them versus the client. Why are clients so stupid, they're so dumb, and it's so hard to work with them and clients are wild, right? And it's your job to actually tame them and it's your job to actually interface with them. If you're running a business here and it's it's your job to actually interface with them and keep things on track as as best as you can. So what are some ways that you can gather requirements got?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"35"}},{"id":13,"start":275.759,"end":320.91,"text":"Yeah, I think the biggest one is to kick things off with some good communication by asking a lot of questions and communication is going to be a common theme through most of this episode. And the next because the good communication bad communication is really the sort of the make or break besides the technical aspects of a project. So initially, you're gonna want to ask a lot of questions. You're gonna want to ask questions about their thoughts on on other on other projects on other things they like what they don't like, you're gonna want to ask about what the general requirements are of their site. And I'm talking general requirements. This is before we even get down into the nitty gritty, we want to just know what overall what's the big picture? What are they looking at? What are they like? What are their their thoughts on sort of things?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"35"}},{"id":14,"start":321.18,"end":444.69,"text":"Yeah, I think at this point in the in the project, what I will always do is talk to them about their business, say, what is it that you do? How is it that you make money? What are people landing on your website to do? What are they looking to find? And just really getting inside their business? Because you're on their site, you're trying to help? And I say business, but it might be any type of organization? Yeah. And then you take that, and you don't just ask them, like, What do you want? Because the client might not necessarily know what they want. They're hiring you, you're the expert. But you basically take like, what are your needs in here? What are you hoping to have on the website, they can provide any input on that, I break that down into not necessarily pages, but you kind of can kind of go through the whole website, and break it down into major pieces of functionality. So you might have a, I always use a store finder as an example, because I've built like plenty of those in my day, you might need a contact form, you might need a specific contact form. So even like if someone says, Yeah, contact form, like I specifically remember working for a client, they said, a contact form, no problem, WordPress contact form, slap it in, change the email, you're up and running, right. But the real need was the ability to have multiple recipients, you want to choose from a list of people who can receive the email, you need to be able to filter by department, first of all, and then you'll also have the option to upload files. And then you also have the option to cc yourself. So that was way more involved in that that was before a lot of these, like form builders had been around and had to build a lot of that functionality myself, and I had had to sink a couple days into building that thing. Whereas just in my mind, I accidentally just asked them, oh, we need a contact form, no problem, that's like six minutes versus a couple days. So it's really important to say, these are the pieces of functionality I need. And this is how it will work breaking down every single piece of functionality, what it needs to do. At the end of the day, you can't be more specific in your requirements, because I've just been burned so many times my own doing by just not asking the right questions. It's my fault, not the clients fault.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"21"}},{"id":15,"start":444.749,"end":545.73,"text":"Yeah. And a lot of the time, I think that even can stem from not seeing the big picture as technical people, as developers, or designers, we often get lost in our craft. And we we see things in a way that are very much through the eyes of somebody who has training. And typically what we want to be focusing a lot of times is again, you mentioned a lot of big picture stuff in terms of what is the client really trying to do, right? We see it as, hey, we're taking some data and sending it into a form. But maybe that's not what the clients not seeing it like that. They're seeing like, I need to gather leads, I need to keep track of Yeah, I need to do this. So you want to be looking at the actual needs, and not the technical needs as well. You want to see big picture of what they're trying to accomplish. And one of those big things is like, really, how does this business work? Right? How does this organization work? What are their goals? How did they make money? How, like, what is the end result of what you're trying to do here? Right? If you're building a website for maybe like a real estate agent, are they trying to gain leads, so that they can work with clients and sell homes, right? I mean, at the end of the day, the main goal there is to generate leads. So your work is not to have a contact form that submits a thing or whatever it's to help them generate leads. And I think understanding that scope and that practical real world of what's going on rather than getting lost in the weeds, the technical aspect of things, is going to help you better understand what technical challenges will present themselves because again, your client, they don't care about the technical aspects. They don't care about the technical, creative aspects of your work. They care about the results and what they're trying to do with their business.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"24"}},{"id":16,"start":545.88,"end":649.86,"text":"Yeah, absolutely. And at the same time, the client also doesn't know what is hard and what isn't. So I always tell my clients tell me, like, first of what your website needs to do, but tell me like, if you had a dream website and at the end of the rainbow, what would it do? And then I will take those dreams and your heart requirements and then suggest something that's not going to blow the budget because like you don't know, like, if you have no idea how much time this stuff makes, then you have no idea how expensive it's going to be at the end of the day. So it's up to you as well to take the budget into it. So at this point, I also usually ask the client, what sort of budget you're working with. It's a hard question to ask because everyone kind of squirms when you talk about it, but it may very well be I have no idea or it may be very well they say I've got 1500 bucks, or I've got 10,000 bucks or $20,000 to spend right now. I like to ask that question very early on. Because many times when I was early on, I spent maybe a day or so gathering requirements producing a quote, doing research, because often, it was something where they would ask for a specific example of something like, I need to be able to have a video slider. And I would spend maybe like an hour or so just making sure it was possible and not to over my head. And if you spend all that time, and then you realize that they're just out to lunch on on money, they're like, Oh, I was hoping it would be $200. And you're like, no, this would be $10,000, then you've just you've wasted all that time. So asking about money up front, and kind of giving them a ballpark of maybe just bring them up a couple of websites that you've done in the past and said, This was 10 grand, this was 15 grand, this was two grand, I just built this one little piece. I think that's that's really important as well,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"05"}},{"id":17,"start":649.95,"end":759.899,"text":"yeah, I think being upfront about money in general is an important thing as well, like understanding what people have to work with, and what things might cost when gathering that. That way, there's no sort of sticker shock, when you do give them a quote, mean, again, that they're expecting to be spending $2,000. But you are expecting the paid $10,000 for this thing. And you submit that, that could be a little bit shocking if those initial understandings of what the scope of the project is wasn't taken care of in that initial gathering requirements chat, because, again, this is what you're doing for freelance and what they're doing is a business and in businesses, they talk about money. So you're gonna have to be comfortable talking about money, talking about what things cost, and don't feel like you are, I don't know, it's a hard skill to learn. But I think oftentimes, people feel like when they want to start talking about money, that they want to start feeling maybe guilty for whatever they're charging, or there's some sort of inherent feelings there. And so I think that's something to get over and just flat out say, what is the budget for this project, and it is sort of a conversation, people sometimes see it as like a, this is the price, it's not gonna move, or this is the budget, it's not going to move. It's a, it's a conversation, it's a back and forth. This is how much I have, okay, well, this is what we can do for that, or let me work with this restraints, but maybe present you an option with more money, I just think about like, we're building a fence, right? And the guy asked, you know how much we're looking to spend on a fence. So we tell him, this is sort of the ballpark or whatever. And he didn't come back to me with All right, here's what we can build to you for this amount. It was like, we can build you for this, which is cheaper than what you said, we can build this, which is probably closer to what you said. And we can build this or this, which are way above what you said. And maybe you want to go above and beyond and do these extra things.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"49"}},{"id":18,"start":759.99,"end":813.419,"text":"Yeah, every time we do stuff in our house, our contractor comes over. And he knows that money is you have to be conscious about money. But there's like this fine balance between my wife's overly expensive tastes and the actual budget that needs to happen. Yeah. And we love him for that, because it's not like he is conscious about the money as well, which is really good. And he was he's always suggesting stuff, because he's the expert in that case. So like, that's good. One last thing I'll say and gathering requirements is important to know who will be using the site and who will be updating the site. So both as a back end administration, who will be updating the site, uploading content, writing blog posts, uploading photos, whatever it is, and then who will be consuming the website? Is it primarily mobile users? Is it primarily people who are on their desktop? Is it business users? Is that technical users is that older people? All of that information is important to take into consideration when you're gathering these requirements.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"39"}},{"id":19,"start":813.539,"end":840.36,"text":"I have a question for you. Yes. Thoughts on a form? Like I know, in an ideal world, this is a conversation that's happening back and forth, right? It's it's Yeah, meet for coffee or something like that, or you go to a business and you you go to their conference room and talk. But what are your thoughts on giving a standardized form to all new clients, like, hey, here, fill up this Google form, which has a list of, you know, 20 questions or something?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"33"}},{"id":20,"start":840.779,"end":934.919,"text":"Yeah, I don't like it from an initial point of contact. Because if you're just searching the web for web developers, and you stumble upon someone's thing, and they have a phone number and an email, sometimes they have a little contact form with a couple inputs in it, I think that's fine. But if your trade out, hit them up with this huge contact form, most people aren't far enough. And they need help thinking about all of these things. So usually, what I like to do in that case, is you can have an initial chat with them and say, I'm gonna send you over this huge contact form or this form to fill out fill out as much as you possibly can. There's 100 questions on here, and then we'll come back and we that actually happened on our This is totally unrelated web development, but we went through with our daughter, a sleep trainer, because she was not sleeping at all. And the way it worked is we got on the phone with a sleep trainer. And we said like, what's going on? We're not sleeping or a kid just is not going to bed and waking up all the night and then she's like, Okay, I think I can help you. I'm going to send you over like this. It's gonna take you two hours to fill out this huge thing. It's gonna be every aspect of your life and the room and everything about the child. And I think that was good because they hooked us with the first little call and the contact. And then we had to put in like two hours worth of work actually filling out this thing. And then we gave that back to them. And then based on that to our form, we had a one hour call with the plan of approach of how to actually solve this thing. I thought that was such a good way, where it didn't feel like a job initially, because if they had asked us right out the gate to fill out that form, no way, I don't have time. Yeah, time to do something like that. But I was convinced after our","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"00"}},{"id":21,"start":934.919,"end":979.049,"text":"initial phone call, we were actually initially doing something with a financial planner, right? And they sent us a big old questionnaire form. And the questionnaire was really nice. And it was like a nice way to have that after we had already had an initial like, chat. And, man, they made every single input on that thing required. And there were maybe like, 20, things that we just flat out didn't know how to answer. It's like, we want to have a conversation about these things like, and I was just like, Ah, okay, I guess I have to like input, like something in there, just so let me submit the form. So we can continue this conversation. And it was just so frustrating. So yeah, give definitely give your clients the option of not filling in things they don't know or aren't comfortable understanding, like submitting a form. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"34"}},{"id":22,"start":979.2,"end":1010.01,"text":"yeah, cool. I also, that's a really good point as well, because I think these kinds of forms will make the person start thinking about it. And if you sit them down for coffee immediately and start asking these questions, they may have not even started to think about XY and Z. But if you give them a form, they're going to take a day or two and chew on it, talk to their significant other about it, and then they'll come back to you with a lot of really good info. So that's, that's a requirement. So that was probably 15 minutes of just gathering requirements. Again, I think that's probably the most important part,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"19"}},{"id":23,"start":1011.39,"end":1013.73,"text":"to partners, because there's a lot here,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"51"}},{"id":24,"start":1014,"end":1081.44,"text":"there's a lot of, there's a lot of little nuggets in here, I think that is important to touch on. So once you have all your requirements, you feel like you've asked enough questions, it's time to then take that and probably I would say the worst part is figuring out the quote for this thing, because you have to take this huge list of requirements, and figure out how much that thing is going to cost. And we've talked on end on this podcast, how we're both big fans of fixed price billing, instead of hourly, because you don't want to come back to this person say it's gonna take 100 hours at $100. And like, they're gonna say, like, okay, like, I have no idea. Yeah, like, if someone came to me and said, I'm going to renovate your bathroom at $48 an hour. And like, unless you give me like a finite, you will not go over however many hours, that means nothing to me, I've no idea how fast it takes you to knock a wall down or plumbing, plumbing, some water. So what we like to do is to provide a fixed quote based, which is, here's what you will get, and and here is how much it's going to cost. So how do you figure out that fixed quote? What's your approach? Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"16","ss":"54"}},{"id":25,"start":1081.68,"end":1093.77,"text":"Actually, even before I get into, I think you had a really good point about I mean, we've so far we every single time, we're giving examples about something that we keep going back to other contractors or other things that we're working with,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"01"}},{"id":26,"start":1094.13,"end":1095.57,"text":"right? And yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"14"}},{"id":27,"start":1095.57,"end":1180.1,"text":"I think it's important to just look at our profession. And think, in some ways, it's not special at all, in terms of your contractor, you're doing work for a client, and you're going to get it down that way. And too often we get lost in like, what are what we're doing it as professionals here, but you really need to look at it the same way that you would have these expectations from a client that you were hired, or a contractor that you were hiring to do something for you or your business, how you'd want that to work. Okay, so yeah, for breaking down the quote, or even figuring out the amount for me, I like to just take a big step back and list out all the requirements. And even though we're not doing things hourly, I still like to go through sort of thing by thing and think about, alright, what is the time commitment here? What are the potential pitfalls, what are these things that are maybe going to, to take longer than I'm expecting, and in really look at that, because that is the the chunk of what this thing is going to cost in terms of your time and your availability to get this done. And again, it could eliminate some aspects in which you might need to ask more questions to even establish what those things are going to be because the last thing you want to do is say, all right, this slideshow is going to take me two hours, so it's going to be no big deal. And then when you get into it figure out it's gonna take you 10 hours. And then of course, your quote that you've generated is now just well sunk, you know, essentially,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"15"}},{"id":28,"start":1180.469,"end":1353.66,"text":"totally. So what I'll do in this case, as well is break it down into major functional areas, which I have done already in the requirements. Yep. So that's kind of the beauty of gathering requirements in functional areas. And then I'll go through it and say the store picker is going to take me 20 hours to build this homepage has a custom layout is going to take me another eight and Then I'll sort of like break it down into that add up all the hours. And at this point, you also need to kind of figure out what you're worth at an hourly even though you're not charging hourly got to figure out what's an hour worth of my time. So when I was doing it, it was between, when I started, it was like $40 an hour up until like, I finished at about like one to 150 an hour. And then you basically take the number of hours, you think I usually add on 20 30%, just because developers are horrible at estimating how long time will take. And you usually think that you're much faster than you actually are. So add on 20 30%, and then multiply that by how much you have. There's also this this idea of value based billing as well, where even though you might have like built out a whole tool set, you might have built out a whole bunch of like your own internal libraries or whatever to make yourself faster, that doesn't necessarily mean you should charge less, because there's still value given to the client in in that thing that you're bringing to them. And then once I have that, add it all up, usually, I don't usually break it down into each functional area. But if the client is concerned about about potential price, I'll try to like, maybe break something out of that being like, you know, we don't have to do the stock picker right now, that's going to be 2000 bucks. And we can do that at a later time. But included in my initial quote is laying the groundwork so that we can easily add on this thing in the future, just so that we kind of know about that this might come in the future. And it's important for me to know that when I'm building this framework, when you're setting up your schemas or your data types, it's important to know about that. So that's how I do it. And then I What else do they do here explain the tech in relation to how it will help their business or how easy it will be for them to manage. So it's important to spell out what tech you are going to be using in this thing. Some clients don't care. But generally you want to say, I'm going to be using WordPress or Gatsby and the back end is going to be built in in something else. And it will be easy for you to update it because that's important as well. I've heard many horror stories where developers build their thing in some like markdown based GitHub thing. And it's impossible for the client to update it because they have no skills to do that. But don't just say it because like, this is good tack, say, this is good tech, because it's going to make your website fast, it's going to help your business grow, it's going to be easy to update. This is open source technology. So if I get hit by a bus, any developer can pick it up from there on out.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"19","ss":"40"}},{"id":29,"start":1353.69,"end":1478.37,"text":"Yeah. And that's definitely an important aspect of things. Because at the end of the day, your client doesn't really care about the tech itself, right? They care about what the tech is going to do for them, right? It's going to be super easy for them to update, it's going to be superduper fast, it's going to be faster than all of their competitors. It's going to be any of that stuff. And and I think those are the important aspects to outline when you're talking about the tech itself. And just so we don't get lost in the weeds there. And the next step is going to be presenting the quote, and now I think this one is occasionally I think this one is occasionally under done, you know, maybe you're sending an email, it's gonna cost this much right. And that's not I, in my opinion, that's not the ideal way to do it. Because I think about when I worked for an agency, and one of the ways that we did it is we had a presentation to it, but not even in the presentation we did we listed out each of the things that are going to be included. We also talked about what's not going to be included. So if the site is this, we're going to say alright, it's going to be again, this tech, we're using these things, it's going to be this way, it's going to feature this slideshow here, a content form or contact form here, blah, blah, blah, what it's not going to do is it's not going to have real I guess it this aspect of things maybe should be things that you've potentially discussed, like if the client was thinking, well, maybe I want some real time chat or something, maybe no, you're gonna say the site's not going to have real time chat, it's going to have a contact form and submit ones blah, blah, blah. You should also have some sort of some validation for in terms of how long this quote is valid for, right? Like this quote expires on this date, or this quote is good for two weeks, because you don't want your client to sit on this quote for two months, and then maybe you're way busier now than you were two months ago. And when you're way busier, due to the laws of supply and demand, your price will technically there your price or availability will change or go up. So I mean, when you make it should be for that point in time for maybe like two weeks or something.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"33"}},{"id":30,"start":1478.58,"end":1577.04,"text":"Yeah, I always put that on all my quotes just because I don't want someone coming back a year later and being like, hey, we'd like to do this now. So I say this quote will be valid for two weeks, and also we're going to get into timelines. Next. The quote will also the timelines are based on the person accepting it X, Y and Z at a certain point in time, just because it's important to you view the contractor. You might get an Another job, and then all sudden your entire bandwidth is taken up and you can't overload yourself in that manner. Another thing like people always ask me, like, what's a template for your quote, mine is very, very simple. It's usually just my logo has a title that says, like, quote for business website, and then this quote is valid for two weeks. And then underneath that, I'll have a little blurb of what the website will do. And then I break down each of those functional areas that we talked about in the last two steps. Well, I'll say the homepage, this is what it includes, these are the different features, here's the store finder, here's how the store finder will work, here's the technology will be based on breaking down each of those. And then at the final, the final piece of the quote is actually give out the prices for what it is. Note that it includes taxes as well, a lot of people always feel bad. Initially, people who are first getting into freelancing feel bad about having to charge tax for some reason. But in almost all cases, the business doesn't have to pay that tax, they'll get it back at the end of the year anyway. But just making that template, look professional, you can't include too much information in that quote, because it should mine are usually just like two or three pages long. Make sure that the client reads through it, what it does include what it doesn't include, and then nice and clean way to reference that at any point in time.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"38"}},{"id":31,"start":1577.07,"end":1651.59,"text":"Yeah, and I do think presentation matters here. I mean, granted, we're living in a different world than we were when I was working at my agency, because it's all much more digital based. But we were working when I worked at this agency, all of our we would have a meeting to give the quote and in that meeting, we would have individual embossed, or not envelopes folders, they were like an embossed folder with our logo on it. The quote had like a nice template, the whole thing had a custom look to it a custom feel to it. It was printed on heavier paper, it was very just professional feeling. So when you gave it to them, it felt like I mean, you're not getting anything, but they're about to open up something to potentially agree to a lot of money. I mean, if you think about it, it's like companies like Apple, right? They put a lot of money or a lot of time into that experience of your products. So you're more likely to give them more money, because the experience is better. So if you're getting this, like everything's digital now, so it's not as easy to do some of that stuff. But if they're getting a PDF or getting something like that, it's going to be better for you if you're charging more money to have a more luxurious experience than like a standard Google Doc with a standard font or even worse, just an email with a price tag or something.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"17"}},{"id":32,"start":1651.62,"end":1801.89,"text":"Yeah, yeah. Don't paste it into an email, always send it and also don't send it as a doc x. Every time someone sends me Oh, yeah, like no something in a doc x like a contract or something, I died a little bit, the contract makes sense. Because contracts, you can read lines, stuff that you don't agree with and then sign it. But I generally just prefer to get a PDF because I don't have to like, open it up and word or convert it in Google Docs is such a pain in the butt. Just send it as like a solid sealed PDF that the client can look over. And then if there are revisions to that, you can always include the revision in the name in the name of the actual court itself. Cool. Speaking of technology, today is the tech meme ride home podcast. So tech meme is a publication that covers everything in in tech. So big companies like Facebook, obviously, apple, all of the hardware, all of the software, whatever is going on in the tech world tech meme will cover it. And they have a podcast that runs daily, at 5pm. Eastern Standard Time. And it's usually about 15 to 20 minutes long. And it's just going to get you up to speed with what's going on in the technology world. I like this because like there are ways you can you can stay up to date with what's going on technology, you can stay on Twitter all day long, and sort of ingest all these tweets. Or you can just listen to this podcast once a day on your ride home on your walk home on your Boosted Board home. You can await you're not supposed to listen to stuff when you're on your Boosted board or you maybe it was whatever method of transportation you are on your way home. Sing is 15 to 20 minutes, seven and a half to 10 minutes if you are listening to at two X and you can just kind of ingest whatever's going on in the tech world, which is pretty cool. One kind of cool antidote they provided here is that Mark Zuckerberg, CEO of Facebook, if you haven't heard of him, he called tech meme, the one news source he definitely follows. So take a look at the podcast if you're trying to stay up to date with what's going on in our crazy technology world, especially like over the last week was CES, the Consumer Electronics Show and there's just been tons of especially I've been trying to the Smart Home stuff that's been coming out all the new updates to all the new lights and sensors and whatnot. So I'm going to add this to my overcast today. The way you find it is just go there's no website for it. So just search on your podcast app for ride home and you'll find it it's called the technium ride home. Thanks so much to them for sponsoring,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"31"}},{"id":33,"start":1802.1,"end":1813.29,"text":"I love podcasts that of that of that length I subscribed to like several that are like come out daily that length. And you just put them on and they're over quickly get a nice little dose of everything and, and so it's a big fan of stuff like that it's","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"02"}},{"id":34,"start":1813.29,"end":1817.82,"text":"a tasty treat, like we tried to do, but very rarely ever keep under 20 minutes,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"30","ss":"13"}},{"id":35,"start":1817.82,"end":1865.31,"text":"right? No kidding, right? Okay, so next one is going to be talking about timelines. And this one is important because this is one of those aspects of a project that can make or break sort of how your client feels about the project. Because if you set the incorrect expectations for timelines, and you go over your timelines, it's going to immediately look badly upon you. Obviously, we all know that clients have a knack for extending timelines by not giving you assets on time and not doing their their part of the job on time. And that's something that we need to spell out. So in the first part is Yeah, you need to have a timeline with hard dates. Right? hard on hard off, because I see Wes laughing over.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"17"}},{"id":36,"start":1866.87,"end":1872.18,"text":"I set you up for that, and you took it. Anyways, good to do.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"31","ss":"06"}},{"id":37,"start":1872.48,"end":1932.9,"text":"Yes. Hard on hard off. Yes, you even capitalize the hard on I see that. Now, it is important because like, honestly, your timeline is just as important as their timeline, right. Because especially if you're working with several different clients at different times, the last thing you want to be doing is having your project extend into another timeline for another project. And then you're working double time or over time, or whatever. So essentially, you do need to have hard dates. This is when we're going to launch this is when we're going to have some sort of beta period where things are good, you can test out and use it. This is the design time, this is the death time, all this stuff listed out clearly on a calendar. And one thing I like to do is set up a Google calendar that actually shares with your client. Yeah, they see it on their calendar, any sort of meetings go along with that. But they see start time in time. This is when we're launching this is this. And that way if they have any questions like, oh, is the design done? Because it says the design should be done right now, you best have that design done on time.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"31","ss":"12"}},{"id":38,"start":1933.02,"end":2016.81,"text":"Yeah, I always have in my quote, in my quote, often I include the timelines as well. And I say all of these timelines are assuming if I have questions, or also I provide a list of due dates from them, because you are working with your clients not like they just give you the job and you go off and do it. Often you need things like content is probably the biggest one, you need assets, maybe they're taking some photos of their space, or their products that need to get done by a certain point. So I always say assuming you hit these deadlines are spelled out for you. As well as assuming that any questions that I have you give me a 24 hour turnaround on any questions or feedback that I require. Because all too often people are chomping at the bit to launch this thing. And then when it comes to you asking a question about, Hey, could you send me over the list of people and all of their jobs, or Hey, could you send me over x, y and z, it takes a week or two for them to get around to it. And that can just destroy any timeline. So holding your client accountable to what their end of the bargain is, is really important. Because he and then I also say in here is like, if you blow these timelines, then I have to start another job, like this is my job, I have to start other things. And this might just like drag on forever. So it's really important to me that I've keep my own timelines, but you also are on the ball with was working with me on this thing. So we can move it? Well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"13"}},{"id":39,"start":2016.86,"end":2076.38,"text":"Yeah, I love how you you have a note here that says, Be generous with your estimates, under promise over deliver. And that's sort of like a good mantra for freelancing in general, or even doing work, you're gonna want to do a downtown job, you're gonna want to make sure that job has done better than what your client is expecting and faster than what they're expecting. Because when you initially plan the timeline initially plan the quote and everything like that, that you gave yourself more time than you needed, rather than about the time you needed, or maybe even essentially an optimistic view of time that you needed. And we are optimistic people, a lot of times, we just sort of say, this is what it's gonna take me without adding on. So it's important to add on that buffer so that you know that the mount that you initially thought at least has a little bit of an extra buffer on top of that just to save yourself from your own optimistic presentations of everything.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"33","ss":"36"}},{"id":40,"start":2076.6,"end":2110.19,"text":"Yeah, and I often get questions about both quoting and quoting timelines is like how do you know how much it will cost? And how do you know how long it will take you? And the answer to that is you have to figure that out. That's a skill that you need to build. And often you see very experienced contractors and we go back to just like contractors in your house or we just say in in the UK they call them builders and no Another funny word that I heard that UK the Brits say, you know, those like yellow gloves that you do dishes with? Yes. Do one of those called rubber gloves?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"34","ss":"36"}},{"id":41,"start":2110.23,"end":2111.73,"text":"I don't know. I don't use those. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"10"}},{"id":42,"start":2111.79,"end":2120.82,"text":"I just go you don't use me there. This is not like the 1920s. But I was watching a video on YouTube and he says, I've got to get me some marry Gold's","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"11"}},{"id":43,"start":2122.8,"end":2123.58,"text":"sounds good.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"22"}},{"id":44,"start":2123.609,"end":2155.46,"text":"Yeah. So for a UK listeners, a contractor is a builder that comes to your house and does renovations. What was I saying? I just totally sidetracked by miracles timeline, quoting time is a huge skill. And if you get experienced contractor, they will be very good at quoting. And sometimes you get inexperienced or bad contractors who are very bad. And they always blow the budget on or on timeline and on costs and things like that. So that's just as as much as you want to develop your web development skills, it's also important to be able to develop your estimation skills.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"23"}},{"id":45,"start":2155.59,"end":2201.19,"text":"Yeah, definitely. All right, next, getting into the contract, because this is one that I think people sometimes overlook, right? They think they're doing work between friends or something like that. And I think it is important to have a contract, regardless of who you're working with. So you best have a contract before you do any sort of work, right? You give them the quote, you've given them timelines, everything's agreed upon before you start your work, you make sure that the contract is signed, and that both parties agreed to the terms within that contract. And, you know, people wonder about, like getting contracts and things like that. I think it's personally In my opinion, I would reach out to a lawyer just to have them draft you up something. I'm lucky that my neighbor is a lawyer, and I'm pretty tight with him. So I can just ask him for a little","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"55"}},{"id":46,"start":2201.399,"end":2205.36,"text":"one now is most Alon when you're trying to record? No, not that neighbor. Okay. No,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"41"}},{"id":47,"start":2205.78,"end":2217.75,"text":"this guy was a few houses down. No, I he he's a he's a super cool guy. We go. We go climbing and whitewater rafting and skiing and stuff like that. This guy's a super duper cool. So if I ever need a little favor, I could say, Hey, you know, I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"45"}},{"id":48,"start":2217.75,"end":2218.32,"text":"got this,","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"36","ss":"57"}},{"id":49,"start":2218.439,"end":2232.71,"text":"you know, contract I need what are what are your thoughts here, but I think it's important to at least talk to a lawyer or something like that, to, to have an idea of make sure that this is this contract is doing what you're expecting it to do, and it fulfills your requirements as a professional.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"58"}},{"id":50,"start":2232.86,"end":2352.27,"text":"Yeah, at the same point, for a lot of my early for a lot of my stuff, I just didn't really didn't have contracts, at the very least, what I would do is I would have the client sign the quote, and I would sign the quote, as well, so that it's kind of set in stone, what's to be expected and what's to be delivered. And that helped me out a lot. And I've even talked to a lot of like, lawyers kind of in the area. And they say, like, yeah, it's good to have like an ironclad contract. But if you're in the spot where you're really trying to enforce this contract, you're taking someone to court, in most cases, that's probably not worth the five grand, eight, grand, two grand, whatever it is that you're you're working on, for some of these these freelance projects, because it's going to cost way more time and way more money to actually hire somebody to get it figured out. So what he said is, yeah, having a contract is important. But what's much more important is having very clear communication with your client and, and having a really good relationship with them. So if something goes awry, you can kind of come out from under it and solve it and figure out a solution to that. So I've never had a Luckily, I know that many people listen to us and ever had any, like legal issues, yeah, with my client. But it's because he's spending, you probably your first line of defense is having a good relationship with your client, and making everything crisp and clear as to what's to be expected What's to be delivered. And you can usually find a way out of your situation, we'll have a section at the end of what to go do when it's going wrong. Last thing, if you do need a contract template, obviously going to a lawyer is ideal. And what you can generally do is you can go find a template for a contract on something like democracy, it's like a database of free contracts, you can kind of take that, tweak it to your your liking, and then have like a lawyer kind of run through that. It'll often be much cheaper to have them just proofread something, make a few edits, and then sign off on it, then for them to create something from from absolute scratch.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"37","ss":"12"}},{"id":51,"start":2352.359,"end":2466.84,"text":"Yeah, it's not the end all be all required. But at the end of the day, if something is going super, super wrong, it could be better but to protect you Yeah. And if things are going wrong on your website, and you want to make sure that you know about Oh, you're gonna want to go ahead and get Log Rocket now Log Rocket fresh. Thank you. Thank you. Thank you, thank you. Log Rocket, their little slogan on the front page, it says stop guessing when or why bugs happen. And I think this is just absolutely so dead on because Log Rocket gives you sort of unprecedented if I can use that word visibility into solving your bugs. Because what they give you is in addition to you know, the bugs that are happening, they actually give you a video replay. It's so cool. It's one of those things. You just got to sign up. For the trial and try out, they give you a video replay, where you can see physically what's happening on the site, you can have access to the entire network activity. So every request and response, which is huge, and all council errors, and it even works in with your existing tools like Redux and stuff like that this session replay is one of those things that you want to try, you want to check out. And you're going to get again, you're going to get this insane visibility into the bugs that are going on in your site. And longtime listeners of syntax are going to know that we often talk about Sentry for this. And if you are using Sentry already, Log Rocket integrates really well with Sentry. And you can use them both together, have them talking to each other. Again, it works with any of your tools, whether that's react, Angular JS, Redux, Ember view, j, s, anything. So check it out, sign up for Log Rocket and get 14 days for free. Head on over to Log rocket.com forward slash syntax, sign up again, 14 days free, check it out, throw it in your app, see this session, replay in action be blown away be excited. That's that was my experience with Log Rocket.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"39","ss":"12"}},{"id":52,"start":2467.19,"end":2565,"text":"Awesome. Next step we have in here is before you even get into starting the work, I think Scott added this thing is it setting expectations to your client, I think that's just as important as gathering requirements is letting your your client should know what to expect from you. And I've been in many situations where the client says, Well, I'm paying you, you should be available 24 seven, my beck and call I've had especially when when blackberry started to become popular. When I was doing web development, I had many clients who had just that on a whim, just send me an email only the subject line, we should add big text to websites. And then I would wake up in the morning and there'd be like 14 emails all subject line. And it's just a mess. And for those clients who need to come be like, Look, I can't deal with you just coming in and give me your ideas at any point in time. And there needs to be structured to this. So letting them know ahead of time of what the design the development, the revisions, will talk all about that what that process looks like letting them know that this might not be the only thing that you're you're working on and how to contact you, letting them know how quickly you should expect a response. So I would always tell my clients Look, I do email once a day. So if you email me a couple times a day, don't send me an email 45 minutes later saying Hey, did you get it or? Yeah, don't text me Twitter DM me, Instagram me and smoke signal me that you you sent me needs that that thing boils? My blood is when people send me an email and then tweet me to tell me they sent me an email. And but yeah, Oh, if only there was some sort of notification process like this built into email, it would be amazing, you know,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"41","ss":"07"}},{"id":53,"start":2566.5,"end":2569.71,"text":"there was no sarcasm there at all, sir, there was no sarcasm in that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"42","ss":"46"}},{"id":54,"start":2571.27,"end":2605.53,"text":"So just setting expectations for your client is really important establishing a professional environment, because I think like when things get heated, things can go awry. So I once deployed a website and it was public, and there was something going wrong with it. And the client was getting really, really stressed out and just texting me and then I sent a snarky text back, like, please stop texting me, I'm trying to work on it. And that was a big mistake on my end, because like that wasn't very professional at all. But it's important to be professional when things aren't going good. So that when things go awry, or if things go awry, you can you can still be professional.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"51"}},{"id":55,"start":2605.61,"end":2657.07,"text":"Yeah, I mean, I think the whole thing is just establishing a feel and a course for how this whole thing is going to go. And if you establish this, like loosey goosey, you know, non professional sort of way of interacting, you're texting, um, you're, you're acting like this, you're sort of loose and all your stuff, then it's going to signal to the client that they can be that way with you, right. And it's going to signal if you're if you're emailing them at non standard times, or interacting with them, it's going to it's gonna everything that you do signals back to them that this is okay in this relationship. So if you want to be available 24 seven, and you want super casual everything, then by all means, go ahead and do it. But it's not going to make the experience as tight and controlled as possible, which is potentially going to come back and bite you in the butt if anything's ever going wrong.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"25"}},{"id":56,"start":2657.28,"end":2700.45,"text":"Yeah, I would always if I was doing email at night, like before I had kids before I was married, I would just like work all the time. But I wouldn't send emails off hours like at like 9pm. Or I wouldn't send emails on weekends. I would just write them and use something called Boomerang to schedule them to send Well, yeah, because first I think that gives off, it might give off like a bit of an air of unprofessional, where you're like, Oh, I have so much to do. I'm working at 11pm at night. And second, it also makes it known to the client that it's okay to email me at 11pm at night and it probably might be okay. But don't expect a reply from the weekend or emailing me at 11pm at night you have to sort of train your client to know what that sort of looks like. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"17"}},{"id":57,"start":2700.45,"end":2779.08,"text":"a lot of the skin you mentioned it. I mean, that's a good book into this episode you mentioned, a lot of this is training the client, right? They are wild there are feral is that the good word? I don't know if feral means. But either way, maybe you don't want to treat them like they're a wild animal. But like you do want to train them to be, like, have proper expectations have a proper understanding, because chances are, maybe they haven't worked with someone in our profession before. And your experience is going to glue them off on what it's like to work with someone in our profession. A lot of times I've had clients, they're like, my last developer was bad. because of these reasons, they did not respond, they did not get things done on time, they just all disappeared. I mean, there's, there's a host of things you've probably heard from your clients, and we'll hear from your clients about what it's been like to work with other developers. And it's probably why those people aren't working on any particular projects with that person anymore, where you are now getting the work. So you want to establish work, you want to establish Good work, you want to establish professional environments, and you will get repeat clients, you will get referrals up the wazoo and you will be more booked and can raise your rates and all that good stuff. And you can make that money and live that Yeah, life, which you know, is what the point of doing all of this is in that regard.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"45","ss":"00"}},{"id":58,"start":2779.56,"end":2831.25,"text":"Yeah, absolutely. It's a good point, you said there with the client, if they're starting to bad mouth, their last developer dig into that figure out why it very well may be that the last developer was an idiot, but it very much at the same time, it might be that they are an absolute nightmare of a client to work with. And for clients like that, that need a little bit more hand holding, I would often just charge more, because you know, you're going to need to spend more time on the phone, you know that you're going to have to travel into their office a couple times to actually talk to them. Whereas sometimes I would work with agencies and they have project managers that are just on it. And they know how to they known how not to bug developers, they know how to put everything into one email. And in that case, it's just a joy to work with them. And it's so smooth that you don't have to you don't have to spend so much time sort of managing the thing, because that's their job. Word. Cool. Yeah, that's","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"46","ss":"19"}},{"id":59,"start":2831.25,"end":2877,"text":"a good a good place to wrap it up. We're going to be picking this up in next week. In part two, when we talk about a whole bunch of stuff, we're going to be talking about the design process, the development process, feedback and revisions, we're going to be talking about deployment handoff, bug fixes and support and what to do when the project potentially goes bad. And maybe you need to fire a client because clients are not infallible and just like you can be fired, you can fire a client so there's gonna be a lot there. There is so much to talk about in this stuff. And if you have any additional freelance stuff that you want to hear about, let us know because we are planning more episodes on freelancing so Love, love, love to hear what you want to hear. Well, let's get into some sick pics West. Do you have a sick pic for us today?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"11"}},{"id":60,"start":2877.06,"end":2985.72,"text":"Yeah, so in the past I have sick pick this YouTube channel called Alex French guy cooking, where he takes a sort of like engineer mindset into cooking is very entertaining. And he's obviously very good at what he does and just goes like deep deep into it. I particularly enjoyed the ramen, one from Alex French guy cooking, and I found another one who has a very similar vein. And the episodes are very, very entertaining. And it gives me a lot of like hands on techniques on how to actually cook things. So the YouTube channel is called Food Busker and I've only found it within the last week or so. So I'm still making my way through it and I went through two of them so far, which was the nitrate free bacon hearing which is how do you cure bacon using salt and sugar and not some of the curing salt is carcinogenic Yeah, it's not good for you. So he went into that and went through all these like different steps on it and it was super good, super helpful. I think I'm going to try it myself like he does it in a way that it you don't need a lot of equipment and stuff like that. So it's good for home cooks. And then I also went through the tongue suku ramen, which is it takes like 90 hours you take like pig trotters which is like the foot from the pig and you boil it rotting in Yeah, not a fun that says this is the guy that says marry gold so great. Just pleasant. I think Trotter is the actual name part of the pig. I don't think that's a UK thing. But it's it's enjoyable to hear him with his British accent, say these these words. So check it out. It's called Food Busker. I don't really understand the whole Busker part and it seems like his kitchen is like part of like a like a restaurant open air. I'm not really sure of what it what it's like I haven't gone through it. I'm there's a years of videos here that I have to go through. Yep. Nice. Cool,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"57"}},{"id":61,"start":2985.72,"end":3004.08,"text":"man. That sounds I'm gonna have to look at that I need some more that stuff might. You know, it's like as time goes on, I actually find so much value in YouTube. I subscribe to a lot of channels. And, to me, always amazed at the kind of quality that comes out on YouTube. And really that's like one of the first places I go to learn anything nowadays So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"49","ss":"45"}},{"id":62,"start":3004.47,"end":3029.31,"text":"yeah, I just fixed my like all of our appliances at home have been been crapping out our dishwasher crapped out our dryer crapped out, and our stove hinges bent, and the stove igniter. busted. So we had four things to dos in last couple of weeks, and all of them or on YouTube, and I fixed them for all of them, each of them for under 100 bucks. And I was like, this would have costed me thousands if I had appliance repair people come in, but YouTube is the best","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"04"}},{"id":63,"start":3029.55,"end":3030.78,"text":"it is, it's so good.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"50","ss":"29"}},{"id":64,"start":3031.02,"end":3048.72,"text":"But my sick pick today is going to be an extension for Chrome. And this is one then, you know, as developers, we open up a tab and the next thing you know, we got 500 tabs open up in our Chrome. memory consumption is absolutely destroying our computer.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"31"}},{"id":65,"start":3048.96,"end":3052.11,"text":"This is like my wife saying, Peter, Is that why you're saying this? I have","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"48"}},{"id":66,"start":3052.11,"end":3122.55,"text":"not No, but I am keen of having way too many tabs open, I probably have. I mean, they're they're microscopic right now in my computer. So I need to start closing tabs. But we all know that these tabs are to sit open, and they actually consume memory and stuff like that, and then your whole computer is going to slow down. So my extension is going to be the great suspender which what it does is if you have not been on a tab for a given amount of time, you can tweak that. What it does is it suspends the tab and it basically closes the tab out in a way that it has a little custom screen. And again, you can tweak this all to you know when to suspend what to suspend. And it's going to save you so much memory consumption is one of those things that I install, like one of the I mean, it's you have your Chrome profiles, but it's one of the first extensions I install no matter what because oftentimes, these tabs open up and you don't even think about them by the end of the day. So this thing allows you to close out these tabs while keeping them open. And then the only thing you need to do is visit that tab again, and click on it, and then it reloads the page. So check it out the greatest spender, if you don't have this extension, it's one of my must have extensions for Chrome.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"52"}},{"id":67,"start":3122.67,"end":3144.75,"text":"So it let's go into some shameless plugs. This is part where we hopefully gave you enough value from the podcast and we get a little silly and start to push our own products on you. So I have all of my JavaScript and CSS courses available at Wes bos.com. forward slash courses, you can learn react, iOS, six node, all of that you can check them out on there, and Scott's going to plug","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"52","ss":"02"}},{"id":68,"start":3144.87,"end":3193.29,"text":"Yeah, I have a new course on styled components. This is my first course on styled components called level one styled components in which we basically talk about building scalable systems and style components. We talk about extensions, we talk about plugins that work with styled components to give you additional sass like functionality. We talked about great ways to sort of organize all of your stuff and build an extendable system that can both be for small sites, large sites, medium sites and grow with your site as they grow so check it out at level up tutorials.com you can purchase this series at Ford slash store or you can sign up to become a level up Pro. If you sign up for the year you save 25% so level up tutorials comm that is level up not level level level love whatever I do when I love the level up tutorial, thank","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"24"}},{"id":69,"start":3193.29,"end":3208.08,"text":"you. Alright, I think that's it for this week. If you enjoyed it if you have any other tips about your own freelance design process or your your entire process, make sure you tweet us at syntax FM and we will catch you next week for the other half of this one. Please","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"53","ss":"13"}},{"id":70,"start":3209.94,"end":3219.69,"text":"head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"53","ss":"29"}}],[{"id":1,"start":0.359,"end":24.45,"text":"Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Tolinksi ski.","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":25.92,"end":57.84,"text":"Oh, welcome to syntax in this Monday tasty treat, we're gonna be talking all about code, quality tooling, how to get your code, being extra nice via tooling, these are the kind of things that are really going to do all of the heavy lifting for you, or make you aware of some bugs, it's going to totally eliminate any of those memes that it's like, you know, find in seek champion the semi colon because these two things are going to fix all of you. So my name is Scott solinsky. And with me, as always, is West boss,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":3,"start":57.96,"end":59.88,"text":"ready for some high quality code","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"57"}},{"id":4,"start":59.88,"end":167.37,"text":"today, high quality code that's coming at you in this tasty treat. This tasty treat is actually sponsored by a company that is going to really help you have high quality code, which is century now century is one of these tools that basically what it does is it? Well, you you put it into your codebase. And it keeps track of your errors and exceptions and lets you know how they happened. It tells you a lot of information such as the operating system and maybe what versions of things they're using and what browser and allows you to really gain some key insight into what's going on in your application. One of the coolest things about Sentry is that it provides some really awesome ways to be notified when something is going wrong. Now you Everyone has their own workflows, right. So I personally, I work best in different ways. And if Sentry can ping a Slack channel and say, hey, there's this thing going on, then my whole team can see it in one little fell swoop and we can even chat about it directly in slack. In addition to notifying any of your chat applications or anything like that, you can also get notifications via email, SMS, and you can just really integrate with any of the platforms that you're used to using so that you can be notified in a way that works for you and your team. Now, if you want to try Sentry, which I highly recommend you do, especially if you want some high quality code, you want to head on over to sentry.io and sign up using the coupon code tasty treat all one word, all lowercase, and you get two months for free. Trust me, you're gonna want to try it out because it's one of those things that the proof is in the pudding as they do say, I'm going to train myself. So okay, we have Sentry to help us get some quality code, what are some ways that we can dive in and set up some tooling in our application to get some quality code as well?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"59"}},{"id":5,"start":167.49,"end":267,"text":"Yeah, so we're gonna run through some tools as you as a web developer can use to get high quality code, the first one's going to be a linter. second one will be a something called prettier. Third thing is going to be just VS code in general, or your editor, you could say, and then we've got some some minor things here on TypeScript and testing in something like jest. So probably the two biggest ones of code quality is using es lint and prettier, let's kick it off with es lint or, or linters. In general. The idea behind a linter is that you whenever you hit save, or whenever you commit your code, you run your code through a linter. And the linter is going to mostly analyze your code for potential errors that might happen now, yes, lint, which is the most popular linter before before that, we had j s hint, which was a pretty popular, there was jass lint initially, which I think was made by Doug Crockford. And then we had j s hint. And now we have es lint, which which sort of came around when we started developing an ESX. And we got those. So a linter will take a look at your code and tell you where potential problems happen in your code. Now, there are some stylistic things in es lint that it can do. It can tell you if you forgot a semi colon. It can do like minor things like that. But the way that it's sort of going right now is that you should only use a linter for actual problems that will develop inside of your code, things like scoping issues, things like double variable declarations, things like what are some of the other accessibility issues are a huge one. I use my own one. What are some of the other things that yes, lint will do for you?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"47"}},{"id":6,"start":267.63,"end":322.29,"text":"Yeah, I mean, it will connect to a lot of the platforms that you use. So if you have plugins, you can say, Well, this is a react specific lint, config. And so more than just general JavaScript or whatever you're working, when it's going to potentially make you aware of best practices within those libraries. And obviously, these best practices can be tweaked to your liking. I think most people that I know have their own set of ies lint rules, turning some things off here and there when maybe some things are a little not necessary in their codebase But really, it allows you to connect to whatever type of application you're writing, in addition to plugins via like react or whatever. There's also a handful of presets, I use an augmented version of the Airbnb presets myself, which is just sort of their team's defaults for es lint. And again, it's tweaked, because there's definitely some rules that I turn off a little bit.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"27"}},{"id":7,"start":322.59,"end":340.5,"text":"Yeah, I think the important thing to notice here is that, yes, lint is is mostly preferences. There are things like that that will actually just break your code, and it will let you know that but a lot of it is like things like should you have a dangling comma on your object? So that's a question for you Do you do the comma dangle Scott,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"22"}},{"id":8,"start":340.86,"end":343.92,"text":"I do do a comma dangle. And Daniel as well, so","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"40"}},{"id":9,"start":343.92,"end":424.05,"text":"it loves the dangling commas. What that is, is when you have an object and you have your properties and values, you always put a comma dangle at the end of the line. And that's because when you go to add another property in the future, what you used to have to do is you have to add a comma two line before it and add your new line. And that screwed up your your get blames in the future. I think it was IE nine was the last browser that couldn't do comma dangle. And now with transpilers. It's not anything you ever have to worry about things like putting function names. So if you have anonymous callback function, you just write the word function or you have an arrow function, should you name those or not for better stack traces. So the way that I use mine is that I use Airbnb by default. And then over probably over the last two or three years, I've just been tweaking my own and turning things off. Because Airbnb is incredibly strict with what they do. And it's a little bit torturous when you just want to get things done. And it's sort of always falling in your way. So I recommend just taking something that's already out there, the default one that comes with the ES lint, or the Airbnb, one, if you're writing some react code, and then just turning things off, I'm constantly turning things off, because I say, I get that. But I'm never actually running into issues with that. And I feel like if I were to write a run around with my code, just to make you happy, it's it's unnecessary.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"43"}},{"id":10,"start":424.29,"end":459.02,"text":"Yeah, absolutely. Anytime there's an accessibility things, I make sure to not turn those off. Because sometimes those can pop up. And you'll be like, Oh, I don't have time for this right now. But you do have time for that right now. And you need to be made aware of that kind of stuff. So I definitely I turn off when the ones I turn off are pretty inconsequential, like no use of radix radix. Yeah, yeah, I turn that one off, a turn off, no counsel, because I use console logs, I use that. I mean, it's always annoying when you put in a console log, and then it's red underline. And there's only these that are like, truly, truly necessary that I turn off. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"04"}},{"id":11,"start":459.09,"end":532.83,"text":"you could have like a separate linter rule for when you commit code. And when you develop code. And then before you commit it, it'll it'll say, hey, you forgot to console log in there. But it's just annoying that your your ESM break breaks every time you want to console log, something that seems a little bit unnecessary. But other things like unreachable code. So if you have a return statement, and then you have code underneath that many times, I've accidentally done a return tip inside of like a year, but you goof up an if statement, and you have a return inside of that. And then it tells you there's unreachable code underneath there. either delete it, or you have some sort of error in your your earlier return because this code will never in any circumstance ever run. So I feel like as Lynn has made me as like, as like salty as you get with it. Sometimes I remember the first time I ever turned it on. I was like who lives this way? Because it's almost everything I do is wrong. But after maybe a couple weeks, especially reading into the rules, like I always go down a rabbit hole of why is this underlined? Oh, that's interesting. Let me go read into like the GitHub issue and see why do people actually believe this? or Why do people believe that this is not a good way to write code. And I think it just just makes you a better developer all around,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"39"}},{"id":12,"start":533.03,"end":568.55,"text":"right. And you can make those judgments yourself whether or not that is something that is truly necessary. But one of the things I really love is like the no unused variables, because sometimes you're writing code. And then in a refactor, it makes it really easy to see what you're using, what you're not using, maybe what you intended on using and you're not using, and maybe you can, you can flip that around. I also use it to enforce prop types and react because I'm not using TypeScript in my project. So having strict prop types and default props on every component is pretty important to me, at least to prevent unexpected breakings of things. So do you want to get to the formatting.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"53"}},{"id":13,"start":568.74,"end":570.48,"text":"One more thing to add to it?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"28"}},{"id":14,"start":570.48,"end":571.77,"text":"Alright, let's do it.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"09","ss":"30"}},{"id":15,"start":571.949,"end":641.3,"text":"One last thing I want to say is that all of his ESLint rules, you can turn them off, which is zero, you can turn them to warning, and you can turn them to error. So you can some of these that is like console log, you could just turn into a warning, and it'll just be yellow. And you say yeah, I know that that shouldn't be left in there, but I'm using it right now. Another kind of neat thing is like the no unused variables. One thing that I do in Express is that every single Express function that I write, you get the request the response The error in your next function, and that's the signature that I write for all of my expressing whether or not I use the next or the error or anything in there is, I always want to have it and what was happening with me is it would be like you didn't use your Error Error variable. So I would delete it from the signature of the function. And then I would like need that variable. And then I had to go back and add it. So you can write these these like little regex is called arcs ignore pattern. And what that will do is to say, like, tell me not to have unused variables in that my function passes me but ignore request response next and error, because those are always the ones that I like to be using. Word.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"31"}},{"id":16,"start":641.54,"end":719.22,"text":"Interesting. Yeah, I bet I don't, I don't turn that one off a whole lot. Because I don't do that, like you do. But it's interesting. I know, that's definitely like a thing that a lot of people do have those things in there. Cool. So uh, in addition to all of that awesome stuff, we also have prettier which can work in coordination with es lint, I actually use the prettier extending, I extend my es lint config via prettier, and I have prettier forward slash prettier as an error in my es lint rules, in addition to having prettier installed for my project. Now, I actually don't think I tweak prettier at all. I'm not sure I do. But prettier. Before we get into it is really just a format or so in a lot of other languages. Like maybe like Python, your code has to be formatted a certain way, right for it to work in JavaScript. Yeah, you can write your code in all sorts of different ways. And it's not always great for teams, or maybe people working on a file, and then all of a sudden, you open it up, and it's some foreign sort of formatting. So a prettier does is it sort of standardizes the formatting. And one of the really great things that I love about prettier is configuring it to reformat on save. So I typically don't even concern myself with formatting too much when I'm typing. I don't do proper indentations. And I don't worry about the correct","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"41"}},{"id":17,"start":719.25,"end":720.66,"text":"type of No, I'm a slob. Now","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"11","ss":"59"}},{"id":18,"start":720.66,"end":783.69,"text":"it's the past total slob. In fact, I'm such a slob though. And I'm not using prettier, and I save it and doesn't update it for me, I get really frustrated because I have to go and fix things. But even like things like adjusting the tabbing of a component how far out it is right? You make one change. And then you got to select, you got to read tab and everything like that. Now with prettier, you can just hit save and watch it all magically fall into line. So I love prettier. And I pretty much don't touch a project unless I'm using prettier nowadays, because not only does it like make my code more standardized, easier to read. But I know that across teams, I'm going to be happier with the code that my team's writing, I'm going to be happier reading it, it makes more sense to have that in my workflow and just have something totally standardized rather than write it the way you want. And it's way easier to enforce when it's an automatic thing than when it's like up to the users discretion, Hey, could you follow all of these code formatting rules and memorize them and then don't ever mess them up? Right? Where you're just is a robot, let the robot do it for you.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"00"}},{"id":19,"start":783.72,"end":814.5,"text":"It's crazy how much we used to fuss over a coding style. And there would be these huge coding documents. And we use this many tab pieces, tabs or spaces or single quotes or double quotes. And now we take that all out of it. And it's pretty amazing for beginners, because it takes all the like part of my hugest feedback when I was beginning teaching HTML and CSS is this is messy, you should clean it up a little. And now it's just like, doesn't matter at all. Because as soon as you hit save, it will indent it for you and look a lot nicer.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"03"}},{"id":20,"start":814.62,"end":841.29,"text":"Now, it also gives you visibility into like well formatted code. Like when you're used to reading well formatted code, you're going to be way more strict about requiring well formatted code. Because if you get used to looking at reading and writing sloppy code, then other people are going to be super annoyed with you. And you're just not going to set yourself up for success where with this, it's automatic, and you get used to looking at it as like this is what it should look like.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"13","ss":"34"}},{"id":21,"start":841.439,"end":891.96,"text":"Well, there's three things that I change on prettier, myself prettier doesn't have a whole lot of options, because it's it's opinionated by default. But with all things, people say can we just have a setting to do X, Y, and Z. So the three that I use is first I turn trailing comma to what's called s five. And just like we talked about the trailing comma, if you don't add a trailing comma to your objects, and you save it, this S five will automatically add one, you also have the option to set it to all which will also add a trailing comment, comma in your function arguments. So if your function has two arguments, you have two commas and one after the last argument, which seems a bit odd, huh. But that as an ESX. That's allowed. I don't use it myself though. The other thing is I use single quotes instead of double quotes, although I've been thrown around the idea of just going all in on backticks Yeah, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"01"}},{"id":22,"start":892.02,"end":894.96,"text":"think that I might go. I like how it gets the set set up for you.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"52"}},{"id":23,"start":895.08,"end":932.22,"text":"Yeah, yeah, that's that's where I got I was looking at a lot of the cats for example. So I was like, it does mean make a lot of sense to just use backticks for strings, because then you don't have to worry about single or double quotes or escaping things or switching it to back ticks when you want to interpolate something. So I think I will probably do that at some point this year. And then the other one is I changed my print width to 100 characters, because 80 characters wide, and then it wraps. I'm on a huge screen, I don't work with other teams with people on different things. So I find that I can easily have two panes of code open at once. And 100 characters is still enough for me to see everything nice.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"55"}},{"id":24,"start":932.25,"end":951.93,"text":"So I mean, we've never discussed our prettier RC files before. And let me go down the line if my prettier RC single quote is equal to true, oh, you turned it on good. Trailing comma is equal to s five. I don't have the width, though. So we're dead on in both of those. So it's funny, hilarious name,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"32"}},{"id":25,"start":951.93,"end":1091.52,"text":"but we've never talked about it together. And our settings are almost exactly the same hilarious. That is really funny. Man, that's, that's good. The way that I set up my prettier is through es lint. I think Scott does that as well, because es lint has this dash dash fix option, which it will actually fix a couple things like like cause like, if you forget a semi colon, ts lint, we'll add that in. So it has the ability to run fix against your code. And then you can extend it by just putting prettier in that. So I have it all in one. I don't use prettier via esque VS code. And the reason behind that is because I don't want my editor to be tied to how the formatting should go. Because if I wanted to hook into a get hook, like before you before you push, there's some people that only use prettier in ESLint before they commit. So there, they feel like they can figure it all out themselves, which I don't understand, like just have it on save every single time because then then you don't have to worry about doing indentation and whatnot. It just does it for you. But if you want to do on a good hook, if you wanted to use another editor for whatever reason, if you wanted to throw this up on a server that you're using vim on, all of that stuff will work. No problem with this. It's not tied to your specific VS code, or sublime or whatever. So I like this way, it's not as one nice clean package. I also use a HTML plugin for es lint, which will anytime you have an HTML page with a script tag, it will also format the contents of that script tag, which I find very helpful for anytime I'm doing a quick little demo specifically in my specifically in my CSS Grid course. Because prettier we should say this it was prettier will do not just JavaScript prettier will do CSS prettier will do graph QL. There's a prettier PHP plugin, which is currently being worked on. I tried it, I threw like a gnarly six year old functions, PHP WordPress file at it. And it didn't break it, which was amazing. Because I had tried out a whole bunch of PHP linters. And they all broke my code. I threw it through prettier PHP, and nothing broke. It was a little funky at spots, which is why it's still being in development. Like I'm so excited to see that prettier is being extended to all of these different languages. Because I think pretty soon we'll be able to just save your save your files in whatever language and not have to worry about formatting or whatnot.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"51"}},{"id":26,"start":1091.57,"end":1210.53,"text":"Yeah, I think that's the key point is probably didn't break your code, because prettier is really just formatting right? It's like not correcting errors necessarily. It's just fixing formatting. And I really love how sometimes you miss like an indent or maybe you miss like a closing element or something and prettier Aeneas lint in combination are going to let you know pretty quickly exactly where that stuff is. So it makes it just so genuinely easy to solve and find bugs when you just look at your code that I can't imagine writing without es lint and prettier in combination. Next part up, we want to talk a little bit about how to use this, you mentioned that you just use it again in a project basis rather than in your editor. But the editor has a big pour a big role to play in this as well. Because we both use VS code. And one of the things that I've always really loved about VS code it was maybe the thing that sold me on VS code was just how easy linting and prettier was to get set up. You really just don't have to do anything. The editor really is set up from the beginning to use linting and systems like that so that you feel confident when you start going. I remember just how much of a pain it was occasionally to get Sublime Text, working with a linter there'd be some error going on the back in the background, you had to check some logs, you had to install a bunch of stuff. And if it didn't work, you didn't necessarily know why it didn't work. Now, in VS code, you get a little exclamation point. If something's not configured correctly, it lets you know exactly what's going on. But for the most part, I've had nothing but awesome experiences using VS code with these things besides getting a little red underline under each item right? It feels like a spelling error and a Microsoft Word document. You can see it a mile away. You get the little squirrely red underline look Do you know there is an error? When you hover over it? lets you know what the problem is. But you you actually I know you use a different way to jump from error tear frequently, right?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"18","ss":"11"}},{"id":27,"start":1210.55,"end":1264.07,"text":"I actually don't use the I've used it in the past, like the VS code, jump from air to error and fix them. But generally, just as I'm coding, I'll see the either the yellow, which is a warning, or the the red, which is the error, underline. And I'll just go ahead and fix it. I'll hover over top of it, and see which rule I'm breaking. And then I'll go do a little bit of research. If I'm not sure why I'm breaking that rule even have having this setup for probably three years, I still regularly run into new things that have never, I've never accidentally written myself. Yeah, so it's like, I still use all the VS code stuff. But I don't use any of the tools that allow me to cycle through all of it, I have it set up to save on fix, there's a VS code setting that you can do to run the fix on Save. And that way it will every time you save it, it will just re indent your code and check for any errors. And then the other question I get all time is do you have a local config or a global config on your computer?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"10"}},{"id":28,"start":1264.31,"end":1312.59,"text":"I have a local config. I don't have any global config setup. But it probably would make sense to do that. Although I do like to keep things with the project, just so anybody who's using it can also include that stuff. The vs. Code folder, I believe it is Yeah, yeah. So I, I do primarily use a local one for a lot of things. But that's really just the stuff that is I want my other people in my code base to also be saving on on or formatting and save and stuff like that. I don't save my personal like font sizes, those kind of things, maybe just project specific things. But I do I do have a glow. I did say I didn't have a global I have a global, I was just thinking it was like not a global I don't know, I never created anything. It's just the default,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"21","ss":"04"}},{"id":29,"start":1312.77,"end":1397.25,"text":"VSP and the default setup, whatever, yeah, I have a global ESLint file that has all of my settings in it. And that's great, because anytime I want to whip up a quick project or do a little demo, it immediately just starts working. And then I don't set it up. And then anytime I have a project that is more long term, I will set a local Yes, lint in there. Um, what I'm considering doing is just making my own, like, you can publish your own es lint to NPM. And then you can just set your es lint to extend like the West boss coding style. So much sense. Yeah, I've been considering doing that just for my tutorials as well as just for my own sake. And that way anytime I like make a change my mind as to linewidth or something like that I can just publish a new version of my my settings, because that's all Airbnb is yes, Lin extends Airbnb. And then they have a huge slew of rules. So I could just make my own list of rules that extend Airbnb, and then publish that up to NPM. Nice. The only reason I haven't done that is like I don't really want to be, I have my dot files online. But like I don't like these aren't the dot files for everybody. Some people just copy paste my own my dot files, and then they send me these big long emails, they're offended at a certain choice that I've made. And I'm just like, this is my own personal, like, please don't take these as gospel. This is just what works for me. Like it's not like Airbnb, where they have these very opinionated, it's just what works for me. Yeah. Hey,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"52"}},{"id":30,"start":1397.67,"end":1415.13,"text":"so does your version of VS code do this. This is one of the things I think popped up recently. In VS code. I'm not sure if this is an extension, I'm pretty sure it's not. If you go to your es lint RC file, do you get little descriptions next to each one of your rules? Oh, let me see. And maybe it's an extension I added going to confirm this.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"17"}},{"id":31,"start":1415.28,"end":1445.7,"text":"Nope, my minor showed up as well, that so that is um, this has been in VS code for a while it works with package JSON and stuff like that, where they have these like little definitions for config files. So package JSON, Babel, RC, es lint RC and they know of all it's like it's kind of like typed types for config files. And they know what all the potential things are like if you open up a package, JSON it and hover over some of the predefined, like author and license, they'll show you that as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"35"}},{"id":32,"start":1445.97,"end":1487.25,"text":"Nice. Yeah, I love this. Because I mean, you get a glance at what the rule actually is doing. And you can jump to the documentation immediately from there. And that's something that you often do if you're trying to figure out if you need this rule or not. Cool. So this episode is getting a little tasty. So what we're going to be doing is we're going to be covering some more tools in the next hasty treat, and which is going to improve the quality of your code. We're gonna be talking about types in JavaScript via TypeScript flow or reasons, something like that. And then we're also going to be talking about testing. And maybe we're gonna be talking a little bit about exception and error tracking tools as well.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"24","ss":"05"}},{"id":33,"start":1487.34,"end":1490.79,"text":"Yes, we've got some friends in that space we could talk about.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"47"}},{"id":34,"start":1491,"end":1492.86,"text":"Yeah, Yes, we do.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"24","ss":"51"}},{"id":35,"start":1493.49,"end":1535.79,"text":"Awesome. So hopefully you enjoyed a few things here. There. If you want to find my dot files. It's github.com for slash West boss Ford slash d o t f i l e s. Well, that has all the VS code extensions that I use all of my hyper term settings, all of my es lint rules. They're all listed in there. I should make one of those people asked me to make one all the time. I should bite the bullet and do it. Yeah, people ask me all the time, too. And I finally publish them up. And I don't have any like synching setup. I said, I just like, every time I change my Islam, I'll just copy paste it up to GitHub. Yeah. And I find that works. Well, some people have like a sinking setup. So if they have multiple machines, they can sync them between machines, but I don't have multiple machines, so don't need to worry about that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"24","ss":"53"}},{"id":36,"start":1536,"end":1540.62,"text":"Yeah, well with how much I've been changing machines lately, maybe should be an option for me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"36"}},{"id":37,"start":1541.7,"end":1543.89,"text":"Absolutely. Cool. Anything else for today?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"41"}},{"id":38,"start":1544.34,"end":1545,"text":"I got nothing.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"44"}},{"id":39,"start":1545.569,"end":1549.2,"text":"All right. Thanks for tuning in. We will catch up on Wednesday.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"45"}},{"id":40,"start":1552.8,"end":1562.58,"text":"Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"52"}}],[{"id":1,"start":1.319,"end":9.9,"text":"You're listening to syntax podcast with a tastiest web development treats out there. strap yourself in and get ready. Here is Scott and Wes Bos Welcome","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":9.9,"end":38.25,"text":"to syntax in this tasty treat. We're going to be talking all about part two of the freelance client lifecycle, we're we're going to be going through the design part of your working with freelance clients, the development part, feedback and revisions, deployment handoff, bug fixes and support and what happened, what to do when things go wrong. You are listening to syntax. My name is Scott Tolinksi. And with me, as always, is Wes Bos, how you doing was,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"09"}},{"id":3,"start":38.25,"end":52.89,"text":"I'm doing fantastic. I'm really liking this whole topic of freelance client lifecycle, I think it's, it's fun to look back at all of the stuff I've learned of doing freelancing. And I think it's going to be helpful for anyone who wants to start a business or just earn a little bit extra side money.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"38"}},{"id":4,"start":52.919,"end":121.29,"text":"Yeah, and there's so much info here. I mean, we had to break it out into two was to do it justice. And you could probably break it out into like four or five episodes of even more stuff. So if you are loving this freelance stuff, let us know. And we will continue to expand upon it. This episode is sponsored by Sanity, which is an amazing back end solution to your front end sites. It's a sort of a bring your own front end platform that really makes entering your content and content management in general a joy. There's some really crazy new features that we're going to be talking about in these when we talk about Sanity more. And it's also sponsored by longtime sponsors, which is Freshbooks. And Freshbooks is cloud accounting software, which is going to be extremely important. If you are wanting to keep good communication with your clients and be working as a freelancer in general, this platform is made for you. So let's get into it and start talking about the design phase of the freelancing project. And this could be whether or not you are the designer yourself or you are working with another designer either way, there's most likely going to be a design phase, you are working with the client on what this thing will look like that you can then build it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"52"}},{"id":5,"start":121.469,"end":282.63,"text":"Alright, so let's talk about the design, the first thing you want to do with the design of your client is first collect all assets from your client. So part of the requirements is if you do in the design, you will be gathering information about what you want to look like any any inspiration that they have things like that. But at this point, you need to make sure that you collect all assets from your client. So that might be their logo. If the client has a brand guideline in place, that's important. If they don't, even sometimes even with the logo. I've had clients thinking that like a website comes with a logo, right? Yeah. So that's important to specify that very early in the requirements process, and then a list of likes and dislikes, because there's kind of two parts to the design, the major point of the design is to get across whatever it is, that is the purpose of the business or the purpose of the website. So I think that's probably the most important part. But there's also this other part where you have to give off a feel for the company and convey the type of company that it is as well as make the person who is getting the website happy with how the website looks and, and the overall vibe that the website gets gives off. So getting all of that information up front is really, really important. And then once you have that, it's time to create the initial look and feel. So generally what I would do for this is take their logo take any like brand colors that they might have take any brand guidelines, often I would get this huge PDF of brand guidelines from from the client. And they would say, these are our colors. These aren't primary colors, these are secondary colors, here is our logo, here's things you cannot do with the logo. So things like putting the logo in a box, things like putting borders too close to the logo, things like tilting the logo, things like overlapping the logo, there's often list of do's and do nots that come with a logo, which is which is extremely helpful, because you know what you can do to maintain their brand guidelines from their website all the way through to any other thing that their logo goes on. And then I would just kind of go through and mock up an idea that it happened, I never really did a whole bunch of different ideas. So at least for me, this was not something where I would like come up with six or seven different layout ideas, I would just come up with one, maybe I usually just design the homepage. So that's the header, maybe whatever's on the homepage, what text looks like, make sure you're hitting all of your things like typography, colors, all of your like think like your global styles, getting all of that out on the page. So you can get an overall look and feel of the website. And then I would I would present that to a client. We'll talk about presenting in just a second. But how do you tackle something like this if the clients asking you to design something?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"01"}},{"id":6,"start":282.689,"end":349.35,"text":"Yeah, I like to do just sort of general boards like this is sort of the feel of things, right? We're going to go for this we're going to go for this we're going to go for this and make it very explicit that this is not the layout. This is not the website. This is like this is the overall big picture sort of look we're gonna go with and again, I know why you To work for an agency that would do three fully fleshed up, like fleshed out designs, like just total complete designs at this point, and then present them to the clients, they pick one. And then the client always pick the worst one. Like it was without fail. If we were to look at those, we'd be like, we're like this one the least, they're always going to pick that one. So I don't like to do that. Personally, I don't like to give the client that much control, because they're not the designer, obviously, they want to have something that represents them. But you know, you want to be able to have the ability to create something they you know, you're proud of his good work rather than just, you know, a hodgepodge of things that they like. So, I mean, I think I personally like the idea of creating boards. And you could call them sort of like mood boards, a design boards of just sort of general feel ideas, sort of textures, maybe things like that you're working with, yeah, and then go from there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"42"}},{"id":7,"start":349.38,"end":447.27,"text":"I really like that is why I never did that. But I think that would probably work better. Because you don't get hung up on I don't like that this is in this place. And you just focus on colors and look and feel. And I should also say that like I'm, I wouldn't call myself a designer, I design a whole bunch of websites. But I know that people who are full time designers have a much more elaborate process than this and, and go much more in depth into it. But the one thing I will say is that it's important to back up the whys of what you did. Because if you just design something and give it to the client, they might just take it as like a pretty picture. And they might show somebody in their family who has good taste, and get their feedback on it. And looking good is really just a small slice of actually a good design. So I think that because they're hiring you as an expert, you need to back it up and say, This is what I did behind it. This button is teal, because it's your call to action. And we're trying to get the most leads, we're trying to sell the most widgets at the end of the day. Or if they come back with some some suggestions for it, like, Oh, I would like to use this color and whatever you need to say, okay, we can try that. Or that's not a good idea. Because of accessibility, that's not a good idea. Because it's hard to read, you might be leaving people out, you'd be might be selling less things because of this. Because at the end of the day, we say this a couple times that you are the expert here, they're hiring you. And you need to tell them, this is the design. And this is why I've done it because I think that we're going to be able to sell more things, or I think that it's going to be clearer to people if we approach the navigation in such a way.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"49"}},{"id":8,"start":447.51,"end":576.72,"text":"Yeah, yeah, absolutely. And then getting into some of the like, I don't want to just think about all the times I've shown a client work that's like too early, and say, Okay, this is what I'm sort of thinking. And in my mind, I can see that this thing is unfinished, or this is not totally complete, or these ideas are like general ideas. And the client will be like, well, this button is no good. This is wrong, this is off by half a millimeter over here. And you're just thinking like, Ah, this is not like this is not finished. And here, you're evaluating it, I think about even just like, for some reason, when you have a design and you're showing off a design to somebody and it's not quite perfect, they're always going to look at the one thing you don't want them to look at. I always just think back to this. This is like a sort of a decent example. But like, I think back to this A B testing, we did it forward. And we showed them this design, and it didn't have all of the cars in it, it only had like three or four Ford cars in it rather than their whole lineup. And it was like for a showroom component. And we asked a bunch of people to tell us like what they thought about this design, you know, what are your thoughts is just general not not working with the client, but just general AB sort of like, you know, pre designed sort of how does this feel to you? And you would not believe how many people got hung up on the dumbest things. This guy was just like, yeah, it's okay, there's no Mustang. And I only liked the Mustang. So therefore, I hate everything about this. I hate the layout. I hate that there's no Mustang, man, it would be really better if you had a Mustang in this, and we're just like, doesn't have anything to do with the design or the Yeah, like that has nothing to do with it. And I just remember being like, so upset by that, that like, you know, all of the hard work that went into producing this thing was just out the window because of one little thing that the person got hung up on and your clients will get hung up on if they see things that are imperfect. So I think I would be cautious about showing things too early in the creative process. Things that they can't, you know, wrap their head around as being maybe theoretical or sort of like a group thing. So be careful about when you show what because unfinished work will not necessarily represent what you want it to represent or what you thinking it's going to represent.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"27"}},{"id":9,"start":576.799,"end":602.539,"text":"Yeah, I even have that now anytime I tweet, like a half finished design because I love to to show my work and I love to show what I'm working on. Anytime I show anything related to design, you get people jumping on every little thing like it's got most of finished polished design, which is so frustrating because it makes me not want to share things because I know I'm gonna have to spend the next hour being like yeah, I know I'm not done it yet. I'm just saying To show what I'm like my work in progress, right, right.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"36"}},{"id":10,"start":602.539,"end":621.21,"text":"And I actually showed like a new design fairly recently. And it was like, really, the design itself was like, basically there. But then everyone was hung up on the spelling of one word, or like you wrote the word Gatsby on two different cards. But there's clearly a react logo on the one card and a Gatsby, on the other column. Like it's just mock data. This is just fake data.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"02"}},{"id":11,"start":622.71,"end":691.26,"text":"Oh, it's so frustrating that kind of, that's why it's important to, like Scott says, Don't show it too early. Another little trick I had back in the day, before we had any of these things like envision, or these apps that would like show the design is I would just export the entire thing as a PNG. And then I would embed it and center it on a website. And and then I would send people to a link and and then it would feel like it's in the browser. And not like opening it up on like Windows File preview, or the thing is, like, way smaller than it will actually be and whatnot. And even then I would get people being like, but the sides are cut off. I'm like, well, it's not zoom. So I would have ended up making the PNG like 4000 pixels wide, just so people wouldn't complain about the sides being cut off. And just little things like that you can think ahead to people getting distracted. Where or and even just game like, Look, this is not done. Don't worry about the little fussy details. We're gonna get into that. But what I'm really like, when you see this, what is your emotion? How do you feel about this? What are your initial thoughts? And I'm not looking for you to come back with a laundry list of little bug fixes that that were there? We're not nearly there. Yeah, well, I","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"22"}},{"id":12,"start":691.26,"end":693.84,"text":"feel like I would really like it more if it had the Mustang though.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"31"}},{"id":13,"start":695.97,"end":698.279,"text":"about it? Oh, that's great.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"11","ss":"35"}},{"id":14,"start":698.309,"end":762.48,"text":"I think it's important to I mean, you when you're working with clients is that you know, you are the expert. And they typically don't know very much about our craft in general. So be prepared for non standard feedback, a lot of people who are designers, or went to art school, and they had a whole entire classes about proper critique, and how to talk about art and how to talk about design. And your clients don't have any of that. And they may think that they're savvy, and they may think that they know it all. Or they may think that they're good at it. But at the end of the day, they don't have that. So be prepared for some really odd feedback. I've been told this feels cloudy, can we make it more sunny? I'm sure many people have heard about, can we make it pop more. And it's going to be your job to really get to the heart of what they're actually talking about. And to be honest, this kind of stuff is frustrating for me. And it's actually very difficult for me to really get through to that. But it is important. Do you have any like little tips or tricks for when a client says make it pop? Or make it make it more sunny? Like how do you how do you get through that Bs and actually figure out what they're talking about?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"38"}},{"id":15,"start":762.57,"end":801.09,"text":"Yeah, my first emotion to that is just to rage. But my second is that they're trying to tell me something and they can't quite get it across. It's like my two year old. She can speak but not well enough. And when she gets frustrated she screams and what you have my first reaction is rage. Stop screaming. And my second reaction is she's trying to tell me something, but she can't quite get it across. So you have to do the same thing with your client as your two year old. Did you poop your pants? This year? You hungry? Like what's going on? And you really have to do","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"42"}},{"id":16,"start":802.38,"end":804.36,"text":"amazing that that word? Is it that","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"13","ss":"22"}},{"id":17,"start":805.71,"end":806.76,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"13","ss":"25"}},{"id":18,"start":808.169,"end":812.22,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"13","ss":"28"}},{"id":19,"start":812.37,"end":864.63,"text":"Did you want to watch Papa troll. But obviously, the thing we need to get across here is that something is bugging them. And they can't quite verbalize what is going on with them. So they're trying to figure out, I don't like it, something is wrong with it. Here are my ideas on how to fix it. You need to dig and find out why that's wrong. And then come back and say what I hear you saying is that it's too too dark, or you get a weird emotion from that. And here's how I think we can we can fix that. Right? Like it's not my job when a contractor comes into my house. And they build something and I don't have to come in and start with like maybe if you cut a couple of two by fours and bang them up here and then lift the house here. No, I just say like I feel like this space is a bit too cramped. You solve it. Yeah, it's your you're the expert here right is that","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"13","ss":"32"}},{"id":20,"start":864.63,"end":876.799,"text":"that's so dead on. Can you just love a we have a we just throw a little little just put a brick here. And that's just got worse. they'll fix it. I can imagine the clock because the contractor just be like I quit. Let's see you later.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"24"}},{"id":21,"start":876.84,"end":888.929,"text":"Yeah, yeah, exactly. Like we have no idea. So it's funny how those, the actual contractor people coming to your work to do physical work is the same thing as doing this digital work that we have here.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"36"}},{"id":22,"start":888.96,"end":890.909,"text":"Yeah, it's important to think about it like that. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"48"}},{"id":23,"start":891.049,"end":914.46,"text":"I think also we need to make sure that you don't get offended by feedback. So especially in design, this is your craft. This is your art and you're putting yourself out there. And you will be met with criticism, feedback, we have a whole show on feedback and criticism you can go back and listen to, but it's just be prepared for that and know that it's they obviously hire you because they like your work. But feedback and criticism is going to be part of the process.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"51"}},{"id":24,"start":914.49,"end":955.95,"text":"Yeah. Yes. Cool. So all right, you are designing, you are ready to go into development. And potentially you need a back end. I mean, maybe you have to find out. But maybe you need the backend for this thing. Because you know, there's a lot of options for front end code. But what do we do now that we're doing a lot of headless sites and one of the cool services that we both love here at syntax is Sanity. Now Sanity, is this bring your own front end solution at that sanity.io. And they say it's structured content done right. And they have some insane new features that specifically work with some of the platforms that we love on this show like Gatsby, can you tell us a little bit about some cool stuff they have coming out?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"15","ss":"14"}},{"id":25,"start":956.07,"end":1072.58,"text":"Yeah. So the thing with Gatsby is that you need some way to get data into Gatsby. And these are called source plugins. So you can get a WordPress source plugin, you can use a markdown source plugin, you can any anywhere that can hold data, Gatsby can source that data by reading it. And one of the downsides I've had actually with WordPress is that I tried to source my own website. And it took like, like 15 minutes, because it has a read every single thing. And then it broke like 12 minutes in and I had to fix it. And like it was like trying to debug before we had Firebug. And One really cool thing about Gatsby, or sorry about Sanity is that they have a plugin called the Gatsby source plugin. And it's the only source plugin in town that gives you a real time preview of your data. So that's really cool. Because as you are updating your data, in the back end of sanity, you're going to see real time this thing updating on your Gatsby site, which is often a downside to static site generation where you need to redo the whole generation just to see your your data changing. So if you have a client that needs a back end, in a nice interface to be able to input their data we've talked about before you can create your own interface for Sanity with react components, you can just use Sanity as the back end and the Gatsby source plug in to pull in your data. It also integrates with Gatsby image, you've got blazing fast builds, and it just works. So this is pretty, pretty cool. I'm gonna try this myself. I think that's probably one of the coolest ways if you want to just try out Sanity is I know that a lot of you are looking for Gatsby projects right now. So grab Sanity, grab Gatsby, try whip up a quick little site and see how this thing works. So you want to check it out is that sanity.io forward slash syntax as s a n i t y and you they are going to double what you get in the free plan. So thanks so much just handy for sponsoring,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"15","ss":"56"}},{"id":26,"start":1072.71,"end":1129.07,"text":"sick, sick, sick, sick, yes, entities doing big stuff. I'm really psyched about that. So let's get into the dev process now. And sometimes you are the dev and the designer. And they're sort of like a Alright, the designs now done, let's go ahead and get into the dev process. Sometimes you're working with a designer, sometimes you're working with an agency, sometimes you're working with a bigger group. And these things can either be sequential one happens, the other happens, sometimes they start at the same time. And you need to be able to know what you can work on right now. And what's maybe not determined by the design, maybe you can start building up some structure stuff. Maybe if you're working with the CMS and you know, sort of what kind of content is going to be there, you can start building out your custom post types, that sort of thing. But even before that, what are some of the tools that you like to use to make sure that the whole process around development goes? Well, because it's so technical, and it's most likely that part of the process their clients are going to know the least about?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"17","ss":"52"}},{"id":27,"start":1129.29,"end":1212.99,"text":"Yeah, and I think the dev process maybe is even easier than the design process, because so much of design is subjective. Whereas if you have very clear requirements in your development, it's like writing good tests. You know, if you've done that correctly, obviously, there's a lot of like, especially with UI design, and things like UI development, it might be a little bit mushy there. But knowing if you have clearly specked out what these functionalities should do, how it should work and all of that, then actually developing to that spec should be somewhat easy or somewhat clear. I shouldn't say easy but but clear. What I also like to do is just like design is the only show that your your dev progress if your client is capable of understanding the dev process. So that's really important because if you show them something that's half built or or breaks in certain edge cases, then they're going to start raising flags, you know, yeah, I haven't haven't done that yet. This is just the the process so far. So I really like to just show them when that feature is done. I'll push that to a staging and have them go through it. We'll talk about feedback in just a second. But that's really the process I do is when a feature is done. Push it up. And that way I can move on to the next feature. Well, they're trying it out. And, and providing feedback on it trying to just like break it and and see how it works for for their actual process.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"18","ss":"49"}},{"id":28,"start":1213.31,"end":1315.86,"text":"Yeah, and just like design, you don't want to show things too early. Or if you do make sure that there's clear expectations around what you're showing pacifically. Like, again, with CSS, write CSS in your design process can cause so many troubles. Because you know, things are in flux, you're still creating things, you're still putting things here and there. And maybe things aren't just right. And if things aren't just right, and you show it to your client, and they think that they're looking at something that's further along than it is. Or maybe they look at the design that you have done, and they don't understand that, oh, it only takes five seconds to style this navigation, but it's totally unstyled right now. And they're looking at that thinking like, Oh, my God, the navigation is not even styled This is this project is nowhere near and where it's going to be finished, clients have no understanding of the length of time it takes to do any of this stuff. So I think it's important when you are showing work, if you're showing it early as development work that there is clear expectations, what should you be looking at, when I'm looking at this here, okay, you should be able to click through all the pages, that's the only thing you should look at, you should be able to use the home page as expected, it's gonna look nice, it's gonna do what it's supposed to, here's what's not working, okay, the navigation isn't styled most of the CSS isn't there. I mean, they don't know CSS, but most of the design isn't there. And make sure that they have those clear understanding and expectations, because just like the design thing they're going to look at and see the only thing that's not working in your project, they're going to call it out. And then we're going to give you a huge laundry list of a bunch of stuff that you already know that you need to do. So you don't want to tell your client, I'm not accepting feedback right now on this, I know what I need to do, things are moving here, I'll share an update again with you next week. And then we can go from there.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"13"}},{"id":29,"start":1316.16,"end":1345.83,"text":"I think that's probably the most important part is tell them do not give me feedback just yet. still in the works, I just thought I would let you in to see how far we are. And that's good, because the client will often just they'll feel at ease knowing Okay, things are getting done. Obviously, it's not done yet. So I'm not gonna give any feedback. But I just feel good knowing that this is the progress that we're making. And we're going to hit our goals, because more often than not the person who is talking with you, they have a boss or a fortune, they need to give some sort of feedback as to how things are going as well.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"21","ss":"56"}},{"id":30,"start":1346.04,"end":1422.33,"text":"And I think along with that, too, is giving like specific regular updates. And this is sort of goes along with their scheduling part of it. But if you want to say like, okay, there's going to be a new version out on Friday, here's what's changed, here's what's new, and make it onto a schedule, stick to that schedule, so that your client knows when they're gonna see the next update, when they can expect to hear from you again, that way. They're not wondering, is this project in limbo? Are they even working on it? Is it even making any sort of progress. And sometimes, there's a lot of technical stuff that goes on behind the scenes. And when you send them the next version of the site, it doesn't look any different. And they might interpret that as Nothing's going on. So you do need to have these regular interval check ins you can establish every single Friday afternoon, you're going to get an email is going to be a brief, here's what I'm working on. Here's what I spend time on. It doesn't have to be the most in depth thing. But here's maybe what to look at. And another thing is your clients don't know technical jargon, and they don't care, right? You don't want to tell them like oh, I added this component. That's a stateless functional component, and blah, blah, blah, none of them care about any of that. So just say, Hey, I worked on that the foundations for building the slideshow system, I worked on the post custom post system, I worked on this or that or whatever, just to give them some sort of idea about what's going on","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"22","ss":"26"}},{"id":31,"start":1422.45,"end":1519.98,"text":"awesome tips. So once the dev is at a point where you can get feedback. So some stuff, you don't wait until the whole thing is done, you might want to let them in a little earlier at a certain point. And then it's time for feedback and revisions. So in my quote, I always make sure that there is time for I usually did three rounds of revisions. So what that will be is that you present the website to the client, and it's time for them to go through it and let you know all of their feedback. And it's important to me. And for everyone's schedule, that you provide all of the feedback in one, I usually say one email, so it's written down, and then a follow up call. So we'll go through all of the things together. Sometimes it's just minor, little nitpicky stuff. Other times it's, I was expecting it to be able to upload multiple images at a time or as expecting a preview of the image or as expecting the user to be able to sign something on this contact form all these like little things. And that's good because then you just have this laundry list of things where you can bang through it. Usually for smaller projects, I found that email or some sort of project management software was was more than enough, or like something like Basecamp or whatever. But as the project's got larger, I always lean on more project management software that's, that has things like bug tracking and email replies and maybe like things like con mon boards and, and tickets, and that was better and usually more technical clients loved using that because then they can just like log a bug. And they can quickly chime in and see what the status of it is or, or if there's questions that need to be asked, you can always go back to that one issue and see what the back and forth what's going on on that.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"42"}},{"id":32,"start":1520.01,"end":1559.34,"text":"Yeah, again, don't introduce that into clients that aren't going to need it, or aren't technical enough, or any of those things. Because if you were to give your client who, you know, can hardly use Facebook, access to your bug tracking system or whatever, they're going to be like, Okay, what do I do with this, and likewise, don't give that same client a back end that's based in GitHub, because I hear about that all the time. My client gave me this thing called GitHub, I don't really quite understand it. But I have to go here to enter this and do that like No, don't do though. No, not GitHub is not a content management system. It can Yeah, yeah, I don't know. that's a that's a pet peeve. Totally.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"25","ss":"20"}},{"id":33,"start":1559.4,"end":1571.04,"text":"I hear that all the time from people where it was good until like, my client wanted WordPress and and that's why so many people use WordPress is because it's an awesome back end, for people to use that. Yeah.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"25","ss":"59"}},{"id":34,"start":1571.07,"end":1623.39,"text":"And typically, they're used to it, they may be used to before, you don't want to have to teach your, your client new thing. So yeah, I mean, feedback is gonna come in, and it's not always in the same way that the design feedback comes in, it's not always going to be helpful. But a lot of times, it will try, like, they're not going to know, you know, they're gonna say this is not working, this is broken. This is, you know, they're gonna use language like that. And again, it's up to you to figure out what they mean, when they say the slideshow is broken, right? Maybe it's just that the slideshow doesn't loop around when it does one loop? Or maybe it just the slideshow doesn't automatically go after 30 seconds? They don't know. So it's up to you to say, Okay, what are you expecting this to do that it's not doing if something technical in your mind is working? And they're saying it's not working? Maybe it's even a browser issue? I mean, all this. Yeah. It's just it's, it's, it's frustrating. But it's one of those things that it is. So going to clear communication channels is going to solve everything for you.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"26","ss":"11"}},{"id":35,"start":1623.63,"end":1659.21,"text":"Absolutely. And I think getting them on a screenshare. If the client is not able to voice what the problem is, is really helpful. Because opening up the screenshare, you can see simple things like you forgot to tell them to reload the CSS or you didn't bust the cache. And they're seeing the old version, or things like they're using an older browser that's not supported, or all kinds of different things can happen. But if you see them in their own screen, as they're experiencing it, they can usually voice what's going on. And that's a lot of back and forth and being like, What do you mean, it's glitchy? What does that mean? That, you know,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"27","ss":"03"}},{"id":36,"start":1659.69,"end":1710.57,"text":"yeah, I know, glitchy broken, not working. Yeah, all that stuff is a very, very important to establish clear lines of communication. And again, we talked about in the first episode about money being important. And one of the things that you could do to establish a clear line of communication regards to money, invoices, and all that good stuff is to use some really excellent modern cloud accounting software, something that you might say is fresh, maybe perhaps fresh books. Fresh books is one of our sponsors, they've been sponsoring syntax for a long time. We absolutely love fresh books for a number of reasons. But they're going to make your life in some of these regards and some of the money stuff when you're working with freelance clients and customers and things like that, to establish clear lines of communication so that expectations are always met in terms of where money is, who's getting paid and how they're getting paid.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"27","ss":"39"}},{"id":37,"start":1710.81,"end":1780.32,"text":"Yeah, so I'm gonna highlight two features of Freshbooks. That is perfect for someone who's doing what we're talking about today. First one is project deposits. So when I start a project, I will usually take a non refundable deposit of 25% 50%, depending on how big it is, actually is for the project. And then you can sort of like hold on to that money via Freshbooks. And they can log in anytime and see how much of the invoice they've already deposited. And then also you can submit late payment reminder. So for me, I'd always say 50% of front 50% on before launch. So usually, as soon as everything is ready, get me paid. And then and then we'll launch the sucker that doesn't happen every time because people take longer to pay at some point. But if you do have a late payment Freshbooks will automatically send out a late payment reminder, which will often bump the client and remind them and that's really nice, because sometimes you're still working on the website, when the late payment reminder needs to go out. And it's not you that sending the late payment reminders. So you don't like tarnish that relationship. It's Freshbooks that sends it out. It's your accounting software. So it's like you kind of like make the robot do the dirty work of reminding your client that they didn't pay.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"28","ss":"30"}},{"id":38,"start":1781.64,"end":1782.78,"text":"That's why we have robots.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"29","ss":"41"}},{"id":39,"start":1782.86,"end":1806.21,"text":"Yeah, they have it here if your client forgets to pay you on time. Freshbooks takes care of the awkward reminder with customizable late payment reminders. So I love fresh books for that kind of stuff. They get all kinds of different features for freelancers, small businesses, or someone that's doing a side hustle, go to freshbooks comm forward slash syntax and intersects syntax and how did you hear about a section to get started with a 30 day free trial, no credit card required.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"29","ss":"42"}},{"id":40,"start":1806.3,"end":1870.71,"text":"Cool. So let's get on to the next part, which is going to be deployment. So you have know you've designed you've dev did the dev is pretty much done. Sometimes I get into deployment before the design is done. So that obviously you have like a staging site that they can look at, or have potentially a an entirely like a hidden URL. So I'll typically personally, I'll deploy pretty early on in the process, and have whatever the clients name dot Scott tolinksi.com, that they can go to look at it, it's not going to be crawled, if it's sensitive information, consider putting some sort of like brief password protection on it or something like that. I typically don't do password protection on it, I usually just do some robots nofollow stuff, so that it's not indexed. But that's pretty much what I do I keep this up, and I have it regularly deployed to this, even if I'm not telling my client to go look at it right now, hey, there's been an update, I'm still sort of deploying to it all the time, just so there's the latest version up there that I can see working in the browser or working at a host or just seeing it in action and a greater sort of way.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"30","ss":"06"}},{"id":41,"start":1870.74,"end":1950.33,"text":"Yeah, I always have like, on my own website, I would just have like clients that Wes Bos calm and then I would have like a URL, I usually didn't put author in front of it either. If I did, I just use basic auth, which is just a URL based username, password, that'll get you through it. Otherwise, you put it in a robots. txt, like Scott said, important other notes here is make sure you get your client to pay for the domains and the hosting, it might seem like a good idea to charge an extra five bucks a month on top of what you're paying for hosting. But it's not worth it. Because when you pay for the hosting, then your client comes to you, when there's issues with the email, they come to you, when there's issues with the the hosting, like maybe the host goes down for a little bit. And then also sometimes that a lot of times with this stuff is you just want to do the project. And you're done with it. And you say See you later to the client, cuz they have somebody else to actually manage the website. Whereas like, I still seven, eight years later, is still every year have to renew a domain and hosting for one of my past clients. And then I have to send them out an invoice via Freshbooks, which is super easy, but it's still a pain in the butt to actually have to send that off. So yeah, yeah, yeah. And like it sucks to own something that is not part of your business. It should be their it's their intellectual property, they should own the domain name and the hosting for that. And then they have to pay for that thing. Everything. Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"31","ss":"10"}},{"id":42,"start":1950.45,"end":1963.77,"text":"you don't want a hosting company, you want to GoDaddy. So like, you don't have the the secretaries and whatever the business managers to go ahead and like keep track all that stuff, or even manage it. So it's just it's just too much to extra manage.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"30"}},{"id":43,"start":1963.86,"end":1968.24,"text":"This is a bit of an aside, did you see the stuff GoDaddy was doing this weekend that went up, I saw","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"32","ss":"43"}},{"id":44,"start":1968.24,"end":1982.46,"text":"something about GoDaddy doing something to people's adding scripts into PS sites and that like they were adding my surprise face was like the you know, this is my surprise face. I'm not surprised at all, because GoDaddy is always like that.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"32","ss":"48"}},{"id":45,"start":1982.52,"end":2042.25,"text":"Yeah. So for those who didn't hear GoDaddy was injecting JavaScript on top of everybody's website that was likely doing just like following people around the web, similar to how Facebook and Google ads and everyone on the web is doing it. But because you like if you host a pool website with GoDaddy, they were injecting that data on top of it, which is so sketchy that they were doing that because they should not be touching your code and the outputted software. I had a little heart attack the other day even CloudFlare does this intentionally. they inject a little bit JavaScript to a few skate your email. And I was just like viewing source on my email. And I was like, What is this? What is this? Like? What is this code? Did I get hacked? And it was like, Oh, no, this is just cloud flares. thing but GoDaddy does that as well. That's so dumb, obviously should not be hosting with GoDaddy ever, but a lot of people are I've still my my domain name is still with GoDaddy from like, 15 years ago. I need to move it but it's just such a pain. Terrible, terrible company.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"33","ss":"02"}},{"id":46,"start":2042.67,"end":2053.94,"text":"Yeah, I know. I know. And then I think they got bought by somebody else. Or they had different management newer, like sort of wondering, they did this whole like, we're we've changed campaign. I did. Yeah, I don't I don't, buddy.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"34","ss":"02"}},{"id":47,"start":2054.009,"end":2134.35,"text":"Yeah, you can probably find an episode of me. Like saying GoDaddy is a new company. I think I said that on this podcast, because they got rid of all their sexist ads, they got rid of their elephant killing CEO. They seem to have been cleaning everything up. But it's just things like that, that were the same with Bluehost. They just touched the Bluehost was like adding caches to your WordPress without asking you anytime they touch your code for you, especially when it's for the greater good of the company. Whereas GoDaddy was adding tracking ads to to all of your websites that's so sketchy and I don't like when companies do that sketch. Anyways, while we're talking about deployment, other stories from the trenches here, if you are moving servers, it's best to just point the a record of your the domain name at the new server. So the cutover time will be almost instant, what most people will do or maybe not most, but they'll just change the name servers of the domain name. And then that takes a while to propagate. And that's not the end of the world because sometimes the cutover to the new server will be instant. But for a lot of people who need to migrate a WordPress, they needed to be at that domain name first, especially if you need to, like set up an SSL certificate, something like that. So there could be some downtime there. And I think it's important to make yourself available during this time. Like if you have a deployed day, you know, do it early.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"34","ss":"14"}},{"id":48,"start":2134.35,"end":2136.75,"text":"So that way you do have time to for everything.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"34"}},{"id":49,"start":2137.11,"end":2138.04,"text":"Good afternoon.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"35","ss":"37"}},{"id":50,"start":2138.07,"end":2164.61,"text":"Yeah, don't do a Friday afternoon. And just like if you're switching over that DNS, make sure you are available for when something potentially doesn't go right. Maybe you forgot to tweak something in the URL. So all your URLs aren't formatted correctly, or something like that, but just be available. Because the worst thing is that it's like, yeah, okay, I switch DNS over, everything should be good. And then you go on, you know, vacation or something, and then the whole thing blew up. And the process,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"35","ss":"38"}},{"id":51,"start":2164.67,"end":2201.36,"text":"one little little tip I can give you is, if you are setting up a website, where you're going to hot switch over the domain name, you can go into your Ford slash, etc, for slash hosts file, and you can set up like a map on your host file, which will will point that domain name to a different server. So you can you can temporarily view the website with the new domain without actually having to cut it over for the rest of the world. And that's how I usually set everything up and make sure everything is working for me. And then at that point, when it's working, you remove it from your own host file, and then make that that cutover, just make sure you","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"04"}},{"id":52,"start":2201.36,"end":2204.67,"text":"remember to move it. Because you may Yes, working for me,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"36","ss":"41"}},{"id":53,"start":2205.15,"end":2253.23,"text":"works for me Have a good weekend. Other things is make sure that the client's email is not going to be disrupted at all, I've seen many people switch over a domain name without any regard for other DNS properties that people have set up. So there might be things for sending transactional email, there might be sub domains, there might be MX records for the email that all of that stuff, if you're switching name servers needs to make the move over and almost all DNS providers with the exception of CloudFlare will not suck up all of those DNS records for you. So that can be a nightmare situation if you accidentally bring down entire company's email, which is, thankfully has never happened to me. But it is the scariest thing to move domain names where email and stuff is involved.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"36","ss":"45"}},{"id":54,"start":2253.3,"end":2307,"text":"Yeah, right. I mean, keep the perspective that you're working with the business. And if they're losing time, they're losing money. And you don't want to be the one responsible for that. Because it's Yeah, that's a, it's a lot of responsibility, I think, is an important thing, we also have to make sure you have some sort of backup strategy in place, your client is not going to back things up. So it's important to talk about maybe the risks of things, maybe you have your code all saved in GitHub, and that's good enough, but maybe they have a database system or something like that, it's important that you are the one who configures and setups backup, you know, maybe that's a cron job that's doing database backups, or a plugin in WordPress, or a plugin in Drupal that's doing these, these backups, your client is not going to do that. And when the thing goes down and breaks or something, you might get blamed for it. So it's nice to set up the backups make it easy for them make it so it has no potential for them to lose data.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"37","ss":"33"}},{"id":55,"start":2307.21,"end":2402.79,"text":"Yeah. And at the same point, you also need a restoration strategy. So just having the data is one point. But if you need to rebuild the server, and and restore all of that data, you need a strategy for that. And I used to work at an investment bank and twice a year they'd have these like, like worst case scenarios, where they would test their actual backups and make sure that like, Okay, if everything went awry, if like a bomb blew up the server room, how can we get back as fast as possible? Probably not a big deal for my restoration strategy for all of my clients was just use jetpack and click the Restore button. And it was all said and done. But for more complex applications that have custom servers, it's important to know how how would you get back up and running as quick as possible? should something go down? Or are you even responsible for that, right, that's something to put into your support. We'll talk about that in a second. Other things I've run into make sure a lot of times clients use their server as an FTP, a place to dump files. And those files are often linked to internal documents, maybe or emailed around. So if they have like a folder on their website that has all of these documents that often needs to be moved over as well, if you are moving servers, and in a lot of my cases, I tried to stay on their own server because it sucks to have to move over. These people had gigs and gigs and gigs of zip files and documents and everything that's not so much of an issue anymore, that people are moving away from using FTP and into things like Basecamp notion or whatever internally? Yeah, definitely.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"38","ss":"27"}},{"id":56,"start":2403.33,"end":2543.63,"text":"Cool. So let's talk about handoff. Now, because this is a big one, because a lot of people just think, alright, I did the work, I put it up, see you later. And that's it. But I think this is important because i, this actually used to be one of my jobs at most of the agencies I worked at, in fact, people would specifically, even if I didn't build the thing, my project managers would request that I do this, I guess it is a testament to my tutorial ability or something like that. It's so funny, because I didn't think I was necessarily good at it. But I got so many positive comments from this, that my agencies would always be like, Alright, we need Scott to go in and do this. So the handoff component of things is important. And it often will involve training, right? People don't know how to use this thing. Maybe they've never seen WordPress, or maybe they've seen WordPress, and they don't know the plugins or things like that. And one of the biggest things that I like to do for the pre handoff is to turn off anything that they don't need. Now WordPress is a little bit less awesome at this than Drupal is, Drupal gives you a lot of like, turn off everything sort of situations. But a lot of times your client is not going to use most of the stuff in the content management system. So I like to even restrict their access to a lot of things via you know, you can make one person on their team who maybe is their IT person, maybe make them the administrator, or maybe you reserve an administrator account, but the accounts that you're making for your users should really be just so that they can do what they need to do. And that's pretty much it, obviously, give them access to an admin account and all that stuff for when they need it. But if they need to only add posts, don't give them the ability to delete users and blah, blah, blah, and see this and see that and add custom post types. Now they don't want to see all of those links, they want to see the button that says ad post, okay, ad post, click here, do this. So setting them up for success is a big one for me. And then two, I really like to do in person trainings where you show them exactly Okay, now you log in here, I want to go and create a new post. So to create a new post, you go here, you click here, you do this, that's your new post. And then in that same regard, you outline Okay, I gave so and so access to the administrative account, you don't need this account. But in the event that you have somebody else working on the site, or maybe you want to expand it, or maybe you, you know, you have somebody who has experience in WordPress, here's the admin account, it gives you full access to do anything you want.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"40","ss":"03"}},{"id":57,"start":2543.88,"end":2615.88,"text":"Yeah, locking it down is such a good point, I would always lock it down as much as I can, because only takes one client who thinks they know a little bit of what they're doing, or the ability to get a little bit, have a couple glasses of wine and go through the WordPress plugin directory. And they can really goof things up by it by doing that. So locking it down as much as you can obviously give them access, if they're technical knowing that, hey, you probably shouldn't be doing this in production. But like, go for it, I guess. And the other thing I do is I will always make a video detailing how to use the entire site. So most of my clients were remote, couldn't meet them in person. So I would make a screencast on how to use every feature of the website. And that was awesome. Because the type of person who works and updates a website, that's often the entry level job at a company. And those people move through that role all the time, or somebody needs to update the website. And then they they never really email you asking how do i do X, Y, and Z. So I just sat down recorded just like my tutorials. This is how you use the entire website. And they have this video. And years later, people just keep coming back to those videos. And they understand how to use it. And they can if they have an intern or a new hire, send them the video and then they can get up and running with with how it all works. And","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"42","ss":"23"}},{"id":58,"start":2615.88,"end":2661.84,"text":"that's just a good point. I haven't started doing that recently for people working on level up tutorials, right? I know that my like process for doing testing with graph qL and jest and all this stuff like that is a little bit intense. So what I did is I made a video explaining here's the types of tests you're most likely to write, here's how to write them. Here's how to get it to work. Here's the common errors you're going to face. Here's how to do it. And now if anybody wants to write tests for the site, or they want to learn how I'm doing it, hey here, just watch this video you consult to it, it has every single use case you're going to encounter, it frees me up from having to do a lot of like in person teaching moments. Because, again, that's what we do. There's a ton of free screen recording software, you can screen record and record your mic with QuickTime if you have a Mac. So you don't even need any extra software, you can just do it if you aren't used to this kind of thing. I think","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"43","ss":"35"}},{"id":59,"start":2661.84,"end":2772.57,"text":"the final thing we have here before we wrap it up is our show got two things. Sorry. The next one is bug fixes and support. So it's it's common for things to break. The kind of bummer thing about websites is that they have a lot of moving pieces and they tend to just rot over time. So there needs to be some sort of agreement in place where especially with like CMS is that need to be updated for security purposes. Sometimes those security updates in those plugin updates because you're relying on them. You also need to upgrade them with caution because things can break at any given time API's can break. It's just like a node module. You can't just upgrade Read it and know that it's going to be okay. So it's important to say like, Look, I what I would tell my clients that said like, for the next year, if anything breaks, because of my own doing, I will fix it for free, whoever, if anything breaks because of external, external things, maybe the host upgrades, the version of PHP on the thing, maybe some WordPress upgrades and totally nukes, the tiny MC for Gutenberg, like all kinds of stuff can happen, right? It's just a moving part. If it's outside of my control, I let them know that that will be billed at either an hourly rate, or I'll quote it ahead of time to let you know how much it will be to fix it. And that's good, because then they sort of know ahead of time this thing, this is website that you paid me for once, I'm not going to babysit it for the rest of my life, unless you want to get some sort of what do you call that a retainer in place? Yep. They're letting them know, okay, you can you can reserve like I had many clients that did this. They said, Give Just give me 10 hours, 10 hours a month. And I might not use all 10 hours, but it's worth it to us to actually have you on hand, just in case something goes. And you have to fix it within 24 hours. Yeah, absolutely.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"44","ss":"21"}},{"id":60,"start":2772.57,"end":2863.5,"text":"I mean, clients are just famous for wanting to add things after the fact. So it is important to establish like, What's there? I like to think about emergency bugs too. Right? Emergency bug? Yeah, depends on what your if they are paying you on a retainer for emergency bugs with it agreement is that one needs to be established beforehand? It depends. Did you break something? Or did they break something, maybe you went in and tweak something and you broke it? You need to fix that right away? That should be obvious, right? So emergency bugs that you did, you got to treat them as an emergency, if your client went in there and goofed around with something or tried to do something on the server, and maybe they didn't know what they were doing. And they deleted something. It depends, right? I mean, if you are knee deep in another project, then you can't always drop what you're doing and fix that for them. And they need to know that. So you could give them a realistic expectation about when you can have it going up. But again, be careful because the last thing you want to do is get a call and say, Hey, this thing is going, I broke it and you need to fix it right now. No, I don't need to fix it right now. Because you broke it. And I will fix it. When I'm doing it's possible for me to fix it, that it's an important thing to tread lightly on it depends on your relationship with your client. But that could be something that could potentially sour a relationship if they broke it, and you're not able to fix it. And they might think, well, I should be able to have access to you 24 seven, again, stablish, those guidelines at the forefront of the project. But again, don't treat an emergency that they created as your emergency.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"46","ss":"12"}},{"id":61,"start":2863.649,"end":2877.75,"text":"Yeah, and good software ahead of time can prevent that as well. Yeah, whether it's jetpack or get or whatever, you should be able to just roll it back, at least for the time being before you can get in there and actually fix it. But obviously, that's ideal. That's not always the case.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"47","ss":"43"}},{"id":62,"start":2877.78,"end":2948.61,"text":"Yeah. And well, okay, what happens, do what happens when the entire project blows up? And the client didn't get you assets on time? And well, maybe they didn't, you actually, you know, you establish that clear line of communication, and you email them once a week asking for them, and they still didn't get it to you. And now the deadline is passed, and they're mad at you. There's a whole ton of reasons why these projects can totally fail. They can be your fault. They can be your clients fault. They can be, you know, maybe outside forces, maybe there's a hurricane or something right? You know, I mean, there's a lot of reasons why a project can fail. So it's important to understand how things are failing. And as long as you do your part to establish these clear lines of communication. And to continue this communication, you will most likely not be at fault for this stuff, right? If you established a good timeline, and you kept all your dates, and you emailed them when you're supposed to, it's going to do most of the way to ensure that the project won't go bad. And when it does go bad, your client can be mad all they want. But as long as you did your things correctly, and you're not delusional about it, then it might be time to look at potentially firing your client or seeing what other solutions are available.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"47","ss":"57"}},{"id":63,"start":2948.669,"end":3012.27,"text":"Yeah, these things don't come out of nowhere that like these big bombs that happen, you should be able to see them coming along time away and be able to mitigate them when they're small problems. Don't wait until there are massive, massive problems. But that said, you can get into lots of the project can be way behind. That's a communication problem on your on your own side, it is going to be behind that you should let them know, way ahead of time that hey, you know what, this is taking me much longer than I had hoped. Or these are the reasons why. So we're gonna have to push the dates to the following X, Y and Z and then people everybody's everybody's on board with that. Other things that can happen is the products not met with acceptance so that that's a problem where they say this is not good enough. This is garbage. It's not what we wanted. Again, that's a problem that should have been recognized way earlier, both on the client I should have told you that and you should have been able to pull it out of the client in the feedback and revisions part of this other things client not paying. Have you ever had to chase someone down for money? Yes.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"49","ss":"08"}},{"id":64,"start":3012.45,"end":3043.32,"text":"And they didn't pay. And I had a contract. But it's like, at the end of the day, the legal cost of pursuing that did not they paid the deposit. And I got to keep yahsat said that it was infuriating, because I would send them an email maybe once a week, hey, well, you know, this invoice is overdue. And it was very cordial about the whole thing. And they just never responded to a single and they never responded to a single email, not one, not a single one. And it's like, at that point, what am I gonna do? I'm gonna send dog, the bounty hunter over there to break their legs or something.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"50","ss":"12"}},{"id":65,"start":3045.15,"end":3177.36,"text":"Yeah, it's funny I've made a couple times in my career for past students of mine, I've made phone calls, because my wife always dresses me about this, because she's like, you can confront people for not paying a bill in like, find their alternate phone numbers and send them letters in the mail. And like, you can do all this stuff. And it's no problem. But if like, someone screws up my restaurant order at a restaurant, I like oh, it's okay. Don't worry about it. It's fine. Yeah, you know, like, go full Canadian on them. So I've definitely had to do that. But again, having phone numbers, having addresses, things like that of the people that are trying to screw you is important, because you can you can find them. At a certain point, you have to be okay with just losing the money, because you just have to let it go. And I think you can kind of find peace with that. Every time I think about this, I think of you know who Mike Birbiglia is, yeah, he's like this comedian. And he has a story on This American Life way back of where he got into an accident in a rental car. And the cop screwed up his the police report that showed him at fault. And he owed like, 15 grand to the rental car agency. And it wasn't his fault. And he spent like a year trying to get this thing corrected. And a certain point, he just said, You know what, I can't do anything more about this, I'm just gonna walk away. And he just like felt such relief, even though he had to eat that 15 grand, and it was is significant in his life. At a certain point, it's just not worth your mental well being to have to chase these people around. Obviously, if you get to that point, you've got deposits, you should have access to the server, it's very unlikely that the client would change all of your FTP credentials and whatever, as well as any of the code. But if you get to a point where they can, they can lock you out of your website and just take the website and run with it, then you probably should have have put some more steps in place. In order to do that. I once in mine, I'm sure if this is legal or not, but I once could not get paid for the life of me. And I finally just put up a blank HTML page with an h1 tag, please contact billing. Yep. And like, like not to shame the client. Don't just like oh, shoot, like something ran out. Like I forgot to put a quarter in the meter. Right. Yeah. And guess what? I had a check later that day.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"50","ss":"45"}},{"id":66,"start":3178.59,"end":3230.88,"text":"That worked? Well. I like that approach. Because so many times you see these things like glorified on on like Reddit or the internet where they're Yeah, they're like, Oh, I put a background that's a bunch of lewd photos of my client that didn't pay. It's like that is like not admirable right way to get sued. Yeah, great way to get sued, but it's not being a good person. And that's not doing like good things for your career. If I ever interviewed for somebody, and I found out they did that, I would like immediately shred that that application. That's not professional. That's not how you handle yourself in that situation. So again, the contact billing is a great way to have that without being like her. Somebody didn't pay their design or like blah, blah, blah, you know, like that. Just it's not a good solution at all. So again, don't don't shame your client. Don't do anything illegal, don't like DD OS them","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"52","ss":"58"}},{"id":67,"start":3231.81,"end":3252.9,"text":"or even like a coating a backdoor into the CMS. That's not allowed either as well. That's that's against the law. Many times I've thought about doing that. But I never have just because I don't think that's allowed by the law. Yeah, because also it's a security issue as well. If you were to leave any backdoors in the software. Yep,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"53","ss":"51"}},{"id":68,"start":3252.93,"end":3278.55,"text":"yep, yep. And if everything you did everything fine. And you know, they're not paying blah, blah, blah. Make sure that you have the ability to fire them written into your contract and fire client only had to fire a client. I think once at an agency I worked at and they were just insufferable asking for more than what we had agreed upon. They you know, broke the contract several times. We gave them more than enough chances to get on track. fire them felt great about it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"54","ss":"12"}},{"id":69,"start":3278.85,"end":3337.8,"text":"Yeah, I think once or twice I've had to finish a project and tell the client I'm done with them. But I've usually have a good vibe for if this person is going to be a bad client and it's generally how scatterbrain they are when you're talking to them. The the thing to me and I saw this on Kijiji when I was selling a chair the other day is the person sends like hello still available, I need a chair and like they said like seven or eight like scatterbrain ideas through many emails or text messages or chats or whatever it is, you know, that person is way too scatterbrained to actually to work with. And it's just a huge red flag. Whereas someone who is able to compose themselves in an email, they can use paragraph tags, which seems to be increasingly rare and email. That's a good they can get points across quickly paragraph tags are, you wouldn't believe how many emails I get from people who just barf their thoughts into a single not using a single paragraph and it just drives me crazy. Such a good indicator","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"54","ss":"38"}},{"id":70,"start":3337.83,"end":3339,"text":"it's such a good","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"55","ss":"37"}},{"id":71,"start":3340.11,"end":3352.35,"text":"immediately if I haven't replied to one of your emails go back and see if it's because you didn't use paragraphs. Yeah, right. That's likely it. So that's it for today. What about sick pics today, Scott?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"55","ss":"40"}},{"id":72,"start":3352.38,"end":3356.25,"text":"I've just sick pic I just got a new NAS drive, which is network area storage","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"55","ss":"52"}},{"id":73,"start":3356.31,"end":3360.12,"text":"area area storage that would expand Yeah, yeah, attach, attach No, attach","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"55","ss":"56"}},{"id":74,"start":3360.12,"end":3437.61,"text":"attach. I was gonna say that doesn't sound right. I don't know why I'm saying that. But this is a you know, we we work with a lot of data. And it's important to have backups of your data on site, off site, all that good stuff. And I've been currently using this old Western Digital NAS drive, I have four four terabyte drives in it. And so I have been looking to upgrade it's becoming more and more finicky. I'm grow more increasingly worried about my data on it every single day. So I ordered a new Synology diskstation dS 918 plus all linked to us in the store. This thing does so many cool things. It's like less of an just an hour's drive and more of a computer with NAS capabilities. It does 4k video transcoding on the fly. It's has a billion apps built into it. So if you're into like the home automation stuff with which Wes and I both been talking quite a bit about, we're going to be doing an episode on that there's a lot of cool things like like server for surveillance stations, all sorts of built in apps, you can use it as like a Google Photos type of thing. It is surprisingly cool. I asked on Twitter, which NAS people are using it and this was the overwhelming winner. So I'm really, really excited to really dive into all the cool stuff that this thing has to offer. So I'm excited about it, check it out at Amazon's knology any of this stuff. We'll link to it in the show.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"56","ss":"00"}},{"id":75,"start":3437.82,"end":3447.33,"text":"I've got some questions about this thing. So it four gigs of RAM, which means you can run apps on it pretty quickly, which I guess that's why it can do transcoding so nicely. You can upgrade widow,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"57","ss":"17"}},{"id":76,"start":3447.63,"end":3449.25,"text":"you can add some Oh, really? Yep.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"57","ss":"27"}},{"id":77,"start":3449.37,"end":3452.64,"text":"It's so tough four bays. And did you fill them with hard drives?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"57","ss":"29"}},{"id":78,"start":3452.76,"end":3465.9,"text":"I thought yeah. 444 terabyte drives? Whoa, you wouldn't do. The way I'm doing it is 16 or I mean eight terabytes available space. And then the other eight terabytes is backups. duplication. Does redundancy.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"57","ss":"32"}},{"id":79,"start":3465.93,"end":3490.23,"text":"Yeah. Okay. That's awesome. Wow, I think I want to especially now that we're talking about these security cameras and stuff like that, and all those home automation stuff, I know that you can also run like web servers on this thing. I mean, there's this there's this one, like home automation, think it's like a Python app where you have to host it yourself, but you need like a server in your house to actually run it. So I bet you could run it on something like this. How much was it?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"57","ss":"45"}},{"id":80,"start":3490.23,"end":3542.46,"text":"It's like five, five, something 549 without discs. And since I already have drives, the tracks are pretty reasonable. Yeah, they are. I mean, in terms of storage space. And the cool thing is you can get a couple drives, you can get one drive at a time or whatever. And just keep on adding to it. One of the really like you mentioned it being like web server capabilities and things like that, you can actually use it as like your own personal Google Drive access to anywhere, have your phone and camera sync to it and all that stuff, and share files from it and have a whole like user file sharing system. So I'm going to start using it instead of my Google Drive and set up my Dropbox for all that sort of thing. That way I have like ownership of files, and then you could even pay for an offset back back up to like backblaze b two. And then that way, your data is not living on Google servers. It's not living on Dropbox, but it's living with your disk and then a backup somewhere else.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"58","ss":"10"}},{"id":81,"start":3542.48,"end":3570,"text":"Yeah, I love the idea of mirroring it to backblaze b two, you can't you can even though backblaze gives you unlimited data, they do not support network attached drives, because then you could just like people have terabytes and terabytes, but you can mirror it to be to which is there like cloud storage? Yeah, I bet that wouldn't be that expensive, because most of the the cost of backblaze is not in just holding data. Most of the cost is in bandwidth. Once it's up there, you're not doing much with it,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"02"}},{"id":82,"start":3570,"end":3579.69,"text":"right? Yeah. And Synology is like a support partner for backblaze. Like they have a whole setup to do with backbase be to just like a one click easy setup.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"59","ss":"30"}},{"id":83,"start":3579.87,"end":3600.78,"text":"That's awesome. I got an email from backblaze the other day where they bought every year backblaze does like they talk about like their hard drive failure stats, because they are probably one of the biggest harddrive users in the world. And then they give you stats on like what's the best hard drive to buy, like what percentage of them fail, in etc it's backed by such a cool Company Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"59","ss":"39"}},{"id":84,"start":3600.81,"end":3603.06,"text":"super cool. What's? Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"00","ss":"00"}},{"id":85,"start":3603.15,"end":3605.07,"text":"let's hear sick tech, um,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"00","ss":"03"}},{"id":86,"start":3605.19,"end":3605.79,"text":"oh man.","speaker":"Unknown","initials":"U","timestamp":{"hh":"01","mm":"00","ss":"05"}},{"id":87,"start":3609.719,"end":3664.41,"text":"My sick pick is gonna be backblaze. I'm a big fan of backblaze, both as a way to mirror your computer. So it's like kind of like Dropbox, but for your entire computer, and it just runs in the background doesn't seem to be really resource intensive. And I just have my entire one terabyte laptop hard drive mirrored to the cloud, anytime something changes, and that's great. And then I also use backblaze b two, which is where I store all of my zip files to download my courses. And it is so cheap. And it's been rock solid, no complaints about speed or anything like that. I used to use Amazon s3, with cloud front in front of it. It was so expensive. And I got lots of complaints about speed from Germans and stuff like that. So now, I'm on v2. I've talked about this before, but I just love the company. So I'm going to sic pick backblaze as a company, blazing Blaze. And what about shameless plugs today? Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"00","ss":"09"}},{"id":88,"start":3664.439,"end":3703.62,"text":"I'm going to shamelessly plug level up pro there is a new series every single month for level of pro and January Series is going to be a nice little surprise, I'm not nothing just yet I'm very, you're gonna be very excited about it too. So tip number two level up tutorial, level up tutorials.com forward slash Pro, sign up for a year, one year save 25%. And I get access to all of the premium tutorial series that are up there. And every single one that is going to be released over the course of this next year, which is going to be 12 new series, some free series in there bunch of free videos and stuff as well. So check it out, level up tutorials, comm","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"01","ss":"04"}},{"id":89,"start":3703.829,"end":3740.97,"text":"I'm gonna pick my advanced react course just put it out a couple months ago, at that advanced react.com it's going to teach you how to build a full stack application react on the front end Apollo graph qL on the front end, and Prisma graph qL yoga on the back end, we do authentication from scratch, it's not just we don't just use a module, we build the whole thing from scratch teaches you all about react, graph qL and some some node back end stuff as well. So check it out at Advanced react.com. Use the coupon code syntax, you're going to get 11 bucks off your course word. Cool. That's it for today. Anything else? Nothing.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"01","mm":"01","ss":"43"}},{"id":90,"start":3741.57,"end":3744.69,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"02","ss":"21"}},{"id":91,"start":3744.98,"end":3746.64,"text":"Thanks for tuning in peace.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"01","mm":"02","ss":"24"}},{"id":92,"start":3746.759,"end":3747.3,"text":"Please.","speaker":"Unknown","initials":"U","timestamp":{"hh":"01","mm":"02","ss":"26"}},{"id":93,"start":3749.31,"end":3759.09,"text":"","speaker":"","initials":"","timestamp":{"hh":"01","mm":"02","ss":"29"}}],[{"id":1,"start":0.359,"end":24.45,"text":"Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski.","speaker":"Announcer","initials":"A","timestamp":{"hh":"00","mm":"00","ss":"00"}},{"id":2,"start":25.92,"end":50.97,"text":"Oh, welcome to syntax. In this episode, we are going to be talking all about code quality tooling. And this is going to be a part two. So if you did not listen to last week's tasty treat, go back and listen to last week's first we talked a lot about really important stuff, some really important tooling to get your code up to quality. My name is Scott winsky. And with me as always, is West boss. Hey, everybody.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"25"}},{"id":3,"start":51.03,"end":53.1,"text":"Hey, Wes. How's gone? doing pretty good?","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"51"}},{"id":4,"start":53.22,"end":146.66,"text":"Yeah. How about you doing good radio radio, talk about some tooling, which something really good quality? Yeah, this episode is sponsored actually by one of the items that we're even going to talk about later in this episode, which is really interesting. So is a good little fit here. For the sponsorship. This episode is sponsored by our friends at Log Rocket, they've been sponsoring syntax for a little bit. For those of you who don't know, Log Rocket is a really, really cool platform that allows you to stop guessing when bugs happen. It basically gives you a video replay of what happened when a bug occurred. And you can see the console, you can see the network requests. If you use Redux, you can even see the changes to your Redux state at any given time. This thing is super cool. It's one of those services that I tried out and loved right away. So you want to check it out at Log rocket.com. And again, it's going to integrate with some of the tools that we talk about later. In this episode, one of our other sponsors, Sentry integrates really well with Sentry integrates with any of your other tools, whether that's GitHub, robar, New Relic, any of that stuff. So anytime you're working on a project, and you need visibility into the errors, network requests, all that good stuff, head on over to Log Rocket and check out Log rocket.com forward slash syntax. And if you sign up using that URL, you get 14 days for free. And I think that's enough time to see the proof with Log Rocket there. because trust me, it's one of these things that once you use it, you have a bug, you're never going to be able to go back to that visibility, or I should say non visibility that you had before.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"53"}},{"id":5,"start":146.81,"end":179.64,"text":"Alright, so let's jump into it. We've got three things to sort of cover today. First is in these are just continuing on from our last show, these are just things that will help you write better quality code. And these are tools that are not necessarily going to turn your code into better code, but they are going to aid you and help you in writing better code. So the first one is TypeScript in types. Second one is going to be jest and testing. And the third one is error and exception tracking, which Scott just talked about from one of our sponsors today. So you want to kick it off with TypeScript and types. How does that help you write better quality code?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"02","ss":"26"}},{"id":6,"start":179.76,"end":236.97,"text":"Yeah, so you know, a lot of times, I think, when people first see TypeScript, they'll just see the sort of extra stuff, right? It's just extra code in your JavaScript. But when they're using TypeScript or another type system, like flow or reason, one of the key benefits of using any of this stuff is that your tooling instantly knows more about your application than it did before. in JavaScript land, we're very used to having all of our errors happen occur on runtime, then when somebody visits your site, and they do something, it breaks, and then you're sort of stuck dealing with it, then now what these tools allow you to do is have a much better overview of your application, so that the tooling can tell it's going to break on compile time, rather than runtime, or even just while you're looking at it with your linting errors. The linting errors instantly become more smart, you get to see all this visibility about how your application is actually working, rather than just specifically at runtime.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"02","ss":"59"}},{"id":7,"start":237.149,"end":282.89,"text":"Yeah, that's the beauty of a type language is that you will figure out the errors. It esslyn brings you a lot of the way there with this type of thing. But with TypeScript, you go all in, and it will tell you that there's an error before you even hit the browser. So you won't even have to open up your console or figure out there's a build error. By the time just as you're writing it, you're gonna get be getting immediate feedback. And these things that give you immediate feedback. They're so extremely nice. But I find that when I move to something that doesn't give me that immediate feedback, even just things like live reload. It's crazy how you're like, oh, man, how did I ever How did I ever do this right now? Like, I can't build a website without like, immediate live refreshing right now anymore, because I'm so used to it, and that that tooling is just part of my workflow.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"57"}},{"id":8,"start":283.07,"end":340.38,"text":"Yeah. And then in TypeScript, in particular, I know it can be a bit of a pain especially to work with in some systems, you have to sort of relearn a lot of stuff. There's definitely some growing pains there. And if you pick another type system, I've actually heard flow is a little bit easier to get going with but I think type Script is definitely the most popular, I'm not versed in, in flow very much myself. So I can't really speak entirely on that. But also reason which is even further, anything you're you're used to comfortable with. But all these tools are basically, they exist to help you write better code out of the gate that's less prone to breaking. And again, while you're writing it, you have a better understanding of if this is going to work or not, I think these tools are, you know, for so long JavaScript has not had this kind of stuff that maybe JavaScript developers have just gotten so used to how we do it. But when in reality, like most of the typed programming world would maybe like scoff at not having these kind of features.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"43"}},{"id":9,"start":340.53,"end":392.37,"text":"Alright, next one we have here is jest and testing. So you might think like, well, I get the benefit of having tests and writing it again. So we have a whole show on that. But like, how does having jeston, or any sort of testing setup help you write better code when you're in it and actually writing the code. So I think like, for me, the I've got a couple different vs. Code extensions. And specifically, I have one that will show me when my tests are failing, or when my tests are passing. And also, when I'm working on my test, I can see the inline snapshots as well. And that immediate feedback, like we just said before, I think it just gets a little bit more productivity, as well as helps you write overall better code. So I'm a big fan of having that sort of immediate feedback in there, especially when you break something, you immediately know that you've done something dumb, and it's not going to get past you. What do you think about that?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"40"}},{"id":10,"start":392.49,"end":466.59,"text":"Yeah, and one of the things I love about writing tests and having good test coverage is the ability to refactor things very easily, right? Because there's the whole test driven development thing where you write your tests, then you develop, rewrite your code, all this stuff, I test her and development is kind of tough for me to like really stick to, but what's not tough for me to stick to is writing a component or writing the test to make sure that component does what I want it to do, and then maybe having the freedom to change things, right? I mean, if you have a component, and let's say you have a test for it, it's really basic component, then you convert it from a class to a stateless functional component, and you goof something up in there. And maybe you goofed it up just enough that it breaks everything, but not obvious enough that you caught it, right. But your tests are going to catch that. And that's a tiny little refactor. And anytime you touch any of your components, you risk really breaking them. So having those tests in place that say, Hey, this is going to work, the way you expect it to is, it's really key for me, and it's really open things up to feel more competent in changing my code, rethinking it rewriting it, because if your tests are written correctly, your test should really be testing to make sure that this thing you know, does an output what it needs to. And that's pretty much it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"06","ss":"32"}},{"id":11,"start":466.83,"end":520.86,"text":"Awesome. Last one we have here is not necessarily when you're writing the code the first time around, but it's when you're actually writing the code to fix something that has broken and that's having some sort of service. Obviously, we've got friends of the show, both Log Rocket and Sentry provides services like this, there's lots of other ones out there as well. And what they'll do is they will track and catch all the errors that happen on there. And all the different services, different features, some of them will allow you to replay like Log Rocket will allow you to replay sort of the thing that led up to that. And having that insight, we've said this a million times on the show having the insight to how it broke in what was going on what browser what even like things like Redux state or whatever what was going on, at the time of the error is going to just give you like a perfect picture as to what went down and how you can write the code to actually fix that and make it not happen again.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"46"}},{"id":12,"start":520.949,"end":564.57,"text":"Yeah, especially because we don't use these kind of tools, right? When you don't have an exception or error tracking or logging system set up in your site, you're sort of relying on either seeing it happen yourself or having a user report an issue. And I wonder how many users will have an issue before somebody actually reports it. Right? That could be like a week of an issue existing on your thing. And then maybe people are just you know, it's not their job to tell you that your things breaking. So, you know, maybe maybe they're noticing it for all this time. And you need to have that visibility so that you can fix that code and write that code better before somebody you know, let you know that it's broken, because at that point, it's probably too late.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"40"}},{"id":13,"start":564.72,"end":615.63,"text":"I think also on the flip side of that is sometimes people email me and say this thing is broken. And I'll put 1520 minutes into it trying to track down like what is going on that this person has sees this weird thing or it's not working properly for them. And then you get an email Oh, sorry, I had this turned off or I was on a company VPN that was blocking. Vimeo or I had this like Chrome extension overreached and was breaking the site. And often I'm like, I should have just looked it up and saw like, is anyone else really having this problem because Even if like three or four other people were having this problem, then it would be worth my time to look into it. But if it's just one person, there's always that possibility that it's just their specific use case, or their specific browser setup or something weird with their setup where they've actually gone ahead and broken your website.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"24"}},{"id":14,"start":615.959,"end":649.83,"text":"Yeah. And again, you can't fix things that you don't know are happening, right? So that's like, might not know your code is crappy or broken. And these tools let you know where it's broken. I think that's like the common thread amongst all of these things, right? Yeah, with everything we talked about linting, hinting prettier, TypeScript, just, and it's exception error tracking, all it is, is letting you know when your stuff is broken. And the more things that you can have that let you know, when your code is broken, the better because then you're not going to have broken code. Awesome.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"10","ss":"15"}},{"id":15,"start":649.86,"end":666.99,"text":"So those are the three other pieces of code quality tooling that you can put in place, all of these tools do have a little bit of investment in order for you to set them up and get them working properly. But these are the ones that we think are probably worth your time looking into even just a couple of them if you want to get them up and running.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"10","ss":"49"}},{"id":16,"start":667.02,"end":721.14,"text":"Yeah, and some of them are definitely more of a commitment, right. Like TypeScript is a commitment. Yeah, it's a big commitment. Dad, we're like throwing something like Log Rocket or Sentry is like a couple lines of code connecting to a service. That one's easy. writing tests with just adds a bit of a commitment as well. But definitely one you should be taking, setting up your linter or setting up your prettier that is like not a commitment. That's like a five second drop. In fact, I was just I was, it's funny, because I think about this, like how many people don't use some of this stuff that is so dang easy to set up, especially linting and prettier, because the ES lint and prettier. Having that in your code base takes no time at all for the amount of benefits that you get out of it. And, you know, there's probably no excuse to not be using this stuff at this point, just for the sheer amount of time it's going to save whenever you run into something. Yeah, I","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"07"}},{"id":17,"start":721.14,"end":724.14,"text":"totally agree. It's a no brainer to turn that those ones on.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"01"}},{"id":18,"start":724.35,"end":733.8,"text":"Yeah, no brainer. Get it done. If you're not getting it done, and you won't have to make memes about it on Instagram. Or maybe you still will just say you can get a bunch a bunch of clicks.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"04"}},{"id":19,"start":734.459,"end":741.45,"text":"Awesome. All right. I think that's it. Anything else to add? That was a pretty hasty, hasty treat that we had today. That was a hasty tree. Yeah, no, that","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"14"}},{"id":20,"start":741.45,"end":768.09,"text":"was a very hasty treat. No, I don't have a whole lot to add. If anyone else has any tools, or even categories of tools for quality code that we haven't mentioned here, please let us know. I guess the one thing we didn't talk about was continuous integration or, or those kind of pipelines but those really just end up using all of the things we've mentioned here before you deploy, right. Yeah, but that's pretty much it. No, I don't have anything extra. This was a nice little hasty treat.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"12","ss":"21"}},{"id":21,"start":768.27,"end":778.89,"text":"Yeah, you're welcome. You're Enjoy the rest of your day today that you don't have to listen to us. Alright, we'll catch you on Wednesday. Thanks for tuning in. Please, please.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"48"}},{"id":22,"start":780.72,"end":784.5,"text":"Head on over to syntax.fm for a full archive of all of","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"13","ss":"00"}},{"id":23,"start":784.5,"end":790.5,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"13","ss":"04"}}],[{"id":1,"start":1.319,"end":6.12,"text":"You're listening to syntax the podcast with the tastiest web development treats out there.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"00","ss":"01"}},{"id":2,"start":6.149,"end":9.6,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"06"}},{"id":3,"start":9.6,"end":10.56,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"00","ss":"09"}},{"id":4,"start":10.589,"end":20.429,"text":"Welcome to syntax. My name is Wes Bos. I'm a full stack JavaScript developer with me as always is Scott to Lynskey. Hey, Scott,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"10"}},{"id":5,"start":20.609,"end":43.68,"text":"no good. I'm back for my first vacation and who knows how long I don't know. When the last time I've had a legit vacation. And so I when I went up to Winter Park, I got them from three days of shredding in, we had some fresh pow pow on every single day. So I am feeling nice, and I'm feeling nice and sore, but I'm feeling majorly mentally refreshed and ready.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"00","ss":"20"}},{"id":6,"start":43.859,"end":63.72,"text":"Yeah, man, the pictures you post it so fresh Sasha whatever, Scott that is snowboarding. The pictures he posted are unreal. Like I've only been snowboarding once and I like blacked out because I failed so hard. And I've got a bit staying away from it since then. But the pictures with the mountains in the background looked amazing.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"00","ss":"43"}},{"id":7,"start":63.75,"end":73.11,"text":"Yeah. And that's how far that's like an hour and a half from our house. Just pop on over there for a little bit and hit up some mountains. It was it was an awesome weekend. Perfect weekend to go","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"03"}},{"id":8,"start":73.7,"end":114.99,"text":"check it out. So today we are doing a potluck. We're gonna be talking about all kinds of different questions that you've sent in things from, do you separate your back end and front end to separate GitHub repos, default export export versus named export changing careers are we got all kinds of really good, good, juicy treats for you here today. Today's episode is sponsored by Sanity, which is a boice. Bring Your Own front end, they are a hosted back end service that has some pretty cool features and a podcast called the tech meme ride home, which does a daily podcast, it keeps you up to date on the tech industry. So let's jump on into it. You want to start us off with the first question there, Scott. Yeah, so","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"01","ss":"13"}},{"id":9,"start":114.99,"end":197.4,"text":"the first question is from Matt, gee, do you prefer to have your back end and front end in separate Git repos? Or together? What are the trade offs? Okay, so mine are together, but it's largely due because I use Meteor which likes to combine them. And I found there to be quite a bit of benefits for me personally, is that one command builds everything for me. So I just do NPM start, it runs the meteor command, Meteor starts my API and builds my front end. And it just gets everything going for me. So I have one command that gets the whole project up and running, I don't have to separate out my API for my front end, right. It's all one thing. Another thing I love about keeping them in the same repo, and the same everything is that I can use the same tooling. So I use the same Babel configs, same prettier, configs, all that same stuff. And I only have one file for it both back end and front end. And therefore I like never even think about that stuff. So the code style on the API for me is the exact same as the code style. And the front end, in terms of not, I don't have to use the require syntax or any of that stuff. So I like this more unified feel for things. Now, that said, I tried to set the same kind of setup up using Webpack. Once and I wanted to pull my hair out, it was very frustrating. So I think it was a product of just how easy Meteor makes that this sort of combination of back end and front end. That makes it really nice for me.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"01","ss":"54"}},{"id":10,"start":197.67,"end":242.19,"text":"Yeah, I also use there's just a term that people use is called a mono repo. And a mono repo is that you have one repository for your entire software platform. And we're we're approaching at a very simplistic level where you have a front end and back end. Whereas like companies like Google and Facebook or whatnot, they have like probably thousands of different services, each which have their own dependencies, each have their own often config files inside of them. However, they keep it in one big repo. And Google is famous for this, where if you want to make a change to Google, like the entire company, it's apparently just one huge repository. I've heard of these companies having to take things like Git and miracle and how do you say that miracle","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"03","ss":"17"}},{"id":11,"start":242.25,"end":243.78,"text":"miracle real material","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"02"}},{"id":12,"start":243.81,"end":245.63,"text":"carrier, I always goofed that up.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"03"}},{"id":13,"start":245.759,"end":246.96,"text":"I don't know if that's right, either. So","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"04","ss":"05"}},{"id":14,"start":247.319,"end":305.13,"text":"they literally have to, like fork it because their code bases, gigs, and gigs and gigs of history in order just to folk to fork that thing. So it's kind of interesting. I like to use a mono repo myself. There's lots of tooling out there, if you have many, many, many, something like Babel, which has thousands of plugins and uses a mono repo often to keep multiple plugins inside of a simple single get single GitHub repo, but I just have a front end and a back end, I like to keep it all in one, my history stays there, I can have one set of config files, I can often put a like a very light layer of like a start command, which will go into both of those folders and start them on up and whatever it is that they need to do. So I don't have to have two different tabs open in my node course we use something called concurrently, which will run both the web pack as well as the node server to run it. So it's kind of cool. I prefer that Obviously there's upsides and downsides to to each of them. But I prefer the mono repo approach.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"04","ss":"07"}},{"id":15,"start":305.13,"end":325.29,"text":"Yeah. Yeah, I think it's a cool thing. So next question here is from john mayer, that is probably not your real name. But if it is, cool. The question is in web in web dev, what's the difference between a freelancer and an independent contractor?","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"05"}},{"id":16,"start":325.56,"end":326.82,"text":"Its price? Yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"05","ss":"25"}},{"id":17,"start":326.85,"end":388.98,"text":"I mean, yeah. And the answer is, it's really not not a whole lot. Really, I mean, it, they can mostly be referred to the same thing as a freelancer, you could just call yourself an independent contractor. At the end of the day, that's like, legally, what you are, you're getting paid independently as a contractor. But I think the way that it's most commonly used to talk about somebody who is either working for themselves with many clients, or they're working for a larger company, for instance, when I worked for the Fords advertising agency, team, Detroit, I was an independent contractor for them, I was paid as a contractor, they did not take out taxes for my paycheck, I had to be responsible for my taxes and stuff like that. I was paid as a contractor, although I was under a two year contract and had a essentially a salary or an hourly wage with them. So I didn't take on additional clients, that was my only bit of work. I was expected to be in the office and expected to be working for them, you know, eight hours a day.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"05","ss":"26"}},{"id":18,"start":389.1,"end":444.93,"text":"Yeah, that's certainly how I see it, as well as that a consultant will often take on large projects for a single company at a time, this is not always true. as a freelancer, it seems more of the add on, I feel like it comes more from like the design artistic point of view, where you might have a couple different clients. But at the end of the day, there is no difference between Freelancer contractor or consultant in Canada, they're starting to crack down on companies who hire these full time contractors, like there's been people who worked for a company for four years, as a contractor, I'm doing air quotes here, and the government comes back and says, No, that's called an employee, and you have to pay taxes on that employee, and you have to give them health benefits. And, and all of that kind of stuff is, a lot of times people will hire contractors, and just skirt around having to deal with the headache of HR and taxes and payroll and stuff like that. And just say you deal with it yourself","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"06","ss":"29"}},{"id":19,"start":445.08,"end":465.3,"text":"now, and sometimes you there's agencies, the recruiting agencies that will actually pay you a salary and handle your benefits, and handle all of that stuff. And you're still contracted through the parent company, but you're a full time employee of this recruiting agency, if that makes any sense. Yeah,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"07","ss":"25"}},{"id":20,"start":465.33,"end":500.73,"text":"yeah. And I've certainly done as well, like lots of my clients in the past have just sent me up an email address at their company COMM And you have everything that the employees have, except for, you generally get paid a little bit more, because you there's the possibility that when things get slow, you're cut right through it, and they don't have to pay your severance or anything like that. So it's a little bit more risky for me going in there. Because I know as soon as they don't need me, they can stop paying me. And they don't have to pay me anything at the end of the day. But because of that you get you demand a much higher amount per hour per per contract.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"07","ss":"45"}},{"id":21,"start":500.76,"end":515.58,"text":"Yeah, my biggest salaries have all been contract. And, and sometimes it's the thing, you can look at your options and say, well, it's a hot market, I'm going to be able to have a job in two years via my skills. So therefore, maybe it's it's worth it to take this sort of opportunity.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"20"}},{"id":22,"start":515.58,"end":528.96,"text":"Yeah, yeah. at the same point, if you're looking at doing that you should also way like you have to say for your own retirement, a lot of employers do I think in the in the states is called a 401. k, is that what your retirement savings is called?","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"35"}},{"id":23,"start":528.99,"end":530.76,"text":"It is called a 401. k,","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"08","ss":"48"}},{"id":24,"start":530.82,"end":558.39,"text":"there you go. So in Canada, it's called the RSP, a Registered Retirement Savings Plan. And it's the same thing where a lot of companies will match a certain amount or however much you put into your own they'll match or pay like 30% as much as you pay. That's huge. Because it's like getting a no like Google does this, you can get an extra 20 3050 hundred thousand dollars a year just into your retirement savings. Because the company is matching it for you.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"08","ss":"50"}},{"id":25,"start":558.48,"end":560.49,"text":"Yeah, definitely, definitely something to think about.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"09","ss":"18"}},{"id":26,"start":560.76,"end":669.779,"text":"Oh, and parental leave, that's a that's a huge one as well. That's one thing you don't get as a contractor as well. So it's important to think about that as well. If you want to take some time off or you have to take some time off when you have kids. It's important to think about that, because then you don't have anyone that's willing to pay or match for you and use those pennies. pennies. That's great. All right, next question. We have Thank you, john mayer, that was good. Next question is from Jay low. I think we've answered this before, but it's a hot topic. So we'll go over it again. Default export versus named export. This is with a JavaScript module. You can export one thing as a default export and as many As you want as named exports, the differences is that when you import something that has been exported as a default, you can name it whatever you want. So you could export default, Wes. And then you could import it as cool guy or dude or anything you want, right. Whereas named exports, you have to know the name of the thing that has it was exported from the file. So sometimes that requires a little bit of tooling to scan the file and figure out what that is. Sometimes that's much better, though, because the tooling will scan the file for you. And it will automatically suggest what your imports should be. So there's camps on either side of it saying that you should only use named exports. There's other people saying like default, exports are handy, because you don't have to know what it's called. I'm of the opinion of just use default exports for the main thing that that file exports, like, if it's a react component, I'll just export the React component from there. And if there's other things like multiple functions, multiple libraries, multiple helpers, I export those as named and I've never had an issue. I've run into that, but I certainly see both sides of it.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"09","ss":"20"}},{"id":27,"start":669.96,"end":775.649,"text":"Yeah, I pretty much everything for me is the default export. Unless it's like, you know, my styled components, utilities, like you said, more than one thing in a particular file, by file with several function, they're all going to be named exports. And actually, it'd be really helpful for testing, right, just export everything, as the named export, you can import whatever, test it up, get all that good and going. Cool. So uh, yeah, let's get into the next one here, which is from Johnny sins, Johnny sins is asking, I'm looking to change careers. But I'm 41 this year. Is it too late? No, I don't know. I don't think it's ever too late. I mean, this stuff, all it takes is dedication and practice to get an age shouldn't matter. All that should matter is like what you're able to create as a developer and the stuff you're able to do and produce. I interviewed for a job in Tokyo once. And the guy who interviewed me gave me this like really great story, because they were basically turning me down from the job. And they turned me down from the job because I couldn't speak Japanese not because I couldn't dev it was it was it was actually a flash dev job, which is going to be interesting. But he was so interesting. He was maybe 50 something and he was like, You know what, I don't want you to get discouraged, because like, this was a good interview. And he's like, when I was 45, I was mowing lawns for a living. Like, I was the landscaper. And I just decided I wanted to do development, I wanted to do all this stuff. And like now he's the boss of a major agency. He's like, well, I just decided I was gonna go for it. And he went for it. And you you can make these changes that anytime you can do this stuff, all that matters, is if you have the skills to pay the bills, you know what I mean? You just have to get that practice and work hard. And you can do it.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"11","ss":"09"}},{"id":28,"start":775.799,"end":842.429,"text":"Yeah, I don't think that 41 is is too late as well, this stuff moves so quickly, that the beauty of it is that if you jump into the stream, and you sort of hit your wagon to whatever is moving quickly, whether that's react or view or whatever framework comes out in the next couple of years, then you can get up to speed and you can become an expert at that thing fairly quickly. I also think that, like I look back to when I started when I was really young. It took it took me so long, because I didn't have any of the soft skills that are also important that many older people often do have time management, communication, problem solving, just like a general attitude towards being able to approach problems that we have in software development. I had to like learn all of those things very slowly through some painful experiences before I could could actually get into it. And I feel like I've even talked to people who run agencies and they say, we prefer to hire older developers, just because they just lived a lot of life. And they they are much more able to to handle any problems that come their","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"12","ss":"55"}},{"id":29,"start":842.429,"end":864.779,"text":"way. Yeah, definitely. And some problems that you might have, if you are working on front end code you might be running into where the heck do I store my data? Because that's definitely a problem that is sort of in the modern, headless space that we live in. And well, one of the coolest solutions that that we really love over here at the podcast is Sanity over at Sanity dot i O","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"14","ss":"02"}},{"id":30,"start":865.199,"end":969,"text":"yeah, so Sanity calls themselves structured content dunrite. We call them a Boyce, which is bring your own front end. And the idea behind this is that you love that acronym, you sign up for sanity.io. And you automatically get this back end where you can start to structure out your content. So you can create all of your data types, you can create all the fields that are inside of those data types. You can create relationships between those data types, you can create different types of inputs for those data types. You can also upload your own react components. If you have a specific type of input. Maybe You You want to have a special type of media uploader that is specific to your business, you can just create your own input, which is kind of cool because like it really bridges this like self hosted versus totally custom, you can kind of do both with this. And then the idea is that you you come at it with anything, react, angular Gatsby, any any front end service that you want to do, and you consume their query API and just pull in all the data, you let them take care of all of the security, all of the doing real time, all of the scaling up and down, if this thing just blows up, because it's on front page of Hacker News, no problem there. So if you are looking to build a website, web app, anything where you need a back end, someone can log in and manage all the data, you take care of the front end, building it out, check out sanity@sanity.io forward slash syntax. And if you use the sanity.io forward slash syntax, they're gonna double what you get on the free plan. You can sign up still zero dollars, no credit card required, and you can start trying it out today. So thanks so much just entity for sponsoring","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"14","ss":"25"}},{"id":31,"start":969.27,"end":970.47,"text":"ice. Cool.","speaker":"Unknown","initials":"U","timestamp":{"hh":"00","mm":"16","ss":"09"}},{"id":32,"start":970.5,"end":971.01,"text":"","speaker":"","initials":"","timestamp":{"hh":"00","mm":"16","ss":"10"}},{"id":33,"start":971.07,"end":1066.82,"text":"yeah. All right. Next one, from Ken, from Maryland, as from from Maryland is not his last name. That's probably where he's from. The question is, have you guys made much use of multi column layout? If so, only for text or have you come up with any interesting out of the box uses, it seems like something you could do a lot with, but I haven't seen used very often. Now, for those of you who don't know, there's a CSS property that allows you to specify columns. And this was pre CSS Grid. This was pre Flexbox is one of the things that came in, I believe in like the CSS three era of stuff. And one of the cooler things that it allows you to do is sort of newspaper style layouts where the text automatically flows from one column to the next. It's different from something like CSS Grid, in that you don't have your items individually in in different columns, your your items flow from one column to the next, aka, if you're resizing the browser, and the height of the container is staying the same and the width is changing, the text is going to go and snake on to the next line. Now I've actually used this to do a Pinterest style layout. But it only works if you have like a select amount of items, right? You have 10 items or something. And you could tell it all right, just filter into three columns. And it'll create the Pinterest esque style I that's not anywhere near like the exact same because but the actual content order doesn't exactly fall in line correctly with the DOM. But no, I have used it in the past for just multi column text. But really, that's it and I haven't been using it since Flexbox. And grid really came on the scene.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"16","ss":"11"}},{"id":34,"start":1066.95,"end":1198.2,"text":"Yeah, I think CSS columns is often underlooked. I think it's like the it's it's a buddy that goes along with Flexbox and grid, and they're not competitors. So it's very perfect for text that needs to be in multiple columns, it will take care of wrapping, there's a bunch of break before and break after properties you can use in CSS, so that if you if you want like an image to always break on to the next column or break before, that's great. If you want that Pinterest layout, this is currently the only way you can kind of do it. You can do with CSS Grid, if you have a you can do with Flexbox. Sorry, if you have a fixed height, but that's almost never the case. CSS Grid is not made for Pinterest style layout. And the the downside to CSS columns is that the layout of the items goes top to bottom. So it let's picture we have nine items in three columns. It will do first column 123, second column 456, and third column 67789. And how do you count I'm trying to picture this now. And the downside of that is most people want item one, column one, item two, column two, item three, column three. And then to start again, item four, column one. And I actually asked Rachel Andrew, who is who worked on the CSS Grid spec, and knows everything about CSS. I'm like, how do you do Pinterest style layout in CSS Grid. And she says that's not what it's for. That's what CSS columns are for. It would be really neat to have something like a column direction property in CSS, where you can decide how the layout very much like Flexbox and grid have columns versus rows, you should be able to control how you add items to these different columns currently not possible. You can do it with a little bit of math, if you know how many items you have. And you know how many columns you have, you can sort your array in such a way that the items are added in that specific orders. But you still have to know the height yourself to know the height of your elements. And it's it's a pain in the butt. So yeah, it's cool. I think it's super underused, and I would check it out. If you've never used it before. It's very well supported. It's been","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"17","ss":"46"}},{"id":35,"start":1198.44,"end":1199.79,"text":"it's been in a while now. Yeah.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"19","ss":"58"}},{"id":36,"start":1200,"end":1209.15,"text":"Yeah, let's let's go to Can I use real quick been in since iE 10. And everywhere else has had it forever. So yeah, it's been around for years now.","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"00"}},{"id":37,"start":1209.15,"end":1209.69,"text":"Cool.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"20","ss":"09"}},{"id":38,"start":1209.72,"end":1387.44,"text":"Next question we have here is from Alex long, long, he says no problem for mispronouncing my last name. Thank you, Alex. Hi, Weston. Scott, I have a question for you. I have a question for Wes. And I guess God as well, because I asked him this before we started, as you publish your courses, source code on GitHub? What do you think about people who use that to learn instead of buying your courses? Is it an intentional decision? Or is it the compromise you're willing to make? Just wondering, thanks so much for the podcast. So what this is asking is that all of the code for all of my courses paid and free. I put it up on GitHub. And when I'm building the course, I also put it up on GitHub. And a lot of people ask me like, well, aren't you sort of like given throwing the baby out with the bathwater? Are you giving it away your secret sauce for free? And I think No, I think that if you can learn everything that it is to learn in one of my courses, without having to watch the course, just by looking at the code that I put to GitHub, then you are a fantastic developer, and you don't need my courses in that regard. So I've never worried about that there certainly are lots of people who read through the code, or just need to like figure out how I did a specific piece of authentication or, or rolled the JW T, and they just jump into it, like, Oh, I know what's covered this. And of course, I didn't buy it, but I'm just gonna get to pull it out of there. And I'm happy when people do that. Because, like, I think that's the whole idea behind this amazing community is that you can open source, like, I don't have a lot of libraries to open source. But I do have tons and tons of example content, which is helpful for people to learn, and to pull out and put into their own application. I'm happy when people do that. So that's fine. And then I also get huge benefit out of having it on GitHub open for free, because it's often referenced, the code is often pulled and put into other projects and reference back many people that the code so before they buy it, they're like this is West guy even know what he's talking about. Answer is probably not. But I'm gonna go on GitHub and read through the code just to make sure often, like a more senior developer on the team will vet the course first. And part of that will be them reading through the code that is in the finished folders and making sure that it is of quality that they would like to see implemented in their own company. So that that's really important as well. Also just little bugs, sometimes I will spell something wrong. Or sometimes I will have like a tiny little error in the code. And having someone who's in the headspace taking the course and realizes the bug, having them send a quick pull request to fix it, where it doesn't ripple through and break the rest of the course is so easy. And I really appreciate that. And then also it just goes like trending like I've got lots of stars and stuff on my courses. So often what will happen is when I launch a course, it will go into like trending GitHub repos. And that's free advertising for all of my courses. So very intentional that I opened it up. And then I asked Scott about this as well, do you do this? Sometimes I don't usually","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"20","ss":"09"}},{"id":39,"start":1387.59,"end":1400.07,"text":"get Bernie necessarily reason other than that's just how I haven't been doing it. That's something that I would explore. If I get a bunch of messages after this that says, a one year code on GitHub, then, no worries, I'll put it up on GitHub.","speaker":"Scott Tolinski","initials":"ST","timestamp":{"hh":"00","mm":"23","ss":"07"}},{"id":40,"start":1400.31,"end":1423.41,"text":"Yeah, I also like being able to, like people often ask me like, hey, Wes, how do you handle errors with the async await. And I'll always link to that example, in my Express node course of error handling, it's just nice to be able to have everything open and be able to just link to it and show people. This is how I've done it. So we're interesting question. Next one, I'm gonna let you try to do the Oh, yeah,","speaker":"Wes Bos","initials":"WB","timestamp":{"hh":"00","mm":"23","ss":"20"}},{"id":41,"start":1423.44,"end":1516.2,"text":"I wrote down this pronunciation. But this, this user did not send a pronunciation. This is my own attempt at this. So if this is wrong, please let me know this is from accent to alexandrou. I think I think I did that pretty good. If that is correct, at least, this question is, when is a certification needed for both jobs and side projects? Um, my answer is never. I don't think unless you're you the job that you're applying for specifically says in the job description that you need a certification, I have never had a certification in anything other than setting up skiing bindings. That was when I was 16. I installed ski bindings and I needed a certification. Now I in web development, I've never had any certifications. I've never taken any tests. I've never paid to take a test, which is really sort of the angle. If somebody says, Well, you got to pay $200 to take this test and become Magento certified. I would go ahead and say that's probably a big waste of money. Because usually the this is the second time I'm saying this in this episode. If the proof is in the pudding here, like if you can have those skills to do the work, then I don't think anybody is going to be like, Well, what about that $200 certification. You didn't Pay to take. So I don't think certifications are a big deal. And I would almost say don't do them unless it is explicitly req

The file is an array of 301 shows, each show looks like this:

[
  {
    id: 1,
    start: 2.46,
    end: 21.12,
    text: "Hello, everybody, and welcome to syntax. This is a new podcast that Scott and I are launching. And we already have three episodes recorded. And we'll be launching them shortly. For now we just wanted to let you know that we're going to be launching this podcast. And to sort of get you subscribe to the feed so that when they're ready to drop, you're ready to get them.",
    speaker: 'Wes Bos',
    initials: 'WB',
    timestamp: { hh: '00', mm: '00', ss: '02' }
  },
  {
    id: 2,
    start: 21.3,
    end: 27.66,
    text: '  And this is a web development podcast filled with tasty tips and treats for web developers. ',
    speaker: 'Scott Tolinski',
    initials: 'ST',
    timestamp: { hh: '00', mm: '00', ss: '21' }
  },
  {
    id: 3,
    start: 27.96,
    end: 39.42,
    text: 'Oh, oh, yeah. So a little bit about ourselves. My name is Wes Bos. I am a full stack developer from Canada. And I essentially create training courses that help web developers get better at their job. ',
    speaker: 'Wes Bos',
    initials: 'WB',
    timestamp: { hh: '00', mm: '00', ss: '27' }
  },
  {
    id: 4,
    start: 39.66,
    end: 50.52,
    text: 'And I am Scott Tolinski, a full stack web developer from Denver, Colorado, where I have created over 1000 free tutorials on YouTube at level up tutorials. ',
    speaker: 'Scott Tolinski',
    initials: 'ST',
    timestamp: { hh: '00', mm: '00', ss: '39' }
  },
  {
    id: 5,
    start: 50.66,
    end: 81.29,
    text: " Awesome. So the idea with this podcast is it's going to be a web development podcast where we take a topic and sort of dive deep into explaining both what that topic is, and all the stuff that surrounds it, as well as talk about our experience with that specific topic. So we're going to go all over t he place everything from JavaScript frameworks, CSS, advancements, CSS frameworks, all the way through to command line tooling, and even some of the other stuff like soft skills that we need as web developers. ",
    speaker: 'Wes Bos',
    initials: 'WB',
    timestamp: { hh: '00', mm: '00', ss: '50' }
  },
  {
    id: 6,
    start: 81.38,
    end: 97.97,
    text: "Yeah. And we're really super excited about launching this thing. And we really need your help to make it launch with a bang. So head over to syntax.fm where you can find buttons to subscribe on all of your favorite podcast players like iTunes, Stitcher and overcast ",
    speaker: 'Scott Tolinski',
    initials: 'ST',
    timestamp: { hh: '00', mm: '01', ss: '21' }
  },
  {
    id: 7,
    start: 98.2,
    end: 105.73,
    text: "awesome so actually do that please like Don't be like oh, it should subscribe do it because when it drops, we really want to get this thing to the top of the charts. ",
    speaker: 'Wes Bos',
    initials: 'WB',
    timestamp: { hh: '00', mm: '01', ss: '38' }
  },
  {
    id: 8,
    start: 105.87,
    end: 109.68,
    text: 'Yeah, just Yeah, really push that like button as hard as you can. ',
    speaker: 'Scott Tolinski',
    initials: 'ST',
    timestamp: { hh: '00', mm: '01', ss: '45' }
  },
  {
    id: 9,
    start: 111.21,
    end: 126.42,
    text: "force touch that like button. Awesome. So we're a syntax FM on Twitter, and the website to grab all of those buttons is syntax.fm. As always, I'm at Wes Bos on Twitter and Scott",
    speaker: 'Wes Bos',
    initials: 'WB',
    timestamp: { hh: '00', mm: '01', ss: '51' }
  },
  {
    id: 10,
    start: 126.54,
    end: 132,
    text: ' is @stolinski Awesome. ',
    speaker: 'Scott Tolinski',
    initials: 'ST',
    timestamp: { hh: '00', mm: '02', ss: '06' }
  },
  {
    id: 11,
    start: 132.03,
    end: 135.84,
    text: "So with that, we'll see you in the first podcast and a couple days.",
    speaker: 'Wes Bos',
    initials: 'WB',
    timestamp: { hh: '00', mm: '02', ss: '12' }
  }
]