You're listening to syntax. The podcast with the tastiest web development treats out there. Just grab yourself in and get ready. Here is Scott Telesky and West Boss.
Welcome to syntax. Today we've got a potluck for you talking about libraries versus frameworks. Are we still using Firefox who would win in a thumb war, show you jQuery or react? Is it worth time learning design patterns?
All kinds of really good questions. We are going to answer them for you today. If you have any of your own potluck questions, go to syntax.fm. And there's a button in the top right hand corner that allows you to submit it.
Keep sending them. We love doing them. You love listening to them today. We are sponsored by two awesome companies, Prismic, which is a headless CMS and fresh books, which is cloud accounting.
How are you doing today, Scott? I'm doing good. Doing real good. I'm working on some fun stuff with video.
I'm working on some new course stuff. I'm just feeling good about my coding and getting a little bit more sleep now. So I'm just, I feel like a better headspace overall, I think. How about you?
Yeah. Yeah, I'm doing really good. I've been, I'm building a Gatsby course and I'm just flying right along it, really enjoying it. And we're up here still at my cottage and everything is blooming.
We're seeing all kinds of animals. There's a crow that has a blue jay as a buddy and they hang out together all day. It's really awesome. Oh, that's cool.
Yeah. Very cool. It's funny how like everybody over 30 turned into bird people during the coronavirus. Yeah, I turned into like a lawn.
I mean, I've always kind of been a lawn person, but I'm definitely like spending a lot of time in my yard. All right. First question from code, finity. Why does react to bill itself as a library instead of a framework?
So the real answer here is the fact that if you've used other frameworks, especially things like Angular or how it goes far as view, definitely spelled because it's a lot of the stuff for you. It really depends on how much of the thing does for you, right? And react doesn't do a fair amount of things and it wants you to have the community step in and provide it. So really, the main reason is that react likes to think of itself.
As this does the view layer for your application. It's the view layer, but it's not necessarily at least currently, it's not the data layer. It's not necessarily providing a whole lot of things like routing and animations and image support and like I mentioned, loading of data is a big one. I mean, think about a lot of frameworks provide a specific way to load data into them and react doesn't do that.
So it likes to think of itself as a view layer library that provides sort of the base level for things to be built on. Yeah, it doesn't even do templating. Like that's JSX, which kind of is react. I'd say I don't think anybody actually uses.
People do react without any sort of JSX or like those other libraries, but do people just use it straight up like react.create element? Yeah, it's funny because there's always like somebody on like Hacker News being like, I don't know why you would even use JSX, you just use the functions. It's like, come on. That's like, that's like a great looking experience.
No, that would be tough. People do it. Next question we have here is from Anan. Are you all still using Firefox now that has been six months?
I can believe that was actually six months. I still am using Firefox. I absolutely love it. The dev tools have been fantastic to me.
There's a couple of little annoyances I have, but I've logged those all as issues and they are getting fixed. And there's other things like the breaking off a tab in Firefox is a little bit weird. Like it's so nice and smooth in Chrome. And the same thing with the Firefox iPhone app is not as good.
And it's annoying that the Chrome is way better on iOS. And it's annoying that your history doesn't sink between Chrome and Firefox. So that would be kind of cool. Maybe once or twice a week, the Firefox iPhone app, I have to just like force quit it because it will stop rendering out websites.
I feel like there's some things that Apple makes intentionally difficult for developers, like browsers and keyboards because Firefox on Android, in my experience was very good. I have not used Firefox very much on my iPhone, but I have installed. And the most part of the function is fine, but I definitely think that it's more likely a case of Apple goofing it up than anything else, right? Oh, yeah.
I bet like a lot of the Chrome iOS app is them just working around little bugs that Apple intentionally loads in. So yeah, but desktop, I love it. I've been super happy with it. And we also just got Apollo dev tools back after like two years.
So now that's even one nicer thing for me. What about you, Scott? Are you still on? Are you trying other things?
I've been on brave for a while now. It's my main one. Three months, I bet. Yeah, probably at least.
And I really like brave. There are some situations which leads us. Let's say I'm not using Firefox anymore, but only because I was seeing some monster monster CPU usage with it. And now I have no idea if that's probably because I 10,000 tabs up.
And it's most likely my fault, but I had I was seeing monster CPU usage. And so I wanted to try out another one specifically try out brave because I was missing some things in Chrome and by things I just I think I just mean the general like where things are even though I was mostly the same. I think I was missing like some of my extensions that I had come to rely on used over time, but let me say something. Every Chrome extension will work on Firefox.
The whole that's what most extensions are. Really? Like the Apollo dev tools is just a Chrome extension and it just works on Firefox. Only reason it was gone was because of the head used eval in it and Firefox pulled out because of a possible security issue.
Yeah. Back in the morning. Think about it. The more I'm trying to think of the reasons why I went back.
I think I'm not quite sure why I went back. I think it was mostly just the CPU and little things here and there like little annoyances here and there. Yeah. But it's mostly just the CPU and little annoyances.
So I went back to brave. I wish I would have like over time kept a diary of what I thought about this because I don't remember over the course of time why I went back. But I remember being not entirely grounded on you know facts in logical you know what I'm saying. Yeah.
Sometimes it's just like I don't know why it just feels different or I just wanted it. I just like it. I can't put my finger on it, but something about it is enjoyable. So that ties in really well to the next question, which is also from an anonymous person I doubt these are from the same person.
They could be says, Hey guys, is it possible to do a hasty treat regarding the braved browser? I would love to hear your opinions on the tech views approach. Why we need another browser in 2020 I use brave exclusively because by default, they block all across site trackers. They do all connections where possible through HTTPS blocks script, it blocks finger printing stuff.
And one of the things I love about it is this little like line in the URL bar that is their logo that tells you how many items on a particular page and what they are and why they block them. So it like does a good job of being transparent in terms of like, all right, this site we block these many things because of this. Now there are some I found brave to be a little less fluid of an experience than some other browsers, even though it is basically Chrome with more privacy protections, specifically because those privacy protections, I couldn't even create an Azure account on brave, like even with all the shields turned off, turn the shields off, try to create an Azure account every single time it gave me a fail. I opened up Chrome, same version Chrome, whatever Chromium I open up Chrome worked first time.
Now that probably says more about Azure than it does about brave, but to say that every single website is going to be a fluid, seamless, perfect experience on brave is definitely not the case. I don't know if I would tell everybody to use brave because you will hit situations like that and some people just might not know how to get past that, right? Like, oh, this site isn't working. The site must be broken.
Well, I had to use a different browser and no matter what I did in Brave, it didn't work. So there are going to be situations like that brave people have in my experience. No offense been a little. It's preferable.
Yeah. Yeah. With some of their suggesting of brave. So to say where there was my brave brave, like, OK, I get it.
It's good. I use it, but like it is not a perfect experience on every single website out there regardless of what people try to make you think. One really cool thing about brave that I like is that they're trying to figure out like what's the replacement for ads because obviously they're blocking ads and like what are content creators going to do? If you don't have ads on your blog or your video or something like that.
So what they're doing is they're trying out the single bat basic attention token. And depending on who watches your video or reads your blog or something like that, brave has a bunch of money that they'll then pay out. Like it basically is trying to figure out like what are people actually enjoying the content and then from that content, they then pay out. I know people that have brave, they put like 10 bucks into it a month or something like that.
So it's kind of cool to see that they're trying to not also just block ads, but trying to fix how to get creators. Right. There's this neat little like send a tip directly built into it where you can send a tip. I haven't used any of that stuff though.
Next question from not sure who would win in a thumb war, Wes or Scott for sure. Scott. I feel like Scott has some hand strength. Like I feel like you probably give a mean handshake.
I do give him that is for sure because my grandpa, you know, in classic Polish grandpa, even when we were like very little, like when he gave us a handshake, he would do this knuckle roll where he would grab and roll your knuckles. Oh, yeah. And the whole thing was like, Grandpa did that. Oh, I heard it's just thinking of it.
And you had to roll his knuckles before he did it to you before he'd be like, oh, okay. So like as like a trial, I was always like a carpenter hand shirt. You're there. So I definitely did a handshake.
Yeah, that's on point. And I do a lot of grip strength stuff. I do a lot of hanging from stuff. That's that I have these little stubby thumbs.
The party calls my thumbs toes because they look like they're just short little thumbs. I don't know if I have to like if we're talking like, oh, you don't get the tail of the tape here. Yeah, you've got the reach advantage most likely. Yeah.
Maybe you have a power advantage, but you definitely have a reach advantage, which can come in handy. I've never been particularly good at them wars. I was going to say you. This is my stubby little thumbs.
Oh, wow. Yeah. You're a little bit like if I get you, I'm not letting you go, but I don't know if I can get you. You're like a crocodile.
Yes. Yes, exactly. All right. Well, next time we meet up in person, we'll have to solve that one.
Yeah, for sure. We fun. Next question is from Andrew Peterson. What are your thoughts on X state and state machines for managing state and applications?
I've been super interested to drive. I'm interested to hear what you both think. Also, wondering if you any recommendations on how to use it with Apollo, whether to use X States internal context to store app stage or use the Apollo cache. I have the same questions because you know, the one thing that's missing for me in X state is more examples of real world use cases because I can, I can see a stoplight example in state a thousand times, but I'm never building a stoplight in the web.
So what I would love to see in X state, if those of you who are using X state or state machines in general, a little bit more real world examples with like actual data coming in, specifically even with Apollo or working with API's because right now, a lot of stuff is very like machine based. This is on this is off. This is waiting, whatever. And for those of you who don't know, the idea behind X state and state machines is basically that you have these different states that your application can be in.
And the state is more than just like the actual state of the thing. The state determines where it can go next, i.e. If a state has to like a light switch, it has on off, right? An on switch can only ever be coming off and an off can only ever be coming on.
And just like that, the example that people use is the stoplight, right? A stoplight can go from green to yellow, but it can't go from green to red. And so the state says more about the intention of where it can go than just like the actual data itself. So I looked quite a bit at X state recently because I'm doing this new video upload system, which believe it or not has quite a state involved in building a video upload system.
And so I looked at X state and X state react considerably and I thought, you know what? There's already enough complex things going on here that I don't want to learn a new state way of doing my state just to do this. But that's the only reason I didn't pick X state was because I didn't want to learn X state in addition to all of the other new things I was doing. I ended up just doing like a react context in and use, reduce her business.
So I don't use state machines, but I've been very interested in them. And I've been watching a lot of YouTube around it, both X state and state machines, as well as how the syntax can look within react and these neat little graph tools that they give you within X state. There's a lot of really cool things about X state that said, I'm not using it currently. That's the mean I wouldn't use it.
I find the idea of state machines to be both fascinating and a nice little computer science topic. It's used in video game development. It's used in application development and all over the world. And understanding state machines is not a skill that is going to be specific to Web Dev.
So for me, I find it to be a very useful skill to learn for overall computer programming stuff. I have not really taken the time I need to. I would love to see an example repo of somebody using X state with Apollo in a real world situation and how that all works myself. If you have that, go ahead and tweet us out about that.
Ever since we had David on episode 206 talk about state machines, I've been hoping for a little example of project that I could do it, but I haven't done myself. The question about, should I store my local state in Apollo or X state? I definitely wouldn't put it in Apollo. It's just too hard.
Either put it in context or something else. I don't think that putting your local state in the Apollo cache as well is probably the best bet. I think Apollo local state was a cool idea. And in fact, as it always ended up being more work than I was hoping it would be.
Yeah, I think it might be changing a little bit for Apollo three coming out, but I remember reviewing it like three or four months ago and being like, ah, still not as good as just using context plus in terms of my course, people just want to see context as a popular thing. Don't want to learn. Next question we have here from Richard Benigna. Should I start a new project with jQuery or react baseball emoji?
That's a great question. I probably would say this question should be more. Should I use vanilla or jQuery versus react? Because like if you're going to go ahead and build an app with a whole bunch of stuff in it, then yeah, React is probably a good use case for that.
But if you just need a couple lines here or there, you don't need to do the entire app and react. You just want to add some functionality. That's where you should probably reach for more of a DOM based library like vanilla or jQuery. I probably would just say just go use vanilla.
We're at a point now. We have it for a few years where there's no benefit that I see in using jQuery over vanilla JavaScript. There's one benefit animating height auto. There you go.
Great. Still, I mean, OK, so let me let me preface this by saying both spelled and frame or motion in react have the modern beautiful version of animating height auto. But in vanilla JS, I can't imagine that's any fun to do because you're going to have to measure the thing. You're going to have to turn on and off overflow hidden.
I mean, there's a lot of stuff that I don't want to do that it's going to do for you, but still one of the things I was like, jQuery, why can't anything else do this to the degree that jQuery cut? And now I can't. I basically. Yeah, it's so good.
So I toggle we don't need a lot of those UI things now that they're all in CSS, but CSS will never be able to animate. I don't think they know it's fortunate. You know, it's fortunate. Oh, what is that?
Oh, look at you. So you want to check out Prismic. Prismic is a headless graph QL CMS or REST API CMS. It's really cool because you sign up, you get in, make your data types, make repeater fields.
You can relate them to each other in great tags and tag them. The entire UI is done without writing any code. So if you want to be able to set up a back end for a project that you're working on and click it all together, you can do that probably I bet within 12 and a half minutes, you can have a couple data types up and running. And that's pretty nifty.
It's called Prismic. It's at Prismic.io for syntax. You want to check out this website as well because they've got a really cool Scott versus West. They've got a bunch of examples with view and react.
Check it out for your next project, Prismic.io for such attacks. Cool, cool, cool. All right. Next question.
This is from Varlevi. Hey, guys, so a somewhat different question today. Oh, I'm basically a young teen. So less than 16 year old with passion for all things, web development.
Awesome. However, without being able to legally have a job, I'm unable to make money and therefore running on a $50 Raspberry Pi and a 10 plus year old monitor. As much as I love my Pi, just running NPM install can make can be agonizing. I can only imagine that seems like it's no fun.
Not to mention the amount of space and no modules takes up on the device with 16 gigs of storage. So basically any pointers on getting income and practice in the web development field when you were under 16. And just in general, what advice do you have to be a young teen learning code? Yes.
You know, you've got something going when a teenage boy would rather listen to your podcast than what stores are Marvel with this friend. So thank you so much Varlevi. That is awesome. I wish I was listening to Web Dev podcasts.
I wish podcasts existed when I was 16 or less than 16. I would have been pretty sweet. So let me give you a little tip here. If you don't want to install things locally with your Raspberry Pi, hop on something like code sandbox, then you're not going to be taking up your own storage.
You can build full applications on code sandbox. Granted, it's not the same as having your own personal environment, but there's there's all options out there for cloud providers in terms of hosting your entire plot projects on the cloud without having to even have them grace your local machine, which would make things like installing new modules, a ton faster and not have to worry about storage. And so I would look into that in a lot of these services like code sandbox, they can be free. So don't worry about the cost.
It takes there. So that's one quick tip. Another tip and how to make money. I mean, man, when I was your age, I was like, Mo and lawns for cash.
Yeah. You can quote unquote, Mo lawns for cash with Web Dev projects. If you can get people who are willing to pay you to do them, that's going to be the hard part, especially when you are your age, getting people to trust you to do stuff like that. It might be the time to reach out to your family and friends network to see if anybody needs anything.
Like, Oh, hey, I'll build it as quick thing for this kind of money and collect some cash. There are other options, but a lot of them would involve fudging some terms of service, like getting your mom to accept the, you know, terms of service on an advertiser or something and connect their bank account to it. So you could maybe create something with ads on it to bring income. And do you have any ideas here?
Why is this a really fascinating to me? Because I had a job since I was 13, but it was a job job. It wasn't like a freelance job. And I was just a hustler when I was a kid.
And I just like read this question. I thought like, Oh man, this was me. I can imagine that when I was a kid. I was always just like, standing outside of the road, selling pairs.
That's the other thing. I had a paper row and I had my own lawnmowing business. And like the fact that you're under 16, like if you're over like 10 years old, I bet there's something you can do. And this doesn't even have to be go and build a website for a local company.
That'd be amazing. But like maybe you just need to go mow a couple of lawns, shovel a few driveways and save up a couple of hundred bucks in order to buy your first laptop. There's a lot to say in terms of what I call like paperclip mentality, where I don't know, I'll try to go mow a few lawns by a cheap laptop and then use that cheap laptop to start getting really good at web development. And then maybe build a few websites and buy a marksman of laptop and you sort of just trade up and trade up.
There was a guy in Canada that traded a paperclip up to a house just by doing it trade by trade. And I think that's kind of one of the really exciting things about becoming a kid is learning how to make money and learning how to trade up. And I don't think you need that much money in order to go buy a Chromebook or something like that. Like Scott said, like run the stuff in the cloud.
This is especially true if you have slow internet. NPM installs can take forever. But if you're running that in the cloud, you're using, we talked about a couple episodes ago, it was like VS Code hosted, what was that called? Code Server.
So you can like run VS Code in the cloud and access it via a browser. Yeah. So you can have your files as well as your editor right in the browser and then you can just go get like a Chromebook or something like that or code sandbox does all of the stuff. Code Pen was the other one, Glitch does all the server side stuff.
If you'd like to, there's huge free tiers on a lot of these serverless ones. So I think if you were to just go and do something, try find a way to make three, four hundred bucks. You can buy a Linux Chromebook, maybe a cheap Windows computer if you want. Yeah, right.
Exactly. Yeah. Yeah, I think those are all good suggestions. The next question is from sore vermide.
And is it worth my time to learn design patterns in JavaScript? That's a great question. So JavaScript has a lot of different design patterns. And what we mean by that is ways that you can structure your code or your functions or structure multiple modules in order to make your application easy to reuse parts of your code.
Those are design patterns. So is it worth learning them? I think so. But I did a lot of design patterns stuff before.
I really knew how to do a lot in JavaScript and it went right over my head. And I don't think that I was helpful at all to spend time on that. I just started poking away and hacking things. And then you find yourself being like, weird, I'm copy pasting the same HTML or the same JavaScript code from one function to another.
And there's only these four bits that are different in each of the functions. And you go, Oh, okay, that's probably what design patterns are. And then you start looking into them, you go, Oh, I kind of had that problem before. And that's how we could have solved it.
So yes, learn them, but not the very first thing before you know what problems they solve. Yeah. What's a good example of a design pattern? Would that be a state machine to state machines, a design pattern?
There you go. Yeah. And I would say don't go out and learn state machines first thing because you don't know what paint it's solving. Are same machines design or design pattern?
Oh, absolutely. OK. I like know so little about design patterns that I don't know, even what constitutes a design pattern. You know, have you ever been to source making a dot com?
They have a book called source making dot com design underscore patterns. And I've always really loved the look of this site and their work. So maybe I'll pick this up and read this there. 406 well structured jargon free pages.
That is my kind of 228 illustrations, understanding a dive into design patterns, examples in Java, C++, PHP, Python and Delphi. It's not exactly a JavaScript book. That's it's explicitly not a JavaScript book, but a lot of the stuff is just straight up comp size stuff. Cool.
Yeah. Check the source making dot com. Cool. So next question is from a kartic says, I have a question regarding stigma designed to HTML conversion.
Those of you don't know, Figma has an interesting features, one of which is like a panel that just gives you the CSS of anything you click on it. So you click on it gives you the CSS or you can just do copies, CSS directly from copy and paste really neat. I wanted to ask about the process when transitioning from designing the code. Do you keep the font size padding height of images as same as defined in the design?
Or do you take something different for it? Let's suppose the nav bar is 115 pixels. I'm guessing this seems tall. Do you make it the same as well or something else?
Well, it really depends on your design because as we all know, designs are not exactly static. They can be fluid. So it really depends on the aspect of your design. There are some things I do take specifically from Figma.
I typically won't take with or height things unless they are like a max height or a max with height. I guess maybe it's a little bit different in terms of like a top bar, a top bar. I usually define explicitly. I don't know.
You do us, but I usually define the top bar as being like two times the vertical rhythm height. So OK, let's break this down. Do you know a whole lot about vertical rhythm? West?
Yeah. Yeah, we talked about a few times on the episode. So vertical rhythm for those of you who don't know is basically like when you have a line height of let's say 1.5 and you have a body of font size of 16 pixels and then you do 1.5 times 16, which I believe is 24, I could be wrong on that, then that would be the height of each individual line. So I would typically set my nav height to be like twice that, 24 over 48.
So then OK, my top nav bar is going to be 48 pixels tall. And I'll usually do that explicitly. And it's going to come from experience in terms of how much CSS practice you have. But you'll get a feel for when things need to be explicit and when things need to be not.
For the most part, what I would do if I were you would just be a copy of the street CSS out of there. If you're copying the CSS at all, copy it straight out of there and then just modify that, remove things, tweak it, whatever to be how you need it. Because that data exists. It can save you some time writing that CSS.
I personally just use the design guidelines as a guideline in a hand code, all the CSS myself, but the CSS exists there. And if you take that conversion, I would not keep things that explicit. I just look at it and eyeball it into place. Sometimes I'll do a little bit of measurements in terms of how things look, but pretty much just eyeball it and then only use the copy CSS functionality for things like gradients.
Things that are annoying to type like box shadow, right? Yeah. Yeah. Yeah.
Absolutely. The box shadow is a very hard to eyeball as well. So if you've got it nailed in your design program, then you can just export that directly, which is pretty nifty. We need to do an entire show on Figma though, because I used it for my last project halfway.
And I really, really liked it. I had some troubles with the Internet, which is not Figma's problem, really. Figma has some really cool stuff in it. Like the auto, did you get into auto layout?
No, no, I didn't get very far in, but like I did the whole like layout, my thing. And I felt like comfortable and you know, you get into like a new editor for the video or something and you're just like, uh, like how do I do the most basic stuff? Like this is frustrating. I felt very at home in Figma.
So I think we should do a whole episode where I ask you questions about some of that more advanced stuff. I'll leave you with this tasting more so an auto layout is basically a way to get a button that automatically resizes to the text. Yes. That's very nice.
I mean, that's a basic use case for it. Yes. Actually, one question before I have no design programs allowed me to do border top and border bottom. It's always got to be a complete square border.
So framer web does that now. And that's the only one I saw. It's funny. I saw Steve Schrugger tweet about this thing.
Oh, it's so cool. I wish Figma did this. And then the people were like, wait, what is this? That's different and then led to a big thing.
So there is a lot of hope that it could come in. At some point, because I think there was a lot of people saying, I really want this too. So it's like the only thing that we've had in CSS forever that has not made its way into a design program and not vice versa. Yeah.
Right. I know I want it. Next question we have here is from Ahmed. You are both great at technical communication.
How would we get better at technically me? Yeah. Is that the most ironic love that we've ever had here? You're flubbing the talking about being an expert communicator.
An expert technical community. I can't even read a sentence here. How to get better at technical communication when self learning. Thank you.
Yeah. I think this is something that Scott and I are both very good at is taking a technical concept and breaking it down so it is easy to understand or make sense or conveys all of the bits of the tech. So what it does, how do you get good at that? I think there's two parts.
Like one part is just getting comfortable talking and being able to get your thoughts out without being like, oh, oh, no, let me start again or no, that was awful. And I'm flustered and or being speaking in front of people or or creating something that you're going to put out on YouTube and being like, oh, my voice sounds weird. Things like that. That's half of it.
It's just being comfortable spewing words out. And then the other half is just thinking at it in terms of, like, I think this is just something I'm good at is being able to like look at something, understand how it clicks in my head and then spit that out into words and hopefully you find yourself set of people that like the way that you explain things. Yeah. A key point to there is that like different people are going to learn in different ways and you're not going to be everybody's cup of tea.
So don't like don't try to appeal to everybody with your explanations and really explain things the way that you know how to understand them. And then you'll find your audience of people who understand things the same way you do that. There are some tools that I like to use specifically. These aren't things that I've created like intentionally, but like I've noticed one thing that we both do is that we both use things like metaphor or attaching to like experience that a lot of people might have in their life to explain certain topics where some people really lean on the jargon and technical depth of programming stuff.
And some people, yes, will definitely understand and learn better through the technical jargon. There's just some people that are wired, but there's also a lot of people who are going to more quickly relate to a metaphor about mowing the lawn or opening a package or something like usage of metaphor in that way that those kinds of things are very crucial for people to understand because that's how your brain works, right? You have these connections and if you were able to say, all right, these two connections exist like this. And now therefore I have this prior base of knowledge.
It's really easy to understand this concept if you connect this abstract metaphor here, that is something that people will use a lot in their normal day to day life. So I think that's a key aspect of both of us are usage of metaphor, whether or not it's plain or not. Like you said, just getting comfortable talking is a big thing. And how do you get comfortable talking?
In my mind, I had to do it through reps. If you watch a lot of early level of tutorials, videos, I'm really awkward, especially when I'm on camera, when I started putting myself on camera, I was like, wrong, no, here, and it just got better, just got better to sheer reps, top things out, rubber ducats, discuss your code with yourself in your room, say like, okay, so what is this code doing here? Well, it's it's toggling this, it's doing this. Well, and don't just talk about like, all right, the X function is connected to the Y function, is connected to the B function.
It's more like the root of this thing. Describe your code, write good comments. Those kind of things are going to help you understand the actual programming in a way that you could explain it to other people. I also use my wife as a rubber duck a lot, whether or not she likes it.
I discuss the problems I'm having with X, Y, and Z video encoders and why they're bugging me and she can listen, if she wants her, she can just pretend that she is listening and think about something else entirely. So a lot of it just comes down to practice. Next question is from Mike Cravey, and he lets us know that it's just like gravy. What tools or other methods do y'all use to manage spinning up new projects with all the assorted directory structures tools and configs you prefer.
For example, when I start a new project these days, I like TS, pretty or ESLint, and I want those things to play nicely together. I find myself constantly copying files from one project to another, and I haven't found a good abstraction that allows me to set up a new project with the associated files bonus points for a solution that can keep shared configs and dependencies up to date. I'm going to go ahead and say, I'm not going to get any points, let alone bonus points here, because my solution to this is Duke-Gobby and Baze. That is my solution.
I would love to know of a great solution to this that is better than what I'm doing, because this feels like an area of optimization for me. Although I typically work on one or two projects, I do fire up a new project all the time to create a new tutorial with, and often find myself wishing or missing I had various configs in there. My solution to this is I install all of these things globally on my computer so that any time that I spin up a tiny little project, it just uses my global configs because there's nothing installed locally. So anytime I have any job, if I've got a JS file in my downloads folder, it'll still apply pretty to it, which I really like.
So people always give me crap for installing it globally, they're like, it causes issues and things like that. What about your configuration files? Where does your installing it globally? They live in your home directory.
Tilda, and it's great because everything has it. And then for projects that is worth spending more than half a day on, then I will go ahead and install everything locally for that project. And in that case, it's usually just my ESLAM prettier. And for that, I have my own config that I just npm install.
And then the ESLAM config is simply just extends West Boss. And then I don't have to copy paste anything, it's just install that. And then there's also an NPX command on the repo for that. That will install all of the like 19 dev dependencies that are needed, pure dependencies, sorry, for a tool.
I have a package to do that as well for prettier. You'd be great if it was just like, here is the level up tutorial settings for like everything. That'd be nice. Yeah, you should publish it.
It's crazy. People started using mine. Well, I have the prettier one is published for level up. It's just not, I just don't advertise it.
It's on the get-ups. If you want to look at it, you can. Yeah. But I'm going to warn you if those of you who like semi-colons are not going to be happy when you see it.
That's the thing about mine is that people would be like, oh, I just forked West's and changed this one setting. And I'm very clearly saying, no, the whole point of prettier is in ESLAM is that you just overwrite settings that you don't like. So it takes Scott's. And then if you don't like one of the settings, then just overwrite those few things.
Next question is Tom from the UK. Hi, guys. I'm 26 years old and working a full-time job. I'm currently looking at the possibility between work and spending time with my partner as I get maybe an hour a week to focus on learning JavaScript.
It feels like it's going to take me literally forever to get anywhere when I do want to learn something. There's always a better way of doing it. And when I get sit down, I have no direction. Your podcast has given me small boost of motivation, but 26 is that too old to make it into web development.
No, you're a baby in web development. The web has only been around for, I don't know, 25 years. It's going to be around for much, much, much longer than that. So absolutely not too old.
I don't think it's ever too old to get into something like that. And advice here, you have to spend time with your partner or learn JavaScript. I think at certain times in your life, if you're looking to make a really big change or something like that, understanding with your partner that this is going to be a busy time or that you really want to do this kind of thing. Obviously don't ignore your family or partner or whatever.
But I think it's fine for there to be certain periods in your life where you really want something. So there's going to be a little bit of give on both of your ends in order to make that thing work. What to do? Small projects.
That's why I made a lot of my courses because small projects where you get something done are small wins and that gives you the motivation to keep going. Yeah, definitely agreed on all accounts there. I was lucky enough that Courtney was getting her doctorate. So she was busy every single night, like any time.
So we can hang out on the couch and both study together in that search, sort of regard. So like you said, it will take some buying on your partner. But that's always a solution too. What if your partner wants to watch a specific TV show and maybe it's not a show that you are interested in watching, but you can still put on your headphones and code on the couch next to them while they watch that TV show or whatever they're watching.
And then still wait until it spends some time together while you're learning something new. I mean, those are certainly options there. It's not always have to be like, all right, I'm either studying, working, whatever, or we're hanging out. You can do both at the same time.
Another thing you can do at the same time is run a business and keep tracking your bookkeeping because well, one of those will require substantially less amount of effort if you are using our sponsor, FreshBooks. Now, FreshBooks is the cloud accounting software that we know and love, which allows us to do all sorts of really cool stuff like sending invoices and little nudge reminders to say, Hey, why don't you pay that thing? It allows you to time tracking, keep track of projects reporting. There's even a great little mobile experience for you as well.
I found so many things like this. Don't have a good mobile experience. So we're always out and on our phones. These kids are on their phones these days.
Got to be able to keep track of our books from our phones using FreshBooks using their mobile app. So you'll want to hang on over to FreshBooks.com, forward slash syntax for a 30 day free trial of FreshBooks. But in syntax, if the how did you hear about a section, because they love hearing about that. They love hearing that they heard about FreshBooks from syntax.
Trust me, we are all interested in making money off of our side projects and having them support us in various ways, especially now that we're needing to be a little bit more creative. So check it out at FreshBooks.com. Next question is from Oli. Oli says, Hi, Wes and Scott, how do you set up a web development project for an enterprise level?
There are so many simple tutorials and quick wins all over the internet. Oh, shots fired, Wes. How do you get more knowledge about a bigger enterprise already level technical stuff? How to organize a view app with greater than 60 pages?
My project is an application on the shop floor of producing firms, mostly inputs and static charts, less than 50 concurrent people working within the application. How to organize the rest of the API? How to resolve dependencies between an API and point one and API and point two? How to share information between components and view state management?
So there's a lot of questions here. Basically, at the end of the day, Oli is saying, Hey, where's all the tutorials on hard stuff? Where's all the tutorials on the real world big stuff? And the problem is that the more deep you get into this, whether it's, you know, enterprise level, whatever, your needs become very much more specifically your needs and not the needs of enough people to make creating a tutorial on those things worthwhile.
So what you're going to find is largely maybe a little bit more bite sized things. So you won't find or even abstract things, so to say, you're not going to find a ton of tutorials that are like, here's how to organize a view app with 60 components, because that doesn't fit the needs of a lot of people. You best off looking at things like application, like front end application, structure layout, you're going to have to get more general to get to the answers you're looking for at this stage, because when you get too specific, as you will, when it gets to that level, things will get more and more specific. And therefore harder to, I think, reach an audience with teaching.
So where is the content for this? I think that's where it is. I think you're going to have a hard time finding it, unless of course it's very specific to as it is. In terms of how you learn this stuff, I would take each of these as bite size problems and look at them as bite size problems, right?
How do you structure an application with a lot of components? Well, feature folders, I think it's a good idea. A lot of people seem to be doing it, but you might not exactly find that under the heading of, you know, a view app with 60 components, how to structure that, you know. Yeah, I think it's got nailed there with the bite size pieces.
That's what you have to do. There's not going to be a tutorial out there that covers absolutely everything. And you have to sort of learn these things maybe independently, maybe a few things here or there. You pick and choose your technologies.
And then it's on you as a developer, when you get to the level of building these larger apps to be able to decipher all of these things and put it into one big thing. So like Scott says, just break it down into smaller problems and figure out, and often when you get into one of these topics, folder structures, REST API endpoints, sharing dependencies, there's often five or six different methodologies in each of those things. And it's up for you to sort of go into research and read the articles and whatnot as to how you should approach it. Totally.
Next question is from, oh, he gave us a nice pronunciation for this one. Oh, yeah. I've done Wes's next JS course where he uses style components instead of next's own style JSX. What are your opinions on style JSX and why do you do or do you not use?
So style JSX is basically just put a style tag inside of your component. And then you give JSX backtext, and then you type your CSS inside of that. And then you're expected to use JavaScript for just regular JavaScript regular state and everything for all that. I prefer style components over that just because, style JSX is very, very simple.
It's a very lightweight. It gives you scoping built-in, which is really cool. And for a lot of people, that's quite honestly, for a lot of what I do, that's all I want is just to be able to do scoping and things like that. But there's a couple nice little things that are in style components, the way you structure them.
Quite honestly, a lot of my choices around JavaScript in our CSS in React applications are just based on how it looks, which is not necessarily performance or whatever. But some of the back in the day, they were always based on objects. And the fact that you couldn't use dashes was just a no from me, because I want to make it feel like as I'm writing CSS as close to possible, not to say that style JSX isn't that because you literally just write CSS inside of the style tag. But I don't really have a super convincing answer to that other than, it's just a couple things I like on style components a bit better.
You're also really locked into, I mean, there's a greater degree of lock-in with it than there is with style components, because style components, you can take with you any React other place. I don't know if you can put style JSX, I haven't looked into it. But my understanding, I like to keep pretty, like, if I'm going to lock-in this something, it's going to be into, like, you could just say, okay, React, style components locks you into React. Okay, but I'm not going to most likely change out of React, because that's going to be a big enough project of its own.
So, like, I think it was a brief of you to say that you care about how it looks, because I care about how it looks. And I feel like so oftentimes that that viewpoint is minimized in the discussion of things. Like, I can look at some code and say, this is ugly. I just don't like this.
And people say, who cares if it's ugly? It's the best way that it works. And I have to look and iterate upon this code. I have to understand it.
I have to parse it. I have to be able to ship it. And sometimes how it looks is very important in terms of, for me, like, how the code functions. And so, I don't know, I really prefer style components, because I can copy and paste from CSS and just drop it right in there.
Like you said, you can do that with this. But I don't know. There's not a whole lot of fancy special stuff within style components that I utilize anymore, because I use CSS variables to do all that stuff. And I just basically use it as scoping wrappers for myself.
And you can take it with you to wherever you want. That's something I've been thinking about a lot lately. I'm really not using any of the style components, the interpolation stuff and the... The spiled system or stuff like that.
Yeah, I don't know. The providers are like, maybe I do need to take a second look at something that just gives me scoping. Maybe at some point, I'll do another round of these. I just remember like two years ago when I first got into style JSX, I was like, I don't really like this as much as...
I think also another big one was at the time Emmet didn't work in it. And if my tooling wasn't there, I was just like, ah, oh yeah, the tooling's not there. Count me out. Sure, it works now.
Basically, the main reason why I didn't want to leave Sublime text was because there was Hayaku, which was an Emmet-like thing, but it was a little bit smarter. And I miss Hayaku so much. I still miss Hayaku so much. I miss it all the time.
But I got over that, because Emmet's not that bad. But you're totally dead on it. The tooling's not there. Things aren't going to work in that regard.
Count me out. Count me out. Big out. Let's move on to some sick pics.
You got any sick pics from me today, Scott? I do. I have a podcast. I have a lesson to a lot of new podcasts lately.
So I might have a few suggestions here. These are maybe some different ones than some types that I have been into before. But this podcast, let me tell you, is really fantastic. There's two of them here.
One is called Myths and Legends and one is called fictional. And what this post does is he breaks down Myths and Legends like the Odyssey and the King Arthur and stuff like that. And he breaks them into more digestible chunks. So you're getting the gist of the story.
You're getting the overarching themes of the story. You're getting the characters. You're getting what happens without spending hours upon hours learning about this stuff. Because I don't know a ton about a lot of these things.
Like I guess I know a little bit about mythology in some sort of ways or whatever. But I just want these to be fascinating. And he also has one called fictional where he basically gives you the recap of famous books. He'll talk about the time machine and he'll tell you the story of the book of the time machine in two episodes.
And maybe that's like an hour and a half worth of your time. He modernizes it to a point where it's occasionally annoying. So he'll be like, oh, and then so and so text it so and so. And I'm just kind of rolling my eyes a little bit.
But 99% of the time it's non-cringe-inducing. And occasionally it's cringe-inducing. So if you can get over that one percentage of cringe-inducing things, I really appreciate and enjoyed this podcast. I've been listening to it a lot.
I'm going to stickpick something. I stickpicked a couple years ago and I just re-upped on it. I wanted to tell you how much I love it. And that is, you ready for it.
Pre-cut parchment sheets for your baking shiv hands. Yeah, because I tweeted at you and I was like, whoa, and you were like, I stick picked this. And the moment you said that I remembered that you stick picked it. But I totally forgotten that you had because we stick picked a lot of things over the past 260 episodes.
That's true. I'm very hundreds of things. So it's essentially what it is. It's just parchment paper that is pre-cut perfectly to fit a half sheet pan.
Honestly, it's the biggest life-changer ever because parchment paper I cook on everything. And I know there's these reusable mats and things like that. But I do it a lot on the barbecue. And I also just love just throwing out.
If I roast some veggies, you just throw out the thing. I know that it's not environmental friendly or whatever. But it's so good for cleaning up and just cleaning up at the other day and making everything nice and fast. And I did the math the other day because I buy 500 sheets at a time, which is enough for a year or two.
It's enough for 500. And I did the math. That's how I'm working. There you go.
That's a good way to count it. I paid 32 bucks or 500 sheets. And then I went to the store and looked at how much it was. And it was half the price to buy it pre-cut.
You don't have to worry about the stupid little razor blade on the side of the box. No working and setting it aside. It's like, yeah, yeah, exactly. So just one of those life-changing things that you can do in your life that is just a couple bucks.
So pre-cut parchment paper. Very cool. Shamelessly plug. I'll shamelessly plug my beginner JavaScript course.
Go to beginnerjobscript.com. It is a course that will help you with all of the ins and outs from scratch all the way up to working with the DOM and design patterns, things like that. It's a really good course. Bigger.gov.com use coupon codes syntax for an extra 10 bucks off.
That's even if it's on sale. You can still use that. Cool. I'm going to shamelessly plug my latest course, which is on Sapper.
The DJI to build a really insanely fast site with Sapper. We teach you all the ins and outs. If you don't know, Sapper is the sort of next JS analogous framework for Svelte, where you get either statically generated site or you get a full server-side rendered site with server-side APIs and things like that. All of the same service stuff you come to know and love you also get client-side folder-based routing, full stack folder-based routing, even up and down your APIs.
It's really cool. My website is built in Sapper. I'm a huge fan of it. So if you want to learn Sapper, head on over to leveluptutorials.com.
It's on up right now, and you will save 50% off the year. All right. That's it for today. Thank you so much for tuning in, and we will catch you on Monday.
Peace. Peace. Head on over to syntax.fm for you 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.