Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War? × More!

Next question is he also has one called fictional where he basically gives you the recap of famous books.

intentionally. But, like, I've noticed one thing that we both do is that we both use things like

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 if that's probably because I had 10,000 tabs open. It's most likely my fault. But I had I was seeing monster CPU usage. And so I 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 Yarn, even though it's just mostly the same. I think I was missing, like, some of my

metaphor or attaching to,

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 and don't just talk about, like, alright. The x function is connected to the y function JS 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

about mowing the lawn or opening a package or something like usage of metaphor in that way that those kind of things are very crucial for people to understand because that's how your brain works. Right? You have these connections. And if you are able to say, alright. These 2 connections ESLint like this, and now, therefore, I have this prior base of knowledge.

problems I'm having with x, y, and z video encoders and why they're bugging me. And she can listen if she wants, or she can just pretend that she is listening and think about something something else entirely. So a lot of it just comes down to practice.

These aren't things that I've created, like,

Mike Cravy, and he lets us know that it's just like gravy.

is from oh, he he gave us a nice pronunciation for this Node. David. Oh, yeah.

and then you give JSX backticks, and breaking it down so it JS easy to understand or make sense or

as you will, when it gets to that level, things will get more and more specific

Wes API endpoints,

I've done Wes' Next. Js course Wes he used the styled components Sometimes, I'll 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 your 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

abstract things, so to say.

folder structures,

Next question 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 for that, I have my own config state machines? Is 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 pain it's solving. Are state machines a design prop or a design pattern? like, style JSX is very, very simple. It's very lightweight. It gives you scoping built in, which is really cool. And for a lot of people, that's that's 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 pattern stuff before I really knew

that doesn't fit the needs of a lot of people. You Wes off looking at things like application like front end application

in each of those things, and it's up for you to sort of go and research and read the articles and whatnot as to how you should approach it. Totally.

There's often 5 or 6 different methodologies you can do that probably, I bet, within

maybe independently, maybe a few things here or there. You pick and choose your technologies, and then it's on you JS the 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 to one big thing. So like Scott says, just break it down into smaller problems and figure out. And often Wes you get into one of these topics,

So what you're going to find is largely maybe a little bit more bite sized things, so you won't find or even

structure layout. You're gonna have to get more general to get the answers you're looking for at this stage because some of that more advanced stuff. I'll leave you with this Sanity morsel. An auto layout is basically a way to get a button that automatically resizes to the text. Yes. That's in it. It's very nice. I mean, that's a a basic use case for it, but yes. Actually, 1 question before I have. Node design programs allow me to do border top and border bottom. It's always gotta be a complete square border.

instead of Next's own style JSX. What are your opinions on style JSX,

I'm flustered and and or being speaking in front of people or or or creating something that you're gonna put out on YouTube and being like, oh, my voice sounds weird,

How do we get better at technical?

really explain things the way that you know how to understand them. I think you'll find your your audience of people who understand things the same way you do. That said, there are some tools that I like to use specifically.

things like that.

talking and and being able to get your thoughts out without being like, oh, no. Let me start again, or, Node, that that was awful, and, what's the other one? Glitch does all the server side stuff if you'd like to, and 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 3, $400, you can buy a

Ahmed. You are both great at technical communication.

spewing words out, and then the other half is just

forever that has not made its way into a design program and not vice versa.

look at something, as I get maybe an hour a week to focus on learning JavaScript

thinking at it in terms like, I think this is just something I'm I'm good at JS being able to, like, stuff, and the That's where you should probably reach for more of a DOM based

understand how it clicks in my head, and then spit that out into words. And, hopefully, you find your subset of people that like the way that you explain things. Yeah. A key point to there is that, like, different people are gonna learn in different ways, and you're not gonna be everybody's cup of tea. So don't, like, don't try to appeal to everybody with your explanations and

getting comfortable

You're also really locked into I mean, that's a there's a more a greater degree of lock in with it than there is with style components because style components, you can take with you at any React other place. I don't know Next question from NotSure. 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 a mean handshake. I do give a mean 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, it hurts just thinking of it. And you had to to roll his knuckles before he did it to you, before he'd be like, oh, okay. So, like, JS, like, a child, I was always like, go get that handshake in there. So I I definitely the handshake, yeah, that's on point, and I do a lot of grip strength stuff. I do a lot of hanging from stuff. That said, I have these little stubby thumbs.

well, I gotta 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,

my understanding, I like to keep pretty like, if I'm going to lock into something, it's going to be into, difficult for developers, like browsers and keyboards because

how the the code functions. And so I don't know. I I really prefer style component 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 there's not a whole lot of fancy special stuff within styled component that I I utilize anymore because I use CSS variables to do all that stuff, and I I just basically use it as scoping wrappers for my stuff. And you can take it with you to wherever you want. That's something I've been thinking about a lot lately. I'm like, I'm really not using

if you can play style JSX. I haven't looked into it. But a ton faster and not have to worry about storage earnings. So I would look into that. And a lot of these services like Node sandbox, they can be free. So don't worry about the cost it it takes there. So that's one quick tip. Another tip on how to make money, I mean, Oh, shots fired, Wes. But how do you get more knowledge about a bigger enterprise ready As much as I love my Pi, just running npm install can make can be agonizing. I can only imagine.

was just, like, a no from me because, like, I want to make it feel like as I'm writing CSS as close to possible.

you care about how it looks because I care about how it looks. And, like, I feel like too oftentimes that that viewpoint is minimized in the discussion of things. Like,

over that just because

JavaScript in

like you could just say, okay, React self components locks you into React. Okay. But I'm not gonna most likely change out of React because that's gonna be a big enough project of its own.

Not to say that style JS 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 there's just a couple things I like on style components a bit better.

So, like, I think it was brave of you to say that likes to think of itself as Sign up right now, and you will save 50% off the year.

Peace. Peace.

Alright. That's it for today. Thank you so much for tuning in, and we will catch you on Monday.

full stack folder based routing, even up and down your API routes. It's really cool. My website is built in Zapper. I'm a huge fan of it. So if you want to learn Zapper, head on over to level up tutorials.comforward/pro.

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.

on Bos, and it's annoying that your history doesn't sync between Chrome and Firefox.

but I've 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,

So that would be kinda cool.

iPhone app is not as good. And it's annoying that it's the Chrome is way better

the Firefox between work and spending time with my partner I prefer styled components

Maybe once or twice a week, the Firefox iPhone app, I feel just, like, force quit it because it will stop rendering out websites. I feel like there's some things that Apple makes intentionally

My solution to this is I install all of these things globally on my computer

up to date. I'm gonna go ahead and say, I'm not gonna get any points, let alone bonus points here, because my solution to this is to copy and paste. 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 I typically work on 1 or 2 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.

That'd be nice. Yeah. You should publish it. That's crazy. People started using mine. Well, I have the prettier one JS published for for level up. It's just, I just don't advertise it. It's on the GitHubs. If you wanna look at it, you can. Yeah. But I'm gonna warn you if if those of you who like semicolons are not gonna be happy when you see it. That's the thing about mine JS that people would be like, oh, I just forked Wes' and changed this one setting.

like, 19 dev dependencies that are needed pure dependencies, sorry, for it to work. I have And the fact that you couldn't use dashes And box shadow is very hard to eyeball as well. So if you've got it nailed in

Oh. Tilde. And it's great because everything has it. And then and then for, like, projects that is worth spending more than half a day on, then I will go ahead and install everything

and I want those things to play nicely together. I find myself constantly copying files from 1 project to another, and I haven't found a good abstraction allows me to set up a new project with the associated files. Bonus points for a solution that can keep shared configs where possible through HTTPS, at least, currently, it's not the data layer. It's not necessarily

spin up a tiny little project, in order to make your your application easy

use to manage spinning up new projects with all the assorted And just in general, what advice do you have to be a young teen learning code? PS, you Node, you've got something going when a teenage boy would rather listen to your podcast

it just uses my global configs because there's nothing installed locally. So anytime I have any if I've got a a JS file in my downloads folder, it'll still apply Prettier to it, which Oh. 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, like, configuration files? Wes do those if you're installing it globally? They live in your your home directory.

I like TS, Prettier, ESLint,

that I just npm install, and then the ESLint config is simply just extends Wes boss. And then I don't have to copy paste anything. It's just install that. And then there's also an n p x command on the repo for that. That will install all of the, probably would

And I'm I'm very clearly saying, no. The whole point of Prettier is pnpm ESLint is that you just overwrite

locally for that project. And in that case, it's usually just my ESLint Prettier.

Python, and Delphi. Yeah. It's not exactly a JavaScript book. That's for sure.

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.

a design pattern. You know, have you ever been to source making Scott? There's Node benefit, animating height auto.

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.

illustrations,

this site and their work. So maybe I'll pick this up and read this through. 406 Yeah. It turned into, like, a lawn. I mean, I've always kinda been a lawn person, but I'm definitely, like, spending a lot of time in my yard. Alright. 1st question from Says, I have a question regarding Figma designed to HTML conversion. For those of you who don't know, Figma has some 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, it gives you the CSS, or you can just do copy CSS directly from copy and paste, really neat. I wanted to ask about the process

I typically won't take the, you know, terms of service on an advertiser or something and connect their bank account to it so you could maybe

define the top bar as being, like, 2 times Another thing you can do at the same time is run a business and keep track of your bookkeeping because, well, one of those will require substantially from I'm guessing this seems tall. Do you make it the same as well or something else? Well, it really depends on your design

Cool. So next question is from Kartik.

They have a book called source making Scott design underscore patterns, and I've always really loved the look of

Examples in Java, c plus plus PHP, you really want something.

and you have a,

width or height things unless they are like a max height or a max width. Height, I guess, maybe is 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 Sanity, why does React bill itself as a library instead of a framework? on How to organize the RESTful API, this this view layer for your application. It's the view layer, but it's not necessarily,

And it's going to come from experience in terms of how much CSS practice you have, but you'll you'll get a feel for when things need to be explicit and when things need to be not.

well structured jargon free pages. That is my account.

the vertical rhythm height. So okay. Let's break this down. Do you do you know a whole lot about vertical rhythm, Wes? Yeah. Yeah. We've talked about it 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, definitely Svelte because Svelte does a lot of this stuff for you. It really depends on how much 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 and provide it. So, really, the main reason is that React,

It's explicitly not a JavaScript book, but a lot of this stuff is just straight up comp size stuff. Cool. Yeah. Check this out, source making Scott.

So I would typically set my Next question is from Uli. Uli says, hi, Wes and Scott. How do you set up a web development project for an enterprise level? There are so many simple tutorials I'm basically syntax. Cool. Cool. Cool. Alright. Next question.

body font size of 16 pixels, 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.

nav height to be, like, twice that, 24 over 48. So then locate my my top nav bar is gonna be 48 pixels tall, and I'll usually do that explicitly.

1.5 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. Wes 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 syntax for a 30 day free trial of FreshBooks. Put in syntax, maybe how did you hear about us 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 Scott.

understanding a dive into design patterns.

The next question is from Sore Vermaiden.

a browser? Yeah. So you can have your files

or the same JavaScript code from 1 function to another, and there's only these 4 bits that are different in each of the functions.

And you go, oh, okay. That's probably what design patterns Yarn, and then you start looking into them. You go, oh, I kind of had that problem before, and that's how it 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 a design pattern? Would that be,

Linux Is that the most ironic flub Yeah. That we've ever had here? Are you flubbing? The talking about being a an expert communicator? Expert technical communicator. 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 JS taking a technical concept

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 and what we mean by that is ways that you can structure your code or your functions or

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. CodePen,

structure multiple modules

Oh, absolutely. Okay. I, like, know so little about design patterns that I don't know even what constitutes That seems like it's no fun, not to mention the amount of, space that node modules takes up on the device with 16 gigs of storage. So, basically, any pointers on getting income

So the shop floor of producing firms,

how to resolve dependencies between an API I personally I have these 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 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. It says, hey, guys. Is it possible like, experience that a lot of people might have in their life to explain certain Tolinski, where some people really lean on the jargon and technical depth of programming stuff. And some people, yes, will definitely understand as well as how the the syntax can look within React and these neat little graph tools that they give you within XState. There's a lot of really cool things about XState. That said, I'm not using it currently. That doesn't mean I wouldn't use it. I find the idea of state machines to be both fascinating and

level technical Wes transitioning from design to 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 let's suppose the nav bar is a 115 pixels.

endpoint 1 and API endpoint 2, How to share information between components and view state management? which leads us, Wes 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 just use the design guidelines as a guideline and hand code all the CSS myself. But, the CSS exists there. And if you take that conversion, I would not keep things that explicit.

stuff? How to organize a Vue app with greater than 60 pages? My project

and quick wins all over the Internet.

mostly inputs and static charts, less than 50 concurrent people working within the application.

is an application 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 gonna have a hard time finding it unless, of course, it's very specific to as it is. In terms of how do you learn this stuff, I would take each of these as bite sized problems and look at them as bite sized 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 the heading of, you know, a Vue app with 60 components, how to structure that. You know? Yeah. I I think Scott nailed it there with the bite sized pieces. That's what you have to do. There's there's not gonna be a tutorial out there that covers absolutely everything, and you have to sort of learn these things

a understanding with your partner that this is a going to be a busy time or that you you really wanna do this this kind of thing. Obviously, don't ignore your family or partner or whatever,

So there's ESLint gonna be a little bit of give on on both of your ends in order to to make that thing work. What to do, small projects. That's why I made goofing it up than anything else. Right? Oh, yeah. I bet, like, a lot of the Chrome Bos 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 they we also just got Apollo DevTools back after, like, 2 years. So now that's even one nicer thing for me. What about you, Scott? Are you still on, or are you trying other things? I've been on Brave for a while now. This is my main one. 3 months, I bet. Yeah. Probably at least, and I really like Brave. There are some situations

less amount of effort if you are using our sponsor, FreshBooks.

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. You know, I was lucky enough that Courtney was getting her doctorate. So, like, she was

busy every single night, like, any time. Right? So we could hang out on the couch and both study together in that certain in search of regards. So it like you said, it it will take some buy in on your partner, but that's always a solution too. Like, what if your partner wants to watch a specific TV show, and maybe it's not a show that you Yarn interested in watching, but you can still put on your headphones and still I mean okay. So let me let me preface this by saying both Svelte and Framer 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 gonna have to measure the thing. You're gonna have to turn on and off overflow hidden. I mean, there's a lot of stuff that I don't wanna do that it's gonna do for you. But still Node of the things I was like, jQuery,

but I think it's fine for there to be certain periods in your life where you ready? Get ready for it. Precut parchment Oh, yeah. Sheets for your baking shavans.

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. Yeah. When did you pay that thing? Allows you to do 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 about on on our phones. These kids are on their phones these days. Gotta be able to keep track of our books from our phones using FreshBooks using their mobile app. So you'll want to head on over to freshbooks.comforward/

I think at certain times in your life, if you're looking to make a really big change or something like that, and then you type your your CSS inside of that. And then you're expected to use JavaScript for just regular JavaScript, regular Scott, and everything for all that.

Node on the couch next to them while they watch it that TV show or or whatever they're watching and still wait to, like, spend some time together while you're learning something new. I mean, those are certainly options there. It's not always have to be like, alright. I'm either studying, working, or whatever, or we're hanging out. You can do do both at the same time.

So I went back to Brave. I wish I would have, like, over TypeScript He modernizes it to a point where it's occasionally annoying. So he'll be like, oh, and then so and so texted so and so, and I'm just kinda roll my eyes a little bit. But around it, both x state and state machines, I could 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 the best way that it works, and,

Mhmm. In it, and Firefox pulled it out because of a possible security issue Yeah. Back in there. The more I think about it, the more I'm trying to think of the reasons why it went back. I think I'm not quite sure why it 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 was mostly just the CPU and little annoyances.

a diary of what I thought about this because I I don't remember over the course of time why why it went back, but I remember it being not entirely grounded on, you know, facts in logic alone. You know what I'm saying? Yeah. Sometimes it's just like, it it I don't know why. It just feels different, or I just wanted it, and I just like it. I can't put my finger on it, but something about it is enjoyable.

comfortable. And, you know, when you get into, like, a new editor for, like, a video or something, and you're just like, so that anytime that I

Copy it straight out of there, and then just

project halfway,

modify that. Remove things, tweak it, whatever to be how you need it. Because that data ESLint, it can save you some time writing that CSS.

like, how do I do the most basic stuff? Like, this is frustrating.

I just look at it and eyeball it into place.

Yeah. Yeah. Absolutely.

I felt very at home in in Figma. So I think we should do a whole episode where I ask you questions about

for things like gradients. Things that are annoying to TypeScript box shadow. Right? Yeah.

So Framer Wes does that now, and that's the only one. I saw it's funny. I saw, Steve Stroger tweet about this saying, oh, it's so cool. I wish Figma did this. And then the Figma people were like, wait. What is this that's different? And then, to do a hasty treat regarding the Brave browser? I would love to hear your opinions on the tech views approach,

exclusively because by default, they block all cross site trackers.

have, in my experience, no offense, been a little Inseparable. Yeah.

why we need another browser in 2020. I use Brave

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 is definitely not the case. I don't know if I would tell everybody to use Brave because you will hit You're not going to find a ton of tutorials that are like, here's how to organize a Vue app with 60 components because

fluid of an experience than some other browsers even though it JS basically Chrome with more privacy protections, They do all connections

a little less Chromebook, maybe a cheap Windows computer if you want. Yeah. Right. Exactly. Yeah. Yeah. I think those are all good suggestions.

TypeScript, it blocks fingerprinting stuff. And one of the things I love about it is this little, like, line in the in the URL bar that is their logo

first time. Now

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. Look. Try to create an Azure account every single time it gave me a fail. I opened up Chrome, same version Chrome, whatever Chromium. I opened up Chrome, worked

I also just

because part of 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,

a 500 sheets at a time, which is enough for,

Yeah. Yeah. Exactly. So just one of those life changing things that you can you can do in your life that is just a couple bucks. So precut parchment paper. Cool.

love just throwing out. If I roast some veggies, you just throw at the thing. I know that it's not environmental friendly or whatever, but it's just so good for cleaning up and just cleaning up at the end of the day and making thing everything nice and fast. And I did the math the other day because I buy feels like it's going to take me literally forever to get anywhere. When I do wanna 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 Bos of motivation, but at 26, is that too old Should I start a new project with jQuery or React? Baseball emoji.

not working and kinda getting the size.

Granted, it's not the same as having your own personal environment, but there's there's options out there for

I wish I was listening to web dev podcasts. I wish podcasts existed when I was 16 or less than 16. That would have been pretty sweet. So let me give you a little tip here. If you don't wanna install things locally with your Raspberry Pi, hop on something like CodeSandbox.

but a lot of them would involve fudging some terms of service, like getting your mom to accept a package to do that as well for PreAir. It'd be great if it was just like, here is the level up tutorial settings for, like, everything.

a a freelance job. Man, I Wes, just a hustler when I was a kid, and I just, like, read this question. I thought, like, oh, man. This this was me. I can imagine that. When I was a kid, I was always just, like, standing on the side of the road ESLint pears.

man, when I was your age, I was, like, mowing lawns for for cash. Yeah. You can quote, unquote mow lawns for cash with web dev projects And for the most part, it functions fine. But I I definitely think that it's more likely a case of, like, Apple

but it was a job job. It wasn't like

cloud providers in terms of hosting your entire Scott projects on the cloud without having to even have them grace your local machine, which should make things like installing Node modules a stoplight there's a lot of questions here. Basically, the end of the day, Ali is saying, hey. Where's all the tutorials on Yarn stuff? Right? 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 or 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.

and and collect some cash. There are other options, 228

if you can get people who are willing to pay you to do them. That's gonna 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 to this quick thing for this kind of money, led to a big thing. So there is a lot of hope that it could come in Figma 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 directory structures, tools, and configs you prefer? For example, when I start a new project these days,

Then you're not gonna be taking up your own storage. You can build full applications on CodeSandbox.

create something with ads on it to bring income in. Do you have any ideas here, Wes? This is really fascinating to me because I I had a job since I was 13, and practice

and FreshBooks, which is cloud accounting.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here JS Scott Tolinski

Is it worth time learning design patterns? All kinds of really good questions. We are gonna answer them for you today. If you have any of your own potluck questions, go to syntax.f m, 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 2 awesome companies, Prismic, which is a headless CMS,

Who would win in a thumb war? Should I use jQuery or React? our CSS, in React applications Yarn just based on how it looks, which JS, like, not necessarily performance or whatever. But some of the like, back in the day, they were always, like, based on objects.

How are you doing today, Scott?

much, much longer than that. So absolutely not too old. I don't think it's ever too old to to get into something like that. And advice here, you have to spend time with your partner or or learn JavaScript.

No. You're you're a baby in in web development. The web has only been around for, I don't know, Wes,

to make it into web development? and Wes Bos. Welcome to Syntax. Today, we've got a potluck for you talking about libraries versus frameworks. Are we still using Firefox? attention token.

settings that you don't like. So take Scott's, and then if you don't like one of the settings,

Next question is Tom from the UK. Hi, guys. I'm Wes years old and working a full time job. I'm currently looking at the possibility conveys all of the bits of the tech, as to what it does. How do you get good at that? I think there's there's 2 parts. Like, 1 part is just

then just overwrite those I don't know, like, a year or two. It's enough for 500. And I did the math. That's how much it's so far. There you go. Yeah. That's that's a good way to count it. I paid $32 for 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 precut.

25 years. It's gonna be around for few things. Yeah.

we're up here still at my cottage, and

and I'm just flying right along it. Be really enjoying it. And, course, and I'm just flying right along it. Be really enjoying it. And,

I'm doing good. Doing real good.

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. That's cool.

So what they're doing is they're trying out this thing called BAT, basic Yeah. Very cool. It's funny how, like, everybody over 30 turned into bird people quite honestly, for a lot of of what I do, that's all I want JS just to be able to do scoping and things like that. But there's a couple Node little things that are installed components, the way you structure them. Quite honestly, a lot of my choices around

whether to use XState's internal context to store app state or use the Apollo cache.

Like, okay. 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. Yeah. Because, obviously, they're blocking ads. And, like, what are content creators gonna do if you don't have ads on your your blog or your video or something like that? You don't have to worry about the stupid little razor blade on the side of the box

Courtney calls my 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 this. Tape here. Yeah. You've got the the reach advantage most likely. Yeah. I maybe have a power advantage, but you definitely have a reach advantage, which can come in handy. I've never been particularly good at thumb wars. I was going to say you, specifically is my stubby little thumbs. Oh, wow. Maybe I Sanity a little bit of, like, if I I get you, I'm not letting you go, but I don't Node if I can get you. You're like a crocodile. Yes. Yes. Exactly.

enjoying the content. And then from that content, they then pay out. I know people that have Brave, they put, like, $10 into it a month or something like that. So it's kinda cool to see that they're trying to not also just block ads, but trying to fix how do you get creators. Right. And 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.

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

sure. Really fun. Next question is from Andrew Peterson. What are your thoughts on ex state and state machines for managing state and applications? I've been super interested to try it. I'm interested to hear what you both think. Also wondering if you have any recommendations on how to use it with Apollo,

Yeah. It doesn't even do templating. Like, that's JSX, which Right. It kinda is React, I would say. I don't think anybody actually uses People do. React without any sort of JSX or like, there's other libraries, but do people just use it straight up like React dot create element?

I still am using Firefox.

Next question we have here is from Anan. Are you all still using Firefox now that it has been 6 months? I couldn't believe that it was actually 6 months.

Yeah. 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 Wes. You just use the functions. It's like, I don't know. Come on. That doesn't look that's, like, not necessarily great looking experience. No. That would be tough. People do it.

but if you're running that in the cloud, you're using we talked about a couple episodes ago. It Wes, like, Versus Node,

What what was that called? Code server. So you can, like, run Versus Node in the cloud and access it via I

I'm selling pears. I had a paper route, and I had my own lawn mowing business. And, like, the fact that you're you're under 16, like, if you're over, That's sharing dependencies, functionality for Apollo 3 coming out, but

like, hosted.

like, 10 years old, I bet there's something you can Node. 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 lawns, shovel a few driveways, and save up a couple $100 in order to buy your first laptop. There's a lot to say in terms of what I call, like, TypeScript mentality Wes, I don't know, try go mow a few lawns, buy a a cheap laptop, and then use that cheap laptop to start getting really good at web development, then maybe build a few websites and buy a more expensive laptop, and you sort of just trade up and trade up. There was a guy in Canada that traded a paper clip up and up to a house just by doing it trade by trade. I think that's kinda one of the really exciting things about becoming a kid JS learning how to make money and learning how to trade up. And I don't think you need that much money in order to to go buy, like, a Chromebook or something like that. And then like Scott said, like, run the stuff in the cloud. This is especially true if you have slow Internet. NPM installs can take forever, a lot of my courses because

myths and legends like the Odyssey Yeah. Right. I know. I want it. Next question we have here is from So I don't use state machines, but I've been very interested in them. And I've been watching a lot of YouTube 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 Cool. I'm going to shamelessly plug my latest course, which is on Sapper. It'll teach you how 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 a 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'd come to know and love. You also get client side folder based routing, and dependencies

have listened to a lot of new podcasts lately, so I might have a a few suggestions here. These are maybe some different ones than there's some types that I have been into before. But this podcast,

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 a nice little computer science topic. It's used in video game development. It's used in 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 Firefox on Android, in my experience, was very good. I have not used Firefox very much on my iPhone, but I have it installed.

let me tell you, is really fantastic. There's 2 of them here. 1 is called myths and legends, and one's called fictional. And what this post does is he breaks down What tools or other methods do y'all

the interpolation

spending, you know, hours upon hours learning about this stuff. Because I I don't know a ton about a lot of these things. Like,

something that just gives me scoping. Maybe, at some point, I'll I'll do another round of these. I just remember, like, 2, 3 years ago Wes I first got into style. Jsx, I was like, I don't really like this as much as I think also that another big one was at the time, Emmet didn't work in it. And if my tooling wasn't there, I was just like, Oh, yeah. The tooling's not there. Count me out. I'm sure it works now. But That used to be the main reason why I didn't wanna leave Sublime Text Wes because there was Hayaku,

and, you know, the King Arthur and stuff like that, and he breaks them into 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. Both of us, the usage of metaphor whether or not it's planned 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 Vercel up tutorials videos, I'm really awkward, especially when I'm on camera. When I started putting myself on camera, I was all like, I wanna go here, and it just got better just got better through through sheer reps. Top things out, rubber docket,

Let's move on to some sick picks. Do you got any sick picks for me today, Scott? I do. I have a, a podcast. I

which was an Emmett like thing, but it it was a little bit smarter. And I miss Iyaku so much. I still miss Iyaku so much. I miss it all the time, but I got I got over that. But because Emmet's not that bad. But, again, you're you're totally dead on. If the tooling JS not there, things aren't gonna work in that regard. Count me out. Count me out. Big out.

filed system or props and stuff like that. Yeah. I don't or the providers or any of that. I'm like, maybe I do need to to take a second look at

You'll want to check out this website as well because they've got a really cool Scott versus Wes. They've got a bunch of examples with Vue and React. Check it out for your next project, prismic.

in the web development field when you are under 16.

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, Scream with some of their suggesting of brave, So to say, Wes there was just Brave.

Ioforward/ absolutely love it. The dev tools have been fantastic to me. There's a couple little annoyances I have,

running on a $50 Raspberry Pi and a 10 plus year old monitor.

Hey, guys. So a somewhat different question today. Oh,

It's at prismic. Ioforward/syntax.

This is from Varlevi.

You Node, it's fortunate.

There you go. JQuery I Wes, I I know a little bit about mythology in some sort of ways or or in whatever, but I just found these to be fascinating. And,

jQuery. I probably would just say just go use Vanilla. We're at a point Node. We have been for a few years where there's no benefit that I see in in using jQuery over JavaScript

say this question should be more, should I use Vercel or jQuery versus React? Because, like, if you're gonna go ahead and build an app with a whole bunch of stuff in it, then then, yeah, React is probably a 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 in React. You just wanna add some functionality.

What is that? Oh, look at you. So you wanna check out Prismic. Prismic is a headless GraphQL CMS or a REST API CMS. It's really cool because you sign up, you get in, make your data types, you make your repeater fields, you can relate them to each other, you can create 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 altogether,

why can't anything else do this to the degree that jQuery cut? And now it can, obviously. But, yeah, it's so good. It was so good. Slide toggle and everything was so good. Slide toggle. We don't need a lot of those UI things now that they're all in CSS, but So if you can get over that 1 percentage of cringe inducing things, I really appreciate and enjoy this podcast. I've been listening to it a lot. I'm gonna sick pick something I sick picked a couple Yarn ago, and I just re upped on it. I wanted to tell you how much I love it, and that is

CSS will never 12 and a half minutes. You could have a couple data types up and running, and that's pretty nifty. It's called Prismic.

library like Vanilla or No. No. I didn't. I I didn't get very far in, but, like, I I did the, like, whole, like, layout my thing, and I felt, like, half of it. It's just being comfortable Alright. Well, next time we meet up in person, we'll have to We'll do a GitHub. Solve that one for 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 a little example project that I could do it, but I haven't done it myself. The the question about should I store my

be able to animate high auto, I don't think. I know. It's unfortunate.

Pnpm

providing a whole lot of things, like routing and animations and image support and and Yeah. Like I mentioned, loading of data is a big one. I mean, think about a lot of 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 the base level for things to be built on.

So the real answer here is the fact that if you've used other frameworks, Head on over to syntax.fm when you get too specific, that tells you how many items on a particular page and what they are and why they block them. So it it like, does a good job of being transparent in terms of, like, alright. This site, we blocked these many things because of this. Now there are some I found Brave to be

during the coronavirus.

Yeah. Because I I tweeted at you, and I was like, woah. And you were like, I sick picked this. And in the moment you said that, I remembered that you sick picked it, but I was I totally forgotten that you had because we sick pick a lot of things over the past Node episodes. That's true. Very hundreds of things. So it's essentially, what it is is just parchment paper that is precut perfectly to fit a half sheet pan. Honestly, it's the biggest life changer ever

99% problem, really. Figma Figma has some really cool stuff in it. Like, the auto did you get into auto layout? local state was a cool idea, and in practice, it had always ended up being more work than I was hoping it would be. I think it might be changing a little bit

He'll talk about the time machine, and he'll tell you the story of the book of the time machine in 2 episodes. And maybe that's, like, an hour and a half worth of your time.

of the time, it's Node none cringe inducing, and occasionally, it's cringe inducing.

the intention of where it can go than watch Star Wars or Marvel With The Friend. So thank you so much, Mar Levie. That is awesome.

than just, like, the actual data itself. So I I looked quite a bit at x state recently because I'm building this new video upload system, which believe it or Scott, has quite a bit of state involved in building a video upload system. And so I 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 wanna have to learn x state in addition to all of the other new things I was doing.

in state a 1000 times, but I'm never building a stoplight in in the web? So what I would love to see in x date, if if those of you who are using x date or state machines in general, a little bit more real world examples with, like, actual would go as far as Vue,

data coming in, specifically even with Apollo or working with APIs. Because right now, a lot of the 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 in 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 this thing. The state determines where it can go next, I e, if a state has 2, like, a light switch, it has on off. Right? An on switch can only ever be coming off, and then 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

example I ended up just doing, like, a react context and and use reducer business.

Very cool. Shamelessly plug. I'll shamelessly plug my beginner JavaScript course. Go to beginner javascript.com.

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. Beginner JavaScript Scott use coupon code syntax

Benigna.

That's a great question. I

I remember reviewing it, like, 3 or 4 months ago and being like, still not as good as just using contacts. Plus, in terms of my course, people just want to see contacts because it's a popular thing they don't wanna learn. Next question we have here from Richard for an extra $10 off. That's even if it's on sale. You can still use that.

with Apollo I'm working on some fun stuff with video. I'm working on some new course stuff. I'm just feeling good about my my Node, getting a little bit more sleep now. So I'm just course,

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. Don't I I don't think that putting your local state in the Apollo cache as well is is probably the best bet. I think Apollo 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 you find yourself being, like, weird. I'm copy pasting the same HTML and I really, really liked it. I had some troubles with the Internet, which is not Figma's

it was gone was because of they had used eval

extensions that I had come to rely on used over over time. But let me say something. Every Chrome extension will work on Firefox. The whole that's what most extensions are. Oh, really? Like, the Apollo dev tools JS just a Chrome extension, and it just works on Firefox. The only reason It is a course that will help you, any of the style components,