JASON: Hello, everyone, and welcome to another
episode of Learn With Jason. Today on the show, we have Georges. How are you doing,
man? GEORGES: I'm good. Thank you, Jason. JASON: I'm so happy that you're here. I bailed
on trying to pronounce your last name because I'm not even pronouncing your first name right.
I feel like everybody really enjoys my French accent. Georges. That's not even right, is
it? GEORGES: That's not too bad. Not too bad.
(Laughter) JASON: I apologize. So, welcome to the show.
I'm super happy to have you here because we're talking about something that is both interesting
to me and I am completely terrible at, which is design systems. But before we talk about
design systems, I want to talk about you. So, for folx who aren't familiar with you
and your work, do you want to give us a little background on yourself? GEORGES: Yeah, absolutely. So, I've been always
a techie. As long as I can remember. Previously, a CTO of FinTech for 17 years and recently
started with a couple of friends Dev Riots and we are primarily focusing on bringing
dev tools to front end teams and specifically front end teams. JASON: Very cool. Front end tooling is a wild
space because it can cover so many different things. VS Code and GitHub Code Pilot which
git's pretty heavy. Front end tooling like building a framework. We just had Remix and
Solid JS on earlier this week. What I would consider to be team cohesion tooling. Is that
kind of a good way to describe the suite of tools that you're working on? GEORGES: Yeah, it's actually a good one. Not
only but what you're saying is very important to us. The analysis, if you want, of the team
is that the front end teams have super evolved in the past few years. Previously, you had
just a front‑end developer that could do everything on the front end, but now are moving
into design really in the product development. Like they're really part of it. And you have
even new jobs coming in like design engineers and even backend engineers for the front end.
So, you have all those varieties of specialties in the front end and we don't think the tools
have evolved to really embrace the fact that there is all those persons in the front‑end
development. And so everything we do, we always ask ourselves, okay, is this gonna be a good
for a developer, but how can the designer contribute? How can the UX writer contribute?
You know, how the design is gonna be passed back and forth between the people, et cetera.
So, we really are trying to think about tools that the entire front end team can collaborate
with. JASON: Yeah, and it's a good ‑‑ it's really
interesting to me because it feels like we've seen this sort of shift in the way that you
build for the web where when I was first starting out, you would get, you know, and I started
building for the web pre‑CSS. So, I would get an image and then I would slice that image
up and put it into a table to get this website to look the way that it was supposed to look. GEORGES: Yes, I think it was called, like,
the nine‑way image or ‑‑ JASON: Yeah, yeah. And so we would do things
like that. But that meant, you know, you kind of ‑‑ you worked with a designer, but
the designer never thought about the code. The designer was building you an image and
then they would send you that image and then you would take that image and turn it into
a website. And it wasn't really collaborative. It was very, like, the design first and then
the website, and that's absolutely not the way that we're building for the web these
days. It feels much more like we start with a kind of idea or a design direction. I had
Dan on the show talking about design systems a while ago now. And, you know, one of the
ways he talked about it is that he encourages the designers and the developers to sit together,
and sometimes when they work, they're coding, and sometimes when they work, they screenshot
the code and move it into Figma and make some edits and go back to coding after they've
done some design work. So, it's a very in the ‑‑ there's just a lot going on and
it's no longer, like, a handoff process. You're together. Right? That's fascinating to me. GEORGES: Yeah, yeah, that's really where everything
needs to move, is to work together. There is so much value to bring. You know, I don't
know if it sounds familiar to you or for some of the audience, but I've been into, you know,
demo meetings, and maybe that's the first time the designer sees the result in real
life. And you get that disconnect and frustration between what was the initial idea and what
is the result. JASON: Mm‑hmm. GEORGES: It frustrates the whole team, actually,
because obviously the developers, they want to make the perfect design, and, you know,
it frustrated both people. And it's crazy that the only touch point at the end of the
sprint when everything is done, it should be really a collaborative effort. JASON: Yeah. Yeah, and also what I've found
is that the more it feels like we're working together, the more I like the job. Like I
really have fun when it's me and a bunch of creative people who have experience, you know,
a lot of times I'm the one doing the middle tier stuff like the serverless or the data
connections and we've got somebody who is going to build the front end and somebody
who is kind of focused on the design. If we do it as a handoff, okay, I'm going to go
on my own and work on the data stuff. You work on the front‑end development. You work
on the design. It's fine. But I have so much fun when it's that whole group is sitting
together just being ridiculous and making jokes and, oh, what if we did it like this.
Then I could take it and make it move like this. I can pull in this data and make it
move like this. You get this really magical sense of collaboration. GEORGES: Exactly. And this is only possible
if you can work in real time. JASON: Mm‑hmm. GEORGES: To the same ‑‑ to the same thing.
And even in terms of efficiencies, like, you get ‑‑ for me and for the team, like,
we believe that you get an average result when you get something like handover in different
steps, because basically there is information lost in the way, and also there are opportunities
of magical, as you said, magical elements that can only happen if, you know, what if
you do this? What if you do that? But those can't happen when you have a handoff and you
do, like, a sprint, because at the end of the sprint, the sprint is closed. Maybe you're
gonna, like, reinject something else for the next sprint, but, you know, everything needs
to go on and there is new stuff in the sprint coming in. So, you don't want to do that.
So you end up with something which is average and not, you know, perfect or magical. Especially
in the front end where user interactivity and user experience is actually so fine.
I mean, it depends on so little things. Little animations. Little timings. It's a fine art. JASON: Yeah. It's a fascinating space to be
in, and this is probably one of the hardest problems because, you know, I think the misconception
that I think a lot of folx have is the hardest part of building for the web is tech. It's
learning the right technology or choosing the right stack or something like that, but
the hardest part about any technology project is collaborating effectively. If you've got
a team that meshes well and that works well together, you can give them Notepad and nothing
but HTML and CSS and they're gonna make magic. If you have a team that doesn't communicate
and you give them all the latest and greatest tools, you'll get something fine. It will
be fine. GEORGES: At the end, it does the same thing.
The web page with some interactivity. JASON: Yeah. So, we're talking today about
design systems. So, how does a design system play into this idea of collaboration? What
impact does it make to have a design system on your ability to collaborate between designers
and developers? GEORGES: Yeah, so, there is multiple aspects
of the design system. So I think it's important to say is that definitely the designers entered
into the front end space, like, not a long time ago and they already initialized their
work with tools like Figma and Sketch, you can create short design systems. This is really
key for them, for actually designers to actually create experiences that are consistent, that
are qualitative, and also bring velocity. So they can go fast because they can reuse
things that have been built for the brand. And always be consistent.
But in the end, if on the development side you don't have this industrialization or the
fact that you also created those reusable elements, you don't get that same ‑‑ that
same benefit. You don't get the velocity of reusing always the same components. You don't
get the exact, consistent experience, and then, you know, it all comes also with the
quality. If you do and redo things multiple times, you can't get that right everywhere.
If you fix a bug somewhere, you want that everywhere in the app that you use that exact
component. You want it fixed. So, this is really key.
And then there is all sorts of other things on the engineering side. Like let's say you
are a very fast‑growing company. You have to hire 30 new front‑end developers or so
in a year. We've heard stories that are more aggressive than that. How do you make sure
this team of engineers will build in a consistent with using the right value if you don't have
the design system? This is hard. This is super hard. Like training 30 new, you know, recruits
and making sure that they develop in the brand and in the same ‑‑ in the same methodology
is going to be very hard if you don't have a design system. JASON: Yeah. Yeah, and I think what is interesting
about that, too, is that, you know, it might seem restrictive to say, well, we have a design
system. You have to use the design system. But what I've found is that this is one of
those things where the boundaries actually create a lot of freedom. And by creating a
design system, what you've said is, hey, developers, if you need to put together a UI, if you use
the design system elements, you don't need to get a designer to free up bandwidth to
come and help you with that page. If you use these elements as described, you can ship
this thing right now. And I think that when you start getting into bigger teams and lots
of moving pieces and tons of projects, one of the biggest frustration points is that
feeling of bureaucracy. Well, we can't actually take this thing live because we need a designer
to do a review before we can do that, and the designers are backlogged until next quarter
so, you know, this project is kind of indefinitely on hold. And that is not a fun place to be,
you know, now you're under pressure to ship. The designers are way overstretched because
the average company has, like, one designer for, what, every 20 developers or even worse
ratios than that. So, by having a design system, we're creating strong collaboration but also
decoupling between what the designers are doing. So, the designers aren't doing, like,
production, let me fix this input for you. They're doing strategy. How does the design
feel cohesive across the entire product? Developers can grab a predesigned element and build the
whole thing. GEORGES: If you talk about the ratio you're
giving, there is no way you can scale. You're gonna have just a backlog on the designer.
What the design system gives is it gives the guidelines for the team and for the whole
team, actually, to actually build on their own, basically. JASON: Mm‑hmm. GEORGES: So, this is actually nearly what
you would like best is, like, the designer team basically can really focus on the guidelines
and train the whole team through those guidelines to get the best out of it. It's actually very
efficient. And it gives more time to designers to focus really where it's really important.
Every aspect that is super EV/UX related where you have user experiences that are really
key to your product, you don't need to design every single piece of your application. I
think, you know, a preference page or a setting page, I think anybody can build something
that is good enough, but then there are other parts of your application which are centric
to your use and your experience. Those need the top‑end research that the designers
can put in. JASON: Right. GEORGES: So, this is also ‑‑ this is also
something valuable that I see. JASON: I 100% agree. So, that's the value
of a design system, right? But then there is another complication that comes in with
a design system, which is that now instead of this coupling between, you know, you need
design time to ship anything with development, now we have this coupling between, like, the
actual app and the design system that powers the app. Because these now become two separate
sets of code, and a big challenge that I see is how do you synchronize between these things,
right? GEORGES: Yep. JASON: So, when you are looking at this problem,
how do you make sure that when somebody implements a design system it doesn't become a kind of
endless treadmill of, oh, we made an update to the design system. Everybody go update
every UI you've used in the design system to use the new version. GEORGES: Yes. So, we have definitely a vision
on this. Today, for teams that are very advanced in design system, they would have a full design
system that they would maintain on Figma, for example. JASON: Mm‑hmm. GEORGES: And they will have a full component
library that comes with it. So, if you look at things obviously, like, Polaris from Shopify
or if you look at the Atlas design system. All those design systems we know have those
elements. And so they have to be maintained separately. And you can see the trend that
some firms are trying to actually create the code from the design and generate the code.
And we actually are looking at it from a different standpoint, from a different angle. And we
take the code as the source of truth because it runs, and we ‑‑ this is not available
in Backlight yet, but Backlight will generate the design systems in Figma, for example. JASON: Interesting. Okay. GEORGES: Yes. So, this is a completely different
take from anybody that I've seen so far. But this will make the ability to auto maintain
the design on a Figma point of view. And so the designer can really focus on building
new things and everything that it doesn't ‑‑ isn't existing yet. JASON: Mm‑hmm. GEORGES: And then will look back into Figma
from the source code. JASON: Fascinating. Yeah, I haven't heard
anybody talk about that. I like that. Okay. So, we've been talking kind of in the abstract.
We know the people problem of collaboration when it comes to design systems. We've talked
through the kind of coding challenges, and you just mentioned Backlight. So, Backlight
is the tool that you're working on that is intended to make design systems more manageable.
Is that correct? GEORGES: Yes. And really ‑‑ and going
back to your point that the design systems are super collaborative, they are super collaborative
because you have a piece ‑‑ the design system is a piece of, you know, design elements
in Figma, for example, it's a piece of code through the component library that you have
in the code. It's also content design, you know, the grammar, the tone, the vocabulary
that you use. So, those are for UX writers also to contribute to the design system. So
you have everybody contributing to that element, which is the design system, and that's the
language that everybody will share when they talk about design and when they build things
together. So, the design system is ultra collaborative
in that sense. Like everybody is working on this thing and everybody needs to work together
on this thing. So, when we ‑‑ when we build Backlight, we just said, okay, what
is the product we want to use? What we really went from a blank sheet of paper and we said,
okay, what is the best thing we want, we would love to have to build design system together?
And this is what we created with Backlight. And you can really create and maintain all
together, the whole team, the front end team together, a design system. JASON: I am really interested in seeing this
in action. So, rather than talking about it, I actually just want to start looking at it.
So, let's switch over here. And I am going to start by shouting out our live captioning.
We've got Jordan here with us from White Coat Captioning, who has been running captioning
since the beginning of the show. You can find that right on the homepage of the site if
it you want to follow along in text format. We have that made possible by our sponsors,
Netlify, Fauna, and Auth0. All of whom are kicking in some cash so that we can make this
show more accessible to more people. And, you know, just a little nudge to the companies
out there, if you want to sponsor some captioning, I'm looking. I need another sponsor. We're
talking to Georges today. So, you can find Georges on Twitter there
if you go and click that link. And what we are specifically talking about and what we're
about to dig into is backlight.dev. So, you can go check out Backlight's website here.
And at this point, I'm gonna ask you, what should I do if I ‑‑ so, I'm ready to start
my company. I want to build a landing page so that people can say that they're interested,
and I'm gonna start from the get‑go with the design system. I've decided that's how
I'm gonna build my company. GEORGES: Okay. JASON: What should I do if I'm gonna use Backlight
for it? GEORGES: Let's go and get started with the
yellow button. Yeah. JASON: All right. GEORGES: So, there is a bunch of starter kits
which are design systems that are pre‑built. JASON: Okay. GEORGES: Depending on the technology. So,
you have some web components, some React and some Vue, and those are examples of technologies.
So, we're still building that on a weekly basis, but this is what you have today. But
given the style of Learn With Jason, I think we should start from scratch. JASON: Let's do it. GEORGES: So, we're gonna pick up the black
card which says "blank." Exactly. And so we're just gonna pick this
up. And you go into Backlight. So, this one is blank. And so now we're gonna ‑‑ JASON: I want to call something cool out here.
Did everybody notice that I didn't have to sign in? I'm able to use this product without
actually signing into it, which is rare and cool. I'm excited. GEORGES: Yeah, we try to be very, very open
so that really people can discover the product and make their minds up about it without ‑‑ but
this being said, now you're gonna need to make your copy of it. And so by clicking on
the "start with this design system," now we're gonna ask you to log in because we're gonna
save things on your account. JASON: Yeah, so, basically, I can play at
first. If I want to keep it, I obviously need to have an account to associate my version
with. GEORGES: Exactly. JASON: Okay. So, I signed up with GitHub.
I'm in. GEORGES: Exactly. You're in. So, now, what
you see on the left, maybe if we do a quick rundown on the left. The packages. So, this
is a list of passages. And the tokens and components and infrastructure are kind of
sort of folders where you can put stuff. JASON: Mm‑hmm. GEORGES: And so this is where we're gonna
put modules or JS modules or CSS modules. That would be the composition of your design
system. So, I don't know exactly where you want to start, but maybe we can start with
some design tokens. JASON: Okay. So, yeah, so, we're gonna build
ourselves a company launch page and a design token. I'm gonna put this here. And so ‑‑ GEORGES: Let's say colors to start with. JASON: Okay. Do I have to give this a file
extension or just say colors? GEORGES: This is just a package. JASON: Interesting. GEORGES: This is like a folder. And then on
the right, you have the source, stories, test, doc, and design. So, we can look at this,
but maybe we're gonna start with source. JASON: Source. GEORGES: Because we're gonna add a new file.
Exactly. This could be colors.‑‑ I would recommend to do a colors.scss. JASON: Okay. GEORGES: Because this way we can combine them.
Because I think we're gonna build maybe with CSS custom properties. JASON: Sure. GEORGES: And then we're gonna combine the
colors and the typography and everything we build together. JASON: Okay. So, if I want to do it ‑‑ is
this just straight‑up CSS, the way that I would always write it? GEORGES: Exactly. So, the only thing maybe
to ‑‑ and this will be useful later ‑‑ but let's prefix everything with something that
you want to use. JASON: Let's just use lwj for now. GEORGES: Exactly. And then you can use color.
And now you can say, I don't know, primary, maybe that's good enough. I don't know. JASON: Okay. And then let's set the primary
color to hotpink. We're probably gonna have to tweak these as we go as we actually see
them in action. GEORGES: Exactly. JASON: But I can make some up. And then, what,
we probably need, like, color‑foreground, and we can make that, like, a dark color.
And then a color‑background. And we'll make that a really light color. GEORGES: Yeah. JASON: And these are just shades of gray. GEORGES: Exactly. JASON: Okay. GEORGES: And now, right away, I'm gonna show
you something right away, because I think it's interesting. Is we can write the documentation
of these colors to document it. Exactly. We go to doc. So, we support different shapes
of documentation, but I think MDX would be easier if we go React. So, we can do colors.mdx.
Exactly. JASON: Colors.mdx. GEORGES: Yeah. Now I think we need to import
‑‑ we need to import MDX. So, import brackets MDX from @mdx‑js/react. I think that's
the minimum. And mdx is in lowercase. JASON: The whole thing? GEORGES: Yeah. JASON: Okay. GEORGES: Try a title now. It should be working. JASON: Let's see if I need to reload it. Oh,
wait. Oh, wait, hold on. It saved as, like, .mdx‑‑‑ GEORGES: You have the root files on the bottom
left‑hand side. You have a package.JSON and we're gonna add the dependency to this. JASON: Okay. Do I do this straight up like
this? GEORGES: Yes, exactly. You're actually gonna
add an easier panel for that. I think, yeah, I don't know if we support the store. I've
never tried that, but go back to colors to see if it's working. JASON: There it is. GEORGES: There we go. JASON: Great. Okay. All right. GEORGES: We're getting there. So, now we want
to show the colors. So one way is obviously we could build here in MDX some boxes and
stuff with the colors. So, this will document. JASON: Yeah, I could do something like, what,
div style and then we could do background lwj‑color‑primary. And then I would need
to set, like, a width of 100 pixels and a height of 100 pixels and then close that off.
Wait, what did I get? Oh, oh, oh. Oh, that's right, because it's MDX. GEORGES: Yes. JASON: Right. Okay. So, doing this ‑‑ doing
this all for illustrative purposes that we're absolutely gonna get rid of here in just a
second, but that's okay because it's worth ‑‑ it's worth seeing how much this is
painful. (Laughter)
Okay. So, here is our first one, and I did ‑‑ what did I get wrong? GEORGES: It should be pink. JASON: Let me make sure I'm actually getting
it on the screen here. GEORGES: Yeah. JASON: There it is. And I did ‑‑ did I
typo this? GEORGES: Oh, yeah, we need to import it in
the documentation. So, we need to import. And we can do import../src/colors.scss. Exactly.
We're gonna combine. JASON: Okay. There we go. So, there's the
way you would do it manually. GEORGES: Exactly. JASON: This ‑‑ I don't want to do this
every time, and I certainly don't want to have to go and edit this every time. GEORGES: Yes. So, what you can do is you can
use a component that we built, and this is actually available in open source, so we can
import. Import brackets styleShowcases. Style without the
"D".@divriot/dockit‑react/ ‑‑ because there is different components. Style‑showcases. JASON: Okay. Then do I need to add this to
the package? GEORGES: Yes. JASON: Okay. GEORGES: You're getting used to it. And now
we can use it. It's actually a React component, so we can use it. Exactly. And then we're
gonna use as appropriately, we're gonna put prefix = and we're gonna prefix it with your
CSS custom properties. So, maybe ‑‑lwj‑color. Exactly. All my custom properties that start
with this. Then we're gonna say another property, which is styleKey. GEORGES: Key with a ‑‑ exactly. And we're
gonna say background, because we need to tell them this is a background color that we want
to showcase. JASON: Oh, I see. I see. GEORGES: Let's see if this works. Otherwise,
we need to add something else. JASON: Let's see. GEORGES: That's weird. JASON: Oh, because I tried to do ‑‑ I
tried to included the selection inside the package JSON because I copy/pasted. GEORGES: It should still work. Let's see.
Okay. So, now we're missing just one thing. JASON: Okay. GEORGES: We're gonna just add a piece of CSS.
Either in a new file or in line where you want. We can create a new file, if you want,
just to style the box, actually. Because the box can be styled the way you want. So, we
can say ‑‑ exactly. JASON: Okay. GEORGES: And now you can make a class there
which is called box. JASON: Okay. And we'll say. GEORGES: And then you can ‑‑ and then
you can give it ‑‑ exactly. You got it. JASON: Okay. Just do, like, a light margin. GEORGES: Yes. And border radius if you want. JASON: Oh, yeah, border radius. Let's do that.
Okay. GEORGES: And then you can go back to your
here and ‑‑ exactly. JASON: Src/box.scss. GEORGES: Yeah. And you could actually have
the box in the doc folder because it's only relative to the box, but it doesn't matter.
That's okay. JASON: Oh, I see. I understand. Okay. And
so then do I need to, like, add that box class here? GEORGES: Exactly. This is called component
‑‑ JASON: Oh, it's not ‑‑ GEORGES: No, it's not class name. ComponentProps
with an "S" at the end. And this is where you put an object ‑‑ exactly. Class name.
You got it. JASON: All right. GEORGES: Wow, that was ‑‑ so, now you
can even add new CSS custom properties and they will show up automatically. JASON: Very cool. Okay. So, let's do a secondary.
And we'll do this one as ‑‑ is that a color? GEORGES: That's nice. JASON: And then if I reload over here ‑‑ GEORGES: Exactly. JASON: It's automatically in. I'm assuming
this is order dependent. So, if I switch these up. Yes. Look at that. GEORGES: Exactly. JASON: That's slick! GEORGES: So, you can do quite a lot of things.
So, you can obviously do that by yourself and do exactly the color palette that you
like. But we just offer this little facility into the React package. JASON: Yeah. That's ‑‑ this is really
nice. Like it's good to have these kind of, like, let's just make that thing work the
way that we want it to work. But okay. So, now we have our ‑‑ we have primary colors,
secondary colors, so, the next thing then is we need to put together our components.
And so I want to do, like, a landing page. So, if I'm launching this business, I need,
like, a headline. I'm gonna need some text that says, like, hey, this business is coming
soon. And I haven't had time to put together a newsletter yet, so what I'm actually gonna
do is kick to Twitter. Let's have a button that says, you know, for updates, follow me
on Twitter. GEORGES: Yes. JASON: Right? So, headline, text, button,
and then maybe, like ‑‑ let's start there. Then I have a follow‑up question once we
get there. GEORGES: Okay. Do you want to, like, say create
another document for the typography maybe? JASON: Oh, yeah. We can definitely do that.
Let's go into source. GEORGES: You can go into talkings on the left.
Now we can create the typography. Exactly. So, same story. JASON: Oh, all right. GEORGES: Same story. We're gonna do ‑‑ exactly. JASON: Got it. Okay. So, then I've got my
typography.css. We'll give it root.lwj and call it text. How would you usually ‑‑ GEORGES: So, I would usually just do a font
family. JASON: Let's use one that we know will work
so we can say ‑‑ GEORGES: Yes. JASON: What's a system font? Verdana ‑‑ let's
use Georgia so that we know that it's working. And then we can, like, default to serif. Comic
Sans. And then we can do an lwj text heading font. Yeah, we can use Comic Sans for that.
What is it, common Sans MS. GEORGES: The best way to keep it discoverable
is do text font heading. Exactly. This way you can do ‑‑ you can change heading into
something else. This is another family. JASON: That is what I was thinking, yeah,
is that we could do ‑‑ GEORGES: Okay. So, then you could do font
family and add something. So, for example, if this is heading, you give it heading. And
the other one, you call it body. Exactly. Perfect. JASON: Okay. And then we can do ‑‑ GEORGES: Then I like to do size and weight.
I think those are the minimum. But you can obviously add ‑‑ JASON: Okay. Let's go with a size of ‑‑ we'll
default to 18. GEORGES: Yeah, you can do size normal and
size big or size large JASON: Gotcha. And do you always ‑‑ GEORGES: Exactly. JASON: And then we can go with big and huge. GEORGES: Yeah. So, what I like to do also
is to give it some space to separate the different types of token, but I think you get the point. JASON: Oh, yeah, I see what you mean. Those.
And then bold and ‑‑ actually, let's just stick with that. Or no, you know what we can
do? We can do black. And we'll make that, like, a 900. So we can do kind of different
sizes and stuff. I'm not sure if Georgia has a 900 weight, but we can try that. GEORGES: Exactly. JASON: Anything else we should put in here? GEORGES: I think that's a good start. I mean,
we don't need to be too crazy. And it's actually a good thing to start small. And this is actually
something I would recommend to everybody, is, like, to start small with the design system
and just build on it progressively. JASON: So, I'm just grabbing out that? GEORGES: Yeah. Maybe you can copy/paste from
the colors. It will give you some time. JASON: Definitely could have done that. That's
doing ‑‑ there it is. Then I can go back to colors and grab this style showcases. GEORGES: Yeah, and with the import and everything. JASON: And for this one, styleKey, how do
I want to do this? GEORGES: It would be text. JASON: Okay. GEORGES: Oh, wait a minute. Yeah, this one
will actually be even different. No, the styleKey will be font family, sorry. JASON: Oh, I gotcha. GEORGES: Yeah, because you want to do a showcase
for font family. So, the style keyKey would be font family. JASON: Is this CamelCase or snake case? GEORGES: Snake case. You don't need the components
for this one because it's a font family. It doesn't have a box. So, this should work.
Oh, you need to import the style. JASON: Oh, that's right. GEORGES: Component. Yes. JASON: Copy this out. Okay. GEORGES: Should see the text. So, let's maybe
just add something else, which is showcase a new property. So, this is documented in
the package. But showcase component = text. Because we want to they will them it's text.
Okay. That helps. JASON: Ahh. That's cool. GEORGES: So, now you have two forms, which
are the body and the heading with the fonts that you selected. JASON: Got it. If I want to do the same thing
‑‑ GEORGES: For size. JASON: ‑‑ I can go with size. And this
one would be fontSize. GEORGES: Exactly. JASON: Great. GEORGES: You're good at that, huh? It's like
you've always used it. JASON: Okay. So, we've got the sizes and then
what else do we have in here? We've got our weights. So, we can come back ‑‑ GEORGES: Exactly. JASON: ‑‑ and copy this. And say weight
‑‑ and I screwed that up. What is it? GEORGES: Yeah, it's just a key. It's just
a key. JASON: Oh, the key. The key. fontWeight. GEORGES: We can see the 900 is ‑‑ JASON: If I ‑‑ I'm not gonna worry about
it. GEORGES: So, you can tune all this stuff.
You can tune all this stuff up, but this is how it looks by default. JASON: Yeah, this is ‑‑ I mean, this is
pretty good. I do think ‑‑ I think this is too much. So, let's ‑‑ I have a whole
thing for this. So, let's just use the system font. Oh, no, it didn't work. Copy/paste block
that we can get in here. Let's get ‑‑ GEORGES: Always a good source. JASON: ‑‑ this one. All right. So, here,
I'm gonna drop this in. And if I refresh ‑‑ oh, so, it doesn't pick up the ‑‑ I would
need to, like, add styles if I wanted it to pick up the font family and everything. GEORGES: Yes, exactly. JASON: Got it. So, we won't worry about that
now. But this will be a little bit easier to look at, I think, than like Comic Sans
and a San Serif. All right. GEORGES: So, now, maybe before we move into
the button, because that's what you want to do, right? JASON: Yeah, I think a button would be good. GEORGES: Maybe we spend some time to improve
the documentation style because it looks a little bit dummy, and I'm gonna show you a
bit more. So, let's create in the infrastructure, let's create a layout for our documentation
so that it looks better. JASON: Okay. And is there a ‑‑ GEORGES: Exactly. Layout. That's fine. And
then in source, yeah, you can create just layout.tsx or jsx, whatever you prefer. JASON: We'll see how I do with typescript. GEORGES: So, we need to import React. And
we need to import MDX Provider from Mdx‑js/React. JASON: Always get that wrong. Okay. So, I
need to wrap the whole thing, right? GEORGES: Yeah, so, we're gonna do an export. JASON: Right. Because it needs to be an actual
component. GEORGES: Yeah, exactly. JASON: Look at me go. GEORGES: You can export ‑‑ yeah, export
default will work. JASON: And then do we want to children, right? GEORGES: Yeah, I don't use it ‑‑ I usually
don't use it. I use the props and then get the children, yeah. JASON: Okay. Okay. So, if I return, then I
can move these. GEORGES: Yep. JASON: Into here. GEORGES: That's exactly it. Exactly. And then
one thing that ‑‑ just to make it fast, again, we're gonna pick up from the docket
React. We're gonna pick up a pre‑made layout. So, we're gonna import from the divRiots docket
React something called coreLayout from divRiots/docket‑‑‑ we've got different
layouts but this one is the core. And then we can just use it inside the provider. And
this thing takes one property. This is really good. Exactly what we need. This takes one
property, which is a logo. If you want to have one. I think the logo of your company
would be even better. JASON: Yeah, I think I have ‑‑ let's see. GEORGES: And it's ‑‑ JASON: I'm gonna have to ‑‑ GEORGES: It's a React component. So, if you
copy/paste ‑‑ if you get an image, it needs to be a ‑‑ JASON: Got it. Edit as HTML should let me
copy this. GEORGES: Yep. JASON: And then come back over here. And we
will create ‑‑ GEORGES: No, yeah, it needs to ‑‑ it needs
to go ‑‑ yeah, you can do that, but I don't know. We can try. So, we can try. JASON: I mean, I can also ‑‑ let's see,
I could put it up here. GEORGES: Yeah, exactly. That's what I was
thinking. JASON: Got it. Okay. I think it'll just work.
Let's find out. GEORGES: You need to ‑‑ things that you
need to fix some CamelCase, some attribute that needs to be moved into CamelCase. Stroke
width. Stuff like that. JASON: Oh, it's not ‑‑ I thought it would
just fix that these days. Let's see. I guess we can find out if it's gonna explode once
we get it in here. GEORGES: Yeah. JASON: clipRule. All right. Let's see what
happens. And then in here ‑‑ GEORGES: In logo, you give it ‑‑ JASON: It was ‑‑ what was it? Logo is
‑‑ GEORGES: Logo =. JASON: Like that? GEORGES: Yep. JASON: Okay. Doesn't like that. GEORGES: Yep. JASON: Oh, because I missed this one. And
still not happy. What's missing? GEORGES: Yeah, let's see if it works. So,
if we go back to typography now. Yeah, we need the panel back. Yeah, and then what we
need now is in the doc, in the typography documentation, exactly. We need to use that
layout. And to do that in MDX, you need to export default the layout. So, you need to
import it first. You need to import from the layout. So, now this is a little bit special.
Exactly. You use the tilde. You're telling to pick up from the root of the design system/layout.
Because it's still in source, and we haven't created some export on the root, so, we have
to do /source/layout. I think it's called layout.css. And now we need to export layout.
And if this is okay, we're gonna have a new layout. JASON: Let's see how I did with on the fly
SVG updates. GEORGES: Yes. JASON: Oh, I messed it up. And I messed it
up. Let's see here. I have a suspicion that it's something that I did. GEORGES: Maybe. Let me have a look at the
component. Yeah, here. JASON: Is missing ‑‑ property components
is missing in type. So, components, that can just be empty, right? GEORGES: Yes. Exactly. But I'm not sure. JASON: And then logo is not assignable to
‑‑ property logo does not exist on type. Am I missing ‑‑ is it logo or is it something
else? No, Fred, this is a tool called Backlight that we're working with today. GEORGES: So, I'm not sure I see a mistake.
So I think it's okay. Let's just remove the logo for a second to see if it's coming from
the logo. Just remove the attribute. The property. Because ‑‑ and then ‑‑ and so let's
just go back to typography to see if it's ‑‑
reload that. JASON: So, here's our doc. GEORGES: Read properties un‑defined. Yeah,
I think in the layout, maybe. In the layout, in core layout. Yeah. If you scroll down,
I think in the layout, instead of picking up the children on the top ‑‑ JASON: Mm‑hmm. GEORGES: ‑‑ we're gonna pick up the props.
Exactly. JASON: Okay. GEORGES: And then we're gonna put all the
props here, like, with... ‑‑ not here ‑‑ yeah, exactly like that. And remove
the children. And because layout doesn't have a doc, it will not show up, and it will not
show anything. So we have to check out from the typography that this works. There we go. JASON: Hey, look at it go! Okay. So, now let's
see if we can get our logo back in. GEORGES: Exactly. JASON: No. But it's not for lack of trying. GEORGES: So, what is wrong? Because it looks
good. JASON: I could have sworn that with these,
it was ‑‑ I thought with React, you didn't change the SVG stuff. Let me try it and see
if it does what I think it does. GEORGES: Yep. You need to go back to typography.
Actually, what we can do ‑‑ you see the pin upstairs? The pin next to the doc? Yeah,
if you that, it's pinned to the typography, so when we go back to layout, we can see the
results immediately. JASON: That's nice. Okay. So, I have definitely
broken something because we're not getting our logo. GEORGES: Yes. Which is a shame. Because it
would look cool. Do you ‑‑ try to wrap it around a div. JASON: Like that? GEORGES: Yes. No. Wow, that's annoying. JASON: It just doesn't like it at all. Functions
are not valid as React child. Oh. Oh. GEORGES: Oh, yeah, yeah, yeah, yeah, yeah,
yeah. This should be logo. JASON: Heyo! All right. So, let me roll back
these choices that I made. And what? Oh, I missed a thing. There we go! GEORGES: Look. That's super cool. JASON: I love it. GEORGES: So, now we can go back to typography
because I want to show you a little, a cool little thing. And in the doc, so, we have
these two lines that applies the layout, the import, and the export. JASON: Mm‑hmm. GEORGES: So, take those two lines and put
them into colors as well so that the two ‑‑ the two pages have the same layout. Did you save
yet? JASON: Oh, yeah! Look at it. So, now we've
got some ‑‑ we've got, like, consistency. Our design system has a little bit of consistency
to make it feel good. GEORGES: And if on the top end now, if you
go to doc on the top, top end, you have this switch with review ‑‑ the top end. Yeah,
exactly. Doc. JASON: Ooh. GEORGES: And now you have as if it was like
a website. JASON: Oh, and you know what this means? Watch.
We can go in here and I can go into here, and I'm gonna add a, like, layout.scss, and
I can do something like ‑‑ we'll go font‑family: And lwj‑text‑font‑family‑default.
Do I do default or body? GEORGES: I think it's body. JASON: Okay. And then I'm gonna pin this while
I do it. That should ‑‑ GEORGES: And now you need to import it on
the layout TSX. You're getting good at that, huh? JASON: A hazard of this job is you got to
pick it up quickly. Check it out. We can see our weights actually show up and we can see
things are doing what we want them to do. We've still got our heading sizes. GEORGES: Yes. JASON: And we can do something like if I go
in here and say we're gonna set our, let's say H1, H2, I think that's all we used, so
let's stop there, and say font‑family will be lwj‑text‑font‑family‑heading. Now
we're using our design system to build our design system, and that's pretty slick. GEORGES: Exactly. That's what you want. JASON: I love it. I'm into it. I think this
is great. GEORGES: So, let's bump it a notch and build
a component, maybe. We could ‑‑ JASON: Let's do it. GEORGES: For the sake of the audience, maybe,
we could build, like, elevations, you know, spacing tokens, border radiuses tokens, we
could build a lot more tokens than that, I think, but given the timeframe. JASON: Yeah, we've got like 20, 25 minutes
left, so, let's get a component. Because what I really want to see is how we put this into
practice. GEORGES: Yes. JASON: Right? Like I want to use this design
system. GEORGES: Yes. JASON: So, I'm gonna create a button. GEORGES: Yes. JASON: All right. Now, if I go into source
‑‑ GEORGES: Yeah. JASON: ‑‑ my assumption is I'm gonna create
button.jsx. GEORGES: If you want. JASON: Okay. I'm gonna import React from React
and down here, I'm gonna export default function Button and will return, do, like, a button,
and that button's gonna need some text. So, I'll give it a text prop. All right. And so
this is all just standard React. I'm just doing ‑‑ this is me going on my gut. I
could be wrong. GEORGES: Yeah, yeah, yeah. JASON: I'm gonna give it some default text
here. And that gives me a button. I'm gonna unpin this. GEORGES: Yes. JASON: And then ‑‑ GEORGES: So, now if you want to see it right
away ‑‑ JASON: Mm‑hmm. GEORGES: ‑‑ what I like to do is do stories.
So, we can go into the stories and then you can create, like, a ‑‑ exactly ‑‑ .stories.jsx.
That would be special. JASON: Okay. GEORGES: So, this is pure storybook. JASON: Okay. So, I don't actually have a lot
of familiarity with Storybook. I've used it ‑‑ GEORGES: That's fine. Import React again.
Unfortunately, we have to do that. JASON: Import button from ‑‑ GEORGES: Exactly. JASON: ‑‑ button. GEORGES: ../srs. JASON: Oh, right, because we're not in the
source folder anymore. GEORGES: Exactly. And then we do export. We
do export const and then you give it a button primary, for example. For example, you call
it ‑‑ =. And then you make a function. Exactly. And then you return whatever you
want. Which is your button. JASON: Okay. GEORGES: And if you go back to stories on
the right‑hand side. JASON: Stories? GEORGES: Exactly. You have it. JASON: Wow, look at that. GEORGES: And you can create multiple of them,
if we want. You just copy/paste, like, export const and just make secondary ‑‑ JASON: Okay. And then in this button, I'm
going to ‑‑ let's add a color key. GEORGES: Exactly. JASON: And we can say ‑‑ GEORGES: Secondary. JASON: ‑‑ secondary. All right. And so
then I'm going to come in here and we've got a color which will default to primary. GEORGES: Exactly. JASON: And we can do, like, a style and we'll
do button‑color. And we'll set that to color. No. We're gonna set that to ‑‑ aha. Lwj‑color
like this, right? Because then we can go and style it up. GEORGES: Yep. JASON: And actually use these tokens that
we created in our design system. Look at us go. We're design systeming. Okay. GEORGES: For the ‑‑ you're gonna do that.
I was wondering ‑‑ JASON: Is this gonna work? Because then I
can go button, and my button is going to have a background‑color of button‑color, right? GEORGES: Yes. JASON: And so that way it kind of defaults.
And I guess what I could do is I could actually go button‑color is going to default to lwj‑color‑primary.
And then that would default if this was unset, but because I don't want to do any logic to,
like, show or not show this ‑‑ GEORGES: Yeah. JASON: I'm going ‑‑ I'm choosing not to
do that. So, instead, I'm gonna leave this out entirely. And then let's add a little
bit more. We'll do, like, a font‑family of lwj‑text‑font‑family‑heading. And
let's do a font‑size. Lwj‑text‑font‑size‑big. We'll add some padding of let's call it 5
on the top and 1 on the left and right. And then what we need to do here is ‑‑ GEORGES: Import. JASON: ‑‑ import our buttons. Oops. Button.scss.
And I need to add a class name. Of button. Okay. So, that got us part of the way there,
but I screwed something up. GEORGES: Styling of the background. Because
I think that's the missing part. In button.css. JASON: Oh, right, because I never actually
used it. Background color? GEORGES: Yeah, maybe ‑‑ JASON: Default it? It's not picking up my
background color. GEORGES: Yeah, maybe the best would be to
set the background color straight from the style. I don't know. JASON: Oh, interesting. Maybe it's not ‑‑ oh,
maybe I do need to set it as a default. Right? And then we ‑‑ actually, let me go back
here and then we'll do that again. So, we'll start here. We'll say "red," and then it just
doesn't like that color? GEORGES: No. Oh, you know what? I think the
design token is not imported so they are not set. JASON: Yeah, of course, that would cause the
problem. So, do I import them here or import them above? Like how do you manage this? GEORGES: So, here, I definitely ‑‑ I like
to import, like, CSS custom properties in CSS. Because you stay in the same realm. When
you do CSS in JS then it's a different story. But here, you can do that. JASON: Like that? No, token source. GEORGES: Yeah, it's actually tilde colors. JASON: Colors. GEORGES: Because the folders are more virtual
than ‑‑ JASON: Like that? GEORGES: Exactly. Yeah. JASON: Could not find style sheet to import
because I called it ‑‑ that's right ‑‑ source colors. Colors/src/colors. GEORGES: Yeah, it looks good. JASON: Am I getting that syntax right? I haven't
used SaaS imports for a long time. GEORGES: Yes, let me try to figure it out.
Maybe try dot dot/to see if it likes it better. /.. again. Nope. JASON: There it goes. Then we can do another
one. Oh, wait, no, what am I doing? I'm in the wrong place. I want to get into my stories. GEORGES: Exactly. JASON: And I want to do my secondary button,
right? And then ‑‑ GEORGES: Yeah. You had it. JASON: And secondary. Look at it go! Oh, that's
cool. GEORGES: You can maybe remove the border because
it's really ‑‑ JASON: Oh, yes. GEORGES: It's really ugly this way. JASON: We'll go with a border of none. And
we'll do a border radius to keep up with the rest of our design of something like that. GEORGES: Exactly. JASON: Look at that. That's a nice looking
button. I'm happy with that. I think the contrast is okay. GEORGES: And the 9 points ‑‑ if you ‑‑ on
the right of button secondary, you have the 9 points. This gives you all the stories together. JASON: Oh, that's really slick, because then
if I start changing stuff, I can make more choices. And this is, like ‑‑ this is,
I think, the strength of building a design system is, like, after you've done this, because
then I can go in and I can say something like, you know, we can do a size and by default
we'll go normal, right? Or maybe default is big. GEORGES: Yes. JASON: Then I could go in and I could also
create, like, a small button. Right? GEORGES: Yes. JASON: And so in my ‑‑ we'll do a size
small. And in our small button that immediately shows up here, we can say ‑‑ actually
change these so that they match with what we're saying. Button primary to secondary,
small. And then if I go into my button.jsx and we get a size of big, then I can do something
like ‑‑ let's add a button‑size. And we'll do lwj‑font‑size, and we'll do size.
Right? And then if I ‑‑ nope, that's not it. This is it. That's right. So, then when
I save this, that will auto format for me, and I can come in here and set a button‑size
of we'll say, I don't know, 12px. And we can do the font size instead of button size. And
now what we should see is that these will ‑‑ did I get that right? Hold on. Let
me look at my typography. Text size, go it it wrong. That's why it's not working. Text
size. And now if I go to my stories, we should get ‑‑ did I actually save this? GEORGES: Text size or font size. JASON: Size. Text size. That's right. GEORGES: Font. It's text font size, no? JASON: Oh, did I screw it up again? GEORGES: I don't know. I think ‑‑ JASON: Text size. Okay, so these are the. GEORGES: Text size ‑‑ JASON: Oh, but there is no small, is the problem. GEORGES: Ah, that's what we're missing. JASON: Okay. So then if I go back to my buttons
and I go to my stories, we should see a small one, which we're not seeing because ‑‑ GEORGES: It doesn't want to. JASON: It's arguing with me and it's arguing
with me because I did something wrong. And the thing that I did wrong is what? What have
I done, chat? GEORGES: Because it looks exactly button size.
Text size small. JASON: Text size small. Right? And then if
I change this ‑‑ just to make sure that it's picking up my changes, I'm gonna color
red. No, that's right. So, it is ‑‑ oh, I know what it is. No, I don't. I don't know
what it is. (Laughter)
Lwj‑text‑size. Button‑size. GEORGES: Size should be small. Otherwise it's
big. JASON: Yeah, it's, like, picking up a ‑‑ got
a size big. Size big makes sense. Right? And then when I go into my story ‑‑ GEORGES: Size small. JASON: Pass in the size. GEORGES: Yeah, it's not picking it up. JASON: Huh. Maybe something is overriding
my text sizes, which is entirely possible. Maybe I did it in my layout. GEORGES: Not on the button. On everything.
No, I wonder if the custom properties div apply perfectly from ‑‑ JASON: Yeah, I didn't change anything. Okay.
So, something I'm doing with that isn't working, but that's okay. You know what we can do when
we have mistakes? We just hide them entirely. (Laughter)
So, I'm gonna go into my size here and I'm gonna get rid of the button‑size. We're
gonna leave that out because it's not working and that's not really what we're here to learn.
I'm not gonna debug React today. So, I'll leave out the size altogether. And now in
our stories, we've got two ‑‑ we've got a primary and a secondary button. That's enough
for today. GEORGES: Okay. That's cool. So, now I propose
we do a documentation of it. JASON: Okay. GEORGES: And so you can copy/paste the documentation
if you want. JASON: Okay. GEORGES: That will spend some time. JASON: All right. And this one we're pulling
in button. GEORGES: Exactly. JASON: We've got the layout. We've got a button.
And for this one, I assume I'm not doing the same thing, right? It's not a styleShowcases
like this? GEORGES: Exactly. JASON: Okay. GEORGES: So, the good thing is very basic.
We can, like, we can just import the button. You didn't, I think, import the React button.
We can just import the React button. Exactly. We should just have the button in the middle
of our documentation, as soon as we save. Exactly. Perfect. So, we can do a few things
here. So, you can have some code example, how to use it, or you just ‑‑ JASON: Oh, wait. What have I just done? GEORGES: I don't know. JASON: There we go. GEORGES: And then you can have ‑‑ you
can triple code ‑‑ triple back code and do some coding example, if you want. We're
gonna get that. JASON: Okay. So, we got some triple ‑‑ is
this the kind of thing? Oh, look at it go. You give it the type. GEORGES: Exactly. So, that's cool. And what
will be nice is if we have a little playground of our button. JASON: Mm‑hmm. GEORGES: So, to do this, we can import a new
component helper from the divRiots dockit‑react. And then is it ‑‑ GEORGES: Playground. JASON: Playground. Okay. GEORGES: So, then we can call playground.
Exactly. And we give it a prop that is called scope. And this is to pass the button. So,
we're gonna = ‑‑ yeah, double. Double brackets, I think. JASON: Oh, gotcha. GEORGES: And then ‑‑ and another property
called code, and then we can put some code inside it, but in text. JASON: So, like what I just did? GEORGES: Exactly. JASON: Okay. Then I can do something like
button. We'll say text = test Me. GEORGES: Exactly. And so now it's picking
up the new lead that we added. JASON: Okay. GEORGES: Just give it a second. JASON: Okay. So, we've got our ‑‑ GEORGES: Exactly. Now you can play with it
because the code underneath is editable. It's a true playground. So, you can even test your
‑‑ JASON: Wow, that's really nice. So, then I
can go ‑‑ what did I call this? Color? GEORGES: Yes. JASON: Wow! That's slick! I love it! GEORGES: So, it's getting there. Maybe you
want to give it a few headers and just to make it cool. And then we have other helpers
to, like, show prop tables, but I think we don't have a lot of time to look at this. JASON: Yeah, let's start ‑‑ let's call
this good enough. Let's ship it and use it. GEORGES: Yes. So, one thing that I want to
show off, because we talk about the collaborative aspects with the designers and ‑‑ JASON: Mm‑hmm. GEORGES: And the UX writers. So, here, this
is ‑‑ you've done everything here on ‑‑ you've done everything here on the browser. JASON: Mm‑hmm. GEORGES: And so there is no NPM install commands
or git commands. You do this right here. The ability to connect to git so everybody can
actually contribute, pull a request from there. JASON: Okay. GEORGES: But also on the top end, you have
a yellow outline button with a person ‑‑ exactly. This. This creates a link into your clip board.
And if you share this, people will see exactly what you have right now and that you are working
on. JASON: Very cool. GEORGES: So, we haven't worked with the branches,
but once you plugged it into git, you can create branches, so, you can create new components.
Just click that button and then share with the designer and have an interactive discussion
about what you are doing right now. JASON: Mm‑hmm. GEORGES: And this is ‑‑ this is ‑‑ this
changed the game in the sense that you don't need to deploy a version of that to have a
discussion. Deploy into a website or wait for the CI to build something and then share
the link. JASON: Right. GEORGES: As you code, at this moment, you
want to share this and you want to have an interaction and a discussion, and you can
do it right now. JASON: That's very cool. And I just dropped
that link into the chat for anybody who wants to take a look. Okay. So, with our remaining
7‑ish minutes, can we ‑‑ GEORGES: Oh, wow. JASON: Can we deploy this and get ourselves
‑‑ GEORGES: On the left‑hand side, you have
a little box. The left‑hand size, package. Now we can release it to NPM. So, this, we're
gonna use those names. I don't want if you want to change those names but you can. JASON: Do you want it to be prefixed like
this? GEORGES: It has to be on the free version.
You are limited to this scope. JASON: Got it. GEORGES: So, you can rename these. Yes. JASON: Okay. This is fine. This is gonna be
great. So, we're gonna call it that. And then ‑‑ GEORGES: You can rename this as well. JASON: Oh, cool. Okay. So, let's call this
one Learn With Jason. Okay. There we go. All right. And then I can ‑‑
this will be fine. GEORGES: Look at the workspace. I think something
went south on the ‑‑ JASON: I think I just needed to refresh the
page. So, there we go. And then we can take that out of there. Save it. Okay. Then I go
out here. GEORGES: Yep. JASON: Hey, that looks good. I'm happy with
that. GEORGES: Yep. And you press "release." JASON: Wait, is this really all? GEORGES: Yes. JASON: What?
(Laughter) GEORGES: So, give it a second. It's building
the NPM package. JASON: Okay. Okay. And while that's happening,
I'm gonna go over to Codepen and I'm gonna create a new pen and I'm going to go in here
and see if I can ‑‑ where are my dependencies? I'm gonna just get a dependency in from here,
which is going to be this one. GEORGES: Exactly. You can click on this. It
gives you ‑‑ it goes to NPM. JASON: Don't you lie to me. Oh, it probably
has to update, doesn't it? Okay, fine. I'm gonna do it locally instead. We're gonna just
make a new ‑‑ we'll call it, like, a Backlight test. What I'm gonna publish is the Backlight
setup not this repo. So, I'm not gonna worry too much about what it's called. I'm gonna
git init. And then I'm gonna NPM install the package that we just published. GEORGES: Yep. JASON: And off it goes.
Okay. So, let's open that up. And then inside here, what I should theoretically be able
to do is create, like, a src/index.js. Did that work? There it is. And then if I import,
can I just get, like, button from Backlight? Does it just work like that? GEORGES: No, because we didn't specify all
these root exports, so we need to do manually/button. And actually dist/button. Exactly. You can
get away from that, but as we went really from scratch ‑‑ JASON: So, I'd be able to do something like
this. Whoops. And I'm not gonna be able to run this because I didn't said it up as a
React project, but I could do, like, you know button and the text ‑‑ or wait. Button.
And the text would be, like ‑‑ and this is gonna come in styled, right? GEORGES: Yes. JASON: Okay. GEORGES: We just ‑‑ with a caveat that
we need to load the CSS that we created. JASON: Hmm. GEORGES: Just as an install. JASON: So, it would be Backlight and then
button/dist. GEORGES: Actually, just write out the root.
We can go style.css. JASON: Oh, okay. Okay. So, what I ‑‑ GEORGES: Yeah, because this is using Vite
and that's how Vite will export. JASON: This is using Vite. Let me go back
then. We have three minutes. I can do this. I'm gonna remove our Backlight test. I'm gonna
NPM init vite. And we're gonna call this Backlight test. We're gonna use React. GEORGES: If you do this in three minutes,
that's impressive. JASON: We're doing it. It's happening right
now. Here is our app.jsx. Great. So, what I'm gonna do is grab these bits out of there. GEORGES: Yes. JASON: All right. And then I'm going to replace
this button ‑‑ this is perfect. I'm gonna replace this button ‑‑ actually, let's
watch this happen live because I'm actually really excited about it. So, the first thing
we're gonna do is we'll just use the Netlify CLI to start a development server. And here
it is. Okay. So, here is our count. It's unstyled. So, I'm gonna come over here. I'm gonna get
this one. Okay? There is our button. If this works, I'm gonna be so happy. Okay. So, here's
our button. All right. And then I'm going to ‑‑ GEORGES: You need to change ‑‑ yep. JASON: I'm gonna change it from count is count.
We're gonna set this as text instead. I should have done it as children, now that I'm thinking
about actual usage, but whatever, you learn. And theoretically speaking ‑‑ what happened?
Does not provide an export named button. Oh, because it was a default button. That's why.
No. There. GEORGES: There you go!
(Laughter) JASON: Look at it go, everybody! GEORGES: How cool is that? JASON: This is, like ‑‑ okay, being able
to pull in a design system and just run is, you know, anybody can build this manually
and set up all these things, but what's really interesting about what just happened here
is that you've got this set up in such a way that it is ‑‑ this is, like ‑‑
>> Aha! Behold, my bucket. JASON: Exactly. Exactly that, everyone. Look,
it's showing some stuff I didn't do, which is putting all of this in here. And then if
I wanted to learn more about this, I could add a link to, like, my docs which would bring
me out to ‑‑ if I make this bigger so I can see what's going on. It would bring
me out to here. GEORGES: Yeah, this is ‑‑ JASON: Oh, wait, that's the wrong thing. GEORGES: No, no, it's good. You will style
the ReadMe. JASON: We need to look into each of these.
Then I can see stuff and look how it's working and do this test to, you know, set these things
up. GEORGES: Yeah, exactly. JASON: This is wonderful. This is really,
really nice to work with and to kind of create, like, a quick iteration. I feel like there's
a lot more to dig into that we didn't have a chance to get into. GEORGES: Yeah, there is a lot. JASON: Branching and there is a whole tab
we didn't look at. GEORGES: Yeah, if we had more time, we could
actually build the new branch with a new evolution of a new version of the button. And we could
actually NPM link that working branch online to your project. JASON: Mm‑hmm. GEORGES: So, you don't need to re‑release
to see the new design system in your app. As you code online, it would update your app
because it will have an NPM link to that branch that you're working on. JASON: Very cool. I mean, this is great. Okay,
so, if somebody wants to learn more, where should they go for additional resources? GEORGES: Definitely backlight.dev. There is
a lot of stuff. The documentation and also the DS mastery, which is a place where we
put some learning about how to build great design systems. And we have a Discord where
we are 24 hours there, and we love to discuss the design systems components. And in all
technologies, Backlight supports Svelte and Vue and React, and, actually, 50 other ‑‑ 50
other frameworks. So, you can really build the design system the way you want. JASON: That's great. What's up, Alex and friends?
You came just in time for us to go raid somebody else because we are just wrapping up here.
Oh, thank you for the sub. What we are going to do is ‑‑ from here, we're gonna do
another shout‑out to our captions. We've had Jordan with us all day from White Coat
Captioning writing down everything we've been saying so that you can follow along in whatever
format you prefer. We also have that made possible by our sponsors, Netlify, Fauna and
Auth0, all of whom are kicking in to make this show more accessible to more people.
So ‑‑ oh, there is a question, actually. That's interesting. If you are building these
out, is it you could create one per framework you wanted to support? Or is there a way to,
like, do a multi‑targeted export? GEORGES: Yeah, multi‑targeted is supported.
You can create, actually, the button, you can create it in Vue. Vue, React, and Web
Component in the same package and then you just document different ways of using it.
Little story, the landing of Backlight is actually built with Astro that I think you
know. And it's built with Astro with the Backlight design system, which is more for showcase.
And every piece of the landing that you see of backlight.dev is actually built with ‑‑ some
are built with Svelte, others with Vue, others with React, others with Web Components. This
is built into multiple technologies and put together in astro. JASON: Very cool. I love it. So, that's gonna
be it for today. Make sure you go and check out the schedule for the show. We've got so
much good stuff coming up. We are back tomorrow with a Friday episode. Natalia's gonna be
here to teach us about distribute databases. Wire gonna get into MongoDB.
Head over to Dusty Domains you can ship any project, as long as you deploy it to Netlify,
we're gonna donate to charity. We have I think six companies donating. Every site you submit
is worth $300 donated to a charity. Make sure to check that out and get it done. With that,
we're gonna go find somebody to raid. Georges, any final words for everybody as we wrap this
up? GEORGES: I haven't thought about any, but
thanks very much. Thank you very much for having me. It was super fun. And I'm amazed
how fast you picked that up. JASON: It was a lot of fun to learn with you
and, you know, I appreciate you taking the time. So, yeah, chat, stay tuned. We're gonna
go find somebody to raid, and we will see you all next time. GEORGES: Bye‑bye. Thank you again, Jason.
