0:15

Hey folks, we are

0:15

back at iamdeveloper.com live.

0:19

That's the new tagline. I'm switching it up.

0:21

My name's Nick Taylor, your host,

0:21

and I'm hanging out with Chan today.

0:25

Chan, how you doing?

0:27

Hey, what's up? I'm doing really good. Thanks for having me on.

0:29

It's it's fun to actually get to hang

0:29

out with you cuz we've, I think we've

0:33

hung out in like, I think the last

0:33

time I remember hanging out was like

0:38

at a conference online type of thing.

0:42

Yeah.

0:42

We're talking about

0:42

Suspense maybe, or something like that.

0:46

I'm trying to remember which one it was. I don't know if it was, Is it,

0:48

Did Reactathon have a virtual or

0:53

I feel like it was

0:53

even before, Yeah, maybe it was.

0:56

When was that? Maybe it was like last year's,

0:57

like React Advanced or something.

1:01

Oh yeah, maybe it was that. Yeah.

1:03

I feel like it was like

1:03

winter or like fall, winter time.

1:08

I remember you were just

1:08

running a room there and then you're

1:11

like, "Hey, anybody want to come say hi?". So I was just like, Hey.

1:16

It was nice. It was good to, you know, you see

1:17

all the, meet all these people

1:20

online in like low fidelity, which

1:20

is like an avatar and like, you know,

1:23

whatever they're, you know, putting

1:23

out online and it's really nice.

1:26

Yeah.

1:26

When you get to actually like, hang out in a room with somebody and talk and get some, you

1:28

know, texture of, you know, whatever

1:32

they look and act like and it's.

1:35

Yeah, no, for sure. I definitely hear ya.

1:37

And we had our offsite for

1:37

Netlify recently, which was

1:41

in Hawaii, which was awesome. But it was, you know,

1:43

it to go another level.

1:46

It was, it was really nice meeting

1:46

a lot of my coworkers in, in person.

1:49

Obviously, you know, COVID's still

1:49

around but good old pandemic, but

1:53

it was still great to see everybody. I know a lot of people probably know

1:56

who you are, but for folks that, cuz

1:59

I know we get all walks of life coming

1:59

in, checking out the stream, so some

2:02

people just starting out their career

2:02

so they might not know who you are.

2:05

So if maybe give the TLDR of who you are.

2:09

Yeah, for sure. My name is Michael Chan.

2:12

I go by Chantastic on the internet.

2:14

I think probably my biggest claim to fame

2:14

is, I had a podcast called React Podcast.

2:19

I did that pretty diligently weekly

2:19

for, two and a half years maybe.

2:25

And, you know, things happened

2:25

and, it became really difficult

2:29

to, to produce after that. I kind of have some like, I

2:31

guess maybe like older energy.

2:35

So I think that there's not a lot

2:35

of stuff that I've done recently

2:38

that people who are like newer

2:38

into this field would know about.

2:41

I love podcasting. I love like live stuff.

2:44

I've been trying to do a little bit

2:44

more on YouTube, these days get some of

2:48

the things that I've learned over the

2:48

last, I don't know, 15 plus years doing

2:52

this stuff, like outta my head and,

2:54

Yeah.

2:54

And onto a page somewhere.

2:57

That's how I came to know you

2:57

originally was, through the React podcast,

3:02

which is a great podcast if, if folks have

3:02

never checked it out, even just listening

3:06

the old catalog, it's, it's really great.

3:09

Thanks.

3:09

I know nowadays,

3:09

I'm in your Discord.

3:11

I'm more of a lurker in the

3:11

Discord, but you run, it's,

3:14

it's called lunch.dev, right? Is that right?

3:16

Yeah, yeah, yeah. The easiest way to get there is if you

3:17

go to Discord dot G G slash lunch dev.

3:21

I'm gonna be reworking the website,

3:21

but the lunch dev site goes to

3:24

some old courses that I have sold.

3:28

Really great community over there. We have like a ton of

3:29

really, awesome people.

3:32

I have really enjoyed that space.

3:35

It kind of like started to grow

3:35

at the time that, like React

3:38

podcast was on the downturn.

3:40

Just really awesome people there. One of my favorite things is just that,

3:42

you know, there's a lot of, hyperbole

3:47

and anger and hype and, you know, this

3:47

versus that online in the Twitter space.

3:53

Yeah.

3:54

And it's really nice to

3:54

have like a lot of that happening

3:57

and then have a space to come back

3:57

to and be like, Okay, let's actually

4:00

talk about this, like humans. What do these, you know, technologies

4:03

or these movements or kind of like,

4:11

what, what does the hype actually

4:11

mean for like, our real life?

4:15

I really love that.

4:17

And there's a ton of really, creative

4:17

people in there, you know, a lot of

4:20

people who you know are, are in our

4:20

collective circle, like, Ben Meyers

4:28

ajcwebdev, Anthony who's in chat right

4:28

now looks like, Hey, what's up Anthony?

4:33

Shout out.

4:34

Yeah. Yeah.

4:35

And so it's really been

4:35

a really fun, Lindsay Wardell, like

4:39

really fun place to just kind of learn

4:39

how to do creative things, like learn

4:44

how to stream for the first time,

4:44

learn, test out ideas of like, Oh, hey,

4:50

does, does this thumbnail like work?

4:52

Like, would you click on it? Like, all that kind of stuff.

4:54

So I, I love that space.

4:57

It's super low key and it's just some of

4:57

my favorite people in the industry right

5:02

now are there, and it's just fun to go

5:02

through a work week, with people that you,

5:10

like, and want to have like a casual kind

5:10

of not workplace relationship with, like,

5:17

I love that about, community Discords.

5:22

I hear you. I love my work and my coworkers

5:23

were awesome, but it's nice to

5:28

have other spaces too, for sure. I met Anthony through streaming actually,

5:30

when I was doing the dev.to stream.

5:35

He came on a couple times, I believe,

5:35

and he's been on this stream now.

5:40

Anthony's super cool dude and super

5:40

knowledgeable, even though he hasn't been

5:44

in the space that long, from what he's

5:44

told me, kind of blew up on the scene.

5:52

Yeah. It's so awesome. Big, big shout.

5:57

Anthony's like all over the place. I freaking love it.

6:01

Yeah, I was listening to,

6:01

is it the Modern Web podcast yesterday?

6:06

Cause I go for like a long walk

6:06

at nighttime just to kind of, you

6:10

know, since we sit down all day. I was listening to Modern, I think

6:12

it's Modern Dot Web Dev or it's

6:17

one that, Tracy Lee's company runs.

6:20

He was talking frameworks with a

6:20

friend of his, I think Chris and

6:24

Tracy and a few other people was,

6:24

and it was, it was good, good chat.

6:27

So it's, uh, yeah, it's nice seeing,

6:27

I don't know, it's, you know, the

6:32

pandemic's been rough for a lot of folks.

6:35

Yeah. Anthony dropped it there. Yeah, there was hot takes in it too.

6:39

One thing that I think that's been cool

6:39

about the pandemic, if you can find a cool

6:43

aspect of a pandemic, is just a lot of

6:43

people started doing stuff like streaming,

6:48

more podcasts, just, just hanging out.

6:51

Anytime I've asked somebody, Hey,

6:51

you wanna come do this thing?

6:54

They're like, Yeah, sure. You know, it's like, you know what?

6:56

Not what else do I have to do? But like, I think pandemic just

6:58

made people just come, at least

7:01

the people I've been with. That's, I feel like people

7:02

have come a lot closer.

7:05

I joined like a Virtual Coffee community,

7:05

which I have some good friends there now.

7:10

I still hope the pandemic, uh, goes

7:10

away, uh, soon , but, you know.

7:16

It's, it is really interesting

7:16

like that, that I totally agree with you.

7:18

That is one of the great

7:18

things that came out of this.

7:21

Or it's a, it's a good side effect, Right.

7:23

You know, whatever the impetus ended

7:23

up being, like, I really appreciate the

7:27

side effect, which is, we got a lot more

7:27

comfortable having on line relationships.

7:32

It's at the point now where it's

7:32

like, I don't really remember who,

7:36

I haven't actually met in person now

7:36

because , you know, those relationships

7:41

have been like so well fleshed out. That's a really interesting shift,

7:44

and I think that there's something,

7:48

especially in tech where jobs change

7:48

so rapidly, you know, communities,

7:54

like you said, like, you know, Virtual

7:54

Coffee, like Discord communities, all

7:57

that kind of stuff becomes so critical

7:57

because like, those are your, like

8:00

long term relationships in your long

8:00

term workplace relationships, right?

8:06

It's not really happening on LinkedIn,

8:06

and it's definitely not happening

8:10

on Twitter where you actually

8:10

develop meaningful relationships.

8:12

It's happening in these Discords where

8:12

it's like you actually can have a

8:15

conversation with somebody, get introduced

8:15

to people that you didn't know by virtue

8:19

of like being in, someone else's space.

8:22

You know, just that like linkability too, right? You'd said lunch dev is a

8:24

channel that you lurk in.

8:27

And I do the same thing for a, a

8:27

bunch of other servers, but like that

8:32

linkability to be able to be like, Oh

8:32

yeah, like, you know, Nick's in here.

8:35

Like, we can mention him and

8:35

just kind of like, you know,

8:38

get him in the conversation. That kind of stuff is so cool.

8:41

You can actually feel and

8:41

see the, network effects.

8:45

And I freaking love it. I love it.

8:48

Yeah. No, for sure. And the thing I always say to people too

8:50

is, you'd be a lot more surprised than

8:55

you realize, like, how many people really

8:55

wanna help you or really want you to win.

8:59

You know, like, sure there's yeah crappy

8:59

people on the internet, but like, and I

9:04

say this also being a white guy in tech,

9:04

so I know I have a lot of privilege,

9:08

but, I've just met so many awesome people

9:08

and, I've helped out some people, they've

9:12

helped me out or, or you know, just being

9:12

friends, you know, it doesn't always

9:16

have to be about take, take, take or,

9:16

you know, so it's like, uh, I don't know.

9:20

I've just found it's been pretty

9:20

awesome and like, you know, I've

9:24

been working remote since before

9:24

the pandemic and, I don't about you.

9:29

I, I would to guess it's the same

9:29

sentiment, but I'm imagining you

9:33

probably don't wanna work in an office. Or maybe I could be wrong there,

9:34

I'm just kind of done with it.

9:37

I think.

9:38

Yeah, it's, it's really interesting. It was an interesting shift because I

9:40

think I am a homebody type of person.

9:45

I don't have a lot of

9:45

need to leave the house.

9:49

I like the work from home thing, however,

9:49

it through the height of the pandemic, we

9:55

did have like, you know, our small little

9:55

family did have like this new mode of

9:59

having to learn how to operate together.

10:02

And so I have found, and again,

10:02

I mean this is like an incredible

10:06

privilege, but, so working at

10:06

Chromatic, because it's a fully

10:09

distributed company, they have offered

10:09

to pay for a coworking space for me.

10:13

So I have you know, a small desk

10:13

at a co-working space nearby.

10:17

And that has been like

10:17

the dream setup for me.

10:21

It's like at being able to have a

10:21

place that is like fully separated

10:26

from both workplace water cooler

10:26

stuff and separated from home

10:32

like, Hey, can you get me a snack?

10:34

Or like, Oh, hey, I found

10:34

this like, cool TikTok.

10:36

Separated from both of those things

10:36

where you can just like go and like

10:39

jam out work for a little bit and

10:39

then go back into those other modes.

10:43

It's like freaking awesome.

10:45

Co-working space I can

10:45

definitely see, I, I, I just, you know,

10:49

cuz like you can go whenever you want. For me it was more like, I'm.

10:53

In a big city in Canada. So Montreal, like when I used to

10:55

commute, I'd walk to the train or

10:59

take a bus to the train and then

10:59

I'd take the train and where I live.

11:02

Yeah.

11:03

It's like it would

11:03

take me about an hour to get there.

11:05

And then an hour back and then if

11:05

I wanted to go to the gym, I was

11:08

doing it at my lunch hour and stuff. And yeah, so like there's a lot

11:10

of time lost, you know, And I am

11:13

a sociable person, so it's, it's

11:13

not like I, it's cuz I didn't

11:15

want to hang out with people, but. Working from home now it's like, like

11:18

this morning, like Monday, Wednesday,

11:21

Fridays I workout in the morning. So I'm up at like six 15 and

11:23

then I'm working out at seven.

11:27

I'm done at like eight o'clock. My kids are up going to school,

11:29

and then like I can start my day

11:33

and I haven't lost two hours yet.

11:35

For me that stuff's kind of

11:35

game changer for me at least.

11:39

But I still go meet old coworkers or

11:39

friends for drinks or coffee, cuz like

11:43

you still want see people obviously. I, I found, I found for me, like it's

11:46

been a great balance that I haven't

11:50

looked into a co-working space yet, but

11:50

I know there, there are some folks here

11:53

that I know that do do that as well. So it could be something I

11:55

look at in the future maybe.

11:58

It's interesting like how

11:58

much time you get back when you don't

12:01

have to spend so much time on the road. Like that was kind of like huge,

12:03

like feeling that for the first

12:07

time of like, oh my gosh, like. You know, especially like traffic,

12:09

you know, like everybody's on the road

12:12

like that time of day and, and you

12:12

know, using public transportation, you

12:15

avoid a little bit of that, but you're

12:15

still probably like stuffed into a like

12:19

tube with a bunch of people like that.

12:21

You don't want to be

12:21

stuffed into a tube with.

12:24

Yeah. I I totally, I totally hear you.

12:26

It's having the options is like a really,

12:26

nice, privilege and, and luxury and

12:33

I'm really glad that we kind of have

12:33

been thrust into the future of remote

12:38

work that kind of looked a lot further

12:40

Yeah.

12:40

Away, uh, two and a half, three years ago.

12:44

I find it just gives me

12:44

back some time to stuff for stuff.

12:46

I can meet my daughter after school and

12:46

pick her up, like it's not too far away,

12:51

you know, It was before if I was commuting

12:51

and that, that just wouldn't happen.

12:54

Or I'd have to leave super early

12:54

and then I would be working

12:58

in the evening late, you know? So like, it's, there's a lot

12:59

of things it brings, I think.

13:02

I know I do have other people though

13:02

that they, they like doing the hybrid

13:06

being in an office still too, and I'm

13:06

like, not gonna judge anybody, obviously.

13:10

It's like, if that's what

13:10

works for them, go for it.

13:12

So.

13:13

Oh, totally. Yeah. Some people need that space.

13:16

I don't mean that in, a

13:16

good or bad kind of way.

13:19

It's just like different people, operate

13:19

differently and it, I know that this

13:23

has been a really hard time for a lot

13:23

of people in the same way that it's been

13:26

Oh, yeah, Yeah.

13:27

Maybe. A, a better working environment

13:28

for, uh, the two of us.

13:33

Yeah. No, no, for sure. It's not, I mean, we're, I, I think

13:34

we're pretty lucky in tech too.

13:39

You know, like, like we don't, you

13:39

know, like our job does not literally

13:43

require us to physically be wherever.

13:45

The job is, you know, and I know that's

13:45

not everybody, so I realize that too.

13:50

If you can, I, I just find it's better.

13:51

Oh, it's great. It's great. I love it. I love it.

13:54

Well, speaking of that,

13:54

that's a good segue to talk about like,

13:57

Hey, what are we gonna talk about today? So, ,

13:59

Chantastic: Yeah, yeah, yeah. Correct me if I'm wrong, but are you,

14:01

are you working at Chromatic right now

14:04

or are you like an advocate for the,

14:04

like, I, I don't, I'm not really sure

14:08

how you fit into the puzzle there.

14:10

Yeah, no, no, no, no, that's fine. Um, actually it's, you know, it's,

14:11

it's really interesting and that

14:15

we could, we could talk about that

14:15

for a really long time, but I will,

14:18

I will just answer the question. So I work, for Chromatic, Chromatic is

14:20

a software company that offers a service

14:25

that integrates with Storybook and

14:25

we also build and maintain Storybook.

14:30

We, kind of use the business to

14:30

fund the open source development.

14:34

We have, a number of, I think maybe four

14:34

or five full-time people dedicated to

14:39

making sure that Storybook continues

14:39

to progress, adopts new frameworks

14:43

and features and, bundlers and all

14:43

that kind of stuff, so that we can

14:46

continue to support, the really big

14:46

community of people who are using it

14:51

to build, incredible user experiences.

14:56

I work for them and my job is

14:56

to help, educate people in the,

15:03

ways of Storybook and Chromatic.

15:06

And so I'm still kind of

15:06

coming up to speed on that.

15:09

Every day I feel like I'm

15:09

learning new features.

15:11

I actually came to, you know, Chromatic

15:11

and Storybook, from my last job.

15:16

I was, a frontend architect for a

15:16

handful of years at my last company.

15:21

And, we had a really interesting

15:21

challenge where we had, we were

15:25

building like a white label

15:25

framework, UI framework that needed

15:31

to support, 10 discrete applications

15:31

that were individually themed.

15:37

And were, we were moving towards all

15:37

of them having like a light and dark

15:41

and high and low contrast modes. So that's a, a lot of variations,

15:43

for this, framework to have.

15:48

Yeah, Yeah. Lots. And so I actually did a talk recently,

15:50

both, at React Advanced and then kind

15:54

of more in depth at Reactathon, talking

15:54

about like how that actually multiplies

16:00

out, when you have, just a UI component,

16:00

but then it has like multiple variations.

16:05

It's themeable and you have,

16:05

you know, multiple contrast

16:09

modes and all that stuff. Like how quickly just one component

16:10

can be like tens of thousands of

16:17

possible states, like very quickly.

16:19

Yeah. Yeah.

16:20

Which is kind of insane. And I think that like a lot of,

16:22

front end developers survive

16:25

by just not thinking about it.

16:27

We're like, Well, you know, like if

16:27

there's a problem, it'll just kind of

16:30

like raise up to the surface and, you

16:30

know, we'll, we'll deal with it then.

16:33

But when we actually like, multiply

16:33

the problem out, there's just so many,

16:38

there's such a huge surface area for bugs.

16:41

I came to Chromatic and Storybook

16:41

because I really needed a way to

16:47

help bring the designers and front

16:47

end developers together in a place

16:52

where we could say like, Oh no, this

16:52

actually did break all of these things.

16:56

Right? And it's not because someone has

16:56

some secret knowledge about like,

17:00

Oh, there's this weird edge case

17:00

in this browser and like, whatever.

17:03

But because there was a robot ran

17:03

a visual snapshot between these two

17:08

things, and we can actually see how it

17:08

changed and have a conversation about it.

17:13

I think I had gotten really tired of

17:13

being the person who held all of the

17:17

keys to like, Oh, well, you know, if

17:17

you change that, then that's gonna

17:20

break this app integration over here. And you know, like there's this weird edge

17:22

case that we're trying to support for IE.

17:26

But just in there. And so like, yeah, I know that

17:27

you don't have that use case.

17:30

So you're not worried about it,

17:30

but we, you know, as this kind of

17:32

like baseline framework, we have to

17:32

think about it because of this one

17:35

product that's like public facing. Like, and so I just got so tired

17:37

of being the person who had to

17:39

keep all of that in my head. That I was looking, I was

17:41

eager, desperate for solutions

17:46

like Chromatic and Storybook. When that, that role came to an

17:48

end, I had already developed some

17:53

relationships with, the people over

17:53

there and I was like, you know what?

17:56

It would be kind of fun to work

17:56

on all of the design systems.

17:59

So let's, uh, let's do this thing .

18:03

Nick Taylor: No, that's super cool. That's super cool. I, yeah, I, uh, I came

18:04

across Storybook in 2017.

18:09

I think that this is like giving

18:09

a bit of history here, but I

18:12

don't, I used to use Meteor js.

18:14

I don't know if you ever ended up using that. Yeah.

18:16

So Meteor.Js was

18:16

like, for folks, depending on how

18:20

long you've been doing web dev,

18:20

it was like universal JavaScript.

18:23

So like you write server and

18:23

client side, and then there was

18:26

pieces that you could use on both. And the, it was a really cool thing at

18:29

the time, everything was JavaScript.

18:33

So the database was Mongo.

18:35

Yeah.

18:35

So JSON or whatever. And then there was, what's his name?

18:40

He started, he started Storybook,

18:40

His name's escaping me at the moment.

18:45

He ended up working at Vercel

18:45

eventually, and then he is doing his

18:47

own thing again, doing teaching, but

18:49

Oh, interesting.

18:50

Storybook started as

18:50

something kind of in that Meteor era.

18:53

And I, I don't, Yeah, think it

18:53

was tightly integrated to Meteor,

18:57

but it was just like, because the

18:57

React was being used, so yeah, it's

19:02

gonna bother me what his name is. I'll find it later but anyways, yeah.

19:04

And then I think at some point

19:04

I, the evolution, like Meteor's

19:09

still around, I think, but they

19:09

became Apollo, like Apollo GraphQL.

19:13

Yes.

19:13

I think just doing my

19:13

fact checking here, make sure I got

19:17

Yeah. No, no, no. You're, you're absolutely right.

19:19

Yeah.

19:21

Yeah. And then like, Storybook

19:21

itself, it became its own thing

19:24

and it was still open source. And then I think Dominic,

19:25

who you work with and

19:28

Yes.

19:28

Uh, I forget who else,

19:28

but I, I think they kind of became the

19:31

stewards, like the maintainers of it. And then I guess that's how

19:33

Chromatic came to be eventually.

19:36

Or

19:37

You got, you,

19:37

you got so much of it, right?

19:39

Yeah. There's, so Dom is, my

19:39

manager of the DX team.

19:43

And then, I think Norbert and Schulman,

19:43

or Michael Schulman, were two of the,

19:49

two of the people who were kind of

19:49

stewarding, Storybook at the, the time.

19:54

And so then, okay, they all

19:54

gathered together and like, Hey,

19:57

let's, you know, really dedicate

19:57

to this open source product.

19:59

Let's build a service around it. And so then, you know, Chromatic came

20:00

after that as a tightly integrated thing.

20:04

But yeah, it's really interesting. There was a huge amount of potential

20:06

energy in Meteor, and it didn't end

20:12

up being the thing that people wanted

20:12

it to be, but it's really interesting

20:17

to see how much potential energy

20:17

there was in the, the ideas and the

20:24

products that were made at that time,

20:24

and how they spun off into like, you

20:28

know, very successful other products.

20:32

I dropped in the chat, but

20:32

I found it, cause it, I didn't, I Googled

20:35

it and it, it showed up on the Storybook

20:35

docs, but it, uh, yeah, there was a, a

20:39

company called Kadira and it was Arunoda.

20:41

That's who it was. Yeah. Anyways, just giving a little shout to

20:43

Arunoda cuz he did a lot, he did a bunch

20:46

of stuff for Meteor as well, but yeah. Cool, cool.

20:49

Norbert and Michael Schulman, I

20:49

haven't spoken to them, but, we follow

20:52

each other on Twitter now I think. So it's just like,

20:53

yeah, it's kind of cool.

20:55

There's a, like a lot of stuff's been going on. I know we're gonna, we're gonna jump

20:57

into something soon, but, there's

21:01

been a lot of changes to the Storybook

21:01

over the years in a good way.

21:05

I think at least. When it originally came out it was cuz

21:06

Webpack was, came on to the scene I think

21:11

maybe 2014 or I think Webpack really

21:11

got accelerated cuz of React honestly.

21:16

Cuz before that it was like Browserify.

21:18

Storybook was using web

21:18

pack and had been using web.

21:22

For quite a long time, as

21:22

far as I know, and I mm-hmm.

21:25

, uh, when I was at dev.to still, I,

21:25

I, I'm not positive with the version.

21:29

I think it's like Storybook six. You started introducing other

21:30

bundlers, is that right?

21:33

Or?

21:34

Yeah, yeah, yeah, that's right. So we now have, vite support.

21:37

There's still a handful of features that

21:37

we're continuing to deeply integrate,

21:41

so if we do a demo today, I'll, we'll

21:41

probably use webpac just because it's

21:45

the most stable and we've actually done

21:45

a huge amount of work to get some of

21:49

the components, like just in time so

21:49

that the Webpack version of it actually

21:54

competes pretty favorably with vite. Integrating more bundlers

21:56

is a really important thing.

21:59

I think two of the big things that

21:59

we've wanted to solve over the

22:02

last year, and I say we, but I mean

22:02

the Storybook engineers that are

22:06

actually doing the hard work here. This is like Tom Coleman, Yon Braga,

22:08

like Norbert, Michael Schulman.

22:13

Hopefully I'm not missing anybody,

22:13

but yeah, working on these problems

22:17

both Chromatic and, and Storybook. But yeah, I know I'm gonna forget

22:18

people and I feel bad about that, but

22:22

it's just in this mode, it's kind of

22:22

like you, you're like searching your

22:25

mind and it's like, it's so cloudy.

22:27

There's so many things I wanna talk about. I apologize right up front.

22:30

What we're doing. Um, so like a handful of the big

22:31

focuses that we've had this last

22:35

year have been bringing more of

22:35

the community into Storybook.

22:40

So like vite has been huge and a lot of

22:40

people love vite and we want to bring

22:44

more availability of Storybook to vite.

22:47

We have added a new bundler support and

22:47

through that work it should be easier

22:52

to do additional bundlers as new things

22:52

start to come online now that it's

22:56

kind of abstracted away a little bit. But then also it's like, uh, you

22:58

know, through that there's a handful

23:02

of other things, things that have

23:02

that are helping us like do more.

23:08

Something that I'm really excited

23:08

about is we're working on this,

23:11

feature that would allow anything

23:11

that uses component story format.

23:15

And we'll talk, we'll touch more

23:15

on the details of that in just a

23:18

little bit, but you'd mentioned it. Component story format is this way to

23:20

write stories, and consequently tests,

23:26

using just an ES module format, but then

23:26

we do like a little bit of wiring up based

23:31

on the file name to kind of like have

23:31

some, like really nice like niceties.

23:36

And the cool thing about that

23:36

is very soon, anything that

23:40

uses component story format.

23:42

So like Ladle's one of these things

23:42

that, is a, I mean, I guess like

23:45

Storybook competitor, I'll just

23:45

say like Storybook alternative.

23:49

But it uses the same component

23:49

story format to write stories in.

23:54

And I think coming up

23:55

Okay.

23:55

Soon we're really hoping to

23:55

release some features that would allow

24:00

anything that uses component story format

24:00

to integrate with Chromatic and get the

24:05

benefit of visual regression testing.

24:08

I mean, this is all kind of like a, you

24:08

know, a little bit far away, but, I think

24:12

it's important because I think it, it

24:12

just kinda like shows like where we're

24:15

going, like we want to bring more of the

24:15

community into this way of development.

24:21

And so I think there's a lot of

24:21

things that feel like, or sound

24:24

like competitors at the moment. But we are really hoping that it.

24:29

To kind of like rally around

24:29

this component story format as a

24:33

way of declaratively documenting

24:33

and testing components.

24:37

And then kind of figuring out

24:37

like what we can do, around that.

24:40

You know, every community kind

24:40

of has their own version of like

24:44

what a Storybook looks like. And so I think, you know,

24:46

more power to you, right?

24:49

Like make it, you know, make a, you know,

24:49

Svelte and vite and like whatever thing.

24:54

But if you can kind of use this

24:54

story format, then like you can

24:58

still have like the benefit a lot

24:58

of the tooling ecosystem of like

25:02

add-ons and all that kind of stuff. So that's what we're working towards.

25:05

Obviously these things

25:05

just take a lot of time.

25:07

But I think, yeah, you know,

25:07

the more tools, the better.

25:10

Our goal is to just improve the UX

25:10

of the web and I think that there's

25:14

so much innovation happening. There's no way that we could like be

25:15

the kind of like gatekeepers of it all.

25:20

So I'm just really excited that we're able

25:20

to migrate the software to like meet some

25:26

of, meet the community where it's going.

25:30

. Nick Taylor: That's super cool. And, and it's great to work

25:31

on a standard like that.

25:34

I dropped a couple links to

25:34

the component story format.

25:37

Oh, cool. Thank you.

25:38

We'll get to the live coding

25:38

in a minute, but the one thing I really

25:40

wanna say that's really compelling about

25:40

Storybook is when I was working at, I,

25:45

I'd used it prior to working at dev dot

25:45

two, but at dev dot two, the app and I, I

25:51

know you've worked on a Rails app before

25:51

too, but, it's like a monolithic Rails

25:55

app and we were using Preact in the front

25:55

end in kind of like a bespoke manner.

26:00

And the fact that I put Storybook

26:00

in place there before I was working

26:05

there, cuz it's open source and

26:05

I was so glad I did that because.

26:10

You can literally build out

26:10

these components without even

26:13

running the entire Rails app. Like so, like, yes.

26:16

You know, which is like huge, like

26:16

that, that is like, like, like when

26:21

you're in all Js land, maybe you don't

26:21

necessarily feel that as much, but like

26:25

just being able to say like, I don't

26:25

even need like the database, anything.

26:29

Like, I don't need anything running. I can literally just go to

26:30

my canvas and start painting.

26:34

You know? Like that to me is like such a huge thing.

26:37

Yeah, it's it like,

26:37

it's good architecture, right?

26:40

The benefit of components

26:40

is their isolation, right?

26:43

Like, they should be disconnected from data. We should be able to kind of like mock

26:44

things very easily, as easily as just

26:49

throwing an object at it and saying

26:49

like, this is what a user data will

26:53

look like when you eventually have it. But like, we don't need to like wire

26:55

all of this test environment stuff up.

26:58

And I think that that Rails, kind

26:58

of analog is super important because

27:03

so much of like, you know, I, I

27:03

am a front end developer, right?

27:08

Like, that's, that's how I identify. I've never been like a, you

27:09

know, fullstack developer.

27:12

Like I do enjoy kind of going

27:12

into full stack sometimes

27:16

for some of my own projects. But I love the front

27:18

end side of things and

27:22

Yeah.

27:23

I was amazed, how every job I

27:23

had really required me to be a full stack

27:30

developer to like twiddle certain things

27:30

or like, you know, change a database

27:35

response or fix up the Rails environment

27:35

or have these fake migrations to run,

27:40

to get into, you know, certain states. And it's like I didn't want to deal

27:41

with any of that nonsense, right?

27:44

Like the beautiful thing about

27:44

working with components is we

27:48

can test them and document them

27:48

separated from the full stack.

27:54

And I think that's something that's

27:54

like really cool is being able to

27:56

visually test, as a test between a

27:56

component and its integration with

28:02

the browser without having to like

28:02

bring along the full stack with it.

28:07

That is really the superpower of this

28:07

like Storybook, Chromatic pairing is

28:12

because it feels so light compared to what

28:12

we've had to do in the past on like just,

28:17

doing front end stuff and like trying

28:17

to maintain a Rails test environment.

28:22

And how slow they were

28:22

for like, visual tests.

28:24

It's just like, it's just better .

28:27

Nick Taylor: There's a question in

28:32

do you keep your Storybook stories,

28:32

the input to your components in

28:35

Storybook up to date with the actual

28:35

context in which the component will

28:39

need to live slash be rendered?

28:41

So I guess, within Storybook

28:41

or in the real app, how can

28:44

you kind of make guarantees. Yeah, Yeah, yeah.

28:47

Yeah. That is interesting. TypeScript helps out a lot with this.

28:51

So like if you are doing your componentry

28:51

in TypeScript, then that will really

28:57

provide a mechanism when you like

28:57

update your component library and then

29:00

like try to use it, you're gonna start

29:00

getting errors inside of your code base

29:04

where it lives to say like, Hey, this

29:04

interface isn't compatible anymore.

29:07

I think that if you aren't using

29:07

TypeScript, you do have to be a little

29:10

bit more, uh, vigilant about that.

29:13

There's always gonna be some level of

29:13

having to coordinate interface changes.

29:21

I think TypeScript does help a lot with that. One thing that we see a lot is, you

29:25

know, so like MSW is a really great

29:30

way of like mocking, data requests.

29:32

I find that to be like a really helpful

29:32

way like if you want to actually try

29:36

to like see what a component looks

29:36

like with actually making a request,

29:40

we do have some add-ons that allow

29:40

you to use mock service worker.

29:43

And sometimes some of those abstractions

29:43

can actually be shared between your

29:47

coding environment to, you know, if

29:47

you want a offline coding environment

29:51

and then also your Storybook.

29:52

Yeah.

29:52

So I think, you know,

29:52

TypeScript is great if you have the

29:55

privilege and uh, people to do TypeScript.

29:59

But then also like using things

29:59

like MSW is really nice too.

30:03

Yeah, mock service worker is really great. It's a nice way to really handle stuff

30:05

because like before mock service worker,

30:10

I remember like, like whether it's in

30:10

component tests or just regular tests

30:14

in Jest for example, it's like you'd be

30:14

like, okay, you know, mock the fetch and

30:19

then like all of a sudden you're mocking

30:19

all these things and it's just like, it,

30:23

you know, this way, I mean, you, you're

30:23

still mocking things, but it kind of gets

30:27

it out of the way and it's, it's, yeah. You know, it's, I I feel like it's

30:29

a lot more manageable and, and it's

30:32

using something in the platform

30:32

too, which is pretty neat, so.

30:35

Yes. Yeah, it's really nice because a lot of

30:36

those things that, that it, it feels like

30:42

it's doing it at the right level, right? As opposed to like, you having to like,

30:44

go in and Monkey Patch a bunch of stuff.

30:47

It's like, Hey, this request is

30:47

going to go out, and we're just

30:50

gonna catch it, when it fails. And I, I really like that.