Jack_Herrington:
Welcome back to React Roundup. I'm your host for today, Jack Harrington, and with me is my esteemed colleague, Paige Neaderinghouse.
Paige_Niedringhaus:
Hey everybody.
Jack_Herrington:
And our special guest for the day, Sean Evening.
Shaun_Evening
Hey, how's it going?
Jack_Herrington:
going really well. So Sean, let's talk about what brings you to React Roundup today.
Paige_Niedringhaus:
I'm gonna go to bed.
Shaun_Evening
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.
Jack_Herrington:
Storybook's awesome. Oh
Shaun_Evening
Thank
Jack_Herrington:
my
Shaun_Evening
you.
Jack_Herrington:
gosh.
Shaun_Evening
I
Jack_Herrington:
And
Shaun_Evening
like
Jack_Herrington:
there's
Shaun_Evening
to think
Jack_Herrington:
a,
Shaun_Evening
so.
Jack_Herrington:
yeah. And there's a new release.
Shaun_Evening
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
Jack_Herrington:
Woo!
Shaun_Evening
be doing a Storybook
Paige_Niedringhaus:
Hehehe
Shaun_Evening
Day, a small one-day conference to talk all
Jack_Herrington:
Oh nice.
Shaun_Evening
about Storybook 7.0.
Paige_Niedringhaus:
Sweet.
Shaun_Evening
There's a really, really cool website where you can
Jack_Herrington:
Oh!
Shaun_Evening
get this like 3D customizable ticket. Uh,
Paige_Niedringhaus:
Oh.
Jack_Herrington:
This is the thing
Shaun_Evening
yeah.
Jack_Herrington:
with like next.js really like spearheaded the whole like really cool landing page thing and everybody's like,
Shaun_Evening
Absolutely.
Jack_Herrington:
yeah, I gotta do that. Yeah,
Shaun_Evening
Absolutely.
Jack_Herrington:
a 3D ticket.
Shaun_Evening
Yeah,
Jack_Herrington:
I'm in.
Paige_Niedringhaus:
Yeah.
Shaun_Evening
we lovingly stole that from them for this
Jack_Herrington:
Yes!
Shaun_Evening
there. It's fantastic. And my colleague Varun who does a lot of these sites and stuff for us, he's just so good.
Jack_Herrington:
Yeah.
Shaun_Evening
I can't wait for everyone
Paige_Niedringhaus:
That's
Shaun_Evening
to see
Paige_Niedringhaus:
awesome.
Shaun_Evening
it.
Jack_Herrington:
Yeah, yeah.
Shaun_Evening
It blows my mind every time I see something new from
Jack_Herrington:
It's
Shaun_Evening
him.
Jack_Herrington:
funny because it's all about just limited by your imagination nowadays. You gotta
Paige_Niedringhaus:
Hehehehe
Jack_Herrington:
like think
Shaun_Evening
Absolutely.
Jack_Herrington:
this stuff up and then just like, that's the tough part. And then you're,
Shaun_Evening
Yeah, or
Jack_Herrington:
yeah.
Shaun_Evening
you can ask a chat GPT to do the imagination part for you.
Paige_Niedringhaus:
Now
Shaun_Evening
Yeah.
Paige_Niedringhaus:
you can.
Jack_Herrington:
Oh my gosh, so much fear and loathing around chat GBT.
Paige_Niedringhaus:
All right, so when is this conference happening, Sean? Tell us, tell us the dates.
Shaun_Evening
Oh,
Paige_Niedringhaus:
How do you get there? How do you sign up?
Shaun_Evening
I believe that it's March 1st.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
The website will be announced tomorrow. I have been asked specifically. Don't give the address
Jack_Herrington:
This
Shaun_Evening
to the
Jack_Herrington:
is
Shaun_Evening
website
Jack_Herrington:
going to come
Shaun_Evening
for
Jack_Herrington:
out
Shaun_Evening
the
Jack_Herrington:
in
Shaun_Evening
second.
Jack_Herrington:
weeks,
Shaun_Evening
Yeah.
Jack_Herrington:
so don't worry about it. You're good.
Shaun_Evening
Oh,
Jack_Herrington:
Yeah.
Shaun_Evening
for sure.
Jack_Herrington:
Yeah,
Shaun_Evening
Oh, perfect.
Paige_Niedringhaus:
Right.
Shaun_Evening
Then
Jack_Herrington:
yeah, yeah.
Shaun_Evening
I believe it's a storybook.js.org slash day.
Paige_Niedringhaus:
Okay.
Shaun_Evening
But
Jack_Herrington:
Okay, yeah,
Shaun_Evening
yeah,
Jack_Herrington:
awesome.
Shaun_Evening
I'll double
Paige_Niedringhaus:
We can
Shaun_Evening
check
Paige_Niedringhaus:
drop
Shaun_Evening
that.
Paige_Niedringhaus:
that in the show notes.
Jack_Herrington:
Yes, absolutely.
Shaun_Evening
If it's wrong, then just bleep it out or just do a really poor voiceover.
Jack_Herrington:
Just added it. You're good.
Shaun_Evening
Yeah,
Jack_Herrington:
You're good.
Shaun_Evening
we'll fix it in post.
Jack_Herrington:
We got
Shaun_Evening
That's
Jack_Herrington:
this.
Shaun_Evening
fine.
Jack_Herrington:
We got the fix
Shaun_Evening
Yeah.
Jack_Herrington:
it in post. Exactly.
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
Well, so what should we expect? Can you leak the big announcements or what are we talking about here?
Paige_Niedringhaus:
Will they
Shaun_Evening
I...
Paige_Niedringhaus:
be workshops, con,
Jack_Herrington:
Oh,
Paige_Niedringhaus:
you
Jack_Herrington:
yes.
Paige_Niedringhaus:
know, speakers,
Shaun_Evening
There'll
Paige_Niedringhaus:
free
Shaun_Evening
be...
Paige_Niedringhaus:
swag?
Jack_Herrington:
Hahaha!
Shaun_Evening
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
Jack_Herrington:
Awesome.
Shaun_Evening
will be
Paige_Niedringhaus:
Nice.
Shaun_Evening
pretty cool. I have already signed up. Yes, I am a chromatic, and I do get a lot of storybook stuff from
Paige_Niedringhaus:
Hehehe
Shaun_Evening
time to time, but I won't say no to more. So,
Paige_Niedringhaus:
Exactly.
Shaun_Evening
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
Jack_Herrington:
Yeah,
Shaun_Evening
because
Jack_Herrington:
because
Shaun_Evening
I'll just,
Jack_Herrington:
they know
Shaun_Evening
I'll leak
Jack_Herrington:
you're
Shaun_Evening
it.
Jack_Herrington:
just gonna leak,
Paige_Niedringhaus:
They
Jack_Herrington:
man.
Paige_Niedringhaus:
can't
Shaun_Evening
Yeah, exactly.
Paige_Niedringhaus:
trust you.
Jack_Herrington:
No,
Shaun_Evening
Yeah.
Jack_Herrington:
I need to be trusted exactly.
Shaun_Evening
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.
Jack_Herrington:
Ooh, nice.
Shaun_Evening
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,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
there's tons and tons more stuff there. So yeah,
Jack_Herrington:
Well,
Shaun_Evening
tune
Jack_Herrington:
I'm going to
Shaun_Evening
in.
Jack_Herrington:
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.
Paige_Niedringhaus:
I
Shaun_Evening
Yes,
Paige_Niedringhaus:
was
Jack_Herrington:
So
Paige_Niedringhaus:
just going to
Shaun_Evening
oh my.
Paige_Niedringhaus:
say
Jack_Herrington:
Sean,
Paige_Niedringhaus:
that.
Jack_Herrington:
can you give us like a 20 second, 30 second primer
Shaun_Evening
Absolutely,
Jack_Herrington:
on storybook?
Shaun_Evening
oh, I do this
Paige_Niedringhaus:
Yeah
Shaun_Evening
all the time. I'll show up at like parties and stuff.
Jack_Herrington:
Well, yeah, yeah, yeah, yeah,
Shaun_Evening
And
Jack_Herrington:
yeah.
Shaun_Evening
I won't
Jack_Herrington:
Imagine
Shaun_Evening
introduce
Jack_Herrington:
that.
Paige_Niedringhaus:
He
Shaun_Evening
myself
Paige_Niedringhaus:
just...
Jack_Herrington:
Imagine
Shaun_Evening
for
Jack_Herrington:
you're at a party
Shaun_Evening
half an hour.
Jack_Herrington:
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.
Shaun_Evening
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,
Jack_Herrington:
Yeah,
Shaun_Evening
the sort
Jack_Herrington:
that's
Shaun_Evening
of
Jack_Herrington:
cool.
Shaun_Evening
the right state. Yeah.
Jack_Herrington:
Yeah.
Shaun_Evening
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
Jack_Herrington:
Hmm.
Shaun_Evening
for that. It's one of the coolest
Paige_Niedringhaus:
That
Shaun_Evening
things
Paige_Niedringhaus:
sounds
Shaun_Evening
I've
Paige_Niedringhaus:
awesome.
Shaun_Evening
ever seen. Yeah.
Jack_Herrington:
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
Paige_Niedringhaus:
I'm
Jack_Herrington:
the
Paige_Niedringhaus:
gonna go.
Jack_Herrington:
10 million credits section of the game
Shaun_Evening
Exactly,
Jack_Herrington:
and not have to
Shaun_Evening
exactly.
Jack_Herrington:
worry about actually getting to 10 million credits just to test it.
Paige_Niedringhaus:
Hehehe
Shaun_Evening
And you don't have to pay for the play to win
Jack_Herrington:
Right.
Paige_Niedringhaus:
There
Shaun_Evening
packages
Paige_Niedringhaus:
you go.
Shaun_Evening
to get the 10
Jack_Herrington:
Do people
Shaun_Evening
million
Jack_Herrington:
have to
Shaun_Evening
credits
Jack_Herrington:
play?
Shaun_Evening
to.
Jack_Herrington:
That's the, here's another TJ question. Do people have to pay for a storybook?
Shaun_Evening
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.
Jack_Herrington:
How does Chromatic make money? Are you a consultancy?
Shaun_Evening
No, so we have a paid tool called Chromatic,
Jack_Herrington:
Oh, okay.
Shaun_Evening
which is like storybook multiplayer is the way I describe
Jack_Herrington:
Hahaha!
Shaun_Evening
it. Think about to use the games metaphor yet
Jack_Herrington:
Sure.
Shaun_Evening
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
Jack_Herrington:
Mmm.
Shaun_Evening
PR. So you can look at the snapshots of
Jack_Herrington:
Oh
Shaun_Evening
before
Jack_Herrington:
nice.
Shaun_Evening
and after your PR. You can see, oh,
Paige_Niedringhaus:
Mmm.
Shaun_Evening
by changing the margins here, this screwed up half of the app, not just this one component
Jack_Herrington:
Right.
Shaun_Evening
that I changed it for.
Paige_Niedringhaus:
Yep.
Shaun_Evening
So it's a really awesome way to be able to pinpoint those visual differences. Yeah.
Jack_Herrington:
Do fuzzy matching and all that?
Shaun_Evening
Fuzzy matching, as in like...
Jack_Herrington:
Well, like you, you can basically run a unit test about the UI, about the state of the UI itself, like
Shaun_Evening
Yeah.
Jack_Herrington:
to hit the margin bug. Yeah.
Shaun_Evening
Yeah,
Jack_Herrington:
Okay.
Shaun_Evening
yeah, absolutely.
Jack_Herrington:
Oh, very
Shaun_Evening
So
Jack_Herrington:
cool.
Shaun_Evening
it will actually do a little onion skin over
Jack_Herrington:
Oh, that's
Shaun_Evening
the
Jack_Herrington:
cool.
Shaun_Evening
new screenshot.
Paige_Niedringhaus:
nice.
Shaun_Evening
So
Jack_Herrington:
Oh,
Shaun_Evening
you can
Jack_Herrington:
okay.
Shaun_Evening
toggle that
Jack_Herrington:
All
Shaun_Evening
on
Jack_Herrington:
right
Shaun_Evening
and
Jack_Herrington:
then.
Shaun_Evening
off.
Jack_Herrington:
Oh.
Shaun_Evening
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
Jack_Herrington:
Critical
Shaun_Evening
top
Jack_Herrington:
features.
Shaun_Evening
notch features. Yeah,
Paige_Niedringhaus:
Right,
Shaun_Evening
absolutely.
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
the
Jack_Herrington:
yeah.
Paige_Niedringhaus:
things
Jack_Herrington:
Ha
Paige_Niedringhaus:
developers need.
Jack_Herrington:
ha ha ha! Yeah.
Shaun_Evening
Exactly. Yeah.
Jack_Herrington:
Yes. The thing that ChapGBT
Paige_Niedringhaus:
Oh my god.
Jack_Herrington:
can't do today. Ha ha!
Shaun_Evening
Exactly.
Paige_Niedringhaus:
Right.
Shaun_Evening
Yet. Yet. Yeah, they'll
Paige_Niedringhaus:
Oh
Shaun_Evening
just,
Paige_Niedringhaus:
man,
Shaun_Evening
uh,
Paige_Niedringhaus:
I could have,
Shaun_Evening
sorry,
Paige_Niedringhaus:
I could
Shaun_Evening
go
Paige_Niedringhaus:
have
Shaun_Evening
for it,
Paige_Niedringhaus:
used
Shaun_Evening
bitch.
Paige_Niedringhaus:
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
Shaun_Evening
Oh
Paige_Niedringhaus:
it
Shaun_Evening
no.
Paige_Niedringhaus:
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.
Shaun_Evening
Absolutely. Yeah, I'll pour one out over here for you for that.
Paige_Niedringhaus:
Ha ha!
Shaun_Evening
I have done that to myself so many times. It's never
Jack_Herrington:
Damn
Shaun_Evening
fun.
Jack_Herrington:
it.
Shaun_Evening
You never feel great once you've found it either.
Paige_Niedringhaus:
No, because
Jack_Herrington:
Hahaha
Paige_Niedringhaus:
I had done it to myself, just
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
thinking I was being smart fixing one thing and then breaking several others in
Jack_Herrington:
Well,
Paige_Niedringhaus:
the process.
Jack_Herrington:
that's the problem, right? You fix the one thing, you're like, yeah, I fixed
Paige_Niedringhaus:
Yes!
Jack_Herrington:
it. And then you
Paige_Niedringhaus:
Looks
Jack_Herrington:
broke
Paige_Niedringhaus:
good!
Jack_Herrington:
everything else. And now you
Paige_Niedringhaus:
Right.
Jack_Herrington:
gotta fix that. Now you gotta fix the bug. And you still have the bug that you hadn't fixed.
Shaun_Evening
I'm
Jack_Herrington:
Because now the manual width
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
fix, that's not working either. So now you gotta figure
Paige_Niedringhaus:
Nope.
Jack_Herrington:
it.
Shaun_Evening
not sure
Jack_Herrington:
Now you actually have to do the real responsive thing, which is, oh
Paige_Niedringhaus:
Right,
Jack_Herrington:
man, painful.
Shaun_Evening
if
Paige_Niedringhaus:
I
Shaun_Evening
I'm
Paige_Niedringhaus:
figured
Shaun_Evening
doing it
Paige_Niedringhaus:
out
Shaun_Evening
right.
Paige_Niedringhaus:
the
Shaun_Evening
I'm not
Paige_Niedringhaus:
right
Shaun_Evening
sure if I'm
Paige_Niedringhaus:
way
Shaun_Evening
doing
Paige_Niedringhaus:
to
Shaun_Evening
it right.
Paige_Niedringhaus:
fix
Shaun_Evening
I'm not sure
Paige_Niedringhaus:
this.
Shaun_Evening
if I'm doing it right.
Jack_Herrington:
Oh, it's
Shaun_Evening
I'm
Jack_Herrington:
gotta
Shaun_Evening
not sure
Jack_Herrington:
be
Shaun_Evening
if
Jack_Herrington:
a
Shaun_Evening
I'm
Jack_Herrington:
flexbox.
Shaun_Evening
doing it right. I'm not sure if I'm doing it right.
Jack_Herrington:
I
Shaun_Evening
I'm not sure if I'm doing it
Paige_Niedringhaus:
Pretty
Shaun_Evening
right. I'm
Paige_Niedringhaus:
much.
Shaun_Evening
not sure if I'm doing
Jack_Herrington:
have
Shaun_Evening
it
Jack_Herrington:
to
Shaun_Evening
right.
Jack_Herrington:
learn
Shaun_Evening
I'm not sure
Jack_Herrington:
flexbox
Shaun_Evening
if I'm
Jack_Herrington:
for 18,000 times.
Shaun_Evening
doing it right. I'm not sure if
Jack_Herrington:
Which
Shaun_Evening
I'm doing
Jack_Herrington:
one
Shaun_Evening
it right.
Paige_Niedringhaus:
Flex...
Jack_Herrington:
is it?
Shaun_Evening
I'm
Jack_Herrington:
Justify content?
Shaun_Evening
not sure if I'm doing it
Paige_Niedringhaus:
I
Shaun_Evening
right.
Paige_Niedringhaus:
know,
Shaun_Evening
I'm not sure
Paige_Niedringhaus:
Flexbox...
Shaun_Evening
if I'm doing it right. I'm not sure if I'm doing it
Jack_Herrington:
Oh
Shaun_Evening
right. I'm
Jack_Herrington:
God!
Shaun_Evening
not sure if I'm doing
Paige_Niedringhaus:
yeah,
Shaun_Evening
it right.
Paige_Niedringhaus:
oh,
Shaun_Evening
I'm not
Paige_Niedringhaus:
Flexgrows,
Shaun_Evening
sure if I'm doing it
Paige_Niedringhaus:
the worst.
Shaun_Evening
right.
Paige_Niedringhaus:
I can
Jack_Herrington:
Uh...
Paige_Niedringhaus:
never get that one right.
Shaun_Evening
Oh
Paige_Niedringhaus:
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.
Shaun_Evening
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
Paige_Niedringhaus:
Mmm.
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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
Jack_Herrington:
Yeah.
Shaun_Evening
before
Paige_Niedringhaus:
Yes.
Shaun_Evening
I go down a different rabbit hole, as
Paige_Niedringhaus:
Hehehehe
Shaun_Evening
I am
Jack_Herrington:
Well,
Shaun_Evening
known
Jack_Herrington:
I'm talking
Shaun_Evening
to do.
Jack_Herrington:
in depth about material UI because I have struggled with this
Shaun_Evening
Yeah,
Jack_Herrington:
myself.
Paige_Niedringhaus:
Hahaha
Jack_Herrington:
And I would
Shaun_Evening
yeah.
Jack_Herrington:
like to know if there's an easier path.
Shaun_Evening
There is, and I'll send you the link, the recipe
Jack_Herrington:
Oh please.
Shaun_Evening
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.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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.
Paige_Niedringhaus:
sure.
Shaun_Evening
So this is something a little bit more concrete and updatable. So there'll be
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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.
Jack_Herrington:
Yeah, the theming, that's the big deal. You know,
Shaun_Evening
Yeah,
Jack_Herrington:
the...
Shaun_Evening
yeah, that's
Jack_Herrington:
Gotta get
Shaun_Evening
always.
Jack_Herrington:
the theme provider and the... Ay, ay, ay, ay, ay.
Shaun_Evening
Yeah, so the steps, I can, I think I've probably got it memorized at this point. I've read it over
Paige_Niedringhaus:
Hehehehe
Shaun_Evening
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.
Jack_Herrington:
unless you're using a custom font, which we
Shaun_Evening
Unless
Jack_Herrington:
are.
Shaun_Evening
you're using a custom
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
font.
Paige_Niedringhaus:
Ssh.
Jack_Herrington:
Great.
Paige_Niedringhaus:
Ha
Shaun_Evening
Yeah,
Paige_Niedringhaus:
ha ha ha ha.
Shaun_Evening
of course, of course. Why wouldn't you?
Jack_Herrington:
Oh yeah, it
Shaun_Evening
Yeah.
Jack_Herrington:
looks slightly different than Roboto. You know, just very, very slightly.
Shaun_Evening
Oh, no.
Paige_Niedringhaus:
but it needs to be.
Jack_Herrington:
But needs to be that font.
Shaun_Evening
Absolutely.
Jack_Herrington:
Oh my God.
Shaun_Evening
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.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
One, it makes sure you can develop in airplane mode. You're not
Jack_Herrington:
Mhm.
Shaun_Evening
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.
Paige_Niedringhaus:
Hahaha
Jack_Herrington:
No.
Shaun_Evening
If you won't be doing
Jack_Herrington:
No,
Shaun_Evening
anything
Jack_Herrington:
you don't want
Shaun_Evening
else.
Jack_Herrington:
to do a MPMI on a plane.
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
show the first font first and then it'll snap over and you're never quite sure when it will
Jack_Herrington:
Oh... Uhhh...
Shaun_Evening
do that.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
So there's like, oh, the font's different or the spacing
Paige_Niedringhaus:
Yep.
Shaun_Evening
hasn't been set yet. And so
Jack_Herrington:
Well
Shaun_Evening
yeah.
Jack_Herrington:
the font's different on this particular run because the CI CD just had a slightly less
Paige_Niedringhaus:
I'm sorry.
Jack_Herrington:
good connection to the internet on that one run.
Shaun_Evening
Yeah,
Jack_Herrington:
Ugh,
Shaun_Evening
exactly.
Jack_Herrington:
ugh, yuck.
Shaun_Evening
Yeah.
Jack_Herrington:
Oh
Shaun_Evening
kind of a pain in the butt. So
Jack_Herrington:
my god, yeah.
Shaun_Evening
static loading of your assets really helps with
Jack_Herrington:
Good
Shaun_Evening
that.
Jack_Herrington:
idea!
Shaun_Evening
Yeah.
Paige_Niedringhaus:
Yes, great thought.
Shaun_Evening
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
Jack_Herrington:
Yeah,
Shaun_Evening
the theme provider or
Jack_Herrington:
you're
Shaun_Evening
even
Jack_Herrington:
18
Shaun_Evening
like,
Jack_Herrington:
different providers, yeah.
Shaun_Evening
yeah, exactly. Yeah, your IET next provider, your redux store, everything,
Jack_Herrington:
Right?
Shaun_Evening
like it's
Jack_Herrington:
You
Shaun_Evening
all there.
Jack_Herrington:
know, yeah,
Shaun_Evening
Do
Jack_Herrington:
exactly.
Shaun_Evening
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.
Jack_Herrington:
I got to tell
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
you, the workflow
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
around Storybook is great because
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
what it does is you've got a very design
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
centric company that
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
takes the Roboto
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
font being slightly different very, very seriously.
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Paige_Niedringhaus:
Hehehehehe
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
Being able to deploy a Storybook and then
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
have them kind of look at the components very much
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
in isolation and be like, oh,
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
this is what a table is going to look like. And this is what the
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
mini table is going to look like.
Shaun_Evening
I'm not sure if I'm going to be able to do this.
Jack_Herrington:
And they can adjust the break points. They can show it
Shaun_Evening
I'm
Jack_Herrington:
on mobile, laptop. You know, tablet,
Shaun_Evening
Exactly.
Jack_Herrington:
whatever,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
what have you. And they, and you can literally just get bugs against that. And it's like, it's
Shaun_Evening
Absolutely.
Jack_Herrington:
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
Yeah, yeah.
Jack_Herrington:
yeah, then you plug it in the app, hook it up.
Shaun_Evening
Boom.
Jack_Herrington:
Voila.
Paige_Niedringhaus:
It just works.
Jack_Herrington:
You're good. Yeah.
Shaun_Evening
It's
Jack_Herrington:
It
Shaun_Evening
all
Jack_Herrington:
just
Shaun_Evening
there.
Jack_Herrington:
worked. TM
Shaun_Evening
Yeah.
Jack_Herrington:
just works.
Shaun_Evening
So, yeah, our new tagline for that is UI without the grunt work.
Paige_Niedringhaus:
Yes,
Jack_Herrington:
Hmm!
Shaun_Evening
Yeah,
Paige_Niedringhaus:
it's
Shaun_Evening
I thought
Paige_Niedringhaus:
a good
Shaun_Evening
that was
Paige_Niedringhaus:
one.
Shaun_Evening
pretty snazzy too. I like that.
Jack_Herrington:
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
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
can be
Shaun_Evening
Exactly.
Jack_Herrington:
lots
Shaun_Evening
Yeah.
Jack_Herrington:
of little
Shaun_Evening
Oh,
Jack_Herrington:
fixed width bugs. Thanks
Shaun_Evening
but
Jack_Herrington:
to page.
Paige_Niedringhaus:
Hehehehe
Shaun_Evening
so we have an add on for that. It's
Jack_Herrington:
Oh!
Shaun_Evening
a it's an essentials add on.
Jack_Herrington:
Really?
Shaun_Evening
called the measurement and outline
Jack_Herrington:
Oh
Shaun_Evening
add-on.
Jack_Herrington:
yay.
Shaun_Evening
So you don't
Paige_Niedringhaus:
Mmm.
Shaun_Evening
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,
Paige_Niedringhaus:
weed.
Shaun_Evening
and everything. It's awesome.
Paige_Niedringhaus:
Yes,
Shaun_Evening
Yeah.
Paige_Niedringhaus:
this would
Jack_Herrington:
guys.
Paige_Niedringhaus:
have saved me so much time.
Shaun_Evening
Oh, yes.
Jack_Herrington:
You get the little purple
Shaun_Evening
Yeah.
Jack_Herrington:
things, X number of pixels with the...
Shaun_Evening
Exactly.
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
Oh,
Shaun_Evening
Yeah.
Paige_Niedringhaus:
that's
Jack_Herrington:
just like
Paige_Niedringhaus:
awesome.
Jack_Herrington:
in Figma.
Paige_Niedringhaus:
Yes,
Shaun_Evening
Exactly.
Paige_Niedringhaus:
an adobe.
Jack_Herrington:
Yeah, right. This is a Photoshop. Same thing.
Paige_Niedringhaus:
So you've got this for material, and you
Shaun_Evening
Yeah.
Paige_Niedringhaus:
say
Shaun_Evening
Yeah. Yeah.
Paige_Niedringhaus:
you have integrations for lots of different things now. Do you have ones for
Shaun_Evening
Yeah. Yeah. Yeah.
Paige_Niedringhaus:
other design systems, like Ant Design, or what are some of the other really popular ones out there? Chakra
Jack_Herrington:
Chakra Haha,
Paige_Niedringhaus:
UI,
Shaun_Evening
Yeah,
Paige_Niedringhaus:
Tailwind,
Shaun_Evening
yeah.
Paige_Niedringhaus:
you
Shaun_Evening
So
Paige_Niedringhaus:
name
Jack_Herrington:
well
Paige_Niedringhaus:
it.
Jack_Herrington:
that one's out of the
Shaun_Evening
funny
Jack_Herrington:
night
Paige_Niedringhaus:
Tailwind,
Jack_Herrington:
anyway.
Shaun_Evening
you mentioned
Jack_Herrington:
Hmm
Paige_Niedringhaus:
yeah.
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
actually yesterday I was writing one for Tailwind CSS, and I'm gonna be working on the one for Chakra this afternoon.
Jack_Herrington:
Hmm.
Paige_Niedringhaus:
Nice.
Shaun_Evening
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?
Jack_Herrington:
Not at all. Actually,
Shaun_Evening
Oh, perfect
Paige_Niedringhaus:
No,
Jack_Herrington:
page is all spelt now, you
Shaun_Evening
Really?
Jack_Herrington:
know. Yeah.
Paige_Niedringhaus:
I am not Jack.
Jack_Herrington:
What? I thought you guys were doing spelt too.
Paige_Niedringhaus:
I mean, we are, we have
Jack_Herrington:
Okay.
Paige_Niedringhaus:
some sites that are built with Svelte, but Next.js is the one that I'm most focused on at the moment,
Jack_Herrington:
Okay,
Paige_Niedringhaus:
but yeah,
Jack_Herrington:
fair
Paige_Niedringhaus:
yes.
Jack_Herrington:
enough,
Shaun_Evening
Awesome
Paige_Niedringhaus:
You
Jack_Herrington:
fair
Paige_Niedringhaus:
can,
Jack_Herrington:
enough.
Paige_Niedringhaus:
if you can talk about anything, JavaScript, CSS,
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
HTML,
Jack_Herrington:
totally fine.
Paige_Niedringhaus:
just run the gamut, Sean, wherever
Shaun_Evening
Perfect,
Jack_Herrington:
Go
Paige_Niedringhaus:
you
Jack_Herrington:
for
Paige_Niedringhaus:
wanna
Jack_Herrington:
it.
Paige_Niedringhaus:
go.
Shaun_Evening
awesome. So I wrapped up one earlier this week for Vutify. So
Jack_Herrington:
Oh.
Paige_Niedringhaus:
Mmm.
Shaun_Evening
yeah, the Vue community really,
Paige_Niedringhaus:
Hehehehe
Shaun_Evening
really likes to get content for them. And we have been sorely lacking that department as a React First group. But we
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
don't want to, we really don't want to leave folks out. You mentioned Svelte. That,
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
we have that almost ready to go for 7.0 as well.
Jack_Herrington:
Nice.
Shaun_Evening
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.
Paige_Niedringhaus:
Mmm.
Shaun_Evening
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.
Jack_Herrington:
Nice. How about deploying it? Like if
Shaun_Evening
Yeah.
Jack_Herrington:
I want to just get this thing out to an S3 bucket so my product managers can look at it and
Shaun_Evening
For
Jack_Herrington:
tell
Shaun_Evening
sure.
Jack_Herrington:
me
Shaun_Evening
Well,
Jack_Herrington:
where
Shaun_Evening
so...
Jack_Herrington:
my margins and fonts are wrong.
Shaun_Evening
Yeah. I really had to deploy to find out. So...
Jack_Herrington:
They don't want to run my app, they don't want to run a
Paige_Niedringhaus:
No.
Jack_Herrington:
storybook locally, they don't want to connect my local host, you know, I've
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
got to deploy the thing.
Shaun_Evening
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,
Jack_Herrington:
I
Shaun_Evening
so.
Jack_Herrington:
swear I
Shaun_Evening
Ha
Jack_Herrington:
wasn't setting you guys up
Shaun_Evening
ha
Jack_Herrington:
for
Shaun_Evening
ha
Jack_Herrington:
that.
Paige_Niedringhaus:
Didn't know about
Shaun_Evening
ha
Paige_Niedringhaus:
that.
Jack_Herrington:
I didn't know
Shaun_Evening
ha.
Jack_Herrington:
about that,
Shaun_Evening
Perfect,
Jack_Herrington:
but that
Shaun_Evening
well
Jack_Herrington:
sounds
Shaun_Evening
now
Jack_Herrington:
great.
Shaun_Evening
you do, yeah.
Jack_Herrington:
Now I do.
Shaun_Evening
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.
Jack_Herrington:
Okay, cool.
Shaun_Evening
Yeah.
Paige_Niedringhaus:
Sweet. So
Shaun_Evening
So that's...
Paige_Niedringhaus:
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.
Shaun_Evening
Absolutely.
Jack_Herrington:
They want that security too, they want to log
Paige_Niedringhaus:
Exactly.
Jack_Herrington:
in.
Shaun_Evening
Yeah,
Jack_Herrington:
Nobody can look
Paige_Niedringhaus:
Proprietary.
Jack_Herrington:
at
Shaun_Evening
yeah,
Jack_Herrington:
our sacred
Shaun_Evening
of course.
Jack_Herrington:
design system.
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
Okay.
Paige_Niedringhaus:
our IP is protected.
Jack_Herrington:
Right,
Shaun_Evening
Oh,
Jack_Herrington:
protecting
Shaun_Evening
of course.
Jack_Herrington:
the button roundiness.
Shaun_Evening
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.
Paige_Niedringhaus:
Mm.
Shaun_Evening
But yeah, we have everything for like single sign-on and all of that fun stuff for enterprise. We
Paige_Niedringhaus:
perfect.
Shaun_Evening
normally have like a big checklist that we do with those clients to make sure that we meet all of their requirements and, uh,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
yeah, but sock two compliance. So we get a lot of the check marks right out of the gate there.
Paige_Niedringhaus:
Nice.
Jack_Herrington:
Yeah, I just use static hosting, honestly. In
Shaun_Evening
Yeah.
Jack_Herrington:
my company, I think we just,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
I think we use basic auth. You know,
Shaun_Evening
Yeah.
Jack_Herrington:
as long as you know the password, you're good.
Paige_Niedringhaus:
You're
Shaun_Evening
Oh, for
Paige_Niedringhaus:
in.
Shaun_Evening
sure. Yeah.
Jack_Herrington:
You're it, you know?
Shaun_Evening
Nailed
Jack_Herrington:
The three
Shaun_Evening
it.
Jack_Herrington:
people that need to look at this.
Shaun_Evening
Exactly. Yeah. Yeah, if I'm using my own stuff, I'll end up using something like Netlify or even Surge to
Jack_Herrington:
Oh
Shaun_Evening
just
Jack_Herrington:
yeah.
Paige_Niedringhaus:
Yeah.
Shaun_Evening
quickly throw something up and away you go. But
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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
Jack_Herrington:
Oh,
Shaun_Evening
have a look at it via commit.
Paige_Niedringhaus:
That's pretty sweet.
Jack_Herrington:
that's
Shaun_Evening
Yeah.
Jack_Herrington:
nice. That's really nice because you don't
Shaun_Evening
Oh
Jack_Herrington:
want
Shaun_Evening
yeah.
Jack_Herrington:
to deploy into main, you know, unless it's right. So
Shaun_Evening
Exactly.
Jack_Herrington:
having
Paige_Niedringhaus:
Right.
Jack_Herrington:
something that people can see in the branch at that's, that's,
Shaun_Evening
Exactly.
Jack_Herrington:
that's very hard
Paige_Niedringhaus:
Yeah.
Shaun_Evening
Yeah.
Jack_Herrington:
when it comes to S3, you know, like,
Shaun_Evening
Of course. Yeah.
Jack_Herrington:
yeah, that's that
Shaun_Evening
So
Jack_Herrington:
hassle.
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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.
Paige_Niedringhaus:
Wow.
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
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
Shaun_Evening
Yeah.
Paige_Niedringhaus:
in front of the designer, just be able to get their feedback. That would be great.
Shaun_Evening
Absolutely. And so Chromatic is to bring all of those non-developer folks into the workflow, right? You
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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.
Jack_Herrington:
Oh wow, it can handle comments and stuff, it can annotate
Shaun_Evening
Yep.
Jack_Herrington:
things. Oh!
Shaun_Evening
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.
Jack_Herrington:
Sounds good. You know, it's one of those things where it's like,
Shaun_Evening
Absolutely.
Jack_Herrington:
oh man, where is this bug? Is this bug over in Jira? Is it over in GitHub issues?
Paige_Niedringhaus:
Hehehehe
Jack_Herrington:
Now
Shaun_Evening
Of course.
Jack_Herrington:
it's maybe, now it's a new thing. Now it's now gonna be over in Chromatic.
Paige_Niedringhaus:
Right,
Jack_Herrington:
You
Paige_Niedringhaus:
did
Jack_Herrington:
know.
Paige_Niedringhaus:
I slack it to you? No.
Jack_Herrington:
Right?
Shaun_Evening
I'm sorry, I was supposed to wait till the end for the pluggables, right?
Jack_Herrington:
Oh, yeah.
Paige_Niedringhaus:
Well, that's fine. You can get ahead of yourself.
Jack_Herrington:
That's when you plug kitchen gear.
Shaun_Evening
I often do get ahead of myself, yeah.
Paige_Niedringhaus:
So I am curious, how did you get into working for Chromatic and
Jack_Herrington:
Mmm.
Paige_Niedringhaus:
working on Storybook in particular, because it's such a handy tool to have, but
Shaun_Evening
Yeah.
Paige_Niedringhaus:
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,
Shaun_Evening
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.
Paige_Niedringhaus:
Hehehe
Shaun_Evening
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
Jack_Herrington:
Yes!
Shaun_Evening
they could hit. And I'm like,
Jack_Herrington:
Yeah.
Shaun_Evening
no, no, no, no, no, no. This is ridiculous. Do we really need to support IE 10? Like, come on, really? Really?
Jack_Herrington:
Oh, well, that's
Paige_Niedringhaus:
Ha
Jack_Herrington:
a different
Paige_Niedringhaus:
ha.
Jack_Herrington:
threshold.
Shaun_Evening
Oh absolutely!
Jack_Herrington:
Yeah, now I'm talking about the pixel-funging threshold of the 10th bug that is on the margins being just not quite right.
Shaun_Evening
Yeah,
Jack_Herrington:
Yeah.
Shaun_Evening
the line height on the font is one pixel
Jack_Herrington:
Oh god.
Shaun_Evening
off! BAAA!
Jack_Herrington:
Come on, can any user see that? No.
Shaun_Evening
But we can, we can
Jack_Herrington:
Oh yeah,
Shaun_Evening
Jack,
Jack_Herrington:
sure.
Shaun_Evening
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,
Paige_Niedringhaus:
You just took it up and fixed
Shaun_Evening
yeah.
Paige_Niedringhaus:
it.
Shaun_Evening
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
Jack_Herrington:
Mm-hmm.
Shaun_Evening
a while
Jack_Herrington:
Yeah.
Shaun_Evening
and so we had storybook for React Native that Tend to break fairly often because of the native dependencies not being
Jack_Herrington:
Well, because
Shaun_Evening
added
Jack_Herrington:
of React Native,
Shaun_Evening
And also, you
Jack_Herrington:
which
Shaun_Evening
know
Jack_Herrington:
just
Shaun_Evening
react
Jack_Herrington:
breaks
Shaun_Evening
native
Jack_Herrington:
all the time, yeah.
Shaun_Evening
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,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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,
Paige_Niedringhaus:
Right.
Shaun_Evening
uh, turned into, you know, a globe full of developers from all over the world. Uh, not terrifying at all, at
Jack_Herrington:
Yeah!
Shaun_Evening
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.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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
Paige_Niedringhaus:
Yeah.
Shaun_Evening
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.
Jack_Herrington:
Hahaha. Yeah.
Shaun_Evening
Yeah. And the rest is history as they say.
Paige_Niedringhaus:
Mm-hmm. Well, it sounds like a very natural progression. You know, you go from being an internal advocate for storybook to
Shaun_Evening
Right.
Paige_Niedringhaus:
Just working for the company itself
Shaun_Evening
Exactly, yeah. Definitely pretty awesome. I still start work some days and go, is this real? What is this?
Jack_Herrington:
Oh nice! That's
Shaun_Evening
Yeah,
Jack_Herrington:
great!
Shaun_Evening
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.
Jack_Herrington:
Yeah,
Shaun_Evening
Um, I want to know who isn't. What are
Jack_Herrington:
yeah,
Shaun_Evening
you?
Jack_Herrington:
I'll do. Yeah. No, yeah, right. Only a psychopath is like,
Shaun_Evening
Exactly.
Jack_Herrington:
I'm just
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
the
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
Yeah.
Paige_Niedringhaus:
Right.
Jack_Herrington:
best coming into
Paige_Niedringhaus:
There's
Jack_Herrington:
this.
Paige_Niedringhaus:
something
Jack_Herrington:
There's nobody
Paige_Niedringhaus:
wrong.
Jack_Herrington:
better than me. And
Shaun_Evening
Yeah.
Jack_Herrington:
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
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
have different skillsets and you're learning
Paige_Niedringhaus:
exactly.
Jack_Herrington:
every
Shaun_Evening
Of
Jack_Herrington:
day,
Shaun_Evening
course.
Jack_Herrington:
that's the
Shaun_Evening
Yeah.
Jack_Herrington:
great place to be. Yes, it's gonna
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
feel a little uncomfortable, but hey, it's better. He's
Shaun_Evening
Absolutely.
Paige_Niedringhaus:
You just learned something new, you grew.
Shaun_Evening
Yeah.
Jack_Herrington:
learned something, exactly.
Shaun_Evening
I
Jack_Herrington:
He
Shaun_Evening
have
Jack_Herrington:
has
Shaun_Evening
a
Jack_Herrington:
learned
Shaun_Evening
story.
Jack_Herrington:
not to set a fixed width.
Shaun_Evening
Yeah,
Paige_Niedringhaus:
Right?
Shaun_Evening
I
Paige_Niedringhaus:
I've learned valuable lessons
Jack_Herrington:
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
Paige_Niedringhaus:
from myself.
Shaun_Evening
absolutely yeah, me from five minutes ago. Thank you for teaching me. Yeah.
Jack_Herrington:
Hahaha
Paige_Niedringhaus:
Exactly.
Shaun_Evening
So I have I have a story about you mentioned like different skill sets and people tend to
Jack_Herrington:
Yeah.
Shaun_Evening
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
Jack_Herrington:
Hmm.
Shaun_Evening
you've got such a small company and everyone's so excited that someone new is joining. You get like DMs
Paige_Niedringhaus:
Hehehehe
Shaun_Evening
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
Jack_Herrington:
Is it all
Shaun_Evening
a
Jack_Herrington:
virtual?
Shaun_Evening
joy. Yeah.
Paige_Niedringhaus:
Yeah,
Shaun_Evening
Yeah.
Paige_Niedringhaus:
is it
Shaun_Evening
We've
Jack_Herrington:
Okay.
Paige_Niedringhaus:
a
Shaun_Evening
got
Paige_Niedringhaus:
fully
Shaun_Evening
people
Paige_Niedringhaus:
remote?
Shaun_Evening
all over the world. We've got
Paige_Niedringhaus:
Nice.
Shaun_Evening
a handful of folks in the Netherlands. Uh, we've got someone in Taiwan. Uh,
Paige_Niedringhaus:
Cool.
Shaun_Evening
there's a few of us in Canada, then a big smattering of people across the U S. So, yeah, we're
Jack_Herrington:
Can
Shaun_Evening
all
Jack_Herrington:
I geek
Shaun_Evening
over the place.
Jack_Herrington:
out here for a second and ask
Shaun_Evening
Yeah.
Jack_Herrington:
about micro front ends?
Shaun_Evening
Yeah, of
Jack_Herrington:
So
Shaun_Evening
course.
Jack_Herrington:
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
Shaun_Evening
Yeah.
Jack_Herrington:
components. Is that still going on? Where does that sit? Or
Shaun_Evening
Right,
Jack_Herrington:
is that something
Shaun_Evening
so
Jack_Herrington:
you know about?
Shaun_Evening
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
Jack_Herrington:
Okay.
Shaun_Evening
example, if like Material UI had a storybook
Jack_Herrington:
Oh wow.
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
of the code
Jack_Herrington:
And
Shaun_Evening
there.
Jack_Herrington:
then you would get your theme on their stuff.
Shaun_Evening
Yeah, yeah.
Jack_Herrington:
Oh,
Paige_Niedringhaus:
Sweet.
Jack_Herrington:
okay, all right.
Shaun_Evening
Yeah. Pretty neat,
Jack_Herrington:
Well,
Paige_Niedringhaus:
I'm sorry.
Shaun_Evening
pretty
Jack_Herrington:
it is
Shaun_Evening
cool,
Jack_Herrington:
neat, that is
Shaun_Evening
yeah.
Jack_Herrington:
neat. Cause you don't wanna rewrite all those, that's craziness.
Paige_Niedringhaus:
Yeah.
Shaun_Evening
Course, yeah.
Jack_Herrington:
Yeah.
Shaun_Evening
Oh yeah, so in the article that you invited me on here for, we have a part about TypeScript and reusing the types there
Paige_Niedringhaus:
Mmm.
Shaun_Evening
to generate the controls for your stories too, which is
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
very, very handy. Because yeah, I don't wanna rewrite all
Jack_Herrington:
Yeah.
Shaun_Evening
of those, all those types and the controls to go with it. Oh, yeah.
Jack_Herrington:
And not to sound too, too, no, I really have appreciated how good the TypeScript integration is in the storybook, honestly. Like,
Shaun_Evening
Yeah.
Jack_Herrington:
it's really good. You did
Shaun_Evening
It's,
Jack_Herrington:
good. You did
Shaun_Evening
it's
Jack_Herrington:
well
Shaun_Evening
pretty
Jack_Herrington:
there.
Shaun_Evening
great. Yeah. I,
Jack_Herrington:
Yeah.
Shaun_Evening
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,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
which
Jack_Herrington:
Oh yeah!
Shaun_Evening
yeah, which means you can, you don't have to add every single prop to all of your stories. So it doesn't
Paige_Niedringhaus:
Oh,
Shaun_Evening
error
Paige_Niedringhaus:
sweet.
Shaun_Evening
out. It just satisfies the whole prop list, which is fantastic. Makes it so much easier.
Paige_Niedringhaus:
Yes.
Jack_Herrington:
Yeah, I've been
Shaun_Evening
Yeah.
Jack_Herrington:
looking for a really good, like, satisfying story,
Paige_Niedringhaus:
Hehehehehehe
Jack_Herrington:
you know,
Shaun_Evening
Well, it's
Jack_Herrington:
around
Shaun_Evening
there.
Jack_Herrington:
like, why is this thing interesting? Because it's like, on Facebook, you're like, but
Shaun_Evening
Yeah,
Jack_Herrington:
now
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
it's
Shaun_Evening
for
Jack_Herrington:
like,
Shaun_Evening
sure.
Jack_Herrington:
oh, that makes a lot. Wow, that actually
Shaun_Evening
Absolutely.
Jack_Herrington:
makes a lot of sense. Yeah.
Shaun_Evening
Yeah. So you'll, you'll start seeing that come up. in our TypeScript examples soon as well. So yeah.
Paige_Niedringhaus:
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?
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
then from there, I heard this saying one time, if something's worth doing, it's worth doing poorly.
Jack_Herrington:
Hmm.
Shaun_Evening
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
Paige_Niedringhaus:
Mmm.
Shaun_Evening
the same approach there,
Jack_Herrington:
Oh, okay, sure.
Shaun_Evening
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,
Paige_Niedringhaus:
Hehehe
Jack_Herrington:
Better than you found
Shaun_Evening
cleaner,
Jack_Herrington:
it,
Shaun_Evening
better
Jack_Herrington:
right?
Shaun_Evening
than you found it, yeah. So
Jack_Herrington:
Yeah,
Shaun_Evening
if you happen
Jack_Herrington:
yeah.
Shaun_Evening
to be in the
Paige_Niedringhaus:
Got
Shaun_Evening
right
Paige_Niedringhaus:
it.
Shaun_Evening
area, just throw a little extra story in or, you know, your
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
test, whatever you're in there for, and
Paige_Niedringhaus:
Yeah.
Shaun_Evening
yeah, slowly but surely, it doesn't have to be like an all or nothing thing, which
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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
Jack_Herrington:
Yeah,
Shaun_Evening
50
Jack_Herrington:
overdo
Shaun_Evening
different
Jack_Herrington:
it,
Shaun_Evening
tools.
Jack_Herrington:
you know.
Paige_Niedringhaus:
Right.
Shaun_Evening
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.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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.
Jack_Herrington:
Yeah, well, you
Paige_Niedringhaus:
Just
Jack_Herrington:
know, what's
Paige_Niedringhaus:
kidding.
Jack_Herrington:
the there's another like don't let the perfect be the enemy of the good or something like basically
Shaun_Evening
Yeah,
Jack_Herrington:
sort
Paige_Niedringhaus:
Right.
Jack_Herrington:
of
Shaun_Evening
yeah, all of those inspirational poster sayings like, yeah, just give it a go. Try it.
Paige_Niedringhaus:
Right. Ship it. Don't wait for it to be perfect. That kind of thing.
Jack_Herrington:
Hang
Shaun_Evening
Yeah.
Jack_Herrington:
in there, cat falling off cliff.
Shaun_Evening
Exactly. Yeah.
Jack_Herrington:
Right.
Shaun_Evening
But for storybook.
Jack_Herrington:
What
Paige_Niedringhaus:
All right.
Jack_Herrington:
the hell
Paige_Niedringhaus:
I mean,
Jack_Herrington:
is going
Paige_Niedringhaus:
that's.
Jack_Herrington:
on? We really need to come up with a line of inspirational cards for React developers. Like, you
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
know,
Shaun_Evening
Absolutely. Yeah.
Jack_Herrington:
yeah.
Paige_Niedringhaus:
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.
Jack_Herrington:
Hahaha
Paige_Niedringhaus:
And
Shaun_Evening
Yeah.
Paige_Niedringhaus:
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
Shaun_Evening
Yeah.
Paige_Niedringhaus:
extra minutes to find some, fix it. move on with your day.
Shaun_Evening
Yeah, I so I've worked with teams, I won't name any names or talk
Paige_Niedringhaus:
Hehehe
Shaun_Evening
about that. Give you the link to the repo. But we got to a point where there's so many link warnings
Paige_Niedringhaus:
Hahaha
Shaun_Evening
in the CLI that it was hard to see the link errors, which
Jack_Herrington:
Right.
Shaun_Evening
is what the CLI
Jack_Herrington:
Yeah.
Shaun_Evening
was failing on. Can we just only show errors instead of these warnings?
Jack_Herrington:
No.
Shaun_Evening
Like, you need to clean up
Jack_Herrington:
What?
Shaun_Evening
the warnings too.
Jack_Herrington:
Oh my God, that's like the worst possible decision. That's like,
Shaun_Evening
Absolutely.
Jack_Herrington:
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.
Shaun_Evening
Exactly.
Paige_Niedringhaus:
Just ignore
Jack_Herrington:
Like, what are
Paige_Niedringhaus:
that.
Jack_Herrington:
you
Shaun_Evening
Yeah.
Jack_Herrington:
doing? What? Madness.
Shaun_Evening
If you ignore
Jack_Herrington:
What?
Shaun_Evening
it, it will go away. Like, it's like wasps. Just don't look at them.
Jack_Herrington:
Oh my god.
Shaun_Evening
He'll go.
Jack_Herrington:
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.
Paige_Niedringhaus:
Right, still early.
Jack_Herrington:
Yeah. So
Paige_Niedringhaus:
The
Shaun_Evening
Perfect.
Paige_Niedringhaus:
day
Jack_Herrington:
early.
Paige_Niedringhaus:
is young.
Jack_Herrington:
Oh god.
Shaun_Evening
Oh, I'm sure we all have them. We all have them. But you
Jack_Herrington:
Oh,
Shaun_Evening
know what,
Jack_Herrington:
God.
Shaun_Evening
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.
Jack_Herrington:
Oh
Shaun_Evening
But
Jack_Herrington:
yeah.
Shaun_Evening
yeah, yeah, it happens. But yeah, we should be able to laugh a little bit and kick ourselves in the butt for it too.
Jack_Herrington:
Oh my gosh. Is there any? Wow. I, this has been so much fun that
Shaun_Evening
Yeah,
Jack_Herrington:
I hate, I
Shaun_Evening
yeah,
Jack_Herrington:
hate to actually
Shaun_Evening
absolutely.
Jack_Herrington:
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
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
covered a ton.
Shaun_Evening
Yeah
Paige_Niedringhaus:
I
Shaun_Evening
we
Paige_Niedringhaus:
mean
Shaun_Evening
certainly
Paige_Niedringhaus:
the the
Shaun_Evening
did.
Paige_Niedringhaus:
new stuff with Storybook just
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
sounds so great.
Jack_Herrington:
I'm in on this conference, man. I'm March.
Shaun_Evening
I am
Jack_Herrington:
Here
Shaun_Evening
so
Jack_Herrington:
we come.
Shaun_Evening
excited. I can't wait to see you there. It's
Jack_Herrington:
Yeah.
Shaun_Evening
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,
Jack_Herrington:
Huh?
Shaun_Evening
to keep it interesting.
Jack_Herrington:
So you're gonna be presenting, and then other people are gonna be presenting as well, I'm guessing.
Shaun_Evening
Yes, lots and lots of presenters. I'll probably be up for like five minutes. It won't be for very
Jack_Herrington:
Okay.
Shaun_Evening
long. But you'll see me. I'll be there.
Jack_Herrington:
You know the
Paige_Niedringhaus:
Hehehe
Jack_Herrington:
MC between ones? Here's a little little comedy
Shaun_Evening
I don't
Jack_Herrington:
keep you going.
Shaun_Evening
think I'm I'm emceeing.
Jack_Herrington:
Aww. You do well.
Shaun_Evening
Michael Chan, Chantastic is doing it and
Paige_Niedringhaus:
Oh,
Shaun_Evening
he will nail it. So
Paige_Niedringhaus:
yeah, Michael Chan
Shaun_Evening
absolutely.
Paige_Niedringhaus:
is great. He's, he's
Shaun_Evening
Love
Paige_Niedringhaus:
always fun
Shaun_Evening
him.
Paige_Niedringhaus:
to watch.
Shaun_Evening
Absolutely.
Jack_Herrington:
Okay.
Shaun_Evening
Yeah, I don't think I have anything unless you want to hear that story that I, I got distracted and didn't tell
Jack_Herrington:
Oh
Shaun_Evening
about.
Paige_Niedringhaus:
Yes,
Jack_Herrington:
yes please please please please
Paige_Niedringhaus:
absolutely.
Shaun_Evening
Yeah,
Jack_Herrington:
yeah yeah yeah absolutely.
Shaun_Evening
so early on in my career, again, I was at
Jack_Herrington:
What was Wrangle?
Shaun_Evening
Wrangle is a JavaScript consultancy
Jack_Herrington:
Okay.
Shaun_Evening
in Canada.
Jack_Herrington:
Okay.
Shaun_Evening
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.
Jack_Herrington:
Hey,
Shaun_Evening
We met
Jack_Herrington:
congrats!
Shaun_Evening
while we were sitting across from each other.
Jack_Herrington:
Awwww.
Shaun_Evening
Yeah,
Paige_Niedringhaus:
No!
Shaun_Evening
naw.
Paige_Niedringhaus:
Aww.
Jack_Herrington:
Love it first keyboard click.
Shaun_Evening
Exactly. The first time I just. mashed down on my blue, my cherry blue keys annoyed everyone. She was like,
Jack_Herrington:
Right? Yes, exactly.
Shaun_Evening
that
Jack_Herrington:
I
Shaun_Evening
guy's
Jack_Herrington:
can hear
Shaun_Evening
annoying
Paige_Niedringhaus:
This
Jack_Herrington:
the click.
Paige_Niedringhaus:
guy.
Shaun_Evening
enough.
Jack_Herrington:
Yes. I was like,
Shaun_Evening
Yeah.
Jack_Herrington:
yeah, that's the one.
Shaun_Evening
What confidence. Yeah.
Jack_Herrington:
I'm sorry. So I distracted you. Go on.
Shaun_Evening
It's
Jack_Herrington:
Story
Shaun_Evening
okay,
Paige_Niedringhaus:
Again,
Shaun_Evening
I am
Paige_Niedringhaus:
right?
Jack_Herrington:
at
Shaun_Evening
prone
Jack_Herrington:
place.
Shaun_Evening
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
Jack_Herrington:
Oh wow.
Shaun_Evening
not as smart as this other person. Like, wow, even these two powerhouses that I've
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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
Jack_Herrington:
Yeah.
Shaun_Evening
idea about
Paige_Niedringhaus:
Yeah.
Shaun_Evening
like there's always
Paige_Niedringhaus:
Yeah.
Shaun_Evening
room to teach each other, regardless of your, your seniority. So yeah.
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
Yeah, if you're
Jack_Herrington:
That's
Shaun_Evening
feeling
Jack_Herrington:
it.
Shaun_Evening
any imposter syndrome, just remember There's probably someone thinking you're amazing. Maybe it's
Jack_Herrington:
That's
Shaun_Evening
me.
Jack_Herrington:
really great. Thank you.
Paige_Niedringhaus:
That's
Shaun_Evening
Yeah.
Paige_Niedringhaus:
so
Jack_Herrington:
You know?
Paige_Niedringhaus:
inspirational.
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
it really
Shaun_Evening
Yeah,
Jack_Herrington:
is.
Shaun_Evening
we
Jack_Herrington:
Aww.
Shaun_Evening
can put that on a poster, one of our React posters.
Jack_Herrington:
I know
Paige_Niedringhaus:
There
Jack_Herrington:
one
Shaun_Evening
Yeah.
Jack_Herrington:
of
Paige_Niedringhaus:
you
Jack_Herrington:
our
Paige_Niedringhaus:
go.
Jack_Herrington:
React Cheer Me Up posters.
Shaun_Evening
Yeah, I'll have my people talk to your people. We'll figure
Jack_Herrington:
Right,
Shaun_Evening
it out. We'll set up
Jack_Herrington:
eventually
Shaun_Evening
a store.
Jack_Herrington:
your code base will run clean. Is
Paige_Niedringhaus:
Maybe,
Jack_Herrington:
there something like that? Yeah, right.
Paige_Niedringhaus:
we hope.
Jack_Herrington:
Yeah, we
Shaun_Evening
We
Jack_Herrington:
hope.
Shaun_Evening
don't want
Jack_Herrington:
Yay.
Shaun_Evening
to sell them
Jack_Herrington:
Yes.
Shaun_Evening
that much hope.
Jack_Herrington:
Yeah, it's somewhere between demoralizer. You remember demoralizer? Like there's
Shaun_Evening
Yeah.
Paige_Niedringhaus:
Oh, those are great.
Jack_Herrington:
posters.
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
the demotivational posters,
Jack_Herrington:
Demotivation,
Paige_Niedringhaus:
I love those.
Jack_Herrington:
yes.
Shaun_Evening
Yeah,
Jack_Herrington:
Yeah,
Shaun_Evening
we've
Jack_Herrington:
I
Shaun_Evening
got,
Jack_Herrington:
have to take a look at those,
Shaun_Evening
we've
Jack_Herrington:
see
Shaun_Evening
got
Jack_Herrington:
if
Shaun_Evening
this
Jack_Herrington:
those are
Shaun_Evening
beautiful
Jack_Herrington:
around as well. Oh,
Shaun_Evening
print in our bedroom
Paige_Niedringhaus:
Those are hilarious.
Shaun_Evening
that
Jack_Herrington:
yeah?
Shaun_Evening
says, it gets worse instead of it gets better. And it's
Paige_Niedringhaus:
Ehehehehehe
Shaun_Evening
like, in front of a beautiful landscape and I look
Jack_Herrington:
Ha
Shaun_Evening
at it and go,
Jack_Herrington:
ha ha ha!
Shaun_Evening
ah, but then I giggle. So yeah, it's a good
Jack_Herrington:
Yeah,
Shaun_Evening
way to start the day.
Jack_Herrington:
exactly. Yeah, yeah, yeah. Alright, well, let's do our picks. Paige, what do you have for picks this week?
Paige_Niedringhaus:
Sure, so I have a holiday themed pick for everyone.
Jack_Herrington:
Oh!
Paige_Niedringhaus:
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
Jack_Herrington:
Oh.
Paige_Niedringhaus:
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,
Jack_Herrington:
Yeah, as you do.
Paige_Niedringhaus:
lime peel because we've got that South American thing going on. And
Jack_Herrington:
Zesty.
Paige_Niedringhaus:
then a little bit of bitters because that just goes with everything and a dash of nutmeg. So.
Shaun_Evening
Nice.
Paige_Niedringhaus:
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.
Shaun_Evening
Page? That is now my pick. I don't have anything better than that. That
Jack_Herrington:
Ha
Shaun_Evening
sounds
Paige_Niedringhaus:
I'm
Shaun_Evening
amazing.
Jack_Herrington:
ha!
Paige_Niedringhaus:
out. Bye.
Jack_Herrington:
Okay, well, Sean, you don't want to do a pick? It's
Shaun_Evening
Oh,
Jack_Herrington:
fine.
Shaun_Evening
no, I've got picks.
Jack_Herrington:
Oh,
Shaun_Evening
I've
Jack_Herrington:
oh,
Shaun_Evening
got,
Jack_Herrington:
oh, yeah, yeah, yeah, yeah, yeah.
Paige_Niedringhaus:
Hehehehe
Jack_Herrington:
Okay,
Shaun_Evening
I
Jack_Herrington:
yes.
Shaun_Evening
wasn't sure which way to go. And I didn't come prepared with any cooking utensil picks.
Jack_Herrington:
Oh no.
Shaun_Evening
So now
Paige_Niedringhaus:
I know,
Shaun_Evening
I feel
Paige_Niedringhaus:
that's
Shaun_Evening
like
Paige_Niedringhaus:
very
Shaun_Evening
I'm,
Paige_Niedringhaus:
classic for
Shaun_Evening
yeah,
Paige_Niedringhaus:
us.
Shaun_Evening
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
Paige_Niedringhaus:
I love Warp Terminal, it's fantastic.
Shaun_Evening
it's amazing
Jack_Herrington:
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
Shaun_Evening
I haven't
Jack_Herrington:
the
Shaun_Evening
logged in
Jack_Herrington:
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
Paige_Niedringhaus:
Great.
Jack_Herrington:
on, but
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
whatever. I digress, so yes, I like
Shaun_Evening
Yeah.
Jack_Herrington:
it. I, yeah,
Paige_Niedringhaus:
Me
Jack_Herrington:
yeah.
Paige_Niedringhaus:
too.
Shaun_Evening
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
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
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
Paige_Niedringhaus:
Right.
Shaun_Evening
find it, it's there. Yeah, so treat yourself. Sign up for Arc browser.
Paige_Niedringhaus:
Sweet.
Jack_Herrington:
That was giving me my pick. You killed me.
Shaun_Evening
Oh
Jack_Herrington:
Oh my
Shaun_Evening
no!
Jack_Herrington:
god But I will say there there's a you didn't mention that there's a picture in picture mode
Shaun_Evening
Yes!
Jack_Herrington:
It's an ARC browser, which is so good. It's stupidly
Shaun_Evening
Oh!
Jack_Herrington:
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,
Shaun_Evening
It's pretty
Jack_Herrington:
a
Shaun_Evening
good.
Jack_Herrington:
page have you gotten an invite because I gladly send you an invite over on
Paige_Niedringhaus:
I do
Shaun_Evening
Yeah!
Paige_Niedringhaus:
not have an invite, but
Jack_Herrington:
Okay.
Paige_Niedringhaus:
I would love to have one.
Jack_Herrington:
Yeah, yeah, yeah.
Shaun_Evening
Perfect!
Jack_Herrington:
You
Paige_Niedringhaus:
Hehehe.
Jack_Herrington:
want this? This is really good.
Shaun_Evening
Absolutely!
Jack_Herrington:
Um, okay. So I'm going to come up with one on the fly. It is a kitchen tool.
Shaun_Evening
Yes!
Jack_Herrington:
So
Shaun_Evening
Yes!
Jack_Herrington:
yeah, the, the, yeah, the
Paige_Niedringhaus:
The
Jack_Herrington:
Zojirushi
Paige_Niedringhaus:
streak continues.
Jack_Herrington:
I would say, uh, rice maker. My, my,
Shaun_Evening
Mmm.
Jack_Herrington:
you
Paige_Niedringhaus:
Mmm.
Jack_Herrington:
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
Paige_Niedringhaus:
I'm
Jack_Herrington:
Christmas.
Paige_Niedringhaus:
gonna go.
Jack_Herrington:
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,
Paige_Niedringhaus:
Mmm.
Jack_Herrington:
it's just basically like a pile. And it's like, okay,
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
this pile's, you know, that
Paige_Niedringhaus:
Yeah,
Shaun_Evening
Yeah.
Jack_Herrington:
birthday,
Paige_Niedringhaus:
some
Jack_Herrington:
this
Paige_Niedringhaus:
have
Jack_Herrington:
pile's Christmas.
Paige_Niedringhaus:
Christmas
Jack_Herrington:
You're
Paige_Niedringhaus:
paper, some have
Jack_Herrington:
right. Yes,
Paige_Niedringhaus:
birthday
Jack_Herrington:
exactly.
Paige_Niedringhaus:
paper. It's
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
just all...
Jack_Herrington:
yeah, yeah. And
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
this is kind of sum up by wage or something. Yeah.
Shaun_Evening
Hey,
Paige_Niedringhaus:
Nice.
Shaun_Evening
I mean, you
Jack_Herrington:
Wow.
Shaun_Evening
get it all out of the way in one in one go, right?
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
You can think about you're just like, no, you didn't forget.
Jack_Herrington:
No, it just means a lot of shopping. And it means
Shaun_Evening
There's
Jack_Herrington:
a lot
Shaun_Evening
that
Jack_Herrington:
of shopping,
Shaun_Evening
true.
Jack_Herrington:
like right at the worst shopping time of the year.
Shaun_Evening
That's
Jack_Herrington:
You
Shaun_Evening
true.
Jack_Herrington:
know,
Shaun_Evening
Yeah.
Jack_Herrington:
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,
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
Absolutely.
Jack_Herrington:
all
Shaun_Evening
Yeah.
Jack_Herrington:
of that. Yeah.
Paige_Niedringhaus:
toss up.
Jack_Herrington:
It really
Shaun_Evening
Yeah.
Jack_Herrington:
is. Yeah. It's tough. Well,
Shaun_Evening
Well...
Jack_Herrington:
Sean, this has been so much fun. And
Paige_Niedringhaus:
Mm-hmm.
Shaun_Evening
Yeah,
Jack_Herrington:
you know, it's
Shaun_Evening
thank
Jack_Herrington:
like,
Shaun_Evening
you so much for having me, Jack
Jack_Herrington:
yeah.
Shaun_Evening
Page. It's been an absolute pleasure.
Jack_Herrington:
Yeah.
Shaun_Evening
Yeah.
Jack_Herrington:
Can't wait to
Paige_Niedringhaus:
Absolutely.
Jack_Herrington:
have you on again at some
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
point.
Shaun_Evening
That
Jack_Herrington:
I'm
Shaun_Evening
would
Jack_Herrington:
getting
Shaun_Evening
be
Jack_Herrington:
learned
Shaun_Evening
fantastic!
Jack_Herrington:
more. Let's
Shaun_Evening
Yeah!
Jack_Herrington:
do it for the eighth release.
Shaun_Evening
Absolutely.
Jack_Herrington:
You know, whenever
Shaun_Evening
Yeah.
Jack_Herrington:
that is.
Paige_Niedringhaus:
Storybook
Jack_Herrington:
Yes.
Shaun_Evening
Perfect.
Paige_Niedringhaus:
8.
Jack_Herrington:
Storybook 8.
Shaun_Evening
I don't think I can
Jack_Herrington:
Exactly.
Shaun_Evening
say, but
Jack_Herrington:
Storybook
Shaun_Evening
we,
Jack_Herrington:
Ocho.
Shaun_Evening
we are thinking about what will go into eight as well, actually. So
Jack_Herrington:
Good.
Paige_Niedringhaus:
Oh
Shaun_Evening
yeah,
Paige_Niedringhaus:
boy.
Shaun_Evening
it's a possibility.
Jack_Herrington:
Oh, you should. I mean, I'm sure there's a road map somewhere.
Shaun_Evening
There certainly is, yes. Yeah. That's also
Jack_Herrington:
Okay.
Shaun_Evening
like we talk about the roadmap every month and anyone on our Discord channel is welcome to drop
Jack_Herrington:
Oh!
Shaun_Evening
in and check it out. So,
Paige_Niedringhaus:
Nice.
Jack_Herrington:
Well,
Shaun_Evening
yeah.
Jack_Herrington:
that's a nice, come on, that's a nice plug right there.
Paige_Niedringhaus:
Yeah,
Shaun_Evening
Yeah, there we
Jack_Herrington:
Yeah.
Shaun_Evening
go,
Paige_Niedringhaus:
put
Shaun_Evening
perfect.
Paige_Niedringhaus:
your thoughts in here, share
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
your feelings.
Shaun_Evening
Exactly.
Jack_Herrington:
Make Discord
Shaun_Evening
["The Roadmap"]
Jack_Herrington:
one of your 100 or so Discord, I mean, make that one of your 100 or so Discord servers that you're on.
Shaun_Evening
Absolutely,
Jack_Herrington:
I think it's
Shaun_Evening
yeah.
Jack_Herrington:
actually a limit apparently.
Shaun_Evening
Really.
Paige_Niedringhaus:
Oh,
Jack_Herrington:
I think there is,
Shaun_Evening
That's
Jack_Herrington:
yeah.
Shaun_Evening
probably
Paige_Niedringhaus:
wow.
Jack_Herrington:
I'm
Shaun_Evening
for
Jack_Herrington:
not
Shaun_Evening
the best.
Jack_Herrington:
close. I think I'm only getting my 25s at least right now, but you know.
Shaun_Evening
Oh man. I think my,
Paige_Niedringhaus:
too much
Shaun_Evening
every
Paige_Niedringhaus:
stuff
Shaun_Evening
time
Paige_Niedringhaus:
to
Shaun_Evening
I
Paige_Niedringhaus:
keep
Shaun_Evening
look
Paige_Niedringhaus:
up
Shaun_Evening
at Discord,
Paige_Niedringhaus:
with.
Shaun_Evening
feel like my brains are gonna leak out of my ears. So
Jack_Herrington:
Ha ha
Shaun_Evening
many.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
ha!
Paige_Niedringhaus:
Yeah.
Shaun_Evening
Too much!
Jack_Herrington:
If I had to pick one DM though, definitely be discord. There's so like teams is abysmal. Slack is
Paige_Niedringhaus:
Oh.
Jack_Herrington:
is better
Shaun_Evening
Yeah.
Jack_Herrington:
and then discords just.
Paige_Niedringhaus:
Hehehe
Shaun_Evening
It's pretty good.
Jack_Herrington:
Yeah. All right. Well, this has been wonderful. Thank you so much
Shaun_Evening
Thank
Jack_Herrington:
and
Shaun_Evening
you.
Jack_Herrington:
we'll see you next next week.
Shaun_Evening
Absolutely.
Paige_Niedringhaus:
Yep. See you then.
Shaun_Evening
Take care. Bye!
Jack_Herrington:
Bye!
Paige_Niedringhaus:
I'm sorry.