Skip to main content

about 5 years ago Syntax Podcast

Bike Shedding — Developer Opinions Explained

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

Topic 0 17:55

Foobar examples

Wes Bos

dug into this as something that I'm very opinionated about, which is, Next one we have here is, 80 lines deep and there's different indentation, it can be difficult.

Scott Tolinski

it doesn't is not I mean, syntactically, yes. It's an equals and then a greater sign, but does that have the same function as an equal and greater sign that you're used to? No. It doesn't. An arrow that's pointing to the the function. Right? So for

Wes Bos

I like a lot of these dark themes where they use will be highlighted so you can rid. Visually see.

Scott Tolinski

short name, like x. Yeah. A good good example might be, like, time. Const time is equal to whatever, And then a longer one would be cons time until next event or something. You know? Right? So one is saying what it is. It's Clearly time. The other one's describing a little bit more about what it does. Now in the past, I always opted for the terseness Of short variable names, things like a time out really nice and easily quick, parse it all at a second, and I've really firmly moved into the other camp where it's like, like a local package,

Scott Tolinski

Like, neon blue, and, like, to me, that aesthetic has always just very, very,

Scott Tolinski

I like all the windows shut in my office. I like the lights off. I like

Wes Bos

At least for my teaching style and the type of people that take my courses, I don't use Foobarbaz in any of my stuff. I find it very confusing.

Scott Tolinski

I could just go on and on and on and on and on. It's interesting. I'm split, and it's every single product gets off of annual subscriptions.

Scott Tolinski

Let's talk about a, a good product, and that good product is

Wes Bos

pieces of content and then clicking them together into pages and and whatnot. So check it out. Prismic, p r I s m I c dot I o forward slash syntax. Thanks so much to Prismic for sponsoring. Sick.

Wes Bos

I have not found that to be the case at all, especially because, like, you people wanna say, like, when would I ever use that? That's the big question in learning.

Wes Bos

The idea is that if you take

Scott Tolinski

crazy.

Wes Bos

variables.

Wes Bos

Experienced developers is that I'm wrong, and what I've heard from everybody I teach is that I'm right. Yeah.

Scott Tolinski

Dude, I I feel you so much on that because it's like,

Wes Bos

Yeah. No. It's light versus dark themes, and we joke about this a lot. Let's hear Scott's opinion on this first. Rid. Yes. My opinion is I use dark theme for literally everything, and if there's, like, an OLED, I'm fine with either either version of them. What about you? I'm 100% the most controversial one is,

Scott Tolinski

Not only is Prismic a a great product, but they have a great landing page you're gonna wanna check out too. And Wes is going to talk a little bit more about this Headless CMS that makes building web pages super, super easy. Yes. I really like Prismic because they understand

Wes Bos

Then it forces you to focus on

Scott Tolinski

was, like, a such a just a a great thing for me when I went from Dreamweaver to rid. Text me to there's Monokai, and I'm like, oh, this is where I wanna be. So for me, I'm a dark theme. I'm a even in the level up tutorial site actually, This is actually very funny, Wes, because we have, like, a whole bunch of themes in the level up tutorial site. I use the the syntax theme more than anything on that just because I I like the way it looks. But For the most part, I use just dark themes

Scott Tolinski

Usually, what happens is my text editor

Wes Bos

what I've heard from a lot of

Wes Bos

wanna use. Because the first the very first button on their website to make it white or black. Whereas with RGBA, you have to change all the zeros to 255.

Wes Bos

and just use foobarbaz,

Wes Bos

Angular. They have examples for pretty much everything out there, but The developer will, like, will enjoy using this type of thing. They got this really slick thing called slices, ripped. Split map map map filter red or green or yellow variables,

Wes Bos

dark. Been enjoying GitHub's dark mode. Tripping me out here. Yeah. And it's just, too much dark because I find it hard to read

Wes Bos

Light light mode all day long. GitHub, which are nothing. They're just variables.

Wes Bos

people who prefer dark themes versus Vim,

Wes Bos

what kind of products Oh, man.

Scott Tolinski

for everything.

Wes Bos

and then the end user will like using this thing because it's a really And, they haven't come yet, but And they are very

Wes Bos

Yeah. Twitter, dark? Yeah. So it really depends. But every time I see a screenshot of somebody with light mode, I'm like, that looks nice well. That's crazy to me. It never looks nice to me. It looks Putting index. Js ever. I hate that. It's too confusing. Especially, like, in tutorials, people get really confused. So even if it means that I have a folder called

Scott Tolinski

my favorite version of Android was, It's been at 120 now for a little bit, and I gotta say it's too wide for me. Aw. And I'm I'm willing to those types of things. Yeah. And and if I in fact, If I see, like, the function keyword in a callback or something like that, I will change it to be an arrow function because I do greatly prefer the arrow functions inside of that Specific use case. But for the most part, if I'm defining any sort of functions, even React components nowadays, I am using the function keyword specifically.

Scott Tolinski

like, 0 Prismic.

Wes Bos

And I whenever I teach, I I try to show how it works as well as not necessarily in the same example, but As well as when would I ever use that? When is that handy? What like, why why am I learning this? And

Scott Tolinski

with me. You know, I I don't know why, but, like, you know, Monokai

Scott Tolinski

very, very much spoke I'm willing to make that compromise and, you know, if that's if that's a hill he's willing to die on, I'm willing to leave it at 120, you know? But

Wes Bos

way for building nothing better than Versus Code, I think, Code function built right in or code action, it's called, and it will turn it from an implicit return to an explicit return rid affordable on on Ebay. It's in the the extensions as well. I actually ordered a set of extensions just a couple days ago, us developers want and what kind of products the end user, which I'm gonna call marketers, And this this is not one that I'll I'll die on, but this is a very strong preference to to obsess over and talk about rid More like blues and stuff like that than like, somewhat dark mode on a lot of things. It's just, like, brown, and I'm not a fan of of brown at all. So In my dev tools, I can't stand the dark theme in my dev tools. It's light all day long for me. Notion What? Light all day long. Give me at OSX, versus an actual legitimate valid type Because it makes it pink and italic versus

Scott Tolinski

version of the rid theme. I use that one.

Wes Bos

Next one we got here is this is

Wes Bos

Oh, no. And what Instagram, dark?

Topic 1 34:44

Indentation syntaxes

Scott Tolinski

the Mux will create it on demand at the time when many other video hosts, what they do is they rid That's a tall ingest process where you upload your video to maybe, like, an s three bucket, and then it chunks through and creates 10 different versions of that video, and then you gotta rid Pay to host all those versions. Well, Mux only creates it as you need it. Therefore, so you're not paying for stuff that you don't need. There's also a really awesome rid Some data platform that can be used with Mux as well so you can get Notion, GitHub.

Scott Tolinski

versus 1 massive reduce. What about you? You're wrong. I prefer chained straight up all day. Chain them up.

Scott Tolinski

difficult to parse. But if there's 2 or 3, I'm gonna chain them up. Rid. Oh, yeah. I I like doing even more than 3 because you could comment every single one. And, also, it makes debugging a lot easier because you can Every single line is a new step in the process. Oh, wait. Did you say that you liked chaining them? I thought you said you didn't like chaining them. Yeah. No. I said I liked it. I'm so I'm so wrong. I'm sorry. I I said that about you.

Wes Bos

I've set mine to 120 probably 2 years ago, and I've been pretty happy with How everything looks, and I especially

Scott Tolinski

rid. There's some guy using, like, a chainsaw to cut down part of his tree, and I was telling Courtney, I was like, I don't really use a chainsaw. And I was like, wait. What rid What absolutely would I do with a chainsaw? There's like, I have no usage for a chainsaw whatsoever, and I I, like, quickly brought myself back down to reality. But it's It's so funny. I would you know, I was a punk kid. I went to punk concerts, and I could never imagine myself being like, And there's still, like, 5 or 6 people being like, well, actually. Yes. Absolutely. Okay. So the first one, event parameters. So you have an event that's fired off in JavaScript, And your administrator can sign up, invite everybody. It is,

Scott Tolinski

Implicit return is when you have an arrow function without the curly brackets, Okay.

Scott Tolinski

Standards in your your code base. I mean, we we have that fixed kind of with Prettier now, but for a long time in the wild, wild west of JavaScript,

Scott Tolinski

that's m u x. Let me tell you about Mux because we've been using Mux for a little bit here, and,

Wes Bos

and that is super handy because you don't have to guess Dogs and people and sandwiches out of the equation when learning something I'm surprised because you used to be all about the index.js. Rid about jazz? No. I'm only about it for barrel files. Oh, okay. Only about it for barrel files. That's it. Only about it. What else are you only about, rid Scott. I am only about

Scott Tolinski

And Mux, If this thing the variable name describes exactly what it does, then I have to write less comments. The comments become less important because the variable name describes what it does. All that stuff is very readable. I'm not having to type most of it out anyways.

Scott Tolinski

Okay. Next 1 is going to be, index dot JS file. Sometimes people use them as even like a

Wes Bos

Python, Stylus, I've been a big fan of Stylus, Jade. Rid Ruby. Ruby, these are all indentation based. And when you're regular function

Scott Tolinski

We'll do a compromise here, and we set it to 120.

Wes Bos

A user decision as to how they want it displayed in their editor.

Scott Tolinski

With GitHub from Brian Douglas. Now Brian, he works at GitHub. And Yeah. So I'm doing pretty good, man. I got a hedge trimmer coming. How could you not be good? That's pretty sweet. I we ripped out all of our hedges and an Ego Leafblower, and they all share a battery ecosystem.

Wes Bos

And what I found is Versus Code actually has a the white text on on a dark background.

Wes Bos

filter reduce.

Scott Tolinski

much wider.

Scott Tolinski

Maybe, like, I honestly prefer indentation based syntax. It's rid It's one of the things that I would prefer to have in JavaScript that I like. Was was CoffeeScript indentation based or was it just Yep. Yeah. That's one of the things I liked about Coffee script because it did it felt more like Python or more like Ruby, obviously, more like Ruby. I I really enjoyed that aspect of it. And for me, I don't know how much, So Yeah. Explicitly in React components, I'm always changing them or chaining them, but to be honest, mostly,

Wes Bos

But

Scott Tolinski

said that you know, I might have said I used arrow functions for everything. Now that is very not the case. I do primarily use the function keyword rid to define my functions, and I heard that they were easier to debug that way. And while I have not necessarily logos and stuff. Hey. This thing looks really nice. Oh. Yeah. So shout out to LogRocket rid and their design team for launching a new landing page because this thing looks sick. Next one we have here comes on Twitter from Leah Lundquist, and she says, any indentation

Scott Tolinski

And get this, if you sign up now, we actually have team accounts. So you can sign up your whole team at once, But recently, And what do they mean by that? Well, ready. It's finally tuned for to be, like, an easy API for developers to work with. I really tested out a ton of video platforms, and what I found is that they're all a giant PIA to work with,

Wes Bos

So I much prefer The Return.

Scott Tolinski

overlap of people. Does Milwaukee have Yard tools?

Wes Bos

your IDE can wrap it. And, also, you can

Scott Tolinski

We can do one more, and this is tabs open, multiple columns here, and then my 15 inch MacBook Pro

Wes Bos

same, a I decide which way I'd like to go. In my code editor, I'm dark all day long. I use Cobalt 2, which is my theme, and it's, like, blue. It's obviously dark theme, but it's not, like, dark dark. I don't like

Scott Tolinski

absolutely beasts. And at the same time, you're not Sucking in a bunch of exhaust. You're not polluting the environment, I I reached peak dad mode the other day on a vlog because, like, you know, we have a I mean, we're in downtown Denver, so it's not like we have a ton of property or something. We have a pretty small lot. Right? And

Wes Bos

and I

Scott Tolinski

explicit return versus implicit return. Hey. How about that 1, Yes. Explicit return is when you use the return keyword.

Wes Bos

Alright. Well, there's a couple more here, but I think we'll, we'll save them for next time. Let me know if you like that type of, I don't know if there's very many more things that we could bike shed about, but maybe there's enough here for, a hasty if you enjoy it. Yeah. I think there's Infinite bike shedding possibilities, Wes,

Wes Bos

and he brought it over. And we were just trimming trees all over this place, and I was like, man, this thing is awesome. That that's I have a DEWALT stuff, and rid The DEWALT stuff is really, really good, and they have a lot of really good options. But you can't take a picture of a DEWALT stuff without the Milwaukee people coming out from rid. The woodwork been like, it's better.

Wes Bos

Each method on its own lines, you spend so much talking about what what color the bike shed should be instead of actually building it. So a lot of these things don't matter at the end of the day, but they are things that us developers love pick a specific one, but just the idea of a tool is a pass through that I'm getting really into TypeScript, But whenever I'm doing

Scott Tolinski

Those are all in their own files, and then I have an index rid

Scott Tolinski

you know, in, like, React components too when you have, like, here's some data. I'm going to filter it, Then I'm going

Wes Bos

the DEWALT chainsaw,

Scott Tolinski

if you need to work with a video. Let me tell you, there is no more modern solution than Mux.

Scott Tolinski

I would say maybe I have a max depth of, like, 3 chains. If there's more than 3 chains, sure. Then that that's getting a little IQ tests and my whatever can be, but it's more

Wes Bos

and I won't feel bad about it. I agree with you there. I have a ESLint rule That would Yes. That would be good. I like that. Yeah. It's a pretty, pretty short word too. Easy to easy to search. Yes. Alright. Well, let's jump in now. Let's just go back and forth, and what I think we'll do here is explain

Scott Tolinski

so that way you could import from folder. Like, a good example would be, I have an elements Folder, which is all of our components that are elements, like, yeah, style components.

Scott Tolinski

in my brain works in a way that is very my inability to To stay, you know, totally standardized on things, but turns out we just use e entirely on their code base, and I don't know how many problems with that. I usually don't like single The batteries weigh an absolute ton, signifies that this thing is its own thing, and it makes finding, like, triple equals versus double or not equals. It makes read. Reading all of that way easier. Also, That just does not and I what I end up seeing is, like, big shapes rather than individual lines. I'm not a great reader. So seeing those shapes for me, rid. Big, big plus. I mean, indentation

Wes Bos

work in that, and then but when you when you commit, it'll just Reformat it to whatever the team's prettier is if you want. That scares me.

Scott Tolinski

Also, I'd love to tell you about the level up tutorials

Wes Bos

master Gatsby, full stack advanced React and GraphQL, And then also, there are with the exception of doing light and dark. Sometimes I'll I'll just set, like, black to be

Scott Tolinski

at 120 with the sidebar closed, everything closed, and set at 120 and the font size is really pretty small, I gotta scroll horizontally to see the whole rid React component. I love that. But, again, not a hill I'm willing to die on. I'm I'm willing to to to be Flexible on this one. There's a lot of people that say, That's easy. Yeah. Right? But why not

Wes Bos

tool time, Wisconsin West. Tool time.

Scott Tolinski

You get some maniac who's putting their brackets on a a second line of an if statement, and then you're just like, what are you doing? And so, like, now we don't have to worry about that, but there was a time when I was

Wes Bos

and split those, and then I called flat, and then there's a a flat array again. And then I filtered it for empty ones, and then I rid Mapped over it again, and I split it again, and I fly. And, basically, I had, like, 20 of them, and I was like, I'm pretty proud of this. And I was gonna tweet it, And then I stopped, and people are gonna be like, you could do that in one reduce.

Scott Tolinski

My

Wes Bos

where do I stop selecting text. You just have to hit this keyboard combo that will rid. Expand to indentation level, and every time you hit it, it will go up one level, My name is Wes Bos, and with me as always is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good. I, And I used it, and I was like, this thing is awesome. I can't believe that I have never

Scott Tolinski

brand new to our platform, and we've already had a couple teams sign up, and we're very excited about it. So Check it out. Leveluptutorials.comforward/pro.

Wes Bos

courses. You wanna learn beginner JavaScript,

Scott Tolinski

ready.

Wes Bos

When performance is not an issue and even then, like, I hardly doubt I'd be in many situations or things that if you're in Deno, maybe things that are you're you're importing from a URL. And then after that, you're importing

Wes Bos

Yes.

Scott Tolinski

is my EGO products. I have been using an EGO lawnmower, when I have my code generator do generics as well, everything is really nicely named so you can See exactly what it does when you import other generics from other libraries and things,

Wes Bos

at differentiating

Scott Tolinski

detailed analytics on who's viewing your stuff, thumbnails, Tom, out for delivery map right now, and I'm just, like, watching They come along. I'm like, well, I'm gonna trim so many hedges today. UPS has a delivery map, like like a Uber Eats? Sometimes.

Scott Tolinski

except for when it can be a little one liner and something really nice and simple, rid Maybe even specifically a React component. You often have an arrow function there on, like, a map or something like that, and then you're just returning components anyways. Rid I will always do an implicit return for that, but even just like little small filter things or something like that, if it's a one liner, rid. I will use the implicit return,

Wes Bos

yeah, if You ever if you ever see a good deal on a pass through socket set,

Scott Tolinski

one of the coolest new additions to the level of tutorials coding platform that we made rid Was a change to use our video provider as Mux.

Wes Bos

re sharpened, but that's the same as any exhaust. And it feels either you open them up in tabs map map filter Oh, yeah.

Scott Tolinski

potentially spicy opinion on this is that I use both of them, and for the most part, I almost Always use explicit hooks, rid. You kinda have to go back to regular functions as well. This is one of the ones that I am not afraid to say that I've changed my opinion on this. I mean, I think you can probably find some older syntax episodes where we, And you just return that result.

Wes Bos

shortcuts in Versus Code that will allow you to select based on indentation,

Wes Bos

Good question. Good opinion. Like so things that

Wes Bos

Beautiful.

Wes Bos

used this before, and I can think of, like, a 1000 situations where I had to switch to a wrench because the socket set wasn't working for me. So,

Wes Bos

Also, with what can type out the entire thing. So it is very clear queue out. Maybe I should explain. Anyone's brand new to this podcast. Prismic is a headless CMS that has a REST API and a GraphQL API. Log in, create your data types, and it will spit out a really sweet API, which you could use to pull into literally any Any code ever. PHP, JavaScript, React,

Scott Tolinski

returns

Scott Tolinski

characters into 1 character, that

Wes Bos

I like indentation based syntax.

Wes Bos

on Ebay. There's nothing. And re There's all these, like, weird little once off tools that you might need. Or not even once off. I've used I have a couple sets of those that you just showed me, And, like Scott says, making them one letters makes it even harder. I think the reason why they do that is because when you're looking at a custom generic that somebody's written, Next one is and this is one that I

Scott Tolinski

I made all that stuff super duper easy to not even think about. And for me, being able to recognize shapes and patterns helps re program. So I really prefer indentation based syntax. I understand people who don't. One thing I I like that it does is it enforces my sick pick today is going to be related to what I was talking about at the jump. It's gonna be my yard equipment,

Scott Tolinski

And if you are not currently a pro subscriber, hit that subscribe button, and you're going to be getting a lifetime of 50% off until you unsubscribe. So check it out,

Scott Tolinski

and you can use batteries. So imagine

Wes Bos

based rid and tax is the worst. The hours I've spent wrangling YAML configs because of a single line was misaligned.

Wes Bos

component name equals implicit returns, it's hard to debug. It looks funny.

Scott Tolinski

if That is the way that people are doing it. I'm always using component name dot j s because rid Who it happened to. So give it a try at logrocket.comforward/syntax.

Wes Bos

Shameless plug. I will shamelessly plug All my courses, westboss.comforward/

Scott Tolinski

know who's better to teach you GitHub actions and code automation than Brian because He's just a fantastic teacher. So we have this course is brand new on leveluptutorials.comforward/pro.

Scott Tolinski

grab it because they're awesome. You know what? I this is not necessarily a sick pick, but along the same lines, you might be interested in this. Rid A socket adapter for my Yeah. Drill Must have.

Wes Bos

Even though it's a little bit more verbose, I think I usually go for, The people that use WebStorm are gonna start coming at you because Milwaukee is better. It's the same

Scott Tolinski

Next 1 is going to be max line length. And now max line length, I don't know what yours has said at West. I've always been a fairly narrow narrow, even, like, a 90, Video replay of the error happening in progress. You can see this thing happen. You can debug goes there. Maybe I've I've just used it for so much longer than I've 0.5.

Scott Tolinski

You know that little, like, thumbnail scrubber fantastic.

Wes Bos

I wouldn't really care all that much because thing, and then it's nice and small. But the argument on the other side is that, like, re You are not a minifier, and you So a pass through socket set rid Is you'll have to Google what this is to really understand what it is. But, basically, the sockets go into the wrench and not on it, And then they are hollow so that if there's a threaded rod or a really long bolt, it will just pass through the socket and allow you to use the the ratchet on it. I found a set at a yard sale for, like, $3 last year,

Wes Bos

something this weekend.

Wes Bos

With Prettier now, you can just have your own local Prettier

Wes Bos

and and whatnot.

Wes Bos

Yeah. Man, yard tools? Good. I have I have the chainsaw, dark and then white to be light, and then and then I can adjust them if they're a little bit off, not like perfect red. Black and perfect white. But I do see the benefit of using primary, secondary, things like that because it makes theming your product a lot easier. So I think if I were to start a brand new project and know that I want dark mode or something like that, I would move to this. I I think I should try it on my next project. What about you? Yeah. I mean, I was nodding my head so hard. My head almost fell off. I,

Wes Bos

It's much faster. And then I was like, no. I

Scott Tolinski

my wife is a psychologist. So while she was getting her PhD, she scanned my brain over and over again. She knows everything about my brain, and what we found out is that I have very good visual spatial skills.

Wes Bos

where this would be a performance hit, I much prefer doing multiple rare for me. I don't feel like I'm super opinionated about much, But this is one thing I'll say no. Absolutely.

Scott Tolinski

max line length person,

Scott Tolinski

you've heard me say this on the podcast before, but I have, Head on over to syntax.fm

Wes Bos

in React components where they say less scary than Yeah. Because that's a what is happening with the data in that function or in that in whatever code that's being written.

Scott Tolinski

for the most part, I I haven't gotten me in too much trouble.

Wes Bos

especially with some of the the new Versus Code updates that I was talking about earlier. Rid So yeah. I'm gonna say no ligatures, but, yes, fancy font. That's fair. Yeah. Hey. We found, some things we disagreed with. Yeah. Finally. Yeah. There you go. Dark mode and look at yours. Yeah. Wild.

Scott Tolinski

cursives and whatever. Like, you use operator mono. I use Mona Lisa as my font. Both of those fonts, they provide some really, really nice cursive base or or or changing your syntactical elements up. And, again, what it does is it just Provide you another layer of visual feedback. Some people just see it as noise, but for me, I really, really latch on to it and like it. Yeah. I'm not a disagree. I don't I don't Like, look at yours. I think they look cool, but

Scott Tolinski

to map over it, Weider

Scott Tolinski

and it transcodes

Wes Bos

Rid. Otherwise, if it's multiple lines, the chances of me needing to

Scott Tolinski

and I really preferred

Scott Tolinski

paid enough attention to find if that's accurate or not, I have just stuck with it. It reads nicer to me. It isn't any more difficult for some reason. Okay. I used to like the way that the arrow syntax work. I use the arrow syntax again mostly in line, mostly as callbacks,

Scott Tolinski

I like to have multiple

Wes Bos

I think that it I have to do the oh, okay. Man. The arrow APIs

Scott Tolinski

our development manager, auto completes it for me. Or if I need to change the name of it, I rename Symbol, those kind of things. Yeah. So, basically, what I've I've let is I let Versus Code really do all the heavy lifting ready. For me of doing those long variable names. And now I really opt for a long variable name that describes what it does so that I I don't even have to read the comments if I don't want to, and then just say, okay. Time to next event. That's what this thing is. Yeah. I'm I'm in the same camp as well. I probably started off with shorter variable names, but I find myself being like, okay, time. And then I'm like, now I have another time variable. So So do I call that? Time 2? You If a user requests a video at a certain resolution,

Wes Bos

does a really good job

Scott Tolinski

the index is not searchable, and you can have you ever tried to do rid. Command p for index in your text editor to to find file by index or even a good example is us. We have 800 files named resolvers.ts

Wes Bos

socket set. So if you have a regular socket set, You'll know that sometimes you are working on something, and you have a bolt that you can't get to or you have a bolt where rid. It is very, very long, and you can't get the socket over top of that bolt. And then you have to resort to using a wrench or adjustable.

Scott Tolinski

rid Bring sale that's going on right now. We're doing 50%

Scott Tolinski

something like that.

Scott Tolinski

Alright. Let's get into some more of these here. Yeah. I think we should pick Let's just pick a couple. I'm picking one of mine here that's that I'm I'm really bullish on. Ligatures and fancy fonts. You would not believe how many people I get Comments in my YouTube videos and be like, I like this video until I saw the ligature. I'm like, okay. Let me tell you. As somebody who is visual, Facial, whatever. Those ligatures, they really help me out. Right? Those those patterns. Because when you have an arrow function, right, the arrow in the arrow function sacrifice what video player you're using. It works with just about any video player that supports HLS video. So it is really stinking cool. Head on over to mux.comforward/syntax everything looked like it was spit out of, like, a retro futuristic Terminator movie where it was, like, black and, Sometimes people use e, e v t, e v, or event.

Scott Tolinski

I need your art tools.

Wes Bos

they you can find joy in indentation based syntax.

Scott Tolinski

just about all the time I'm chaining them unless there is, like Everybody skins it just a little bit differently. Isn't that the that's the saying? Yep. Yes. That's the saying. Alright. Next one is going to be rid. Default exports versus named exports. Now this one is kind of interesting to me because we kind of went fully onto named exports.

Scott Tolinski

as we've seen on Twitter.

Wes Bos

Or if you open them up in your command p, it will show you which folder it's in, but I still don't find that good enough to justify

Wes Bos

Oh, no. That's the code I wrote.

Wes Bos

That's that's a good

Scott Tolinski

fake lines.

Scott Tolinski

What Mux is? [email protected]/ immediate transcoding,

Wes Bos

Thought about myself the other day. I was writing a massive split filter, map map map. And, basically, it was I was getting this massive block of text, And I needed to split it based on tabs and then split it based on colons. And I was trying to, like, take this massive block of text and making it into a JavaScript rid object because it had a whole bunch of data in there, and I was just kept chaining. I would, like, take what I want. I split it based on on a new line, and then it looped over rich line Rid The idea so maybe we should say the the flip side. The flip side of using these are called metasyntactic

Scott Tolinski

So now's the part of the show where we get into sick picks, where we pick re Things that we find to be pretty sick. Sick as in cool, maybe not sick as in sick. So

Wes Bos

JSs, one other thing is as we are in this, like, weird space of transitioning from common JS to rid Scott and I disagree episode ever because, usually, we're on the same page, but these are,

Scott Tolinski

Prettier. Right? Prettier and ESLint really changed our lives in JavaScript because they just It is a little harder if you're doing, like, a pair of programming, though, so I could see that. Yeah. Oh, that's interesting. I turned on line wrapping right now. I'll see if I can get used to Not having, like, having lines that are, like,

Scott Tolinski

No. No. I'm a big fan. I don't know why I heard the I heard that incorrectly. My bad. Yeah. I have a little example in the show notes of of the code I wrote the other day. Oh, yeah. I'm seeing that. I just thought that was something that you didn't like.

Scott Tolinski

except for monks, which I found to be very, very easy and fantastic. And This is me talking, you know, straight from the hip. This is something that I use personally and found this to be obviously the the best platform that I tried because we went with it. And then when Mux reached out to us to sponsor this podcast, I was like, oh, man. I got so many positive things to say about Mux. So, let's talk a little bit about Mux, what it does. It makes amazing video ready. Is easy. It makes the hard stuff difficult with video. You can serve up whatever video format is correct for your user, read. And it does this on the fly using this, like, I don't know. Not for me. Alright. Next one is going to be interesting here because I'm I've definitely been in 1 camp for a long time and have moved to another camp. So this is the long verbose names describing what it does verse,

Wes Bos

I definitely have had those problems, but I've alleviated that with Yeah. Yeah. Me too. I've rid Firmly

Wes Bos

to implicit, and I don't like it because sometimes I I I think I'm gonna turn it off because sometimes I wanna co put a console log or make it variable.

Wes Bos

But if you are writing a function to do something and it's not inside of another function, it's not rid On a click handler in line, I go for the regular, the word function, and I can't stand it when people do the especially

Scott Tolinski

file inside of that. No way. No. Thank you. Yeah. Versus Code And, It's EVT or EV stuff. I just did a search in my code base, and we only use e in my code base. I would have guessed that I half and half did it, event and e, just because of, Yeah. It's a must have. I you know what? This is sorry. This is so off topic, but We we had bought a fridge from Lowe's, and they've now tried to deliver it 3 separate times and a failed spectacular on all 3 times. And the 2 times, I had to take apart our current fridge to get it rid Take the doors off of the fridge, the current one, so they could get it out because if you don't have it properly prepared, Lowe's isn't gonna take it even though you paid for it. I hate Lowe's right now, so I'm very angry at this. So either way, I hate to take apart our fridge, take the doors off as fast as possible. So I I got these adapters that are for my drill, plug into a socket, And, oh my god. I was like, why didn't I have this before? speak to me. I mean, I've never written code. Like, if I'm writing FOOPROP ass, what I'm not doing is I'm not I'm more focused on, like, the syntax, the the letters that I'm typing. Right? But I'm not necessarily focused as much on the concepts Yeah. Which is like, Hey. I'm checking to see if this dog exists. Does dog exist? I mean, that's just way more they always just have the correct name. So why Show

Wes Bos

Drop down, and I have a file called drop down dot j s. That's totally fine by me because it is much more descriptive Even with the double drop down in that thing. So Same z's. I do not like index.js.

Scott Tolinski

Create a pre filtered variable upwards in the component somewhere else.

Scott Tolinski

That's just about it. So, like, for me, if I can see all of my rid Code based correctly indentation,

Wes Bos

The indentation. Yeah. You maybe it's based on my theme, but, basically, the the indentation

Scott Tolinski

So there's there's 2 ways of doing this the way that I see an index dot j s file being used. An index dot j s file could be, say, like, component name dot j s versus component name forward slash index dot j s. Both of those imports are going to look the exact same on the user's end. When you're importing that, they're gonna look the exact same because rid When you have a folder, you import from that folder, it automatically looks for the index file. Now me, personally, variable names and examples.

Wes Bos

and it's awesome. I can't believe how awesome it is. You gotta keep the They have

Scott Tolinski

visual. So Yeah. But, for this one, I'm I'm firmly in the camp of, rid I like text editors. In Versus Code versus WebStorm, sure. There's probably some things that WebStorm does easier. Do I have a hard time occasionally getting the debugger to be, as friendly and nice as I want it to be in Versus Code? Sure.

Wes Bos

rid is equals open angle bracket. So I've stayed off of ligatures That's crazy. For my own. And I don't know that it's a big deal for

Scott Tolinski

in level of tutorials code base, and I've been slowly renaming those to be, you know, tutorials resolvers because I've just gotten so rid Tired of files that have been named the same thing. They're not the same thing. They shouldn't have the same name. It's so tough for me to to navigate some of that stuff. So if you have a 1,000 index files, that's gonna get really Thinking obnoxious really quickly. And, also, it's just an extra file you have to create or an extra, like, nested folder structure you have to create. Rid. There are instances in which I do use the index dot j s, and I use them in Beryl files that they're called. A Beryl file is basically an index file that Imports a bunch of other files and sort of acts like a module endpoint he's like he looks You know, Oh. Oh, I couldn't Oh. I've only ever heard that term in term of use of, like, a pocket hole cutter, rid In Out Pocket. Oh, yeah. Like, a jig is just like something that you make so that you can consistently Now,

Scott Tolinski

administrator can manage the account, and everybody can have an account. So if you are A developer who works for a team and you want your team to sign up for LevelUp tutorials, At the end of the day,

Wes Bos

was working on Simple, easy to use, super clean, great UI But today, we're gonna do

Scott Tolinski

chunks and does this, like, really neat thing where, basically, Next one's going to be the use of, rid I'm gonna call this a generic name instead of a descriptive name instead of TypeScript generics because king goofball.

Wes Bos

Mhmm. And it it takes them from being all on one line, and it puts them

Scott Tolinski

that's usually pretty good because they they have a lot of battery, a lot of energy in those batteries. So I can get several moes out of one charge of my battery and stuff like I mean, the products are really good. So I have been very into this brand. I will not suggest buying them from Lowe's because that's where they have a deal from. So I could have a, a link to Amazon or something like that. But these products, again, I have the lawnmower, the weeder, the, the leaf blower, and they're all re Hyperpowered. In the past, I've had either gas or crappier, like I mentioned, BLACK and DECKER ones that just didn't have the power, but, like, All of these things are the most powerful power tools, yard tools I've ever used. They are just smelling fresh cut grass as you cut the grass. That's the best part.

Scott Tolinski

make sure you send them to level up tutorials.comforward/pro,

Topic 2 27:16

Code editor preferences

Wes Bos

like, legit

Wes Bos

for TypeScript dev because it comes

Scott Tolinski

Rid definitely something that I I it's not it's a nonzero factor, you know, in in my decision.

Wes Bos

Because it is hard to use, and they've invested a lot of time, and they're really good at it. And then when somebody comes along I'm a big fan of that. So I think 120 is the sweet spot for me, DSM, ES modules, where you highlight what is it called? Let Look it up.

Scott Tolinski

It does not look as nice as Versus Code. And if if that is, like,

Scott Tolinski

espresso machine, the grinding it, and going to Ethiopia to get the coffee Oh, yeah. It drives them crazy. Rid Right? And oftentimes, people just see this like, well, maybe if you learn how to use VIM, you would like it. And it's like, yeah. Sure. Maybe if I invested that time, I would I would learn to like it as well, but I'm perfectly productive

Wes Bos

And it makes amazing barbecue, and it bothers, Oh, man. That's gonna bug me forever. I can't find the word, but there's a special word for like it when you chain methods.

Scott Tolinski

You know what, man? You're I don't know if you think That you're helping or you're being clever or that, like, people actually want to hear that. Nobody cares. Nobody wants to hear that. Like, Can we just really you know, if if somebody's sharing a Versus Code tip and and you don't use Versus Code, guess what? You don't gotta you don't have to say anything about it. You don't have to tell you don't have to to push your your VIN on other people because everybody wants to use it. I understand where these VIN people are coming from

Scott Tolinski

that Jared Palmer had tweeted out, and I retweeted it. And it's like so

Scott Tolinski

if that's stupid yeah. I get it. That's stupid. It's a text editor. We're programmers.

Scott Tolinski

obnoxious when somebody comes in or just use Vim.

Wes Bos

burning wood,

Wes Bos

The Nespresso. Like, have you have you had coffee from an espresso? I have. Yeah. We have a Nespresso.

Wes Bos

It's really good. Yeah. And

Wes Bos

it's It's all been and it's just this little, like, puck that you you pop in there, you press a button, and it makes really good coffee. And that drives People with the, like, $4,000 they will first import higher. So I think With some help in the text editor,

Wes Bos

Something like that. It's usually because it's pretty good. But I've tried Vim many times over my career, not for me, especially as someone who does tutorials. And now especially console log something or create a variable before that thing is high,

Topic 3 00:00

Transcript

Wes Bos

opinions ever.

Scott Tolinski

are that that give me this map, but sometimes I get an email that says follow along, and I click and make I wish that we had that. That's awesome.

Wes Bos

opinions Alright. That's it. Thank you so much for tuning in to the Bike Shed today. If you've got your own ant hills you die on, tweet us at syntax f m, and we will catch you later. Peace. Peace.

Wes Bos

that developers have and rid Why we're sorta sorta gonna explain, like, why people have these opinions and and then go into what our opinions are, which this might be the biggest

Wes Bos

JavaScript rid Obsession replay, and third one is Mux rid. For people that are learn obviously, you'd know you're doing it, and people don't don't complain all that much. No. One one of the things we had here is the usage of a fancy font. I really struggled to read your code samples due to your fancy font. When I picked that font, I I taught with it for 2 different, Like, 60 people, and I said, like, hey. Like, what do you think? Is this hard to read, or does it provide a little bit more context? Like you said, Scott, the The cursive and the colors that those can provide more information,

Wes Bos

for streaming your video into your platform. Talk about all of them prior to the episode.

Scott Tolinski

hedge trimmer Yeah. Videos. The gratify. Rid Yeah. Satisfying.

Scott Tolinski

I have a new hedge trimmer coming. I don't know how exciting that is to you, but Very. I have a new new bag. You know, I have that whole crappy Black and Decker one. Like, ready. It's basically a kid's toy. The hedgehog. That's what we have. I don't know if it's or is that what it's called? Because I don't know if that's that's what I have because mine is basically like a children's toy. You know, like, for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop rid from the same folks who make, TypeScript. Yeah. I like Versus Code so much. And even just, like, just on Friday, I retweeted I almost said stupid, and I don't wanna call it stupid. But, React lazy requires your exports boards to be default, and we use React lazy. So anytime I have a component that's lazy imported with React lazy, then I have to have it be the default import even though I'm not happy about that. Yeah. When I first saw this article maybe, like, a year or 2 years ago where somebody I forgot what the article was. Basically, it says you should be using named exports for everything.

Wes Bos

these are some some spicy,

Scott Tolinski

yard products that stopped working after a year. Although, I've had it for, like, 5 years, so I'm I'm finally Getting an ego one to match the rest of my battery setup, and, yeah, I'm just using primary is that You're describing what the color does, or I always refer to it as, like, the color's intentions rather than the color itself. Yeah. This is a little bit better for theming and things like that. However, Some people say, well, this is the this is the site's blue, so let's just call it the blue. Wes, what do you do? I think I what I do and what I should be doing It's 2 different things. So I primarily use

Announcer

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos. Welcome

Scott Tolinski

spicy meatballs here. Yep. We got some man, one of those is called Honeycomb when

Topic 4 12:03

JavaScript exports

Scott Tolinski

really heavily into named exports Every single tutorial series on the site is on sale, so head on over to level up tutorials.comforward/pro.

Scott Tolinski

because if one thing gets re Change somewhere. Right? Let's say you have a React component that's a default export. Yeah. That component name gets changed within the component.

Scott Tolinski

you can just rename that thing willy nilly on the import.

Scott Tolinski

If this thing is a named export, you change that name, your side's gonna break, Unless you, go ahead and change the other one. So me, personally, I've definitely been moving Now my

Scott Tolinski

And

Scott Tolinski

You then have to go hunt to find the export.

Scott Tolinski

exclusively for just about everything With the caveat there being,

Scott Tolinski

Make sure anywhere that you're I mean, you have to hunt the imports anywhere that that's been imported. You then have to Keep those names up to date in sync.

Scott Tolinski

that is, to me, a bit of a foot gun, especially if you're trying to keep things consistent

Scott Tolinski

explicit for the name. It can be renamed upon importing, but It's explicit

Topic 5 13:28

Default exports

Wes Bos

I And don't use default exports. I was like, come on. That's silly. But the more I, like, sort of rattle that around my brain, I'm thinking, yeah, the rid. The auto import works a little bit nicer because it knows what to call it. And if you wanna refactor that thing, then that works really well because it is explicitly named, like Scott said, hex, or something different? A couple years ago and put in little retaining walls. We don't have any hedges, but I often watch, like,

Wes Bos

export of the word default, Next one is, if you are declaring a function, do you use a regular function Where which is just the word function. Hey is the name of the function. Do you use an anonymous function and stick it in a variable? So const hey equals function, rid. Or do you use

Scott Tolinski

God. So, yeah, not only is this something that I do do, and I really I really like rid My, Rid Sign me up. That's me. Yeah. But, yeah, I do prefer my import sorted. It just keeps it nice and more organized. I can see at a glance especially, we use a lot of, like, aliased paths, I have always liked this. I mean,

Scott Tolinski

my import started. I'm doing this by hand, which I'm just feeling like a total goofball right now. I'm feeling like, Rid I prefer chained. I don't know why. I I just don't mind, especially, I'm on board with that. Yeah. You know what? Rid. I would never have a rule Socket anything is just so annoying, and if you hook it up to a drill, then it's not annoying. Rid So I don't know. Yeah. Let me just tell everyone who's listening right now, you can get them for, like, $3 Would that be better in WebStorm? Sure. Does it make up for the cost, like the actual rid. A Versus Code tip about collapsing HTML,

Scott Tolinski

in any of my tutorials, However, the colors are all changed to be, like, named colors.

Wes Bos

your JavaScript Dependencies that come from your node modules, things that you npm installed, some sort of update a couple months ago where the themes a gas powered chainsaw, which it is not. So you have to be careful. You don't Cut your leg off. Yeah. Yeah. That's good to say. I I can't imagine why that would be. That sounds just as scary. I'm gonna sick pick a tool as well, and these are just rid. I'm not gonna to Syntax, the podcast with the most controversial max length. The reason why we had that was because of, Like VIM and old, like, monitors, and we didn't have auto we didn't

Wes Bos

everything

Wes Bos

Alphabetize them or something crazy like that. This is one that I do only because

Wes Bos

And if you have a local file import in Mixed up with some of your node modules imports, then when you hit save, it will just reorder it for you. And I I find that to be pretty nice, That's not a a hell I die on either. Wait. What was that that import or that changes them for you? It's an ESLint rule. It's called sort imports, with Something that is so much easier to use, and it it looks like a toy to them. It frustrates them because somebody is happy with what they're using. Rid. I I have the same thing in barbecue land. We always joke about, what is the easy bake oven? The Traeger grill. These, like, pellet grills. You plug it in and you Bluetooth app it,

Scott Tolinski

then we keep those first. So we do NPM packages, localized packages, and then relative imports, whatever. So Next one is going to be,

Wes Bos

name imports for you, which is rid Kinda neat. So if you import a and b in the wrong order, it will reorder them. So, like, why not? It's it's doing it for you. Right? So it's it's not any cognitive load on me. This is something I do by hand right now.

Scott Tolinski

the usage of foobarbaz animated GIF previews, me, those ligatures where it combines those 2 fonts into or those 2 So I was like, okay.

Wes Bos

which is really odd. So So that's just like another another one. So I found probably in the last 6 months or so, I've changed my tune on this and said, yeah. I think, And, also, just the the fact that you can export multiple things and name them that that exact thing,

Scott Tolinski

rid Literally, the only time I've ever written that code was when I had my 1st Google interview, and they had me do, like, a just basic test when that's been renamed upon importing, where a default export, and many times, we have the event that's passed into the function that's called from that event. Right? Yeah. And what do we do? How do we name that event?

Scott Tolinski

And some people prefix their alias paths with, like, amp or, the at the at sign, and, like, then a bunch of packages Started name spacing under the at sign. So it's like, well, I guess that's not really that that good of a signifier that it's a local package then. Rid So ours, we don't prefix it with anything. That would kinda help some of that stuff stand out, so I I like to keep all that those separated.

Wes Bos

And it will just sort them for you. It will also alphabetize to understand,

Scott Tolinski

and I probably will not lie because I didn't learn that way. I mean, I've I've, rid When I learned JavaScript, people were using math to teach it, and that doesn't I don't know. The only time I've ever done a foobar baz,

Wes Bos

that is local to your project, and you sort of separate those 2. And I think some people even go further and

Wes Bos

I have found myself your IDE didn't have line wrapping back then, and Monitors are much larger. I don't use line wrapping. Do you? Yeah. Oh, absolutely. I hate horizontal. So maybe that's maybe that's my problem. Maybe that's the solution here. Yeah. You if you find yourself having to horizontally scroll, then just turn online wrapping.

Wes Bos

using named experts rid more and more. It's it's not an absolute rule. I don't I don't you'll find me doing default exports still a lot, especially in my tutorials and whatnot, but I definitely see the value in that type of thing. Yeah. We've largely just moved to it being a rule, but it's not like re There's not some mean things stopping you and preventing you from pushing changes if you're using a default export. It's kind of the only honor system or something like that. Rid Not not too intense. Yeah. Next one we have here is also about, JavaScript imports, and that is import ordering.

Wes Bos

Sometimes you find yourself importing the named

Wes Bos

So So some people, when they import their dependencies,

Wes Bos

my ESLint does it automatically. So I have the setting on ESLint, or maybe it's prettier. One of those does this.

Topic 6 25:00

Variable naming

Wes Bos

about Versus Code,

Scott Tolinski

little things. Yeah. Interesting because I syntax is a developer first video platform.

Wes Bos

value dot rid Now is not a method. You know? Mhmm. Next question we have here our next, thing is

Wes Bos

I'm writing a lot of map filter reduce,

Scott Tolinski

rather than time to next event, But I I will give it a meaningful name even in those map situations.

Wes Bos

these are the the 3. Anytime I post anything

Wes Bos

know? And if you were to put a little bit more description in it and same thing with when I I do a lot of vanilla JavaScript, I always like to put l at the end or even element so that, you know, something is an element without even having to hover over it. Even TypeScript will give you types, but It's nice to know. Okay. Items is an array of data, and items l is a div or unordered list that's actually in the DOM. So I agree as well. The only case I don't agree is

Wes Bos

You also get better errors. That's the thing I didn't,

Wes Bos

rid I get the WebStorm boys in my comments being like, WebStorm could do that forever. Why don't you use WebStorm? Let's talk about that. Webstorm. Webstorm. Webstorm.

Wes Bos

sometimes

Wes Bos

And I chain them onto each other, and then I've I've sometimes I just say x because it's nice little inline implicit return. But that's not for code that will be sticking around a long time. It's just when I'm doing quick little

Wes Bos

the editors, rid Versus Code versus WebStorm

Wes Bos

rid say as well is that if you have an error and it says time or x, it's better to say time to next

Wes Bos

And I get the feeling that Webstorm is awesome because usually when people are so emphatic about like

Scott Tolinski

I will always still name it, like, what it is. It doesn't have to be a long name. It could be time

Topic 7 06:51

CSS variable naming

Scott Tolinski

theme. And in that case, I just reassign the colors. You know, this is the new purple. This is the new teal, And the the thing here looks nice. So I'm a big, big proponent of, doing it that way. I like it. I also like doing these shows because it

Scott Tolinski

I don't know. There it's so funny because there's, like, 800 different ways to skin this cat, and, that's e g o, re Ego to enforce it either way because it like like you said, it probably would get very annoying very quickly to me. Yeah. It's annoying. Yeah. So I I don't have a rule for that, but I I do I I use my discretion, which, you know, may be better or not for standards. But, Oh, that's so sweet. I don't know One in which the parameters Making our lives better. Yeah. For the most part, if you disagree with us, don't hate tweet us. We we we everybody's got different opinions. That's the whole point of this. Don't get into arguments about this stuff. I put out a tweet to ask what everybody's rid The context in which that event took place, A jig.

Wes Bos

And white with HSL, and you only have to change one value in HSL by default. Rid I I think when we got e s 6, people went a little crazy with the arrow functions and did everything, and I'm sort of swinging back the other way. Arrow functions are awesome, and I use them for rid. Lots of inline stuff or little implicit returns

Wes Bos

old habits die hard, and I've been using RGB for a lot of that as well. Yeah. Rid Do you default it to RGB, HSL, Today, we have a show on bike shedding. We did a couple years ago, we did a tiny little hasty on bike shedding things like tabs versus spaces.

Wes Bos

A value that needs to be semi transparent.

Wes Bos

and 0, and that would be black.

Wes Bos

colors. If you are just by hitting command space or command period, and it will switch it over. And I I was, like, tweeting. I was like, somebody should make a a extension that does this, and rid. Someone's like, it does. Versus Code does do that, and everybody was really surprised. So I'm the same way with you. If it's a one liner, I think implicit return is fine.

Scott Tolinski

for our colors. That way, I can just tweak the lightness values. So I mean, I have all that stuff there. I just Don't find myself coding it by hand that much, but, yeah, I I I totally agree with you. One fun thing you can do with HSL is that does Baz exist? Who what's who's Baz? What's Baz doing? Is Baz a good dog? Like, I don't know. Not for me.

Wes Bos

Rid So maybe bike shedding is good. Yeah. Right? Totally.

Scott Tolinski

HSLA? Rid. 0.5. Okay. That's easy. Right? But why not HSLA? I I I have no idea. All my variables are set with HSLA. I even have variables for, like, The hue and saturation

Scott Tolinski

those sort of things. And then I'll even go further and have, like, button colors set to accent and stuff like that. It makes theming a heck of a ton easier to be able to just change the accent site wide, especially if you're using CSS custom properties, Which get updated automagically rid I don't see the the benefit in using it. I would rather just use some some more real world barrel file that slurps up all of those exports and then exports it from 1 file. That way, I can just import blank from elements Rather than having to deal with any of that stuff. But if this is the the manner in which you're just having a folder of the component name and then an index I'm spending all day every day in Versus Code. I gotta like the way it looks. I gotta be able to theme it. I gotta be able to change it. It's Comfy home for me, and, you know, that comfy home has gotta be a comfy home. So I I that that is a stupid point, but I would like to say that. I think it is.

Scott Tolinski

Like, the purple becomes Rebecca purple, and the the teal becomes the literal world word teal. So it's like the The color, the named colors, the web safe color version of our current, thing that you do when you hover over a video play bar, and it gives you a little thumbnail? Well, you can do all that more with Mux, and it's Just so, so effortless and easy, and you don't have to

Wes Bos

specifying a color,

Scott Tolinski

because my brain just,

Scott Tolinski

Reason being is that a named export

Scott Tolinski

Yeah. It is.

Scott Tolinski

that's so funny that you say that because I moved to HSL primarily through our entire system. But you are so right. Anytime I reach for hand coding rid color.

Wes Bos

would be white. And so I always like including those fun little tidbits in my CSS because it makes people stop and go, Wait. Why did he do that?

Scott Tolinski

I I primarily do so first, I define the colors. Rid I always define my colors, especially for, you know, blacks and, you know, just the standardized sort of stuff. But then I take those colors and then redefine them into rid This system, which I use as the intentions, whether that's primary accent,

Wes Bos

And then a 100% would be a entire show on bike shedding things were. What what were the I said, what are the anthills you'll die on? And I said, don't start fights and replies. You are a nerd. And sure enough, fights were started immediately.

Wes Bos

HSL value, And that's because

Wes Bos

If you're doing just white and black, the first two numbers of HSLA don't matter. So you could set them to 4 20, 69%, which is Like a chainsaw on a pole,

Wes Bos

So I want to be using entirely HSL, but

Wes Bos

I always go to RGBA for some reason, and I don't know why because it is very easy to generate black feeling the coals barbecuers because it's much harder, and they spent a lot of time figuring that stuff out. And when somebody comes along With this thing that's much easier but still produces the same output or, in some cases, a better output than a frustration. Same thing with,

Scott Tolinski

I almost always do RGBA

Wes Bos

Sometimes you just do something forever, and then you don't you don't think about it. And then you go, oh, I didn't realize you could even have an opinion about that. You're like, oh, it makes sense. Maybe I should be doing it that way.

Scott Tolinski

The arguments for in Versus Code, and sharing a tip about Being more productive in Versus Code is not like an opportunity to to be like, well, you could be productive too if you put all this time and energy into learning something completely different. You're like, no. I don't want to. You know, let me I like clicking things sometimes. Yeah. Sometimes I do like clicking things. Okay? and, like And u. And u. You know what? That rid Has that single handedly made generics

Scott Tolinski

throughout your entire site when you change them. So also can be scoped really nice and easily. So me, personally, I always Set the colors first, and then I use those colors to set the intentions. But then if I'm theming, I'll override. Sometimes I'll override the colors. For instance, we have a nineties version of level up Tutorials and our theme, which is basically our same color palette.

Topic 8 05:29

Event handler naming

Wes Bos

character variables. I don't either. Unless it's I for, like, accounting increment variable. But I think E is is totally fine because, like, I think it's a standard enough a anonymous arrow function stuck in a variable? So const hay equals an arrow function.

Scott Tolinski

that it it is an event. Yeah. And I think, Specifically in React land, most of the time you're you're looking at the events. It's like event dot prevent default just on a form element or a click or something. You know? It's like, In that case, I'm just gonna take the the easiest route and just do e, so I have I have no problems. Alright. Next one is going to be rid CSS variables, whether this is custom properties and or Sass variables, anything like that, oftentimes, you'll see people using accent primary, whatever, red. Or you'll see them described as a color, red, blue, green, black, whatever.

Scott Tolinski

you know, a narrow,

Scott Tolinski

with you. E in examples. I have never read. Used foobarbaz Beginner React or React for Beginners. Check it out. Use coupon code syntax for $10 off. Sick. I am going to shamelessly plug 2 things here. The latest course At the time you're listening to this, not next week, but the right now at the time you're listening to this, latest course is going to be code automation

Scott Tolinski

or event?

Topic 9 31:12

Generic typing

Wes Bos

For me, because of how it looks in my code editor. Yeah. And I typically name my

Wes Bos

versus actual types in your code base. Ready. And to me, that doesn't matter because Versus Code released

Scott Tolinski

descriptors for generics in TypeScript like t that sort of thing. That's really nice and easy, nice and simple. Then I don't have to way more confusing to me than, re level up tutorials at .comforward/pro. We have a new tutorial course every single month. Tons and tons of stuff, So you'll get access to the entire back catalog as well as 12 new additional courses over the course of the next year, as well as a ton of additional features and tools. So check it out. Leveluptutorials.comforward/pro.

Wes Bos

And it and oftentimes, it's not saving me anything. Yeah. Generics are probably one of the hardest things of TypeScript

Scott Tolinski

in ways that you've never debugged before

Scott Tolinski

Or maybe perhaps ways that you've debugged before, but only your in your local environment when you're causing error yourself because this gives you a scribble video replay with the network tab. It gives you the console. It gives you the dom. It gives you all of those things, and you can scrub back and forth and see exactly what happened, why it happened, where it happened, and

Scott Tolinski

single variable, I'm watching it on the UPS the experience has been absolutely rid Man, I would kill for indentation based syntax here to prevent things like that.

Scott Tolinski

anything else because, like,

Wes Bos

Your theme can know about what is a valid type and what is an invalid type, and it will allow you to style those differently. So In my Cobalt 2 theme, it's very clear to me when something is a generic variable either my color picker or my design program, I've set it up so that it will default to HSL.

Scott Tolinski

This gives you a session

Scott Tolinski

That's just so not real world. And when I do generics myself,

Scott Tolinski

Sign up, you'll get 14 days for free. This is one of those services You really have to see to believe because it is so so stinking cool. And, actually, Wes, they just got a new little homepage With a little isomorphic three d design here, some

Wes Bos

yellow and not italic. So if that's the reasoning behind it, that's been alleviated unstable.

Scott Tolinski

types with capital letters. Start with those with capital letters, and I typically name most of my variables starting with lowercase letters. So that's pretty easy for me to to see there, but, that's typically what I do tip rid Typically. I also typically if I wanna solve bugs, I like to have a visual representation of solving those bugs. And so to get a good visual representation of Solving those bugs, one of our sponsors today does such an amazing job of that. I'm talking about LogRocket.

Scott Tolinski

read. In TypeScript's own documentation along with just about thousands of examples that you find online, people just start throwing

Scott Tolinski

t as a generic exam. I don't get it. So I don't use t. I don't use u. I don't use single variable generics. That is very hard for me to read.

Topic 10 03:10

Hedge trimmer jigs

Wes Bos

Wes Bos, what do you do for this? I either use e or event. And I asked this on Twitter, and it seems that, I don't know. 60, 70% of the people use e, and then a majority of the rest use event. Very few people use EVT or EV. I was just copy pasting some code from Mozilla docs,

Scott Tolinski

whether you're preventing default or capturing some information about what that event is or or just basically understanding The the the bad brand of, like, Black and Decker, like, entry level

Wes Bos

for some of them, we we'll have to playing, like, the differences between the 2 and why people might think either side, and then we'll also dive into what our own opinions are if we even have them. We should also say this is bike shedding, and bike shedding means that with the implicit return, re It's very clear that t u h, those are, like, variables that need to be passed in The files, if you have the same name. So if you have 2 index dot HTMLs or 2 index dot Spicy kielbasa coming up. Yeah. We are sponsored by 3 awesome companies today. First1 is Prismic, headless CMS. Second1 is LogRocket, Versus Code extensions everything. It's unreal. My brother-in-law has the pole saw,

Wes Bos

shape and size something over and over again.

Scott Tolinski

rid. And, typically, and your Team administrator can your your company can pay for it. Your team

Scott Tolinski

Rid We should make a a jig dot CSS.

Wes Bos

and it had EVT on it. I was like, come on. Yeah. Come on. You Yeah. Took 1 or the they're not sorta halfway through.

Topic 11 02:33

Hedge trimmer guides

Scott Tolinski

A jig.

Wes Bos

Yeah. And, like, you can like, people make these, like, little,

Wes Bos

a guide or something? Yeah. There's a word for that where you have, like, a guide that you reuse over and over again.

Wes Bos

I I think I found it. Hold on.

Wes Bos

like, pieces of wood that they put on them. What do you call that? Like a is for developers, and then you could click on a button that says for non developers. And it shows you code on the home page as though you can use Graph

Share

Empowering developers for over 286200318851 milliseconds!