Transcript

Jen Simmons

This is The Web Ahead, a weekly conversation about changing technologies and the future of the web. I am Jen Simmons, your host, and this is Episode 114. Let me first thank our sponsors today, An Event Apart, and Squarespace. I'll talk more about them later in the show. Today, I have a returning guest. She's been on the show twice before, but is back finally to talk about some of the stuff that I am most excited about — the stuff that I am most excited about in the entire Internet — Rachel Andrew. Hello Rachel.

Rachel Andrew

Hello. It's good to be back and it's just like a regular thing now.

Jen

Yeah. You were on the show, The Everyday Developer in August 2015. Which feels the month before the last, but actually that was a while ago now.

Rachel

Yeah.

Jen

That was a very popular show.

Rachel

Yes, yeah I got lots of really nice feedback. That was fun. It was a fun conversation.

Jen

We talked about like, "Hey we are all working for whatever… Uber… evil empire." Then you were on the show in February 2013, which is three years ago — which seems insane, that was so long ago — talking about CSS layouts. Which is what we're going to talk about today.

Rachel

Yes, to see how things have moved on since that.

Jen

I mean if people are interested, they could go back and listen, although a lot of that… I think the big picture stuff is right on, probably still very accurate, but if there were any technical details, all the technical details have evolved.

Rachel

[00:02:00]I think this will be a nice follow up. It's quite interesting, because I've been presenting about layout for a few years now. When I look back over my slide decks, they're becoming a kind of history of the development of some of this stuff, which is quite cool like that. Many people of the future will be mining are older slide decks for information about this baffling world that existed…

Jen

Right. Why is it like this? This way?… You are on the conference speaker to our circuit quite a lot.

Rachel

Yeah.

Jen

As am I. And it's great when we get to go to the same conference. We're going to be in Nashville together next month.

Rachel

Yes, yeah, not long now. In fact and I'm actually leaving at the UK on Monday and heading to Montreal for ConFoo, and yes at the end of that trip I actually end up in Nashville, and I'm also going to Fluent in San Fransisco. Yes, it seems like it's very near. It's not actually that near Nashville it's just that I've got always… I'm actually leaving the house in preparation to go there very soon.

Jen

Yeah, I'm locking myself into my house panicking, because my presentation's not assembled yet, and I have another show before that. I really love speaking, especially once I feel the talk is done, but the part where I'm trying to put all the ideas I've had for months, and all the sort of scraps of paper that are floating around into a finished, concise, polished thing, I just panic. It's the worst part. If this was the whole job, I wouldn't do it. This is the part that I find scary, anyway. Turn this into a stroll about psychology. No, so you're going to be on stage in Nashville. You're going to walk upstage and I'm going to walk right on after you.

Rachel

Yeah, and I'm going to terrify them with well over one hundred slides of code, and then you can inspire them with what they could do with that.

Jen

[00:04:00] Yeah, yeah. Anyway. So let's talk about layouts. People have probably heard everything is about the change. Somewhere there's a sentence in my life… It's in one of my descriptions or it's in something that somebody wrote about something that I was working on, that said This is probably a bigger change than when we went from tables to CSS, going from floats which is mostly what we've been using. Some people use inline block or table, inline table, CSS table, whatever it is, table display, display: table, but this we're going to really switch to real tools for layout, CSS Grid, Flexbox, Shapes, Clip-path. I mean there's a whole range of things, some of which are small and very graphic design oriented, and some of which are systems for laying out the entire page. We're not going the tools that we've been using for the last ten or fifteen years. I guess it's ten, yeah thirteen years. We're going to use this new set of tools and everything is going to be completely different.

Rachel

I think it is a big change, because we're actually moving to stuff which has been designed to do this. What perhaps people don't quite realize, is that the tools that we're currently using for layout were never designed for doing this sort of full page layout that we do on the web. So essentially everything that we do is a hack, which is why everything that we do is so hard, because we're kind of using things. There's a really simple example. The fact that you can float two things, left and right, you get two columns, and yet there's no way to tell our left column to be as tall as the right column. The background of it would just sit behind the content. That's because those things haven't really got any relationship to each other. They're just sort of there on the page. You've done something, you're kind of making a layout, but they don't have any relationship. And that's what makes everything so difficult.

Jen Simmons

[00:06:00] I mean floats, I think it's 1995 or 1994… I think that idea was, Hey you're just going to have text all in a column, and well CSS wasn't invented until the 2000s, or it wasn't usable until the 2000s, but it feels like when float showed up, whoever… The idea was, Hey you're just going to have all your text in a single column. But, hey you might have a photo that's sort of small, like the picture of the author, and you're putting it up at the top, like a newspaper column, an editorial or something, and you want to just float the picture off to the side, and have the text wrap around that picture. That's what the flow is for. And floats are cool. We're going to keep using them for that use case, but then we said we don't want the text to be in a column, we want this thing to be on the left and this thing to be on the right. We want this whole sidebar of stuff and we want this over here and that over there. We're sort of floating everything on the entire period. But than you've got to clear everything, you've got to fix everything and it's just like a bog mess…

Rachel

It's all a hack. And you're right, when this stuff was designed, everybody had these kind of small screens, where you could have your text in one column, because you'd have to design for a screen that was 800 pixels wide, and there was no mobile design. We weren't worried about that. So we were designing these fixed-width things or things that were fluid, but that was fluid, because some people had screens that were 1024 pixels wide, so you could scale between the two, but yeah, one column… Float your images up to the top, that's fine.

Jen

For anyone who wasn't there, it's honestly almost like every website was designed for a phone screen, and there were no bigger screens, like and it was "mobile everything".

Rachel

[00:08:00] We were all imagining this sort of glorious future when people would have these giant screens and we would be able to do more things, because people would have these giant screens, but of course the future turned out quite different. We ended up with this enormous range of things to cope with. And these early tools that we've had just don't cope. That's what makes it hard. We're hacking around something that was never designed to do layout.

Jen

We both — we've talked about this a million times: This is why we have frameworks that do layout for us. This is why we have 960 Grid, we have Bootstrap, or I should say the layout portion of Bootstrap, or the layout portion of Foundation. This is why in some ways we needed those tools to make the pain go away, kind of outsource the pain to a third party tool.

Rachel

Yes, absolutely. I think if you're working in a team, you don't want everybody coming up with their own special way of dealing with any particular layouts. Like it's going to look like an awful mess. It's kind of easier to go and say, We're using this framework. This is how it does it the grid, this is how we use those classes and it will work.

Jen

This is to limit the chaos. This is our limitation. Everyone has to use this system, so that we don't end up with a mess.

Rachel

Absolutely. Even on your own, if you build something and you don't have any kind of decisions about exactly how you're going to do that stuff, you can end up with several different methods of laying things out, that can end up a little bit confusing, they line up slightly differently, because you use inline block here, and that respects white space, and so this has got to have gaps in. And it just all degrades over time, as you add things. These frameworks have a real use in managing that chaos. And everyone doesn't have to understand the maths to do responsive design for example. There's a lot of stuff that you have to know to get all of this to work well at the moment.

Jen Simmons

[00:12:00] Yeah. And I think it's… There are all kinds of ways in which teams organize themselves, and those are helpful from style guides to some sort of way to organize an object-oriented CSS system. I think those are good, especially if you have a big team, but I feel like the way we've been using layout frameworks is even more heavy-handed than that, in that it doesn't just set up a way to organize things in a way that for instance have designed a grid system, a visual design of a grid. It enforces a way of writing the technology, and it limits what's actually possible with the technology, because it kind of gets rid of most of what you could do, and just says we're only going to do these certain things. We don't do that with anything else, like I was thinking, we don't really do that with typography. Even if you come up with a typography system, and you're doing it based on sort of a ratio maths, you've got a vertical rhythm going, even if you're using tools, you are still sort of hand-crafting your own typography. You pick the fonts that you want to use. You pick the color of the type that you want to use. You craft a brand, and you express that in your typography. Or maybe you've got colors, and backgrounds, and drop shadows, and rounded corners — or a decision to not use those things. So the visual styling of elements on the page, even if you use tools to help you organize that, you're still creating your own individual, crafted, branded style, and you're writing that, you're expressing that with CSS. So you use the background property, you use the rounded corner property. But it feels like with layouts, we've constrained ourselves in a certain way, where people aren't designing the layout. They're simply grabbing one off of the shelf, and using it. So a 12 column grid… Yeah, they break the page or the column or the space into three. They break the space into four. So they have a row of boxes, or they were group of row of boxes. Where they have this holy grail layout with a side bar… So it feels like we've really, not just limited the way we organize our CSS, but the way that we design. And that's what I hope we'd break out of. That's what I hope we'd stop doing.

Rachel

[00:14:00] Yeah I think that is happening, and it's funny actually. I sometimes see at sites, I think, Oh that looks like Bootstrap. And I look at the code and that's not Bootstrap, but they've made it look like Bootstrap, because these kind of design ideas are becoming so prevalent, because the number of people who are basing their stuff on Bootstrap or on Foudation or whatever, that actually those that look has, I guess become to define, it's become the style of the moment. That's what websites look like, because people aren't, as perhaps they were a few years ago, people should design the browser and everything, which is great, but I think a few years ago, people were designing in Photoshop, and then we'd think, Well how do I build this thing? Can I build this thing? Whereas now it seems that people are maybe starting that framework, and it's like, "Oh, well, the framework has this media object. It looks like this. This is how video looks. This is how images are formatted." Immediately, instead of thinking what kind of creative design can I come up with, you're just thinking, Well, what is this tool? Give me. And then, How can I tweak it to make it look a bit different. But they never look that different at, because they're so fixed. That's maybe a problem. I'm a business person. I'm all for getting the stuff up there, getting the stuff out, getting the content out in a reasonable format and not spending forever fiddling around with it, but you kind of miss those brilliance of the bits of design, and those sites that look like, "Wow, how did they do that?" And we'd seem to not see that as much now.

Jen

I think it's because of the complexity with understanding responsive design, because there's different trends. There's a lot that we've been learning, we've been busy wrapping our heads around unimportant things. So I have no regrets about the past. I just feel like, as we start to look to the future, and we start to go through this transition, where are we going to head. And I hope that where people really head is, Hey we've got tools that make this much easier now. You don't need to reach for Bootstrap or Foundation, you don't need to go get yourself a third party framework to write the layout for you. You can just write your own layout in CSS. It's not that hard. The same way you write your own typography code, you write your own visual styling code. Just write your own layout code. And what we've been seeing instead, or on the side is like all these… I just made Bootstrap in Flexbox. Look at my twelve-column Flexbox framework. And I worry — and you do too — that people will simply get rid of the float-based framework tools, and replace them with Flexbox and Grid. [And still do the same boring designs.]

Rachel

[00:16:00] I think this is, because these new systems have such a different way of thinking about stuff. I think that the initial thing that everyone tries to do is to replicate what they have in the new thing. So we're certainly seeing that Flexbox. I've seen a little bit with Grid as people have started to play with Grid. That they ask me questions, and the questions come from a point of trying to replicate their favorite twelve column thing with Grid layout, rather than just look at Grid layout and say, "Well what is this? How does it work?" Their immediate question is, How do I kind of replicate that the classes and things that I've got, that make this other thing work. I think that is just, because the nature of these new things is they are so different. They're so different to what's come before that everyone just asks, Well how do I map this to something that I understand? Because that's what we do. We're like, "Well I understand this thing. I know how this works. I've put a lot of time into learning how… the Bootstrap framework or whatever it, how these things work. So how do I map this onto this." And maybe that's just where you start. But I've been trying to talk a bit about the fact that this new stuff is a new system. And it's a different way of looking at things. It's a way that can't be fully described in CSS, a way that we haven't it before.

Jen

[00:18:00] Like Grid, for example, I think Grid there is… So one of the classic layouts that we all use a lot is you've got maybe a page that has… It's your employee page that's about a page for your company and you've got sixty employees, and there's a photo of each person, and their names are under each photo. In some narrow screens it's one photo across — either a row of one photo across so it's just one long column, and then get it a little bit wider and you get two photos across, and then wider, three photos, four photos, five photos across. So there's a long grid that kind of wraps. There's a way to do that in Flexbox, it's a little bit better. Flexbox has some limitations, but then with the Grid, (and I feel like I'm still barely understand Grid's [full power]) — what if instead those photos are all the same size as each other. Let's say it's not people. Let's say it's pictures of food and some of the photos a square and some are landscape shaded and some are portrait shaped and some are big and some are small. So, Grid would make just big rows out of those. It can rearrange the order and get them to fill in so that if you have one big square and then next to it you have a small rectangle and next to it there's a space for another small square, but the next thing in the row is like a big wide rectangle, so it grabs the square that's actually the big wide rectangle and puts it before it and sticks it in the gap, and then almost something you wouldn't be able to do without Javascript.

Rachel

[00:20:00] Yeah I mean there's a whole bunch of… Grid Layout is this enormous spec and it solves a whole bunch of interesting problems like that, which is why I've been so trying to put together examples of those kind of individual problems, because I think anyone coming to the Grid layout spec is like, "Whoa there it is and it keeps going. The basics of Grid layout are very simple. And I'm sure we'll link up some of my examples so that you can have a look but so, the basics of creating a Grid, of putting things on the Grid are really straightforward. In ten minutes you'll have that. And then you start on things like this auto-placement and stuff, that you're talking about, where by default Grid will lay things for you. If you take a bunch of stuff say a list with a bunch of items in it, and you have declared a Grid on the parent element, so perhaps the URL, if you don't position anything, Grid will just lay them out on the grid. It will just pop each thing into a cell, essentially on a grid. And it will create extra rows, if it needs it to put them in and things. But there's also, there's a whole set of rules of what happens if you position some of those items, or you've given some of those items rules that means they can span two cells and you can set it to sort of densely packed, so it will pick things up and take them out of source order, and stick them into holes on the grid, which obviously, is terrifying. I mean there's a whole bunch of stuff like that which once you get into it, is incredibly clever and potentially so useful for the sort of stuff that we tend to… And the stuff for which at the moment you have to use Javascript.

Jen

What's another example of something that you couldn't do before without… That you can do now with Grid, but you couldn't do before without using some kind of crazy Javascript?

Rachel

[00:26:00] Off the top of my head, what's a sort of good example of that? I mean a lot of it is really to do with the fact that things sort of have a relationship. We have that a bit in Flexbox, as well, and I think that seeing these two things as a sort of a pair as a layout system rather than totally different is useful. And one of the very cool things is the new fraction unit in grid layout, which lets you sort of assign space to columns without needing to do any sort of crazy maths to work out how big things should be in proportion to each other. And that works similarly to how in Flexbox the flexgrow value works. And I think that sort of stuff it's quite subtle. It's not like a big wow moment. But it's that stuff that's really useful to people. It's what we're all doing when we have to working out how to make one column be twice the size of another, and that sort of thing. And the fact that you can also have sets of columns, you can have some that are absolute widths, so you can say I want this column to be 200px, but I want the other columns to share the rest of the space equally or to share it in proportion. And that sort of stuff we can't easily do at the moment and we can do that with Grid. And that's going to make a real difference to just the sort of fine tuning of design.

Jen

So explain how is a fraction unit different than percents. We're used to thinking about, Here is the width of my page. I've got some gutters on each side, margins on each side, but the useful space is in the middle. I'm going to make something, three across, or two across. I want this thing to be fifty percent and there's space left and I'm going to take that space and divide it into three and give each of what's left three. And then you go back at your margins, but basically we're doing all that math in percents. How is using a fraction unit different than using a percent, when you're imagining breaking up the with of a space.

Rachel

[00:28:00] Well partly, because, as I said, this issue have been able to stick fixed width items or absolute width items into the mix with other things, this is basically your holy grail layout. It's how a new flexible center any fixed width sidebars, which is always incredibly difficult to do. That's really straightforward, because the fraction unit deals with the available space, after things like fixed width columns have been dealt with, and so just like that flexgrow does

Jen

It's a fraction of what's left?

Rachel

Yeah. It's a fraction of what's available. So if you have 80px in width and then you say, Well, I want this first column to be 200px, well then what you've got left is 600px. And if you've got three columns then, if they're all set to one faction unit where they'll all get one part of the available space, that'll be equal with columns, or you could say, Well I want this first one to have 2fr, so we'd get twice as much as the other individual columns. That's quite flexible, and it doesn't involve any sort of weird calculations and it will still work responsively, because you don't really have to worry about, Oh well I've got two things, so they each need to have 45% each when I've got this gap between them. You don't have those kind of things you have to worry about as you sort of work in a responsive design, you can just say well this one should be twice as big as the other one.

Jen

And you can use decimals as well, so you could say, I want this to be one. I want this to be 1.4, or I want this to be 1.8, I want this to be 2.2.

Rachel

It works pretty much like if you wrapped your head around flexgrow in Flexbox, it works pretty much in the same in way, or in a very similar way to that sort of distribution of available space.

Jen

[00:30:00] Yet it seems like, because we're sort used to breaking it up and thinking in percentages, so if you want this, you want… Especially if you're interested in doing something like Mark Barton has been talking about forever which is, instead of breaking things up into even amounts, even numbers of columns, 12-columns, break into three four six, but saying I wanna do this based on the golden ratio, so I want this to be one I want this to 1.4 or whatever it is, then you have to divide them all, like, "Okay, this is going to be 18.66% and this is going to be 25.39% and this is going to be…" And then you apply that to CSS, but it seems like in this situation, there's a level of abstraction there, that you just on have to deal with, you just say I want this to be whole, I want this to be two parts of the whole…

Rachel

Yet it's really nice that ability to say, well I've got this thing which doesn't need to be a fixed size or some sort of absolute size, whatever it is and not have to worry about, then well how on earth do I calculate that. We can do a bit of that with things like calc.

Jen

Yeah with calc.

Rachel

[00:32:00] And in CSS we can kind of get a bit of that kind of ability with floats and so on, but it's so nice just to be able to play with that. I think that's a lot of… There are some real kind of good tricks in Grid, and things that will be useful for certain use cases, but I think that what will make the biggest difference, just to the everyday is this fact that simple things are actually really simple, and I think once you make the kind of jump to how good works… There is a jump. There's a sort of… When I've been teaching this to people in person, there's kind of a point at which they just get it. And then they're like, "Oh this is really simple." It's just that jump from thinking about things the way we currently think about them to thinking about things in this new way and you have to kind of make that transition in your mind. And at that point you realize, Oh actually all of these simple things are now really simple. And there are complex things in grid and there are a whole set of new rules to understand but you can do an awful lot of things without touching that stuff and a lot of the basic layouts that we want to create are now just incredibly easy to do.

Jen

That's what seems exciting. And it's also what seems a bit hard about… When you see people starting to say, I'm going to make a Bootstrap framework using CSS Grid instead of using floats. It's like "no, no!" Because there's this super complicated crazy thing with floats and then something like Bootstrap makes it much simpler, but then Grid is so much simpler than Bootstrap, that actually making a Bootstrap version of Grid is making Grid way more complicated than it needs to be. Plus it doesn't actually change the mental model, like the big thing is that you've got to change your mental model, and if you don't change… You can take the old mental model and… Onto the new technology or else you're actually missing out on what the new technology does.

Rachel

I think that's dangerous. People just miss out on all the cool stuff that is possible to do. So really in terms of what we have as sort of the new sort of major layout stuff is we've got the Grid layout. We've got Flexbox and they're kind of pulled together by another module called the Box Alignment module. The sort of best way to look at that is if you think of all the cool alignment stuff in Flexbox, it's like that at sort of extracted output into a separate module, because that means then that both Flexbox and Grid and other layout methods can all you use the same way of doing alignment.

Jen

And so that's the like justify-self, align-content…

Rachel

Yes all the content distribution stuff, all the alignment values, so things like flexstart, flexend and start-* an end-* and all those kind of things and all the justification. All that stuff that's in Flexbox is pretty much works in Grid.

Jen

And the same words are being used?

Rachel

[00:34:00] A lot of the same words are being used. You actually do have some flex-specific stuff, but mostly it's the same and pretty much things work in the same way. So things like being able to align things to the center horizontally and vertically that works of the same way.

Jen

Because it's interesting as I keep thinking of grid as what I'm used to, which is from the frameworks we've been using… Some of the tools we've been using are pretty awesome. I really like grid setup I use it on every site I work on. But it's still totally based on floats. I'm used to sort of thinking of all these vertical lines on a grid were like Grid layout, CSS Grid layout also adds horizontal lines, which I've never had. And then it seems like you can make a square,… Make a space and then I stick a thing in the space, the thing is always at the top of the space and to the left of that space or fills the whole space across. So it's like a Lego black in a space made for a Lego block. It just fits right there, where with Grid layout, it's like no actually you could make a space and then put an object in the space and the object might now be at the top. It might be in the center, it might be at the bottom. It might be at the bottom right corner. I forgot that's even a possibility. It creates a dimensionality, where you could end up with things where the spaces that you've made are bigger than the objects that are in them are not in the upper left corner.

Rachel

Exactly. And that's really cool. And yeah, people are going to be able to use their Flexbox knowledge with Grid layout. And I realized, actually a lot of this is very similar and that's kind of on purpose.

Jen

So what's the difference between Grid and Flexbox and how come two completely separate groups of people came up with different competing specs and why aren't they communicating? This is stupid. Why do we have two systems?

Rachel Andrew

[00:36:00] [Laughs.] Right. They're not two systems.

Jen

At least they are made by two different groups of people. [Joking.]

Rachel

So this is the thing that people tend to ask. I don't know where this idea comes from, but… They are creating specifications that are going to kind of fight it out as to which is the best.

Jen

I thought that too at first. What you've said just now is exactly what I thought. I've got instinct.

Rachel

[00:38:00] I keep hearing this. That there is no battle between Flexbox and Grid. They're two different things, two different jobs, but as I say they share a whole bunch of common stuff. All this alignment stuff, all this content distribution stuff is shared by them. The idea being that Flexbox is for one dimensional layout. That's essentially something that you can lay out in an unbroken line and yes it will wrap, because if there's not enough space in the box, you might want things to wrap. But what you can't do with Flexbox is place things in two dimensions. I know that people are trying to do that, because they've got Flexbox and they haven't got Grid yet. But ideally you've things like you've got navigation. You've got a big list of images that you want to layout like a set of cards. That kind of layout. Those things are ideal for Flexbox, because they could just be displayed in a linear fashion, and they would work in a linear fashion. Whereas Grid is for two dimensional layouts. You want to lay things out in rows and also in columns and you might want to lay things out with gaps in. That's really what we mean by it being two dimensional. You could have something in the top left corner and then you could have a whole load of cells that done anything and you could put something down in the bottom and that would work. And you can't do that with Flexbox. That's really the difference. They're two different things. In an ideal world, in this sort of glorious future to which we're heading, we'd probably use Grid for your main page layout perhaps… The main columns and things define a grid so you can layout the big items and your headers and footers and all that sort of stuff. And then maybe you've got like a bunch of cards that you want to layout. That sort of common layout and that probably works with Flexbox, because then you would just wrap naturally depending on the number you had or your navigation. You'd probably use Flexbox for that, that sort of makes sense. You get the kind of responsive nature of that flexible layout by default by using Flexbox. That's probably the difference. all layout in a line? If they won't then you've probably got a grid layout rather than Flexbox.

Jen

[00:40:00] Yeah I think the thing you just said that card layout. It feels like that's one of the places that this is intersection between Grid and Flexbox where you could [use either]… And I guess we'll have these arguments in a year or two or three, once we have both and once we actually understand both. To say if you've got a bunch of cards as I was describing earlier, photos of your employers or a bunch of bio photos, it is one line. If you had an infinitely wide screen they would just be in one row, fifty or sixty wide. But they're wrapping. In Flexbox, that's one of the things we've been doing with floats forever. You've got to have a clearfix in there. If all the photos are the same sizes, you're much better off. If all the names are the same length, you're much better off. The moment that you've got little bios and they're different heights, then you've got a mess. So Flexbox has a much better solution, because then you don't have to worry about one of them being longer, like the text's being longer than the other and having to worry about float drops and weird bugs like you're just, "Oh yeah awesome". Flexbox boom, boom, boom, boom. We get thirty employees, so we've got four across, four across, four across, four across. Oh, we've got an extra one, and suddenly that extra photo is giant, because that's filling… It the ones above are all four across, but this row has one photo in the row. So now it's four times as big as the other photos, because Flexbox wants to take the thing within the last row and make it the size of everything else. So there is these weird things with Flexbox and then you've got to apply percentages to everything in order to constrain that, and that seems a bit un-Flexboxy. That's where I feel that maybe Grid layout is better, because if we use Grid for that, you won't have that problem.

Rachel

[00:42:00] I think it's going to come down to the design that you want to make, because there's always going to be different sort of things you've got what looks like a very similar layout and may have complexities that say make Grid more useful and what we don't have at the moment, because Grid is too new, is the sort of performance tests that will eventually have. Which of these methods is the most performant. And if that matters a lot, I mean particularly if you're at the maintenance staff, or whatever you might think, Well, it's better to use Flexbox, because in a certain type of layout, it performs better than Grid and we haven't got that information yet. To be able to add that to the mix, as to whether to pick a or b. But I think, generally, if you want to try and sort of manage things in two dimensions, rather than in one, that's when you start to look at Grid and say, Well, this might be a better way of doing this. Because I think that Flexbox is great for that inherent flexibility you get with it, without having to do very much. I think it's just kind of work, you probably in those kind of things you're going to have to do a bit more work on things like navigation and stuff that'll just sort of where it's just defaults to being responsive and it's great. With grid layout, you might need a bit more work to get that to behave, because of the nature of grid. These are these the sort… I mean it is like anything in this stuff. It's never an absolute and people would love to say, Well, these are the rules. Then if we say that, then what you end up with is another framework. Because that's what the frameworks do, is they say these are the rules. I think the aim has to be and when I'm teaching people, the aim has to be to understand the tools well enough that you don't need to have hard and fast rules, that you're confident enough to say, Well, let's try this, and see if this works, and see what happens. Then, Oh yeah, that didn't work that well. I'll back out. I'll try this the thing. And over time you stop having to try so much, because you just learn how these things behave. I think that is the shame of people relying so heavily on frameworks, is they don't get the point where this is just, These are tools that they understand, and that they have in their hands, and they can be flexible with, and they're not afraid of. They're not afraid that things will break all over the place.

Jen

It really feels like a kind of freedom that's coming. Almost like we've been using coloring books. So we've been handed out a box of markers and a stack of coloring books, and we've been taking those markers and you just really only get those colors and the coloring in the coloring books. And you can do some interesting things, but you're still going to end up basically using the box of markers to color in the coloring books. And it feels like someone's about to show up with a bunch of blank paper, and some oil paints, and we can make any color we want and we can paint anything we want.

Rachel

[00:44:00]I think we're going to have so much more freedom with creative people, when I start… Grid that, Oh this looks very like table based layout, and then you show them the fact that you can lay out things on the grid, because actually you can stack things up if you want and I think there's lots of interesting possibilities with that. I think people need to learn this stuff, and that's the starting point. And yes, they probably will learn it by just replicating the things we already have, because that's what you do. It's very much what I've done on my site. It's a bit like they're solved by Flexbox. Here's some common things and here's how Flexbox does them. And that's exactly what we do, because we're learning. But what I hope is that people and particularly people who are more on the design side of things will learn this stuff, and start to create really cool new stuff that's we haven't been able to do before once they've got the understanding of these tools.

Jen

Well there's always an opportunity to blow people's minds by shipping something that's really literally out-of-the-box, just so very different that it gets a lot of attention, a lot of like, "Wait, what is that?" I hope that there's a lot of those examples and not just one or two, and then everybody copying that same one or two.

Rachel

[00:46:00] I think particularly with Grid there are definitely there's a potential of doing that. And I am quite excited. For a long time I've got these searches in sort of Google alerts for various things that I'm interested in and for a long time the only time I'd ever see anything about Grid would be if I posted something, or if one of the guys over at Igalia who are doing the implementation for Blink, they might post something about what they're doing. And I'm like, "Oh yes, where are the people who talk about Grid?" And just over the last few months that I started to see other people looking into it and going, Oh yeah, this is coming in and playing with stuff or an forking example that I've built and doing something different with it and it's kind of exciting to see those things starting to pop up and realize that people are playing with this and that's where it starts. People are just figuring out how it works, and hopefully the next step is that we start to see the really interesting things that people are doing with it.

Jen

So when are we going to get Grid?

Rachel Andrew

[00:52:00]Ha-ha. This is the question everybody is asking me and I don't know exactly. I have no special insight into this really. I mean, it's certainly… I mean if you've not played with it yet, it's behind feature flags in Blink. It is in Webkit Nightlies. It's also in Firefox Nightly, and in Opera as well, since that's Blink. You can sort of play with it. You can see that it's actually very well along in terms of the implementations. When we actually get it shipped sort of out from behind a flag, probably depends on a couple of things. Obviously the spec's being finalized. I don't think anyone wants to ship this until things are not going to change anymore, because of what happened really with Flexbox, and the fact that that spec changed so much kind of out there in the open. So I think that's one issue, and then the other big thing there is up for discussion at the moment is this issue of subgrids, and whether that ends up in the initial sort of level one of the spec, or whether it gets pushed back.

Jen

It's in Firefox Nightly without a flag, actually.

Rachel

That's right yes it's unflagged…

Jen

Download Firefox Nightly. Yeah. I mean basically and correct me if any of this is wrong. But my sense is that there's two implementations going on of Grid really, two teams. Igalia has been doing a tremendous amount of work writing code for first Chrome and then Webkit, which I assume are very closely related since those rendering engines were forked not that long ago.

Rachel

Yeah, yeah. My understanding is that they were doing the work in Blink and then it made sense for them to do the work for Webkit, because they're still close enough.

Jen

[00:54:00] So, doing the work for Blink means it's happening for Chrome and Opera. And then doing the work for Webkit means that's going to cover Safari. And what we do know is that it's in Chrome and Opera behind the flag. I assume Opera.

Rachel

Yes yes, behind the browser experimental web platform features flag.

Jen

Yeah. So, basically what that means, for anyone who doesn't know, is you can download the browser, or download the latest version. Go get Chrome Canary. That's the one that's a little bit broken, updating itself every night. It might be in Firefox standard [current release] behind a flag as well. I have to pull that up to look. But basically the newer versions get the newest, the latest, because Grid has a whole bunch of pieces. If you want as many pieces as possible, get the beta or alpha version of the browser. But also the newer, the release versions of the browser have the same stuff but a little bit older. They don't have the bugs that were fixed last week they have the bugs were fixed six weeks ago. Behind a flag means you get it personally in your browser. You make it work, so you can write code. You can try it out. You can actually start coding a website. If you have a website that you know you're going to ship in a year, or six months, you could actually start writing the code for that website and see that it works. But you have no way to get your customers, your users, your readers to turn it on in their browsers. You can't actually ship it in a real website, because it's not going to turn on for normal people.

Rachel

Yes this is the difference between the way that Grid has developed and way that Flexbox developed. So Flexbox as we know, you've got these vendor prefixes, and this is how we reinvented this kind of situation, where there are multiple versions of Flexbox out they are sort of going away slowly.

Jen

[00:56:00] Because basically the browser need a way to sort of like half-baked stuff and get it out in the wild to test it. And so they used to use the prefixes, but we didn't see them. I didn't see them as a way to test half-baked stuff. I saw them as a way to start using stuff and shipping in production right now. So people started implementing Flexbox and using it, even though it was still changing. I think people think that's also going to happen with Grid. [People think:] "Grid is going to keep changing. You don't want to use it right away, because once it ships, it won't be done." No, no. This time, all the half-baking is happening behind the scenes.

Rachel

It's a tricky balance this issue of doing things behind the flag or with the prefixes. The advantage of the prefixes is that people do actually use the stuff. The problem with the stuff that's behind a flag is people don't use it. I've been talking about Grid and it's been there in Chrome. It's been usable. There are a lot of the examples of it being usable for a very long time, but trying to get people to actually look at them and offer feedback to the Working Group is has an almost impossible, because they're not able to use it in production. They are like, "Well, I'll wait. I'll wait until I can use it for my clients." And then people lose their chance to offer feedback. And that's really important if you care about the future of the web, is that while a specification is in this sort of development phase, that's the only time you get to have your say. If you wait until the… Particularly now that these things are happening behind these flags, if you wait until it becomes out from behind a flag, it's shipped properly in browsers, it's too late. If you say, Well, this is ridiculous. This doesn't make sense. It's like, "Well, yeah where were you last year?" That's a real problem. Because what I keep sort of trying to explain to people is that it is worth looking at this stuff particularly when there are examples out there. You can just go and have a play, it does this make sense…

Jen

[00:58:00] Yeah people could download Firefox Nightly, and it would be... Because the Chrome, Opera… I thought about guessing when it's going to get shipped. it's in Webkit in there is a Webkit browser that you can download which is basically Safari, except it's this Webkit open source.

Rachel

Yeah it's in the nightlies.

Jen

Yeah, in Webkit Nightly. But then we don't really… It seems like a little bit... At least to me, again correct me if I'm wrong, but it seems like a bit of a secret black box, as to when things got to get from Webkit and actually ship in Safari so...

Rachel

I don't think actually anyone knows, but I would imagine that, because of the fact that all the other browsers are… I mean, this spec actually came originally from Microsoft. It was the first implementation was in IE 10. That's actually there. That's prefixed. It's now somewhat outdated compared to the new spec. But a lot of the basics are there and they are usable. So the Edge team have said, they've got it on their backlog as high priority. And presumably they're already looking at it and updating it to the new version I wouldn't expect them to update their working implementation for the new one until it's kind of finished, but it came from there from that team that this sort of the current incarnation of in the first place.

Jen

So Igalia is getting it done for Chrome and presumably Safari including mobile. Microsoft is presumably working on it — hopefully madly — up in Seattle without telling us.

Rachel

They said it's high priority, so I'm assuming that something's happening there.

Jen

Especially since they invented the thing, of course they want to ship it. A team at Mozilla Firefox is working on it and it's pretty high priority. They've got really smart people working on it right now and you can check it out in FF Nightly without the flag and I think that they may even have some things in Firefox they haven't made it yet into the current version.

Rachel Andrew

[01:00:00] There are differences certainly.

Jen

Yeah but in some of the details in their like especially around .. Okay, well if you break… Slightly wrong, how does it break? Because what we one is we want all the brothers to break the same way. And that's sometimes where that's the last 20% percent of the work that needs to get done is…

Rachel

That's what all of the tests and so on… There is definitely a whole person. There are things that are not yet implemented. And there are a couple of things which are still to even in the best implementations. So there's a bit of work, yet.

Jen

You and I were having dinner, and we were saying to each other, "Gosh, wouldn't it be nice if all four or five browsers shipped on the same day?"

Rachel

And that would be great. But it's never happened before.

Jen

It's never happened so everyone listening who has control over this. It would be awesome if everyone shipped it on — June 10th!

Rachel

... Grid day. Bam, bam, bam, bam. We'll coordinate it. There is a reason why they can do that. I mean… Reasons or shelves of reasons for that.

Jen

[01:02:00] Do you think this is going to come much faster than people are expecting, because for one it is behind a flag and so it's been there for sixteen months… It's been slowly being worked on but, because it's not prefixed, we don't know that we're two years in. People haven't been sort of barely trying it out and learning it, and playing around with it for two years or using it on a production client websites that it's ok to take a risk. Did that with Flexbox but we didn't do that with Grid. So with Flexbox sort of people kept hearing about it in the back of their minds for two years, Oh I should get to that soon, and then suddenly they realized, like Oh, it's done. And Grid there hasn't been that two years. and then the other thing is that for the first time, this is one of the biggest changes to CSS that has ever happened when we have evergreen browsers. So it's not going to take four years for your users to upgrade their browsers. A lot of users are going to get it very quickly. Of course it's still going to take time and even after it's shipped in all of the browsers maybe you and your project and your customer base need to wait a year before you ship something using grid. In that way it will take time, because you do have to wait for people upgrade if they're still using ancient browsers, like they've got Firefox 2 installed or they've got Internet Explorer 8 or something. But for the most part it feels like most people are going to get it very quickly in a way that we've never seen before.

Rachel

I think so. And I think that will surprise people. And obviously there are going to be people working in certain sectors that have a lot of very old browsers. But increasingly, we won't really have that issue to the extent we did. And I think that well certainly surprise old-timers, who would just use the the situation where things come out in five years time that I'll be able to look at that. I don't think that's is the situation now. And obviously it's hard with layout, because it's not rounded corners. It's not gradients. It's not little tweaks that you can say, Oh, well it doesn't matter if the person sees square corners rather than round corners, that's cool. We are talking about your entire layout.

Jen

When you think it's going to happen for progressive enhancement and a fallback?

Rachel

[01:04:00] I think that the we're probably once we get… We're in a situation where you're looking at your stats and you can see that I think fairly quickly we're going to have people saying 80-85-90% of their users are supporting grid. That's key point to be saying, Well, let's go with something like Modernizr to provide a simpler layout for the older browsers and detect whether they've got grid and give them something, and fork your code. And we may well be able to do fallbacks. I've not really experimented, but in the way that we can with Flexbox, where we can do things like overwrite inline block and so on. You can kind of do a layout using older methods, and then finesse it with the newer method. And I think that what we'll see is we'll see this stuff being used like we do for Flexbox for smaller UI stuff, making your form look really neat.… Tidying up that card layout. Whatever it is places where it'll be okay if it isn't there. And we can offer decent fallbacks. And then just as people get more confident and as people are looking at their stats… For instance, for my site for Perch, it's all web design. It's come to that so, I could use Flexbox a long, long time before other people and they are going to be it depends on what your audience is, how quickly you can start with all that stuff out.

Jen

Yeah, it is doing, because it feels like in case of Chrome and Safari… Update themselves. Safari is probably the new like, "Oh Gosh, not enough of my users have upgraded their version of Safari."

Rachel

Yeah I thinks so, but I guess.

Jen

[01:06:00] But then there's IE. IE is the thing that everybody will always, But I want IE. But the thing that I find fascinating is… So, IE 10 might be the bugger… The thing is we have always, always, always at least since we've used CSS for layout, given IE as separate layout using conditional stylesheet comments on the top of the HTML, and it's almost like we've forgotten that, that's what we've been doing. So it's like if you have to give IE 6,7,8,9… When did they drop the conditional stylesheet support? I'm guessing for IE10?

Rachel

I have not had to use them for a fair while, but I think something like… But if you want to fork your code doing feature detection or something like Modernizr.

Jen

You could use Modernizr, but it's like you don't even have to use Modernizr, because remember the hack we used for five years or ten years?

Rachel

For me the… It's a progressive enhancement it's saying, Well, yeah this document is readable. This stuff is usable. Even if you've got this ancient browser and okay. So then you can whether you've got Flexbox or whether you've got grid if it matters, and then we can do this stuff. And I think that is a reasonable approach, because if you're starting from a basis of this is readable or whatever, you've got no Javascript.

Jen

Everybody's got mobile layout...

Rachel

[01:08:00]... And then work from that point. I don't think there is any reason for people to be building things that don't work at all in some browser. I know that happens, but I don't think that even if you're using grid layout. One of the nice things about grid is the fact that you should be able to structure your document in a really sensible way, and then use grid layout to lay stuff out. Because, essentially, you really are separating the document, the content from the way it's styled on the grid. So you should be able to make a very nice, usable, readable document even if a grid doesn't work, if Javascript doesn't work, whatever. If no CSS works, it just should be readable. And I think that more so than in the past we've got that ability with things like Flexbox and grid, because you've got a bit more control of how things are laid out over how they just sort of appear in the source.

Jen

It's super. I think it's more important than ever to make sure your website works with no CSS. And people won't think… Well whoever removes the CSS from their website? No one ever does that. And it's like, "Well, have you ever used a reader mode? Have you ever saved anything to Instapaper or to Pocket or to any of these services?" That exactly what's happening here. The content itself, the HTML gets stored for reading later in some other context, while the CSS is removed. Yeah, markup's incredibly important. Plus, anyone using a screen reader, plus anyone using… Maybe someday cars will suddenly start reading people's…. I don't know what is that Amazon thing in the corner that reads stuff to you while you start reading your web pages.

Rachel

I think that's definitely going to be happening and yeah we've got all these great HTML elements, the HTML5 elements that let us actually describe what stuff is and make it so much easier for any technology to say, Right, this is the main part the content. Let's start here. So you use that stuff, and then we can use these new tools to lay it out and do the visual effect that we want.

Jen

[01:10:00] Yeah and it seems like when we're using any of these tools for a parts of the page, like CSS shapes, which we haven't even talked about or something like masks and clipart or whenever, it's much easier to understand, Well, in this situation, someone's going to see this enhancement and these other situations, and they're not. So they're going to see the text wrapped around my circle photo in a square instead of seeing the text wrapped around the circle photo in a circle no big deal. And if you're using Flexbox to lay out your navigation, then maybe somebody else just use it in a simple line or the spacing isn't as fancy but it's fine. But it but the real bugger is going to be when you're laying out the entire page.

Jen

Yeah it's full page there and that is harder for people to imagine and I think that's where the sticking point will be, I think, for major use of this stuff. Although I think if people are building interfaces, if they're building stuff for newer tablets, or whatever, I think grid is going to be wonderful for that sort of stuff. And it may well be that there are certain places where people can start running with it, just because they know who is using it. If you're building an internal app for a company that they can use it on tablets or whatever, that's where the original quid spec is being used on. It is being used on that sort of windows devices.

Jen

What's originally called metro with all the black colors and boxes and squares.

Rachel

When at first sort of came out you saw people using it for that kind of stuff. I think it's really great for that. So it may well be that we start seeing people doing really interesting things, because they know they've got a subset of the types of browsers that are likely to show up for whatever reason. And there's a whole bunch, there's so much stuff now that is just web based. And when you talk about whether you should build it like a native app do stuff on the web, I think grid is going to be really useful for actually creating really great in-browser sort of experiences that can feel almost like using an app.

Jen

We should start a football pool. I don't know what it's called in other places, but when somebody is going to have a baby and a bunch of people all place bets on when is the baby going to be born. With browser is going to ship first, which one's going to ship last? When is it going to start?

Rachel Andrew

[01:12:00] I think it would probably happen relatively quickly for most browsers. I think people who've got implementations aren't going to want to settle and wait until somebody else ships.

Jen

Yeah. I think what we do know for sure is we're not going to end up with a situation where one or two browsers ship, and then the other two take four years to get around to it.

Rachel

Everyone seems to be working on it. The hang-up might be Safari. Because we don't know what they're going to do. Just because it's in Webkit doesn't mean it's going to end up in Safari and no one knows what… It is interesting, because for a long time in history it was IE was the browser that was kind of this closed thing. No one really knew what they were going to do or why they were going to do it. Well, as they've made with Edge and with all their sort of saying what state of things are on the platform and things, they've made real attempts to be open and transparent with what they're doing. And I think that's completely genuine and certainly with other browsers we tend to know what's going up, because they're always being developed and they share what they're doing and then we've got Safari and no one knows.

Jen

[01:14:00] The good thing is we do know what's happening with Webkit. We just don't know… Apple typically has shipped things that affect page design and layout early. Not everything, of course. Some of them they seem to really love. Like they shipped Regions where no one else has shipped Regions yet. They shipped Initial Letter. (Even though there's a bug in it that makes you can't use it yet. Please fix that bug. Anybody of you listening from Apple, please fix the Initial Letter bug.) In Webkit it's fixed already. Please ship it! What is it that's about to come out? IOS 9.1? Whatever is going to come out with this big half-shipment in the spring, please put that fix in it. Initial Letter which give you real drop caps for the first time ever. Only Safari has it. You think, Well why would I start using that? Actually the moment they fix this bug, we can start using it. Everyone else will just get no drop cap, but you can have a drop cap in Safari. It feels like this is right up their alley. It feels like Grid layout is something they be on top of.

Rachel

Yeah I hope so. That's kind of my hope, and the fact that it has gone into Webkit alongside Blink. And the fact that all the other browsers are doing it. Hopefully that means that yes they were on it. I think actually for IOS and things there's this huge benefit to having grid layout there.

Jen

Yeah so what can people use now. It's still going to be a little while, at least six months probably before we start shipping Safari with Grid. What can people be using now? What is it that… Everything you've been talking about you feel like it is ready to go. People just don't know about it yet.

Rachel

I think more people can probably use Flexbox than think they can if you're reasonably careful. You need to remember where you've used it as I discovered today, when something broke on a website that I had forgotten I had done. Now things have changed. I knew that the thing had changed as soon as someone said, Those images look funny on that website, and I'm like, "Yeah I know what it is.… Because things have changed in that browser. So you have to remember. I think if you're using something like Flexbox that is still being developed.

Jen

Is that still changing that much?

Rachel

Well the stuff to do with the Alignment stuff is changed. I mean it's pretty much tied down now I think, but it's changing in browsers still, because there were differences between Firefox and say Chrome do certain things still, and one browser or the other is going to change what we're doing so.

Jen

There's some stuff around accessibility.

Rachel

[01:16:00] And sort of a tab order and things. It's kind of if you're using say something like Flexbox, you have to remember where you've used it. The reason my images were broken was I'd forgotten actually that I had used Flexbox on that layout. Because that's a site that doesn't have a lot of things going on.

Jen

You're almost making it sound like if someone knows they're going to ship into production a bunch of code, and then they're going to walk away, and the people who are going to be babysitting that code they are not going to stay on it. Would you recommend being hesitant about Flexbox in that situation?

Rachel

If it's not going to be updated in the future. It does depend who you're handing it over to. If you're handing it over to an internal web team, and you can say, "Hey look, we're using Flexbox here. It's really nice." You might just warn them if things change and it something suddenly looks a bit odd, this is probably why. Because at this point you should have a good handle on what's likely to change.

Jen

That's a very conservative recommendation. That's not how I've been behaving. I've actually been shipping Flexbox for the past two or three years and it's been fine.

Rachel

It depends what you're using. If you using real basics of the spec, it's probably going to be absolutely fine. If you're doing something that's a little bit more obscure, or if you're essentially hacking it to do grid-based stuff, that's where most of the problems come into play, as with everything. If you try and use something it's not really been designed for, then it may be that the thing that you're doing isn't really a feature of the thing that you're using.

Jen

Maybe you're relying on a bug that's about to get fixed.

Rachel

Just as with any software. I mean I have software and quite a lot of people use your software in really odd ways, and then you go and change the thing or you fix a bug and suddenly it was like, "Hey, you've broken what I'm doing!"

Jen

"I really needed that bug!"

Rachel

Why were you doing that? So it is with browsers. If you're doing something that possibly isn't really a default behavior, it's just knowing what you've done and where.

Jen Simmons

[01:18:00] I also think it's important. I mean if you code something up in Flexbox, and you only look at it in one particular browser, then you 're not quite doing due diligence. You really want to check it in all the browsers that you possibly can get your hands on, including Edge.

Rachel

I have never made judgments using Chrome as my main browser. I tend to use Firefox and then realized that something is broken, because Chrome is influencing things slightly differently.

Jen

If you try something… Especially if you're really pushing the envelope and you try and then you open it up in three or four browsers then it's slightly different in all those browsers, then maybe you really need to go hunt down what is it that you using, who is it, how is it implemented properly and who is it that has misimplemented it and do some research and some due diligence and figure out if that's a bug that's about to get fixed from underneath you. But it seems like if you using Flexbox in a way that's fairly simple and very standard...

Rachel

You should be pretty safe at this point.

Jen

And it looks the same in all the browsers, you're good to go.

Rachel

Yeah, I think so and I think it's worth just going back and making sure you understand how all this stuff works and what it's for, because it's sort of changing what we're going to use this stuff for. Floats aren't going to go away for instance. Float that are useful for instance.

Jen

For what they were originally made for.

Rachel

Yeah, yeah and at the moment if you want to use Shapes, you have to float the element. We're going to be using floats. Know how that works. Know how it behaves. Know what happens to the document when you float something. It's about assembling a sort of toolkit. And that toolkit is about to get a lot bigger.

Jen

Yeah. It's like we only had a hammer, and now suddenly, we've got a bunch of wrenches and screwdrivers.

Rachel

[01:20:00] Making sure you understand how this stuff works, because once it stops being a mystery, it's a lot more fun. Because you can play around with it. And when you do, just look at it and ask, Why is that broken? You've got a basis of understanding why it might have broken. As I said with my Flexbox issue earlier, I looked at them like, "I know what that is. In the minute I looked at it and, because once you know this stuff it stops being frightening. And you can actually start to use newer stuff, without being worried about it, because you kind of understand how it's going to behave, and if it does what you weren't expecting, you've kind of got this basis of understanding to say, Okay, why isn't that aligned there? Why is that stretching? What could possibly be at play that's causing that? And if you just kind of poking stuff around, refreshing and hoping it works, you never get that sort of level of understanding.

Jen

I think one of the hardest things about Flexbox honestly is that there are too many out-of-date tutorials on-line. And they're wrong now, because it changed so much out in the real world. Shipped before it was finished baking… One of the things I do when I search and then I see a thing and I click and then I'm like, "Oh, that solves the problem I'm actually trying to figure out, I look at the date, because if it says 2012, I immediately back up and go find something else. I don't even look at it, because I want to pollute my understanding with stuff I actually didn't learn in the first place that's now totally out of date.

Rachel

If you are writing any kind of technical tutorial or a blog post or whatever, I know it's quite popular not to put dates on something, or else the stuff just looks old. And there's a lot of stuff which is evergreen and it's absolutely fine that you don't put a date on it. If you're writing technical stuff, please just stick a date on the top, just say this was written on x date, because then it saves someone digging it up in the future and being confused by it.

Jen

[01:22:00] Yeah. In fact sometimes with Flexbox specifically — not everything but with Flexbox — if I don't see a date, I leave. Because I don't know if I can trust it or not. I need a tutorial from the last year or maybe two, not something from three or four years ago.

Rachel

Yeah actually those things sort of surface all over the place. You never quite sure where it's I guess. Stick dates on things. You don't have to go, but it's quite nice and sometimes I'll go back over old stuff…

Jen

And then you don't feel you have to rewrite it. We had a discussion recently like does that mean that we rewrite old content? No, just date it. You know, maybe if you see something that's actually out of date, they'll put a little note on top that says, Hey, guess what? This is totally out of date now. Don't read it. Here's a link to something that's newer.

Rachel

But I think if you've got a date then people can at least say, Oh yes here is some advice from five years ago. It's probably not the same now. And especially with the layout stuff, because it's changing so quickly. I I've got stuff on my blog about Grid of which now the property names are wrong, because they changed. And that's going to happen and it has been a real problem with Flexbox.

Jen

Yeah, with Flexbox specifically, like more than anything else I've seen. It just changed, and the original stuff is wrong.

Rachel

And that's interesting. All of that changing has been happening with Grid layout. It's just because it's happened behind the flags…

Jen

It's in secret.

Rachel

I've got less of the things that have changed.

Jen

Yes and you kept up with it. The rest of us have been waiting with maybe not even knowing it. We've been waiting for things the settle down.

Rachel

Yes. I'm just reading the specs, so you don't have to. That's all.

Jen

Right. So let's get to how are people going to learn this, Rachel Andrew?

Rachel

[01:24:00] You can, certainly. With things like Grid and so on. I've got a bunch of stuff out there which people can learn from, including several videos of presentations I've done. I have recently launched, in fact this week I have launched the first part of an online CSS layout workshop. I've been going around teaching this stuff for a long time and writing about it for even longer. And so, I've been sort of putting together an online version of that material, because I can only do so many live workshops a year and I've launched that. And that's really going right through layout, all of the basics, floats and positioning and everything, and then the second half we'll do with all the shiny new stuff.

Jen

People can go to, because I'm actually very excited about this. It came out. Today is Friday. It came up Monday?

Rachel

Tuesday. It was supposed to come up Monday, and then I had… I like to make things really difficult for myself I was also launching an e-commerce solution for… At Perch, and so I decided to launch my new project on our project for Perch, which is currently in beta. Like just to make things hard for myself.

Jen

And you publish another completely other book this week, that we didn't even talk about yet, that's not about layout at all.

Rachel

Yeah. I like to challenge myself.

Jen

[01:26:00] I don't have no idea. I'll ask it later. Where do you find the time? I'm excited about these videos. I have been actually waiting to do this episode of The Web Ahead with you until these videos are out, because I just feel you more than anybody in the industry has been teaching people how this new stuff works. And I watch your videos. I watch other people speak all the time, and then I come home and I find, "Wait, does Rachel have a new video out yet?", because I need to watch her latest version of the exact same talk I've already seen to keep up with what's changing. But this I feel like it's got to fill in the quarters for everybody, even someone like myself, to make sure that we actually understand all the different pieces, including the original. That's part of the thing that's so frustrating to me with sometimes these… I'm so anti-framework these days but I seem to be very anti-framework. And part of the reason is, because I feel like, because people have used framework so much allowed to front-end developers don't even know how to do a layout based on, with floats or what's the deal with positioning? Can we use fixed positioning yet does that work? Why do you want to use relative positioning or absolute positioning? It feels like the basics were so painful we just stopped looking at it and now we don't remember anymore and if we ever learned it in the first place…

Rachel

And I think people are often surprised I've been using a framework that was old a few years ago, it was all so hard and so they started using a framework and now when they come back to the basics actually it's a lot easier, because the browsers that we've got actually behave in the same way with all of the standard stuff we don't have, crazy float bugs anymore we don't have all the sort of stuff we had a few years ago. You can actually take a much simpler approach to this stuff, which is what I tend to try and do I try and strip back. You see they're using a lot of examples and they're using Sass and they're using all this stuff and you can't see the simplicity of the tools that we have. So yes that's where I'm really going with this stuff is that let's just figure out how this works properly, and then you can lay out on whatever work-flow stuff you want.

Jen

[01:28:00] Yeah. I am completely deviating from what I was trying to say about your videos. I'll come back to it, but I wanna jump in and say box-sizing, there was this moment in time in the history of layout and how it's changed that the people should know about. Just so they realize it was really hard… Because. I mean I remember when I didn't really understand what was going on and I would code up a layout by hand and I thought it was awesome. I use a Mac, and then maybe I opened it in Internet Explorer, maybe I didn't maybe I just sent it QA in the QA department and they started sending bug tickets back with all the bugs and the screenshots of what was broken in Internet Explorer, which just made me hate Internet Explorer more and more and more. But it turned out the whole reason is, because when you have something. It ever ever have this thing, there's a box and you've got padding on it, one browser would take the maths of the padding, and subtract it from the size of the box another browsers didn't. And actually IE was handling it the correct way and following the spec and everybody else was doing it incorrectly, and not following the spec so we would like recode that worked in all these incorrectly implemented browsers, and then we go into IE, and we'd be like, "IE, you're doing it wrong. It was just confusing. It was just like why over here is my box 200px, the way it should be, and over here my box is a 160px when it's supposed to be 200px. It just was… So when we started using 960-grid, because 960-grid just took all that pain away. And then there were no tickets coming from QA and you didn't have to open it in Internet Explorer every day on your computer, in a virtual machine that didn't actually work as you didn't have enough RAM on your machine. And then we just stopped thinking about it. And meanwhile this thing called box-sizing came along and box-sizing is a CSS property that gets you… Let to you say everyone should do it this one way. Everybody do with the same way. Everybody do with the way that's actually better, that makes more sense in the first place. And you don't have to worry about something like browsers change what they were doing, because the browsers couldn't change what they were doing, because then they would break all the websites that shipped ten years ago. You can say, Hey, I'm making a new website and I want us to use box-sizing: border-box. So you just put it in the top of your CSS and a lot of your resets are using this now. A frameworks use this. You just go box-sizing: border-box, and that whole problem goes away. And all the crazy things about life. So now you can actually hand-code a float-based layout with a lot of success and not have all those bugs and not be confuse and it's not nearly as painful as it used to be even the floating stuff.

Rachel

[01:32:00] Yeah then that's typically what I find when I'm teaching the basics to even to people who have been doing this who feel that they are sort of competent front-end developers, they're doing this for a while but, because they've been relying on a framework, and that's not necessarily a bad thing, but what they haven't done is looked at the techniques that Frameworks are actually using. In the frameworks they're using box size and border box, and then when they realize That, Oh, well I could just be using that. And a lot of the things that they believed were difficult about CSS layout, for instance having to then work out the percentages that you can apply to padding, so that your layout doesn't break, they've gone. Because you can just use this property. There's a lot of things like that. Not just the fact that browsers have got better. Browsers now aren't competing on a shiny new set of features in CSS in the way they were. In fact browsers these days seem to really be competing on who is the fastest. I think this is a marvelous competition. I totally think this is exactly where browsers should compete. Get faster, that's great. This idea of, Oh, well this browser is going to ship this feature and others aren't, that doesn't happen in terms of sort of CSS in the way that it used to. And certainly we don't have competing implementations of things in the way that we use to do or just the fact that browsers weren't speaking to each other. They would just implement the spec in different ways. I mean that's not really what we're saying now. The browser vendors are feeding into the specs, and working the best way to do things together. It's easier. If you've been using a framework for the last few years, just come back to vanilla CSS and build some stuff, and you'd be like, "Wow, what happened? It is so much easier. Even without Flexbox, even without Grid, even with just floats, and things, things are so much easier. If you are old like me, this is just like… It's so much easier compared to what it was. That's the sort of stuff that I think people benefit from. It's why I didn't want to just ship. As I have kind of got it all this material that I use for teaching people in person, and sometimes people want sort of a beginnery layout day or they want to have all the new stuff or they want a combination too. I wanted to be able to put all that stuff online in a structured format, because that beginnery or the early stuff, you think, Oh well this is just for people who don't do CSS very much. And actually, if you've been using a framework for five years then there's probably a lot you'll learn just by going through those. You'll rattle through the basic steps really quickly, because you've got a lot of basis for understanding it. But, you'll find it's always good to go back and be a beginner at things.

Jen

I do think there are things like the way that margins collapse. No matter how expert we get, it still feels like there's a mystery there. I don't understand why is a margin collapsing over here and not collapsing over there.

Rachel

That is that sort of stuff, that once you've got in your head, you can feel like a complete CSS ninja. It's like, "Yeah, I know how this works.

Jen

Because a lot of it we're also taught. And so you end up with a sort of swiss cheese holes in the middle of your thinking, and they tend to be around the things that are the weirdest. And you don't get a lot of tutorials. Look at my 600-word tutorial on margin collapsing.

Rachel

[01:34:00] No, it's not exciting, is it? I have kind of made a career of just like a very unexciting things. If there's something boring and really long and very technical that I will be there reading it. And try to make sense of it. The things I know about typically, I know all this stuff about European tax laws. How is that to become the go to person about this? If there's something that needs unpicking, that seems to be where my brain wants to go. It is in that sort of complexity. I'm trying to simplify complexity. I see a complex [inaudible 01:34:18] spec, and all I want to do is make it understandable for people, because I think that's where the power is in this stuff. It is getting it into the hands of people who don't read specs for fun, and who design really great websites for fun. I can't design an amazing web site. I'm not a designer. I'm not particularly creative in that way. But what I can do is explain how this stuff works, so that the people who are really great at designing websites can get on and design websites and understand what they're doing with it.

Jen

Yes. So at TheCSSworkshop.com you've two groups, and the first group of videos is like CSS basic selectors, length units. Are those two free?

Rachel

I've got a couple of free courses on there. What I've have discovered when I taught the stuff in person is that a lot of people actually aren't really using selectors, because they're using frameworks where you have [inaudible 01:35:21] assistant things…

Jen

And they're putting classes on their elements, or putting there whatever fancy blah-blah classes.

Rachel

So, the minute they see a complex selector, they're like, "What on earth is that? Ans then that detracts them from the layout stuff. So, I often teach this sort of stuff at the beginning just to get people on that page, so to be able to really use CSS, you need to understand that, you need to understand length unit. So, I've stuck those things out as kind of free tutorials.

Jen

And length units would be em and ram, pixel and point, which we're very familiar with, but then also viewport units, vm.

Rachel

[01:36:00] Yeah. Some of the newer stuff, just so that when you see it in a layout thing, you're not like, "What is that?

Jen

I mean this is a perfect example. Okay, pixels, em and ram. I totally understand, and percents, I know what that is. But CH? II? PT? PC?

Rachel

A lot of those things are really only useful if you're doing print stuff. That's another nerdy area of mine is doing CSS for printing. But it's kind of just having that base. I've got a couple of free courses. Also, it lets people see what format takes. If you're going to buy this, you want to know it it's worth.

Jen

If it's any good?

Rachel

Yeah. It serves that purpose.

Jen

So that's free, selectors and length units, and the fundamentals. I see here intro, box model, positioning, floats, display property, like display table, stacking content, the whole z and x thing, getting started with Flexbox, responsive design, media queries and fluids, grids, browser support, and debugging CSS layout issues.

Rachel

Yes. That's the course live now. It's that sort of the fundamental stuff and I'm then going to, before the end of March, get out the sort of advanced layout stuff.

Jen

So Part 1 is CSS layout fundamentals, and then Part 2 is CSS advanced stuff. So, this is Multicolumn Layout which we also didn't talk about, but Multicolumn is awesome. Advanced Flexbox, CSS Shapes, CSS Grid Layout, Box Alignment, other interesting things like Exclusions and Regions, and how in the world do we keep up to date? So, you could pay for both part 1 and part 2 now in a group and you get part one right now, and part two will ship later. Or you can buy just part one now and you can buy just part two later? Is that possible?

Rachel

[01:38:00] Yeah, that's right. What I do is… If people sort of buy the two parts, what I'll do is I'll put out the lessons as they're ready for the part two, so they'll get them a bit early, and I fully expect this stuff to update. I mean, essentially I've got this set of material which I use in in person workshops and I'm putting online, and I'm intended to keep the two in tandem. So, as things change, particularly so in Grid, which is still changing, I'll update the material and make sure the online material is also updated, so it's correct and modern. People come back to refer back and think, Oh, what was that property? If it's changed I will have updated it. It is the idea, because I am using this material. It's not sort of I'm going to put it online, and then forget about it, because it's linked to the stuff I stand in front of people and tell. So that kind of keeps it all, and I sort of very much wanted this to be a sort of living thing and to be up to date.

Jen

Yeah. It also... It costs money. There's a lot of free stuff out there, but this is a way by putting up a little bit of money, you can just know that… I know that this will always be correct and it's right and it's expert level, and I don't have to spend hours an hours searching around and trying out stuff that isn't quite right. Or finding the same basic tutorial over and over. It feels like every time I search for something to learn about Flexbox, I keep seeing the same "learn how to layout your navigation."Like, I know how to lay out the navigation. I've learned that already. I need help with something different.

Rachel

[01:40:00] And what I expect as well is that as people work with this, just as when I am in front of people teaching their stuff, I kind of refine the way to teach things, because you realize, Oh this confuses people. Why they're confused? I've been able to kind of feed that back. And as I get questions… If I'm being asked the question then that's probably because somebody didn't understand that. So how can we update this, so that the material's better for… That's very much something I want to do well in this kind of… Because that's the problem with books. You write a book and then someone e-mails you, and then you're obviously confused. And I think, I could have explained that so much better, but you can't go and change it, which is why I put this stuff in a sort of a format that I can change, and I can update, because this stuff is changing all the time and the way that we want to talk about it changes. So yes. And that's why it is in an online format as opposed to a sort of fixed in time, beginning of 2016 book, which then, particularly with the newer stuff is going to be outdated very quickly.

Jen

Yeah because you were on my show three years ago, because you had just written a really little book at the time, and it is kind of outdated now.

Rachel

Yeah. I updated it and probably I will update it again. It's quite a neat little guide, because I ended up self publishing the second edition of that. But yeah, books are good as a snapshot of what it is, but I think that the problem is that if they're not updated, they can fairly quickly become outdated particularly with newer stuff.

Jen

So people can go to… That courses at theCSSworkshops.com. People can also go to rachelandrew.co.uk and I just clicked, because it links your books. So I clicked there and it says, Oh, get ready for CSS Grid Layout. It's a little book that you publish for A Book Apart, which I bought the day it came out January 2016. If somebody wants to read a little book format or…

Rachel

That's just about Grid Layout. That's a real introduction. If you just want to find out about Grid, that is pretty up-to-date. Again I'm committed to updating that. Probably when things ship in browsers, we'll do an update to that to make sure it's… But that's pretty up-to-date and it's got some live code examples. If anything changes I can update. I made sure it's shipped with code and… So that if things change we can at least make sure the code is correct and they'll run in browsers.

Jen

It's also byte-sized it's not in-depth, it's kind of byte-sized, so it's probably the simpler stuff and the stuff that's less likely to change.

Rachel Andrew

[01:42:00] Yeah. It's pretty much the basics it's really the sort of stuff that I teach when I present on this, and there are various videos around that show, that link up one of my more recent conference videos and the show notes are there for people. I've got various… Where I have explained some of that stuff.

Jen

Yes you've talked. Your videos of your talks, your slide decks are going with your talks and then there's… I always forget for some reason. What is the URL for your code example website?

Rachel

Oh gridbyexample.com is all my grid bits and bobs.

Jen

Grid singular. [Not "grids" plural.]

Rachel

Gridbyexample.com

Jen

And so here we've got just a whole bunch of examples of Grid Layout running. And you can click on them and then see, Oh I can do this kind of grid. I can do that kind of grid. This is how to do these things. Are the trick of it is you have to look at it in a browser that supports Grid.

Rachel

Yes, yes. Don't be one of those people who emails me saying this just doesn't work in my browser. I am I'm not a fan of those e-mails.

Jen

It's cool what you've got, because I'm just looking at the homepage of the website. There are images, so the screenshots. Here's line-based placement spanning cells. Here is a screenshot of it. I know what it's supposed to look like as there's screenshot. But then when I click on, there's actually like embedded code pens and it doesn't look at all like it's supposed to, it just looks like a bunch of gray boxes spanning the whole page. Yeah, that's because I'm in Safari right now and I'm not in… If I back over to Firefox Nightly, it will run.

Rachel

That's just a bunch of little examples. I'm just trying to break down, and I've got a bunch of more examples. I'll probably put them up in the next couple of weeks. I'm just trying to break the stuff down into the different things that grid does, so rather than looking at the whole spec, and thinking, "Oh, my God. Where do I start? You can sort of start there and see how the different things work."

Jen

[01:44:00] Yeah it's also a way if you are trying to implement something specific, you can scroll through and see if Rachel had already did it for you, and be like, "Oh yeah, you already did it for me. Thank you. I'll take that code. Thank you very much."

Rachel

I'm generally interested in things to build, sort of patterns that I can try and build with grid that conform people who are designers. What sort of real things would you like to be able to build? I am always very keen to see those to have a go at building them.

Jen

Well and that's the stuff that I'm going to be… I don't know how you get all this work done. I have like a half built jensimmons.com website that I'm trying to get up in the next couple weeks. And a beginning of a place to be posting a lot of the examples, definitely from my talks, but also, over the year as my new talk is written, than to free up some new time to be able to really write a bunch of tutorials and design some new stuff, so hopefully people can find things coming from me as well later this year.

Rachel

I also have a weekly newsletter I send out, which is csslayout.news and that is just general CSS layout stuff. And I think I'll find in the week as I've drawn in the web, I may send that out. All kinds of things from beginnery stuff right through to the latest things that are happening with the specs and things.

Jen

Yes you find links so people don't have to.

Rachel

Yes. I read all this stuff, so I try and put it together for other people to look at and read.

Jen

So we'll put all these in the show notes for the show, which are of course at theWebAhead.net/114. So the people that are driving would remember all these. Of course, people can just search for your name and find you.

Rachel

Yeah. You'll find all sorts of stuff for me. If you search for "Rachel Andrew grid", you'll probably find all kinds of things.

Jen

[01:46:00] I'll probably just [search the web] for "Rachel Grid" without your last name — oh, actually there's a bunch of Rachel Roy, Off the Grid.

Rachel

The other Rachel Andrew is… There's a Dr Rachel Andrew, who is a psychologist, I think, who is like a TV. I think, she appears on television programs in the UK. So that's the other Rachel Andrew. So, not the Rachel Andrew psychologist.

Jen

You can go to her, when your brain is exploding from trying to learn all these stuff. All right. I think we're well over time. We'll just wrap it up. On your website people can check out all the different places that you're speaking this year and they can go to my website, and check out all the places that I'm speaking, and maybe people want to go see us both at the same time.

Rachel

Yeah. Yes. You can see us both at some of the An Event Aparts.

Jen

Which ones are you going to be at this year?

Rachel

I am doing Nashville, I'm doing Boston, and I'm doing Chicago.

Rachel

And I'm going to be at all seven, and I'm doing an all-day workshop at San Fransisco.

Rachel

Cool. There's a few places that I'm doing in person workshops. In June. I'm doing a CSS layout workshop in October in London, and I'm also doing a two-day workshop at Fluent in San Fransisco very soon. So, there's a few places where I'm doing this sort of stuff live. You can find all that stuff on my website or find me on Twitter @RachelAndrew and ask me where I am.

Jen

Excellent. All right. Well, thanks so much for being on the show.

Rachel

That's been good, once again.