CSS Grids, Flexbox, Columns, Shapes and Regions, with Rachel Andrew

In this episode of the Versioning Show, Tim and David are joined by Rachel Andrew, co-creator of Perch CMS and leading expert on CSS Grid Layouts. Rachel demonstrates her dancing skills as she glides from her Perch, pirouettes across CSS Grids, moonwalks along Flexbox axes, and cartwheels over CSS Box Alignments, Multi-columns, Shapes and Regions.

Show Notes

• Rachel on Twitter: @rachelandrew
• Rachel’s personal website: rachelandrew.co.uk
• Rachel’s CSS Grid demo site: gridbyexample.com
• Perch CMS
• Perch Runway
• CSS Grid Layout
• Grid Layout status on caniuse
• Rachel’s book Get Ready for CSS Grid Layout, published by A Book Apart
• Flexbox
• CSS Working Group
• An Event Apart
• CSS Box Alignment
• CSS Multi-column Layout
• CSS Shapes
• CSS Regions
• Autoprefixer
• Say hello on Twitter: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

Conversation Highlights

I’ve been doing this for so long that I’m not afraid to look at something and say, Well, if I need to know about that I’ll have a look at it when I need to know about it, and not feel that I’m missing out, or that people are going to think I’m stupid because I don’t know this thing, or whatever, because there’s just too much stuff.

---

I focus on the things that I focus on. Even within CSS there are things that I have a rudimentary knowledge of. Obviously if I needed to use them, I could go and find out more, but because I don’t ever use them I don’t have a huge knowledge of them. That’s fine, because there’s so much stuff now. I think you do have to get a bit of an overview, what’s out there, what might it be useful for, and then just put it to that side and say, Well, when I have that task, I’ll go and really dive into this and figure it out, because you can’t learn everything like you could when I started.

---

It doesn’t matter if you’re 18, or if you’re 65 or whatever. You’ve got things that you know, and that you can share, and you can teach. It doesn’t matter if you’ve only just started in the industry.

---

Sometimes I think, actually, people who aren’t much more than beginners can be the best teachers to people that are just one step behind.

---

It’s kind of easy to jump over the basics part now, because you can go into one of these frameworks and they’ll hold your hand and protect you from all that stuff. There’s nothing wrong with them, but you need to understand the basics before you jump into them.

Transcript

Tim:

Hey, what’s up everybody? This is Tim Evko …

David:

… and this is M. David Green …

Tim:

… and you’re listening to episode number 12 of the Versioning Podcast.

David:

This is a place where we get together to discuss the industry of the web, from development to design, with some of the people making it happen today, and planning where it’s headed in the next version.

Tim:

Today with us we have Rachel Andrew. We’re going to talk all about some CSS stuff, and maybe some CMS stuff, and it’s going to be a very exciting episode. So let’s go ahead and get this version started. Rachel, thank you so much for joining us. How are you doing today?

Rachel:

Yeah, it’s great to be here. I’m good.

David:

One of the things we like to do before we get started with the show, we like to ask all of our guests a philosophical question. Your philosophical question of the day is this, Rachel: in your current career, what version are you, and why?

Rachel:

Ooh. What version am I? I don’t know. That’s a really strange question. Although, it’s made me think, which is good. I don’t know. I feel like I’m one of those releases that ends up at like, point 343, because I’ve been doing the same thing really, for a very long time, but it’s changed massively. Yet, there are all these things about what I’m doing, which are pretty much the same as I was doing 15 years ago. Yeah, I think I’m one of those versions that’s got to like 2.7968, and you’re thinking really we should go to version three. [Laughs]

Tim:

That’s actually very interesting. We never get the same answer from any of our guests. Everything is a little bit different, so there’s never any wrong answer. I’ve seen those applications where it’s like version two point six, seven, eight, nine, ten. That’s always very interesting to see. Great answer.

David:

Yeah. I love those applications, because they tend to be the ones that are the best maintained, and the most mature, and most resilient when you need them to do something.

Rachel:

Yeah. It made me think, we’re a bit like that with Perch. We’re always like, Oh well, what actually makes the next version? You know? We just keep on adding those points.

David:

Since you mentioned it, why don’t you tell our listeners what Perch is, and what you’ve been doing with it?

Rachel:

All right. Initially Perch was a small CMS product that we launched about seven years ago, as a drop-in content editor, really. We’re now seven years on with the product. We’ve now got two products. We have Perch, which it’s essentially still drop-in content editor, although it does an awful lot more than that, and we have Perch Runway, which is really a fully-featured content management system for content-based sites — sites that really want to have a lot of structured content, and also don’t want something that messes around with their markup; that leaves all that up to the designer and developer, rather than the CMS deciding that it’s going to output stuff. So that’s mainly what we do.

David:

There are certainly a lot of CMS systems out there, and there were several years ago, and there still are. What made you feel the need to build something like Perch? What need was it addressing?

Rachel:

It really came from something that our clients were asking for. At the time, we were just a web development agency, and we were mainly working for design agencies doing that. So we were building things for design agencies. They’d come to us and say, Oh, we’ve been asked to develop this, and we don’t have the skills in house, or we don’t have time. Will you do it? They would usually do the design. We’d end up doing the development. Most of those were fairly large-scale content management system things that we built in our own framework. Then we’d also get the same agencies would have these little tiny projects, and they’d say, Well, can you recommend something that’s like your big framework but it’s just kind of like a light version? as it were.

We didn’t have anything to recommend — nothing that took the structured content approach that we did with our framework. That’s where Perch came from — saying, Well, can we do something that templates stuff this well, but is a sort of drop-in thing, that like, any web designer could implement? That’s where it came from. There wasn’t anything like it around. We’ve just really built on that, and built from what the customers have been asking us for, really.

David [4:00]:

That’s interesting. The drop-in nature of Perch, I think, is something that people might not be familiar with. How does it drop in conveniently?

Rachel:

OK. If you’ve got a site that’s all a bunch of static files, the basic need was this situation where a designer — and it was probably more common seven years ago — would build a completely static site. Then their client would say, Oh, that’s brilliant, but could we just make the home page so I can edit it? Really what their option at that point was, was to rebuild the whole thing in say WordPress. That would take a whole bunch of time. You’d have to build themes and so on.

So Perch, then and now, basically you can stick a PHP tag on the page, reload the page, and it’ll show up in the admin, and you can then start. You can choose a template for your structured content, and then you can start editing. You really can be editing a site, really within an hour or so, going through the install and then getting going. Obviously, we do a lot more than just that now, but that basic use case still exists, and there are a lot of Perch users who really only do that. They make a static site, they make a few bits editable, and they send it off to the client.

David:

That’s interesting, and it has a lot of implications for the designer-to-developer workflow as well.

Rachel:

Yeah. It does mean that people can just build things. We have customers who use all sorts of different platforms to build things, and they know that they can just drop in the Perch tag and it’s not going to effect anything else they’ve done. If they want to use Dreamweaver, or they’re using one of those web builder type tools even. We see people who have used Adobe Muse and things. Then we have right through to people who are completely, carefully, hand crafting a site, and just don’t want the CMS to mess around with it. So we have a whole range of users.

Tim:

Speaking in terms of designing inside of a CMS, one of things that I’ve noticed you also tend to focus a lot on, is CSS and CSS layout. On the Versioning Show we usually don’t talk about trending technologies, but I wanted to take a moment to talk about CSS layouts, particularly because I see the direction that it’s going — to be the future of writing for layouts in CSS. Do you want to take a minute to talk about some of the new CSS layout features that you’ve been focusing on and are excited about?

Rachel:

Yeah, sure. I’ve been looking a lot at CSS Grid Layout, which is an emerging specification, to create, really for the first time, a grid-based layout system for the web. We’ve obviously had things like float and positioning and so on for a very long time. I think most listeners probably are aware of the problems of trying to create grid-like layouts using floats. We’ve now got Flexbox. Flexbox is fantastic. It’s really great, as long as what you’re trying to lay out is essentially one dimensional — so you’re trying to lay out a row or a column.

You see a lot of people trying to turn Flexbox into a grid system. It’s hard work, because it wasn’t designed for that. I actually replied to someone this morning and did a quick example for him, to show the difference between what Flexbox is and was Grid is, because Grid is two dimensional. So you can lay things out it both rows and columns out at the same time.

The specification’s been around for about four years I think now. It actually came from Microsoft to start with, this kind of version of it. Although, some of the ideas have existed in specs for longer than that. Microsoft implemented an early version of it in IE10, and it’s been under development as a spec ever since, and is now behind flags in Chrome, and in Firefox, and in Safari (in the developer preview version).

So it’s coming. The specs are almost completed. Then there’s obviously going to be a big process of testing and making sure it’s all all right before the flags are removed and it gets out there. But there’s an awful lot of stuff that you can play with now.

Tim [7:53]:

It seems like right now, on caniuse, you’re right. It’s behind a lot of flags, and Microsoft seems to have the best support for it, which is traditionally unheard of, but very exciting to see. It seems like what you’re saying is we can expect it to, not soon, but quickly, come to be usable on all the evergreen platforms.

Rachel:

Yeah, definitely. Probably early next year at this point, just in terms of release cycles and things like that, and where people are. If you enabled the flags in a browser, I’ve got tons of examples people can look at.

There’s just a lot of stuff that works. I think what we’re going to see is quite different from how Flexbox came into being. With Flexbox, it appeared behind vendor prefixes, so people could start using it. Then it changed, and then it changed again. Then everyone said, Ah, this is really buggy, and felt not very confident using it.

It’ll be very different for Grid Layout, because all of that changing and messing around with the specification and the implementations has happened behind the flags. The only person this has really affected is me and my examples, and obviously the browser vendors who are implementing, but we haven’t got lots of websites relying on something which is experimental, essentially.

So I think that people will be quite surprised when it does come out, that it’s going to come out cross-browser, and fairly standard across browsers, so people will be able to use it and rely on it.

Tim:

That is a very exciting prospect. You actually wrote a book called, Get Ready for CSS Grid Layout, with A Book Apart. Is there anything interesting, or exciting, or unexpected you learned about Grid Layout while writing that?

Rachel:

At the point I wrote that I knew the spec pretty well. I’ve been working with the spec, really since I first spotted it in IE10. I’m now an invited expert to the CSS Working Group, and layout stuff is the thing that I look at really.

So it wasn’t so much surprising. I think what I find exciting about the spec is when I present about it to the people. I mentioned at the start, I’ve been traveling a lot, and a lot of that is going and speaking at things like An Event Apart and so on, about CSS Grid Layout, and showing people the examples.

People are just so excited when they see it, because it solves so many layout problems. It’s one on these things that you think, Well, why haven’t we had this before? You know? I think that’s the cool thing about it, is actually explaining it, and people see how simple it actually is to use, and getting excited about it, and looking forward to having it. That’s really cool.

David:

I think developers fell in love with Flexbox as soon as they saw it, because it solved so many of the problems that existed with existing layouts, with floats, etc. Now that they’re seeing Grid, I think it’s a new opportunity to fall in love all over again. I’m curious if you see this as something that’s going to compliment Flexbox or something that’s going to replace Flexbox, and where people should be preparing for that.

Rachel:

This comes up all the time. These specifications are complementary. They’re for two different things. As I mentioned, the big difference is that Flexbox is one dimensional and Grid is two dimensional. The other way of looking at it is that if you have a bunch of items — say some navigation or whatever — and all you really care about is that the layout method looks at how big they are and spaces them out nicely, well that’s a use case for Flexbox. If you want to create a grid, and then chuck items at it, and say, Now you need to comply with the lines of this grid, that’s what a Grid’s for. Flexbox is more of a content out approach, and Grid is more saying, Here’s the structure, and this stuff has to go into it, and has to fit in it.

What we’re going to see is people using the two together, because in your design you’re going to have some things that you want to fit into that structure, and you’re going to have other things — you’re going to want the content to space out, depending on what you’ve got in there.

There’s a lot of similarities. There’s a spec called Box Alignment, which is essentially all the nice alignment stuff that’s in Flexbox, but taken out into a separate spec. Grid Layout uses that spec for its alignment, so the alignment properties are exactly the same across slightly different names, because obviously we haven’t got Flex containers in Grid Layout, but how they work is the same across the two layout methods.

So I think if people know Flexbox well, they’re going to find what they understand of it is going to transfer very well to Grid. You’re just working in two dimensions.

Tim [12:14]:

Is there any relationship between Grid Layout and CSS3 Multi-column Layout?

Rachel:

No. Again, different layout method. That’s a different way of laying out content. There’s some similarities, and we have grid-gap in Grid Layout, which has column-gap and a row-gap properties, which works pretty much the same way as column-gap in Multi-column Layout. They’re quite different things. Multi-column does the nice thing of just flowing the content and re-flowing it depending on how many columns come in, so a slightly different way of doing things. I think these things are all going to work together, depending on the sort of layout you’re trying to achieve.

Tim:

That’s definitely exciting, and will certainly make my day job a lot easier.

Rachel:

Yes. It’s very cool. It’s a really exciting time to be working with this stuff. I feel very fortunate that it still is exciting, as it was for me, nearly 20 years ago when I started doing this.

David:

I think that’s what keeps us all in the game — the fact that it keeps on changing, and new stuff constantly coming along.

Rachel:

Yeah.

Tim:

Speaking about long times ago, do you want to talk a little bit about how you got started in the industry?

Rachel:

Yeah. I can do. I’m actually an ex dancer. My background, I trained to do dance, and I went to college to do dance. I eventually stopped dancing and went backstage, and was working in technical theatre. Then I got pregnant with my daughter. That daughter is now 19. She’s just gone off back to college.

I really didn’t have anything to do with myself or anyway of earning money, because I had trained to be a dancer and worked in the theatre. That’s all I really knew. What I did know how to do was type. I thought, Well, I’ll get a word processor, because I could take in typing while I’ve got this baby, and I’ll be able to do that. That would be something I could do at home. I was sold — by a PC world employee — instead of a word processor, I was sold a computer. The computer could be connected to the internet.

From that, I discovered the web, and the fact that you could publish stuff to the web, and in fact that you needed to build a website to put your stuff out there at the time, because there was no Facebook or anywhere to put your photos up. I just started learning this stuff because I wanted to be able to communicate. I wanted to be able to put my stuff out there online. That’s really where it all started — just teaching myself this stuff because it looked interesting.

I was fortunate, because at that time you very quickly became the person who knew about websites. A friend who had a charity said, Oh, could you help us out and build us a website? so I did. These things led on to various low-paying bits of freelance work, but ultimately led on to being able to get a job in the industry, actually working for a dot-com company back in 2000. That was really how it all started.

David:

I love that. It matches a lot of people’s stories. Everybody started off as a dancer.

[Laughter]

Rachel:

Just a really obvious move, yeah.

David:

Exactly. More seriously, a lot of people, we’ve found, have gotten into this industry without any formal computer science training or development background. They dove in because they had problems that they wanted to solve. I’m curious, now that you’ve been involved in things, have you gone back and gotten any training? Are you completely autodidactic at this point, just teaching yourself things as you need them?

Rachel:

Yeah, I’ve not got any formal training. I’ve occasionally gone and done bits and pieces online. There’s things that I’ve wanted to find out about, or I’ve wanted often to fill in gaps in my knowledge, because I haven’t got a computer science background. Sometimes I’ll read something and I’ll think, Well, what does that mean? Particularly doing stuff with the CSS Working Group. I’m talking to people sometimes who are browser engineers, and they’ll say something, and I’ll be thinking, What on Earth is that?

It’s because I just don’t actually know what the term is, perhaps, that they’re describing, because it’s not something I’ve ever come across. I’ll often go and do some reading just to fill in those gaps in my knowledge. Then when I read I think, Oh yes, I understand that. I understand that concept, I just didn’t have the words for it, because I don’t have that formal training. That’s interesting to me. I love learning. I love learning about different things and different aspects of what we do. That’s part of what makes it fun to me.

Tim [16:28]:

Do you find ever that it’s harder to keep up to date as the web platform picks up speeds and continues to move at an ever-growing pace?

Rachel:

Yeah. There’s so much. I think it must be very difficult for people coming into the industry at this point, just to know what to focus on. I think that I have a benefit. I’ve been doing this for so long that I’m not afraid to look at something and say, Well, if I need to know about that I’ll have a look at it when I need to know about it, and not feel that I’m missing out, or that people are going to think I’m stupid because I don’t know this thing, or whatever, because there’s just too much stuff.

I focus on the things that I focus on. Even within CSS there are things that I have a rudimentary knowledge of. Obviously if I needed to use them, I could go and find out more, but because I don’t ever use them I don’t have a huge knowledge of them. That’s fine, because there’s so much stuff now. I think you do have to get a bit of an overview, what’s out there, what might it be useful for, and then just put it to that side and say, Well, when I have that task, I’ll go and really dive into this and figure it out, because you can’t learn everything like you could when I started.

David:

I think that it’s very difficult for some people. I know I have this problem myself when I learn something new or learn about something new, sometimes I just want to dive into it, like Grid Layout for example. It might be the sort of thing that people might think, “Oh, I’m not going to use that today, but it sounds exciting and I want to learn all about it, and it’ll take me down one of those rabbit holes.

Rachel:

Yeah. There’s loads of conference presentations, things like that. Now, people just publish them on Vimeo and YouTube, even if you can’t get to the conferences. They can be a really good way of just getting an overview — like one of my talks on Grid Layout, for example. You could watch that — watch an hour of video — and have enough of an idea that, Yeah, I know how this kind of works. I know what problems it’s going to solve, and just have a bit of an idea.

Some people are going to then be very interested and want to play around. Others are going to say, Well OK, I know a bit about that. I know where to go to find out now, and just put it to one side, because it’s not a focus today. Podcasts as well. I do a lot. I’m a distance runner, so I listen to industry podcasts while I’m running, and that just gives me an overview of all sorts of things. They’re just there then, in the back of my mind, for when some problem comes up. I think, Oh yeah, I heard someone talking about that, and can go and dig it up and investigate it further.

David:

That is how we tap into the group mind. I love that. One of the things I appreciate about your career, the version that you are, is that you’ve also taken the responsibility onto yourself of going out and teaching and sharing your information with other people.

Rachel:

Yeah. That’s always been important to me. It goes back to how I started in this. I found these various groups — usenets at the time — and a few forums and things where people were sharing their knowledge. People were learning things, and they were teaching it to everybody else. If you wanted to do something, there’d be someone who was a little bit further along, who would say, Oh yes, this is how you do that. I’ve done it; here’s some code.

So the minute that I got up one step of the ladder, I felt like I needed to do that too. I needed to turn around and help the next person who was coming on and saying, Oh, how did I do this? How did you get this to work? I felt it was my responsibility almost, to give back and to help the next person to make that first step.

So that’s just what I’ve done. Along with that, I’ve learned how to teach, and I’ve learned which things work and how I can explain technical concepts to people. Really, that’s all I’m doing. I’m still taking an awful lot from other people, and learning how to do things from other people, and I’m trying to give back in the same way, the things that I’ve learned.

David [20:14]:

You don’t wait until you’re the ultimate expert on something before you go out there are start teaching what you know.

Rachel:

No, no, because there’s always someone who is just a step behind and needs to know the things you do. One of the really neat things about this industry is I can go along to a conference, and I’ve been in this situation where I’ve been at a speaker dinner and one of the other speakers is the same school year as my daughter. I could literally be their mother, yet they know something specific about some part of — whether it’s JavaScript, or whether it’s back-end stuff, or whether it’s design — they know something I don’t. They’re able to teach that from a stage to me and to other people. It doesn’t matter if you’re 18, or if you’re 65 or whatever. You’ve got things that you know, and that you can share, and you can teach. It doesn’t matter if you’ve only just started in the industry.

Sometimes I think beginners have a much better way of passing on knowledge to people who are just a couple of steps behind than someone like me has. You get to a point when you’re quite experienced where you think, Well, this is easy. Why doesn’t everybody know this? Because you’ve got all this knowledge behind you that you don’t realize you’re leaning on. Sometimes I think, actually, people who aren’t much more than beginners can be the best teachers to people that are just one step behind.

Tim:

That certainly is very good advice. Speaking of advice, do you have anything general that you would like to leave — I guess any advice that you’d like to give to people who are just getting started in their careers and are looking to reach the same level of success that you’ve reached in yours?

Rachel:

Learn HTML, and CSS, and JavaScript. Do that first, and then look for the tools that will help you solve the problems you encounter in using those things to build the things you want to build. It’s very easy now to jump straight into a framework, or to jump straight into Sass, for instance, or to jump into the tools rather than learn the basics. More and more, I’m seeing people who seem very competent, but seem to be missing great bits of understanding — about just how the web works, and how things go together; basic things like how HTTP works, how does a redirect work, and very straightforward bits of information that you miss if you jump over the basics part.

It’s kind of easy to jump over the basics part now, because you can go into one of these frameworks and they’ll hold your hand and protect you from all that stuff. There’s nothing wrong with them, but you need to understand the basics before you jump into them.

So for anyone who is new, make sure you actually understand how to build a simple website just using HTML, and CSS, and some JavaScript, and you understand how everything links together, because then you’ll be able to use these tools to speed up your workflow, to enhance what you’re doing, and take away all the dull, boring jobs. There won’t be patching in the lack of knowledge, which I think is where it’s a problem.

Tim:

That is very excellent advice, and definitely something that I’ve been hearing from a lot of people in the industry. Learn the basics first. It will help you so much. It’s refreshing to hear, and I think, great advice for a lot of our listeners. One to two years from now, CSS Grid Layout, everybody’s using it, everybody loves it. What’s next for you?

Rachel [23:38]:

I think in terms of CSS, there are lots and lots of really interesting things becoming possible — and becoming possible far more quickly, and getting into browsers far more quickly due to the fact we’ve got these evergreen browsers. I think there’s probably going to be an obvious thing that I’ll end up becoming interested in as Grid gets out there.

Of course, these are Level 1 specs — Grid, and Flexbox, and so on. This is the first version of them, essentially. It may well be that we move onto looking at what goes into Level 2 of Flexbox and Grid. There are certainly things that people have discussed that may well end up in those specs.

I’m interested in things like Shapes and Regions, and all kinds of specs that are just fascinating for doing layout and other things. I think there’s plenty in terms of CSS that’ll keep me busy, and also with our product, Perch. so I don’t think I’ll be slowing down any time soon!

David:

Since you’re putting this into application right away, you’re in a position not only to help figure out how to use these things, but also to define where they’re going to be needed next.

Rachel:

Hmm [affirmative].

David:

Where can our listeners find out more about you online and find out how to see your presentations on Grid and on other things?

Rachel:

I’m @rachelandrew on Twitter. That’s generally where I tend to post things first. My website it rachelandrew.co.uk, and that’s where I blog and post things. You’ll find my presentations and so on there.

There’s lots and lots of CSS Grid Layout examples at gridbyexample.com, which is my repository of Grid bits and pieces that I build as I play around with the spec.

David:

Fantastic. Thank you so much for being on the show today.

Rachel:

It was great to be here.

---

David:

It’s fascinating how many people get into this field without a background in technology, but with a background in theatre.

Tim:

Yeah, not only that. It’s inspiring, because I like to hear — especially as someone who again, doesn’t have any classical training in this industry — it’s inspiring, because it reminds me that the only thing getting in my way is my desire to learn and my drive to just continue working at this. It’s not a closed-off industry, wherein you have to have a very specific degree and a pedigree before you can start doing any work.

David:

Absolutely, and not only just doing the work, but going out and teaching and instructing, giving information back. Rachel is certainly one of the experts people turn to now, and she started off just saying, This is a little thing that I know that maybe some people don’t know, and I’m going to share it and put it out there. Who among us doesn’t have something that they’ve gotten into deeply enough that they could share it with the next person who just might not know as much about that one topic?

Tim:

Yeah, definitely. There was very big element of humility when she was talking about how she went and there was a 19-year-old speaker just like her daughter, but she had something to learn from that, and was just all ears and excited to hear about what that speaker had to say.

I think that’s something I really enjoy about our industry. There is not this element of, O, well, you have been around since the web started, so you certainly know more than just everybody else. It seams that most people that I encounter in the industry are excited to hear from anyone who has something to say. I think that’s something we can credit to our industry for being so successful so quickly.

David:

I was fascinated to hear what she had to say about Grid layouts. Honestly, from a practical perspective, it’s not something that I’ve really given much thought to yet, because it’s still behind browser prefixes, and I tend to be fairly conservative about what I incorporate into my code. I try not to depend on something where the spec might be changing or it might be evolving, so I tend not to do too much with things that are vendor prefixed.

Tim:

Yeah. I’m definitely the same way, especially working for a product that has to work on more than just the evergreen browsers. What I really need to do, I think, is just hop on CodePen, probably in Firefox or Internet Explorer, which I’ve never said before in my life, because that has the best support, and just start playing around with it. I think we both certainly know that pretty soon this is going to be the only way that you are writing layout in CSS.

David [27:52]:

I’m excited to see this one coming, and the way that it’s coming out. It sounds like for once, a new standard is emerging that is being finalized and agreed upon before it starts seeping out into the code. I hate to say that, but I think that it’s because it’s being driven by Microsoft and by Internet Explorer — something that most developers probably won’t want to try until it’s been given the credibility of being part of Chrome and Firefox.

Tim:

I do enjoy the difference with this specification. A lot of times you’ll see things getting out, and each browser has it a little bit differently, and then over a few years the standards come together, and then something is finalized, but it’s already been out there for a long time. It’s refreshing to see browser engineers and spec writers coming together to agree upon it beforehand, because I feel like that prevents a graveyard of old vendor prefixes in your code.

David:

I was even slow to adopt Flexbox, and it was largely because the spec was evolving as people were using it. And that squicks me, when I get into a situation like that.

Tim:

Yeah. Definitely with Flexbox, especially because at some point there was almost two completely distinct syntaxes with Flexbox. I remember that. In fact, if you use Autoprefixer for CSS and you support something like three or four versions back, you write display: flex and you’ll probably get four to five different ways of saying that, with the browser prefixes and with the different — I’m pretty sure it wasn’t even flex at one point. It was just this weird way of doing it. I’m certainly happy to see that’s not going to happen with Grid.

What I’d like to see, and I’m curious if this exists, because what I hate having to do is turning on browser flags so I can just play around with something. I’d like to see if there’s a JavaScript polyfill for Grid that enables me to write what will be the Grid syntax, so that I don’t have to, in Chrome, turn on a flag before I can start using it. If that exists — I probably should have asked Rachel — but if that does exist and you, dear listener, know of it, please let us know, and we’ll certainly share it with everybody else.

David:

I wonder: JavaScript polyfills, or maybe it’s a Sass thing. I know that when I started using Flexbox, the reason I was comfortable getting started with it was because I was able to generate things and write something standard in Sass, and then have it generate out all of the prefixed and various, the ones that support the different browsers, just by having my CSS pre-processed that way.

Tim:

Yeah, that’s true. It’s funny. I use Sass, but I use probably the least amount of features that Sass provides. I can’t remember the last time I actually wrote a function or a mixin with Sass. Mainly, I use it for nesting purposes, variables, and that’s probably it. You’re right. There are definitely ways to have those polyfills enabled without JavaScript. That’s an important distinction to make.

David:

I was really intrigued that one of the points that Rachel made is something that, I know it’s one thing that I’ve come to personally after years of trying everything out there, was the notion that it’s very important to start with vanilla HTML, vanilla CSS, and vanilla JavaScript, before adopting all of these libraries and all of these other techniques. I think what she said, it really resonates with me, because it’s possible to become so dependent on those libraries that are much more subject to change than something that has a standards body behind it, like the vanilla standards.

Tim:

Yeah, that’s certainly one of the issues that I have with a lot — and I’m not saying all, because I couldn’t possibly know this — but with a lot of boot camps when they’re teaching developers. They start with maybe a week of each HTML, CSS, JavaScript, and boom, All right, now we’re going to learn Ruby on Rails and React. It’s like, “Hold on a second, you couldn’t possibly learn all of these things enough to be able to explore intelligently, tools, libraries, and frameworks, with that little amount of time spent on each of those things. I was fortunate in that, when I started to learn HTML, CSS, and JavaScript, I didn’t really know about tools, or libraries, or frameworks. I was naïve enough to think that everybody just writes plain HTML, CSS, and JavaScript, and PHP, and that’s how the entire web works.

I think a lot of developers getting started now, they hear, and certainly every time someone emails me a job offer, the first three things I hear are Redux, React, and Webpack. Throwing that out there enough, developers are going to think that this is how we build for the web, these are what these technologies are built on. When you come at it from that angle, once Redux, React, and Webpack are left behind, as all of them are, not saying they’re not good technologies, not saying that they don’t currently solve problems, but eventually new technologies take their place. If you started learning those things, it will be so much more difficult for you to move on to the next thing.

David [33:08]:

I wonder how it’s going to be for those people, like the 19-year-old who was giving a presentation that Rachel wanted to learn something from. These people, they’re like the sacrificial lambs on the alter of the new frameworks out there. I think eventually at some point in their own careers, they’re going to come to the point where they realize, Oh, you know, that framework I was an expert in last year, it’s now completely changed and it’s a different thing. Now I’m doing this new thing. What’s constant? What underlies all of these things? Then they’ll also notice that, Oh yeah, the semantic HTML, the core CSS, the vanilla JavaScript, these are the things that I need to know if I want to keep being able to adopt the next framework, the next library that’s going to help me. Honestly, these days you do need to be able to adopt those things comfortably, without forgetting the fundamentals.

Tim:

Yeah, it is interesting. I was thinking when Rachel was mentioning that, what is it that really causes developers to sometimes skip these fundamental steps in their knowledge? I think it’s the fact that we, in our industry, expect people, or we praise the rising stars and the young speakers. There is an element of ageism in our industry. I think that if I really wanted — I’m 18, 19 years old — someone to listen to what I have to say, and to just skip ahead to the point of having a hundred thousand followers on Twitter, and speaking at every conference, I’m going to want to learn what is being taken interest in and praised as quickly as possible.

I might be very motivated to skip those fundamentals and dive right into the current and most exciting technology. I would urge you, if you’ve ever felt that, it’s not worth it. This is your career that we’re talking about here. The fundamentals will never change. The most exciting and popular technology will always change. If you crave that stability and security in your career, definitely chase the fundamentals. Listen, I’m still learning the fundamentals. David, I’m sure you sometimes are still learning the fundamentals. You can always go deeper in learning how CSS, HTML, and JavaScript work.

David:

Absolutely. It gives you an opportunity to refocus. It’s almost like a meditation, to go back into the basic semantic arguments: what HTML element should this be? What does it represent, and why? If you can’t answer that question intelligently, then you don’t understand your fundamentals.

Tim:

I’m reminded of the parable of building your house on a foundation of sand rather than building your house on a foundation of stone. That’s what that reminds me of.

David:

I can see that. I can see that. This has been a good show. We had an opportunity to really dive into the philosophy behind how we approach our careers. It’s great to have an opportunity to do that.

Tim:

Yes, definitely. I was excited to talk about CSS today — not because it’s a new, exciting technology, but because I really believe that from now until forever, we are going to be approaching CSS layout in a much different way than we have traditionally. I’m excited that we got to talk about that with probably the most qualified person to discuss CSS Grid Layout with. So, great episode. Hopefully our listeners have learned a lot from Rachel.

---

Thank you so much for listening, everybody. We always enjoy getting to talk technology with all of you.

David:

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes.

Let us know how we’re doing.

Tim:

We’ll see you next time, and we hope you enjoyed this version.

Frequently Asked Questions (FAQs) about CSS Grid and Rachel Andrew’s Expertise