React Advanced

React Advanced Conference 2022

Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️

Hi, I'm Ankita. Have you ever wondered what it takes to build a lightning fast website? Well, I'm going to show you in this presentation. My topic is build a lightning fast site with Next.js, GraphQL, and Tailwind. Hi again, I'm Ankita. I have been working in the industry for more than a decade now. I've scaled and architected many apps with millions of clients, and I'm currently a creator with over 10,000 students online. It's extremely important to pick the right tools for the job, because without that, how do we even build a performance site? So you do need the right tools, just like this SpongeBob image here. And with Next.js, GraphQL, and Tailwind, it is honestly a really power combo, because it will really help you to build a performance site. So first, very quickly, what is Next.js? It is a React framework for production. It gives you a lot of tooling out of the box, so you don't have to build a lot from scratch, such as routing and performance. Everything is Next.js is something that thinks about it from the get-go. Let's look at the rendering techniques in Next.js. And this is why, this is one of the biggest reasons why Next.js does add a lot of performance, and it helps with a lot of performance in general. So this is a very simple web image, for example, and you can see there are three different rendering techniques, such as static site regeneration, incremental site regeneration, and server-side rendering. All these specific techniques have different ways you can cache data. For example, in static, if your site is completely static, you can cache all that data at build time, and it will be available for you. Whereas in ISR, which is incremental site regeneration, you can say after how long you want the data to be cached, and in server-side rendering, you are requesting that data over and over again. It's also really good for SEO, because the HTML is also going to be available for you right before. So when the bot is crawling your site, it is going to rack higher because of that as well. So in the first image, we are caching the three countries, but not Mexico. In incremental site regeneration, we do want a dynamic requirement for Mexico. And lastly, in server-side rendering, all the pages and all the country pages are being re-rendered. All right, so performance with Next.js. These are very cool and extremely important for you to check it out. I find that a lot of developers don't do that, so definitely check this out for really building a lightning-fast site. So for example, dynamic imports. In this case, we have a model here, right? And in the model case, we are using a dynamic import, so you can only choose to load the model when it's actually needed. When it's not needed, don't load it. Second is deferring non-essential scripts. Next.js gives a script component to us, and you can see that over here, I'm only loading ConvertKit, which is something that I use for my newsletter. And I'm only loading it after the page is fully loaded, using after interactive property. It's a React component, right? It looks like a React component, so it makes it really easy for us, because why should I wait for my newsletter script to load when my entire site is ready to go? Second, third is Next.js image component. You might have heard about image component in general. It gives you a lot of performance benefits out of the box. It does not shift your layout, so it does give you a better lighthouse score, but also improves performance as well. At the same time, AVF and WebP is also supported and built in, so you can get fast performance images right away. Server-side rendering and caching as well. Again, another feature that not a lot of developers take advantage of, so I really ask you to check it out, which is the cache control header that allows you to say that, hey, only cache the specific content of the page for two hours. 7,200 seconds is two hours, and after two hours, the page will continue to be served, for example, for a grace period of 60 seconds, as I mentioned here, while it's still, while revalidate prop, and the next user will get fresh data. So this is, again, extremely important. We are adding performance to a already performed framework, so imagine how fast our site is going to be. GraphQL. We all love GraphQL. You only get the data that you ask for on top. I'm only asking for hero name height. I'm only going to get that at the bottom. So that is really performing on its own, because you don't have a really huge object that you're downloading every time. With GraphQL performance, you get persistent queries, so you can persist your queries. You can use Apollo Client to basically cache your data. You can use in-memory cache with Apollo Client and cache the data on your browser, along with storing it on the CDN as well. So you do get really added benefits, too. And again, don't ask for data that you don't need it, so it gives you performance, too. Apollo Client does do the heavy lifting for you, like I mentioned already. So it is extremely important to use Apollo Client with it, too. And you might be wondering what the API might look like. Well, we all love hooks, so there you go. So you can see that you get a use query hook with Apollo Client, and it gives you the three states, loading error and data automatically, so you don't have to worry about, you know, recoding that in every component, because it already gives you out of the box. And it stores all that data in a cache in your Apollo Client in-memory cache. So you don't have to refetch, for example, navigation that's used for in every page. Lastly, Tailwind. Tailwind is one of my favorites. You think of it like a giant box of Lego. You throw it all on the floor, and you build it out from scratch, and you discard what you don't need. And that's exactly what Tailwind is. It's an API for your design system. When CSS can get complex, so Tailwind makes it easier. Why Tailwind? Well, semantic class names are harder to maintain. You get a design system out of the box, and it makes you a better CSS developer. I can assure you that after I rebuilt my entire site with Tailwind, I personally found a huge difference in my productivity, because I wasn't switching back and forth. And when we're talking about performance, we're also just talking about the build system as well, not just what the users see, because that also adds to our overall developer productivity. So you get these different utility classes that helps you work with the constraints of the system. And instead of entering your style sheets with different style names and whatnot, you can basically use what's in the design system. For example, with in this case. Again, you can use a VS Code plugin as well, and it will give populate all the different colors for you. And this is what the design system for Tailwind might look like. And you get performance. It's really hard to get a performance build of less, more than 10 KB in with Tailwind. And small practices do lead to better overall performance as well. And this is why let's talk about very quickly what the future looks like. Well, our future is we do want to make UI development really easy and faster. React server components with suspense. You can load your components on the server, which is huge for us. Tailwind is supporting majority of CSS styles, which is really awesome. So you don't have to think CSS as being complex. You can use utility classes and you can scale very easily as well. Well, this is pretty much the end. If you have any questions, comments, feedback, please tweet me at Kulkarni Ankita 9 as well. And lastly, if you're looking to grow into a leader or you're a developer and want to take your career further, then I have a course coming as well that will help you grow from a developer to a leader. You can check out this link and this handy barcode as well. All right, you did it. Thank you so much for listening and congrats on listening to this presentation and I hope you have a wonderful day or night. All right, thank you. ♪♪♪


Ankita Kulkarni

React Summit

React Summit 2022

Build a Design System with React and Tailwind CSS

Hello everyone, I am Shruti Balasa, a Tech Educator from India. Unfortunately, I could not travel down to meet you all in person, but I am still really thankful to be able to talk to all of you on this huge virtual stage. I am going to be talking about design systems today and how you can build one using React and Tailwind CSS. Any talk that has the word system in it has to be boring, right? But sorry, I won't make it boring for you. Here's a quick overview of what we'll be covering. Why design system? What a design system is? What is Tailwind CSS? How Tailwind helps with design system? Advanced Tailwind configuration? React components with Tailwind? And finally, some component libraries for inspiration. Whether you already have a design system in place or hearing about this term for the very first time, I can assure you that you will take back something valuable in the next 20 minutes. I always start from the basics. So let's ask the first question. Why design system? You have listened to so many talks since morning and surely design systems have popped up a lot. It's high time you implement a good design system in place. So what exactly is this design system? It's not just some style guide or some component library. Ideally, a design system includes at least these four things. Design language, design kit, component library, and documentation. Design language is the tiniest set of details that make up the whole of your front end, like your brand colors, the type of fonts you use, including font sizes, font weights, and then spacing between elements, rounded corners, sharp corners, and so on. Design kit is the set of assets or graphic files the designer gives you. It can have icons, symbols, templates, mockups, and so on. Component libraries, I'm sure you know what this is. It's a set of reusable components like headers, buttons, form elements, cards, and hundreds of small building blocks. Finally, documentation brings together all these parts with references to each of them and lists the do's and don'ts. For the next 15 minutes or so, we will focus on these two parts of the design system, most important to us as developers. Now enters Tailwind CSS. Of course, you've heard of it, maybe used it too, and some of you love it. Some of you might even hate it. But for those of you who don't know what Tailwind CSS does, here's a quick two minutes intro. Tailwind CSS is a low-level CSS framework that gives you the building blocks to style your web pages without having to leave your HTML file. No context switching. Tailwind has hundreds of utility classes like these, text-white, text-center, where text-white will set the color of your text to white and text-center will center it. Then something like this, bg-blue-200 will add a light blue background. Tailwind has about 220 shades by default that you can use. Here's just a sample. Tailwind has 22 main colors with 10 shades each, where 50 suffix is the lightest shade and 900 is the darkest. Next, the h20 that you see here is one of the fixed-height utility classes. There are about 40 such classes, h1, h2, and so on. These are some samples from the documentation, and the documentation is amazing, by the way. You will find anything you're looking for within seconds. Then something like this, h20, w20, both of them about 80 pixels width and height, then rounded-full. So there's no need to use border, radius 50%. You can simply set rounded-full. That's another great utility class. And this is one of the most amazing things in Tailwind. Look at that. By default, it's a square, but after md breakpoint, that is for screens larger than md breakpoint, which is medium breakpoint, you can add a border radius rounded-full. Right? So you can specify any utility class using these breakpoints to change styles and without using any media queries as such. Much lesser code. And here's another thing. Dark mode. It knows these dark variants by default, text gray 800, that is it's a dark gray color, and in dark mode, it's text white. We saw classes for text color, background color, border radius, and heights. The same way, Tailwind has utility classes for almost every single CSS property with most commonly used values. Using these default utility classes, you can build even the most complex layouts like this one and not have to write a single CSS rule. You don't have to invent class names and you don't have to constantly switch between HTML and CSS files. All right. Now let's get to the crux. So how exactly does Tailwind CSS help build a design system? For that, let me close my slides and let's look at some real code. This is a React project I've created using create React app. I've installed Tailwind CSS following the documentation. It's pretty straightforward. I have also removed the default content from app.js and added just a heading here, paragraph, and a link, and just some utility classes here. Now this is what we have in the browser to begin with. Great. Now here is our main file, the Tailwind configuration file, which is generated when you install Tailwind following the steps I just mentioned. This is the default configuration for a React app. If you want to use Tailwind as it is with all the default styles out of the box, you don't need to make any changes to this file. But to build a design system, this is your most important file. Assume you're given a style guide, something like this by your designer. I've taken this from Pinterest. It's just a really simple example. Let's say we have these base colors, red, green, and dark blue, and there are darker shades below. Also, we have black and two gray shades. Now let's add these into our config file. Within theme block, add colors because we don't want to be using the default Tailwind colors. We want to add the ones given to us by our designer. You can either say red or you can say primary, secondary, however you want to name them. I'll simply say red and use that value, which is hash FF357B. And similarly, you can add green with the value given, which is hash 27EFDE. The moment you add these colors, instead of BG blue 100, you can do something like BG red, and that gives you a background red color. Similarly, you can do BG green, you can also do something like text red, border red, and so on. Basically, you can use these colors anywhere you want. But we had two shades of red, right? A darker one and two shades of green as well. To include two shades, you can also do something like say dark red, but that's not what we want. Let's use the object syntax to include that right here. Let's say the default red is this value, and dark red is whatever is the dark value there. Let me just paste it. And then you can do the same thing for green as well. Now let's try and include these in our app.js. H1 class name, let's say text red. See the moment I start typing text hyphen R, you can already see the auto-completion here. This is by the plugin Tailwind CSS IntelliSense, which is really amazing. The moment you change your configuration values, the auto-completion automatically happens. So now let's say text red and let's see if that works. Yes, so that is working. Now you can continue to add those dark blue, black, and green and so on. Did you notice that now we have only this red and green colors? We don't have the blue 100, 200, and all the other 220 shades in Tailwind. But let's say you want some of those Tailwind colors, you can include them. You need to first import colors like this, require Tailwind CSS slash colors. And then you can use, let's say you need indigo color. You can say colors.indigo and then you can use, you can say bg indigo 50, 100 and so on. But since we are creating a design system, we wouldn't want to do something like that. We want the colors given to us, but we might surely need white. So let's just add that here. So this is about colors. Next most important set of properties in design system is font styles. Let's customize font family first. Font family and the default font family used by Tailwind is sans. That is, it applies font sans to the whole of HTML. So anything you change here will automatically get applied. Let's say you want to use the open sans font and then the fallback like this, you can use the array to mention. So now when you say font sans, you will be seeing open sans. Let's say you want to add another font. You can call it heading. And when you say font heading, we would want maybe Playfair display and the fallback being serif. Let's try this out. Let's use this on our H1 by saying font heading. You can already see that here. And yes, we have the serif font. Once again, the default font family sans, whatever was there in Tailwind is gone. This is OK for font family. Now text size, let's say, you know, there are so many text sizes that Tailwind offers, like you can see text XS being extra small, SM, Base, LG, XL and so on up to text 9XL. Let's say you want to keep all of these, but also include another text size, something like text double XS. Now to do that, if we add something like font size, sorry, font size here within theme, the available ones get overridden. Since we don't want that, remove it from theme and instead add it in the extend block. So whatever is available by default still remains and it's extended with these additional values. So let's say you want 0.6 rem. All right. So can you observe what exactly we're doing here right now? We are adding all the design tokens of our design language into the single config file. So this file is essentially our design language that we spoke about initially. Why is this important? Of course we can create components and react, which we will in a minute, but components don't cover a hundred percent of the design. It might cover even up to 70%, but the rest will still have elements with styles that you will have to write. And those can easily become inconsistent with the rest of the page. With Tailwind, you can enforce the colors, font sizes, font weights, border radius, box shadows, padding, margin, breakpoints, and everything you can imagine. So the developer will only use the options available in the config file and maybe add new ones right here and then use them. In my opinion, this is the biggest benefit of using Tailwind CSS for your design system. I just showed you how to customize colors, font family, and font size. In the similar way, if you would like to customize the entire configuration available in Tailwind, you can refer to the default configuration. To get that file, let me open a new terminal tab and let me do npx tailwind-css-init using the full option. Now let me give it a different name because we already have the tailwind.config.js. Let's call it tailwind-full.config.js because I just want to use this as a reference file. And here we have it. There. Can you see within theme, we have screens, which is essentially your breakpoints. So you can copy this if you'd like to modify, paste it here, and then add an excess breakpoint here, like 480 pixels. I usually do that. Remember that you cannot extend screens and add breakpoints. It'll just mess up. Usually for screens, the breakpoints, it's best to copy everything and edit here. You'll have to add all of the ones you need. You can also add 3XL and so on. And then we have colors we just saw within theme. We have columns, we have spacing. I would like to keep all of this because whenever you do H8 and P11, it adds padding 2.75 rems. If you do W8, it'll add 2 rem. So we might need most of this, and this is anyway not a part of design system. You can additionally add 100, 120, whatever you need. Animation, you can customize this. Aspect ratio, background image, opacity, brightness, and so on and so on and so on. I would ideally retain 75% of the stuff, but change only things like colors, all the typography related classes, box shadows, border radius, opacity, and things like that. So let me close this up. Let's make our heading actually look like a heading by adding text 4XL and font bold. This makes it look like a heading. Now do you notice every time we need a heading, we will want it to be bold maybe. We will need a particular size for H1, maybe text 3XL for H2 and so on. We'll definitely need font heading and we'll need a color as well. Usually this is consistent throughout your website, but adding all these four utility classes every time is too much. Also creating a heading component might be an overkill. In such cases, you have two options. One is you can extract all of these and you can put them in your index.css file within layer base and say H1 and using the apply directive, you can apply all of these and now this works. But this will become a second file. I want everything to be in my config file itself. So let me remove this. Let's not do it like this. Instead, let's add the base styles in the config file itself using plugin for which let's import a plugin, const plugin. And now within the plugin array, let's call the function and pass an anonymous function within which takes an object and we can deconstruct it into multiple helper methods. The helper method we need right now is add base because we want to add the base styles. I'll also need something like theme, which I'll tell you what it is in a moment. Within this, call the add base helper function and then specify the elements that you'd like to style. So for H1, let's add a font family. Here you need to use the CSS and JS syntax. And here I would want this particular value here, which is specified in the theme. So whenever you want to access a value in theme, you can use this theme function. So theme font family dot sans. So that will give me this value here. Let's also add font size. Sorry, font size. That would be theme font size dot for Excel and also a font weight theme font weight dot bold. And now here, let me add only the color. Yeah, we can add that also in the config file, but I'm just showing you that both can be combined. That is, you get all these styles plus the additional utility classes that you add here. And great. Now any H1 we add in the page will have those three base styles. So once again, we have everything in the config file itself. So awesome. This is about everything with respect to the configuration so that our design language is taken care of. The last thing we're going to do now is create one reusable component with Tailwind. So you get a basic idea for creating your own component library. The second part in the design system that we said we'll talk about. So first for that, let me add some. Sorry, I'll close this also. I'll close this as well. Let me add some styles to this button to this link to make it look like a button. Let's say we need some margin top. We need some inline. We need this to be inline block and then some background BG red on hover. This needs to be BG red dark. Then on focus, this needs to be BG red dark, then some, then the color text white and then padding horizontal padding PX4 vertical padding PY2. Of course, this is a lot. You wouldn't want to add this every time you create a link, which is why we are going to create a button link component. To save time, I've already created this right here. So here's a button link component with href class name and children. We can directly use this here, replace this with button link and yeah, it's imported as well. Sorry. Yeah. Let's check. Of course, we have the same thing right here. Let's also add some rounded corners, maybe rounded MD. Great. We're using this component, but we don't want to specify class names like this right here. So what we will do is if you can observe, there are some general styles here that all the buttons might need, like inline block and rounded MD, but there are some specific utility classes like BG red, hover, focus styles, all of these. This we might want to keep changing, like we need, we might need a green button or dark blue buttons like we saw in the style guide. And then these padding might vary based on the size of the button. So what I'll do right now is create a classes object with some base styles, then some styles related to color and then some classes related to size. And here I will take inline block from here and also rounded MD and add that here. Inline block, rounded MD, then I will add the BG red and all of this into color and then into size I will add these. MD2, I would like to retain it here itself. All right. And now let's combine all of these using the class names NPM package. Let me import it first. Import class names from class names. And yeah, here I'd like to use class names. This also gives us the same thing, but we'd like to customize the size and color as attributes. So what we'll do is we'll add them as props here. But before that, let's create options. Red and this would be red. And then similarly, let's have a green button. Similar to that, let's also change the size to give some options like SM. That would be BX2, BY1, maybe a smaller padding and then maybe MD. That would be BX4, BY2, then LG, BX6 and then BY3. And here let's say size and then color. Let's add the default, sorry, yeah, let's give a default of MD size and a default of say green. And here now this would be color and then size because each one is now an object. Okay, this should work by default. We should have a green color and a medium sized button and perfect. We have that. We can customize this now using size equals, let's say LG and then color, sorry, color is red. Perfect. We have a slightly large button with red color. Of course, you can extend this further. This was the most simplest example. You can use prop types. You can use enums and make all of this more robust. This is really just a very basic example. All right, so that's it. Building a design system takes a lot of dedication, but if it's done well, it's easier to use and maintain it as well because a design system keeps growing with new components too. I found some React and Tailwind CSS open source libraries that I'd like to share here. So, we have a Tailwind, Tailwind, WCAG UI, Windmill React UI, and Kimia UI. These are some good examples. Each of them have implemented in slightly different way. You can take a look and take some ideas from there and build your own design system. Well, that's a wrap. Thank you for listening. I really hope you took back something useful from the session. I'll be happy to answer if you have any questions at all. I'm not a React expert, but Tailwind, yes, I'll do my best to answer. Signing off. Bye-bye. Thank you.


Shruti Balasa

How to achieve layout composition in React

♪♪ ♪♪ Hello, React Summit, and welcome to my talk on how to achieve layout composition in React. My name is Travis Wathmeyer, and you can find me at Twitter, at Travis Wathmeyer, all in camel case, or on my blog at non-traditional.dev. Now, a little bit about myself. I work for Plex, which is an online streaming platform that allows you to stream both your video from your personal media, as well as video on demand that we curate for you. And we're hiring, of course, Plex.tv slash careers. I'm also the creator and maintainer of Bedrock Layout Primitives. It's a layout library designed to make your React apps easier to layout on the web. And that's the point of this talk. How do we achieve layout composition? How do we use React's composition model in our web layouts? Let's look at this hero layout. This is probably something all of us have made some time in our career. Now, a naive way to approach this is to approach this at the component level. We have a hero container. We have a hero top, left, right, and so on. And this is the way we're taught to write our CSS, from the top down, with an exception-based approach. Now, this, unfortunately, gets really hard to scale across our applications. So we start reusing our components. Now, we can have CSS methodologies that assist us, but they only get us so far. They help us manage our stat sheets at scale, but when we approach each component, and specifically the layout of each component as something unique, we're missing a fantastic opportunity for layout reuse. So what if I told you CSS layout could be componentized? What if we created some layout primitives? For example, what if we had a stack component that stacked things on top of each other? An inline that put things in line with spaces in between. A split component that split things from just the left and the right-hand side, evenly across the parent's width. What if we had a cover component that covered an area and vertically centered the children inside? And a frame component that took things like media or images or any of its children and forced it into an aspect ratio? Now, these individually can only do one unique thing each, but when we put them together, we can achieve that same hero layout. We can have an inline, a couple stacks, a cover, frame, split. Through careful composition, we've now achieved that hero layout. But that's not all. We can put it in our JSX like this and just use the React composition. And then we can go ahead and use that in our other components, such as a sign-up form, a blog post feed, a feature page. All of these can use those same exact components, those same exact layouts, but just composed in different ways to achieve their individual layouts. And that's exactly what the Bedrock layout primitive library is designed to do. It's the low dash of web layouts. We can then take... And if you want to find out more, it's at bedrocklayout.dev. But let's take, for example, just a simple stack component. We probably all have something like this where we need to put some consistent spacing on top of other items. Well, using just one of the layout components from Bedrock, the stack, for example, we can achieve this subscribe component. Now, another common pattern is we need to do things kind of like the way our paragraph works on the web, where as we run out of room, our words will automatically wrap to the next row according to the justification that we set. So that's where the inline cluster component comes in handy. We can have things inline, but as we run out of room, it will automatically wrap according to the justification. And here's what that looks like in code. We have our menu component that obviously composes that right-hand side inside of it, and we just use an inline cluster to put all of our navigation items in a row, and then they will cluster once the width doesn't allow it to all stay on one single row. So what about something much more complicated like a card lineup? This seems pretty simple at first, but there's some gotchas to this. Each one of these cards needs to take up the full height of the row that it's in, but the image and headings for all the cards need to line up, but the description, no matter how big or small, needs to still be vertically centered inside each of these cards. Now, besides that, all the images need to maintain an aspect ratio, and the images need to be cut off to maintain that aspect ratio. And then finally, each of these cards needs to be in a responsive grid. They need to maintain a minimum column width, and if they can't maintain that column width and keep them all in the same row, we need to start wrapping and adjusting the columns accordingly. So in the code, we could write our card component using a cover, which allows us to specify the top and the bottom. In this case, the top is an H3, and the bottom is using a frame component to force the aspect ratio to be at a 16 by 9. And then we have our description, which will be vertically centered inside that cover. And then we're setting that height to be 100%, so that way it will always be the full height of the row that it's in. And then we will use all these cards inside of a grid, and we can set the minimum item width to 40 CH, so that way the columns will be as wide as they possibly can to get everything inside. But if they can't fit them all in, and without having at least a 40 CH column, it will then start wrapping and optimize that. Now that's all the time I have for you today. You can check out more at bedrock-layout.dev, or you can go to my course over at newline.co, where I teach you more about composing layouts in React. Thank you for your time, and I hope you have a great rest of your conference. ♪♪♪


Travis Waith-Mair

React Finland

React Finland 2021

Rethinking CSS - Introducing Stylex

Naman Goel

JSNation Live

JSNation Live 2021

CSS Can Do That Too

Hello everyone, this is the first time I'm participating in JS Nation and I hope you've all had a great time so far. I believe it's the third day so plenty of amazing talks already, hang in there, almost done. Now JS Nation is the biggest JavaScript conference in the cloud, so naturally I'm going to be talking about CSS. Specifically things that we used to need JavaScript for but can now be simplified using CSS alone. So a quick introduction, my name is Hui Jing, I'm fairly simple enough that these emojis right here paint a pretty comprehensive picture of who I am as a human being. I happen to be Chinese and if you're unfamiliar with Chinese names, our family names come first and the first name comes after. So Hui Jing is me, I'm currently a front end developer at Shopify. Day job, important, have to pay the bills. So this is going to be a rather short 20 minute talk so I don't expect people to instantly pick up everything that I'm trying to cover here. Think of this as more of a, oh that's nice, I've learned new information today kind of thing. So if you ever come meet a use case where these solutions work for you then you can take your time to go and understand them at a deeper level at your own time. So let's start off with responsive topography. Now when I say this, some of you might think I have a weird mindset but to me the web is fun because you cannot control the environment in which your audience views your creations. So it's kind of like you built something but you're not sure how other people are going to see it. That's what makes it exciting. But for textual content on the web there is still a key concern regardless of what type of design or whatever you're doing is the legibility and readability of your textual content. So web typography has always been a focus for many people and there have been a number of techniques that have been developed over the years and as newer CSS properties become available a lot of these techniques have been continually refined. So let's do this in the browser. Demo time. The first option we have is just straight up media queries and even though it seems fairly basic you can also look at it as this is the most flexible option even today because you have really granular control over the size of which you want your text to change at whatever viewports that you specify. So like in this example here I've arbitrarily put in like 42 and 54 as the break points but it's really very customizable. So let's do this DevTools thing. So as the viewport changes you can see you can get your text to change alongside it and just having a very basic series of media queries you can be very granular. I can see how people feel that this might get a bit tedious if there are like many different viewports you want to take care of. So the second option that I'm showing here which is calc, a combination of calc and viewport units. This technique was created by Mike Rithmuller I believe back in 2015. It has a couple of names I think. Some people call it CSS locks. You might have seen it covered in other articles. Basically this technique allows your font sizes to grow and shrink with the viewport width. So hence the viewport units here and if I'll show you, you can see that it's kind of a gradual grow and shrink but then it doesn't at this point it stops shrinking. Somewhere along this point it stops growing. So that's why again it's a combination of media queries, calc and viewport units because there's a cap on the maximum and minimum sizes but anything between that the font size will scale smoothly. I guess that's why they call CSS locks because you're locking the minimum and the maximum size. So for a really in-depth explanation of this exact formula, it eventually if you look at it you're like wait a minute wait a minute 48 minus 24 I could do that mathematically but this formula kind of matches up with your minimum and maximum view font sizes. So there is a very in-depth explanation. I'm not going to go into it here because there's not enough time so highly suggest you read Mike's article which I've linked at the end of the presentation. So what we have most recently is we've had a slew of math functions that have been supported in the major browsers already and among them we have the clamp function which allows us to pick a value within a range that's between a defined minimum and maximum value. So this kind of sounds familiar right like it's almost what I described for Mike's CSS locks option. So this is how the function looks like it takes in three parameters. There's the first one which is the minimum value. The last one is the maximum value. So what you have right in between here is what we refer to as the preferred value and this function is useful if the preferred value is dependent on something you don't control directly. For example, viewport units. So if you want your font to grow and shrink but not get too tiny or not get too large that's exactly what the clamp function is doing. So it's similar to option two albeit a much more simplified syntax. Now one thing to take note of when using viewport units or limiting text sizes with math functions is that it may, not 100% but it may result in users being unable to scale text to 200% of its original size and that's a WCAG failure. So it's definitely essential to test with zoom. When I say zoom I mean like this. Just to make sure you're not failing any. Accessibility test. So for browser support for the math functions looks really good. Basically it's about like I don't know 91% of you know broad support. So give it a try if you have this particular use case. Okay let's move on. Talking about scroll snapping. The CSS for scroll snapping has been around for a while but the specification had gone through a number of modifications and the properties have kind of changed somewhat from the first iteration. Now today the main properties are scroll snap type for the container and scroll snap align for the child element. So let's take a look at this again live demo. So for scroll snap type which is applied onto the container you can set a value of mandatory or proximity and this determines how strictly the browser will snap to a snap point. So here I snapped it to mandatory. So the browser will always snap to a snap point which in the sense I'm not sure if the mic is catching up catching the sound but like I'm only clicking once and it's like flying to the next item. It works for a keyboard too so my keyboard might be a bit louder so you might be able to hear this better. And you can do this scroll snapping on the x axis or also the y axis. So if I want to do a y axis I'll just modify this a little bit and there we go. You can do it vertically as well. So this is mandatory but if I change it to proximity you'll see that it's a much looser snapping. So if you can't hear I'm just gonna tap tap tap tap tap snap tap tap tap tap snap tap tap tap snap. So it's kind of up to the browser I believe the exact point where the snapping occurs but it seems that it kind of kicks in when we stop scrolling within a couple hundred pixels of the snap point. So you have these kind of a more flexible option for scroll snapping. But if this is the type of interaction that you want to design you don't really have to use a JavaScript library anymore because I know there are a number of scroll snapping libraries out there. So as for support it's even better than the math functions coming in at almost 94%. And even IE is kind of supported albeit with the old syntax so maybe your mileage might vary but you know if you need something like this instead of reaching for a JavaScript based solution maybe you know give this native CSS solution a chance. Next up we have sticky elements. Now this is a pattern that I encounter very often these days and I do still remember the days I'm not dating myself but I remember the days before position sticky was widely supported and we needed to use JavaScript because we needed to calculate the position of the element we need to figure out where it needed to be and then kind of needed to fix it there but then there are all sorts of problems because you know things overlapped. It was all very expensive and tiring to be honest. Right now today we have oh very very good support. If we just were kind of ignore that IE column right there support for position sticky you know all over the place already. The main issue with position sticky these days I see when people try to use it is kind of like why doesn't it work? Why is it not sticking? And I figured out that most of the times due to some gaps in the understanding of how position sticky works. So let me try to explain this. A sticky position box is like a hybrid between a relatively positioned box and a fixed position box. So a relatively positioned box goes with the flow you know scroll scroll scroll it goes along. Fixed position box just stays there like tick. So for position sticky to work it's not okay so here I have a styled sticky box this green green box right here is my sticky candidate. It's not enough to just put position sticky on it and call it a day. You've got to have a offset value. Offset value being either top bottom left right because this sticky element will be treated as relatively positioned until it crosses a threshold for the container within its for the container within it. This is so hard. Within the container it's scrolling in so there has to be this point where it sticks to so if you don't define this offset value it's just not going to stick you know. So then the as I scroll so right now I set it to top 1M just to make it obvious. Like I could change it to zero for people who like there's a gap. So change it to zero so it'll stick nicely. So we stuck at that threshold point until it hits the opposite edge of its containing block. So we can also change this to bottom and then I'll stick to bottom scroll scroll scroll stick. Also works in left right and let's not make it flexible. Change this to left right. Oh hey it's not really working. Interesting. Right. Okay. It was so I just showed you a very common bug like why didn't it work for left right. It's easier for me to show using the vertical example because of it's just because of the size. So let's do this height and going to make it like 800 and then so just so that you can see the height. Let's give it a border. Righto. 2 maybe. Okay so there's like this black border right. And I made it 800 because like this wrapper is the parent of of my boxes right here. And so I clearly have more content than 800. So now if I want to do like the top. It doesn't look like it's sticking at all. Right. Let's try 1000. The reason why it's not sticking it's not that it's not sticking per se. Let's see if I can explain this correctly. If your sticky element has already reached the edge of the containing block it might not appear to be sticky at all. It's just that it's the containing block that's being scrolled away. So I'm just going to switch this back to 800 where it appears there's no sticking involved. It's kind of like there's nothing to really stick to because before it can reach the edge the containing block has really gone away. So it becomes more obvious when when the container is larger that oh yeah there is some sticking going on. So this is one of the tricky things I think people encounter when they're using sticky for the very first time. My suggestion is you don't take the time to really understand and figure out how it works. It's great if you can just try out these these values on your own and dev tools maybe. I also wrote about positioning in my blog before and I've linked to several articles by different authors that explain sticky in their own way. This is because I think everyone like grocks this and understands this slightly differently. So if what I said today doesn't make sense to you try a different explanation until you find the one that sticks. That's just my advice. Okay okay running out of time. Last thing I want to talk about masonry layout. Now this was originally a JavaScript layout created by David Assandro back in 2009. It was all the rage back then. Tumblr uses it. Pinterest uses it. I think some people call this the Pinterest layout so good job Pinterest I guess. But given its popularity among web designers and developers this layout method was discussed quite a bit within DCS's working group meetings. And so we have an editor's draft of grid level 3 that specifies how masonry can be done natively in the browser with just CSS. Demo time. So but like before CSS masonry because it's really not very widely supported right now. Let's see. Yeah it's only implemented in Firefox behind the flags. You got to switch that flag on to be able to see it or even play with my demo right now. So let's say you don't have CSS masonry. We can do something pretty close with the multi column layout. It's just that multi column has a couple of limitations. Its implementation is also a bit inconsistent across browsers at the moment. In fact. So I would say that multi column is more suited for inline content like lines of text as opposed to like discrete boxes that I'm doing here. I say there's inconsistencies because like my break inside is not working here. But if I open this in say Chrome. Never mind. It's so multi call when we use it. It's a how should we put this. It flows you know in the block direction and then multi columns spins back up. So the your content is actually flowing top to bottom and then left to right. So if order matters to you I've numbered these boxes so you can see your maybe the first couple of things in your grid are important but you don't want them at the bottom. You can't really control this with multi column. And what else you could if you want to like span your item across columns you can kind of can do that with multi call. But like as I said implementation for multi column isn't very complete in browsers. So what right now all you have is like all and it kind of looks like this. The breaking it looks weirdish. A bit buggy so let's just say multi call is a third of the way there for masonry. So with CSS masonry you can do both directions the x axis and the y axis because CSS masonry builds on top of the browser's grid capabilities and its syntax is pretty similar to how we would use subgrid which is part of grid level 2. The value of masonry is applied either to the grid template rows property or the grid template columns property depending on the direction that you want to go. For this horizontal direction here my row heights are defined with template rows here. I put this repeat thing because I'm lazy and then you can you know leave the columns free to be masoned. So essentially the columns are not lined up as per a normal grid but you know they're masonry whatever the verb is. So you can definitely do span much better. So because this is like horizontal I'm using grid row for this span 2 span 3 looks kind of nice things flow together. If you want to do the opposite direction you see columns and rows are flipped so now my rows are the ones that are being masoned. And one of the great things about grid and flexbox is the alignment property so naturally CSS masonry also has masonry related alignment properties and they use the same value as the other box alignment properties. So nothing especially new to figure out. So for this vertical masonry layout that I have here let's do something like this. Let's say my container really really long let's go for 150 viewport heights so you know long container. You can use the tracks alignment property so we have align tracks and justify tracks again depending on the direction you want to go align tracks is for the block direction I can you know kind of push them down push them up push them in the center so these alignment properties also work if you want to use masonry layout and of course you can also do the spanning thing except that this time you would use column because the direction changed. It's grid plus plus right so currently the working group is looking for feedback on the implementation it's very very early days I'm sure there are bugs in this Firefox implementation as well so lots of aspects to consider before it's production ready. So if you're using Firefox this feature is behind a flag so you can try it out for yourself go back to my slides this is the end of it man. As a self-proclaimed CSS lover I must say that the thing that draws me to CSS is that there's no one right way to do things it's flexible enough to adapt to a variety of situations can't touch the markup don't worry probably a combination of CSS properties that can fix the problem so there are really a lot of exciting developments in CSS which gives us more tools with which to style the web so I'm just hoping that you know the next time any one of these use cases come up for you instead of going for a JavaScript based solution you could try the CSS one instead so these are the resources I'll share these slides with everyone there's a link at the footer thank you thank you very much for listening to the CSS talk at the Vegas JavaScript Conference in the cloud.


Chen Hui Jing

#css