Chromatic developer experience engineer Shaun Evening joins the React Round Up hosts to talk about all the new features rolling out with the release of Storybook 7.

Have you ever wanted to combine your Storybook integration with Material UI, Ant Design, or any other component library? Well, Storybook's making it easier than ever, and that's just the beginning. A new offering called Integrations allows users to add all sorts of plugins to their Storybook workflows for even more functionality, and has "recipes" to help you get the most out of your Storybook.

Follow Shaun on Twitter for all the latest and greatest happening at Chromatic: https://twitter.com/Integrayshaun 

Welcome back to React Roundup. I'm your host for today, Jack Harrington, and with me is my esteemed colleague, Paige Neaderinghouse.

 

Hey everybody.

 

And our special guest for the day, Sean Evening.

 

Hey, how's it going?

 

going really well. So Sean, let's talk about what brings you to React Roundup today.

 

I'm gonna go to bed.

 

Well, I have been invited by you lovely folks to talk a little bit about Storybook and specifically what I typically focus on, Storybook integrations.

 

Storybook's awesome. Oh

 

Thank

 

my

 

you.

 

gosh.

 

I

 

And

 

like

 

there's

 

to think

 

a,

 

so.

 

yeah. And there's a new release.

 

There is, yeah, where we just launched the beta last week and we are getting pretty close. I think I've got, I think I can share this because we're announcing it tomorrow is we're gonna

 

Woo!

 

be doing a Storybook

 

Hehehe

 

Day, a small one-day conference to talk all

 

Oh nice.

 

about Storybook 7.0.

 

Sweet.

 

There's a really, really cool website where you can

 

Oh!

 

get this like 3D customizable ticket. Uh,

 

Oh.

 

This is the thing

 

yeah.

 

with like next.js really like spearheaded the whole like really cool landing page thing and everybody's like,

 

Absolutely.

 

yeah, I gotta do that. Yeah,

 

Absolutely.

 

a 3D ticket.

 

Yeah,

 

I'm in.

 

Yeah.

 

we lovingly stole that from them for this

 

Yes!

 

there. It's fantastic. And my colleague Varun who does a lot of these sites and stuff for us, he's just so good.

 

Yeah.

 

I can't wait for everyone

 

That's

 

to see

 

awesome.

 

it.

 

Yeah, yeah.

 

It blows my mind every time I see something new from

 

It's

 

him.

 

funny because it's all about just limited by your imagination nowadays. You gotta

 

Hehehehe

 

like think

 

Absolutely.

 

this stuff up and then just like, that's the tough part. And then you're,

 

Yeah, or

 

yeah.

 

you can ask a chat GPT to do the imagination part for you.

 

Now

 

Yeah.

 

you can.

 

Oh my gosh, so much fear and loathing around chat GBT.

 

All right, so when is this conference happening, Sean? Tell us, tell us the dates.

 

Oh,

 

How do you get there? How do you sign up?

 

I believe that it's March 1st.

 

Mm-hmm.

 

The website will be announced tomorrow. I have been asked specifically. Don't give the address

 

This

 

to the

 

is

 

website

 

going to come

 

for

 

out

 

the

 

in

 

second.

 

weeks,

 

Yeah.

 

so don't worry about it. You're good.

 

Oh,

 

Yeah.

 

for sure.

 

Yeah,

 

Oh, perfect.

 

Right.

 

Then

 

yeah, yeah.

 

I believe it's a storybook.js.org slash day.

 

Okay.

 

But

 

Okay, yeah,

 

yeah,

 

awesome.

 

I'll double

 

We can

 

check

 

drop

 

that.

 

that in the show notes.

 

Yes, absolutely.

 

If it's wrong, then just bleep it out or just do a really poor voiceover.

 

Just added it. You're good.

 

Yeah,

 

You're good.

 

we'll fix it in post.

 

We got

 

That's

 

this.

 

fine.

 

We got the fix

 

Yeah.

 

it in post. Exactly.

 

Yeah.

 

Well, so what should we expect? Can you leak the big announcements or what are we talking about here?

 

Will they

 

I...

 

be workshops, con,

 

Oh,

 

you

 

yes.

 

know, speakers,

 

There'll

 

free

 

be...

 

swag?

 

Hahaha!

 

Yeah, yeah. So I... When you sign up for your ticket, you can actually put in your name and address, and we're gonna send everyone some storybook stickers, which

 

Awesome.

 

will be

 

Nice.

 

pretty cool. I have already signed up. Yes, I am a chromatic, and I do get a lot of storybook stuff from

 

Hehehe

 

time to time, but I won't say no to more. So,

 

Exactly.

 

yeah, more stickers are on the way. Uh, yeah, there's going to be a lot of different speakers from the storybook community, uh, to talk about everything storybook 7.0. I don't think there's any like secret special announcements or, or maybe I'm like, uh, Tom Holland and I haven't been given the full script

 

Yeah,

 

because

 

because

 

I'll just,

 

they know

 

I'll leak

 

you're

 

it.

 

just gonna leak,

 

They

 

man.

 

can't

 

Yeah, exactly.

 

trust you.

 

No,

 

Yeah.

 

I need to be trusted exactly.

 

But yeah, we're gonna be talking about all the cool things that we've already started to talk about for Storybook 7.0. The thing I'm most excited for is our framework API, which has let us bring a lot of really cool stuff in. So Vite works out of the box now.

 

Ooh, nice.

 

My colleague, Kyle Gatch, along with other folks. at Chromatic have been working on getting Next.js working out of the box. And so we put out an article about that last week, which is super, super exciting. And yeah,

 

Mm-hmm.

 

there's tons and tons more stuff there. So yeah,

 

Well,

 

tune

 

I'm going to

 

in.

 

pull TJ here for a second because I just want to make sure everybody's up to speed. So there might be folks, I don't know who those folks might be, who might not know what storybook is.

 

I

 

Yes,

 

was

 

So

 

just going to

 

oh my.

 

say

 

Sean,

 

that.

 

can you give us like a 20 second, 30 second primer

 

Absolutely,

 

on storybook?

 

oh, I do this

 

Yeah

 

all the time. I'll show up at like parties and stuff.

 

Well, yeah, yeah, yeah, yeah,

 

And

 

yeah.

 

I won't

 

Imagine

 

introduce

 

that.

 

He

 

myself

 

just...

 

Imagine

 

for

 

you're at a party

 

half an hour.

 

and somebody's making you a drink and they're like, what do you do for a living? I'm like, I work on storybook.

 

Yeah, so I am a developer experience engineer at Chromatic, the company behind Storybook. And so Storybook, for those who don't know, is a sort of front-end workbench, is what we're calling it there. To be able to not only render components in isolation, so you can look at different themes, you can change out your locale. We've also seen a lot of people do some really cool stuff with just mocking all the different parts and be able to run their entire... UI or like chunks of it without booting up the full app and having to like go through full user flows and make sure the state's in the right way,

 

Yeah,

 

the sort

 

that's

 

of

 

cool.

 

the right state. Yeah.

 

Yeah.

 

And people are always finding new ways, new things to do with Storybook. I think a couple months ago we had a game developer who was using Storybook. to show little pieces of their game. I'll share a link

 

Hmm.

 

for that. It's one of the coolest

 

That

 

things

 

sounds

 

I've

 

awesome.

 

ever seen. Yeah.

 

But I mean, you were just saying that it basically allows you to pick up anywhere in the story, you know? So it's like you could have

 

I'm

 

the

 

gonna go.

 

10 million credits section of the game

 

Exactly,

 

and not have to

 

exactly.

 

worry about actually getting to 10 million credits just to test it.

 

Hehehe

 

And you don't have to pay for the play to win

 

Right.

 

There

 

packages

 

you go.

 

to get the 10

 

Do people

 

million

 

have to

 

credits

 

play?

 

to.

 

That's the, here's another TJ question. Do people have to pay for a storybook?

 

No, no, it's a free open source tool. It's always going to be free. So yes, use use away to your heart's content.

 

How does Chromatic make money? Are you a consultancy?

 

No, so we have a paid tool called Chromatic,

 

Oh, okay.

 

which is like storybook multiplayer is the way I describe

 

Hahaha!

 

it. Think about to use the games metaphor yet

 

Sure.

 

again, storybook itself is like, yeah, your one player like campaign. And then when you use Chromatic. It's for collaboration. You throw it into your CI. It's a place to be able to do visual reviews of your

 

Mmm.

 

PR. So you can look at the snapshots of

 

Oh

 

before

 

nice.

 

and after your PR. You can see, oh,

 

Mmm.

 

by changing the margins here, this screwed up half of the app, not just this one component

 

Right.

 

that I changed it for.

 

Yep.

 

So it's a really awesome way to be able to pinpoint those visual differences. Yeah.

 

Do fuzzy matching and all that?

 

Fuzzy matching, as in like...

 

Well, like you, you can basically run a unit test about the UI, about the state of the UI itself, like

 

Yeah.

 

to hit the margin bug. Yeah.

 

Yeah,

 

Okay.

 

yeah, absolutely.

 

Oh, very

 

So

 

cool.

 

it will actually do a little onion skin over

 

Oh, that's

 

the

 

cool.

 

new screenshot.

 

nice.

 

So

 

Oh,

 

you can

 

okay.

 

toggle that

 

All

 

on

 

right

 

and

 

then.

 

off.

 

Oh.

 

So you can see like a little green box, and you can turn it off. So you can actually see what's behind there. They have a fun like strobe the diff where it does like a little party para overlay, which is lots and lots of fun. You know, all of the, the

 

Critical

 

top

 

features.

 

notch features. Yeah,

 

Right,

 

absolutely.

 

Yeah,

 

the

 

yeah.

 

things

 

Ha

 

developers need.

 

ha ha ha! Yeah.

 

Exactly. Yeah.

 

Yes. The thing that ChapGBT

 

Oh my god.

 

can't do today. Ha ha!

 

Exactly.

 

Right.

 

Yet. Yet. Yeah, they'll

 

Oh

 

just,

 

man,

 

uh,

 

I could have,

 

sorry,

 

I could

 

go

 

have

 

for it,

 

used

 

bitch.

 

this last week. I introduced a bug on myself, a CSS bug. And it was because I had set a manual width for something. And then

 

Oh

 

it

 

no.

 

of course decided it was not going to scale in any direction because I had given it a hard width of like 70 pixels or something. So I spent an hour figuring out how I had done that to myself, but this would have probably saved me a lot of time.

 

Absolutely. Yeah, I'll pour one out over here for you for that.

 

Ha ha!

 

I have done that to myself so many times. It's never

 

Damn

 

fun.

 

it.

 

You never feel great once you've found it either.

 

No, because

 

Hahaha

 

I had done it to myself, just

 

Yeah.

 

thinking I was being smart fixing one thing and then breaking several others in

 

Well,

 

the process.

 

that's the problem, right? You fix the one thing, you're like, yeah, I fixed

 

Yes!

 

it. And then you

 

Looks

 

broke

 

good!

 

everything else. And now you

 

Right.

 

gotta fix that. Now you gotta fix the bug. And you still have the bug that you hadn't fixed.

 

I'm

 

Because now the manual width

 

Yeah.

 

fix, that's not working either. So now you gotta figure

 

Nope.

 

it.

 

not sure

 

Now you actually have to do the real responsive thing, which is, oh

 

Right,

 

man, painful.

 

if

 

I

 

I'm

 

figured

 

doing it

 

out

 

right.

 

the

 

I'm not

 

right

 

sure if I'm

 

way

 

doing

 

to

 

it right.

 

fix

 

I'm not sure

 

this.

 

if I'm doing it right.

 

Oh, it's

 

I'm

 

gotta

 

not sure

 

be

 

if

 

a

 

I'm

 

flexbox.

 

doing it right. I'm not sure if I'm doing it right.

 

I

 

I'm not sure if I'm doing it

 

Pretty

 

right. I'm

 

much.

 

not sure if I'm doing

 

have

 

it

 

to

 

right.

 

learn

 

I'm not sure

 

flexbox

 

if I'm

 

for 18,000 times.

 

doing it right. I'm not sure if

 

Which

 

I'm doing

 

one

 

it right.

 

Flex...

 

is it?

 

I'm

 

Justify content?

 

not sure if I'm doing it

 

I

 

right.

 

know,

 

I'm not sure

 

Flexbox...

 

if I'm doing it right. I'm not sure if I'm doing it

 

Oh

 

right. I'm

 

God!

 

not sure if I'm doing

 

yeah,

 

it right.

 

oh,

 

I'm not

 

Flexgrows,

 

sure if I'm doing it

 

the worst.

 

right.

 

I can

 

Uh...

 

never get that one right.

 

Oh

 

Oh, but Sean, tell us about some of the new things that are coming. So one of the things that we have that we actually originally asked you to talk about was material UI and storybooks. So maybe you could tell us a little bit about how that works together.

 

yeah. Yeah, yeah, absolutely. So we've been thinking a lot about integrations into storybook, which we've classified like three different things that we would consider an integration. You've got add-ons, which for folks that have been with Storybook for a while, they will be quite familiar with that. It's a little configurable piece of code that does the hard work for you. Getting something plugged straight into Storybook and ready to go. What we have begun to do, we released this on our website a couple of weeks ago, is it's now called the integration catalog instead of the add-on

 

Mmm.

 

catalog. So we've got two new kinds of integrations. One, which is recipes, which is exactly what that material UI blog post falls into. So we also have frameworks, which is something like Next.js. That

 

Mm-hmm.

 

is a big add-on package that does all of the heavy lifting to make sure that that works together. So yeah, sort of a class of its own there. But recipes, we want to talk about recipes. So

 

Yeah.

 

before

 

Yes.

 

I go down a different rabbit hole, as

 

Hehehehe

 

I am

 

Well,

 

known

 

I'm talking

 

to do.

 

in depth about material UI because I have struggled with this

 

Yeah,

 

myself.

 

Hahaha

 

And I would

 

yeah.

 

like to know if there's an easier path.

 

There is, and I'll send you the link, the recipe

 

Oh please.

 

page. So it is in our blog, but recipes are a little bit different. This is something that we want to maintain over time and make sure it still works. So.

 

Mm-hmm.

 

For our blog, it's great that we can put instructions out there, but we can't keep going back into the blog and editing the post.

 

sure.

 

So this is something a little bit more concrete and updatable. So there'll be

 

Mm-hmm.

 

individual pages. So this just goes through the steps of how to make sure that your Material UI components work and show up properly in Storybook.

 

Yeah, the theming, that's the big deal. You know,

 

Yeah,

 

the...

 

yeah, that's

 

Gotta get

 

always.

 

the theme provider and the... Ay, ay, ay, ay, ay.

 

Yeah, so the steps, I can, I think I've probably got it memorized at this point. I've read it over

 

Hehehehe

 

so many times. So you want to make sure all of your fonts are loaded correctly into storybooks. So you've got your Roboto font and the icon font.

 

unless you're using a custom font, which we

 

Unless

 

are.

 

you're using a custom

 

Mm-hmm.

 

font.

 

Ssh.

 

Great.

 

Ha

 

Yeah,

 

ha ha ha ha.

 

of course, of course. Why wouldn't you?

 

Oh yeah, it

 

Yeah.

 

looks slightly different than Roboto. You know, just very, very slightly.

 

Oh, no.

 

but it needs to be.

 

But needs to be that font.

 

Absolutely.

 

Oh my God.

 

Of course. Well, as long as, so the recipe does say you should definitely try to load that as a static resource instead of from the Google Fonts API.

 

Mm-hmm.

 

One, it makes sure you can develop in airplane mode. You're not

 

Mhm.

 

trying to go out and grab that. It's already in your node modules. Just don't nuke those node modules on the plane. It's the only way.

 

Hahaha

 

No.

 

If you won't be doing

 

No,

 

anything

 

you don't want

 

else.

 

to do a MPMI on a plane.

 

No, definitely not. So yeah, as long as you load them in statically, it loads faster too. If you're going to use Chromatic, that also helps for. snapshots, we found that if people are trying to pull that in from like a CDN, it will

 

Mm-hmm.

 

show the first font first and then it'll snap over and you're never quite sure when it will

 

Oh... Uhhh...

 

do that.

 

Mm-hmm.

 

So there's like, oh, the font's different or the spacing

 

Yep.

 

hasn't been set yet. And so

 

Well

 

yeah.

 

the font's different on this particular run because the CI CD just had a slightly less

 

I'm sorry.

 

good connection to the internet on that one run.

 

Yeah,

 

Ugh,

 

exactly.

 

ugh, yuck.

 

Yeah.

 

Oh

 

kind of a pain in the butt. So

 

my god, yeah.

 

static loading of your assets really helps with

 

Good

 

that.

 

idea!

 

Yeah.

 

Yes, great thought.

 

Yeah. Next step, you want to add the theme provider if you're using, if you want to use custom themes. So we do that via a storybook decorator, which is a function that takes in a story component and the whole context object of storybook. And then It can add some stuff around the story. So for React, pretty clear cut. You can put more components around the story component, like

 

Yeah,

 

the theme provider or

 

you're

 

even

 

18

 

like,

 

different providers, yeah.

 

yeah, exactly. Yeah, your IET next provider, your redux store, everything,

 

Right?

 

like it's

 

You

 

all there.

 

know, yeah,

 

Do

 

exactly.

 

that as separate add-ons. Sorry, as separate decorators. But yeah, you can do that. And that way, when you have a little toolbar tool at the top to toggle your theme, you can find that, what theme is selected through the context object, and you can set that to the theme provider so that your stories render with the correct theme. Yeah. And that, I believe, is the long and short of it. Yeah.

 

I got to tell

 

I'm not sure if I'm going to be able to do this.

 

you, the workflow

 

I'm not sure if I'm going to be able to do this.

 

around Storybook is great because

 

I'm not sure if I'm going to be able to do this.

 

what it does is you've got a very design

 

I'm not sure if I'm going to be able to do this.

 

centric company that

 

I'm not sure if I'm going to be able to do this.

 

takes the Roboto

 

I'm not sure if I'm going to be able to do this.

 

font being slightly different very, very seriously.

 

I'm not sure if I'm going to be able to do this.

 

Hehehehehe

 

I'm not sure if I'm going to be able to do this.

 

Being able to deploy a Storybook and then

 

I'm not sure if I'm going to be able to do this.

 

have them kind of look at the components very much

 

I'm not sure if I'm going to be able to do this.

 

in isolation and be like, oh,

 

I'm not sure if I'm going to be able to do this.

 

this is what a table is going to look like. And this is what the

 

I'm not sure if I'm going to be able to do this.

 

mini table is going to look like.

 

I'm not sure if I'm going to be able to do this.

 

And they can adjust the break points. They can show it

 

I'm

 

on mobile, laptop. You know, tablet,

 

Exactly.

 

whatever,

 

Mm-hmm.

 

what have you. And they, and you can literally just get bugs against that. And it's like, it's

 

Absolutely.

 

so much nicer than, and then we, what is the, the low data mode look like, you know, the no data mode, the no records found, but all those kinds of things and

 

Mm-hmm.

 

Yeah, yeah.

 

yeah, then you plug it in the app, hook it up.

 

Boom.

 

Voila.

 

It just works.

 

You're good. Yeah.

 

It's

 

It

 

all

 

just

 

there.

 

worked. TM

 

Yeah.

 

just works.

 

So, yeah, our new tagline for that is UI without the grunt work.

 

Yes,

 

Hmm!

 

Yeah,

 

it's

 

I thought

 

a good

 

that was

 

one.

 

pretty snazzy too. I like that.

 

Yeah, well, I would say it's like UI, but the only thing you have to worry about is the margins and the padding because after that it's like, oh, you know, wait, this page does, you know, it's like how the how the components all get together. You know, that that

 

Mm-hmm.

 

can be

 

Exactly.

 

lots

 

Yeah.

 

of little

 

Oh,

 

fixed width bugs. Thanks

 

but

 

to page.

 

Hehehehe

 

so we have an add on for that. It's

 

Oh!

 

a it's an essentials add on.

 

Really?

 

called the measurement and outline

 

Oh

 

add-on.

 

yay.

 

So you don't

 

Mmm.

 

even have to open up your Chrome DevTools. It works the same sort of way, the same UI. You just hover over a particular element, and it will show you the different colors and everything, how much padding, margins, with the numbers,

 

weed.

 

and everything. It's awesome.

 

Yes,

 

Yeah.

 

this would

 

guys.

 

have saved me so much time.

 

Oh, yes.

 

You get the little purple

 

Yeah.

 

things, X number of pixels with the...

 

Exactly.

 

Yeah,

 

Oh,

 

Yeah.

 

that's

 

just like

 

awesome.

 

in Figma.

 

Yes,

 

Exactly.

 

an adobe.

 

Yeah, right. This is a Photoshop. Same thing.

 

So you've got this for material, and you

 

Yeah.

 

say

 

Yeah. Yeah.

 

you have integrations for lots of different things now. Do you have ones for

 

Yeah. Yeah. Yeah.

 

other design systems, like Ant Design, or what are some of the other really popular ones out there? Chakra

 

Chakra Haha,

 

UI,

 

Yeah,

 

Tailwind,

 

yeah.

 

you

 

So

 

name

 

well

 

it.

 

that one's out of the

 

funny

 

night

 

Tailwind,

 

anyway.

 

you mentioned

 

Hmm

 

yeah.

 

that. You're really setting all this up for me to tee it all off here. So there's a ton of add-ons from the community where people have made pre-configured tools to be able to pull a lot of this stuff in, which is fantastic. I love all these community add-ons. we still find that we get a lot of questions as well. So there are going to be recipe pages for a lot of those, a lot of those UI libraries as well. So

 

Mm-hmm.

 

actually yesterday I was writing one for Tailwind CSS, and I'm gonna be working on the one for Chakra this afternoon.

 

Hmm.

 

Nice.

 

Really just going through as many of these as possible. Hmm. Am I, I know we're on a react podcast. So would it be a faux pas of me to mention a non react?

 

Not at all. Actually,

 

Oh, perfect

 

No,

 

page is all spelt now, you

 

Really?

 

know. Yeah.

 

I am not Jack.

 

What? I thought you guys were doing spelt too.

 

I mean, we are, we have

 

Okay.

 

some sites that are built with Svelte, but Next.js is the one that I'm most focused on at the moment,

 

Okay,

 

but yeah,

 

fair

 

yes.

 

enough,

 

Awesome

 

You

 

fair

 

can,

 

enough.

 

if you can talk about anything, JavaScript, CSS,

 

Yeah,

 

HTML,

 

totally fine.

 

just run the gamut, Sean, wherever

 

Perfect,

 

Go

 

you

 

for

 

wanna

 

it.

 

go.

 

awesome. So I wrapped up one earlier this week for Vutify. So

 

Oh.

 

Mmm.

 

yeah, the Vue community really,

 

Hehehehe

 

really likes to get content for them. And we have been sorely lacking that department as a React First group. But we

 

Mm-hmm.

 

don't want to, we really don't want to leave folks out. You mentioned Svelte. That,

 

Yeah.

 

Mm-hmm.

 

we have that almost ready to go for 7.0 as well.

 

Nice.

 

So that will be ready to work out of the box. Vytonol, however you like, however you like to develop it. Yeah, hopefully we've got it. We're working on it. Yeah, we got Next.js. I had an article from a while ago adding React IET Next into Storybook.

 

Mmm.

 

And I have some examples for Transloco for Angular and also View IET Next that I still need to write up the actual instructions for. But I have all of these example repos that I've just been fiddling around with in my downtime to work on that too.

 

Nice. How about deploying it? Like if

 

Yeah.

 

I want to just get this thing out to an S3 bucket so my product managers can look at it and

 

For

 

tell

 

sure.

 

me

 

Well,

 

where

 

so...

 

my margins and fonts are wrong.

 

Yeah. I really had to deploy to find out. So...

 

They don't want to run my app, they don't want to run a

 

No.

 

storybook locally, they don't want to connect my local host, you know, I've

 

Yeah.

 

got to deploy the thing.

 

Yeah, of course. So the Storybook CLA has a way to build it down into a static site, and then you can upload it, deploy it anywhere that you like. However, I'd be remiss if I didn't mention that Chromatic does offer free Storybook hosting on their free accounts,

 

I

 

so.

 

swear I

 

Ha

 

wasn't setting you guys up

 

ha

 

for

 

ha

 

that.

 

Didn't know about

 

ha

 

that.

 

I didn't know

 

ha.

 

about that,

 

Perfect,

 

but that

 

well

 

sounds

 

now

 

great.

 

you do, yeah.

 

Now I do.

 

Yeah. So that's all free there. The free account has, I think, 3,000 snapshots a month for free. And then it's a certain amount over, but then there's paid accounts where you get like 35,000 snapshots a month too. But yeah, the deploying of Storybook, always free.

 

Okay, cool.

 

Yeah.

 

Sweet. So

 

So that's...

 

do you do you offer like a self hosted or an enterprise level option for storybook too? Because I know for big companies, you know, having the free account is usually not not an option.

 

Absolutely.

 

They want that security too, they want to log

 

Exactly.

 

in.

 

Yeah,

 

Nobody can look

 

Proprietary.

 

at

 

yeah,

 

our sacred

 

of course.

 

design system.

 

Yeah,

 

Okay.

 

our IP is protected.

 

Right,

 

Oh,

 

protecting

 

of course.

 

the button roundiness.

 

Yeah, yeah, of course. So we're SOC2 compliant and have an enterprise version available, an enterprise account. We don't have self-hosted right now.

 

Mm.

 

But yeah, we have everything for like single sign-on and all of that fun stuff for enterprise. We

 

perfect.

 

normally have like a big checklist that we do with those clients to make sure that we meet all of their requirements and, uh,

 

Mm-hmm.

 

yeah, but sock two compliance. So we get a lot of the check marks right out of the gate there.

 

Nice.

 

Yeah, I just use static hosting, honestly. In

 

Yeah.

 

my company, I think we just,

 

Mm-hmm.

 

I think we use basic auth. You know,

 

Yeah.

 

as long as you know the password, you're good.

 

You're

 

Oh, for

 

in.

 

sure. Yeah.

 

You're it, you know?

 

Nailed

 

The three

 

it.

 

people that need to look at this.

 

Exactly. Yeah. Yeah, if I'm using my own stuff, I'll end up using something like Netlify or even Surge to

 

Oh

 

just

 

yeah.

 

Yeah.

 

quickly throw something up and away you go. But

 

Mm-hmm.

 

yeah, if you're working with a team, again, Chromatic is like your multiplayer storybook and so yeah, it will deploy for every branch. You can

 

Oh,

 

have a look at it via commit.

 

That's pretty sweet.

 

that's

 

Yeah.

 

nice. That's really nice because you don't

 

Oh

 

want

 

yeah.

 

to deploy into main, you know, unless it's right. So

 

Exactly.

 

having

 

Right.

 

something that people can see in the branch at that's, that's,

 

Exactly.

 

that's very hard

 

Yeah.

 

Yeah.

 

when it comes to S3, you know, like,

 

Of course. Yeah.

 

yeah, that's that

 

So

 

hassle.

 

locally, you can use the chromatic CLI tool to you don't even have to push it up to GitHub or anything. You can just run the chromatic command and that will

 

Mm-hmm.

 

put it up on like via your branch and everything. So it will build the storybook down and deploy out for you right from there. Yeah, pretty sweet.

 

Wow.

 

Yeah.

 

Yeah, that, I mean, that's a, that's, that'd be such a help to have, especially when you're doing like the design review and getting that

 

Yeah.

 

in front of the designer, just be able to get their feedback. That would be great.

 

Absolutely. And so Chromatic is to bring all of those non-developer folks into the workflow, right? You

 

Mm-hmm.

 

can have a GitHub account to log in, but you don't need to. And then you can share it with everybody. Everyone can actually start to leave comments and approve the diffs for your visual changes and stuff like that. So yeah.

 

Oh wow, it can handle comments and stuff, it can annotate

 

Yep.

 

things. Oh!

 

Absolutely, yeah. Not only can you write comments for the whole snapshot itself, but you have the ability to click right at a certain part and leave a comment right there. So that's pretty sweet too.

 

Sounds good. You know, it's one of those things where it's like,

 

Absolutely.

 

oh man, where is this bug? Is this bug over in Jira? Is it over in GitHub issues?

 

Hehehehe

 

Now

 

Of course.

 

it's maybe, now it's a new thing. Now it's now gonna be over in Chromatic.

 

Right,

 

You

 

did

 

know.

 

I slack it to you? No.

 

Right?

 

I'm sorry, I was supposed to wait till the end for the pluggables, right?

 

Oh, yeah.

 

Well, that's fine. You can get ahead of yourself.

 

That's when you plug kitchen gear.

 

I often do get ahead of myself, yeah.

 

So I am curious, how did you get into working for Chromatic and

 

Mmm.

 

working on Storybook in particular, because it's such a handy tool to have, but

 

Yeah.

 

a lot of times you don't really think about the companies that are actually behind these tools and how developers come to work for them or work with them. So, I'm curious, how did you get into working for Chromatic and working on Storybook in particular,

 

Yeah, yeah, it's a, that's a very good question. And it's, I'll try and summarize it, otherwise we'll be here. We'll be here all day.

 

Hehehe

 

So very early on into my career, I actually worked with Varun who's now, I now work with we work in a company called Wrangle. And as I was getting started, I was really, really into making UIs look and feel great. And I found that a lot of developers, even front-end developers, would get sort of annoyed. They had their certain, they had a threshold that

 

Yes!

 

they could hit. And I'm like,

 

Yeah.

 

no, no, no, no, no, no. This is ridiculous. Do we really need to support IE 10? Like, come on, really? Really?

 

Oh, well, that's

 

Ha

 

a different

 

ha.

 

threshold.

 

Oh absolutely!

 

Yeah, now I'm talking about the pixel-funging threshold of the 10th bug that is on the margins being just not quite right.

 

Yeah,

 

Yeah.

 

the line height on the font is one pixel

 

Oh god.

 

off! BAAA!

 

Come on, can any user see that? No.

 

But we can, we can

 

Oh yeah,

 

Jack,

 

sure.

 

that's the problem. Yeah, so I stayed in contact with Varun after he left. And he ended up at Chromatic quite a few years ago, when it was still a very, very small company. And so I kind of knew that Chromatic existed, but in the meantime, I always ended up becoming the steward of my company's storybook wherever I was. And I'm like, oh, well, someone broke it and no one was looking at it. And so,

 

You just took it up and fixed

 

yeah.

 

it.

 

Yeah, like, all right, well, we need to add this plugin or like we're missing this dependency When I was working at Wealthsimple, I worked for the on the front-end platforming team for

 

Mm-hmm.

 

a while

 

Yeah.

 

and so we had storybook for React Native that Tend to break fairly often because of the native dependencies not being

 

Well, because

 

added

 

of React Native,

 

And also, you

 

which

 

know

 

just

 

react

 

breaks

 

native

 

all the time, yeah.

 

of course. Yeah, it's yeah, it's got its quirks. I like it Um, so yeah, I always kind of just ended up working in storybook. And when I ended up on a platforming team, supporting engineers internally,

 

Mm-hmm.

 

I sort of already got into, uh, the kind of work that I do now, um, at Chromatic, but just for, you know, a company of like 300 developers,

 

Right.

 

uh, turned into, you know, a globe full of developers from all over the world. Uh, not terrifying at all, at

 

Yeah!

 

all. Um, so yeah, it was kind of sort of sort of a natural progression. Um, I got laid off in the summer from, from Well Simple and, uh, I knew that, uh, Chromatic was hiring. I knew Barun, um, and so I went for a chat. Initially, I talked to Michael Shilman about working on the storybook team as like one of the core contributors.

 

Mm-hmm.

 

Um, and he said that, well, why don't you talk to, to, to Dom as well. Dom, uh, runs the DX team and sounds like you might also enjoy some of that. And then we can decide how your interview process goes from there. And as

 

Yeah.

 

soon as I've been on the call for like five minutes with Dom, I'm like, oh no, I'm, I'm, I'm working on the DX team. It's happening.

 

Hahaha. Yeah.

 

Yeah. And the rest is history as they say.

 

Mm-hmm. Well, it sounds like a very natural progression. You know, you go from being an internal advocate for storybook to

 

Right.

 

Just working for the company itself

 

Exactly, yeah. Definitely pretty awesome. I still start work some days and go, is this real? What is this?

 

Oh nice! That's

 

Yeah,

 

great!

 

it's really, really cool. The company is still very, very small and everyone's so, so nice. I'm someone who gets like imposter syndrome early on and I'm sure like we all do.

 

Yeah,

 

Um, I want to know who isn't. What are

 

yeah,

 

you?

 

I'll do. Yeah. No, yeah, right. Only a psychopath is like,

 

Exactly.

 

I'm just

 

Mm-hmm.

 

the

 

Mm-hmm.

 

Yeah.

 

Right.

 

best coming into

 

There's

 

this.

 

something

 

There's nobody

 

wrong.

 

better than me. And

 

Yeah.

 

that's what, and by the way, that's the worst job to have. If you're not learning anything, if you're not working with people who are better, not better, but whatever, they

 

Yeah,

 

have different skillsets and you're learning

 

exactly.

 

every

 

Of

 

day,

 

course.

 

that's the

 

Yeah.

 

great place to be. Yes, it's gonna

 

Yeah.

 

feel a little uncomfortable, but hey, it's better. He's

 

Absolutely.

 

You just learned something new, you grew.

 

Yeah.

 

learned something, exactly.

 

I

 

He

 

have

 

has

 

a

 

learned

 

story.

 

not to set a fixed width.

 

Yeah,

 

Right?

 

I

 

I've learned valuable lessons

 

Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha

 

from myself.

 

absolutely yeah, me from five minutes ago. Thank you for teaching me. Yeah.

 

Hahaha

 

Exactly.

 

So I have I have a story about you mentioned like different skill sets and people tend to

 

Yeah.

 

like get imposter syndrome from that. But before, what I was, what I was saying is it's really hard. Uh, it was really hard for me starting at Chromatic to get imposter syndrome because

 

Hmm.

 

you've got such a small company and everyone's so excited that someone new is joining. You get like DMs

 

Hehehehe

 

from every person. You're setting up all these coffee chats. Um, and yeah, it's, it's just everyone's so nice and friendly and excited. It was just, it's still really hard for me to be like, Oh, I don't. Maybe I'm not good enough to be here. Like it's, yeah. So it's really

 

Is it all

 

a

 

virtual?

 

joy. Yeah.

 

Yeah,

 

Yeah.

 

is it

 

We've

 

Okay.

 

a

 

got

 

fully

 

people

 

remote?

 

all over the world. We've got

 

Nice.

 

a handful of folks in the Netherlands. Uh, we've got someone in Taiwan. Uh,

 

Cool.

 

there's a few of us in Canada, then a big smattering of people across the U S. So, yeah, we're

 

Can

 

all

 

I geek

 

over the place.

 

out here for a second and ask

 

Yeah.

 

about micro front ends?

 

Yeah, of

 

So

 

course.

 

module federation and micro front ends, because there was some stuff done early on with Storybook and trying to get it so that you could remote load

 

Yeah.

 

components. Is that still going on? Where does that sit? Or

 

Right,

 

is that something

 

so

 

you know about?

 

we have something called storybook composition where if the packages that you, like the dependencies that you have have a storybook, it will load that storybook into your own. So for

 

Okay.

 

example, if like Material UI had a storybook

 

Oh wow.

 

and you're working on that, you would see all of the stories from Material UI at the bottom and you could flick through all of that and see all the documentation, how it all works, all

 

Mm-hmm.

 

of the code

 

And

 

there.

 

then you would get your theme on their stuff.

 

Yeah, yeah.

 

Oh,

 

Sweet.

 

okay, all right.

 

Yeah. Pretty neat,

 

Well,

 

I'm sorry.

 

pretty

 

it is

 

cool,

 

neat, that is

 

yeah.

 

neat. Cause you don't wanna rewrite all those, that's craziness.

 

Yeah.

 

Course, yeah.

 

Yeah.

 

Oh yeah, so in the article that you invited me on here for, we have a part about TypeScript and reusing the types there

 

Mmm.

 

to generate the controls for your stories too, which is

 

Mm-hmm.

 

very, very handy. Because yeah, I don't wanna rewrite all

 

Yeah.

 

of those, all those types and the controls to go with it. Oh, yeah.

 

And not to sound too, too, no, I really have appreciated how good the TypeScript integration is in the storybook, honestly. Like,

 

Yeah.

 

it's really good. You did

 

It's,

 

good. You did

 

it's

 

well

 

pretty

 

there.

 

great. Yeah. I,

 

Yeah.

 

it's, and it's, it's getting better all the time. We just added, um, storybook 4.9 to, uh, sorry, TypeScript 4.9 to storybook seven. There we go. I got it all muddled up there for a second. So we get to use the new satisfies keyword. Uh,

 

Mm-hmm.

 

which

 

Oh yeah!

 

yeah, which means you can, you don't have to add every single prop to all of your stories. So it doesn't

 

Oh,

 

error

 

sweet.

 

out. It just satisfies the whole prop list, which is fantastic. Makes it so much easier.

 

Yes.

 

Yeah, I've been

 

Yeah.

 

looking for a really good, like, satisfying story,

 

Hehehehehehe

 

you know,

 

Well, it's

 

around

 

there.

 

like, why is this thing interesting? Because it's like, on Facebook, you're like, but

 

Yeah,

 

now

 

Yeah.

 

it's

 

for

 

like,

 

sure.

 

oh, that makes a lot. Wow, that actually

 

Absolutely.

 

makes a lot of sense. Yeah.

 

Yeah. So you'll, you'll start seeing that come up. in our TypeScript examples soon as well. So yeah.

 

Fantastic. So one question that I have is, if you already have a project, let's say that you've already got a React application or something, and you wanted to start integrating Storybook into it, what is your advice to get started? Especially for those large projects that have lots and lots of components or lots of libraries they're pulling in, what advice would you offer to people to get going?

 

Yeah, absolutely. So the storybook CLI is a great place to start. If you run NPX SB it will read through your project to try and figure out what kind of framework you're using and start scaffolding everything out for you. And it even puts a little stories folder into your source folder with a few example stories so you can see what, like, how you would write stories for your project. And

 

Mm-hmm.

 

then from there, I heard this saying one time, if something's worth doing, it's worth doing poorly.

 

Hmm.

 

which on the face of it, like bear with me here for a second. The idea is like, if you feel like you can't clean your teeth like doing it for a few seconds is better than not doing it at all. So taking

 

Mmm.

 

the same approach there,

 

Oh, okay, sure.

 

like writing a story is better than having no stories at all. And yeah, I like to take the sort of the scouts rule of leave the code base instead of campsite,

 

Hehehe

 

Better than you found

 

cleaner,

 

it,

 

better

 

right?

 

than you found it, yeah. So

 

Yeah,

 

if you happen

 

yeah.

 

to be in the

 

Got

 

right

 

it.

 

area, just throw a little extra story in or, you know, your

 

Mm-hmm.

 

test, whatever you're in there for, and

 

Yeah.

 

yeah, slowly but surely, it doesn't have to be like an all or nothing thing, which

 

Mm-hmm.

 

I know that we definitely get into the habit to, especially like larger teams, larger projects, like. Well, if we're gonna commit to using this thing, we should do it. So that there's not like

 

Yeah,

 

50

 

overdo

 

different

 

it,

 

tools.

 

you know.

 

Right.

 

Yeah, exactly. But that just like, that puts the blocker in our way of actually doing something that's gonna be good for us in the end.

 

Mm-hmm.

 

And so, you know, they're already in their own contained stories.js or.ts files. So in a day, if it's not working out, just, I don't know. RMRF, get them out of there.

 

Yeah, well, you

 

Just

 

know, what's

 

kidding.

 

the there's another like don't let the perfect be the enemy of the good or something like basically

 

Yeah,

 

sort

 

Right.

 

of

 

yeah, all of those inspirational poster sayings like, yeah, just give it a go. Try it.

 

Right. Ship it. Don't wait for it to be perfect. That kind of thing.

 

Hang

 

Yeah.

 

in there, cat falling off cliff.

 

Exactly. Yeah.

 

Right.

 

But for storybook.

 

What

 

All right.

 

the hell

 

I mean,

 

is going

 

that's.

 

on? We really need to come up with a line of inspirational cards for React developers. Like, you

 

Yeah,

 

know,

 

Absolutely. Yeah.

 

yeah.

 

that's a good way to approach it though, because that's the same kind of approach that my team takes for linting, because we have a lint rule set up that when the build runs, it checks that we haven't added more lint to the project. It either has to be the same amount or less.

 

Hahaha

 

And

 

Yeah.

 

if it fails, it's because there's too much lint and you have to go fix some. But it's the same thing. It's really simple stuff to usually do. It just takes a few

 

Yeah.

 

extra minutes to find some, fix it. move on with your day.

 

Yeah, I so I've worked with teams, I won't name any names or talk

 

Hehehe

 

about that. Give you the link to the repo. But we got to a point where there's so many link warnings

 

Hahaha

 

in the CLI that it was hard to see the link errors, which

 

Right.

 

is what the CLI

 

Yeah.

 

was failing on. Can we just only show errors instead of these warnings?

 

No.

 

Like, you need to clean up

 

What?

 

the warnings too.

 

Oh my God, that's like the worst possible decision. That's like,

 

Absolutely.

 

you know, there's not, there's too much toxic sludge in my backyard, but let's just build a deck on top of the toxic sludge.

 

Exactly.

 

Just ignore

 

Like, what are

 

that.

 

you

 

Yeah.

 

doing? What? Madness.

 

If you ignore

 

What?

 

it, it will go away. Like, it's like wasps. Just don't look at them.

 

Oh my god.

 

He'll go.

 

Yeah. Oh my god. That's literally the worst programming story I've heard today. Which not, you know, it's only nine my time, so whatever.

 

Right, still early.

 

Yeah. So

 

The

 

Perfect.

 

day

 

early.

 

is young.

 

Oh god.

 

Oh, I'm sure we all have them. We all have them. But you

 

Oh,

 

know what,

 

God.

 

like, at the end of the day, like, you're working on a big project, you've got timelines and whatnot. I get it, like, making the decision, like, okay, well, I don't want to deal with this right now. I need to get this feature going.

 

Oh

 

But

 

yeah.

 

yeah, yeah, it happens. But yeah, we should be able to laugh a little bit and kick ourselves in the butt for it too.

 

Oh my gosh. Is there any? Wow. I, this has been so much fun that

 

Yeah,

 

I hate, I

 

yeah,

 

hate to actually

 

absolutely.

 

end it, but I mean, is there any, is there anything we need to talk about that you might, you know, like big things we haven't talked about that we haven't? Cause I think we

 

Yeah,

 

covered a ton.

 

Yeah

 

I

 

we

 

mean

 

certainly

 

the the

 

did.

 

new stuff with Storybook just

 

Yeah,

 

sounds so great.

 

I'm in on this conference, man. I'm March.

 

I am

 

Here

 

so

 

we come.

 

excited. I can't wait to see you there. It's

 

Yeah.

 

gonna be a blast. Yeah, I'll talk a little bit about integrations like I did today. But I'll have little slides and probably some funny GIFs in there too. Yeah,

 

Huh?

 

to keep it interesting.

 

So you're gonna be presenting, and then other people are gonna be presenting as well, I'm guessing.

 

Yes, lots and lots of presenters. I'll probably be up for like five minutes. It won't be for very

 

Okay.

 

long. But you'll see me. I'll be there.

 

You know the

 

Hehehe

 

MC between ones? Here's a little little comedy

 

I don't

 

keep you going.

 

think I'm I'm emceeing.

 

Aww. You do well.

 

Michael Chan, Chantastic is doing it and

 

Oh,

 

he will nail it. So

 

yeah, Michael Chan

 

absolutely.

 

is great. He's, he's

 

Love

 

always fun

 

him.

 

to watch.

 

Absolutely.

 

Okay.

 

Yeah, I don't think I have anything unless you want to hear that story that I, I got distracted and didn't tell

 

Oh

 

about.

 

Yes,

 

yes please please please please

 

absolutely.

 

Yeah,

 

yeah yeah yeah absolutely.

 

so early on in my career, again, I was at

 

What was Wrangle?

 

Wrangle is a JavaScript consultancy

 

Okay.

 

in Canada.

 

Okay.

 

Lot of really amazing people, like a lot of my best friends I met working there. Actually, my partner, we're getting married next year.

 

Hey,

 

We met

 

congrats!

 

while we were sitting across from each other.

 

Awwww.

 

Yeah,

 

No!

 

naw.

 

Aww.

 

Love it first keyboard click.

 

Exactly. The first time I just. mashed down on my blue, my cherry blue keys annoyed everyone. She was like,

 

Right? Yes, exactly.

 

that

 

I

 

guy's

 

can hear

 

annoying

 

This

 

the click.

 

guy.

 

enough.

 

Yes. I was like,

 

Yeah.

 

yeah, that's the one.

 

What confidence. Yeah.

 

I'm sorry. So I distracted you. Go on.

 

It's

 

Story

 

okay,

 

Again,

 

I am

 

right?

 

at

 

prone

 

place.

 

to it, yeah. So again, very early on into my career, being at Wrangle and all these amazing people, there were two engineers there that, you know, have been in the industry for like a decade plus and all of the stuff they do is so amazing and I remember just being in awe of them and thinking like, I can never be able to code like that. I still don't think I can, but hey, whatever, here we are. Um, and so I remember talking to one, uh, so developer number one said like, ah, developer number two does this thing that, uh, makes me feel like a moron, they're so good. Um, I love everything about them. Like I, hopefully one day I can be a developer as good as they are. And then a few weeks later, I was talking to developer two on their last day and they happened to mention developer one and how they felt sort of inferior and like

 

Oh wow.

 

not as smart as this other person. Like, wow, even these two powerhouses that I've

 

Mm-hmm.

 

looked up to for all these months, getting to work with them, I think they're both incredible. And they're like, oh crap, compared to the other guy. Like. Yeah, you never you never know who like looks up to you and what you have to offer. Like even,

 

Mm-hmm.

 

even if you're really, really early on into your career, you could be really, really good at something that everyone else your team just maybe doesn't even have any

 

Yeah.

 

idea about

 

Yeah.

 

like there's always

 

Yeah.

 

room to teach each other, regardless of your, your seniority. So yeah.

 

Mm-hmm.

 

Yeah, if you're

 

That's

 

feeling

 

it.

 

any imposter syndrome, just remember There's probably someone thinking you're amazing. Maybe it's

 

That's

 

me.

 

really great. Thank you.

 

That's

 

Yeah.

 

so

 

You know?

 

inspirational.

 

Yeah,

 

Yeah.

 

it really

 

Yeah,

 

is.

 

we

 

Aww.

 

can put that on a poster, one of our React posters.

 

I know

 

There

 

one

 

Yeah.

 

of

 

you

 

our

 

go.

 

React Cheer Me Up posters.

 

Yeah, I'll have my people talk to your people. We'll figure

 

Right,

 

it out. We'll set up

 

eventually

 

a store.

 

your code base will run clean. Is

 

Maybe,

 

there something like that? Yeah, right.

 

we hope.

 

Yeah, we

 

We

 

hope.

 

don't want

 

Yay.

 

to sell them

 

Yes.

 

that much hope.

 

Yeah, it's somewhere between demoralizer. You remember demoralizer? Like there's

 

Yeah.

 

Oh, those are great.

 

posters.

 

Yeah,

 

Yeah.

 

the demotivational posters,

 

Demotivation,

 

I love those.

 

yes.

 

Yeah,

 

Yeah,

 

we've

 

I

 

got,

 

have to take a look at those,

 

we've

 

see

 

got

 

if

 

this

 

those are

 

beautiful

 

around as well. Oh,

 

print in our bedroom

 

Those are hilarious.

 

that

 

yeah?

 

says, it gets worse instead of it gets better. And it's

 

Ehehehehehe

 

like, in front of a beautiful landscape and I look

 

Ha

 

at it and go,

 

ha ha ha!

 

ah, but then I giggle. So yeah, it's a good

 

Yeah,

 

way to start the day.

 

exactly. Yeah, yeah, yeah. Alright, well, let's do our picks. Paige, what do you have for picks this week?

 

Sure, so I have a holiday themed pick for everyone.

 

Oh!

 

Not sure when this is coming out. It may be before Christmas, it may be after. But if you like to make holiday drinks and you're looking for something besides the traditional eggnog that most of North America is very fond of and familiar with, I would recommend you try out puncha creme, which is the Caribbean South American version of eggnog. So... My husband

 

Oh.

 

is originally from the island of Trinidad. So it's a normal tradition for his family to make, but it's basically condensed milk, evaporated milk, rum instead of bourbon,

 

Yeah, as you do.

 

lime peel because we've got that South American thing going on. And

 

Zesty.

 

then a little bit of bitters because that just goes with everything and a dash of nutmeg. So.

 

Nice.

 

If you want to do something that's a little bit different, got a really nice flavor, still feels very Christmassy and rich and decadent. I will put a link to one of the many recipes for it, but it's excellent. It's a great drink for the holidays.

 

Page? That is now my pick. I don't have anything better than that. That

 

Ha

 

sounds

 

I'm

 

amazing.

 

ha!

 

out. Bye.

 

Okay, well, Sean, you don't want to do a pick? It's

 

Oh,

 

fine.

 

no, I've got picks.

 

Oh,

 

I've

 

oh,

 

got,

 

oh, yeah, yeah, yeah, yeah, yeah.

 

Hehehehe

 

Okay,

 

I

 

yes.

 

wasn't sure which way to go. And I didn't come prepared with any cooking utensil picks.

 

Oh no.

 

So now

 

I know,

 

I feel

 

that's

 

like

 

very

 

I'm,

 

classic for

 

yeah,

 

us.

 

I feel like I'm being a little bit boring by sharing some developer tools here. So I've got two. So first of all, I just started using warp terminal, which is so, so good. Even just being able to like click and the pointer goes the the cursor goes there

 

I love Warp Terminal, it's fantastic.

 

it's amazing

 

Okay, can I just shout in for a sec? I did a whole video on Warp Terminal and half the comments though are like, I have to give a login to get into my terminal. And I'm like, what? And

 

I haven't

 

the

 

logged in

 

guys are very into like, no, I know. And that's weird because like all the developer tools nowadays they ask for a GitHub login. I mean, come

 

Great.

 

on, but

 

Yeah.

 

whatever. I digress, so yes, I like

 

Yeah.

 

it. I, yeah,

 

Me

 

yeah.

 

too.

 

I think it's fantastic. And then, on the note of the holidays, my favorite gift that anyone has given me this year is an invite to the ARK browser by the browser company, which is what I'm talking to you on right now. It's amazing. It truly, as someone with ADHD who has a hard time focusing and trying to... you know, stick to the task at hand, having

 

Mm-hmm.

 

the spaces and even the different profiles to only have the things that you need open at the time is amazing. And when it auto-archives tabs that I have open forever and still haven't read,

 

Mm-hmm.

 

it gets rid of it for me instead of me panicking, being like, well, what if I need it one day? I'm like, you'll

 

Right.

 

find it, it's there. Yeah, so treat yourself. Sign up for Arc browser.

 

Sweet.

 

That was giving me my pick. You killed me.

 

Oh

 

Oh my

 

no!

 

god But I will say there there's a you didn't mention that there's a picture in picture mode

 

Yes!

 

It's an ARC browser, which is so good. It's stupidly

 

Oh!

 

good Like, you know, just kind of like it's exactly what you want But that's the weird thing is like it's trying to get you away from distractions The internet the picture in picture is such an amazing distraction that like it's it's so good Anyway,

 

It's pretty

 

a

 

good.

 

page have you gotten an invite because I gladly send you an invite over on

 

I do

 

Yeah!

 

not have an invite, but

 

Okay.

 

I would love to have one.

 

Yeah, yeah, yeah.

 

Perfect!

 

You

 

Hehehe.

 

want this? This is really good.

 

Absolutely!

 

Um, okay. So I'm going to come up with one on the fly. It is a kitchen tool.

 

Yes!

 

So

 

Yes!

 

yeah, the, the, yeah, the

 

The

 

Zojirushi

 

streak continues.

 

I would say, uh, rice maker. My, my,

 

Mmm.

 

you

 

Mmm.

 

know, my wife is like, I want my 10th rice maker cause she's killed everyone previous. So it's like, you know, there we go. So that's going to be either

 

I'm

 

Christmas.

 

gonna go.

 

My wife is like one of those Christmas babies. So her her birthday is just a few days before Christmas. So it's always like,

 

Mmm.

 

it's just basically like a pile. And it's like, okay,

 

Yeah.

 

this pile's, you know, that

 

Yeah,

 

Yeah.

 

birthday,

 

some

 

this

 

have

 

pile's Christmas.

 

Christmas

 

You're

 

paper, some have

 

right. Yes,

 

birthday

 

exactly.

 

paper. It's

 

Yeah,

 

just all...

 

yeah, yeah. And

 

Yeah.

 

this is kind of sum up by wage or something. Yeah.

 

Hey,

 

Nice.

 

I mean, you

 

Wow.

 

get it all out of the way in one in one go, right?

 

Mm-hmm.

 

You can think about you're just like, no, you didn't forget.

 

No, it just means a lot of shopping. And it means

 

There's

 

a lot

 

that

 

of shopping,

 

true.

 

like right at the worst shopping time of the year.

 

That's

 

You

 

true.

 

know,

 

Yeah.

 

like everybody, at least we're all, I don't know, we're all doing it online, but nowadays I want to still support local businesses. So it's like,

 

Mm-hmm.

 

Absolutely.

 

all

 

Yeah.

 

of that. Yeah.

 

toss up.

 

It really

 

Yeah.

 

is. Yeah. It's tough. Well,

 

Well...

 

Sean, this has been so much fun. And

 

Mm-hmm.

 

Yeah,

 

you know, it's

 

thank

 

like,

 

you so much for having me, Jack

 

yeah.

 

Page. It's been an absolute pleasure.

 

Yeah.

 

Yeah.

 

Can't wait to

 

Absolutely.

 

have you on again at some

 

Yeah.

 

point.

 

That

 

I'm

 

would

 

getting

 

be

 

learned

 

fantastic!

 

more. Let's

 

Yeah!

 

do it for the eighth release.

 

Absolutely.

 

You know, whenever

 

Yeah.

 

that is.

 

Storybook

 

Yes.

 

Perfect.

 

8.

 

Storybook 8.

 

I don't think I can

 

Exactly.

 

say, but

 

Storybook

 

we,

 

Ocho.

 

we are thinking about what will go into eight as well, actually. So

 

Good.

 

Oh

 

yeah,

 

boy.

 

it's a possibility.

 

Oh, you should. I mean, I'm sure there's a road map somewhere.

 

There certainly is, yes. Yeah. That's also

 

Okay.

 

like we talk about the roadmap every month and anyone on our Discord channel is welcome to drop

 

Oh!

 

in and check it out. So,

 

Nice.

 

Well,

 

yeah.

 

that's a nice, come on, that's a nice plug right there.

 

Yeah,

 

Yeah, there we

 

Yeah.

 

go,

 

put

 

perfect.

 

your thoughts in here, share

 

Yeah.

 

your feelings.

 

Exactly.

 

Make Discord

 

["The Roadmap"]

 

one of your 100 or so Discord, I mean, make that one of your 100 or so Discord servers that you're on.

 

Absolutely,

 

I think it's

 

yeah.

 

actually a limit apparently.

 

Really.

 

Oh,

 

I think there is,

 

That's

 

yeah.

 

probably

 

wow.

 

I'm

 

for

 

not

 

the best.

 

close. I think I'm only getting my 25s at least right now, but you know.

 

Oh man. I think my,

 

too much

 

every

 

stuff

 

time

 

to

 

I

 

keep

 

look

 

up

 

at Discord,

 

with.

 

feel like my brains are gonna leak out of my ears. So

 

Ha ha

 

many.

 

Mm-hmm.

 

ha!

 

Yeah.

 

Too much!

 

If I had to pick one DM though, definitely be discord. There's so like teams is abysmal. Slack is

 

Oh.

 

is better

 

Yeah.

 

and then discords just.

 

Hehehe

 

It's pretty good.

 

Yeah. All right. Well, this has been wonderful. Thank you so much

 

Thank

 

and

 

you.

 

we'll see you next next week.

 

Absolutely.

 

Yep. See you then.

 

Take care. Bye!

 

Bye!

 

I'm sorry.