The Future of the Front-End (with Pedro Duarte) – Stitches CSS-in-JS Demo

[Music] good morning good afternoon and good evening everyone thank you so much for tuning in to another live stream i'm leigh and i'm going to be bringing on a series of guests to talk about anything and everything from tech to non-tech from nextgs to design systems anything and everything and today i'm super excited to talk about the future of the front end how designers work how developers work and some of the really exciting things in this space so today really excited to announce pedro duarte who is an incredible developer designer and really just a big contributor to the front end ecosystem i actually first saw pedro's work in the jam stack space and then with the product modules which we'll talk a little bit about more uh another fun thing he has a really cool personal site too so go check that out uh uses nextgs and purcell it's got a really great design so uh please give a warm welcome in the chat uh and introduce pedro how's it going let me uh let me unmute you here thank you so much for joining thank you for having me super excited to talk about future of the front end because partially i you know i identify myself as a front end engineer i really truly believe that at heart that's how i got started that's how i progressed throughout my career and i have a certain affinity for the front end so it's always fun for me to talk about everything design systems components react figma all that stuff i love talking about that stuff and i'm really excited to talk to you today because you've done a lot of things in the space and you have a lot of experience and i think people are really interested to hear about some of the things you're talking about today so maybe just for people tuning in who want to learn a little bit more about you you want to give just like a quick bio or quick background sure yeah so yeah well thanks for the intro first of all um i'm a front-end dev i've primarily focused on ui since since i started usually working very closely with designers and doing the front-end and trying to sort of like bridge that gap you know i was usually that that person and um then i worked um in different different places advertising then fintech and then editorial and then finally i'm joined modules which is the first startup i've worked at that was about two years ago actually two years ago next month and at modules we i'm working with uh with columns steve and the founders and the rest of the team on closing that gap yeah i essentially feel like i've been trying to close with designers uh forever i i've described it as like modules feels like figma pretty much but for react components like is that how you pitch it to people um yeah you could say that i mean now modules is both a freeform design tool like sigma you can draw boxes and you can put shapes on top of shapes and say that that's your design but you can also do real kind of code with modules in a visual way using react components at least for now and using even using external libraries for example a lot of the components that you have access to modules would be using radix which is one of our libraries of accessible low-level components and that's where i'm at and it's great and i'm happy to show you some stuff man nice so maybe for some of the people tuning in who aren't as familiar with the the front end space or the design system space i think one thing that's super interesting to me is the nuances and the difficulties that go into making these components not only perform well across browsers but be accessible be performant and you know have a a consistent and easy to use api could you maybe shed some light just on all the all the things that you feel like go into making those components great because now you've been involved not only at the like component level at the library level at the visual interface level like there's so many things that people don't realize it's a lot to take in to be honest i always say that the hardest component you can make is a button it's so difficult to make a good button you just make it an a tag right exactly but you know it's everything you said you've got api decisions to make if you're building a design system right you've got a a lot of api decisions to make how can the consumers of your design system use that button how many buttons do they have how many sizes how many colors also known as variants can you combine variants um you know can you render a button as a link if you actually want to and if you do that can you add href without typescript shouting in your face that's polymorphism essentially yeah um and then for accessibility yes i would say the button is not really the the biggest problem with accessibility uh but it is a massive problem in a lot of other components that may otherwise look very simple on the surface like a two tip that's the perfect example everybody can do a tooltip with css pseudo-elements in like i don't know five minutes right but it's not accessible so when it comes to defining accessibility api and usage of certain components that's when you start entering a much more complex area and essentially with modules we are working on solving all of those issues even um educating people when you should use a say a tooltip versus a pop over because under the hood they have very similar mechanics in terms of positioning it's something that you want to appear based on a user's interaction whether the interaction is a hover or a click you want to show more content and you see often the two tips are misused pop-overs and issues dialogues nested dialogues oh no the list goes on you just broke my heart when you said that like a modal or a dialogue inside of a modal like a ui designer cries every time they see that oh it's so funny too because i i think people don't appreciate the difficulty with something like a tool tip too but then when you get into that api design like you're talking about i think you know we often joke as programmers like one of the hardest things is naming things it's really hard to come up with good consistent names for how you interface with that component like what the api is for the front end and i think it's even more paramount more so when you're making this design system that's supposed to be consumed by your entire company or multiple companies like an open source project and you know in the front in space there's so many different words like buzzwords for naming things components atoms modules like what are all these words how do they relate um so much so that even for css for like class names right we had to make whole conventions for this we had bem just to describe how we were going to do these naming patterns and part of the thing that's really appealing to me is when we're leaning on tools like modules we're leaning on open source libraries that help give you the proper guidance for things like naming and they solve the api for you they give you the accessibility guidelines it reduces that mental uh i don't know like the mental overload as a front-end developer when you're like i just want to build this website like i don't want to have to worry about all this crap you know what i mean 100 yeah yeah i think um one of the things that's really cool maybe you just want to give a quick like sentence overview of what is radix and what is stitches and kind of how do those two things relate to what you work on with modules okay let's start with radix so as we said before modules is a visual design editor right you can build prototypes you can just design something and show it to a client and throw it away or you can actually take that design and make it a fully functioning page in order to do that we will give you some preview components that are completely unstyled and your job is to style them right your job is not to decide how a popover should be positioned because that should be something that complies to certain accessibility guidelines or it's heavily tested in i don't know different browsers different different devices it's the type of stuff that usually as a designer even as a developer you don't want to do you just want something that works you want to you want to spend time thinking about how it looks thinking about where it sits on the page um right i mean it's people want to build they go ahead it took us like three months just to do with one select you know yeah um so radix is the um is that layer is the layer that provides all of those unstyled accessible customizable components and the goal is that they can be used um within modules and that's how it all started but what happened was uh we wrote an article about the radix select and everybody was like man why is this only available in modules you know can we make it open source everybody wanted the open source and finally we decided to open source all of the primitives so now they can also be used by anyone currently anyone i mean anyone using react because currently they're in react only currently so now it also means that if you want to build your design system and you want to have a tooltip or a pop over you can just take the popover and tooltip from radix and you can add your styles onto it and you can do that however you like it's it's very similar to in terms of styling it's very similar to reach y there are other other libraries that do the same thing rich white does a react area from adobe is doing something similar but with hooks riyaki is doing similar with hooks so that's what we do the difference is uh well i'm not going to say the difference but our focus is that this is part of our product right it's not a side project or it's not it's not just um an experiment we have a dedicated team which is an amazing team shout out to the primitives team benoit and jenna who um are working on this every day you know thinking about apis testing accessibility testing performance um so that's radix radix is the base of your design system or even if you're not building a design system you're just building an e-commerce site and you want a good pop-over or drop-down menu and stitches is a styling solution it's a modern styling solution let me see it's not the goal is not to support iu11 the goal is not to be you know um support legacy browsers it's to think ahead um stitches was designed from the ground up thinking about where is css going i'm not even talking about sas or any other libraries just css because that is evolving a lot and maybe we get to a point that we don't need any layers on top of css css will be good enough stitches is built with that in mind and it's built with other concerns in mind that helps you as a designer or developer build a better api for your design system and you can use them together because one is just a low-level unstyled set of components and the other one is a styling solution so naturally you can take this styling solution and apply it to the unstyled components and you've got a pretty good system going on so if we zoom out a little something that's really interesting to me is the parallels between component libraries and where they've headed and just the front end ecosystem in general and what i mean by that is if you think about how the front end has evolved you have decoupled architecture like you went from monolithic apps to more um you know whether your your ui is in react or view or you know you have your react layer you have your api you have some markup you know jam stack you're decoupling what used to be a very large monolithic application into smaller pieces where there's you know more responsibility over each one of those owners to own their piece and if we think about that even in the component library space too i feel like now i see more and more of headless libraries outside of just the styling solution and i almost feel like all of this comes from a maturity and a growth in the ecosystem of like people getting burnt on one regard and realizing some of the trade-offs and then be like okay like that's why we're going to build it this way like for the decoupled uh front end like you know we know the the benefits of something like a react but then i think people are starting to learn more the benefits of breaking apart the the logic layer of the component and the styling layer of the component because i think people have been maybe burnt or they've just been frustrated with changing between css or sas or css and js and they're seeing the value and having those primitives that can work with whatever styling solution they want and i think that's something that radix does pretty well like do you agree with that trend i feel like i've seen i agree with that trend i think it's a trend that it's the one that keeps on giving right like it happens and then in five years it's gonna happen again and again like right now people are they love jump stack and jump stack is a lot of people say it's something that's already existed technically right like it was the first thing um radix was designed that you can use with css with sas with css modules with tailwind with style components it's better with stitches though but it works with everything um one thing that i'm curious your thoughts on because i don't think a lot of people understand this i don't think i understand it very well so when css and js libraries got popular it was an attractive solution because in my opinion one it allowed you to build design systems easier than you'd ever have before like bundling and distributing css was kind of hard before css and js i think that made that part easier but then i think now in 2021 as we've grown you see people talking about zero runtime css and js libraries and why that's important so maybe for the people who don't understand that could you maybe give like a an idea of why that's important and why having trying to have near zero runtime or as little js as possible is good for your styling solution definitely it's tricky because sometimes there is a new api or there's a new library that does something cool and it gets a lot of traction and then it goes viral it's very hard to undo that um css and js is always going to be one of those things that there will be people who love it and people who hate it i really don't like to pick sites because right now i work on a css and js library um and i really like it i've always liked it but i always i also really like css i'm really happy to just use static css as well what i like about css and js is i like um i like having access to css in javascript when i'm writing already html in javascript being react and i feel like i can access some of the logic of my components and update the styling quite easily otherwise you always have to do the logic in the template add a new class go to css file create that declaration right i feel like it's harder to maintain as the app scales i have the the experience working with css and js that it's easier to scale up especially i'm not just saying that because we're working on stitches but especially with stitches and i can show you why later which is about type safety in css and js it's very it's very easy for you to misspell a variant on a page that forgot password page you misspelled the varia of a button it's confusing you know nobody will see and currently nobody can tell you that you must spell that variant it's just going to be there it's going to be the wrong styles so i think this is the next evolution as well of relying on on js to improve the authoring experience of css the problem though is that when you do run time you are essentially create executing a lot of functions every time your component is rendering so if you have a component that renders a lot you're going to have 100 you're gonna have performance issues there we know that because modules is a design tool and there are a lot of things that you do then we need to re-render the canvas right say you are changing the color you have a color picker and you're dragging that color picker and your color needs to change we're talking like thousands of re-renderings a second you can't do that if you're relying on runtime um css and gs especially with prop interpolation say that you pass a prop and then you you know emotional style components or any other library that relies on prop interpolation will call that function take the prop take the value generate the css add it to your page there's a lot going on so of course one way is to just add um inline style just use the style tag just bypass the whole prop interpolation bypass css and js go old school man just go style yeah so you know um that the problem with the i have with uh with the runtime is that it's it definitely is worth for performance for a lot of people it's not going to be a problem if you're building a portfolio it's not going to be a problem that's fine there are millions of websites built on that and it's it's also fine um but hopefully we can just be aware of the pros and cons and you know and sometimes if you're using a big styling library just to do a one-page site you're probably going to get 17 to 20 kilobytes of of logic to build css and js that you could just write style.css link it to your in your head and that's in that you're done so i think you have to be aware of what are the benefits you get versus what you're trying to do and you have to wait that balance and also if you also need to lower 17 kilobytes for your portfolio and you have like 50 views a month it's probably not a problem as well i'm more on this side you know like i try to not like i try not to over optimize if you people who follow me they know how i am i just don't like over abstracting or you know over engineering all of this stuff just i like to try and be as easy and as simple as possible and just do it when i see that there is a reason to do something yeah you talk you've talked a little bit about under engineering before is that kind of in a in a similar vein to you like trying to not over abstract things or not try to over componentize things i just do that all the time i i think it's just how my brain works i can't think otherwise if i start abstracting things i just lose track and i just don't like it like people that have worked closely with me they they know but i think there is a good side about that which usually when you're abstracting stuff it makes you sometimes might make you feel quite um i don't know quite proud right you create a function that does this and you reduce that into this and it's cool yeah i better in the long run is not a good idea you know and if you just have like a 100 file line and every five is like very easy to read and understand and anybody that joins your team can go and make a change this is all part of maintenance right it's all part of like building a maintainable system so anyway that was a big pivot but i just want to say that and stitches is is it near zero runtime or zero or it's close right i'm not sure exactly it's near zero okay okay and stitch's beta is a bit better than the alpha version nice um the thing is it's still a css and js library and if because you technically have access to change css in your render that's something that you have access to do if you do that if you decide to change the color property based on a prop that your react component receives it will cause runtime cost it has to because you're relying on something that you don't know what it's going to be you cannot you cannot write the css beforehand but stitches could and will be a true zero runtime library with some give and take you know like if you want to be true zero runtime you can't change css based on a prop like you can they probably have to do in a different way maybe you have to exactly use the style tag or maybe just add a new class and then you generate that class like as you would in normal css but that cost that you get is very little and jonathan jonathan neo i don't know if you guys if you have heard of john he was hired about three months ago he joined modules to work on stitches to really work on the beats and version of stitches but jonathan is not just like any developer they he is the dude man like he's like a contributor post css he i think he has like over 500 post css plugins he knows everything about css he knows css inside out um there could be no better person to work on it and so we're working closely and and we've got big visions about how stitches can truly eventually just be even just a static extraction tool where it goes through your app it takes all of the css it will just give you a style of css that you can put in your in your public folder in xjs let's see do you want to do a quick demo show the people show the pitches yeah stitches or radix or whatever whatever man i'm i think stitch is a bit more fun there's more to show but radix is is very powerful maybe you can show radix what you guys have done yeah i can do a demo of stitches let's uh let's start with stitches well uh if you share your screen i'll throw that up on here and then we can talk a little bit about actually how versailles going to be using some of radix which is pretty cool okay cool all right let's do i'll share my screen then so let me know when you can see all right perfect looks great okay let me think uh demos are always tricky right especially when you're still recovering from a virus let me do this let me ask you something how do you feel about we're just talking about how buttons are so complex right should i just i think i'm just going to do a demo of building a button in stitches how about that that'd be perfect all right let's do that i'm just going to install stitches here in in code sandbox i love the code sandbox and as you can see here we've got many versions uh these three here's two in alpha these are all the canary beta releases so we go to the latest one sweet let's remove the css we don't need it we got a better solution coming all right let's do this let's let's start off very simple okay let's import style from stitches and let's just say title equals styled and that's going to be a h1 and we just say color red okay take the title and we put it here okay so i've used some useful components before like it's it's uh it's familiar to me i see what you're working with so far it's like i would say it's like 99 exactly the same as every other styled api that was popularized by style components so emotion will be very similar so far so good right all right cool um but let's go back a step let's just say hello world and i'm just going to create a box because i'm a big fan of creating like box primitives and i'm just going to put a box here and you can't tell any difference because it just says hello world so i just want to add a little bit of space because i feel like everything is a bit tight there so i'm just going to use this special prop that we get given and i'm just going to add some margin because margin is always a good opportunity to add when you are dealing at the layout level so usually we don't really add margins to components but when you're dealing with layout it's a it's a good one to use so i like to use margin i told you it so the first thing that you see is that you get access to this css prop right yeah that's it we got an empty div it's a box we can use box everywhere that we want instead of a div but the beauty of it is that if you just don't know what you don't want like you don't know how you want to name a component but you just know you want to add some color you can just do all that in line okay the difference between that and doing um something inline using this style tag and then here you can also basically do anything that you can do in css so if you want to change the color uh to black on hover then we can change the color right this is what happens so far under the hood i mean a little bit zoom in here a little bit let's take this one stitches gives us a base glass you want to zoom in a little more on dev tools yeah let me know when it's good you're good there yeah give this a space hash um and this um and also gives us this is always going to exist for every time you call like a style component that's the base class for that but then it gives us a little hint here it says okay there's also something else going on and this is some css that means that for a developer when you're debugging i'm going to talk a lot about debugging experience which is not a term that's commonly used but the debugging experience here gives the developers a hint that there's some inline css going on and this is what's happening right there's a margin and there's some color red cool all right we can uh we can remove this this let's just leave 20 a little bit of breathing room that's cool all right now that we got that out of the way we can start with our button i'm gonna try and be quick and i'm just gonna do the most basic button i can think of that still looks half decent so let's do appearance none border none font size 13 pixels line height one ah get out um let's do height 25 pixels and for the radius i want it to look like a pill so we do a very large voter radius that's okay and a little bit of padding left of 10 pixels and a little bit of padding but let's put this button in is the really large pixel value for border radius like doing like 50 where it's like completely rounded or is that interesting so that's more of like a pill value okay this is something i always use and we use it a lot in our design system column also who's a really good css that always i think with 50 you always have a bit of problem depending on the aspect ratio you know whereas this is always the the real value that you would put here would be this the height divided by two but then later if you change the height you have to remember to change this so i'll just put 9999 pixels i'm happy with this nice learn something new every day so anyway so now we just got a button so far so good um and if we look in devtools we just have that one class and this is all our styles okay sweet um all right and here again we can do hover and let's change the background color to what did you say fifty percent will cause ellipses you would yeah yeah i think that's a good i don't even think about that uh all right and we also have here background color of let's go with game cool now when i hover there's a slight change of background color that's nice nice and subtle i like that probably not very accessible but we go with this for now um all right cool so in a base as basic as it gets we've done our button right so far like i was saying oh man button is so complex and all this but doesn't look like it um what happens is i don't want just a grey button actually i want two buttons i want a gray button and i want a purple button so you know what would you do you could do this you could do const purple button extend pattern yeah you can then call the button and then you can say background color um blue violet and then you can take purple button purple button nice yeah this is yeah this is common right a lot of people can do this and now i actually want like a large button right cool i'll take i'll take the button you get the idea and i will just change the font size and the padding and the height and that's going to be a large button what happens when i want a purple button and i want a large button we're going to start having we're gonna get into trouble here when it comes to scaling this button so let's not do this actually let's just change this back to button and instead let's create a variance and we're going to create a value just called variance we use a special key called the variance with an s and we call it variance and i want something called purple and here i want background color blue eyelet and on hover i want background color arc violet so we created the variant we've authored the variance but we haven't applied it yet so how do we apply a variance well we've given it a name it's called and we've given it a value it's called purple so when you start using your component as you start typing you already see i get a variant drop showing up and the moment i open this up you see again showing up we've now got a purple button using variants and i can change this to purple button the autocomplete is game-changing we'll see let me just do one thing let me just now that we've got two buttons let me just make this x uh flex wrap let's wrap this and let's put a gap of 20 pixels another cool thing to highlight too i think is in doing that css prop you didn't have to name that box you don't have to name it container wrapper whatever i was just talking about this earlier today where it's so nice to forget about naming some of those things when all you need to do is just do a flex wrapper exactly this is a perfect use in my opinion for css it's just layout you just want to do this here in this case there's no logic to it that's just what you want to do so that's awesome and we've created a variant called purple we've updated the styles and we've applied it what's happening now what happens is you see the first button just has the base class and the second button has the base class plus a new class and this class is also constructed in a debugging experience with debugging experience in mind meaning you create the hash that we can't read but you give us a hint which is human readable meaning when you're inspecting your your your app you know that this is using a variant purple it's not a surprise that's nice um this is good because also say you have a size size one size two and you're not really sure what size you want to use you can use that tool so just toggle it tug it on and off and you can you can start designing in the browser a little bit just using just because we have hints it's a basic thing but allows people to do this right um cool one thing i find weird though is that i've got a van for purple and i don't have a variant for grey i don't like that so what i'm gonna do i'm just gonna um coat this gray and i'm gonna take um this here i'll put that there here all right and now because i've removed the gray i'm going to do background color transparent so essentially the first three lines is a mini reset let's just say mini reset because i like to have my reset scoped i don't like global resets so as you can see what's happened now is we've got a gray variant and a purple variant but this one looks doesn't look grey because we're not applying it so we solve this by again going variance and when i open this up we get gray and purple cool i want gray and that's cool but i still don't want to have to specify gray here i just still i want my my button to be gray by default but i still want to organize it as a variant because i'm organized we can do that by going here after the variance object and use this special key called default variance and when our we want our variant to be gray so there we have it now the d4 button is gray or you can specifically tell it it's gray or you can make it purple and the purple we can also make just to make it look a little bit nicer let's make color white cool all right so far so good right everything making sense so far yeah absolutely yeah let's do one thing here while we're talking about variance i um and also just to continue with the complexity of buttons there's another thing that i want which is i want a different type of button i want a button that doesn't have a background color it just has an outline so i'm going to create a new variant over here and i'm going to call it outlined with a b and its value is going to be true and this is what we call a boolean variance it's a variant that can just be true or false or true um it's not um you don't have a list of options that you can choose from so we're going to create this boolean there and true and what we're going to do is we know that in this case background color transparent because we don't want any yeah and we want a one pixel ring right so border one pixel solid and i'm gonna leave it without color because by default it's gonna use current color oh no way that's okay we do that um all right let's take the gray button first and let's say outlined um spray outline gray button and now if we start typing we should see outlined here it is outlines okay good it's outlined the outline is black and the reason the outline is black is because that's the default color right and because border one pixel solid inherits current color it means the board is black i don't want that i what i want i want to be able to tell stitches that when my button is gray and outlined do this this is what i want to do yeah it's like the ending of situations that causes the past where you and like you said it it leads to that code duplication right exactly and also it leaves you sometimes with not knowing where each style belongs it's harder to reason about but with this i think we are solving this problem in a really cool way and this api is still kind of work in progress but it's working it's working really well to demo so we have something called compound variance this is an array and here you take a pairing of the variant that we want which is gray and another variant that we want which is outline true and the css we're going to pass in oh wow right this is very declarative we're just saying when it's gray when it's outlined what do i want to do i want to change the border color to light gray there you go as you can see we now have a gray outline right we're going to do the same for purple we want to go here i'm going to say when my button is purple already see the button is not even showing up it's actually there but it's not showing up because by default the color is white so you can't even see it so what we're going to do is uh let's take this out the same here this becomes purple and the border color becomes blue violet oh man and the color becomes uh blue violet as well there you go i have built a complete component library with style components and i had to build the button component and you had to do all these things manually and it was a lot of work and this i think you really crushed it with this api the team behind this because you've done such a good job of simplifying it down to something that i can understand having not worked with this code before and it solves all of these complex use cases yeah i i think it's this this declarative approach and way of organizing and also the type safety all of these things is it's going to make a big difference in how people author css but what's beautiful about this is that it's just normal css it's nearly as if what you would do if you're writing it by hand it's just that you wouldn't write this crazy hash but apart from that if you're following a bam convention or something you basically do something like this anyway let's just quickly finish this up i'll show you a few more things here we're just going to change the color on hover because um when it's outlined we we already changed the color when it's purple so we need to make a few adjustments uh when it's outlined we want the color to be white and the reason we do that is because over here we set it back to blue violet so now and it's cool because everything is it's in this it lives in the same place you see it's like whatever i do here affects my hover i put it right here it's all together it's easy to maintain so there you go we have now four possible buttons with two different two different colors and two different you know appearances or whatever you want to call it this is the outlined one but i don't like using border man it bothers me i want to use box shadow you know i want to be able to do zero zero zero one pixel and then the color i like box shadow it doesn't mess around with my layout yeah the yeah you know right a lot of people don't realize that until you're trying to like change border radiuses like when something's selected and it has a thicker border radius and then your layout is shifting around and people i think a lot of people don't realize then you got to go to the box shadow yeah absolutely but box shadow doesn't give you a short hand well is it a long hand it's a long hand right how does it get confused it's a long hand it's a long hand it doesn't give you a long hand to change the color like border does so who solve that we saw that with something called locally scoped tokens we're going to call this shadow color and we're going to say that it's transparent by default okay we take the shadow color it starts with two dollar signs this is a syntax for a locally scoped token you can think of it very much in the same way as you would as a css custom property okay instead of double double dollar sign easy dollar sign for stitches so what we've done here we've created the box shadow it's we've defined the box shadow config the spread the offsets the blur this is the important thing and we decided the color is transparent so now all we have to do is replace border color here and here with shadow color and now we have it so now we can actually use uh locally scope tokens as a way to update just part of your css this is a cool technique that you can use in css in any language is not specific to stitches what is specific to stitches is the ability to create these properties and use them in a pretty first class approach right um all right so so this is cool so far you're enjoying the demo can we go further all right we can go further we can go a little bit further behind here this is awesome everything we've done so far is just using the styled function from npm we just took styles from stitches react and the thing that's bothering me now is i've got gainsborough light gray blue violet dark violet i've got this all over my button i'm just repeating these colors everywhere and i don't want to do that so we're going to change this we're going to rename this to create css and here we're going to call it and this function is going to give us back a style function but this start function is different this one has access to a beauty built-in fee and in this built-in theme what you can do is you can start creating your tokens your design system tokens your variables whatever you want to call them you can create it here we call it just your default theme so we'll create great 400 and that was gainsborough and grade 500. and that was light gray purple oops 400 violet purple 500 dark violet okay we've just created them we haven't used them but we're going to and we can use them like this where we use previously just a css color value we just start with a dollar sign and this is just a one dollar sign because if you look if you look here for the locally scoped tokens we use two right and for here we use one so we have a theme we have colors this is the scale and this is the tokens so let's go back here we go one dollar sign and there you go grade 400 grade 500 purple so we go with grade 400 and for light gray we want gray 500. oh that's awesome and for blue violets we want purple 400 and i'll hover we want purple 500. you get the idea i'm not going to do white and black because we don't need to yeah this is just a very name we don't need to change that light gray ah this is interesting so this is the compound value for this ring right light gray if i put red you see it becomes red so naturally if you think you can put um gray 400 here nothing happens tell you why nothing happens because based on the scales that we have defined colors space font sizes we are able to use common sense to map the scales to certain css properties and this is heavily inspired by system ui that means that when you want to change the background color we know that 99 of the times 900 of the time you're gonna want something from your color scale so you just go grade 400 it knows it's the color scale right but when you're talking about a token this is just a token right it's too abstract we don't know where you want to get your token from and you can have tokens in multiple scales they have the same name like primary so that's why we have a feature called scale prefix tokens and all you do you put the name of the scale before the name of the token and you can use that anywhere in any property any anywhere inside calc functions color functions whatever you want to do that always works so for variables we're going to be a little bit more specific and we're going to prefix that and okay let's finish this off colors and purple 400 over 400 and that's it we're good all right cool we've now we're now using tokens and if we look again what's happening under the hood your classes you're blocking people's minds by the way people are very excited about this i'm glad i'm glad um it's all the same the classes are all the same but the moment that we picked the start function from create css and we added a theme this is what we get your theme automatically becomes css custom properties right and this is important we will touch base on why this is so powerful in a minute um and from then on it's just references to your um custom properties but in a way that's much easier for you to manage especially but because we have type safety if you put you know it tells you um the the tokens you have available for you and all of these things so the same thing we did here i'm going to show you a few more things now let's add some space and we're just going to use numerical numeric keys for these ones 10 and 20. and so we can do here where we say padding left in padding right we can do dollar sign 1 that's ten and over here where we have gap we can do a dollar sign two and that's 20. you could create that with space if you wanted to right right could you and then do you prefix that if you want with like dollar sign space if you want to be scoped you could but you don't need to because by default the gap property already looks into the space scale oh yeah true yeah and here is the same instead of 20 we can put uh two so now we're back we've done the color but there's one more thing which i think is annoying which is i don't like to go padding left and padding right i just want to do padding x and i want to do padding x of one nice i can't because css doesn't have that property yeah so we're gonna create it we're gonna go here we're gonna use the utils we're gonna create a property called paddingx we receive the config in case we need we receive the value as the value being passed in and we return what we want to return which is padding left of the value and padding rights of the value there we go so now we have adding x we can use tokens you can put any value in and you have enough money too because i've seen other libraries take the approach where they include all of those utilities as part of the framework but there is a an elegance to explicitly defining those and having that api to provide whatever you want because you might want some other kind of weird one that's not supported by default and being able to extend that easily is pretty nice yeah absolutely we don't really ship anything by default there's no default theme there's no default breakpoints there's nothing there's as you saw up until now we're just using the start function directly from the package that's awesome so that's cool right we've got our own property if you don't like if you want to you use like short names like px you can call this px and still works so that's cool that's cool that's cool um i've got two more things i want to show you i think i think people are going to like seeing this i hope and i think it will be interesting to show let's do this one thing we haven't talked about is um how we can deal with some responsive stuff right like um i don't know say that you have a button and above a certain break point you just want that button to be bigger right so we can do this we can create conditions um click on let me rely on autocomplete here just in case and i'm just going to create something called breakpoint 1 which is going to be media in width and i might try 400 pixels because i'm zoomed in i might have to tweak this so we've created a condition and a condition may seem like a bit of a weird word are you have you ever heard that word in css conditions like as an official term not really no so that's coming right this is a this is all css terminology that's coming yeah so that's what i said at the beginning stitches is very future thinking about css um thing that's yeah nice yeah and as well as conditions you get a property called when right when as you can already see we get some completes there bp1 let's just increase the button a little bit let's say font size 15 pixels uh height 35 so that's good let's just increase the height there you go can you see boom nice and can you define those break points globally e yes these are defined like in a way these are global now right oh yeah it's in your it's in your theme okay yeah yeah this is in the theme the moment you put anything here you can access it anywhere in in a style object or in a css prop as well nice okay okay you can also put when blocks inside variants you can say when specifically when the purple is above bp1 do this okay but i don't like putting my break points in here i'm not a fan of putting responsive decisions inside the component what i want to do i just want to give people both options you've got two sizes to choose from this size and this size so very quickly let's do this we create a size variant one two and in one we're gonna say font size height yeah and this is that one and size 2 is this one we can get rid of this it's useful if you need it but there's a better way um and as you can see they all look a bit small now and that's because we've removed these base styles and pay attention that the more we refactor this button the cleaner it gets the less styles we have into this yeah yeah yeah i liked what you talked about with like the mini reset i think that's really really smart yeah and then just to solve that problem i say i just want the default to be one i want the default size to be one so now we're back right we can say default size two if you want but we want one okay but now what we've done we've it seems like a silly thing to do but when you think about we've now exposed the decision of when to use size 1 and when to use size 2 to the consumers of your design system it's not you who is making that decision and you may have people that are using your design system to just build an iphone um and let's say just like a mobile experience and you may have people they're actually building a responsive thing or uh maybe they're building a dashboard they actually want things to be small they never want like modules doesn't really have a lot of breakpoints it's a design tool you know um so you've just now given that ability and that choice to the consumer and that's what we want to do so how do we then um how do we use this so what we can do is um what we're saying we want to do is this we're saying we want a responsive button right let's say responsive purple button that's okay i want a button that starts off big and then it goes small so we know that we can apply variance like this right you look at the responsive button you see that it's growing how do you apply a variant then it's to change based on its condition so it's quite simple i think at least i i believe so the api you just pass an object and you have a prop code initial and that's the prop that you wanted to be first because by default we have size one i'm now setting initial to be two so now you can see it's it's size two uh but when it reaches bp one i wanted to go back to one [Music] so now it's now it's size two and now it's size one size two size one and this is how you can responsibly apply variance rather than author your variants or your components responsibly it's a big difference there that's a that's a very good feature especially when back when you're talking about api designs i think this is going to help a lot of people to build better apis um you like that yeah i do it's funny because i've like the underlying pain point you talked about where you ship your responsive like media queries in the component css i've made that mistake before where then the consumer said actually i want it to break here and i don't want it to break here then you're like well okay now we have to do some kind of like hacky override or css so that's nice and the cool thing is if here you need to change your variants in a very specific or very whatever rule that you need to use to change your variant you can just put it like this as well you can go ah supports say that you want to apply a specific variant if it supports like display grid or something like that you know you can put any valid app rule and then you can apply a variant whenever you want um cool that's cool and the last thing i want to show you i think i promise you this is the last thing is steaming and theming is something that's very difficult to do usually people are now everybody trying to do dark themes and stuff but in general it's a bit tough but with stitches i think we have a nice way to do it so let's take the theme function we get from create css and let's go here and let's create a theme called using new thing not gonna make a dark theme here we just call it a new theme we're gonna override a color scale and what i want for this new theme i just want to update my purples i want the purple 400 to be something else i want the purple 500 to be something else this is the change i want to make so i'm gonna make that i'm gonna make my purples reds okay and i'm gonna take this new theme function that i just got back and i'm going to apply as a class name here okay now everything that was purple became red and that's great and this works because css variables absolutely so you gotta love that this is all it does but it's bit weird to have purple mapping to red so you don't want to do that we need to give people a better api we need to give people the ability to create semantic tokens we do that like this um if you go back to your theme let's just add these oops let's just add these as red to our um draw theme at the top so now you've got colors right various colors they don't have any semantic means and we're going to create semantic tokens we're going to have primary and we want primary to be something in this case and we're going to have primary say we call it primary dark or something i'm just making it up by default everything was purple right i think i made a mistake somewhere let me go and have a look i'm just going to undo all this because at one point i don't know what happens yeah okay perfect click rewind red anymore memory and primary dark nice alright cool so by default everything is purple and we want it to be we still want it to be purple but we want to call it primary so what we're going to do is first we're just going to remove this everything is back to purple and i want to be able to essentially use purple so i could do this right but that just means duplicating our values again and we know we don't want to do that so you can just do it the same way you do it in your styling you can just use the color straight away so primary is now purple 400 the last thing we need to do is when we have a variant called purple it becomes primary purple here memory ah just primary it becomes primary dark um cool very primary this is primary this is primary okay and memory then primary it's nice that you can reference those variables just the locally scoped tokens or whatever you call that just being able to do dollar sign primary that's really yeah exactly and i made a mistake somewhere so let's see what did i do primary here already doing a much better job live coding than i've ever done so i would have failed much uh yeah there's gonna be something here um i'm just gonna move this just in case this theme please know ah okay one second this was uh this is supposed to be when his primary and his outlines let me stink you wanna help me debug this i can try come on let's go let's go from the top uh color and a compound variant yeah because this oh even the first purple is not applying okay that gives us a good hint so primary is set to primary and background color set to primary dark and the color is white ah i think the problem is i'm not actually putting them properly there we go i was still i was still adding a purple variant here but we renamed this to primary oh yeah yeah it's a bit confusing to to look when it's so zoomed in but anyway we got everything primary now we're back on track we now have this semantic name and now the cool thing is uh what we can do in our theme instead of doing something silly like changing purpose to red we can now just reference red in primary you can take a new theme we can add a new theme here there we go nice and that's how you do um theming with stitches that's i mean like you basically explain the entire library in like 40 minutes so that's insanely incredible yeah thanks that's basically it i mean there's more like there's a lot of stuff going on there's there's a low level api that it doesn't actually give you react components it just gives you class names and you can do everything we've just done just using class names that's awesome and so that's that can be for another day well one thing too that might be cool to show we were talking about i mean thank you for that incredible demo of stitches that was awesome you want to pull up that uh calendar that i was mentioning yeah definitely it's really cool so we were talking about how stitches is the styling solution and then um radix gives you those unstyled accessible primitives you want to pop the uh zoom probably like yeah that's good so one really cool thing we've been doing at purcell is we needed a calendar component for a new page we're working on and we were able to utilize the underlying primitives that radix gives you for this calendar component to make a really really nice accessible calendar and this component is actually like very hard to get right because you want on mobile you want it to like pop up from the bottom and you know you want to make sure it works with keyboards it doesn't block the user's input i mean there's a ton of different things to consider here and i was really impressed with how fast the team built this they did an amazing job with this being able to utilize something like radix so really really cool stuff and this is just using css modules i think so it's not it can use whatever styling solution you you want here which is pretty incredible yeah it just looks amazing like this really takes it to a new level you know like it shows the power like when you have these low level components that take care of all this complexity for you then you can literally just focus on this and look how cool this calendar looks absolutely yeah i love it it's amazing and radix is here if anyone it's curious radix ui.com uh it goes to an introduction we basically cover everything i've said and then you can start digging around you know like um [Music] i'll leave a link to those too so people can check them out yeah definitely and the examples that we have in our um documentation is actually using stitches it would be a very similar api if you're using another css in js library but these ones are using stitches and you know this is very some basic examples this is all you would take to do a drop down menu with keyboard accessibility type ahead look up you know like focus trap taking the focus back on the trigger when you close positioning of the box all of this stuff is handled for you that's amazing yeah it's amazing man well thank you for that demo i want to make sure that we have enough time to answer some people's questions in the chat because i know there was a few just scrolling back to really when we started that i was kind of pausing to answer later so maybe i'll just kind of scroll through here try to pick up pick a couple out that we can talk about now i like this one well web on the mobile so will the mobile at the mobile web will ever replace native mobile apps are we close to that singularity what do you think um i don't know i don't know this is more like a pwa thing right like progressive web apps there you build with probably like offline supports and all of these things it's not really something i kind of i don't get i don't have that much experience building that um but i have seen that twitter for web is amazing use that instead of the native app so i'm sure that it's possible yeah one thing i think is interesting here is like the two trade-offs mobile web you're able to deploy faster because deployments to the web is easy you don't have walled gardens of apple or google but then the inverse there is the discoverability piece which is like these mobile app stores even though they have some interesting uh trade-offs with hosting your things there whether that's taking a cut of payments or whatever it might be you get so much discoverability from having those marketplaces so i think there is a huge advantage of that i don't know that it will ever replace it but the better we can get the mobile web and the better that we design mobile web first i think the better off will be for those people who don't want to download apps yeah i agree um can you maybe talk about why stitches instead of something like a styled system or a theme ui the main difference between like you know they all have trade-offs and it's not exactly and also like i like i've been part of this ecosystem for many years the first version of our design system and the first version of modules was built using style system i contributed to start system i've had chats with brent jackson i love it you know it's one of the things that it really changed how we design with tokens and how we deal with tokens so um it's not uh you know when when you say set apart it's really the reason we build our own is because style system relies on a different css and js library style system is a layer on top so it relies on prop interpolation which is the first thing we covered in this chat which is the biggest bottleneck for performance and it relies on a different or you know you have to actually rely on a different css and js so you have double of the dependencies bundle sizes and things happening and stitches is a css and js library it weighs around five kilobytes at the moment with the react api um and you get everything the style style system gives you essentially you can do the same and more but you get a slightly different api because style system has this idea of style props where everything that you do is passing props whereas we don't have that and we thought a lot about whether we do this or not and of course once we use something for a long time and you try to think about the api and now working with type safety props clash very easily with attributes so if you create a prop um you know you say you want to change the color of a box or an input color of an input like color is a valid attribute of an input element then you have a problem because he tried to pass a token and he doesn't know because he expects a number or no right now i don't remember it's been a few years but i raised a lot of issues and um and it works for a lot of people but if you're working with typescript if you're better type safety if you're after something that's a bit more lightweight these are the differences and we do that because we needed it um like i said we started off with those and modules needs to be performance performance as a visual editor you don't want a laggy ui if you look at figma it shows there's a lot of work to make a ui performance and we needed to build something for ourselves that we thought we might as well make it available to to everybody else nice yeah that makes a lot of sense understanding the trade-offs is key there i think yeah um yeah thank you to everybody i appreciate the the comments thanks for for joining in lots of really great comments in here especially all the people joining from the start too who have been hanging out throughout the whole time we really appreciate you all joining in um let's see we got a good question down here at the bottom are create css variables available on every page um yes they are available everywhere and the way that usually works uh because now i did everything in a code sandbox it was just one file right the convention that we suggest you can do whatever you want that is you create a file called stitches.config and that's where you instantiate stitches that's where you go create css set your tokens set your conditions set your youtubes and your theme set your global css everything goes there and then you re-export the styled function from that file the stitches.config file and then you can just import from there everywhere you use it rather than importing from npm it needs to be the same instance that you get back from css because that's what's bound with the tokens hmm that makes sense that makes sense this one is i think this one's over my head because i don't know about the history and evolution but it sounds like stitches has evolved um and how its underlying implementation works can you maybe talk about what that evolution has looked like yes so stitches first of all let me actually say something i forgot and i should have said this at the beginning stitches started off by a side project of christian crystal phony which is a developer of code sandbox right and when he launched it he was like learning in public he was live streaming and i saw it and i thought this is almost exactly what i've always wanted and i got in touch with christian and i started testing i was thinking i was one of the first people to use it and started testing it out blah blah blah i started chatting to him we started changing the api and then this thing happened at modules that we needed a better solution yeah so um we talked to christian and we took over stitches so the initial work was done by christian and the api was quite different there was a few things that didn't exist at this point and one of those things that he had done is that he had implemented it as an atomic generation meaning you still author your css in an object-oriented way but you generate atomic classes right at the end that was good and that was performant but we never really had a true idea of how performing that was because it's hard to benchmark it's something that we're doing right now uh it's really difficult so we're kind of going with like the tech behind it and it was good and it was actually probably much faster than all the other libraries also because we didn't have time like no prop interpolation problem though was it was very hard to debug we had lots of specificity issues of whenever rule was defined once as an atomic rule it's going to live in a certain place in your style sheet you don't know where that's going to be and for these two reasons and also when jonathan joined having so much experience working with css post css plugins we decided to try and see if we could improve uh the debugging experience and performance and bundle size and we've done all of those changes and from the metrics that we have at the moment we've managed to be even faster than before we've reduced the bundle size by about 40 to 50 percent nice and we have a better debugging experience so we know rounds that's all yeah i liked how you showed some of that debugging experience like prefixing whether it was a variant and like being able to toggle the classes in the dev tools just you know outputting to css variables i think all these things are super nice and make that debugging process way easier which is exciting because i know i've i've fought css and js debugging before so it's cool to see that that's kind of a first class solution inside of switches um i have a fun question um completely off topic and random but you moved from london to barcelona right yes i think that's awesome just because i i love both london and barcelona they're two cities i really like and i'm just curious if you had to pick one piece of london whether it was the food or the culture or the architecture and move that to barcelona what would you choose merge your places you've lived man i'll choose my friends man because yeah transport them all any lockdown so it's been a bit tough um and i i grew up in london i'm not from i wasn't born there but i grew up there so all my friends are there and um i think that's what i missed the most man like at the moment we're just here locked down um so if they can come over it'll be great yeah i definitely empathize with that being stuck at home all the time it's been it's been quite the last year that's that's for sure yeah yeah but here we are and to be honest i'm happy here it's a beautiful city uh it's really great uh for our daughter it's i feel like we have a better um quality of life a bit better balance work-life balance we can go to the beach in five minutes uh it's it's the weather is nicer than london it rains a lot yeah um so you know i i think for now we're happy here um never know happy to move again if we need to yeah we got some some love in the chat um that yeah that's really awesome uh oh more people from poland awesome awesome awesome well thank you all for joining so much this has been this has been a lot of fun yeah i like asking the questions just about where you're at where you live in your family too um you have you said you have a daughter too how old is she she's two years and two months right yeah yeah yeah fun times it's cool man because i speak english to her so she's learning to speak english with me and my my uh my partner speaks catalan to her because we live in barcelona the language is catalan right um and now she's starting to speak and she says a few things in english a few things in catalonia and it's it's it's a good phase now i complain a lot though about her on twitter people are not honest enough it's hard oh that's uh so then she'll grow up bilingual that's awesome yeah nice well i know it's getting late for you there so i don't want to i don't want to take up the rest of your night but i really really appreciate you coming on today showing us all the amazing things that you're working on that demo was so good i'm so glad that this will be recorded and put up on youtube so people can watch um it'd be awesome too if you save that code sandbox because i bet people would want to check out with that what you've what you demoed live so i'll put a link to that in the description too but um yeah thanks everybody for joining thanks again for the demo um super fun super fun we should do it again sometime yeah man thank you so much and uh good luck with the videos i'm gonna keep watching them you're doing a great job with the youtube youtube videos the live streams you know the articles amazing man thank you thank you i appreciate that all right well i'll let you i'll let you get going thank you everybody

Channel: Lee Robinson

Views: 10,891

Rating: 5 out of 5

Keywords:

Id: Gw28VgyKGkw

Length: 79min 32sec (4772 seconds)

Published: Mon Feb 22 2021