0:00

Welcome to Syntax It A We have

0:02

a show for you on components. Utility

0:04

is that we need for every project

0:06

out there are. So whenever you're certain

0:08

up a new project I I find

0:10

myself. Making. A lib folder

0:12

and either copy paste in and pm

0:14

stalin make my own and then the

0:16

same goes for like you I as

0:19

well as like wow I've I feel

0:21

like I need these things in every

0:23

single project that I work on which

0:25

a as awesome that the browser is

0:27

actually moving towards giving us those but

0:29

we're not there yet so we're gonna

0:31

talk about all the different components out

0:33

there whether you should build it yourself

0:35

or a install somethin and whole bunch

0:37

of stuff around that. My

0:40

name's Wes. I'm from Canada. With them

0:42

is always Scott Hi. It ends got

0:44

me. Doing. Good doing super good.

0:46

In fact, I've been working really hard

0:48

on a starter kit for myself. worse

0:50

when Now we went to React Miami.

0:52

I showed you a the dance app

0:55

that I built and I had it

0:57

really rapidly like I built it. On.

0:59

The plane. I was impressed like me. Very

1:01

impressed at how quickly but that together. Yeah.

1:04

So I figured hey, you know what, I

1:06

have this kind of starter that I work

1:08

with typically like, what if I were to

1:10

just. Really? Formalize, that's I I've

1:13

been working on a a starter kit

1:15

that kind of encompasses this stuff and

1:17

it really has gotten me thinking like,

1:19

what are things that. Made

1:21

that development process fast. would of the

1:23

things that I needed in that site

1:25

build but I end up needing in

1:27

most nodes over time because when you

1:29

start any project you can often feel

1:31

like hate. I. Only need this

1:33

in this nurse and then oh wait, nevermind any

1:36

this is. well I need a toast menu I

1:38

need there's any dad. Yeah and next thing you

1:40

know you're rebuilding or adding like the same components

1:42

to every project. So yeah that it would be

1:44

a great topic to go to some of this

1:46

stuff. It's been on my mind and what else

1:48

has been on my mind is the air is

1:50

that come into our century because let me tell

1:52

you I can and do my email and he

1:54

and I see them come in all the time

1:57

and in some of them are ones that we

1:59

need to take care. Rapidly and others are are

2:01

ones that we can. Maybe.

2:03

Just wait and see a little bit,

2:05

but it's important to me to have

2:07

a handle on the errors on the

2:09

syntax site and we do that vs.

2:11

Centuries and Centuries. It presents the show

2:14

so you know we have a close

2:16

familiarity with the project, but with Century

2:18

we get access to being able to

2:20

track all of our A or logs,

2:22

being able to track performance and every

2:24

single page chat, performance, queries, and else.

2:26

Are you believe in the track analytics

2:29

and metrics type things via the Metrics

2:31

platform where we can track who's. Listening

2:33

to what episodes, how many episodes are being

2:35

listened to and which ones and when and

2:37

how how much and stuff like that South's

2:39

if you need is he said tools in

2:41

your life which I'm gonna guess you do

2:43

with your ship and software that honorary century

2:45

the I have I syntax and senate and

2:47

get two months it for free and special

2:49

if you're building any projects that need components

2:51

I well we're going to be talking about

2:53

South's I think the first one that. You.

2:56

Know when it? when I think visually about this. I started

2:58

the very top of the page. And

3:00

yeah conversation I think that you need

3:02

to have when starting any project is

3:04

about bananas in the mumbled as I

3:06

wanna know, like a wetsuit when you

3:08

do a nav. are you see any.

3:11

What it? What's your strategy for having a

3:13

Nav? Is this a now component that you

3:16

copy and paste from somewhere? Are you doing

3:18

the hamburger menu thing that you bring something

3:20

a thing? Or is this something you know?

3:22

brawling your own each time. Yeah.

3:24

I was always role of

3:26

myself because. They're. Really

3:28

not all that complex. Obviously

3:30

some nas can can be

3:33

relatively complex, but I was

3:35

try to just start with

3:37

very good and descriptive Html

3:39

it's that can be. Moved.

3:42

Around and shown in in hidden

3:44

with Css and and styled so

3:46

I really don't. Stumble. upon

3:48

too many use cases where i do

3:50

need it but i've i've had a

3:53

couple projects here and there in the

3:55

syntax site as as one of them

3:57

were it's fine to do to separate

3:59

nas is Make sure that you're

4:01

when you are updating them that you're updating

4:04

both of them yeah, and that

4:06

is like the tough thing because I Don't

4:09

know how many times I've been able to

4:12

reuse the desktop nav into the mobile nav

4:14

100% without Hiding

4:17

things sometimes you can just get away with CSS

4:19

display none on some things you want to have

4:21

available and we had mobile and some of them

4:23

only on desktop and sometimes like

4:25

the layout and the The

4:27

HTML structure is completely different So for

4:30

me when I'm looking at

4:32

do I have a mobile nav component

4:34

specifically and a desktop nav specifically? It's

4:36

almost always how much is

4:39

the structure different of the HTML? If

4:42

the HTML is the same we're doing one component

4:44

on that bad boy and having it all work

4:46

with just CSS If

4:48

the structure is different which it

4:50

happens a shocking amount of time where the structure

4:52

really needs to be different Like

4:55

could you give an example of like where

4:57

you would need a totally different HTML structure

4:59

for one for another? I tend

5:02

to just go overboard with the classes and

5:04

extra elements and then if they're there

5:06

if I need them Yeah,

5:08

I think that ends up becoming a big

5:11

thing I think also one thing that

5:13

gets people is if you

5:15

have to reorder items in The

5:18

mobile nav it can be kind

5:20

of tricky to do that But now we

5:23

have like CSS grid It's

5:25

not ideal to have to like reorder them in

5:27

CSS sometimes people prefer Just to

5:29

reorder them in HTML because it shows up as

5:31

you see it But you could do

5:33

that with the CSS as well. Yeah,

5:35

I think the thing that I think about is sometimes

5:38

there's items within the mobile

5:40

navigation that either don't exist in

5:42

the desktop navigation or The

5:44

way in which you want to

5:46

have them really appear I guess the

5:49

thing I want to say specifically is that you

5:52

should always try to have them be One

5:54

nav first and then maybe as a last-ditch effort

5:56

then you can make a second one because like

5:59

Wes said If you forget to

6:01

update one, you forget to update the other one,

6:03

that can be a big issue. And in fact,

6:05

I think the syntax website, Wes,

6:07

being two different components, might have been left

6:09

over from an older build of the site

6:11

when we needed it for some reason. Because

6:13

now I'm looking at it, there's absolutely no

6:15

reason why we couldn't have these be one

6:17

component on the current version of the site.

6:19

So that might have been something that was

6:22

modified over the course of time.

6:24

I think we initially had either

6:27

a search or we had like, oh no,

6:29

we had like a multi-layer nav that was

6:31

a little bit different on

6:34

mobile. Because that's the other thing

6:37

is you can make a very complex nav

6:39

on desktop. But if you

6:41

go on mobile, sometimes you'd need to pair it down. So

6:44

yeah, we should switch that though, now that

6:46

I'm seeing it. Yeah, same. That

6:49

is funny because I'm looking at this for an

6:51

example for why we did that. I'm

6:53

not seeing any particular reason and I'm usually

6:55

very focused on that when I'm making it

6:57

in the first place. So I definitely had a reason. But

7:00

typically, it's not a huge deal to have a mobile

7:02

only navigation if you don't need it or if you

7:04

need it. Can I tell

7:06

you one of my beefs with websites is

7:09

they start their mobile nabs way too

7:11

early. They're

7:14

like, oh, 1024, let

7:16

me pop a burger on there so I can clip

7:18

it. You can click it. I hate

7:20

that because I often

7:23

want to put multiple windows open at once

7:25

and 1000 pixels wide is

7:28

I'm not on an iPad. I'm on a

7:30

desktop and I don't need to

7:32

do it. Just make the text smaller

7:34

or wrap them or something like that. So I

7:37

think people are a little too aggressive with the

7:39

hamburger menu to get to a navigation. I much

7:41

prefer just give me a stack of links at

7:43

the top if you can fit them in rather

7:46

than having to hide them behind some tiny little

7:48

three lines. You have to click it and open it up. I'm

7:51

going to tell you why. Why?

7:53

They're lazy because it's

7:55

the easiest thing in the world to just say, oh,

7:58

They're getting squished. Hamburger

8:00

menu. instead of having to worry

8:02

about Nadia planting the texture Monday

8:04

night outside. Our.

8:07

People are using Tell when intel and comes in

8:10

with a pre defined break points. Men they just

8:12

life he would just use those break points which

8:14

is good for like. thinking.

8:16

In terms of like small, medium large

8:18

layouts. But. We should also be

8:21

thinking who. At what point

8:23

does this menu. Become.

8:26

Too. Odd for this use case.

8:28

Then that's when you should throw yourself in

8:31

a breakpoint. Yeah. I

8:33

almost always keep the the desktop nas available

8:35

until the last possible second and I think

8:37

that should be cause even when they get

8:39

have to give your users to collect the

8:41

even on mobile if you don't have to

8:44

another one hears the header which I often

8:46

do a header component which is usually just

8:48

like very simple right you either have your

8:50

logo and any split it in the of

8:52

the navigation sometimes yes search of their some

8:55

mg of like a user menu where you

8:57

can do log out and stuff but a

8:59

header components is really just a header html

9:01

element with since. Css to kind of put

9:04

things in the right place. But I think

9:06

the big question here for me that I

9:08

have for you: do you prefer a fixed

9:10

header or a non six tatar? I'm almost

9:12

always a non sex unless it's. Giving

9:15

me some information like I'm lucky

9:17

on and get have right now and

9:19

as I'm scrolling through some color and

9:22

yeah hub there is a six header

9:24

as. Information about will file

9:26

I'm in what branch I men from

9:28

the lines of code that's helpful contacts

9:30

I don't want to see as I'm

9:32

scrolling but if you just fixing it

9:35

because it looks cool and like. Like.

9:37

I don't necessarily if I want to go

9:39

to your navigation. ah, scroll back to the

9:41

top and in. Get that. Yeah. Sounds

9:44

a lot of space to a lot of

9:46

people's headers or what, like sixty some pixels

9:48

tall? taken up a whole lot of space,

9:50

especially and mobile. Remember, there was the whole

9:52

headroom. Trend for while of people don't.

9:54

remember this they were they have a trend

9:57

and as on every website the entire world

9:59

when you scroll down the header, scrolled

10:01

away and then when you scrolled up the

10:03

header down, whoop, and like came back down.

10:05

Oh yeah. It bugged the life out of

10:07

me in practice. I actually didn't mind that

10:10

because, well, maybe I did. It

10:12

depends, you know? Twitter had it for a while.

10:14

It was novel at first. I

10:17

did like it for the

10:19

nav bar because you could scroll and you

10:21

could have nice and clear and then if

10:23

you wanted to pull it up, you can

10:25

do it. But it's very subtle because if

10:27

it happens by accident too often, then forget

10:30

about it. Yeah. I

10:32

think that's how Safari works in general, right? You

10:34

scroll, like mobile Safari, you scroll, the URL bar

10:37

goes away and stuff. But now

10:39

if the website's doing that too, it's a little much. One

10:42

component I find myself needing on literally

10:44

every website that you might not think

10:46

about is being a standard must-have component,

10:49

but a toast message. Toast

10:51

are a little too invasive. Oftentimes, you need

10:53

to let the user know that something happened,

10:55

either good or bad. A toast

10:58

message is something that I

11:00

don't know if I've made a site in

11:03

the past little while without a toast system

11:05

in general. What about you, Wes?

11:08

Yeah. I usually will reach

11:10

for, in the last couple

11:12

of projects, I've reached for the ShadCn one. We

11:15

talked about this in the last show. It's like you can build it

11:17

yourself. There are

11:20

a lot of features in the more

11:22

featureful ones where you can update a

11:24

toast message, you can have them auto-dismissed,

11:26

you can have touch events for swiping

11:28

them away because a lot of people

11:30

are used to iOS now, and iOS

11:32

lets you swipe them away. Sometimes

11:36

I'll see somebody on an

11:39

app where they have their own built-in notifications, and

11:41

you can watch them try to swipe it away,

11:43

and it goes, oh, it's

11:45

not actually built-in to

11:47

work like that. I would

11:49

reach for an external component for that type of thing.

11:53

I Feel like this is just the, you know what,

11:55

Grinds My Gears episode. So Maybe for each of these

11:57

topics, you can just ask me what grinds my gears.

12:00

I like the have a very large monitor.

12:02

And. More than once in the last

12:04

month I have. Done

12:07

something on an application and

12:09

I thought. It's not

12:11

doing anything. And is not doing it

12:13

and like what is going on and realize like

12:15

oh. Let. Me just like this

12:17

like move over all my role he

12:20

chair to the bottom of my monitor

12:22

space. There's the toast message and the

12:24

toastmasters was so far. Disconnected.

12:27

From the actual you, Why?

12:29

Because they probably not thinking

12:31

somebody has a thirty two

12:33

edge forte display. but. I

12:35

think it's that's the case in be to maybe

12:37

think ah. Could you play

12:40

like a little sounds with that Aca? like a

12:42

little click to a new People don't like sound

12:44

but now. That. To

12:46

show you that something has happened Because I've I've

12:48

myself have noticed that I think like. Man.

12:51

If if me, if I'd

12:53

had missed that, how many

12:55

users are accidentally missing That.

12:57

Yeah, I don't know by high silver.

12:59

sound is like discord. Bugs. The

13:02

life out of me with how many sounds it

13:04

makes all the time and I yelled at everywhere

13:06

in the possible worlds stop making sounds and Discord

13:08

still makes a sound somehow. Occasionally on so sounds

13:10

guns and Skyn bug me a little bit especially

13:12

with something that like a toast but I can

13:15

see why I would be nice especially the site

13:17

makes it easy to turn the yeah or maybe

13:19

just put them from the top or you. But.

13:22

Them closer I don't know what they answer

13:24

is he led my tell us I think

13:26

the best place for a toast message is

13:28

either dead in the center, up and down

13:30

my group like a love for or the

13:32

same thing at the bottom Dead in the

13:34

center yeah coming up from the bottom for

13:36

have a phrase. From. Like you

13:39

have a little notifications item. That

13:42

different at my Us app. Wide notifications, you

13:44

know? Totally. But yeah for those of you

13:46

don't know, it's a toast is called a

13:48

toast because it pops up, it's a little

13:50

pop up and it's out. an alert Durham

13:53

and used to move that the when I

13:55

typically reach for. Myself. with

13:57

salt salt French toast which space on a

13:59

react like. Very. But the people that that is

14:01

is like libraries like that. Like you've mentioned they

14:03

do have a lot of options which is great

14:05

but sometimes they have like. An

14:08

absurd amount of too many options like. Oh

14:10

each time you you send a toast message you

14:12

consented to a different spot of the screen like

14:14

how many times do you want that or he

14:17

has dismissed you know that I typically for me

14:19

would toes messages they they do couple things they

14:21

pop in did like the main setting you need

14:23

to change is the position in the duration, maybe

14:25

the offset, how far away from it as the

14:27

top left the bottom? whatever and then like you

14:30

said the built and stuff like this why bubble

14:32

is is like really what matters are making sure

14:34

that they pause when you hover over them. I

14:37

don't me I recently is like really dead

14:39

simple and is a super bare bones. I

14:41

think the only thing I will add to

14:43

this gesture supports but I on. I

14:46

used. Inset. And

14:48

less. Let me tell you man,

14:51

I've been using the inset property

14:53

along with logical properties to do

14:55

positioning for this type of thing

14:58

so I can say something like.

15:00

In said. In line. And

15:03

or in said in line, Start

15:05

or in in line and. And.

15:08

Because those are actually properties as well use

15:10

in the logical properties. So you said inset

15:12

in line and to zero it moves and

15:14

all the way to the right. As he

15:16

said, inset inline, start to zero. It moves

15:18

it all the way to the left. As

15:21

you said insert. In. Line to

15:23

zero. On both accounts, He.

15:25

Puts it in the center or auto it puts

15:28

it in the center. Auto Zero would stretch it

15:30

right. Zero would stretch it crush as us inset

15:32

Zero would stretch to give right across the say

15:34

of inline stretches that left to right or I

15:36

see you can flip and if is to depending

15:39

on what you want their it's but that also

15:41

works with. Inset block as well

15:43

and said block start. It's a block and. Really?

15:46

Really, really nice and easy. I like the

15:48

fact that you can set the left and

15:50

right or just the laughter just the right.

15:52

With very similar properties on men a business

15:54

of all the time so couple of superpowers

15:57

they are from inset as well as my

15:59

logical property. So I'll

16:01

ask this people are probably scratching the

16:03

head right now. What is the benefit

16:05

of using that inset inline? Left

16:08

start all that instead of just top

16:10

right bottom left. Yeah. Well

16:12

cuz the big one is that

16:14

it's easy to

16:17

have that be a non-standard

16:21

If your users are not top

16:23

to bottom left to right then this

16:25

just works without any sort of adjustment

16:27

or thought or anything whatsoever and

16:30

Instead itself becomes a really

16:32

nice property because you can set things

16:35

like auto and have it positioned fixed

16:37

in the center of your screen I

16:39

don't know if you ever tried to

16:41

position fixed anything in the center of

16:43

your screen, but it requires some goofiness

16:46

You need to do translate negative

16:48

50% and then left 50% to

16:51

get something to center correctly in the screen

16:53

So if you use this you not only get pin

16:55

to the left pin to the right But you also

16:57

get pinned to the center without any sort of extra

16:59

effort. Oh interesting

17:01

so inset auto will

17:04

automatically center a fixed element

17:07

whereas Top

17:09

right bottom left auto does not do that. I think

17:13

I did do a While

17:16

we're talking about these writing modes. I

17:18

did do a little tik-tok video about

17:20

an actual use case for Using

17:23

inline and block CSS logical

17:25

properties. So instead of saying

17:27

like margin left you say

17:29

margin inline start mm-hmm, and

17:32

the use case for that is if you were to ever flip

17:36

your Your elements they change

17:38

the writing mode so that they go they

17:40

go sideways So I showed an example of

17:42

we have headers across on desktop But then

17:44

on mobile we flip the headers

17:46

to go to the left or

17:49

the opposite something like that So basically you

17:51

have the we'll get Randy to overlay it

17:53

on top right now It

17:56

was really cool because like that

17:58

for me. I probably will never ever make

18:00

a Japanese website in my life. And in fact,

18:02

I even went to a bunch of Japanese websites

18:04

and the Japanese websites don't read

18:06

top to bottom, you know? Like I

18:09

couldn't find an example of a website that reads

18:11

top to bottom. I found lots of examples of

18:13

websites that read right

18:15

to left, right? Like that's a pretty common. Lots

18:18

of languages read that way, but I was having

18:20

a hard time finding something like that. But

18:23

I did find, oh yeah, sometimes I just want to

18:25

turn text and don't use rotate

18:28

for that because then once you rotate it,

18:30

it's out of the document flow and then

18:32

you can't use margin or you can't use

18:34

anything like that. But if you just change

18:36

the writing mode to I think

18:38

it's vertical right left, then

18:41

you can you can write the text

18:43

from top to bottom and then your

18:45

inline margin, your borders and your paddings

18:47

all will switch the axes that they're

18:50

appending to. Yeah, that's

18:52

sick. Alright, next one is a portal,

18:54

which portals will become less

18:56

necessary, but a portal basically takes your

18:58

element that you're wrapping in and moves

19:00

it out of its current position of

19:02

the DOM and usually puts it like

19:05

as a child of the body, therefore

19:07

pulling it out of the position relative

19:09

document flow. And so like it's

19:11

going to sit on top of things. You

19:13

don't have to worry about Z index, but

19:16

portals nowadays are going to become less and

19:18

less important because we have the new pop

19:20

over API in the new pop over API.

19:23

What it does is when you make a

19:25

pop over, it puts something on what's called

19:27

the top layer, which sits above everything else.

19:30

And coincidentally, that actually also means that

19:33

you can no longer position something relative

19:35

to its parent if it's absolute, which

19:37

is why we have the anchor API.

19:39

So they had to create a couple

19:41

of new API's here. Either way,

19:43

portals will be kind of going

19:45

away the more and more that

19:47

we get to use pop over because it is

19:49

going to pull it out of the document there.

19:52

I don't think those are the only use cases

19:54

for portals, but I think that's like the majority

19:56

of them. But more people want to

19:58

just really pull it out. In

20:00

React we have portals because most

20:03

often is you're in a component that's

20:05

nested very deeply and you want

20:07

to be able to render something out. For

20:09

example, you want to put something in a

20:11

modal dialog, right? You'll often use a portal for

20:14

that because you need to put the modal

20:16

over top of everything and that div is

20:18

somewhere else in your application. But

20:20

yeah, with popover and

20:22

dialog and dialog has

20:24

a modal setting, we should do another

20:27

episode on popover modal now

20:30

that we also have anchor as well

20:33

because these are some pretty exciting things

20:35

where you basically are getting rid of

20:37

so much JavaScript that you will never

20:39

need again because you can simply just

20:41

use HTML. And even the JavaScript that

20:44

you do have to write like if

20:46

you're doing a popover manual, it's really

20:48

just reference the DOM element, show popover,

20:50

reference the DOM element, hide popover. And

20:53

it's so simple, it's so nice and

20:55

again, it puts it into a top

20:57

layer. So you can still utilize

20:59

it like you would in a portal. Another

21:02

one I end up needing a lot is a drawer

21:04

and a drawer is one I'll almost always, I

21:07

say this but the last two times I've needed one, I

21:09

built one myself, which is dumb. I'll

21:11

use like shoelace or something like this. A drawer

21:14

is nice because it's something that is a pattern

21:16

that's very common on mobile. You'll see it all

21:18

the time. You click a button and a drawer

21:20

slides up from the bottom and potentially has like

21:22

a form and many times there's like a little

21:24

line at the top you can click and drag

21:26

and swipe it down or pull it down to

21:28

dismiss it. A reason why I almost always reach

21:30

for a component for a drawer is there's a

21:32

lot of edge cases there in terms of

21:34

how it displays, when it gets larger, how

21:37

the gestures work, how the smoothness of all

21:39

that experience works, where you can click to

21:41

dismiss those types of things. You know, like

21:43

I said, I'll reach for like the shoelace

21:45

drawer. Sometimes you see drawers

21:47

pop in from the left or the right or the

21:49

top or the bottom. But like the most common use

21:51

case for me is the typical one that you see

21:54

on a mobile website when it swipes up. Maybe

21:56

you're like buying an app on the app store.

21:58

You can see that exact pattern. Yeah,

22:01

one thing I really like is

22:03

when people make their modals drawers

22:06

on mobile. So essentially

22:09

all that is instead of like centering

22:11

your model, have it come from the

22:13

bottom because often you're going

22:16

to be asked to be typing

22:18

things in and it's nice to

22:20

be or you'll have like

22:22

a slider where you got to like adjust

22:24

the value on there and it's nice when

22:27

the action that needs to happen is closer

22:29

to your thumb so you don't have to

22:31

sort of adjust your hand to work on

22:34

it. So having a modal that comes out

22:36

from the bottom, big fan

22:38

of that. Also like it's better than it

22:40

coming from the side. Like

22:42

we're all so in love with things

22:44

sliding out from the side. I

22:46

think because that's how the initial

22:49

iOS was made but think

22:51

about sliding from the bottom. That's a

22:53

very native experience to have it slide from the bottom. Another

22:56

thing I need all the time that ends up

22:59

being the same across project to project is

23:01

like the auth forms. Regardless

23:04

of the platform that you're using for auth,

23:06

the login forms very rarely change unless you're

23:08

doing like magic links or anything like that.

23:11

So that's something that I've written once and I

23:13

take with me from product to product because I

23:15

am typically working like a svelte context and that

23:18

way I can just share code between them all.

23:20

But like really what it needs to be is

23:22

the login form and then the text. You

23:25

already have an account? Sign up. You

23:27

click that, it takes to another component. Don't have

23:29

an account yet? Sign up. Forgot

23:31

your password? Click here. And it's like the forms

23:33

are almost always the same and the only difference

23:36

is the API methods in which you're hitting. So

23:39

these form auth components are things I

23:41

bring definitely I've written

23:43

myself because they're not hard but I bring

23:45

them from project to project because I think

23:48

they're almost always the same. Yeah, those are kind

23:50

of interesting. I wonder if

23:52

you've seen any like interesting sign

23:54

up features

23:57

as of late. I

24:00

love the ones that I've seen and I find

24:02

this really handy especially when you're trying

24:04

to input your email on like

24:07

you go to a restaurant and it's like, yeah,

24:09

I do want to email you the receipt and

24:11

you're trying to type in your email on some

24:13

like Android keyboard you've never used before.

24:15

I'm sorry, I'm going to stop you right there.

24:17

Android keyboards are way better than the iOS keyboard.

24:20

I will die on that hill. The

24:22

iOS keyboard sucks comparatively. I'm not used

24:24

to the keyboard. I'm also not

24:27

used to the like Panasonic

24:29

Galaxy like 1992 tablet that

24:31

they're using and you're trying

24:36

to type in your email address on this like

24:38

the keyboard. So I often

24:40

love it when they have the

24:43

at Gmail or at Yahoo and there's

24:45

just a button because like, whoo, there's not as much

24:47

work I got to do there. You

24:49

can just you can tap it and auto complete it.

24:52

So I like that as well as

24:54

I need to do this for

24:56

my checkout experience as well as the amount

24:58

of people that spell their email address incorrectly

25:01

is extremely high. So

25:03

I'm thinking like, okay, first of all,

25:05

I need to like look for common

25:07

goof ups like did you did you

25:09

type G now and you

25:11

meant Gmail? I should catch that before it

25:14

happens. But also like I

25:16

want like after they submit it, I want

25:19

to like show them. Alright, we've sent it

25:21

to this email address and just give them

25:23

like like 10 minutes. Oh, yeah, where they

25:25

can correct it because like, probably

25:27

10 20% of my support is I bought this

25:31

and never got it, especially like I bought

25:33

this, I'm ready to learn. And

25:36

like, hopefully, somebody's around to do it

25:39

either myself or my assistant to do

25:41

the support, but it's not

25:43

always the case. So just

25:45

such a common thing. Obviously, auto complete fixes a

25:47

lot of that, but I still see quite a

25:49

bit of people goofing up

25:51

their email addresses. Yeah, yeah,

25:53

off farms are one of those things that bug me

25:56

don't make me give you too much information. Don't make

25:58

me give you my full name or phone number

26:00

or something like give me the option to

26:02

just log in with a straight up email

26:04

and password please I have a password manager

26:06

works really well so like I

26:08

hate it when when off forms are like that

26:11

or honestly I don't like

26:13

magic links I'm gonna say yeah yeah

26:15

magic links so

26:18

a magic link system is a system where

26:20

you enter your email and what it does

26:22

is it sends you an email to log

26:24

in you click it you're logged in therefore

26:27

you don't have to set a password or

26:29

anything like that the reason they

26:31

bugged me is like I don't always want to have

26:33

to go to my email to log in I don't

26:35

want to have to navigate

26:38

off the app especially if I already have an account

26:40

if I already have an account I don't want to

26:42

have to go here then go there

26:44

I already have the username and password

26:46

just let me enter it getting in the site

26:48

I feel like it just takes too

26:50

many steps and if somebody with ADHD in

26:52

that process of signing up and going to

26:54

my email there's a good chance I'm gonna

26:56

get lost oh

26:59

another email let me take care of this it's

27:03

so frustrating so I like the

27:05

magic link experience when

27:07

it's something that I don't have to log

27:09

into all that often or something I maybe

27:12

I don't have it in my password manager and the

27:15

the frustrating thing is that us techies

27:19

us developers we

27:21

want to use two-factor authenticator apps

27:23

we don't want text message codes

27:25

sent to us we want to

27:27

be able to use password managers

27:29

we don't want these magic links

27:31

sent to us however the vast

27:33

majority of the world doesn't

27:36

use password managers doesn't use

27:39

like a two-factor authenticator app or they're gonna

27:41

get locked out of it and they're gonna

27:43

cause a whole bunch of support so there's

27:45

a reason why companies do this because

27:48

it's it's easier for people to get into

27:50

to what they're doing I just wish that

27:52

like like Claude is one of these Claude

27:54

AI they sign me out like

27:57

every 12 seconds like I feel like every time I

27:59

use it a sign me out. Now

28:01

I gotta type in my email address. I

28:03

gotta wait for the email to show up

28:05

and that's sometimes like 30 seconds. So

28:07

I'm just kind of sitting there, got to

28:09

wait for my email client to refresh itself.

28:12

And then finally you get the code, you got to copy the

28:14

code, you paste it in or

28:17

you click down the link, then you got to delete the

28:19

email. Such a pain in the butt. I rather just auto

28:21

one password, automatically sign in.

28:24

Pasquis obviously gonna solve

28:26

a lot of that. I've been seeing a lot

28:28

more Pasquis pop up recently and I'm really happy

28:30

to see that. I

28:32

think the thing is just give me an option to do an

28:35

email and password if you can. Exactly. The

28:37

time I like the Magic Link the most

28:39

is when I'm writing the authentication system because

28:41

it's easier to do and I have to

28:43

do less work. So

28:46

I don't like it as a user, I like

28:48

it as a developer. Let's talk dialogue and modals.

28:50

Dialogue and modals are something that we need

28:53

all the time and now with the advent

28:55

of HTML dialogue and modals, it's going to

28:57

make our dialogue and modal components much easier.

29:00

At least easier to write so you

29:02

won't have to do the whole portal

29:04

and come up with your animations and

29:06

write your state for these things. You're

29:08

not just going to be able to

29:10

do it with the HTML versions of

29:12

this. So you know what, I do

29:14

end up even writing a wrapper around

29:16

dialogue and modal. I usually end up

29:18

doing this just because, hey, I like

29:20

to have my own interface guidelines

29:22

where I have buttons, how I like the

29:24

things to work, how I like the things

29:26

generally to be styled. I'll wrap up the

29:28

styles in that. So I will typically

29:31

almost always write my own dialogue

29:33

component, but there's a lot that can

29:35

be done with out of the box ones for you.

29:38

Yeah, I feel like the

29:40

dialogue and modal. So dialogue is something

29:42

that will pop up on the top

29:44

layer of your website and then you

29:47

can also have the option to make

29:49

it a modal or you can open

29:51

it modally, meaning that you can open

29:53

it instead of it being part of

29:55

the context. It will just overlay the

29:57

whole website and make the rest of

29:59

the the website the word is inert

30:01

mean that the rest of the website is

30:04

not clickable it's still a scrollable which is

30:06

a bit odd I hit that yesterday where

30:09

you still have to disable scroll bars but

30:11

you can do it entirely with CSS you

30:13

could say when the HTML

30:15

has an open modal then overflow

30:17

hidden on the HTML element or on the

30:20

body and it's nice that you

30:22

get the backdrop property now so we can style what

30:24

it looks like behind the modal instead of having it

30:26

animate them it's

30:29

amazing like you could do a modal

30:31

with very little JavaScript the only JavaScript

30:33

you need is to open it you

30:35

can close it with a

30:37

with a form element yeah

30:39

you probably still want to hook up like

30:42

a button to close it but also like

30:44

the escape is already a bound

30:46

you don't have to do this weird like

30:48

global listen for escape but then if it's

30:51

not open like usually what

30:53

you do is you listen for an escape or you

30:55

listen for a key up you check if it's

30:57

an escape and then if it is an escape you

30:59

check if the modal is open and if that is

31:01

then you add a closed button

31:03

you set some state you don't have to

31:06

worry about any of that anymore which is it

31:08

was pretty sweet and it's in all the browsers

31:10

now isn't it yeah and it's it's

31:12

great this is a you

31:14

know yeah I don't know if you

31:16

missed this West because I actually missed

31:19

it even though I probably retweeted it

31:21

at some point but popover which came

31:23

later than dialogue popovers and all the

31:25

browsers we don't just have the

31:27

dialogue we have popover now

31:29

and everything so what's the

31:32

the difference between popover and

31:34

dialogue cool so okay let me

31:36

tell you popover is you can make anything a

31:38

popover and it really just happens to be an

31:41

attribute that you put on something so let's

31:43

say I have a like I

31:46

made my toast message system that I built

31:48

recently using popover so I have the wrapper

31:50

that all the toast messages appear on it's

31:52

a div and that I

31:54

have a property or an attribute

31:56

of popover and that can be said

31:59

to either or manual. Manual means

32:01

you have to open and close it manually.

32:03

Auto means that if you click off of

32:05

it, it will close itself. That's it. Click

32:07

outside. But that's all you need to do,

32:10

is you give something popover equals

32:13

auto, popover equals manual, and

32:15

then when you call JavaScript to show

32:17

or hide that popover, it puts the

32:19

thing on the top layer and

32:21

it makes it visible. If it's hidden,

32:24

if that popover is hidden, it makes it

32:27

invisible. There's some

32:29

interesting CSS properties around this

32:31

too, Wes, that we can talk about

32:33

later, like transition behavior, allow

32:35

discrete. Have you ever heard of that?

32:38

No. Yeah, we'll talk about more about

32:40

that, but it's how you can animate certain things that

32:42

you couldn't have animated before. Oh, man.

32:44

Like, I know we did a show about popover

32:47

a while ago and I was

32:49

getting into like dialogue and modal yesterday and

32:51

I was trying to think like, hmm, when

32:53

would I use a popover and when

32:55

would I use a dialogue? And it

32:58

seems like popover can be open and

33:00

closed entirely with HTML, which is, I

33:02

just said, not the case with dialogue.

33:05

Yeah, popover is simultaneously

33:08

like it's less work,

33:10

but it's also lower level in terms that

33:12

you can make anything into a popover where

33:14

dialogue maybe is more useful for

33:16

modals and dialogues and alerts, those types of

33:18

things where popover is just really anything that

33:21

you want to pop on the top layer.

33:24

And once we get CSS anchoring,

33:26

we'll be able to do tool

33:28

tips with popovers as well, right?

33:31

Or like a little user menus,

33:33

little menus and things and stuff. Dropdown

33:35

menus. Yeah. Anchor is

33:38

like the one that I had to write my

33:40

own like, you know, JavaScript to do

33:42

anchoring for me, but we have anchor

33:45

in Chrome. It's not anywhere else. So

33:47

hopefully we get that thing. Yeah.

33:50

And the way I like to do a lot is confirm like

33:52

a confirmed system. And, you know,

33:54

it depends on how you want this to be. I have

33:56

like a Are you sure about that button where you have

33:58

to click it and X amount. amount of times. I have

34:00

to click this three more times. It tells you how many

34:02

times you want to click it. That's not something I'm going

34:04

to give users typically, but

34:07

the confirm button typically works just like you click

34:09

delete on something and a modal pops up and

34:11

it's like, are you sure you want to do

34:13

this? Yes or no? Yes. Okay, let's go. So

34:16

that's like a two step verification process.

34:18

A confirm button is usually a combination

34:21

of a button that triggers

34:23

a modal, that modal pops up and if

34:25

you hit yes, then that runs the action

34:28

of the initial button and I usually wrap

34:30

that up into one component. Confirm button, here's

34:32

the success action, here's the cancel action, here's

34:34

the text, here's any sort of properties

34:37

you might need. Just wrap that all up

34:39

into one little confirm button component. I've

34:42

written my own confirm

34:44

and prompts based on

34:46

promises with the

34:49

new deferred with resolvers

34:52

and it's really cool because it's obviously

34:54

easy to use prompt and confirm in

34:56

the browser, but those UIs, first

34:59

of all, it doesn't look good. Second of

35:01

all, it's frustrating to you

35:03

can't style it, you can't pre-populate

35:05

or you can pre-populate data, but

35:07

they're very limited. So

35:10

I've written them myself with

35:12

the dialogue where you can

35:14

put an input in there and then you

35:17

can just wire up the buttons to confirm

35:20

or cancel. Those can be resolved and

35:22

reject and then you can also pass

35:24

the data if you have an input

35:26

in there, which

35:28

is pretty nifty. So those are

35:31

a fun one to build, especially if you want to get

35:34

some promise exercise, doing

35:37

something with promises that is not fetching

35:39

data, waiting for it to come back because it

35:42

could also be simply just waiting for a user

35:45

interaction. Let me even just say

35:47

this, Wes, because I think this is

35:49

a good thing to say as a part of

35:51

this conversation, if you

35:53

want to become a better developer, take

35:56

this list of common components that

35:58

we're talking about and just Just go one

36:00

by one and build them all. Because so

36:03

many times everybody just grabs them from this

36:05

library or this library or this

36:07

library, and that's great. For productivity, great.

36:10

But if you want to really get

36:12

into how do I become a better

36:14

React or Svelter view developer, implementing

36:17

these patterns will make you a better developer.

36:19

You'll get to see exactly how this stuff

36:21

works. You'll get a lot of experience. And

36:23

I think that's a good technique to do

36:25

at least once or twice in your dev

36:28

life. A component I really like that I

36:30

don't see often talked about is like an

36:32

admin menu. If you

36:34

are logged in as an admin, I show you

36:36

the admin menu on the Syntax website. And

36:39

this is just my old habits from the days

36:41

of WordPress and Drupal where I had a little

36:43

menu that took me anywhere I wanted to go

36:45

with any of the admin tools. I want to

36:47

go here from here. Your

36:49

site admin or your site navigation doesn't always include

36:52

all the links in your site or the places

36:54

you might want to go. So

36:56

again, if I'm logged in, I almost always have an

36:58

admin menu. I built mine. I'll show you to you

37:00

in the Svelte repo here that you can check out.

37:03

But it's really handy when you're not always reaching for

37:05

the URL bar to type in where to go. You

37:08

can just, alright, let's go. While

37:10

we're on this, I sent you a pull request like two

37:12

months ago. Okay. Four

37:14

years Svelte side menu. Let's

37:16

do it. Yeah. Let's merge

37:18

it live on air here. Yes, I'll do it. It

37:22

was like a Svelte four upgrade path

37:24

or something like that. It's like a warning. It's

37:26

throwing a warning of something that's going to break

37:28

soon. Yeah. I fixed

37:30

it. If I do that, okay, cool. That would be

37:32

upstream. I will merge. There

37:35

it is. And deploy a new one. This

37:37

is also why I love the whole copy

37:39

paste component run

37:42

we're having right now. Because

37:45

if that component was just a component in

37:47

our code base, then

37:49

I could have fixed it. Anyway, yes. Let

37:53

me tell you, I thought about this deeply. I

37:56

thought about this so deeply and I gotta

37:59

say. I came up with a solution

38:01

and I'll talk about it right now because

38:04

we don't have a ton of time left in this episode But

38:06

we can talk about it more later on another episode. I built

38:10

a system that has it's based off

38:12

of an old meteor feature that nobody

38:14

else has really done since meteor and

38:17

in my Starter kit that

38:19

I'm building. I have a packages directory that

38:21

lives inside of source source packages inside

38:24

of that are all of

38:26

the local packages and to

38:30

Essentially have your own version of any package

38:33

you just put the package in there and

38:35

then it automatically becomes part of the workspace and

38:38

Just like a shad CDN component or whatever

38:41

that you're bringing into your own site You're

38:43

bringing in packages and throwing them directly in

38:45

there now This kind of falls

38:47

apart the moment that you get into Really

38:50

deeply compiled local

38:52

packages But in

38:55

the svelte world or even in the react

38:57

world You don't necessarily need

38:59

to compile that sucker if you're consuming

39:01

it So you could link

39:03

direct you could bring in a package

39:06

like a svelte package You could maybe

39:08

modify the package dot JSON to point

39:10

to the svelte file itself that you

39:12

want to change Just change it

39:14

right there and it's not trapped

39:16

inside of node modules It won't get

39:18

overwritten when you do the NPM install

39:20

business Then the site site can recognize

39:22

it as if it was the normal

39:24

package import itself I

39:26

don't know if this is a great pattern, but

39:28

it's from meteor and I really liked it there

39:31

and Working with it

39:33

right now. I think it's kind of neat. So

39:35

I'm gonna explore it a little bit That's

39:39

essentially some mono repo. Yeah,

39:41

yeah, it's a mono repo

39:43

But it's the mono repo stuff is included

39:45

as a part of the app and instead

39:47

of like the way most mono repos Are

39:49

is you have the mono repo and you

39:51

have all your different app packages? This is

39:53

like here's the site Here's the app and

39:55

inside of that are consumable Modifiable

39:58

local packages Yeah, local packages. Or

40:00

don't say like ejecting, you know? Like I don't

40:03

want to take it from this package. Exactly.

40:05

I think about it like a WordPress child theme is

40:07

what I think about it like. Yeah. Yeah.

40:11

Okay. So we'll talk about it more about that. If

40:14

you're ejecting, you're like, you're

40:16

abandoning all future updates and all functionality

40:18

from the parent, right? Yeah, I guess

40:20

this is more like copying a theme

40:23

and then having it. Yeah, yeah, exactly.

40:25

Yeah. Alright, I also use

40:27

mobile only and desktop only components sometimes. And

40:29

these are really just presentational. They could be

40:31

done in classes as well. And

40:34

maybe the mobile only or desktop only is just

40:36

showing and hiding based on breakpoints. That's

40:39

something I tend to have just nice and easy.

40:42

Client only is a component that I'll

40:44

have frequently, which is basically, hey, only

40:47

do this component if the

40:49

browser exists, if

40:52

document exists, then therefore render this

40:54

component. And this is something

40:57

I tend to need an admin table. If you

40:59

have any sort of backend, typically you're going to

41:01

have a big old table of all your data,

41:03

having a sort search filter,

41:05

and then maybe like being

41:08

able to set actions in the columns like delete

41:11

the transcript or import this or that or

41:13

whatever. I end up building those a lot

41:15

myself. Yeah, I want to extend

41:18

our we have like a pretty beefy

41:20

little admin table that just takes a

41:22

I got all that. That's one I've

41:24

built probably seven or eight times the

41:27

dump component. I've I even

41:30

I've published it on NPM. I think

41:32

it's called I think it's just

41:34

called dump and it will

41:36

take an object and loop over the

41:39

keys and depending on the type

41:41

of the value of the key, it will like

41:43

if it's a number or if it's a date,

41:45

it would just display the value in

41:47

a table. But then it's recursive, meaning that if

41:49

you have an object and nested an object, it

41:51

will just go forever. And

41:54

I've often thought about being able to make

41:57

that editable as well. But then I. Also,

42:00

at that point, you're essentially just using

42:02

like a, what's

42:04

the Prisma thing to edit

42:06

your data directly? Yeah,

42:09

let me tell you, I built this. I built this

42:11

exact thing that you're talking about. And it

42:13

is an extension off of my Svelte slide menu.

42:16

And it again was based on a Meteor

42:18

package, Meteor toy. And again, what

42:20

it does is it loops over all the data

42:22

and it just makes them data inputs. And the

42:24

way that Svelte reactivity works, I don't

42:26

know if I'll have to, I'll definitely have to change this for

42:29

runes, but the way it worked is you just update the stuff.

42:31

So I just made it all inputs,

42:33

put the thing in, put a bind to the

42:35

value on there, bingo, bango. You have editable

42:38

data that you can edit in the

42:40

side menu as a dump and

42:43

it updates it on the site. It might not update

42:45

in the database, but it's gonna update it right there

42:47

in the site or sort of like give you the

42:50

global state toggle. So it's like a dev tool. I

42:52

like it. There's probably a lot

42:54

of edge cases where like, oh, then you

42:56

have validation and- Number values and- Yeah, number

42:59

values and how do you convert back? But

43:01

like there's a lot of like common use

43:03

cases. Like we had the- Totally. The

43:06

other day I wasn't in the chat, but

43:09

the AI, the descriptions

43:11

on the syntax of every episode is generated

43:13

by AI. And it had

43:15

like, it switched a century with

43:17

sanity, probably because we have a,

43:19

I give it a list of like commonly

43:21

said words and

43:24

it must've switched the one. And

43:26

we're like, oh crap, like we gotta edit that

43:28

quickly. And we didn't have

43:31

a way to directly do it. And

43:33

a CJ just went straight into the

43:35

database and changed it. Yeah,

43:37

we gotta have it. That's on our to-do

43:39

list. Another component that I end up writing

43:41

a lot is a share and social links.

43:43

The share API within the browser

43:45

is a total mess. So good luck there.

43:47

But you can check out what we do

43:50

on the syntax site for a share component

43:52

because typically what I do, even

43:55

though the share permissions or

43:57

share feature exists.

43:59

exists in the browser. It's every

44:02

browser handles it so incredibly

44:04

differently. I'll pretty much always

44:06

say if mobile then

44:09

use the native browser share functionality

44:11

because the mobile native share functionality is

44:13

good and if it is desktop. Here's

44:16

a bunch of like the share links when

44:18

you click a link and it's a link

44:20

to create a tweet or something like that

44:22

with the URL instead of using the native

44:24

functionality because I don't know why

44:27

they fail so hard on that but it

44:29

feels like there should be

44:31

a better solution like OS wide

44:34

to handle share dialogues on desktop. Yeah,

44:36

I agree. It's not great and

44:39

like that there is

44:41

a good use case for detecting

44:44

if you're on mobile. I had

44:46

shared the worst like a code snippet

44:48

from that file where

44:50

you're trying to detect if it's mobile

44:52

or not. Yeah and I got roasted

44:54

because you're not supposed to feature detect

44:57

or no you don't check for devices

44:59

check for features and that's the

45:01

case or like it has the share feature but

45:04

it sucks so you have to check

45:06

like there's no there's no function

45:08

called check for sucky share

45:10

feature you know so in that case

45:13

you literally have to check if it's

45:15

if it's an iOS device or not.

45:17

Yes that bugs the that bugs the

45:19

time in fact I have a whole

45:21

video on that

45:23

exact conversation in my exploring browser APIs series

45:25

that I'm releasing on YouTube right now is

45:27

a level of yeah I mean series but

45:29

it was a whole thing why do we

45:32

have to browser detect for this when we

45:34

should be featured detecting for this and what

45:36

are the pitfalls here why user agent is

45:39

a nightmare to have to detect off of

45:41

and like what we can do to

45:43

solve that all right let's rattle through

45:46

a couple more here I use a markdown

45:48

renderer very frequently just

45:50

render markdown take a take a

45:52

markdown in render it sometimes

45:54

I do that server side but many times I'll

45:57

just pop it into a component tabs we

45:59

have tabs on the syntax site for the transcripts

46:01

and stuff like that. Sometimes tabs need to be

46:03

changed with routes. Sometimes they're just

46:06

straight up tabs, but I hate tabs all the

46:08

time. A user menu, so it's like the avatar,

46:10

you click on the avatar, it drops down, maybe

46:12

there's a link to profile or whatever, and then

46:14

a logout button. You need those all the time.

46:18

Icon component, I know

46:20

icon components are controversial

46:22

in many ways, but oftentimes it's just a big

46:24

old switch statement of different icon

46:26

options that you can have. I

46:28

think that's a bit more of a problem than in

46:31

other ecosystems. A loading component

46:34

usually just like... Why? Well,

46:36

okay, hold on. People are probably wondering why. Why

46:38

is that a problem in React? That's

46:42

a great question. I've just been told

46:44

not to do it in React, and since I don't write React, I

46:46

don't really know. I would assume

46:48

it's because of how it's rendered repeatedly. The

46:52

reason people say don't do it in React is because an

46:54

icon is SVG and it is put

46:57

into your bundle. If

47:00

you have a whole bunch of icons,

47:04

then all of that SVG is going to

47:06

be put into your bundle and it will

47:08

make that bundle large, especially if you need

47:10

to download that whole bundle first. It's

47:13

the same case in Svelte. We do this.

47:15

We put our SVGs in a file, but

47:18

I honestly don't think it's an issue. Our

47:21

Svelte site is really good at just requesting them

47:24

as needed. I don't

47:26

know if it's really that big of an

47:29

issue. The whole where should icons go and

47:31

if you need to change the color of

47:33

them is always such a

47:35

tricky thing. Obviously, it's nice to just use the

47:37

image component, but then you give up the

47:40

ability to do changing the

47:42

fill. Which is almost what you need

47:44

all the time. Yeah, I get there

47:46

are SVG's. Do I not just have fill on

47:49

an image tag? I know. Yeah,

47:52

that to me is one word. Am

47:54

I going to need to change the icon color?

47:56

Most likely, especially light to dark mode. Is

47:58

it just a straight up SVG? it's not like

48:00

an icon, then that conversation becomes different.

48:03

But icons, yeah, I almost always need

48:05

to render those out. Loading

48:08

components usually just either for me sometimes just

48:10

an SVG with an animation or just sometimes

48:12

a CSS animation, but it's nice to be

48:14

able to just drop a loading component. Maybe

48:16

that loading component shows up automatically

48:18

on its own after a delay time, a certain

48:20

amount. You can juice that up a little bit

48:22

to have it be a little bit more interesting

48:24

than something you're just showing and hiding based on

48:27

a state value. Yeah, I like the ghost loaders

48:29

a lot. I feel like

48:31

I need to put those into my application a little

48:33

bit more. I prefer a ghost loader that kind of

48:36

gives you a bit of context for what will be

48:38

showing up rather than just a spinner.

48:41

Yeah, you know what Grinds My Gears is

48:43

about? This is the Grind My Gears episode. Grinds

48:45

My Gears about ghosts is when the

48:48

layout, the ghost layout shows up, the

48:50

skeleton layout or whatever, and

48:52

then when the actual content loads, it's not

48:54

in the same position or the same layout.

48:56

I like the real content to show up

48:58

in the exact spot and fade in on

49:00

top of that. Otherwise it

49:02

just feels lazy to me. Yeah,

49:04

you kind of have to have

49:07

a pretty well-defined structure. If

49:09

it's a blog post, you might

49:11

not know what the

49:14

skeleton is going to look like until

49:17

you have the content

49:19

on there. Yeah, for sure.

49:22

Drop-down menus, very similar to the user menu.

49:24

With three dots, you click it, drop-down menu

49:26

is a perfect place to flex your pop-over

49:28

skills but also going to be way easier

49:30

with the anchor positioning. And lastly,

49:32

but not leastly, I think this is one that

49:34

most sites need is an anchor or an

49:37

accordion, not an anchor, an accordion, animated

49:40

accordion. Also way easier now

49:42

that we have the details in HTML.

49:45

Yeah, but I've never- The

49:47

details element. Can you

49:49

style details now? Because

49:52

I've always used details. It's

49:54

like input type of date. Yeah.

49:57

It's ugly. It's there. But, oh no, I'm just looking.

50:00

I'm looking at

50:02

the example here on MDN. You can style it.

50:05

I don't know if you can. Can you

50:07

animate it? Yes,

50:09

you can animate it, but I don't think it's

50:11

as easy. You know what? I feel

50:13

like you should just be able to play. Unfortunately, at the time, there's no way, built-in

50:16

way to animate the transition between open and

50:18

closed. Yeah, but I think you can do

50:20

it with JavaScript is what I'm saying. You

50:23

have to really... Oh, yeah.

50:25

Yeah, so that's the why it's nice to have a... There's

50:28

no CFS way, which would be nice. Yeah,

50:30

I agree. It would be nice to go

50:32

a little further on those types of things

50:35

because I feel like a lot of these

50:37

early custom components we got

50:39

in the browser,

50:41

it was like, oh, these are

50:43

awesome. We finally have input type of date. That's always

50:45

the one I keep going back to. But

50:48

nobody's going to use it because it's not very good. It's

50:51

okay for a demo or okay for a little

50:54

admin UI if you just need a quick one. If

50:57

you actually want a nice experience, then

51:00

you're going to have to reach for a custom one. And

51:02

accordions are really painless to build to. Again,

51:04

that's a great one to build. The hardest

51:06

part about building an accordion is the animation

51:08

part of it, but even then, because you

51:10

have to do animate zero to auto. But

51:14

Svelte makes that really easy. Guess what you

51:16

do? You put a transition slide. That's

51:19

all you do. You don't even have to think about it. You don't

51:21

have to write any CSS. It just works. Tech.

51:24

Well, those are the common components that I feel like I

51:26

need. And maybe what grinds our

51:28

gears a little bit about each of

51:31

these components. But I do think this

51:33

is a great roadmap for you to

51:35

really understand interface

51:37

development. Maybe some common things, what works, what

51:39

doesn't, why things need to be complicated here

51:41

or there, which things you can build your

51:43

own. And honestly, sometimes the best tools are

51:45

the ones you build your own. And sometimes

51:47

the best tools are the ones you just

51:49

import and call it a day. So

51:52

let us know what are tools that you end

51:55

up building yourself every time because you don't like

51:57

the ones that exist in user lander.

52:00

that you always take from user land.

52:02

Let us know in the comments, the

52:04

best place to reach us is on

52:06

YouTube. So hit us up at YouTube/at

52:08

syntax.fm, leave a comment on this video

52:10

and let us know. Let's

52:13

get into the part of the show where

52:15

we talk about sick pics, things that we

52:17

pick that are sick, things that we like

52:19

and enjoy, things that are just vibing with

52:21

us right now. I'm gonna sick pick a

52:23

book, Super Communicators. I

52:25

just finished this book and

52:27

I found it to be really nice. I'm

52:30

a self-help book kind of guy. I like self-help

52:32

books. I think I may have talked to even

52:35

about this book on the show before. If I

52:37

haven't, this is a great

52:39

one to check out. Super Communicators to me was

52:42

something that, now that I've

52:44

gone through it a couple times and have

52:46

really taken the time with it, I do think

52:48

I'm going to approach most conversations in life

52:50

just a little bit differently. Certainly

52:53

we'll approach arguments very differently, whether

52:55

that's online or otherwise. I

52:59

found this book to be really great. Like

53:02

I said, if I have mentioned it on the show, just

53:04

know that this is a double down on that pick. I'm

53:07

going to sick pick something that's gonna

53:09

make all the mechanical keyboard folks very

53:11

angry. It's an app called

53:13

Clack. This

53:16

sounds so stupid, but it's so good. It's

53:19

an app that makes mechanical keyboard

53:21

sounds as you type. I

53:25

first installed it as a joke because

53:28

I was like, oh, I'm gonna record a couple TikToks and it'll make me look

53:30

like a pro with

53:32

a really loud clickety clackety. And

53:35

I turned it on and I was like, I

53:37

really like this. This sounds nice.

53:39

It makes me feel calm for some reason as

53:41

I'm typing. And

53:44

people get mad because I

53:46

have lots of mechanical keyboards. I've tried them all. It's

53:48

not for me, at least not right now. I'll

53:51

try it again in a while, but I just

53:53

like my Apple keyboard, but I like the sounds

53:55

that it makes. So if you want cool

53:58

sounding, click Clack. you're typing,

54:00

they are different sounds for

54:02

every key and a lot

54:04

of people are complaining about latency but it

54:07

has no latency for me and I'm even

54:09

wearing Bluetooth headphones. So check it out,

54:11

it's like four bucks but then also a couple

54:13

people recommended this other

54:16

one called MechVibes which

54:19

has all like hundreds of sound packs available

54:22

so you can download. This one only, the

54:24

one I use Clack has like three different

54:26

types of keyboards you can choose from but

54:28

this one has like a hundred different

54:30

keyboards that you can download sound

54:33

packs for and it is free

54:36

and open source as well which is probably

54:38

a good thing if you're installing like a

54:40

key logger on your system.

54:44

Oh my gosh that's that's wild. I cannot say I

54:46

would reach for one of these but maybe I'll give

54:48

it a try just for fun. Try

54:50

it, I don't know what it

54:52

is but just I love it. It makes me feel

54:54

more productive and focused and calm

54:56

I don't know. Yeah that's

54:59

sick. Cool well I'm gonna

55:01

shamelessly plug the YouTube channel

55:03

on youtube.com/at syntax FM again.

55:05

Normally we're releasing every episode

55:07

as a video episode which

55:09

is fantastic. We're also releasing

55:11

level up tutorials premium content from

55:14

the that was behind the level

55:16

up tutorials paywall we're putting it

55:18

into playlist and CJ is releasing

55:20

videos every week. The latest one

55:22

is all about setting up coolify

55:24

and wow he did a

55:26

straight up like deep deep

55:28

deep dive into into coolify and

55:31

it is really fantastic. So if

55:33

you want to get all that

55:35

and more check out youtube.com/at syntax

55:37

FM. Wicked alright thanks everybody for

55:39

tuning in we will catch you

55:41

later. Peace. you