Year round learning for product, design and engineering professionals

Video: in conversation with Jen Simmons

Jen Simmons
Jen Simmons hosts the very popular The Web Ahead podcast, is on the W3C CSS Working Group, works as a design advocate at Mozilla, and has 20 years working on sites for the likes of CERN, the W3C and Google.

Her current focus is layout for the Web, in particular new layout capabilities in CSS, like Flexbox and Grid, about which she speaks and writes extensively, and about which she spoke at our recent Respond conference. While Jen was in Sydney we sat down and spoke about these new layout capabilities of the Web, how being always connected changes the way our social networks have changed, and much more. It was a long, but very enjoyable chat, and I hope you enjoy it.

As always, the transcript is below, and you can find more video conversations in this recent series, including with

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week’s best reading and watching on all things Web. And you’ll get a complimentary digital copy of our brand new magazine, Scroll.



Full Transcript

Jen
This is the first time I’ve been to Australia.
John
Oh that’s right, your first time you’ve been to the hemisphere.
Jen
Yeah.
John
See, Americans have a real thing about hemispheres. They invented a whole hemisphere called The Western Hemisphere. Like, it’s a big deal in America to have this Western Hemisphere, right? Whereas, it strikes me, there are two in the world. There’s the one on the top and there’s the one on the bottom.
Jen
Yeah, well that’s what I mean. I left the Western Hemisphere, I’ve been to the Eastern Hemisphere, but I’ve never left–
John
What are these things? Who ever talks on the Eastern Hemisphere?
Jen
Well, my grandfather had a big like a very fancy certificate on the wall that he had gotten the day that he had crossed the equator for the first time.
John
Was he in the Merchant Navy or something?
Jen
He was in, yeah, he was in the US Navy.
John
If he is still with us you can ask him, but he’s not still with us, there used to be terrible hazing rituals in the British Navy when people crossed, even Charles Darwin, I don’t know if he diarized it in the diaries of Journey of the Beagle, but there are these, I think there were particular offerings made to some punitive god of the, you know, anyway.
Jen
I have no idea, I just know that that certificate was a point of real pride.
John
Right.
Jen
And it struck me as a little kid like, “Crossing the equator is such a big deal.” So I just crossed the equator for the first time. Last night.
John
That’s the first time you crossed the equator?
Jen
Yeah.
John
Many years ago I lived in the UK and I had this friend who was much older I’d met there, you know, much older, he was probably my age now but this was a long time ago, and we talked about how if you thought back to the time of Chaucer, or the periods even before the train, you know 140, 150 years before that, you know I had this thought of people leaving home walking up, we were staying in this little village doing something I can’t remember quite what, and walking up the hill and looking back, perhaps for the last time in years, on their hometown as they went off to Rome for a pilgrimage or, or maybe they’re walking tradesmen who, you know, when was the next time? So even when I traveled then, this is in 1990 when I first sort of traveled for some years, people didn’t use the Web, it didn’t exist, and people barely used the internet, we called it “internet” by the way, we didn’t have the, “the” came later. But you left and you were sort of removed from your past life. You were gone. And I guess like your grandfather going in the Navy and he might have got a letter from his parents and sent a letter once every few months. Whereas now we’re always connected. And you know, you got off your plane awaiting, you know, emails and Twitter feeds and whatever.
Jen
Yeah, I’m texting with my neighbor to see how my dog is.
John
And now on the plane, you probably had wifi, and you weren’t even connnected, you weren’t even disconnected while you’re on the plane now.
Jen
Yeah, I didn’t turn it on.
John
We’re connected everywhere.
Jen
Yeah.
John
In a very short period of time we’ve gone from this idea that, for almost all of human history we would be disconnected from our networks for long periods of time. And we would therefore forge new ones. And now we’re never disconnected. I wonder what the long-term implications of that might be?
Jen
I dunno, it’s a radical change in the way that what it means to be a human being, and what it means to have relationships with other people. I don’t think we’ve really let that sink in. I think it’s changed very drastically in the last, even in the last 10 years. The difference between having Twitter and not having Twitter. Using RSS or going to peoples’ blogs manually verus just opening up Twitter every morning or every afternoon.
John
It’s almost like a push medium now.
Jen
Just this constant stream, constant stream, of just thousands of pieces of information. I don’t think we’ve caught up to that at all, I think it’s impacted our lives in very drastic ways and we don’t know what that is yet.
John
Yeah. I mean, we often worry about or are concerned with implications for business models and you know, traditional media that has been pivotal to our lives from 150 years, kinda doesn’t even know how to make money anymore in the life for this, but you know, in the context of having this sorta always-on always-connected world. But I think you’re right in observing that it actually changes about being human, which is far more important than business models and media companies, right?
Jen
Yeah, yeah.
John
You know the whole Dunbar number, if we really only really have the capacity as a human to really remember 250 or so strong connections with people. In the past, those connections would come and go over a lifetime. You would go to college, and you would then go to another place to work, and some of those things would fall away. Whereas now we sorta take all of them with us. We take all of our relationships with us where ever we go. Because they’re mostly not physical relationships, the connections aren’t, you don’t need to be in the same room or the same city as someone anymore to keep up that very strong connection. I think there are a lot of positive things about that, but I do wonder what else it means.
Jen
Yeah, and there’s people who’ve written a lot about his extensively, or studied it, but I feel like those of us who make websites and teach each other, and have strong ideas about how to make websites, we’re not talking about these things very much at all. And even trying to have a conversation right now about it, I feel like well, everything I might have to say about that is so infant, it’s so unpolished.
John
Speculative really.
Jen
It’s just so, kinda amateurish, when there are psychologists and sociologists who’ve studied this more extensively. Like, Sherry Turkle has some great work out, like I keep wanting to have more time in my life to slow down and to read a lot of those books, and to just–
John
But then there’s another Twitter feed to read.
Jen
Be more deliberate in my own choices about not necessarily opening up Twitter at the very beginning of the day. Waiting until lunch or something, or you know, being more deliberate about what I wanna focus on and spending time on that, and less consuming information, just pouring information in ’til I get completely overwhelmed and just get up the next day and pour more information in (laughs), and get overwhelmed and pour more information in. I mean in some ways it’s been really helpful to do that. I’ve been able to do a lot of the work that I do by doing that. But then on the hand, there’s a weird way in which I think it’s, I think we’re full. I think a lot of us are really full now, and we are ready for something else, and living our lives in a different way.
John
So we had the slow food sort of idea in particularly the 90s, and some other sort of slow approaches. I’m probably alluding to other people’s ideas here, like slow conversations, or slow reading, almost deliberative approaches to slowing down, as you say.
Jen
It’s hard because I wanna know what my friends are up to. And Twitter or other things like it give me a way to quickly keep touch with, keep track of, keep in touch with dozens of people on several different continents very very quickly. And those are real connections. But mixed in with that is also a lot of noise, and it’s that noise that can kinda get, and I don’t have time to separate all of that out.
John
It’s almost like you need the noise to get the signal.
Jen
Yeah.
John
And the signal is important but we actually we lose a lot by having to wade through all that noise.
Jen
I do see people doing things though, like opening a bunch of private Slack channels and just being in little conversations with a dozen people, five people, two dozen people, and having a lot more signal in those spaces and then spending less and less time in the spaces that are more noise and more public. Which is bad in a way, because it feels like that was one of the great things about the web, is this kind of open conversation that anybody could get involved with, and yet a lot of it’s now being private, you have to be invited to the little group, you have to know somebody, you have to be friends with them already to kinda get in the door.
John
Yeah, and then one of the great problems of the web is you open yourself up to ideas that, you know, you’re not simply in an echo chamber, however, as we’ve seen particularly with, particularly with a lot of women, in recent years, well, going back a long way, but certainly gaining more understanding of just how prevalent this is, you know, being exposed to horrendous attacks and vitriol. So you know, the response being, you know, we need to create walls around ourselves. But the unfortunate thing is that they will also limit positive as well as negative kind of random connections and so on. It’s almost like we flipflop between the desire for openness and then we realize the negative of that and we kind of withdraw back within our castles and then kind of sneak out again. It’s probably something we’ve seen oscillate for the last 20 years online. Interestingly enough it leads me to, I didn’t realize until very recently, you’re in Missoula now, so how long have you been there?
Jen
I started in August last year.
John
Okay, so you were there for about six months before I realized that, so (laughs).
Jen
Yeah.
John
I don’t know whether I wasn’t paying enough attention, or–
Jen
Or I didn’t promote it well enough (laughs).
John
Right.
Jen
Probably both.
John
And so your job though, in your job description, you say you’re a design advocate.
Jen
Designer.
John
So we see this term of a developer advocate used quite a bit, I think Google uses that term to some extent, and probably others as well. So you’re a design advocate. And you spend your time researching the coming revolution in graphic design, sounds like a pretty awesome job. But I wanted to start by asking well what is the coming revolution in graphic design on the web?
Jen
So the way I see it these days most websites are designed with a lot of variation and a lot of attention and effort put into typography, and maybe a little bit of color palette, there seems to be a lot of the style right now, the trend right now, is to not have a lot of other things going on as far as drop shadows or backgrounds, this whole flat design movement. Which may or may not stick around. But then there’s almost no attention and no conversation about page layout. It feels like everyone takes that very carefully crafted typography, that incredibly simple modern idea of visual design, and they pour it into layouts that we’ve been using for 10 or 15 years. You’ve got a header across the top of the page, you got a sidebar, you got a footer, and you got a main content column. Or maybe you’ve got like, a big chirographic or a carousel, and then you’ve got like a paragraph that’s centered, and then you have three paragraphs next to each other with icons, and then (laughs).
John
So basically the Bootstrap–
Jen
Yeah!
John
Style of–
Jen
Basically it’s like the four layouts that Bootstrap comes with. You know, a handful. There’s many a half a dozen of different layouts that we see over, and over, and over again. And recently there’s been a couple tweets actually, that have gone around. Jokes where people have said, you know, kinda made reference to how bored we are, made reference to how everybody’s doing the same thing. And those tweets, those blog posts, just blow up. Which tells me that a lot of people feel this pain right now. A lot of people are just completely bored. Part of the reason that we have those layouts is because we were doing everything with floats, CSS floats. And floats have a lotta, you know, float were never designed, that part of CSS was never designed to really do a layout.
John
It was discovered that could be used in that way, but it certainly wasn’t just–
Jen
That’s not what it was for.
John
What it was actually designed for was sort of cutout effects and–
Jen
Yeah, like having a photo and then getting text to wrap around the photo.
John
Which no one seems to do!
Jen
Right, because we’re putting everything in the column and the photo’s just all the way across.
John
Right.
Jen
But there’s some certain things about floats that have limited us. Like, for example, you can’t have a bunch of photos of different sizes and shapes all laid out on the page. You end up with all these empty blocks and empty spaces that look broken, because of the float drop problem, where floats, you get four across and the next one doesn’t go here, it goes like–
John
Below the line.
Jen
Gets caught on whichever one is the tallest one. So what did we do to solve that problem? We just made every photo a square, or we make every photo the exact same aspect ratio. Maybe it’s a rectangle, but they’re all the same height as each other, they’re all the same width as each other. Everything’s always like–
John
The grids a very, very simplistic grid.
Jen
Oh my god.
John
I guess that these are responses to the constraint of the technology.
Jen
Yes!
John
All design is within–
Jen
Part of it’s trends. And part of it’s, you know, we don’t have enough time to invent everything from scratch every time. We learn from each other, we get inspired from each other. So some of that’s normal. But a lot of it is the limitations of the CSS that we’ve had. It’s the limitations of the technology itself. And those limitations are changing right now.
John
So, we’ve certainly had experiments with shapes and regions. Is that something that you’ve got in mind?
Jen
Well yeah, I mean we have flexbox which is–
John
But even stepping back before we get to those very complex kinda layout systems, this print design of being able to flow text around arbitrary shapes.
Jen
Right. Instead of around a rectangle, you can float around a circle or a polygon.
John
I mean, is that the sort of thing you have in mind?
Jen
Yeah. I mean, there’s a lot of different pieces. Some of them are big pieces like flexbox regions and the alignment specification. Some of them are small pieces like shapes, which lets you flow text around a shape that’s not a square, you can flow it around a circle. Clip-path, which lets you cut something into something that’s not a rectangle. ‘Cause by default, every time you put anything on a page, it’s a rectangle.
John
Right. Well that’s the box model right there.
Jen
It’s the box model! Everything’s a rectangle. But before we used floats, before we used CSS, when we were using table-based layouts, we were using tables for layouts and everything was HTML, we did all kinds of stuff with circles. Remember all the circles? There were circles everywhere. And then we went to CSS–
John
Well also we tend to–
Jen
There were like, no more circles.
John
You know, I remember one circle was all we did, which was, you know, with the image map around, you know, it was all rendered out of terribly inaccessible–
Jen
Terrible JavaScript, terrible J–
John
Looked kinda nice, right?
Jen
Yeah, didn’t work in both Internet Explorer and Netscape.
John
When I think about the number of people whose lives were made hell ’cause they couldn’t read it, ’cause they’ve got a screen reader.
Jen
Yeah yeah yeah. So there were all kinds of problems with that, and (laughing) CSS is definitely better. But CSS, because it’s been limited to these boxes, so, clip-path is another one where you can have an object, maybe’s a photo, maybe it’s a pull quote, maybe it’s a box of color, and you can cut it into a trapezoid or into some kind of polygon, or into some sort of non-rectangular shape, so you can cut something into a non-rectangular shape, you can flow things around it in a non-rectangular shape. There’s a specification called initial-letter, which is gonna finally let us do–
John
So how’s that different from first-letter?
Jen
Drop caps. So first-letter the pseudo element lets you isolate the first letter without having to wrap it in a span, which is great. But once you’ve isolated that first letter, what are you gonna do with it? So, you say–
John
I guess the drop cap is the idea of what we’ve traditionally done with the first letter of a paragraph.
Jen
Right, if you wanna do a drop cap how are you, what technology are you gonna use? So then you have to apply a different size font, and maybe a different color, and maybe you make it bold, but in one browser it’s lined up perfectly, you want it to be the height of three lines of text, three paragraphs lines, so you make it all perfect in, I dunno, the browser of your choice, and then you open it in another browser and it doesn’t line up properly because the browsers don’t–
John
The font’s different.
Jen
The fonts are different. Or if the font doesn’t load or the user changes their font size or, it’s very very fragile.
John
That is a problem we had with absolute positioning way back in the day, and it didn’t end up being the solution we dreamt it would be because it looked perfect for the Mac, but you know, at 72 dpi, but then you go over here and the first time you ever open it, ’cause you know, owning a Mac and not a Windows machine was, was really expensive back then. I mean, the first time with this beautiful layout with absolute positioning on my Mac, and I opened it in the college Windows and was like, “Oh man.”
Jen
And it was all broken.
John
My life ended right there.
Jen
No, we need things that are robust and will work across a whole bunch of different places, under conditions that we can’t control and we half the time don’t even know about. So first-letter isolates that first letter but we still don’t have the technology that you need to make it big, and make it big in a robust way that’s gonna work all the time. And that’s what initial-letter does. You’re still gonna use first-letter and then you’re gonna use initial-letter. So you’ll say, “Oh, first-letter, change the font, “make it,” no not make it big, “Change the font, change the color, “maybe add a little margin to it.” But then initial-letter is a command to say “Make that letter be the height “of four lines of text, six lines of text, “two lines of text.” Or, and make it, by default it will just line up the top of the paragraph that it’s part of, but you can make it a raised letter, you can actually say, “Oh I want it to be higher.” So, “I want it to be the height of six lines, “but I want it to be only overlapping two lines, “and stick up three lines, or four lines.” It’s simple technology, but it’s gonna let us finally do drop caps and actually have it work.
John
Drop caps and initial-letter is I guess focusing on a very specific part of the page, but a lot of layout is really about the kind of things that we don’t see in necessarily in our phones and our smaller devices that make a lot of sense in a big device. You know, on phones we tend to have a very simple linearized kinda layout, because elements get very small very quickly.
Jen
Yes. Although, there still might be something that you wanna go ahead and do some layout with, something small, a diagram or some data, or you know, maybe you won’t do something fancy with a bunch of text or a bunch of photos, but maybe there’s something small that you wanna actually do some real layout with. And I also feel like maybe there are things that we would do on a very narrow screen that we haven’t been able to, so we haven’t thought of them yet. But maybe once we’re able to we’ll realize “Ah, actually there’s all these amazing ways.” Maybe we wanna use sideways scrolling, we’ve never used it before because it’s been a totally horrible experience, but maybe there’s a new way to manipulate a page and to use a page where sideways scrolling might matter. Like, I don’t know. I feel things are changing so radically we should be willing to ask ourselves those questions. Especially if you, you know, when you’re on a deadline for a specific project with a specific client, you really, you can’t go nuts. Maybe you add one little interesting new thing, or two little interesting new things, which can have a profound effect. Some of the most profound things I’ve seen or done myself have actually been technologically not that hard at all. Little tiny change. But I do think we need to make space in our lives or careers, it’s something that I’m definitely doing, to do bigger experiments and to try out some crazy stuff and see what happens. More like what we were doing before CSS came along or when CSS first came along, you know, the first decade of the web we were experimenting and trying all kinds of crazy new cool things.
John
The very famous Creating Killer Web Sites.
Jen
Yeah.
John
Do you remember that?
Jen
Yeah, I have it on my shelf.
John
There are definitely people watching right now who weren’t born when that book came out. I think 1996 it was the number one bestseller on Amazon, of any book, not on web design, any book. So they sold a lot of books. But if you actually go back to it and look at it, they were full of these horrendous, not all of the techniques were horrendous. You know, to get leading between lines before we had line-height, it would literally break lines into individual table rows and then add the spacing in that way.
Jen
Yeah.
John
But beyond that, you actually look at these killer designs that we just all went ape over, they’re all fluffin’ horrible (laughs). They’re really not particularly attractive designs, I guess it showed how, what came before, how impoverished from a design perspective web design was before we started working out–
Jen
Well you have to remember too though, that computer screen at that time were very low-fi. Like, they didn’t have nearly as many colors as we do now. Just a handful of colors.
John
640 by 480 was a pretty common frame.
Jen
Yeah, and the pixels were giant! So you’re looking at this screen of giant pixels with you know, a very limited color palette, and that’s what we were used to.
John
We had the web safe color palette.
Jen
Right, the 216 colors. And graphic design, we didn’t even call it graphic design for a while, we called it desktop publishing. And desktop publishing, the fonts that we had were like chunky and all bitmapped.
John
However, when it all got printed out–
Jen
No, it came out like that.
John
It looked beautiful right?
Jen
I mean, you know laser printed. Sometimes people were doing work that was beautiful, but there was also a lot of work that wasn’t beautiful on the print side.
John
Yes, I think we forget that.
Jen
In the 90s.
John
I think we look at some of the supposedly revolutionary print design of the late 80s and early 90s. It struck me as more “Oh, because we can do it, “we will do it.”
Jen
Yeah.
John
But again, that’s often experimentation as well. Like I mean, Neville Brody and the work in things like The Face magazine, it spawned you know, a million emulators. We look at it today, incredibly busy, there’d be multiple, multiple typefaces let alone weights on a single page, partly because we could for the first time.
Jen
Right.
John
It was physically possible to do that,
Jen
It was amazing.
John
And economically possible to do that.
Jen
Yeah, you didn’t have to buy the actual letters.
John
Right. Yeah, the letter set. And a lot of it was letter setted as well, and then suddenly we could do it on the Mac. I mean, this is one of these things that I know you share my great passion for, the kinda history of the web and the prehistory of the web, But I look back to this period of the late 80s and this explosion of desktop publishing creating, suddenly instead of there being a handful of magazines that were incredibly expensive to produce, there were dozens and dozens that were fragmented around popular culture, and specific sub– Not just talking about zines, which were, again, another level of kind of popularity, but actually things that end up in news agents. There was an explosion of them, because economically it became possible, and that was all driven, to be quite honest, with Mac. The Mac can illustrate well–
Jen
PostScript.
John
PageMaker and PostScript. But I think back to this cohort of kind of digital creators, were the first digital creators, writers, and editors, and illustrators, and page layers, page layout experts, who, when the web came along were ready to fill it with stuff.
Jen
Yeah, and those are the people who were on the web for a long time.
John
Because they were the people who were already using the digital tools to create. So instead of it being directed onto paper, it was directed onto the screen. And so I think there’s a reason why print has very much dominated our way of thinking about web design.
Jen
I’m hoping that we can get that spirit of experimentation back on the web, and try out some new things with the new layout technology. I hope that we don’t just say, “Well let’s do Bootstrap using “CSS Grid Layout Module,” (laughs).
John
Maybe we could go the Talmud, right which is, you know the Talmud? I’m probably mispronouncing it.
Jen
No I know what you mean, what’s your?
John
Well if you look at the page layout of a page in the Talmud, it’s incredibly complex, and a lot of people refer to it as the very earliest hypertext, because you’re embedding exegesis about a passage into another passage. Certainly by modern contemporary standards you wouldn’t necessarily call that beautiful design, but it’s very complex and rich information architecture I guess.
Jen
Well and there definitely was a spirit, even before the web, of you know, hypermedia, hypertext.
John
Oh absolutely, it’s where I came from.
Jen
“This is new, what is this, we could do anything, “what is this medium, let’s invent.” And a lotta academics, a lotta artists, “Let’s invent something new.” Or yeah, even a laser printer and PageMaker and a Mac, and you could make a magazine. And there was this spirit of do-it-yourself and anybody can now have a voice, and “Let’s invent something outta nothing.”
John
And yet now we look to–
Jen
Now it’s like “Oh I gotta business. “I gotta business, I need to grow “the way our VC funders want us to, “we’re gonna use Bootstrap, “we gotta test this stuff, we gotta–” Like, it’s just so, it feels like everything culturally has become so narrow and so specific. But I hope we can recapture some of that–
John
But maybe there are other places like 3D printing and other fields–
Jen
VR right now is the place where everybody’s going a little nuts and trying to, like, “What’s virtual reality? “What are we gonna do?”
John
So I look back to the early days of the web and I was sort of fortunate enough to have seen probably three such revolutions in my relatively long life now. In the kinda mid-to-late 70s I was quite young, but early teenage years, the rise of the pre-PC, with the first personal computers, they were expensive, the people I knew who had them tended to be doctors and lawyers and accountants who had money, but they were passionate about them. And they didn’t care that this was the future in terms of making a heap of money, They were genuine enthusiasts, and they would get together and compare their specs and so on. What drove their interest was certainly not a commercial one. We’ve talked a little bit about desktop publishing, I think it was a genuine revolution that we’ve sort of overlooked to some extent. And as I said, it was an absolutely vital precursor to the web. Because if we hadn’t had that, I don’t think we woulda had those skills and that knowledge base, and those people who could then see the web for what it was and jump into and start using it as a distribution network and a medium in of its own. And I guess, you know, those three together are revolutions that came relatively close together, 15 year period. And you know, 20 years later, as you say, we’ve had some periods of experimentation with the web but increasingly, as you say, it tends to be, you know it’s a commercial medium now. And we’re not seeing it necessarily used in that experimental way. But as I said, maybe there are other fields now like 3D printing, and you mentioned VR, where– But even then now there’s a feel with this idea well VR, with Oculus and Facebook buying it for billions, and you know, Sony, the commercial impetus certainly seems to be there.
Jen
It seems a bit like “VR might be the next iPhone, “we better get involved.”
John
“We better throw money at it,” right.
Jen
Yeah, “We better get there, ’cause last time “we didn’t get into mobile early enough. “We didn’t make the kind of money we could have made. “This time, if this is the new mobile, “then let’s get there sooner.”
John
And probably 3D printing to an extent as well. We’re seeing a lot of sorts of, I mean there’s obviously lots of money flowing in–
Jen
I feel like it’s already, it’s a bit, yeah. I do think though, that layout is, we have a chance with this new CSS to do amazing things with the layout. And I do think there are commercial advantages to doing that. I do think that you could have a much better design, a much fresher, get your audience to show up and go “Wait, wow, where am I? “I clicked a random link and now I wanna, “I’m interested to look more, “I’m gonna read this first article “but I’m actually gonna stick around “and look around the website more.”
John
We’re seeing a little bit, I mean even Bloomberg and some other major publications have certainly tried to experiment more with like kind of novel visual design.
Jen
New York Times has done a tremendous amount of work, and so has The Atlantic. There are a handful of publications I feel like I look at their work and I just see a healthy group of people who’ve been allowed, encouraged, and supported to experiment with their medium and figure out “How are we gonna do “news for real in the 21st Century? “What does it mean to have the ability “to embed data and live graphics “and video with gorgeous photos, “more gorgeous than any photos “we’ve ever had before, “and text with professional reporters, “professional writers, professional essayists, “and deliver that to an audience? “Let’s not just take the newspaper articles “and stick ’em on the internet, “let’s redefine what a newspaper is “based on what a computer can do.” The New York Times has been doing amazing work with that. And layout is a big part of it.
John
Yes.
Jen
A big part of what they’ve been doing.
John
So let’s talk a little about those technologies. Particularly I guess think about flexbox and grid layout. Now my concern with flexbox, ’cause it’s something I’ve been experimenting with in its 87 different iterations since it started, is I always have a concern about certain technologies that don’t get adopted simply because the learning curve is so significant. And my response to flexbox time and again is wow, if I’m really struggling with this, as someone who knows CSS pretty well and all these technologies pretty well, I’m not saying I’m a rocket scientist, but, you know, if I go away for three weeks and come back I find I’m starting all over again from scratch. And I know it’s probably the solution to some of the interesting things I’m trying to do. What can we do around this? Is, ultimately, flexbox like assembly? It’s a language underneath and we will use tooling on top of that?
Jen
No.
John
Or do you think it will work straight in flexbox?
Jen
I think that flexbox is a bit, right, so you alluded to flexbox… So here’s the thing. Some of the CSS properties are fairly simple, like initial-letter, it’s one line of code, shapes of one line of code. Lot of thinking went into that specification, lot of thinking went into what that would be. But when it actually went into a browser and then when it actually goes into a front-end developer’s brain, it’s not that complicated. There wasn’t a lot of discussion, there wasn’t a lot of debate. Flexbox needed some time for the CSS Working Group and for people who know what this medium is, the people who are inventing this medium, to try out a bunch of ideas and then change their minds and try out different idea and change their minds and try out different ideas (laughs). And when they did that with flexbox we were using prefixes. So all of that code went into browsers prefixed–
John
In the knowledge that it would be broken.
Jen
And we started using it. Like, authors, those of us who make websites started using it. It was like “This is awesome! “I’m gonna start using it right now.” I mean, that’s how I, I advocated for years, you should use prefixes. And things like using a prefix on border-radius was no big deal because border-radius didn’t change, because border-radius is just syntax for making a rounded corner, not that complicated. But with flexbox, the people who invent what the web’s going to be needed a chance to have running code in a browser, build some websites with it, and then change their minds about how that specification should work, change their minds about what that syntax should be. And that was incredibly messy, because like you said, we had to keep relearning it. If you made a website six years ago, or maybe I should say four years ago, then the code changed and you had to redo your website. Total mess. In some ways in response to that mess, they’re not inventing grid using prefixes. Grid is getting invented using flags. So, basically it’s, grid is even way more complicated than flexbox. Grid is gonna make flexbox look like a piece of cake to learn (laughs). But it’s happening all behind flags–
John
We’re not trying to scare anyone out there (laughs).
Jen
It’s just the reality! There is a certain level of messiness that came with flexbox, and learning flexbox, and feeling like “Oh I started using flexbox “too early and then I got burned.” That, I don’t think anybody should worry about anymore.
John
That’s more alluding to–
Jen
I know, I wanna get to your question, too. But I just wanna say that as a preface, ’cause I feel like I’ve seen, out there, a lot of people be like “Wow, flexbox was too hard! “And then it changed. “And now is it still changing? “I don’t know!” And then grid, “I don’t wanna get “burned like that with grid.”
John
Sounds a bit like me!
Jen
“I don’t wanna bother to learn it “until it’s already finished.” And it’s not gonna get rolled out in the same way. Grid has gone through a bunch of iterations, people have been building websites in grid behind flags. Which flag basically means is, with the prefix, if I wanted to make a website using this experimental technology, all I had to do–
John
You as an author are allowed to say “I want the browser to use this.”
Jen
Me as an author, I could say “I need this prefix,” and then every single person who ever went to the website would get that prefix experience.
John
Provided their browser supported that prefix.
Jen
With the flags, it’s on the user. So I could write the grid code, but you have to flip a button in your browser. And so I can’t then expect that every single one of my users is gonna flip a flag in a browser.
John
So it’s quite clearly experimental. And the reason why it’s supported is for us to learn it.
Jen To learn it. And one of the disadvantages is that not enough people are messing around with it. The people who are inventing grid need more folks like you and I to try it out and to give them feedback, and to make experiments and say, “Yeah this isn’t quite done yet. “How about if we do this, how about if we do that?” Because we need more people actually trying it out to have input. But once it’s ready, once it’s done, once it comes out from behind the flag, it’s not gonna change anymore. And people can start learning it, they don’t need to wait, they’re not gonna get burned like with flexbox. So that said, it is hard to learn how to use flexbox. It is hard, it’s gonna be even harder to learn how to use grid. I think that we, lots of times, especially those of us who write this code for a living, as a front-end developer for a living, we’re used to getting a project, getting tickets, getting marching orders and saying “Okay, you’ve got two weeks, “you gotta build this, this part of the website “is your responsibility, it needs to get done “before the end of the next sprint.” And there’s not enough time in that cycle to learn something completely new. We have to set aside some time to learn these things. We have to take time to actually go off, maybe if they won’t let you do it at work then you gotta do it on the weekend on your own. But maybe everybody at work is gonna decide “You know what, we’re gonna take this project, “we coulda done it in two weeks using old technology, “but we need to learn the new technology “so we’re gonna do it with new technology “and we’re gonna give it a month, “because we’re gonna be slow “because it’s gonna be the first time we’re using it.” It’s not gonna be slow because it’s always slow, it’s just gonna be slow because it’s new. Learning responsive web design was that kind of an investment. Learning how to use CSS in the first place was that kind of investment.
John
I feel like certainly what you’re talking about as a model of practice, is certainly not alien to anyone who’s been doing this for a long time.
Jen
Yeah.
John
Because we’ve been through these periods of significant change in the core technologies. Whereas I think there’s, you know, despite having the rise of React and other front-end frameworks–
Jen
Right! (laughs)
John
That people learn, you know, we haven’t necessarily seen this massive upheaval like we might have done.
Jen
Well that’s the thing, people are putting a tremendous amount of effort into learning React or learning Angular, or changing from one to the other, or setting up Grunt, or setting up–
John
Or going from version one to version two.
Jen
Yeah! And it’s interesting that I do see a bit of resistance to learning CSS when I don’t see that kind of resistance to learning third-party tools. It like, “The third-party tools are cool! “And they’re gonna make us more efficient! “But learning CSS? “Ugh, why would you ever wanna “invest in that time?” It’s like, because CSS is gonna be around for the rest of your career! If you learn flexbox, you will use it for the rest of your career. If you learn learn React, eh, you’ll use it until the next thing comes along.
John
Until the next thing comes along, right. So let’s step back a bit. Because we’re talking about a whole bunch of technologies, and I think there might be, to some extent, amongst quite a lot of people, a little bit of uncertainty about what these technologies are. So I guess at heart there are two core layout technologies that are coming down the turnpike. We’ve got flexbox, and we’ve got grid.
Jen
Yes.
John
And these, naively, appear to be two technologies that more or less do the same thing, they’re both very complex, you know, compared to “Well I already know how to float this left “and float this right,” and obviously I appreciate that I might get a bit more than that, but how do these fit together? Are they designed for different things?
Jen
Yes.
John
Are they designed to work together? Is one gonna obsolete the other? What’s going on?
Jen
Right. I think that there’s… It’s easy to maybe thing that flexbox and grid were made by two different groups of people.
John
Right.
Jen
The way that React and Angular are.
John
Right.
Jen
You either use React or you use Angular, you don’t use both. But that’s not the case. Flexbox and grid were made by, both, very small groups of people that are either identical or overlapping. You know, it’s the same group of people who made them both.
John
So why have they made two things? What are each of them for?
Jen
And they didn’t just make two. There’s actually, I don’t know how many specs there are. I feel like every time I turn around, there’s another one that I didn’t, like I, “Oh gosh, I need to go learn.” ‘Cause there’s flexbox and grid–
John
And you were in the Working Group right?
Jen
I just joined the Working Group, (laughing) but I don’t need– Right, so there’s flexbox and grid and then there’s alignment, which I can explain in a minute, and then, what was it yesterday I learned? This morning! I got off the plane and I was reading my email and I’m like “Sizing, intrinsic and extrinsic “sizing specification.” Like, what is that?
John
Yeah, that’s been prefixed in browsers a while, I use that a bit. I like that.
Jen
There’s just, there’s a lot of, I think there’s a lotta pieces to this puzzle. The flexbox piece and the grid piece are giant pieces.
John
Right, they’re the biggest pieces.
Jen
And a lot of the others are sort of helper pieces and side pieces.
John
Look at the round stuff as well.
Jen
Round I find very exciting. Viewport, you know, I find very exciting. But in general, flexbox came first. I think its use cases are simpler. I think it is a very powerful tool, it’s more powerful than using floats and less hackey.
John
But is it largely with the sort of problems we have been solving, obviously a super set of that, but the kind of page level layout? Where does it sit in terms of the problem it’s trying to solve?
Jen
What we’ve been doing is using floats, or especially we’ve been using 12 column, where all the columns are the same width as each other, float-based, usually Sass-based, layout frameworks. Like 960 grid, and all the responsive versions of that, and Bootstrap, and all the, right. So there are all these different, I mean, every time I turn around there’s another flexbox grid framework, which is basically trying to take flexbox and make it do what 960 grid used to do, although in a responsive way. I think it’s a terrible idea. I think it’s a absolutely ridiculous idea. Because flexbox does something that’s incredibly different than 960.gs. And grid is gonna do something incredibly different than flexbox, and incredibly different than 960.gs. And I think if you really, really want to have a 12 column, float, like the kind of layout that you’d get from floats, which is like, everything on the page kinda sticks to the top and then, like changing the icons on your iOS device. You can’t put icons at the top and icons at the bottom and nothing in the middle. All the icons are always, like all your elements in your page are always up against the top of the page. It’s another thing that, that’s what you get out of something like 960.gs. You’ve no control over rows, where with grid you do. So I think there’s a mistake and one of the things we have to do, one of the things that’s hard, is we have to really change our mental models. So flexbox is good at taking something in one dimension, taking content in one dimension, and laying it out. If you had an infinitely wide browser you have a row of content that was just all in one row, your browser of course is not infinitely wide, so it’s however wide it is, and the content wraps. So you have a row and then it wraps, and you have another row and it wraps, and you have another row. But the way the browser’s thinking about it is as if it’s one long piece and it does all these calculations, flexbox is really good at like, figuring out how big things should be and what to do with the extra space. If you wanna distribute extra space in a way that’s simple, you wanna write simple code, flexbox is your tool. But when you have multiple rows, each row gets calculated completely independently of the other rows. So let’s say you’re making a word processor and you’ve got a whole bunch of buttons in a toolbar, that’s perfect for flexbox. Maybe on a big screen they’re all in one row, but on a smaller screen they start to wrap and you got three rows or something. But those buttons are all gonna fill up the space that’s available based on the rules that you give it without really knowing anything about the other rows. What we’ve been trying to do a lot, what I have used flexbox for many times, is like a bunch of photos or a bunch of, you know, you end up with like a card that’s like a photo with a headline and a teaser paragraph, and the height–
John
Which we normally would make identically high because–
Jen
Exactly.
John
When we flow them. But of course, as soon as you get a bit of overflow of, maybe the name of a speaker, if we look at one of our designs recently (laughs).
Jen
Yup.
John
Yeah, they have one of these double-barrel names and it’s too long and it wraps to the next line and it pushes the whole box too big and the whole line just drops out–
Jen
So that’s a perfect example of the limitation of the float-based systems, is that all that content, each one of those cards or whatever they are, each one of those units of stuff has to be exactly the same height. So then you end up doing dumb things like truncating your text so that every teaser paragraph is always 42 characters, because if it’s 44 characters, it’s gonna break the entire page layout.
John
Yes, alright. So this is exactly what flexbox is best or good for.
Jen
Flexbox is much better than floats because flexbox lets you, so you have a row of items. Let’s say you’ve got three of them and one of them is short, ’cause the text is short, and one of them is long, because the text is long, the one that’s the longest of the row will determine the height of the row and everything else in the row will become that height.
John
Ah, right right.
Jen
Which is awesome. But the next row gets calculated all on its own. So the next row becomes the height of the tallest thing. But what if you wanted to find the tallest one on the whole page and make them all be the same height? No, flexbox is not gonna let you do that. And the other thing about flexbox, is let’s say you have, it’s two across sometimes and when the screen’s wider it’s three across, and when the screen’s wider it’s four across. Let’s say it’s three across but you’ve got 13 objects not 12. So you’ve got three, three, three–
John
You are describing exactly how I layout all of the speakers for our conferences. And we want different sizes for various reasons.
Jen
And that bottom row, because it’s, if you have 12 then your bottom row is even.
John
It’s like, what do we do? We leave someone out? Do we make someone more important? Do we, what do we do here?
Jen
Right, because flexbox will take that bottom row and it will calculate it so that that last one, if it’s by itself, will take up the whole space. So you have three, three, three, and one. Or three, three, three, and two. And it will take that one or two and it will make it the full width.
John
Right, which you can’t do, for example, with an nth child selector, because may or may not want to apply that rule, depending on how much space is left.
Jen
If you start putting widths on everything you can control the widths. But then you have to write all these media queries to change the widths at all these different breakpoints. And the whole idea with flexbox is that you shouldn’t have to do all that work, it should just calculate it for you. So the thing that everybody’s wanted that I walked around asking all these questions trying to find the answer to, is how do you get flexbox to just know the width of the things above and just do the same thing? And the answer is you will never do that. Flexbox will never do that. What you want in that situation is grid. Because flexbox is only thinking about one dimension, and it’s only calculating each row. Or you can go the other direction, you could do columns. But then it’s only going to calculate each column with no information about the other columns.
John
Whereas grid, by its nature–
Jen
Is two-dimensional.
John
Right.
Jen
Grid, you can easily say, “Hey I got all this dynamic stuff, “I want you to automatically calculate “all these things for me. “I need you to calculate them based on “the other items that are on the page. “in both dimensions.”
John
Now a lot its origins is with the way Windows 8 introduced tiling, so there’s a kind of a background there. I think a lot of people involved with the tiling layout of Windows 8 home screen, they’re involved with the development of grid as well.
Jen
Yeah.
John
Isn’t that right?
Jen
Yeah, Microsoft came up with grid and it’s in IE and Edge actually right now, behind a prefix. I mean, I was telling you before there was no prefixes for grid and there was no early implementation that’s changed? Well okay, except for the fact (laughing)–
John
Except for grid (laughs).
Jen
Except for the very first implementation. The very first implementation is live.
John
It’s behind flags now.
Jen
It’s not behind flags. But it is behind prefixes. And if you just don’t write those prefixes then you can ignore it. And maybe at some point we’ll start using that, we’ll write something and it will… some sort of tool like an auto prefixer tool will spit out the new syntax and translate that new syntax into the old syntax. But I don’t know. I also think there’s a good chance we might just ignore the old implementation and just pretend like it’s not there. And just look for the new implementation.
John
Well now I guess with IE moving in that evergreen direction as well, we know that, you know, and even with Safari, the WebKit preview version’s gonna be updated every two weeks. It feels like we’re finally reaching the promise that browsers are gonna ever auto-update. And for the most part, we’ll be able to stop worrying about legacy.
Jen
I think the bugger’s gonna be IE11. If people have to support IE11 long into the future, nothing new, the way that I understand it, not officially but just in talking to people from Microsoft, it sounds like nothing new will ever go into IE11.
John
Did 11 ever get, did it even have this old version of grid in it or not?
Jen
It does have the old version of grid in it. Because it was like in 8 or 9 or something, it’s been around for a while.
John
So where are we at? Just before we wrap up, there are a lot of exciting features, where are we at in terms of the reality using it? Okay, we can play with it and that’s really important. But people gotta put food on the table as well.
Jen
People should use flexbox now.
John
Alright, so we can use it.
Jen
It’s better supported than border-radius.
John
Better supported than border-radius. So what are the big gotchas in terms of flexbox?
Jen
I mean, I think it doesn’t work in Opera Mini, which is a browser that people do not test it in and they should, people are obsessed about IE6 or IE8, or IE7–
John
But Opera Mini has many more users than those.
Jen
Opera Mini has way more users than IE8 ever will have.
John
And they’re live and everything, those users (laughs).
Jen
Yes, they’re using their phones right now.
John
As we speak, millions!
Jen
And then you know, a lotta CSS doesn’t work in Opera Mini. So it’s a whole other thing, people, if they don’t understand how that browser works, they should go learn about that browser and they should install it on their phone.
John
They should just turn off CSS every now and then and realize that that’s a lotta the world actually would prefer to see your webpage.
Jen
Yeah. But otherwise, I feel like flexbox, you know, if you understand how to write CSS in a progressively enhanced way so that when it doesn’t work in browsers it’s fine, because it works and doesn’t work at the same time. And you can just write it so that it’s gonna work out. Maybe you have a float-based fallback, or maybe you just have a narrower, you know, we just started doing that with media queries where we’d sorta have a simplified layout and then layer in media query-based responsive design.
John
What about using, say, supports? Or are we not quite there?
Jen
@supports is a great way to do it. So feature queries, the problem with using feature queries with flexbox is that there are browsers that support flexbox that do not support feature queries. Like Safari 8. So there’s a way in which, if you write flexbox code and then you wrap everything into a feature query there are browsers out there that should get the flexbox code that won’t, because they see the feature query, the conditional, that says “Hey,” you know, “Does this work? “Do you understand flexbox or not?” And if it says “No I don’t understand,” it won’t say “I don’t understand flexbox,” it’ll say “I don’t understand the question,” and then it will skip all that code. So I don’t know that I would use feature queries with flexbox. I mean, I started using flexbox in production on major, major, major websites, like four years ago.
John
Right. So like SVG, which is still, you know, it’s been well supported for a long period of time, but still have this sense it’s experimental.
Jen
Yeah, it’s not. Flexbox is ready to go. If you understand–
John
You heard that first, people. Go out there, use flexbox now.
Jen
Yes, yes yes yes. Grid, however, is in 0% of browsers. If you consider the Microsoft–
John
So you could use it in progressively enhanced way (laughs).
Jen
(laughing) Yeah!
John
Fallback to not grid.
Jen
If we say that that prefix old original draft in Edge in IE doesn’t exist, like if you don’t consider that part of the new implementation then it’s in 0% of browsers. So yeah, we’re not using it right now.
John
Except it’s behind flags in–
Jen
It’s behind flags in Chrome, including the current version of Chrome and Chrome Canary as well, so that’s a great place to go test it out if you want. Rachel Andrew, who’s been writing a tremendous amount about grid and teaching about it now for a couple years–
John
She’s gonna come do a workshop for us in July, so if you’re in Australia, she’ll be coming out here to do that in a couple of months.
Jen
She is a good person, if people wanna learn more, if they actually wanna learn the technology, find a video of her talking, go see her talk. She’s got a video series coming out that teaches you, not just grid and flexbox, but also all the old stuff, display:table, and floats, and–
John
I was always a bit surprised at the table-based displayed in–
Jen
Inline-block.
John
Kind of like, that solved a lot of our problems for us.
Jen
Inline-block too. We sorta skipped over inline-block.
John
I love inline-block.
Jen
We just got so fixated on like–
John
On floating everything, right?
Jen
Putting into the hands of a third party. So grid is almost, it’s also in Safari, I mean in Firefox, it’s in Firefox in the current version, in the developer’s edition behind a flag, it’s in Firefox Nightly without the flag. The easiest way to play around with grid, the easiest way to see examples in grid running, is just download Firefox Nightly and look at everything in Firefox Nightly. Then you don’t even have to go figure out where the flag is. And it’s in Safari Technical Preview?
John
Yup.
Jen
Behind prefixes.
John
Just launched last week I think, right?
Jen
Yeah.
John
So they have it prefixed rather than flags?
Jen
It’s prefixed. Safari still doesn’t have a flag. Maybe they will have flags eventually but so far–
John
I’ll hassle my good friends at Safari.
Jen
Everything’s still WebKit. Just, everybody out there, don’t only write WebKit prefixes.
John
Yeah.
Jen
If you ever write a WebKit prefix, also write the unprefixed–
John
Follow it up by the real one, right?
Jen
The real one, the un-prefixed one. Grid feels like it’s almost done.
John
So you sort of think like, it’d be almost like an overnight sensation?
Jen
Yes.
John
Because of the way it’s being worked on.
Jen
Yes.
John
It hasn’t sort of had these long, it started almost like, came full of stature when it started, because it’d already kinda worked in–
Jen
It needs like two years of baking, but we’re at like, one year and 10 months. It’s already mostly baked.
John
It’s like an elephant, the gestational period is quite long–
Jen
Nobody knew that it was baking. And because it’s in Edge already really all they need to do is update their implementation. A lot of the heavy lifting around the browser calculating how to do layout is already all there, they just need to revise it based on the new–
John
Syntax.
Jen
The new syntax. So all the browser makers are either working on it currently or they’re, or other folks are working on it for those browser makers.
John
It’s one of those technologies that actually has complete buy-in from all the major engines. For new–
Jen
Everybody’s super excited about it.
John
For significant new features in CSS, there’s usually one holdout. I’m not naming any names. Apple (laughs). But in this one we’re seeing buy-in right across.
Jen
Usually you’ll see one or two browsers really want it and put it in, and the other browsers are like “Welllll, we don’t, we don’t, “priorities, engineering, resource constraints.”
John
Wheras this one’s really got buy-in.
Jen
This is like everybody wants it right now.
John
That tends to be a good indication of what will really happen. I think if you get buy-in right across the engines you’re pretty safe in knowing that that thing is gonna happen.
Jen
The thing is though, that there’s this thing called subgrid.
John
Yes. Which isn’t gonna happen, I believe.
Jen
No, I think it is gonna happen.
John
Oh it is?
Jen
And I think it’s gonna delay grid.
John
Because it adds a lotta complexity from an implementation–
Jen
It might add a lotta complexity.
John
Right, okay (laughs).
Jen
Some implementers believe–
John
Certain people are saying to me that–
Jen
Yes, certain people believe it’s so complicated that it’s impossible and we shouldn’t even bother. But, uh.
John
Hey, computers can beat humans at Go now, we can do anything right?
Jen
Well, so here’s the deal. This is true with flexbox as well. Flexbox and grid both work, unlike the third-party frameworks, a third-party framework, you define a grid, basically any object, any part of the DOM any div, any paragraph, any aside, anything that you’ve got in the DOM you can apply a class to, or use some Sass to target, and you can lay it out on the page. With grid and flexbox, there’s this limitation that people are gonna really hate, which is you can only apply that technology to the direct children of the flex container or the grid container. So say you have an article and you said “Okay, this article is gonna be a flex container, “or this article is gonna be a grid container,” then each of the main items underneath like, the direct children of that article you can totally lay out on a grid. But none of the grandchildren can be laid out on the grid.
John
Right, and so subgrid would allow, would be for descended elements to be laid out on the same grid.
Jen
Because without subgrid, what we have to do is define a second grid, a third grid, a fourth grid. And a lot of people, especially people who are coming from the editorial design background from real graphic design, are gonna wanna not technologically implement a grid, but they’re gonna wanna design a grid. Like “Ohhh, let’s use a golden ratio for this one, “and we’ll arrange our columns in this order, “and here’s my grid for my page, “here’s my drawing, my sketch that I did, “here’s all the math. “Now we need to implement it in code.” Well you’re gonna define it multiple times, you have like a wrapper div and you define it there, and then in the article you have to redefine it, but that’s actually a percent of the outside. Like, the math is gonna get insane very quickly.
John
If you’re a CSS developer.
Jen
Yeah. It’s just gonna get messy.
John
So we wanna shift all that responsibility onto the browser people, it looks like?
Jen
We want the browser to do that work, we don’t want the humans to have to do that work. And I feel like, and a lot of people, Eric Meyer and Rachel Andrew as well, feel like a lot of really bad hacks will start to creep up. People will start stripping markout out, because they’ll say “Oh, it only works on the direct children? “And this should be a grandchild “or this should be a great grandchild–”
John
“But we’ll just make it a child.”
Jen
Yeah. “Forget it.”
John
Or bring it up a level.
Jen
“We’ll just remove all of the ARIA roles, “we’ll just remove all of the accessibility markup, “we’ll just remove all of the…” That’s terrible.
John
So if there’s one thing that will hold up adoption or widespread roll-out in browsers…
Jen
Yes.
John
Will be this issue of subgrids.
Jen
And you know, there’s a bunch of us who’ve had a debate, there are some people who think that subgrid, ’cause as subgrid has been discussed so far, it’s incredibly complicated, so “It’s getting super complicated mathematically, “maybe it’s impossible.” There are other people who think “We don’t need subgrid to be able to do “every single solitary use case, “edge case, possibility ever. “Let’s limit what’s possible with subgrid. “Let’s just think of the main use cases, “the main reason we need subgrid, “and let’s just implement a tool “that just does that and doesn’t do everything crazy ever. “Just does the two things or the three things “that we need, really really really badly.” Well, that spec hasn’t been written yet. So several people who are writing the spec have clear ideas about what they think it should be, but that’s what we need to have happen next. Those people need to actually write it down on paper, and the group needs to discuss whether or not its possible. And my hope is that a lot of the implementers who are skeptical that it’s possible or fear that it’s gonna be too hard, will look at the new ideas that haven’t been written down yet and go “Oh yeah, you know, maybe you’re right, “that wouldn’t be so hard, that we could do.” I don’t know, I don’t understand exactly how a browser implements, I don’t know how to write a browser or build a browser, (laughing) I know how to build a website. So we’ll see, we don’t know what happens, but I hope we can come up with a simplified version of subgrid that’s not so hard to implement. And I am one of the people who believes that you know, maybe we could get grid shipped this fall, but grid with a simplified subgrid, we’re gonna have to wait until next spring and we’ll have to wait until next summer, sometime in 2017. I think we should wait. I think we should wait, even though I want grid yesterday, I think we should wait six months more to get grid with subgrid from day one.
John
Alright. So just to wrap all this up…
Jen
Yes.
John
What we learnt is just go and use flexbox today.
Jen
Yes.
John
It’s usable, it’s shipping, it’s working, everyone’s bought into it. It brings us stuff that, especially if you’re doing lots of page layouts with floats, you can do much better, much cleaner layouts.
Jen
And maybe you won’t do your whole page with flexbox. Maybe you’ll use flexbox in certain pieces, and maybe you’ll still use your bigger, Bootstrap or whatever, for your main page layout.
John
For grid, it’s coming, there’s a lot of buy-in, there just seem to be some final implementation details that might be holding it up for some months.
Jen
But people could start learning it now.
John
Right.
Jen
I mean, I do think it’s gonna take time to learn, as I’ve started learning it and I still don’t understand a lot of it, as I’ve started learning it, it kind’ve blows my mind. And I’m enjoying learning it over several months, not trying to learn it all at once. So I think people should start trying to learn grid now. Because the main parts of grid are not gonna change. We know what it is, people can make stuff with it now.
John
Alright.
Jen
The other tip that I have for people is, because I think a lot of professional front-end developers these days don’t actually know how to do a layout with floats.
John
What are they doing!?
Jen
They’re using third-party tools. They’re using Bootstrap. And so I feel like that’s the other piece of homework, is go learn floats, go learn display:table–
John
Go look at the one true layout.
Jen
Go learn inline-block.
John
Inline-block, yeah!
Jen
Because those are gonna still be in our toolkit. We’re still gonna use floats, we’re gonna use floats with flexbox, with inline-block, with display:table, with grid–
John
I actually mostly don’t use float anymore, ’cause I find inline-block solves that problem a lot of the time.
Jen
I don’t think we’ll float a whole object, but we’re gonna wanna float a image and wrap text around it.
John
Actually use it for what it’s designed for.
Jen
Use it for what it’s supposed to be used for. So I don’t mean learn how to do a whole crazy thing with floats, I just mean learn what a float is. Because I think especially once we wanna use grid, we’re gonna need a fallback layout. You don’t wanna use Bootstrap for your fallback layout, you’re not gonna use grid and Bootstrap together. You’re gonna use grid and then you’re gonna write vanilla CSS for other parts of your layout, and you’re gonna need those skills.
John
Alright, well thank you so much Jen. There’s a bit of theme that’s come through a lot of these conversations with lots of different people over the last couple of days, the core, the basics, the foundations, they’re not going away. You know, don’t ignore those newer technologies, don’t ignore those enabling technologies that sit on top, but certainly don’t ignore the fundamental foundational technologies. As you say, they’ll be here long after we’re gone, for better or worse, but’s the reality. So it’s interesting that… (sighs) Sorry. So a message that’s come through from what you’ve said, even though we’re talking about a very new emerging technologies, it’s also come through with my conversation with Sara Soueidan and Russ Weakley and others over the last couple of days is that, you know, all these new emerging technologies are very exciting, all these layers of technology we’re working with, these third-party tools referred to are fantastic, but don’t forget the foundational elements. Everything is built on those. And it will always serve you well to know those technologies. And then built on top of them, you’ll be building a much more stable site, application, whatever your work.
Jen
Yeah, yeah.
John
Thank you so much for that.
Jen
Sure, thanks for having me.
John
You’re most welcome, and we look forward to seeing all these things in our browsers very soon.

delivering year round learning for front end and full stack professionals

Learn more about us

Web Directions South is the must-attend event of the year for anyone serious about web development

Phil Whitehouse General Manager, DT Sydney