 Good to go. Awesome. I'm off stage. Bye-bye. Okay, so let's give another round of applause to Michelle for that really energetic talk, you know. I think it was really inspirational and, you know, she does really cool things and everything. You know, she's a hackathon queen. I am none of that. I'm just your average front-end developer and what I'm going to be talking to you about is also very average. The audience that I had in mind was web developers, so if you're not a web developer, it's great because this is a bar, there's free booze, there are free drinks, so you can just entertain yourself for the next 25 minutes and I'll be out of your hair, right? So, if you are a web developer and you have worked on the web before, I'm pretty sure you may have come across a lot of jokes about CSS that can be summarized in memes like these, right? People who work on the web would have heard complaints about CSS, about the cascade, about how CSS is ridiculous, CSS is so hard to manage, CSS is all of those things, but I personally disagree with that notion because I personally love CSS. I love CSS for what it is and what it can do. Now, when I say I work on the web, the web that I'm talking about is the World Wide Web, which was invented by Sir Tim Berners-Lee in 1989. So think about it, the web is less than 30 years old. Now back then, Sir Tim Berners-Lee was working at CERN, that nuclear research agency in Switzerland, and back then there was a problem that CERN had with regards to information access. So being the academician that he was, he wrote a paper, he wrote a 12-page proposal that eventually became what we know as the World Wide Web as a means to solve this problem. So when the web first began, there was no way to do layout. It's like the first image on the left, you just had a block of content because the web was never meant for doing all kinds of creative, design-y things that we see on the web today. No, the web was a way for people to share information, and that is still true today. It's just that the presentation has improved significantly. So this is just a summary of how web layouts has evolved over the years. Now, because the web was never meant to do a lot of the things that we use it for today, a lot of the methods that people used to design web layouts in the past were hacks. So people used things like HTML tables which, by rights, were meant for designing tables. But people realized that, you know, we can hack these HTML tables to create all sorts of more creative ways of presenting content on the web. And then people started to use CSS and use floats to make layouts. But again, floats were not meant for doing layout, and that's why it is so hard for people to get the layouts that they want using floats. And eventually it got so painful that we just seeded all this pain to frameworks. So everybody's website looks like it was built on Bootstrap or some other variant of Bootstrap. So CSS frameworks actually shielded us from a lot of the pain but also made websites look very similar. So what I'm talking about today is a new CSS property called CSS Grid that can potentially change all of that. So alongside Flexbox, which is also a relatively recent addition to CSS, we now have a means of doing layout on the web that we've never had before. And some people have asked the question, like, we already have Flexbox, why do we need Grid? Or is Grid meant to replace Flexbox? Wrong question. The fact is that Grid and Flexbox are meant to be complimentary. They're meant to be used together so that we can build layouts that are truly native to the web. The correct mindset we should be having is Grid and Flexbox because Grid and Flexbox are best friends. They are like kaya and butter. They are like nuts and bolts. They are like Jay-Z and Beyonce. They are good on their own but together they can achieve another level of awesome. So when we use Flexbox and if you are not a web developer, please continue to enjoy the free drinks at the bar. But if you are a web developer and you have to use Flexbox, remember that Flexbox operates on a single dimension. So there is no relationship between the rows and the columns of elements that you lay out using Flexbox. It is like a really long, daisy chain of Flex elements. When it comes to CSS Grid, things are a little bit different because CSS Grid operates on two dimensions. And because of this, CSS Grid and Flexbox can work together really well to achieve the layouts that we want to build. So here is just some basic terminology that I will be referring to throughout the talk. Basically what you have are grid lines that we use to specify exactly where we want our content to go. The spaces between these grid lines are known as grid tracks. So they can be grid rows or they can be grid columns depending on your direction. By default, a single grid item will take up one grid cell and a grid area is merely a collection of grid cells. But the most useful feature of grid, I feel, is the ability to define grid gaps because, again, if you've tried to design a layout with gutters between your grid elements, you would have realized that it's a very tedious endeavor. And if you've never done that before, trust me when I say that it could potentially be a very tedious endeavor. So both Flexbox and Grid operate on a container-child relationship whereby you apply the display property onto the parent and this makes all the children of that parent grid or Flex items. So Rachel Andrew, who worked on the specification for Grid, sums it up very nicely by saying that grid works from the container in whereas all the other layout methods that we've used before start with the item. So we can illustrate this with some examples. So say I have six items, as you can see, and I want to lay them out in a very boring three-column grid. What I would do is that I would have to define a width on each of the elements. So in this case, I'm using inline block and I have to make sure that each of my items are a third of the container. It's almost exactly the same if you use float. You also have to make sure that each item is a third of the container. Now, we can use Flexbox and the syntax is slightly different, but if you look closely, I am still trying to make the flex basis a third of the container so that everything lines up in three columns. For the three techniques that I just illustrated, the grid isn't real. It just looks as if there is a grid because we forced all the items to line up with each other. But with Grid, Grid is the only layout technique that establishes a relationship between the rows and columns. The grid is real. So the way we want to use CSS Grid in our layouts involves two steps. You first define your grid and then you place items in it either by yourself or you can choose to let the browser do it for you. So we'll first talk about some properties that apply onto the grid container and this is what defines the structure and sizing of the different tracks of your grid. So some people have said, some people who have been reluctant to pick up CSS Grid have often mentioned that, oh, CSS Grid, it seems so complicated. There are so many properties. Oh, I'll just use Bootstrap because Bootstrap is the best. Well, I'm here to tell you that you don't have to know all the properties to start using Grid. In fact, you only need to know two properties to start using Grid. And they are grid template columns and grid template rows. So with this, with these two lines, you've essentially created a grid and the code for CSS Grid is as visual as a layout should be because you can see from the code itself that you have three columns and you have two rows. And just to make things a little interesting, we will add a grid gap with just one line of text. Essentially, these three properties can get you started with using CSS Grid. But of course, that is not all that CSS Grid can do. So this is one of the suggestions that I have for everybody here tonight is that why don't we see control of your designs to the browsers that are supposed to render them? I mean, we've come from a time where we've always tried to micromanage every single pixel on the page. We've always tried to make everything fit exactly the way we want only to find that our designs are broken when it's viewed on a different viewport because nowadays, people use the web in all different kinds of contexts. I could be using a phone which is about 480 pixels wide. I could be viewing it on a... I don't know how much that is, a 70-inch television screen. So we do not control how our designs are being viewed. So why not see control of the designs to the browsers that render them? So what CSS Grid introduces are a number of new units and a number of new functions that allow us to see control of the sizing of your grid to the browser. And one of them is this thing called an FR unit which represents a fraction of free space in the grid container. So what it does is that after all the space has been allocated to the fixed units, for example, in here I'm using 150, the remaining space will be distributed according to the ratio that you define. In this case, item B and item C are sized in a ratio of 1 is to 2. So in a sense, if I'm viewing this particular piece of code on a phone or on a big screen, I don't actually know how big item B or C will be. I only know that they will be displayed in the ratio of 1 is to 2. And what we can achieve with such, and the type of effect we can achieve is something like this in the video. You can see here I'm actually asking the browser to give me repeated patterns of columns in the ratio of 3 is to 2. And because I'm using an FR unit, every single column will fill up the width of the entire viewport because I've told it to do that. Now, another function that CSS Grid defines is something called the minmax function which lets us do something that we've never been able to do before on the web that is to define a range of values. So now I can actually tell the browser that I want my column to be between the width of X and Y and the browser will figure out exactly what that width should be, not me. So here, you can also use a repeat function because let's say you're having a grid that is very complicated. Maybe it has, I don't know, 25 columns. We're not going to sit around and type 25 values into the grid template columns property. We can use the repeat function which allows us to repeat patterns of tracks. So in this particular case, I'm asking the browser to repeat the pattern of 75 pixels and 120 pixels four times. And that's why I have eight columns. And other than explicitly stating how many times I want a pattern to repeat, I can actually let the browser do that for me because at the end of the day, the browser is a piece of software and software can do math better than you. I don't care what you think. So rather than waste precious brain cells on doing calculations that the browser can do for you, just let the browser do the math. Come on, guys. So what we have is the keywords of autofit and autofill which allow the browser to determine how many tracks they need to create depending on the track size that you have told it. So the only difference between autofill and autofit is that autofit collapses empty tracks so we can see how this actually works. So in this example, I have a function that is supposed to repeat the pattern of 2.5 m columns, but if I have more space than 2.5 m, the browser is free to make the columns larger. So now that I'm using autofill, I only have six grid items and they've filled up the six columns accordingly, but there's more space to the right. The browser actually respects the fact that the space is there, but if I change this value to autofit, it will collapse the empty columns and fill up the remaining space instead. That's the only difference. And you can use this for a variety of designs if you so choose. So what this allows us to do is it allows us to create responsive grids without the need for media queries because in the past, when I used to work for an agency, I'd have designers give me designs for a standard grid layout. Maybe it could be for products, it could be more for images. You know, a standard grid of images or, you know, cart patterns are really popular and they would tell me, can you collapse it from four columns to three columns to two to one? I'm like, no, no, you cannot do that because before we had CSS grid, we could not do that without a slew of media queries. And personally, I don't like writing a thousand and one media queries, so I just look at my designer and say, hell no, I'm not doing that. But now, with only two lines, two lines of CSS, I literally can let my design go from five columns to four columns to three to two to one without writing a single media query by using the functions that I mentioned earlier of min max of repeat of autofill. And this is a big reason why I think CSS grid has the potential to revolutionize web design because it makes creating interesting layouts a lot easier. So another part of building layouts on the web involves aligning items. And aligning items can be very tricky because the properties sometimes tend to confuse people. So just a word of warning, you might get confused with what I'm going to say in this next section. So there are six properties that you can use to align stuff in your layout, and often people get mixed up with like, what does justify do? What does align do? What does content mean? What are items? So for me personally, the way I remember is that I've been justifying text in Microsoft Word since I was this tall, right? So if justify is for the direction that text flows, it goes, it's logically speaking, the other direction must be aligned. So we've got direction set. The next three values of content, self and items will make sense once you understand exactly what they do. So with justify or align content, what you can do is you can align all your columns and rows if there's extra space in the container. So you can use values like start, center or end to sort of distribute all your rows or columns. But you can also distribute the space between your grid tracks using values like space around or maybe space between. So this table will sum up essentially what you can potentially do with this. But just remember that content is for shifting entire blocks within its container. Now, justify and align self are self-alignment properties. So you use these to align the content within each grid item. And similarly, you use the values of start, center and end. And because my slide is cut off, you probably can't see, but item C is aligned to the end. The default value is stretch. So if you have a grid cell, by default if you don't do anything to it, the content is just going to fill up the entire grid cell. Justify and align items simply affects every single item in your grid. So think of it as a block setting. So for anybody who is confused by all this, trust me when I say that it gets easier with experience. So earlier I mentioned that grid and flex box play really well together, and this is an example of that in real life. So the image on the left is a very old school design from the Bauhaus school. And this particular design can be duplicated on the web. And what is striking about this design is those thick black borders you see. And the way that we can actually achieve such a design, because if you look closely, you'll notice that each grid cell contains a different type of content and they're aligned differently. And in order to make sure that everything is semantic, meaning none of this is an image other than the pictures themselves, the text is all text. You can highlight the text. And in order to achieve such an effect, grid alone is not sufficient. Because if you use yourself alignment properties on each grid item, the moment you try to align them, when you apply a border on the grid item, it will simply take up the width or height of the content. So this kind of screws up the design. This is not what I want. I want my borders to be along my grid lines. So in order to do that, we actually keep each grid item as it is and apply a display flex to each grid item, making them a flex container. So it's a nested effect. And with this nested effect, I can keep my thick black borders while still adjusting the content within each grid cell. Remember, awesome together. Now, the next thing we want to talk about is properties on the grid item, which allows us to position grid items in the grid. Think of it like you're placing pieces on a chess board, right? So you can actually place items based on the grid lines, which have a numerical index starting from 1, or you can also actually name your lines. And there's no limit to how many names you can give your lines. And this is useful because if you have a really complicated grid, you're not going to spend time counting which grid line you want to hit. You want to actually name your grid lines in a way that makes it easy for you to target them. So in this case, if I want content to go into the big main area, I could use the numerical values of 2 slash 3, but I could also use the named lines of content start and content end. So what you can do is you can apply these numerical values or names to the grid column or grid row properties. So in this example, you can see that everything by default takes up one grid cell. But of course, you don't have to have them. You can actually make them span multiple grid cells. And you can do things, because of this, you can actually do things like overlap. So you can also place items in your grid by naming the areas that they're supposed to go. So if you look at the code here, you have something called grid template areas, which essentially mirror what you see in your actual design. The code looks exactly like how it would appear on your design. And this makes it a lot more visual and easy to understand if you're writing CSS grid code. So when you use grid areas, what you can do is you can set where you want your grid item to be and just forget about it. So if you want to say you want to work a different design, you don't actually have to go into each individual grid item and change their sizing. What you can do is that you can directly just manipulate the grid template areas to sort of change how you want your items to be positioned. And this, I find, is a really convenient solution to a very common use case. So one of the things that we can achieve with CSS grid is vertical white space, which was something we couldn't do before. And using the grid areas property, we can do that. For example, here, I'm just going to skip forward so you can see the end result. The code is such that at each viewport width, I don't actually change the sizing of my grid item. I merely change the grid structure at each viewport. And you can also do overlap, like I mentioned before. And because overlap is something that we don't see often on the web because it's tricky. If you use something like absolute positioning, you have to do a lot of math to make sure everything fits just right. And you can't guarantee that when you change the viewport size, things will look the same. So grid actually helps in this regard. And when you start building using grid, you'll realize that pencil and paper is your best friend. With that, you can plan your grid beforehand and you can sort of figure out which tracks need to be flexible, which need to be fixed, and so on and so forth. And then you can actually layer on styles accordingly because, understandably, grid is not supported in every browser. So some people are going to ask, what about the old browsers? What about browsers that don't support grid? Well, if you don't remember anything about what I say today, please remember this, that websites do not need to look the same in every browser because the web is a dynamic medium. It is the only medium that allows you to present a different design depending on what context your user is viewing your design. And I think that is the coolest part about designing for the web because you actually don't design one static design. Your design can morph depending on where you view it on, whether you view it on a phone or whether you view it on a 70-inch television screen. So the end result of this is something like that, that you can see how the design changes across different viewport sizes, across different heights. And this is totally possible because of CSS Grid, something that we could never do before. So in order to support older browsers, we use something called feature queries, which use the syntax at supports. Basically what happens is that if a browser supports the value inside the parentheses, it will pick up the properties inside the block. But if it doesn't, the entire block is ignored, which makes it really easy to write fallback styles. And support for feature queries is really good. Even if IE doesn't support it now, you know that IE is going to be deprecated eventually. And it's something that you can work around because every single browser out there does support feature queries. So I want to wrap up by saying that CSS isn't a programming language. It requires a different mental model around it. So when you think of CSS, think of water, think of how water flows. And even though you cannot directly control the flow of rushing water, you can shape it to your benefit. So when you encounter CSS, shape it and just engage the flow, embrace the cascade, and see where it can take you. Thank you very much. Thank you, thank you, thank you, thank you. Am I on? Awesome, thank you. Thank you, Weijing. So it's really important...