0:00

You're listening to

0:02

The podcast with the tastiest web development

0:05

treats out there. Strap yourself in and get

0:07

ready. eight. Here is Scott Tielinski and

0:09

Wes Boss. Welcome to the

0:12

podcast with the tastiest web development treats

0:14

out there. Today, we've got good

0:16

one for you. We kinda put two shows

0:18

together. We had this idea of, first,

0:21

a petty preferences show,

0:23

which is just things, tabs, and spaces,

0:25

and whatnot, and we'll talk about all of

0:27

that. But then there's also, like, a lot of stuff, which

0:29

is, like, I actually prefer function

0:32

definitions over an arrow function

0:34

in a variable. And there's some real

0:36

reasoning behind that. So Scott and I are gonna

0:39

go through a list of probably twenty different

0:41

things, and we're gonna say what

0:43

we prefer and as well

0:45

as, like, why we prefer that,

0:47

which is Generally, you

0:49

try to side with more readable code over

0:51

being a hotshot. So

0:54

we are sponsored by Therrials from companies today.

0:56

lenode, cloud computing developers

0:58

trust, log, rocket, JavaScript

1:01

session replay, and FreshBooks cloud

1:03

accounting. We'll talk about all of them partway through the

1:05

episode. How are you doing today, Scott?

1:07

I'm doing good. Just hanging out.

1:11

Launching our site this

1:13

week.

1:14

So Wow. I'm just in berserker

1:16

mode here. Just, you know,

1:18

we we have a a friend of

1:20

mine doing q and a for us. Is

1:22

it QNA or QAQNA

1:26

Quality. Oh, you're no. No. Q

1:28

a. You're right. Yeah. QNA

1:30

So Question is the answers. I

1:32

know I always say q and a. And then

1:34

just as I was about to say that, I was like,

1:36

wait a second. It might not actually

1:38

be q and a. We have a hard to

1:40

mind doing QA for us, and

1:43

it's simultaneously really

1:46

great to just have somebody go

1:49

through and find all these things, but, like, it's also

1:51

super depressing to see. So

1:53

many things pop up after

1:55

you're feeling like, alright, I'm ready to go.

1:57

And then your to do list has gotten down

1:59

to, like, four

1:59

more things left and then now it's populated.

2:02

it, like, crazy again. So Totally. I

2:04

I much prefer though, like, a a person

2:06

that you've asked to do it, then someone,

2:08

like, being,

2:09

like, hey. Like, what's up with this tweet

2:11

tweeting a screenshot or whatever.

2:13

That always happens. It's like, you I

2:15

worked, like, eight months to launch a course. and then,

2:17

like, the first reply is, I think it's broken

2:19

and there's, like, something, like, weird. Yeah.

2:23

I know it's it's so hard to find everything,

2:26

you know, especially on a large project. So,

2:29

yeah, that's where I'm at. I I sound exhausted.

2:31

It's I'm a

2:32

little exhausted,

2:33

I gotta say. Yeah. Alright. Well,

2:35

Let's let's get on into

2:37

it. First one is function definition.

2:40

There's many ways to define a function

2:42

in JavaScript. Probably the two

2:45

Most popular ones are if

2:47

you're just defining like a top level function, not

2:49

a method or ever. Do you do

2:51

what's called a named function? You write

2:53

the word function and then the name of it,

2:55

open up parenthesis, open up

2:57

curly brackets. Or do you

2:59

do

3:00

const or var or let

3:03

the

3:03

name of the function is equal to

3:05

and you do a little arrow function inside

3:08

of that. I am on

3:10

team Like, there's

3:12

certainly aero functions have their use,

3:14

and I'm not pooing

3:16

them at all. I use them all day long,

3:19

but when

3:19

you are defining a regular

3:22

ask function, I always

3:24

prefer the first, which is a named function

3:27

over sticking in and variable. I've

3:29

never felt good about that. What about you?

3:31

Yeah. I'm

3:32

pretty much the same way. However, I

3:35

will say that they're I mean, I would

3:37

maybe not pretty much the same. I'm exactly

3:39

the same way. However, there has been

3:41

a recent kind of thing that's

3:43

popped up in my code base, which I wonder

3:45

if you've noticed this. So

3:48

in in TypeScript, you

3:50

can define the inputs, the outputs,

3:52

like everything about a function as

3:55

a type, and then assign

3:57

it to the function much more

3:59

easily using the cons

4:01

to do something way, even

4:03

if you're not using an arrow function. If you're

4:06

saying cons to do something is equal to,

4:08

function do something. You can

4:10

like, if you're assigning a function

4:13

to a variable, then you

4:15

can type that entire functions

4:17

inputs and outputs in a single

4:19

time go -- Yeah. -- rather

4:21

than doing them separately, which it

4:24

can be advantageous to

4:26

do that. And also I found it weird that you

4:28

could do that with function

4:31

definitions, the the first type of

4:33

function definition. you can do that

4:35

using j s dock style types,

4:37

but you can't do it with

4:38

normal types of style types. Yeah.

4:41

That's that's a really good point. I've never thought

4:43

about that. Yeah. It's a little weird. But,

4:45

yeah, it's one of those things. Yeah.

4:47

Yeah. Then I I like, I'm trying to think, like,

4:49

what what are what would be the downside to doing?

4:51

That way, I guess you couldn't do function overloading,

4:53

which is probably not something you're using

4:55

every single day, but -- Yeah. -- if

4:57

you wanna function overloading in TypeScript is

4:59

where you define multiple signatures

5:03

to your functions. So you say, alright. This function

5:05

could take in a number, or

5:07

it could take in a string and

5:10

a a

5:12

bullion value. You know, like a there's

5:14

two different implementations of this function and

5:16

all the logic is contained inside of it. And

5:19

based on what they pass, we will do different

5:21

things to them. Yeah. So typically

5:23

yeah. Yeah. Yeah. Typically doing the

5:25

functions. Well, the other thing I was gonna say,

5:27

sometimes people say, oh, named

5:30

functions are better because

5:32

putting a arrow function in a variable,

5:35

that's technically an anonymous function.

5:37

And it used to be the fact that debugging

5:39

anonymous function was hard. They were anonymous,

5:42

but all dev tools

5:44

can infer the function name

5:46

from the variable. So it's that's not a

5:48

thing anymore. Yeah.

5:49

It is funny. I've never really I

5:51

mean,

5:51

I have had that issue. I

5:53

will say though, if I am having

5:56

a callback function a

5:58

hundred times a hundred percent of

6:00

the time, I am using just

6:03

a straight up arrow function in that a callback

6:05

in an anonymous arrow function. I know

6:07

this is not really the same question,

6:09

but in in use cases

6:11

where you could just use a function as

6:13

well. I'm I'm using an anonymous

6:15

error function always in callbacks just

6:18

because I I like the syntax a

6:20

little bit more. It it to me, it's cleaner.

6:22

I know what it's doing. It

6:24

could be a little bit mysterious, especially when you

6:26

get into, like, multiple callback

6:28

layers deep. If we're we're talking about being

6:30

a hotshot here, I think sometimes

6:32

people do do that where they have a callback, that

6:34

calls a callback, that calls a callback, and

6:36

you're just like, whoof, what is going on here.

6:38

Sometimes I might break those up into individual

6:41

functions, but that's, yeah, that's its

6:43

own its own argument, I guess.

6:45

Next step here is going to

6:47

be file paths aliases.

6:50

So whether or not you have

6:52

an alias for a directory where you can

6:54

then access that file via the

6:56

alias and then the file path, making

6:58

it sort of an absolute path

7:01

versus using the dot

7:03

dot or traversal,

7:05

like, file Syntaxfm, traversal to relatively

7:08

look up a file, specifically done

7:11

in imports or loading

7:13

images or any sort of things like that. I

7:15

personally am always using the

7:17

aliases because it's almost

7:20

always cleaner to me and the

7:22

ability to see. what's

7:24

an a or, like, exactly

7:26

where some things living. And and specifically,

7:28

you know, I'll define my aliases

7:31

with a dollar sign in front of them. So

7:33

dollar sign DB forward

7:35

slash whatever. Everything then

7:37

dollar sign DB is going to be a

7:39

database method. Everything in dollar

7:41

sign elements is going to be one of my root

7:43

elements. Everything in

7:45

dollar sign graphics is going to

7:47

be images. So that's kind of how I

7:49

do my my file systems rather than

7:52

working with relative paths.

7:54

Yeah. After we talked about this last time, I

7:56

think I've I've had a change of heart

7:58

on it. I think that maybe this is

7:59

is the way to go, especially I'm starting to see

8:02

this concept of import maps

8:05

being more popular. Import

8:07

map is essentially because not

8:10

everything will soon be in

8:12

NPM. Sometimes stuff comes from the

8:14

network. Sometimes stuff is in

8:16

a in a, what's it

8:18

called, a a workspace? Like, you have a NPM

8:20

workspace, and sometimes stuff is in

8:23

a a URL, they're all over the place.

8:25

And if you want to have the nice, like,

8:28

import something from utils,

8:30

If you wanna have that, even though your utels are local,

8:33

then you can use an import map for it. So it

8:35

looks like there

8:37

is a proposal on

8:39

how to do it. In

8:42

JavaScript, Dino supports it.

8:44

So maybe that's the

8:46

way to do do do it. We'll have to do, like,

8:48

a little pace beyond what import maps are

8:50

just to go a little bit deeper into them. But

8:52

Yeah. because I've always just used, you

8:54

know, TypeScript aliases or

8:57

VTA aliases or whatever. I've never

8:59

built into the world of import maps despite

9:01

the fact that it's related to something I love.

9:03

Yeah. I think the

9:05

import spec in

9:07

Dino is the

9:09

same as I have this one from the

9:11

WICG, which

9:13

is the web the

9:16

web incubator. What's the

9:18

c g stand for? Committee group. Committee group.

9:21

Committee group. Committee. Yeah. It's a it

9:23

looks Committee group. Probably. Let's

9:25

just say it is. Oh.

9:27

Community yeah. It's our community

9:29

community group. Community group. Community group. Yeah. That is a

9:31

yes. Community and group kind of mean the same

9:33

thing in some way. So that would have been --

9:35

Yeah. -- interesting. So alright. We'll

9:37

go more into that. Next one is implicit

9:39

versus explicit return. When

9:42

we had aero functions added to

9:44

JavaScript, we added the ability

9:46

to implicitly

9:49

return, which means that whatever

9:51

is after the arrow function without

9:54

curly curly brackets

9:56

to denote a block. you

9:58

can just return what you have

9:59

there. And then you have

10:02

implicit return sorry, explicit return, which

10:04

is just using the using the

10:06

return keyword. And I don't think that you

10:08

should I don't have any rules around

10:10

these other than I kinda think

10:12

if it's a one liner, I use

10:14

implicit. all the time for a

10:16

map filter reduce, I use these types of

10:18

things. Mhmm. If it goes more than

10:20

one line, then I'll I much

10:22

prefer the return. I remember couple

10:24

of years ago, everybody was implicitly

10:27

returning React components, and

10:29

they're the hugest pain in the butt to

10:31

debug. because you couldn't

10:33

stick a console log in there

10:35

or you couldn't, like, make a quick variable

10:37

before it because there was no block. The

10:39

first thing to happen in the function was the

10:41

return statement, and there was

10:43

tricks of console log or

10:45

and and whatnot, but If it

10:48

is more than one or two lines, I go

10:50

explicit all day long. Yeah. I know.

10:52

This is one of those ones where I would

10:54

love to say

10:55

explicit every single time

10:58

because, like you mentioned, it does make

11:00

debugging or adding

11:02

on to if things need to change, you need

11:04

to augment that data. it

11:06

makes augmenting and working

11:08

with that function way easier if you

11:10

just say explicit all the time

11:12

one hundred percent But in

11:14

reality and in practice, I do find

11:16

myself with the exact same

11:19

rules that that you have, where it is, if

11:21

it's a one liner. I

11:22

almost always use the implicit

11:25

return and otherwise obviously do

11:27

explicit. But yeah, it's it to me, it's one of

11:29

those ones where III understand.

11:31

the benefits of always doing explicit

11:33

returns. And if if you're out there

11:35

and you're thinking, yeah, I choose

11:37

the non hotshot approach of using

11:39

explicit all the time. because to me that's the

11:41

non hotshot approach. That's the

11:43

practical approach of always using

11:45

explicit. I get that. Mhmm. But at the same

11:47

time, I just can't bring myself to do it. I don't

11:49

know I don't know what it is. There's

11:51

something about that implicit return for one

11:53

liner. That's really sweet sometimes. especially

11:56

maps. Yeah. You're just doing something yeah.

11:58

Especially maps. You do

11:59

just doing something in it. Maybe there's

12:02

like a rule to have around

12:04

implicitly returning an object

12:07

because if you wanna implicitly

12:09

return an object, you need parenthesis

12:11

and then you put the curly brackets inside

12:13

of that, And then that kind of looks

12:15

like a fun a function block

12:17

and and whatnot. Somebody

12:19

somebody tweeted we asked

12:21

on Twitter, like, what what

12:23

are your rules around this? And

12:26

his name is cause me

12:28

Escapito. He says, I feel like

12:30

a trick. If a trick is common for me and my

12:32

teammates to parse quickly enough without

12:34

having to think about fine, then I will

12:36

use it. Otherwise, I will use the most

12:38

straightforward option. I think that's really important is

12:40

if you are your if

12:42

your entire team understands how

12:44

these things work, it's probably

12:46

fine. Right? But

12:48

Scott and I, I have literally all

12:50

kinds of developers from around the world who may

12:52

or may not understand these things. I have to think about

12:54

that where it's like, I don't wanna create an

12:56

unintentional tripping hazard for somebody

12:58

when they're just trying to learn some JavaScript.

13:00

But also in my own code base, you know,

13:02

there's only a couple of people working in it. We're

13:04

not a large team. So, like, is

13:07

there's no one necessarily to

13:09

check me or, you

13:12

know, we have code styles. We have

13:14

ESLINT rolls and whatever. And I'm sure I guess

13:16

ESLINT and prettier are the things that

13:18

we'll check beyond some of the code styles. But,

13:20

like, sometimes you

13:21

gotta, like, really

13:23

strongly declare what

13:26

these code styles are going to be

13:28

in a code style wicke

13:31

or something about your code base. Otherwise

13:33

-- Yeah. -- you'll just find yourself,

13:35

you

13:35

know, maybe bending your rules here or there.

13:37

Next thing, you know, there are no rules. It's

13:40

free for all. Do whatever you want. Yeah. Tools

13:42

over rules is is the saying is

13:44

have something else enforce it rather

13:46

than yourself. Totally. Tools of her rules. That's

13:48

wonderful. Next step is

13:50

array dot reduce, reverse,

13:53

literally anything else, which

13:56

I thought

13:56

that was a a very funny way that you

13:59

decided to put this in the docs

14:01

because reduce is one of those

14:03

functions that can get unreadable

14:05

pretty quickly. especially

14:07

if people are not

14:09

super experienced with reduce. I

14:11

I can't necessarily put my finger

14:13

on what it is about reduce.

14:15

but it is so hard to at

14:18

a glance look at a

14:20

complex reduce and be like, alright.

14:22

I get I get what's going on

14:24

here. But in the same regard,

14:27

reduce is super handy anytime you

14:29

have a collection of data and you need

14:31

to derive some other data from

14:33

it, reduce all day. I mean, like, for

14:35

me personally, I think

14:37

there is reduces

14:39

one of those situations where

14:41

it's so handy to

14:43

use reduce that -- Yeah. -- you need

14:45

to say Listen.

14:47

We gotta spend some time

14:50

really honing our reduced skills.

14:52

We have to do reduced

14:54

examples. We have to say, alright.

14:56

you know, what's a good opportunity to use

14:59

reduce? Okay. You have a shopping cart full of a

15:01

bunch of products. I wanna reduce this

15:03

down to get a total or something. Right?

15:06

those types of things, those types of small

15:08

examples that you could do other ways.

15:10

But you can really get

15:12

into it with reduce get

15:14

the get that experience under your belt.

15:16

Me, personally, the usefulness

15:19

outweighs the difficult to have

15:21

readness of it. So I say will

15:23

take the hotshot way of using

15:25

reduce over other

15:27

methods. Loops and who knows what?

15:28

Yeah. I am on team

15:31

I love reduce and I

15:33

will use reduce where

15:35

it makes sense. But if there is

15:38

obviously another function that does something like

15:40

that because JavaScript is adding

15:42

new array methods all

15:44

the time. then clearly use that. I

15:46

think where the

15:48

one or the other comes in with me is

15:50

should I use multiple map

15:52

filter reduced functions and

15:54

just chain them all together, or

15:56

should I use a single reduce

15:59

all in one go? And I

16:01

often opt for doing multiple

16:04

maps filter reduce chains.

16:06

I find them easier to debug. I find

16:08

them a little bit more readable over doing

16:10

it all in one go on reduce anytime I

16:12

post code like that, people are like, you know you can do that

16:14

in a single function. I say,

16:16

obviously, I know that, but I

16:18

think sometimes it's a bit more readable

16:20

to just chain them. There's obviously

16:22

perf Yeah. It's gonna there. Like,

16:24

yeah. What's the perf Really? It

16:26

does. Like, if I'm if I'm doing

16:28

one thing, like, what's what's

16:30

the the numbers there? If I'm looping

16:32

over three hundred

16:33

thousand database records

16:35

and trying to figure out

16:38

how many blue cars have

16:40

been sold, then, of course, that's probably a

16:42

really good use for reduce. But in

16:44

most cases, it probably doesn't matter.

16:46

Yeah. It's funny. I've been getting really

16:49

into, like, MongoDB

16:51

aggregations. I was doing a lot of that in

16:53

JavaScript. Right? Like, I would pull the

16:55

data and then I would do the

16:57

JavaScript to transform the

16:59

data how I wanted it to. And,

17:01

like, more recently, I've been doing

17:03

really complex aggregations. And it

17:06

it's not the same thing, but it feels

17:08

like the same thing where I know

17:10

this code is kind of painful to

17:12

look at And I know this code is kind of

17:14

obnoxious, but at the end of the

17:16

day, the perf implications of

17:18

using these aggregation functions

17:20

rather than using yes, JavaScript

17:22

to do it is in that

17:25

game by enough that I

17:27

need to do it. Yeah. I took a

17:29

twenty second map

17:30

filter reduced down to a

17:32

hundred milliseconds

17:33

by moving it to MongoDB aggregations.

17:35

It's unreal. Yeah.

17:38

Next one is using

17:40

a four in four of

17:42

loop. No. No. We're not talking about the

17:44

four i plus plus. Everybody hates

17:46

that one. that for

17:48

i for i equals zero i

17:50

plus plus, there's the only use case I

17:52

ever will use that is when I am

17:54

looping over multiple

17:56

values at once. Most commonly is

17:58

if you have a pixel

18:00

set from a canvas and you need

18:02

to loop over every four pixels

18:04

at a time that's the best use case

18:08

because you need to you get you

18:10

get RGB alpha

18:12

RGB alpha and you wanna you wanna loop over all four

18:14

at once and and it doesn't make sense to

18:16

group them by four beforehand

18:19

because it's literally millions and

18:21

millions of pixels in there. So we're

18:23

talking about the four of and

18:25

four in methods, four

18:27

constant person in people

18:30

and versus using people

18:32

dot map, people dot for each.

18:34

Probably not map because map has a use

18:36

case. Literally, if you just need to

18:38

loop over everything

18:40

is the dot for each method better

18:42

or the for loop better.

18:44

I will opt for

18:47

using the dot for each method

18:49

on the array because

18:51

usually I'm doing other stuff. I'm mapping,

18:53

reducing, filtering, finding

18:55

inside of it already.

18:58

But when it comes to

19:00

doing a sync await, I will always move

19:02

it over to a for loop because

19:04

the big benefit of a four loop is you

19:06

can await. You can pause a loop

19:08

from running inside of it.

19:11

What about

19:11

you? Yeah. Yeah.

19:13

For me, it's I have such

19:15

a weird this is

19:17

it's not something I, like, don't do, but

19:19

I have a weird ad version two,

19:23

not ad

19:23

version f version. I have a weird

19:26

aversion to having

19:28

a variable defined outside of the loop

19:30

and then updating that variable inside of

19:32

the loop. Yeah. If you're doing

19:34

that, then you need you need to be using

19:36

map. Yeah. Well, so for me,

19:38

like, I'm almost always I

19:40

mean, this

19:40

will go around the next one we talk

19:42

about. But I'm almost always creating

19:46

a new variable based on whatever

19:48

I'm doing outside of my map. So

19:50

I tend to not use

19:53

even just loops overall.

19:55

I'm almost always I know that's

19:57

a hot topic on Twitter where people like.

19:59

Why are you doing all this crazy map

20:02

map, reduce stuff when you could just do a normal

20:04

loop. But for me, I

20:05

almost never opt for the normal loop.

20:08

And I don't know if it's just how my brain

20:10

works, but Yeah. I just it

20:12

never feels right to me to do

20:14

that even though I know it's an extremely

20:16

common technique. And oftentimes, it can be way

20:18

more readable. I

20:20

get that. But for me, it's a it feels like

20:22

I

20:22

I like to define a thing

20:24

as a thing, and then I

20:26

if I have a new thing, I have a new thing

20:29

and I don't know the loop where you're just, like,

20:31

looping over and inserting something into an

20:33

existing array or something or an

20:35

existing variable always feels weird to

20:37

me even though I know it's not I can't explain If

20:39

I so I I

20:40

agree with you. I think if you are

20:44

trying to add

20:46

data to an existing data structure,

20:48

that's what your map filter

20:50

reduce are for. But if you need to for

20:52

example, if I need to for

20:55

I have a list of three people, and

20:57

I need to go fetch their or go

20:59

hit their GitHub prof profiles, something

21:02

like that. then that's oh,

21:04

no. That's not a good example because you should probably do

21:06

that all at once. Right? If you just need to

21:08

literally stop and wait for something inside

21:10

of it, I think that that's your best case. I think also

21:12

the four loops got a bad rap

21:14

with VAR because --

21:16

Mhmm. -- VAR variables would leak

21:18

outside of four loops. because

21:20

you we didn't have block scope,

21:22

but Latin cons, they

21:24

our block scoped. And I think there's a

21:26

lot of holdover from people they

21:28

used to it used to be a rule. Don't use four loops.

21:30

They're awful. Functional programming till

21:33

death. Whereas, like, it's

21:35

good it's a good life, folks. Let me

21:37

tell you. I had such a

21:39

hard hard time with that. I don't know. I have,

21:41

like, an async for each and

21:43

an a you know, I have, like, async

21:45

for each. in

21:47

my Like a function that I Yeah.

21:49

Yeah. And, like, that's what I prefer to

21:51

use for some reason over a four loop. I

21:53

can't I can't tell you why. I can't put my finger

21:55

on it. Do it. quiet. You're gonna be it's

21:57

freeing. It feels good. I know. because

21:59

the world is a better place. Sometimes we we

22:01

fall into patterns that you you just get

22:03

so used to and then it's hard to break out

22:05

of those patterns. Right? I know you just get

22:08

so comfortable doing those things the way you're

22:10

doing them. I think I think it's

22:12

important part is is that, like, people ask me this all the time, why

22:14

didn't use this? And sometimes my answer

22:16

is, I don't know.

22:18

I don't know. That's I just I picked it

22:20

or oh, I didn't even think about doing it that

22:23

way. I've just always done it this way, and it's you just

22:25

gotta not be like, well, this is better

22:27

because of performed everything. Oh,

22:29

maybe maybe I should be using that. Thank you.

22:31

Yeah. Yeah. I I'm totally open to the fact

22:33

that I I could be totally wrong.

22:35

Yeah. Yeah. I I think it's it's an

22:37

important thing to always be reevaluating

22:39

if the things you're doing are

22:42

doing. If if it's if you're only doing

22:44

it because you've walk that path

22:45

and then grind it into your brain. It's just

22:47

doing it that way. Yes. Like, if it's

22:50

actually easier to read,

22:52

better, nicer, faster, or

22:54

stronger or whatever. But

22:56

if we're talking about better, faster, stronger,

22:58

whatever, and you're looking at

23:00

hosting your site somewhere, I mean,

23:02

Can

23:02

you get any better, faster, stronger than Lynode?

23:05

I don't know, Wes. What do you think? Yeah. I don't

23:07

think so. Lynode is

23:09

the better, faster, stronger, cloud

23:11

computing developers trust that is the

23:13

totally not blessed saying

23:16

that we have for them. Linode

23:19

has fantastic cloud computing. They've got

23:21

Linux boxes where you can put

23:23

everything that you need to do. Whether you need high memory

23:25

or high CPU, whatever it is you're

23:27

working on, most likely you are trying

23:29

to host a server

23:31

side application and you need to put that somewhere

23:33

in Lindo is a fantastic place to

23:35

run that. You're gonna wanna check it out for

23:37

your next project, Lindo dot com,

23:40

forward slash syntax. That's gonna get

23:42

you one hundred bucks in free

23:44

credit. Thank you, Lynode, for sponsoring

23:46

sick.

23:46

Alright. Next step is updating

23:48

versus creating a new variable. There's

23:51

a school of thought and it's largely

23:53

like functional programming stuff where

23:56

you're always creating a new variable

23:58

all the time.

23:59

And one

24:00

thing for me, it it I don't

24:02

think it's just a functional style

24:04

of programming, but I think it

24:07

really came into focus for me

24:09

when I got further into both

24:11

testing and TypeScript,

24:14

where creating a new variable every

24:16

single time you're doing anything.

24:19

To me is way easier

24:21

to test and is way easier

24:23

to type because updating

24:25

and changing things whenever if

24:27

the data is changing, the structure changing

24:29

or anything, or you

24:32

know, I used to think that one of the coolest

24:34

parts about JavaScript was, oh, I have

24:36

a variable. It's a string. I can turn the

24:38

string into a number. And now

24:40

I hate that. then why would why why would you

24:43

wanna be unsure of the type of this

24:45

thing? This thing is a string or a number

24:47

or this or that? You know, I've,

24:49

like, kind of fallen into

24:52

the role of an actual programmer

24:55

who, you know, a thing is the thing

24:57

that it is, and it can only ever

24:59

be that thing. You cannot change its type.

25:00

So if it needs to change its type or

25:02

needs to change its structure or

25:05

anything, it's now an entirely new

25:07

thing. What do what do you think about

25:09

that, Wes? Yeah. I I agree as

25:11

well. I'm not hard and fast by

25:13

it. I I do see a

25:15

lot of developers sort of having the mindset of

25:18

never like, always use const hundred

25:20

percent of the time. And and my rule

25:22

is yeah, by default these cons. And then

25:24

if you need a new variable, then create it. But

25:26

sometimes you do just wanna literally over

25:28

override it. You have a score variable and

25:31

the score variable needs to be updated. What

25:33

am I gonna do? Make a new score two

25:35

variable, and then the next time I need it is

25:37

score three. You know, like, no. Just update the existing one.

25:40

but in most cases, you

25:42

don't wanna be mutating

25:44

the old data, especially

25:46

with, like, event loop and browser

25:49

or like,

25:49

no ticks and things like that. So

25:52

I agree with you. Variable are

25:54

free. You're not you're

25:56

not running

25:56

up a bunch of memory by creating a

25:58

new variable to store your react

26:00

component in. So I think that

26:03

you should create a

26:03

new embedded default. The amount of

26:06

times that I've accidentally overwritten

26:08

something and didn't mean to. And then

26:10

it's come back to bite you a little bit in the

26:12

past. Like, the most simple

26:14

example is the

26:17

mutation based array

26:19

methods, reverse sort and

26:21

splice. Mhmm. And you

26:23

go, oh, shoot. I called reverse on

26:25

that, but now it

26:26

actually reversed the original ray. I want I

26:28

only want the new version of it, you

26:30

know. So I much prefer making a new variable.

26:32

By the way, the there is

26:34

a new proposal of

26:37

four new array methods. too reversed,

26:39

too sorted, too spliced, and with

26:41

-- Really? -- will yeah.

26:43

And those are all the

26:45

non mutating equivalence

26:48

to their source

26:50

reverse

26:50

sort split splice. So I have

26:52

a little TikTok coming up on those.

26:54

You do. That's cool. It's always a

26:57

massive bummer when, like, you hit

26:58

something, you're like, the only,

27:01

you know, helper here that

27:03

exists mutates the array. Okay.

27:05

Yeah. I guess I gotta I guess

27:07

I gotta mutate this array. The

27:09

only thing that I found to be when you

27:11

are every single time creating a

27:13

new variable. And and like you said, there

27:15

is a school of thought to always use cons. And

27:17

I gotta say that's pretty much the school that I'm

27:20

living in. I I don't

27:22

necessarily have it as a a hard and

27:24

fast. Like, I cannot change this rule,

27:26

but I'm gonna prefer cons

27:28

every time. And I think that happens when

27:30

you say I'm always gonna create a new variable

27:32

and it's always gonna be a const, is that

27:34

you end up getting actually good at naming

27:36

things because the things names end

27:38

up becoming really descriptive. Descriptive.

27:41

This is like a good point. Yeah.

27:43

To tutorials list f,

27:45

you know, with with SKUs, tutorials

27:48

list with populated, whatever. And

27:50

and you end up like like

27:52

you said, variables are free, but not

27:54

only are variables I used

27:56

to get really cursed with my variable

27:58

names. So short variable names, you gotta keep

28:00

it like I thought that was easy

28:03

to read. And it turns

28:05

out that's the the kind of hotshot way of

28:07

doing it. Right? I don't know. This this tiny

28:09

little variable names that are who knows what,

28:11

but who knows what they actually are

28:13

And I've since moved to a world

28:16

where I got some long ass variable

28:18

names now. And I gotta

28:19

say I like it a lot. Is it

28:21

true? you kinda know

28:22

what everything is a little bit more.

28:24

More

28:24

variables, longer variable names. You

28:27

know, I'm a fast typer. I can

28:29

type these things, but not only

28:31

that my ID kinda just populates it all for me

28:33

anyways nowadays, so it doesn't necessarily

28:35

bug me running long. It's a

28:37

good point. The, like, the tooling has

28:39

gotten so good that you have it.

28:41

And also like so fast. Yeah. Like,

28:44

TypeScript has also made you think, like, ahead of

28:46

time or, like, alright, what's gonna be in this

28:48

variable? You can't just start and stuff

28:50

as you need it. And, like, oh, well, at this

28:52

point, I need SKUs. Like you

28:54

said, I'm just gonna add them into the

28:56

variable, and then you have another function. You're

28:58

like, does this data have skews

29:00

or not, you know? Right.

29:02

Yeah. Good

29:02

points. I really like that. Yeah. It's a it's a

29:04

change to me. It would it made me feel like a

29:06

more mature developer And

29:08

it's it's funny that it's the type of thing that someone

29:11

coming from any

29:13

other real language. Non

29:16

JavaScript language. would

29:18

probably just be like, yeah, of course. What are you

29:20

talking about? You sound like a JavaScript

29:22

developer. But I'm I'm growing

29:24

up as AAA programmer somehow.

29:27

I saw AAA Reddit thread the other day where

29:29

someone says my, like, computer science

29:31

teacher is telling us to use one

29:33

letter of variables it

29:35

saves space and is more readable.

29:37

And everyone's like, what?

29:39

Like, if you if

29:41

you really need shorter variable

29:43

names, which by the way, is almost never an

29:46

issue because of g zep. You

29:48

ship the variable name -- Yeah. -- list

29:50

of level of tutorials products

29:52

with skews. you ship that a hundred

29:54

times. GZIP only ships at

29:56

once. Right? And and you you

29:58

can't minify

29:58

your code so that your

29:59

shipped code is just l

30:02

instead of that long variable. That's not

30:04

for me to

30:05

do. I'm I'm

30:06

Yeah. Read the code. Read and write the code. I'm not

30:08

You're the human, not the robot. Correct.

30:11

Yeah. Except on the dance floor, then you're

30:13

then you're the robot. Did you know my dance

30:15

career is called Robo tops, like Robo

30:17

kappa, but yeah. Yeah.

30:19

our our crew we we named in

30:22

typical college fashion, we were

30:24

watching Robocoplenite. We're like,

30:26

a Robocopo top That's cool, you

30:29

know. So we we were the robo taps

30:31

crew, and we

30:32

are the robo taps crew.

30:36

Awesome. Next one we

30:38

have here is converting

30:41

a iterable or array

30:43

like to a real array.

30:45

So there are certain things

30:47

in JavaScript that can

30:49

be looped over but do

30:52

not have all of the array methods

30:54

that you know and love. Probably the

30:56

most common example is cruise

30:58

selector all. You select all

31:00

the spans on a page, you wanna loop over them.

31:02

You can use dot for each

31:04

on that, but you cannot use

31:08

map, filter, find all of

31:10

those reduced that you're, you know, and

31:12

love. So the solution is is you

31:14

you turn it into an array. and the two

31:16

most common ways to turn an interval into

31:18

an array is you create

31:20

an array literal square brackets and then

31:22

use the dot dot dot

31:25

name of the array or name of the

31:27

interval, and that will spread every

31:29

item into the new array. And then the

31:31

other way is using array dot from and

31:33

you pass it your actual variable. I have

31:36

probably used both of

31:38

these equally over my

31:40

career. Mhmm. And

31:42

I always find I

31:44

I find myself in my

31:46

tutorials, citing more

31:48

on a radar from versus

31:50

the dot dot dot. The dot

31:52

dot looks so cool, but I

31:54

I asked myself, is that the hotshot way?

31:56

whereas, like, array dot from -- Mhmm. --

31:59

literally says what it

31:59

does. What do you

32:00

think? Oh, what? Yeah.

32:03

I I don't know. To

32:06

me, you say

32:06

you've done these about equally or you

32:08

will you choose to use the right app from. I'm

32:10

gonna say, I pretty much like,

32:13

since spread came into existence.

32:16

Yeah. If I need to create a new

32:18

object or if I need to create a

32:20

new array, I

32:21

mean, I'm spreading they call me margarine. I'm spreading

32:26

I I almost always spread and

32:29

I can't

32:29

i I

32:30

can't think of too many instances in which I use

32:32

a radar from overspread ever.

32:34

I I don't know what it is

32:36

about the Spreads and Texts. I've gotten

32:39

so accustomed to

32:39

reading it that it doesn't feel like

32:41

the hot child with me. And and and

32:44

maybe that's just it to me is it

32:46

doesn't feel like I'm doing a

32:48

trick it feels like that's how to do it.

32:50

You know what it does? Yeah. Yeah.

32:52

Yeah.

32:52

It's actually I think to me, it's just

32:54

I've gotten so comfortable with the spread that III

32:57

don't even put any second thought to it. And

32:59

I you know, whether it is restructuring

33:01

and what it what is

33:03

it called spreading when you're like

33:05

the

33:05

rest dot dot rest. Yeah.

33:08

That's that's still spreading. Spread

33:10

is when you put things into something

33:12

and rest is where you collect

33:14

them into Okay. So that's the opposite. You call

33:16

it rest. You call it rest. Okay. I

33:19

wasn't sure if they were both called spread or a

33:21

form of spread and one rest. I I mean, I use

33:23

spread. I use rest. I I

33:25

love I love that stuff. Those three dots, some

33:27

of my best friends in JavaScript. it's

33:30

true. Like, I do know what it

33:32

is. And also the benefit

33:34

to using a spread is

33:36

that if you need to combine

33:38

two arrays or, like, most

33:40

commonly, is if you want

33:42

to create a new version of that

33:44

array like we just talked about. You're creating a new

33:46

variable instead of pushing it into the existing

33:49

array. You can just

33:51

spread it into a array and then

33:53

put the the thing that

33:54

you want either at the front or the end

33:56

of that array just

33:57

as a variable or as an

33:59

as a explicit object,

34:02

which you cannot do in a radar from. So one

34:04

of my favorite things of spreading an object,

34:06

and I know we're not talking about objects here. But one of

34:08

my favorite things with objects spreading

34:10

is that

34:12

specifically,

34:12

like, overriding properties

34:15

where I can say, give me all

34:17

of the contents from the

34:20

previous array and then any value that you put below

34:22

the spread will override

34:24

-- Yeah. -- a property that

34:26

exists in the

34:28

previous data. And to me,

34:30

that's such a useful technique to

34:32

say, alright, just give me

34:34

everything. And if any of these

34:36

things are updated

34:38

or changed, it'll just override it and I don't have to think about it. So

34:40

I don't know. I really like spreading. I

34:42

know this is an array spread versus

34:44

whatever, but So you might be

34:46

looking at your radars spread and

34:48

wondering how this is

34:49

working, but you won't be

34:51

wondering how your website is working.

34:53

If you use log rocket.

34:56

That's at log rocket dot com forward slash

34:59

syntax. Log rocket

35:01

is the perfect service to

35:03

really stop guessing what your users are experiencing on

35:05

your website, whether that is

35:07

heat maps and conversions

35:10

being able to understand what exactly your

35:12

users are doing? Are they clicking on that

35:14

thing that looks like a button, but isn't

35:18

a button? and therefore they're getting confused.

35:20

User has experienced confused and hurt

35:22

itself. But, no, you can

35:24

use log rocket and see, hey, they're

35:26

working on this thing that's not really a button or perhaps they're doing the

35:28

one thing that you didn't want them to do and it's breaking the site. And you

35:31

can see that with their video

35:34

session replay. So you get access

35:36

to air tracking and issue

35:38

management. You get access to some cool

35:40

machine learning where you

35:42

can stop you can stop

35:44

missing the important stuff and get access to exactly

35:46

what's happening at any given time. You

35:48

get user

35:50

experience analytics heat maps, front end performance monitoring. And the

35:52

session replay is really the crown jewel

35:54

of these tools because you can

35:56

see exactly what's

35:58

happening, when it's happening, and how it's happening with this a

36:01

video scrubber replay giving

36:03

you access to really

36:06

dive into errors or

36:08

issues or even mice experiences that are

36:10

happening on your website, you get access

36:12

to the console log network request error logs and

36:14

more. So check it out at log

36:16

rocket dot com forward

36:18

slash syntax. Sign up

36:20

and get

36:21

fourteen days for

36:24

free. Yeah. Next

36:24

up, we have de structuring

36:27

an object to access

36:29

its individual properties. verse using those properties via

36:32

the object's name dot the

36:34

property. I

36:36

almost always up for

36:38

restructuring if I know the data is going to

36:40

be there. It's always

36:42

frustrating when

36:44

you have a restructuring situation and the error that comes

36:46

up, it says, you know,

36:48

cannot or, like, cannot I don't

36:50

forget what the error is exactly, but, you know, you

36:52

cannot find

36:54

the variable that you're trying to de structure because the

36:57

parent is undefined. And if

36:59

the parent is undefined, de structuring will

37:01

break your code there. So

37:03

and that that's the that's the situation where it

37:06

makes more sense to use something like

37:08

optional chaining and object

37:11

property syntax. But For the most part, when I'm

37:13

working with objects, I almost I'm trying to

37:16

always work in a situation

37:18

where I know

37:20

that object is going to have the properties that

37:22

I'm expecting it to have in it. And

37:24

that's something that has been a shift for

37:26

me. because,

37:28

you know, I don't know if you

37:30

you've worked in some some data libraries or you think like Apollo. Right? Or something

37:32

like that. Right? Yeah. Where you

37:35

hit the data you wait for the

37:37

data to return. And before the data returns, that data property

37:40

is null. So then you have to check

37:42

is data dot whatever

37:44

actually existing.

37:46

And it's not So for

37:48

me personally, I've really tried

37:51

to move everything in

37:53

my code base into a a way

37:56

where the property is going to at least be

37:58

there so that I can de structure

38:00

things and access

38:02

it because it is more readable for me to see

38:04

tutorials rather than data dot

38:06

tutorials. I

38:08

don't really.

38:08

i don't know Yeah.

38:09

Yeah. It's a big it's a big thing

38:11

or what. But yeah. So so much

38:14

better to use the structuring when

38:16

you have a variable that needs to be used

38:18

multiple times. if you

38:20

have, like, tutorial and you on

38:22

that, you have videos

38:24

and array length, which is

38:27

the number and a couple other properties. Having

38:29

to write videos dot or

38:31

sorry, tutorial dot for every

38:33

single one just clutters up the UI where it's

38:35

nice to have a nice clean variable

38:38

videos, you know, especially if you need to

38:40

use it multiple times over. So

38:42

much prefer restructuring.

38:44

A lot of this stuff when it first came

38:46

out everybody

38:46

goes, what about readability? And a lot of

38:49

that has has died down because

38:51

we just learned what they

38:53

do. And it's just I

38:55

think that's part of being a programmer is there's

38:57

obviously lots of hotshot stuff. Like, we'll talk

38:59

about the spread, but also

39:02

you could just learn what the

39:04

spread does and then use it. You know? Yeah.

39:06

Totally. Like, we had to we had to learn

39:08

what plus was in

39:10

in in grade three. We did it doesn't

39:12

say it doesn't we

39:14

don't literally write out plus. We put

39:16

a plus sign in there. It's amazing. Symbols, man.

39:18

Symbols can stand in the

39:21

way for concepts. Yeah. Next one is de structuring

39:23

an array versus reference by

39:26

index. I'm not sure if this one is

39:28

hotly contested or

39:30

not, but if I

39:32

need to grab and this is not

39:34

all that often, but I find myself doing

39:36

it there a lot when I do splits.

39:39

on on like a you have

39:42

a a comma separated list of data and

39:44

you split it on the comma,

39:46

or you are doing it

39:48

for each over a a value and you get an

39:50

array of the key is the first one and the

39:52

value is the second one. Mhmm. I

39:54

much prefer

39:56

to de structure those into proper variables instead of using square

39:59

bracket zero and square bracket one. Yeah.

40:01

I do two, but I almost

40:03

try to none. use

40:06

this very much at all. Like, I I almost always prefer an

40:08

object structure to an array structure where

40:11

things are different, know.

40:14

like in an array structure for me,

40:16

I like it if every single thing

40:18

is the exact same thing. So,

40:20

like, if you were to say,

40:22

destructure one value out to a variable, another value out

40:24

to a variable. You're creating those

40:27

variable names while you're and

40:30

it's like those are now becoming two new things. We're like, I

40:32

really prefer to have things defined

40:34

as like what they are somewhere.

40:37

And I don't I don't know if that's a deficiency of mine

40:39

or whatever, but I almost never

40:42

use restructuring or raise

40:44

into variables especially since

40:46

leaving Reactland. I think that's

40:48

something that used a lot in React to,

40:50

you know, use that state. you

40:53

know, the first one that comes out as the variable, the

40:55

next one that comes out as the updater

40:57

function, that is this technique. And that's

40:59

why you can name your you

41:01

state returns to be whatever you want to

41:03

name them. Yeah. That is nice though

41:06

because if it was an auto giant, you'd have to de

41:08

structure data

41:10

and

41:10

then reown it immediately into whatever it

41:12

is. And you just

41:13

you get rid of all

41:15

of that renaming kraft because

41:17

you can literally name the first thing whatever you want because

41:19

you're referencing it by index.

41:22

Yeah. Totally. And in that context, like,

41:24

is that that's that tracks a lot for me. But I almost never use it in my own

41:26

code base for some reason. I'm just never feels

41:28

right to me for some reason. Yeah. It's probably

41:30

just because you don't have a whole

41:32

lot of data

41:34

where the thing is based

41:36

on its index. The thing should be based

41:38

on its name.

41:40

Right? Totally. Next up here

41:42

is the number

41:44

function wrapping around a string

41:46

versus plus string to

41:48

turn it into a number. basically, how

41:51

do you

41:51

turn a string

41:54

into a number? I use parse it or

41:58

parse it? flowed for everything. I didn't even know that this was

42:00

a a thing. So

42:02

if I'm reading this, I'm like, where's parks?

42:06

Yeah. So if

42:08

you have a string that is a number and

42:10

you put a plus in front of that

42:12

string, then that will

42:14

turn it into a number.

42:18

versus being more explicit

42:20

and wrapping it in number. I

42:22

think the benefit

42:24

to using number or this plus method is that you

42:26

don't have to pick if it has a

42:28

decimal or not

42:30

because it we'll just parse it

42:32

regardless. And in your in the parse

42:34

example, you have to pick parse

42:36

float or parse int, which

42:38

-- Mhmm. -- you should model that.

42:40

Yeah. Yeah. It it depends.

42:42

Like, if you're let's say,

42:44

you're pulling the weather in from an

42:46

API. And do you know

42:48

it's gonna be twenty? I guess if you no. because

42:50

if you do know, it might have a decimal. Right?

42:52

You you well, you don't always know. You

42:54

do know if it might have a decimal.

42:56

But you don't always know. Yeah. I

42:58

you would probably feel like I think the plus trick. I I

43:01

literally have never used that in my entire

43:03

career. Have you? Never heard of it. No. Didn't

43:05

know. I never even heard of

43:07

it. Yeah. that's crazy. But passing

43:09

it to capital n

43:12

number parenthesis to use the

43:14

number constructor in jobs. Way

43:16

more readable. Way more readable. And

43:18

we actually have a couple more we have one

43:20

more on BlueJeans coming up that is

43:22

similar to this. Yeah. So I

43:24

I don't know why you would use the plus string

43:26

unless you were just being cheeky. hotshot.

43:28

You're hotshot. Yeah. That's that's why.

43:30

That's the -- Yeah. -- that's the hotshot technique I

43:32

don't need. Yeah. Next,

43:36

we have incrementing values.

43:39

And so I have

43:41

a ESLINT rule. And this was not by choice, but it

43:43

was just by adopting Airbnb's ESL

43:46

rules, is that if you

43:48

need to incremental value, instead

43:50

of using valve plus

43:52

plus or valve plus

43:54

equals one. Those are short

43:56

form for saying valve

43:58

equals valve

43:59

plus one. and my islet rule says never

44:02

do a hotshot one liner,

44:04

especially with the plus

44:06

plus in

44:07

front versus behind. where

44:10

you have to know is it incremented

44:12

first and then returned? Or is

44:14

it returned and then incremented? You

44:17

know? Like, come on. you

44:19

shouldn't be doing that. So I prefer the

44:21

much more explicit variable equals

44:23

the existing variable plus

44:25

one. Yeah. I agree. This is one of those ones that got turned

44:28

on for me with the Airbnb rules, and

44:30

I've never thought about it since.

44:32

Because honestly,

44:34

Val equals Val plus one or new Val equals Val plus

44:36

one. Whatever you're doing with that to me

44:38

is it it is so much more

44:40

readable. Granted Val plus plus

44:42

I get what's happening there. That's -- Yeah. -- that's like the they teach you

44:45

that in the first JavaScript loop

44:47

class you ever take. Alright. So they're

44:49

on the wall. Yeah. Yeah.

44:51

It's not exactly a a hard or a foreign

44:54

technique or an unreadable

44:56

technique, but I do just find

44:58

it to be more split it the other

45:00

way and do largely preferred for some

45:02

reason. I can't play put my finger on it.

45:04

It's a feeling for me. Yeah.

45:06

So you you had a tweet what

45:08

people were wondering. And one of the

45:11

responses was using

45:12

Uh-huh. Wow.

45:14

You can't read this

45:17

improve my point. I'm so glad. I know.

45:19

I'm just looking at it. So

45:21

they say if

45:24

and then a

45:24

parenthesis exclamation point and then two

45:26

two Another

45:28

parenthesis. Yeah.

45:31

inside

45:31

of that two conditionals within

45:33

and between them. Instead of,

45:36

if

45:36

not for or

45:38

not bar both of

45:39

those stink for me. And it's like,

45:42

when when you get into

45:44

or not or not,

45:46

not And it's over

45:49

or it's over. What I

45:51

end up doing, I end up just

45:53

doing nested if statements at that point.

45:55

that's so much more

45:57

readable. So if I'm getting

45:59

into

45:59

multiple ores and ands and

46:02

-- Yeah. using positives and negatives, truth e faulty in

46:04

there. Man, I'm splitting those up in a

46:06

multiple ifs. Because for

46:08

me, again, an if statement is

46:10

is fairly It's

46:12

free. Right? It does give you some lines

46:14

of code, but you can comment that

46:16

sucker. You can put breaks

46:18

in there. you can, you

46:20

know, really, really find find

46:22

tune it out. Instead

46:24

of trying to be fancy and

46:26

just jam everything into

46:28

one conditional. Totally. I've

46:30

I've done these one liners of checking

46:32

for

46:33

three things and two of them have to be

46:35

true and one has to be false. and then

46:37

you Some of them buy this code. Six months later,

46:39

like, what? Yeah. And then you're just trying to, like,

46:41

if this is

46:44

not and this

46:46

is is plus -- Mhmm. --

46:48

and and now they're set of parentheses. This is

46:50

not and, like, what is going I

46:53

much prefer if you can. busted up into

46:55

a couple nested if statements. People it's more code, but

46:57

who cares? It's so much readable through

46:59

a couple comments in

47:01

there. Save yourself. Yeah. I I like I said, I

47:03

I think that the code of mine that I've

47:06

written that ends up failing

47:08

the most. is when you're trying

47:10

to get too fancy with your if statements.

47:12

Because you think your brain thinks at

47:14

the point you're writing it, alright, this

47:16

makes sense. and then it stops working or it's not working and you come back

47:18

to and you're like, oh, wait, I didn't goof

47:20

this one up. It should be and

47:22

is versus and

47:24

not is. Oh, okay. You

47:26

the most is in, like,

47:28

mission critical,

47:30

permission systems. Oh,

47:32

yeah. Permissions. You should be doing that. And

47:34

David Capiano is gonna chime in here

47:36

about state machines being the solution here

47:38

for a lot of this stuff because you

47:41

know, you you shouldn't be checking all these things. You should

47:43

be checking, like, what is the state that you're

47:46

currently in? You

47:48

know? Exactly. Next one also has to do with if Multiple

47:50

if statements versus a switch

47:52

statement versus multi line This

47:56

is another word, I can't say, turn turn turnary.

47:59

Turnary.

48:01

Turnary.

48:02

Turnary. There's

48:05

like eight

48:05

syllables in there, isn't there?

48:08

Turner y. Turner y. So

48:10

Turner yep. I don't know if it's Turner

48:12

y or Turner y. or that

48:14

even matters at all. Turn turnkey. We'll call

48:17

it a turnkey. So multiple if statements

48:19

versus a switch statement versus

48:22

a Turnskey. I and a team

48:24

in their if if I

48:26

have, like, what's, like, called an e nam in

48:29

TypeScript where it's a list of

48:31

very clear possible options. I might opt for

48:34

a switch, but almost

48:36

always, I

48:38

will opt for multiple if statements.

48:42

Even even with, like, an if

48:44

else, I'll sometimes

48:46

just prefer single

48:48

if statements -- Mhmm. -- with returns inside

48:50

of them. Because, you know, you know,

48:52

I think, what about you? I

48:54

I like using else and if.

48:57

statements quite a bit. And I

48:59

almost will never reach for

49:02

a

49:02

switch, but there are times when I do.

49:04

Like you said, I have a a list of

49:06

things. These are the only possible ones it

49:08

can be. Typically, it makes sense to me

49:10

if I have, like, more than three or

49:12

so things it could be. Right? If

49:14

it could be here's the ten different icons I

49:17

have. It could be any one of these

49:19

icons. I'll do a switch over those

49:21

ten icons to be whatever the return should be. Like, that's what

49:23

we use for icon component in spelled. I

49:26

almost the turnski. I almost

49:28

only do the turn the turnski if it's a one

49:30

liner. Yep.

49:32

and ever since leaving Reactland, I don't do

49:34

turn skis

49:35

in my template code anymore

49:37

because I don't

49:38

have to do that in j s in in

49:41

the spelled cyclonically, I don't have to

49:43

do that. So, you know, the JSX

49:45

style ternary in your templating

49:48

language to me it made sense

49:50

in React Land. I don't have to do it

49:52

anymore, and I'm glad that I

49:54

don't. But for the most part, yeah, I'll use

49:56

turnaries if it's a one liner I'll use a switch

49:58

case if you're at, like, ten different options it can

49:59

be. But for the ninety percent of

50:02

the time, I'm using ifs

50:04

and if else. more than more

50:06

so than multiple statements even.

50:08

One kinda neat thing about a switch is

50:10

I had a a tip I posted on

50:12

Twitter about using never

50:14

in TypeScript. and basically

50:16

for what's called exhaustive checking,

50:18

meaning that TypeScript will

50:20

make sure that you handle every single use

50:22

case. Like, you say, alright, I have three currencies.

50:25

Canadian, US, and Euro.

50:28

And TypeScript will make sure that you've

50:30

handled every single case.

50:32

And if a new currency is added to the list, then you have a type

50:34

error. And it turns

50:36

out that you don't need to use the

50:38

never in a switch statement.

50:40

because TypeScript will exhaustive check your your code

50:43

with a switch statement

50:44

by default, which is kinda cool,

50:46

but can

50:48

also just make it work with the if statement by using never. So

50:50

I thought that was kinda nifty use

50:52

case of a switch statement, exhaustive

50:55

checking is that my bank

50:57

account when I'm trying to pay my mortgage. And that's

51:00

pretty good. Cool.

51:05

Next one is around leg promises and

51:07

air catching. You know,

51:10

sometimes you just

51:10

wrap everything in a try catch Right?

51:13

You have your try, block, you have your catch block in case something goes

51:15

wrong, you handle your issues.

51:18

And

51:19

other times, I find

51:22

it just really easy to

51:23

use just straight up a

51:26

weight on a promise and just toss

51:28

the dot catch on that bad

51:30

boy. Right? because the dot catch will catch any errors that

51:32

happen. And

51:34

if

51:34

there's an error, you

51:35

catch it in the catch. Otherwise, you're just

51:37

going to await it

51:40

like normal. I,

51:40

for the most part, use try catch, but

51:43

I kind of it kind of

51:45

makes me sad to use

51:47

try catch because It

51:49

looks like it's not here of indentation. It adds

51:52

noise and it's not too long. so

51:54

you're you're still very long. Now

51:56

you have you have to do the thing you hate, which is create

51:59

a variable above the

51:59

block. If you need to get anything out of that, I

52:02

totally get why we have to do it, but I

52:04

just their trichatch really bums

52:06

me out. as much as I love

52:08

a weight

52:08

and a single weight. Having to really

52:10

populate my code with a billion

52:12

try catches, I I think I'm using

52:15

the promise dot catch method

52:18

while awaiting

52:18

a promise

52:20

as my default pretty

52:22

much now. But Yeah. For a

52:24

long time, it's just try and catch all of my code base. And every time

52:27

I have to work and work in them, it

52:29

kinda bums me out. I

52:32

am

52:32

the same way. I will in most cases, I will just await a

52:34

promise and throw a catch on the end, which

52:36

is I call mix and match.

52:39

Yeah. because you're using the async await syntax,

52:41

but you're also using the chainable promise

52:43

syntax all in one go, which is

52:45

totally allowed. One kind of

52:47

cool thing I've seen some libraries do is

52:50

they will return to you

52:52

an object and you'll

52:54

have your data and your error on that

52:56

object So you can await it

52:58

or you can you can return an

53:00

array and you could say like const

53:03

square bracket data comma

53:05

error equals await do your promised

53:07

thing. And, like, that that to me, that's ideal. Because up front,

53:10

you're getting your either

53:12

your data or

53:14

your error, And then the

53:16

next line, you can check if you have an error or

53:18

if you need to go ahead and do it. That's

53:20

doable in if you make

53:22

your own function, but just it's

53:24

not like, if you're

53:24

just using straight up promises, then you But

53:27

if something goes wrong, then you still have to

53:29

have a catch somewhere. You

53:32

know? Like, if there's any like, actually

53:34

an error. Yeah. You still have

53:35

to have a catch somewhere because that's how

53:37

that's how a a sync away and

53:39

promises work in the

53:42

browser. But if you create like a wrapper function, which I don't wanna have

53:44

to create a wrapper function every time I use

53:46

it, but some of the some libraries

53:48

that do that, I kinda do like it.

53:51

This is one that popped up the other

53:53

day on Twitter where I

53:56

checked if something was

53:58

false and then returned false. Or

54:00

checked something was falsey, sorry, and then returned

54:02

false inside of a block. And I I got

54:04

a couple of people saying, why don't you since

54:06

it's a faulty value, Why

54:08

don't you just return the

54:11

faulty value

54:11

and convert it to a bullion with wrapping

54:14

it in bullion or or putting the two bangs

54:16

in front

54:18

of it? And, like, people were there

54:19

was, like, a thirty tweets read of

54:21

people just fighting about which one is better.

54:23

And my answer to that is I had a

54:25

console log in there inside

54:27

the block. And I just deleted the console

54:30

log, but I didn't turn it into the other

54:32

way to do it. And,

54:34

like, it I think

54:36

that it just kinda goes along with the implicit

54:38

versus explicit return is

54:40

if you need to now console log

54:42

something in the case that that thing

54:44

is faulty, then you have to

54:46

change how you are doing it. So I don't know if there's I

54:48

don't have any rules here. I I certainly love

54:50

returning a faulty value. or, sorry,

54:53

aim to resolve in one go. Yeah. But

54:56

there's nothing wrong with an if statement and

54:58

then returning it. You know, like,

55:00

we're not we're not always

55:02

playing code golf here where

55:04

the the shortest is always the

55:06

best. I'm gonna go ahead and say I

55:08

agree with the the

55:10

gallery and so that the

55:12

return the bullion is like

55:14

how I always do it rather than

55:16

doing any sort of in there. Like,

55:19

I can't say I never do it

55:21

that way with the

55:22

conditional, but I can't

55:25

I can't that my brain ever goes to to

55:27

a conditional there. Yeah. Almost, like, it

55:29

would be good to have, like, a EASLINT fix

55:31

for that, you know, where it's, like, oh, well, all

55:33

you're doing inside of this block

55:35

is returning false, so then auto

55:38

fix it versus having

55:40

having the block there. Yeah. So I

55:42

don't think either one of those as

55:44

big. I guess I guess it is more

55:46

explicit to do the

55:48

the whole if block but not as big

55:50

of a deal in my opinion. these are

55:52

some fresh coding practices.

55:54

Don't you think so? Yeah.

55:56

Yeah. Yeah. I was gonna I was gonna

55:58

go with, like, if you need to create

56:01

a fresh conditional or something. I don't

56:03

know. Use this white tool. Yeah. A

56:05

fresh variable. Yeah. So while we're

56:07

creating fresh variables in our

56:09

code, we're creating fresh invoices and fresh expenses in

56:12

FreshBooks. FreshBooks is a cloud

56:14

accounting software for your

56:16

small business myself.

56:18

I've used it for probably thirteen years

56:20

now. I can look back all the way

56:22

to the first invoice I have ever sent

56:24

as a business, which is amazing.

56:27

FreshBooks is really cool. You're gonna check

56:29

it out, thirty day free trial. No

56:31

credit card required. fresh books dot com

56:33

forward slash syntax.

56:35

Sook. Alright.

56:37

Last ones

56:37

are all pretty pretty benign kind of

56:39

like, those are just like coding style

56:41

things, spaces versus tabs. I

56:44

gotta say, tabs all day because

56:46

they're not in the

56:48

code. It's configurable by the

56:50

editor. The editor can say a tab

56:53

is actually this amount of distance or it's this amount of distance.

56:55

And then if, you know, you want

56:58

more space in there, you want actually like a

57:00

bigger wider

57:02

space, that doesn't involve actual code changes. So I'm I'm

57:04

a tab ten man. I'm drinking

57:06

the tab. A tab maniac

57:09

I've been on two spaces

57:11

forever. The only reason I'm not using

57:13

four spaces is because I need to be

57:15

able to fit the space on the

57:17

screen, but that's almost an argument

57:20

for using

57:20

tabs because you can adjust the

57:22

size of your tab in your

57:26

editor.

57:26

Right? Yeah. Someday I'm feeling like four tabs

57:28

and some day or four four tabs. Yeah. Someday

57:30

I'm feeling like a four space distance

57:34

and someday I'm feeling like a toothpaste different distance. You never know. You never

57:36

know. So I've I've just been on

57:38

toothpaste forever. I think

57:40

what is cool about that is

57:43

now with tooling, it doesn't matter. You

57:46

can you can let your

57:48

editor show you how it is that you want,

57:50

same with, like, semi colons

57:52

and whatnot. And then right before you commit, you could have a pre that

57:54

just formats it. However, your team would

57:56

like it checked into the code base. That

57:58

to me feels too

58:00

that to me feel to rube goldberg

58:02

machine to

58:03

me. That's also true. Because, like,

58:05

then, like, are you really gonna set up

58:07

a pre commit hook for every

58:10

project I'm big about the just get up and going. And then the pre

58:12

commit hook fails and then you're debugging

58:14

the pre commit hook and then yeah.

58:17

The one thing I don't like is you're still

58:20

on GitHub. When you view code that

58:22

has tabs, tabs aren't like

58:24

a mile wide or if you,

58:26

like, view source on

58:28

something -- Mhmm. -- which is less and

58:30

less of an issue. But sometimes I still

58:32

say, like, oh my

58:34

gosh. Like, fix this, please. So that's

58:36

the thing that I think really bothers me. I don't know

58:38

why. Yeah. Oh, so trip next one

58:40

is trailing

58:42

commas. And what a

58:43

trailing comma is is when you create

58:46

an object let's say you have an

58:48

object const person

58:50

equals name

58:52

is Wes. And

58:53

then the next line, you have

58:55

age one hundred. After that age

58:57

one hundred, do you put

58:59

a comma after that even

59:01

though there is nothing underneath it. And

59:03

the argument against it is

59:06

JavaScript used to not let

59:07

allow trailing commas.

59:10

The argument that was partitioned via ES6 Yeah.

59:12

Yeah. It was awesome. The

59:15

argument for it is

59:18

If

59:18

you want to add an additional property later

59:22

on, you do not have to modify

59:24

the code

59:26

above it. to

59:27

make your line work because

59:29

there's already a comma there. And same thing

59:31

as if you wanna delete something,

59:33

you don't have to. the annoying

59:35

part is is that JSON doesn't allow trailing commas, and I always

59:37

trips me up so hours. Hundred percent

59:40

team trailing

59:42

commas Jason

59:44

five, which is just a

59:46

it's it's a spec, I guess.

59:48

VS code uses it in all its configs,

59:50

and it's amazing because can have trailing commas and

59:52

you can have comments and all of that stuff. So I

59:54

am a hundred percent team trailing commas.

59:57

Yep. TTC

59:59

for me as

59:59

well team trailing comma all

1:00:02

day, I will ride that train

1:00:04

for sure. Yeah. III think the

1:00:06

benefits are too big to to not be

1:00:08

there. And honestly, like you said, the JSON

1:00:10

thing is the worst part about

1:00:12

it, and it's not even

1:00:14

related

1:00:14

necessarily. So Yeah.

1:00:16

I would love Trailings commas and JSON. Just give me the Trailings commas

1:00:18

all day. I think at first, I was like,

1:00:20

what like, I'm trying to

1:00:21

put myself back in

1:00:24

the ES.

1:00:24

yeah five days

1:00:26

or whatever and just be like,

1:00:28

why would you want to do that? And then it's

1:00:30

the type of thing you just configure your

1:00:33

lint rules or your pretty rules to

1:00:35

take care for you, and then you just, like, never

1:00:37

think about it ever again because you can

1:00:39

rearrange things, you can rework

1:00:42

on whatever you're doing and it just just

1:00:44

hashtag just works. Semi colons,

1:00:46

I don't use them. I don't miss them. I

1:00:48

haven't used them for, like, three years now

1:00:50

or so. And I I just I

1:00:53

think there was, like, a Kyle Matthews

1:00:55

from Gatsby, like, never used

1:00:57

semicolons. Yeah. And he kinda opened me

1:00:59

up to the idea of not using semicolons. And once I got rid

1:01:01

of them, I just made that little pretty air

1:01:03

config change. I I

1:01:05

have never once

1:01:08

run into a situation where it has bit me in the butt.

1:01:10

Never mind. Why? because my editor can

1:01:12

detect if that is a situation and

1:01:14

it will add it in for me.

1:01:17

Robot. So I yeah. I do not even

1:01:19

think about it, and I do not

1:01:22

miss them. Sayonara get

1:01:24

out of here. It's just noise to me.

1:01:26

I

1:01:27

will die on that hill. I

1:01:29

use them and I don't

1:01:31

and i I

1:01:32

the oh don't know why.

1:01:34

I don't I don't have a reason. I just like them. I had them. Yeah. I I don't even

1:01:36

like them. No. I don't like them. I I don't

1:01:39

not like them either. They're they're just there. I

1:01:41

know where to put them and actually,

1:01:43

you know, half the time, I don't even write them. My prettier

1:01:46

just puts them in for me.

1:01:48

So I I know

1:01:50

that's such a heated thing, but I honestly

1:01:52

don't have a

1:01:54

a fish in that pond. Or what's the horse

1:01:56

in that race? I don't have a dog

1:01:58

in that animal. Yeah. I go

1:02:00

gotta say, man. Sunny Collins in CSS bum me out. That's

1:02:03

the biggest thing. should come in

1:02:05

from stylus, you know? Right now. When

1:02:07

I'm writing CSS, writing css

1:02:10

like, nine

1:02:10

times out of ten when I have, like, an error

1:02:12

in my CSS. That's because I forgot a stupid

1:02:14

semi call and I get saved too early.

1:02:18

Yeah. That's that's

1:02:18

a good point. I want I

1:02:21

doubt we'll ever see that,

1:02:24

you know, the CSS, because I I

1:02:26

look back at writing

1:02:28

a bunch of stylists, and I do not miss

1:02:30

the invitation based syntax, but

1:02:32

I do miss not

1:02:34

having to do colons and semicolons.

1:02:36

Yeah. I might this is this is very much

1:02:38

me. But after this conversation, I

1:02:40

might have a a post CSS rule in

1:02:42

here to get rid of the STEMColons because

1:02:46

You know what? I'm kinda sick of these semi colons. Get them out of my

1:02:48

code base. Alrighty. Now is the part

1:02:50

of the show where we talk about sick

1:02:53

pics and shameless plugs,

1:02:55

things we think are cool, things that we

1:02:58

think are neat, things that we think are just

1:03:00

straight up sick. I am

1:03:02

going to sick pick

1:03:04

a pod cast today. And you know me?

1:03:06

I like podcasts. I listen to a lot of them. One podcast that I have

1:03:08

really enjoyed for those of

1:03:10

you out there who are movie fans

1:03:14

Quentin Tarantino has a podcast called video archives

1:03:16

that he does with Robert Avery, who's a

1:03:19

he says pretty famous director. He

1:03:22

he's directed some, like, rules of

1:03:24

attraction or some things he might have heard of.

1:03:26

But either way, they used to work

1:03:28

together at a video store when they were

1:03:30

both younger and

1:03:32

before anyone who Quentin Tarantino was.

1:03:34

Right? So these these guys have known each other

1:03:36

for a long time. And what they do is

1:03:38

they discuss three movies from the that

1:03:41

would have all existed in the

1:03:43

video store that they worked at. And then they

1:03:45

watched them on VHS

1:03:48

or whatever type of thing that they're watching them on.

1:03:50

Usually, they're trying to get the same

1:03:53

same format or style in which they

1:03:55

actually have in the video. star,

1:03:57

and then they just talk about them. Whether it's, like,

1:03:59

talking about Moonbreaker, which has honestly

1:04:02

always been a favorite

1:04:04

of mine. or or getting into really movies.

1:04:06

I Man, you you

1:04:08

really can't

1:04:10

beat there's whatever. I don't know

1:04:12

how many episodes at the start, but you really

1:04:14

can't beat the kind of expertise

1:04:16

that you get from Quentin

1:04:18

Tarantino and Robert Avery

1:04:20

talking about just all kinds of films that you may or may

1:04:22

not have heard of. And the fun part is

1:04:24

as I've heard of a lot of these movies, you know,

1:04:26

they're getting

1:04:28

into jellows or

1:04:32

something like really kind

1:04:34

of niche films that, like, I

1:04:36

find I've I'm really into myself. So they're not

1:04:39

talking about normal movies that you you're

1:04:41

here about, but just kind of

1:04:43

interesting stuff. So It's called video

1:04:45

archives, and there's nineteen episodes that are public now. And I I

1:04:48

gotta say it's one of my favorites. I look forward

1:04:50

to it every week.

1:04:52

Wow. Awesome. I

1:04:54

am going to sick pick a WiFi

1:04:56

access point. This is the

1:04:58

UNIFY I think it's

1:05:00

called the u six. Let me just

1:05:04

double check. No.

1:05:04

It's not. It's called the UniFi

1:05:06

access

1:05:06

point in wall HD. So

1:05:10

our new house

1:05:12

came with like the previous

1:05:14

owners had it all wired up with Cat

1:05:16

five e, which is

1:05:18

obviously not Cat six, but it's fast enough

1:05:20

for the Internet speeds that we have.

1:05:22

And we never could have that full

1:05:24

potential of our gigabit down Internet because

1:05:26

it was all wasn't WiFi six.

1:05:29

So I got these WiFi

1:05:32

six in wall

1:05:34

access points, and they're so

1:05:36

cool because So basically, you power

1:05:39

it over PoE, it it hooks

1:05:41

up to a normal jack

1:05:43

in the wall. Like, you just

1:05:45

screw it into the faceplate screws. And

1:05:47

in the bottom, there's three or four yeah.

1:05:49

There's four LAN ports.

1:05:52

One of them four has

1:05:55

yeah, four LAN ports. So if you need to

1:05:57

get hardwired somewhere, so our TV

1:06:00

I wanted our TV to be hardwired

1:06:02

but then I also wanted an access point there. So what

1:06:04

I did is I wired in the access

1:06:07

point. It gives us WiFi six for

1:06:09

all of our devices but

1:06:11

then you have now a little switch in the bottom,

1:06:14

which you can power all of your

1:06:16

all of

1:06:18

your devices

1:06:18

directly from it. And these things these are awesome. It's really cool.

1:06:21

I'm getting nice fast speeds

1:06:23

off of our Internet now.

1:06:26

And I put I we've put two of them in the house along with some

1:06:28

of our older WiFi

1:06:30

with WiFi five, what's

1:06:32

what came before WiFi six?

1:06:35

No. No. Yeah. Yeah. WiFi six

1:06:37

is is the stuff that let me tell you. Yeah. You've

1:06:39

had it for a while. I've not had

1:06:41

any of it. I'm pretty excited about that. Although I'm in

1:06:43

a position now where I'm locked into this ecosystem and

1:06:46

the new routers cost a lot. And we need to

1:06:48

know the

1:06:50

dash point and I'm like, oh, I

1:06:52

gotta buy another mesh point. And, you know, however, many of our devices

1:06:54

actually can use WiFi six as

1:06:56

pretty limited. But with those devices

1:07:00

that do, get that WiFi six, man. They're cruising to get,

1:07:02

like, six hundred up and down on

1:07:04

a phone. It's crazy. It's

1:07:06

pretty

1:07:06

sweet. Yeah. So big fan of

1:07:08

that. check

1:07:10

it on out, shameless plugs, west boss dot com forward slash courses

1:07:12

for a list of all of my courses.

1:07:15

You can use the

1:07:18

code syntax for ten bucks off, or I have a whole bunch of free ones as

1:07:20

well. You check those on it. I'm

1:07:22

going to shamelessly plug

1:07:24

level up tutorials

1:07:26

dot com

1:07:28

By the time you're listening to this, the redesign will have been out for about

1:07:30

a month, which means that

1:07:32

hopefully, it is totally a

1:07:36

hundred percent zero percent zero zero percent bugs, a hundred

1:07:38

percent bug free. And

1:07:40

and I just go and check it out. We added I've

1:07:42

been adding some themes West. Let me tell

1:07:44

you. Yeah. Theaming system

1:07:46

has always been robust. I

1:07:48

would say that's a specialty, if mine. It's

1:07:50

like theming systems at this point. And

1:07:52

so, like, I built the site to be able to handle a theming

1:07:54

system, and I started just, you know,

1:07:56

just casually adding some

1:07:57

themes. And I added, like, a space theme that

1:07:59

has, like,

1:08:02

some little graphical stars in the background and the colors are like

1:08:04

this neon green and bright

1:08:06

purple and black, and it looks

1:08:09

so stinking cool. And I I fall

1:08:11

in love with these color schemes. I

1:08:13

built one of the color schemes. That's the same color palette

1:08:15

as our current Well,

1:08:17

the old website, the one that was up before. So if you, like, really like

1:08:19

the old website's colors, you can use old website's colors. It's just

1:08:22

so much fun for me.

1:08:24

So Go

1:08:26

ahead and check it out. Subscribe. Become a

1:08:28

subscriber to get access to a massive amount of video tutorials. A

1:08:30

huge catalog, learn all the latest in grades, including a

1:08:35

new course on spelt kit that is teaching you everything you

1:08:37

possibly need to know. Level

1:08:40

up. Oh, actually, we've got a

1:08:42

new URL too. Level up dot

1:08:44

video. such a great

1:08:46

hero.

1:08:46

Yeah. My faith. Alright. Thanks, everybody, for tuning in. We'll catch you on Friday. Peace.

1:08:52

Peace. head on over to syntax dot f m

1:08:54

for a full

1:08:54

archive of all of our shows. And

1:08:57

don't forget to subscribe

1:08:59

in your podcast player. or

1:09:02

drop a review if you like this

1:09:08

show.