[00:00:00.00] SY: We're doing a podcast giveaway! I think it's our first one. We're giving fifteen people a free JavaScript and React Udemy course. So if you've already learned some web basics like HTML and CSS, and you're looking for a comprehensive course on JavaScript and React, this is for you. To enter, you're going to two things: number one, leave a review of the CodeNewbie podcast. And then number two, take a screenshot of that review, and email it to podcast@codenewbie.org. Giveaway ends this Saturday, December 9. Details are in your show notes. (Music) Welcome to the CodeNewbie podcast, where we talk to people on their coding journey in hopes of helping you on yours. I'm your host Saron, and today we're talking about CSS. So you've probably the GIF of Peter Griffin - the dad from Family Guy - trying to open blinds. But every time he pulls on the string, the blinds go sideways - they bunch up. He pulls harder - they twist and turn and finally he rips the blinds off and throws them on the ground. At the bottom of the gif is the caption - "CSS." If you haven't seen the gif, check out the link in your show notes. It is hilarious. All that is to say, CSS is hard. But there's a woman I know who loves it.

[00:01:25.06] JS: I'm Jen Simmons, I'm a designer and developer advocate at Mozilla, the company that makes the Firefox browser.

[00:01:29.23] SY: So I wanted to bring her on the show so we can all learn to love CSS. Ok, that might be a bit much. At least have a better appreciation for it. After this.

[00:01:40.05] Flatiron school teaches you how to code from anywhere. They've got an awesome community of career-changers, and a number of different options you can pick from to become a software engineer. They've got full-time in-person courses, self-directed introductory courses, and remote online web-developer programs. They even have a free, 75-hour online prep course, so you can dive into JavaScript, Ruby, and interview prep. To learn more, go to FlatIronSchoolNewbies.com. That's FlatIronSchoolNewbies.com. Link is in your show notes.

[00:02:07.29] One of the best parts of being a coder is finally being able to bring your passions to life. You have the skills to design, to code, to create the thing you're excited about, and share that passion with the world. And Hover can help you with the first step, of sharing your passion with the world - getting your domain name. They've got a really beautiful and easy to use interface where you can find and register your new domain name in just a few steps. And to give you full control, they separate your domain name from your hosting, so you're never stuck with one service. They keep your domain name safe while giving you the flexibility to use whatever hosting service is best for you. They also give you free "who is" privacy, so your personal information is safe, too. To get started, go over to Hover.com/newbie to save ten percent off your first purchase. That's hover.com/newbie. Link is in the show notes.

[00:02:55.18] When I first learned to code, all I wanted was to be a developer. But then I actually learned to code and realized that you don't become a developer. You become a front-end developer, or a Rails developer, or a full-stack engineer, or a back-end engineer, or the million other job titles that involve coding. So how do you pick? And once you get that first job, how do you turn it into a career? You can use the Dice Careers mobile app. This is the tool I wish I had when I first started. You pick the tech skills you either have or hope to have in the future, you type in your designer job title, and Dice helps you find other job titles you might also be interested in and maybe didn't know about. But they take it a step further, by telling you what skills these job titles require, how much they pay, and based on your profile, they tell you what skills you might want to learn so you can one day apply for those jobs. They simplify a lot of the chaos of job-hunting, and it's totally free. So check out the Dice Careers mobile app. Go to dice.com/CodeNewbie for more info. That's dice.com/CodeNewbie.

[00:03:55.03] You are so awesome for so many different reasons. First of all, that job title itself is really fascinating, we're going to unpack that in a little bit. But I also love the fact that you have been coding, you've been in tech for a really long time - how many years, roughly, has it been?

[00:04:11.03] JS: I've been making websites since '96. I first wrote code in '82, as a kid.

[00:04:17.10] SY: Yeah! And what I love about not just what you do, but also the way you talk about what you do is, you're really proud of your accomplishments.

[00:04:25.18] JS: Yeah, I feel like I do that especially because I'm not a white dude. That's not the only reason, but feel like it's cool to be all, I'm just a person in a hoodie, I didn't even graduate from high school. But the only people I've seen get respect with that kind of tech humble-brag, are a very specific demographic. And anybody else who isn't in that demographic? It works against us? And I think some things - they had been happening all along, but I got to this place where I was just, I got really angry. And I was really done. And I had a year of just knocked backwards. I emerged from that time with this other voice, of like, yeah, actually I do know what I'm doing and yeah, actually, I am an expert and yeah, actually, I'm done letting people think differently.

[00:05:24.17] SY: May I ask what happened in that year that made you so angry?

[00:05:26.08] JS: Yeah, I got fired. It was the second time I've gotten fired. That time I got fired for claiming the job that I was hired to do. I was hired to be a product manager. And I came in and I tried to manage the product and the lead engineer literally said to me, who do you think you are? Why are you trying to set priorities around here? And I didn't - I was naive in that I didn't realize what the power dynamics were at play, but also it simply was that there was a power dynamic before I got there. The very fact that they decided to hire a product manager was done in an effort to change that power dynamic and I was the victim of the fact that they didn't want to change it, so whatever.

[00:06:08.20] SY: (Laughs) So, how did you deal with that?

[00:06:12.18] JS: Well, the first thing I did was email people on the way home. And I had a new job in an hour and a half.

[00:06:20.22] SY: Wow!

[00:06:20.29] JS: (Laughs). So that helped a little. Working as a front-end developer contractor, building a developer website for Chrome team. That helped.

[00:06:32.08] SY: That's the ultimate comeback story. And hour and a half - that's all I need.

[00:06:37.10] JS: And then I think I, I just put my head down and worked. Really hard. And I focused on the Web Ahead podcast and I tried to focus on becoming a better speaker. Within - by a year later, a year and a half later, I stopped freelancing and just focused on being what some people call an Evangelist - speaking at conferences and working on the podcast, and ended with the job that I have now. And I don't know, over those couple years, somehow that anger turned into confidence and that confidence turned into - but I approached my interview process at Mozilla very differently, where I said, you know what, I don't fit into a typical resume. So I'm going to make a five-page PDF brochure about myself. I know how to design information. And it's not going to look like a resume. And if this company can't handle that, if they're expecting it to be a very, very typical thing, then that's ok. It's not a good fit. And I went into the job interviews much more like, I don't know, the way you approach relationships where you're equal, where I asked them a ton of questions. And in this interview process I was just like, I'm going to be really straightforward. I'm going to say, this is what I'm good at. These are the things I don't know. This is what I could do for you. They arranged a bunch of interviews with me, but I also arranged a bunch of interviews with them. I'm going to go ask people about their experience working at this company. I think I set up as many meetings as they set up with me.

[00:08:02.00] SY: Wow. Meaning you initiated that and said, I want to meet with these people?

[00:08:05.23] JS. Yeah.

[00:08:06.18] SY: Wow, that's so cool. So do you think that's something that you could've done twenty years ago, or were you able to do that due diligence because you're Jen Simmons and you have this history and this resume and all these awesome experiences?

[00:08:22.03] JS: You know, I applied for this job in 2015. I think I had a lot more strength because I was 45, and I didn't have that when I was 25 - especially me, me at 25 - oh my gosh. I think most people, if they met the 25-year-old Jen Simmons, they would literally not recognize me. Like I was so shy, I was so petrified constantly, I was silent. But in some ways the world that I was getting myself into over at Mozilla, I don't think they were aware of who I was at all. I don't know, I don't know. It's hard to know where you get confidence from, but - some of it just came from bad past experiences, and being willing to take giant risks, because I just was not willing to go through another bad experience.

[00:09:11.19] SY: And I think a lot of us feel there's a lot of failure, rejection, especially in the job search process, that becomes really, really easy to internalize. Is that avoidable? How do you turn that off and go screw this, I'm going to do it my way, versus holy crap, I must not be that great?

[00:09:28.22] JS: I don't think that's avoidable. I absolutely feel those kinds of things in giant waves. I don't think it's about getting to a place where you don't feel that anymore, where that doesn't happen. I think it's more like getting to a place where you go, oh, it's February, it must be the time to believe that I'm completely worthless and I have nothing to offer. And then just not believing it. Just not believing it.

[00:09:52.09] SY: Alternatively, are there moments where you are able to look at those awards and go, you know, today I feel like a badass. I'm actually pretty awesome.

[00:10:00.15] JS: I think there are days that I feel like a badass. But I don't think it's the awards. I think it's when I get to see someone get something out of something that I've offered. And even if I know that what I've offered is flawed and not as good as I wanted and all of that, and sometimes those ideas can be very, very loud and I can end up thinking about that more than anything, but in the moments where I can actually see the person who came up to me at a conference after and just say, gosh, this was so helpful. And I look at them and I think, you might be the only person in this whole room that thought that. But looking at you right now, I'm so happy that I could've done that for you.

[00:10:38.12] SY: Yeah, and that's why I think, especially conferences are so special. Because you get to meet those people who've been listening to your podcast and reading your blog post and all those things and they become real.

[00:10:47.23] JS: Yeah, or you know, if you're building a website for a client or a project and then it ships. Or you later do user-testing and you get to meet someone who actually uses the thing that you built. Or there's lots of other ways that that manifests that have nothing to do with conferences, but there's a way in which, when you get to actually sit back and look at what you made and say, wow. I made that.

[00:11:10.20] SY: So, I want to read a really quick excerpt from one of your blog posts. It reads, "I'm a woman who's a member of the CSS working group who's been teaching the industry ground-breaking insights into the nature of CSS, layout, graphic design, and the medium of the web full-time for the last three years. I'm working on new CSS, inventing things that don't exist yet." And I love that and I want to unpack some of those accomplishments. So let's start with the CSS working group. What is that?

[00:11:35.28] JS: So, the technology of the web is built on three things - HTML, CSS, and JavaScript. There may be lots of others tools and lots of other packages and frameworks, blah blah React blah blah, Broccoli, blah blah, but that stuff is not actually the web technology. Those are things that help you make web technology, but the technology of the web is HTML, CSS, and JavaScript. HTML is for marking up content or marking up forms, making stuff exist on the page. CSS is for styling it visually, placing it somewhere, maybe doing some animations, changing the colors, changing the fonts. And JavaScript is for things it should be - hello, only for - in my opinion and also all the people that invented the web, it's awesome but it's not for everything. You don't use JavaScript to do visual styling, you don't use JavaScript to mark up content, you use JavaScript to create other kinds of interactivity or other kinds of more rich experiences, things you wouldn't be able to do with CSS or HTML alone. And so CSS is that middle sandwich, right, so the CSS got invented. Originally, when the web got invented, there was this competition - not at the very beginning, but quickly, there was this competition between Netscape and Internet Explorer, where each of those browsers thought, hey, I have an idea - we want to add something cool to our browser, and you don't have it. You over there - that browser doesn't have this thing. But the problem is when Netscape would do one thing and Internet Explorer would do a different thing. It was impossible to make a website work in both browsers. You had to make two websites.

[00:13:12.23] SY: Literally two independent websites?

[00:13:13.07] JS: Yes. And so most of the time you would go to someone's website and it would have - you wouldn't actually land on the website, you'd land on this interstitial page, which would say, which website do you want? The name of the site, and then there'd be two buttons - one for Internet Explorer, and one for Netscape. And you would click.

[00:13:28.02] SY: So it didn't automatically detect it. You'd have to tell it.

[00:13:30.01] JS: Yeah, because there wasn't any JavaScript to automatically detect anything. This was early days. But to build two websites was a lot of work, so then a lot of sites were like no, forget that, we're just going to only build this site for Netscape, and we don't want any Internet Explorer users.

[00:13:44.03] SY: Ok, so how did Netscape win that? Why did everyone make that decision?

[00:13:47.14] JS. I don't know. I don't know. They were bad decisions. It was a terrible idea. But limited budget, and you would kind of guess - maybe you liked Netscape better, personally. But what happened was that people said, this is ridiculous. We need to have standards. So we ended up with a set up standards for HTML, actually now there's Quay, there's a whole bunch of standards for CSS, a whole bunch of standards for JavaScript. So these documents are written up, so that way, when we say invent something new, like CSS Grid, it's not like a vague document about an idea for how to do page layout using a grid. It's an incredibly precise technical document that not only defines how grids should work in every possible situation, it also defines how grids should break in situations where the people writing the CSS are actually making mistakes and writing bugs in their code. So that the bugs are the same in every browser. That process to get to this point - 20 years later, 25 years later, has been an interesting evolution. But once the new thing hits the browser, once every browser gets rounded corners, or once every browser gets Flexbox, or once every browser gets CSS Grid, the way that CSS Grid is implemented is identical in every single browser. Or the way that Flexbox is implemented is supposed to be identical - it's not, we're trying to get that fixed.

[00:15:10.24] SY: Yeah, and that's the thing. I'm imagining the CSS working group having a Trello board with this huge backlog of ideas that people have pitched and been complaining about for a number of years. Is there a process around prioritizing that, or is it just individual people raising their hands and saying, I'm personally interested in taking this on?

[00:15:29.05] JS: You know what action happens more? Is that - and I was surprised, because before I joined this CSS working group, I had no idea how it worked, and I would've imagined that there was a whole group of the best graphic designers, the best web designers in the world who sit around with a bunch of ideas in some sort of a priority board and decide in general what should be the next priority. Yeah, that's not how it works at all. It's mostly browser makers, and it's mostly - you know, Apple will show up and say, hey, we had this idea about how do you make your website handle a viewport with rounded corners because I don't know, something something, can't talk about the iPhone X, something something. (Laughs). But they'll make some sort of proprietary, some sort of thing, rough draft, and say, we have this rough draft, this is a thing that's important to us, we want to make sure this becomes a web standard, and we want to put this in the browser. And all the other companies sort of have veto power, sometimes -

[00:16:29.09] SY: I was wondering, yeah, I was wondering how they all work together.

[00:16:31.24] JS: Yeah, and I think other people imagine that there's some sort of giant fight in the CSS working group. But honestly it's not like that at all. The people who write these specs, who work for these browser makers, there's not very many of us in the world. There's maybe a hundred people total, ever. And so everybody's friends - everybody's like, oh my gosh, you do the same thing I do, nobody at my company understands me, but you understand me.

[00:16:55.23] SY: (Laughs) You feel my pain!

[00:16:57.27] JS: And they speak this language that I'm just learning of how browsers think about how to paint the page and how to make a website run. And it's a very nerdy, very - I mean, they're all C++ developers, they're not CSS developers.

[00:17:12.12] SY: So you mentioned earlier that doing CSS grid layouts took ten years to actually implement and adopt. What makes it take so long?

[00:17:20.27] JS: I think in part it was because computers used to be a lot slower, and we, in a way, maybe needed to wait until computers got faster. Doing the calculations and the math of grid is kind of intensive and we needed better processors to be able to handle that. I don't think we could've done it on 1996 computers. I also think that the CSS working group itself had to kind of grow up and get to a place where we realized that we need to define the bugs as well as the features. That we needed to define the exact behavior, all the way down to the detail that I was talking about before.

[00:17:56.05] SY: So, let's talk about IE.

[00:17:59.17] JS: Yes.

[00:17:59.22] SY: Why is IE such a - I don't want to say the word problem, but why does it always feel like the thing that all the front-end developers complain about and is the one thing that doesn't have the feature that's available on all the other browsers. Why does it always feel like it comes up last?

[00:18:15.09] JS: Yeah, it's funny because there was a time when IE was the best browser, when you were so grateful that people were using IE6, because it actually implemented standards when other browsers didn't. Internet Explorer 5 was the first browser to come along that implemented CSS on any level that made it usable. That was kind of around the time when web standards started to happen at all, so HTML was getting better standardized as well. And IE6 was a pretty awesome browser, because it really did fix a lot of those problems that people had been living with with IE3 and 4. And it was really good for web standards. And Netscape was the other browser, so there were two browsers that were out there at the time. Netscape ended up losing almost all of its market share to IE, IE kind of took over. So Microsoft thought, I think Microsoft looked around and went, we have 90 or whatever percent of market share, why bother making our browser better? Let's just ride our coattails and be awesome. And they kind of - hand-wavey history, hand wavey - you should fact-check this, they kind of shut down the IE6 team, I think they pulled a lot of engineers off of it, and they didn't work on the browser for a long time. And then meanwhile Apple made Safari and Google made Chrome and Firefox made Mozilla - Firefox made Mozilla first, back when IE6 was still more new. And these other browsers were better and they started to be really awesome, and they really started to follow web standards, and eventually they started updating themselves. Microsoft, I think they did a really smart thing. They looked at IE, they said, wow, we've got all this proprietary stuff, we've got all this legacy stuff, what are we going to do? It's going to be really hard to evolve IE and make it better. We don't have a time machine yet, so we can't go back in time and fix our mistakes. They decided what to do is just, they'd like really re-do it. So they basically forked the code base, and they didn't start over, but they made huge changes and got rid of tons of technical debt. And they renamed that browser, and they named it Edge. It would be nice if IE would just go off in the corner and die forever, but the problem with that is that there are institutions that have millions and tens of millions of dollars invested in websites that rely on things like ActiveX. Like, I have a friend who does security at a hospital and he was really upset when he learned about Edge, because he said, we can't not run all of our internal websites, that only work inside the hospital, they're behind a firewall, but all the doctors and all the people, they're running around with all these medical records, and running these systems - and I don't know, 50 million dollars? How much money do you spend on a piece of software like that over ten years? You can't just throw that in the trash and start over. It runs on top of ActiveX, so they can't get rid of it. So it's still supported. IE 11 is going to be around for a long time and it's not going to have any new features. The only new things that get released for IE 11 are security fixes.

[00:21:26.11] SY: So, as developers, when I'm thinking about what tools to use, do I still have to think about IE? Can I think about Edge?

[00:21:35.07] JS: I think it depends on your audience, and I think it depends on your project. And I also think that you don't make that decision all at once. Like, maybe you make that decision because you have a QA department - you have a Quality Assurance department and there's a team of people at your company or on your project, and their whole job is just to test and maybe they have to decide which browsers are we going to use when we do our manual tests? I can see a list there, like the QA department, maybe IE is on your list, and maybe it's not on your list, but I think from the point of view of a developer, especially if you're a person doing CSS and HTML, it might be slightly different when you're doing something in JavaScript, but especially when you're doing CSS and HTML, I feel like there's no excuse for having a website that doesn't work in some kind of old browser that you’ve never even heard of that runs on a game console browser from four years ago. You can make HTML run everywhere, you can make CSS run everywhere. And maybe you only have two people in the world using IE9 - but those two people are important! (Music).

[00:22:44.10] SY: Coming up - Jen gives us some insight on how to navigate new CSS tools and build for different browsers, especially as a code newbie. She also shares what the web might look like if it didn't have a grid system at all. After this.

[00:22:59.01] When I learned to code, I was so excited to finally bring my passions to life. I could build things that I really cared about, and share them with the world. And the first step in sharing is getting a great domain name. That's where Hover comes in. They've got a really slick, easy to use interface. They've got awesome domain names to pick from and they separate your domain from your hosting, so you have full control and flexibility over your online identity. So go to hover.com/newbie to save ten percent off your first purchase. That's hover.com/newbie. Link is in the show notes.

[00:23:32.03] Getting a job is one thing. Building a career is another. With Dice, you can do both. They've been helping tech professionals advance their careers for over twenty years, which means they have a ton of data and tools to help you navigate yours. Looking for a job right now? They've got thousands of positions available from top companies, like AT&T, Dreamworks, Adobe, IBM, and Dell. Wondering what's next in your career? Use their career pathing tool to find new roles based on your profile and see how much more money you can make. Not sure if you're getting paid what you're worth? Use the dice salary predictor to see real numbers on what your skills are worth. Don't just look for a job - manage your career, with Dice. For more info go to dice.com/codenewbie.

[00:24:12.18] You keep saying you're going to get serious about learning to code, but where do you start? Flatiron school's got the perfect thing. They're offering their free, 75-hour online prep course, where you can dig into JavaScript, Ruby, and more. If you're not sure where to start, start there. And when you're done, you can keep learning, with their online courses, their online programs, or their in-person bootcamp. Whatever your schedule, they've got options to help you reach your coding goal. To learn more, go to FlatIronSchoolNewbies.com. That's FlatIronSchoolNewbies.com.

[00:24:47.00] SY: I'm wondering, as a developer, at what point should I adopt some of those new tools? Should I wait until all of the browsers are fully up to speed, is one browser good enough, how do I decide when to jump in and experience some of those new things you're making?

[00:25:05.18] JS: I think there's two answers to this questions. There's a lot of new tools all the time. Get a new tool because you're having fun and you think it'd be fun to learn it, or because the people you respect, the people you're working with, or your colleagues or your friends are using it, and you want to learn more and participate in a community along with them, or work at your job with them. Also, if you have a problem, like you keep finding yourself having to cut and paste and cut and paste and cut paste and you realize, wow, I wonder if there's a tool out there that would automate this for me and make this part of what I'm doing easier, yeah, probably there is. But the rest of the time, I would try to relax. There was a time when there really weren't any of these tools. Those of us who've been around forever remember those days. And then there was a time when there were some cool new tools and everybody learned every tool because they were all cool and we all wanted to learn all of them. And then they got to this point where it got to be so many that we started feeling overwhelmed and really guilty, like I should be learning all of these tools, but there's too many of them -

[00:26:09.05] SY: Right, yes!

[00:26:09.19] JS: And now I think we're in a place where my advice is don't worry about it. You're not going to ever know them. Every one of these tools comes and goes - Dreamweaver came, went. Flash - came, went. React will come, React will go.

[00:26:22.25] SY: So, how should that inform what we learn and what we prioritize in our learning? How do you take that information and make sure that we're optimizing for long-term success?

[00:26:33.22] JS: Yeah, I do think it's important to learn those skills. I know too many JavaScript developers who don't know hardly anything about HTML and their work really suffers because of it. There was a tweet going around the other day that I retweeted - they see far too much JavaScript written, because people don't know CSS. They write 400 lines of JavaScript that they could've done in two lines of CSS.

[00:27:01.19] SY: Yeah.

[00:27:02.08] JS: I should also say - you were asking about IE, there were some other browsers that I don't think we talk about enough that have bigger market shares than IE, especially in the US but also maybe in Europe, where the UC browser for Android has twice as many users as every version as IE. Samsung internet browser now has more users than all versions of IE combined.

[00:27:27.12] SY: Really? Huh.

[00:27:28.16] JS: So, these are important browsers, and we need to make sure our code works in browsers like those browsers. Even if you haven't heard of them - even if you don't have the QQ browser or the Baidu browser and you don't test on those browsers. We have to keep those in mind. There's always going to be browsers that don't have the new thing, so.

[00:27:46.27] SY: So, in our community especially, there is a very deep frustration with CSS. How do we get to a place where we're not afraid and frustrated and angry with CSS, but we embrace it and we see it as maybe a good substitute for maybe some of the JavaScript that we're writing?

[00:28:05.05] JS: Yeah, and anybody who's a newbie, I would recommend - perhaps, maybe not in every case, but in general - in most cases, I would recommend don't bother learning how to do an entire flow-based layout, and don't bother learning bootstrap. Start with learning CSS grid, Flexbox, multicolumn, the alignment properties. And how to do layout with a new technology. And that thing of like, I touched this part of the CSS and it all fell apart and then I touched that part of the CSS and it fell apart in the opposite direction, that is not going to be the case anymore. Painful in that way. Now, that's not to say the CSS is not painful, it's not going to be all magic and rainbows. But a lot of the frustrations I hope are going to go away once people really learn the new layout model, because we actually have a layout model now. Things actually make sense. We actually have good tools now.

[00:29:02.16] SY: When you think about CSS grid systems, who should be paying attention to this?

[00:29:08.13] JS: Probably a lot of people would immediately assume that frontend developers need to learn this code, and that is true. I do think that every website will be using CSS grid, Flexbox, alignment, and the other pieces of layout in the future. I think five years from now we will not have layout frameworks anymore, like bootstrap. There might be other reasons to have frameworks, and other kinds of frameworks that are out there, but I don't think they're going to ship with a layout system in them. I think we'll just make our own, the same way we make our own typography system and our own color palette system. Changing the underlying tools changes what's possible in graphic design on the web. What we've been seeing a lot of over the last five years especially is kind of every website creates this visual grid of a twelve column layout, where everything is smashed up along the top of the page, and everything is lined up on the edges of one of those twelve columns. The reasons things are all squished along the top of the page is because of the nature of floats. So this technical tool under the hood created a visual reality, so at the moment, most designs are still really conventional, so the frontend developers might be - it's more fun to use grid than it is to use bootstrap or floats. But in a way it kind of doesn't matter because the design is the same anyway. But very quickly I hope we're going to get to a place where a lot of the designs that will start shipping are going to be designs that are impossible with the old tools and require the new tools.

[00:30:44.03] SY: So, do you see the 2018, 2020 layouts replacing the twelve column system so there's now the five circle system? Do you see it having more options like that, or is it that we won't need layouts, predetermined layouts, in any way, and we can kind of do our own thing more easily?

[00:31:05.15] JS: I hope we will all do our own thing. I think the layout depends on the project. I don't see people saying, here are the five typography systems now, you should use one of these five web fonts. I hope that projects - I hope that designers will take this freedom and come up with some new designs.

[00:31:29.02] SY: So when we have a future where layouts will be, any layout, any grid system, or maybe not even a grid system at all, do you worry about usability being a problem?

[00:31:39.21] JS: I don't worry about it, but that question comes up all the time. I do think that with great freedom comes great responsibility. It does mean that now you can make a completely confusing layout. And I don't think that's a good idea. But I also think that our users have more sophistication when it comes to navigating a layout than we think they do. I also think that those of us who were around in the early nineties, the mid-nineties, remember a time when every website had a different layout, and you went from site to site to site and you kind of had no idea what you were going to get. And it was sort of fun, and there was an element of mystery meat navigation. A lot of websites had this thing that we named "mystery meat navigation," and you'd land on a page and there'd just be this illustration, there's a couch and a lamp and a picture frame hanging on the wall, and a rug, and there are no words, and you're like, you don't know what to do. It's like a video game. So the nav bar got invented - like that was not a thing for the first ten years of the web. The nav bar had to be invented. Now we replaced the nav bar with a hamburger menu - hamburger menu I don't think is turning out to be such a good idea. So, should you go too crazy with your nav bar? Could you slightly alter it? Users are going to know what to do. Like there's a principle called the proximity principle in graphic design, where if you put some things near each other, our brains understand that they go together.

[00:33:11.07] SY: So, it sounds like what you're saying is, even if we don't have our twelve column grid system, we still have general principles of design, that we can use to educate whatever future systems or non-systems we make for layout.

[00:33:27.27] JS: Yeah. And the other thing - apps. Right, so one of the things that people like about an "app," and typically when people use the word app, they're talking about a piece of software that runs on a mobile operating system, so for a phone or something. There was a moment where suddenly people were inventing these apps that didn't exist before, and making phone apps, making tablet apps, and there was a lot of new, uncharted territory when it came to how interfaces worked and how things were laid out. And those apps were not like the kind of computer programs that people had made for Mac or Windows. They were sort of this other thing where you slide sideways, or you pull to refresh. There were all these conventions that got invented out of nowhere, and I think people were willing to take risks because the app space was new. But I think it proves that unconventional layouts can be incredibly usable and actually more usable than the things that we're used to.

[00:34:35.13] SY: So do you see these changes attracting more graphic designers into coding and possibly being developers?

[00:34:44.08] JS: I hope so! I've talked to a lot of folks who get excited at conferences, and they come up to me after and say, you know, I've always meant to learn CSS, I've always meant to learn HTML, I sort of started to and then I didn't and I struggled so I gave up. But now I'm going to do it. Now I really do want to do it because I want to be able to play with these tools and I want to be able to understand what this is. So I'm hoping people do.

[00:35:08.21] SY: What I love about talking to you and this conversation is that you're really into this! You're really excited, I can feel your passion, I can hear your passion in your voice. Were you always like that, were you always excited about CSS?

[00:35:23.17] JS: I don't know. Before CSS even existed, I was excited about design and making something beautiful, and learning the tools that are needed in order to do that so that I had the power to do that. And teaching people how to do it. I just want people to make beautiful things.

[00:35:45.04] SY: Yeah. Was there a moment that you remember seeing what CSS could do or seeing something built with CSS that made you go, holy crap, this is really cool?

[00:35:55.07] JS: I remember trying to build websites before CSS and being really frustrated and thinking that it was my fault and it was because I was bad at it. And then I remember reading Jeffrey Zeldman's book, Designing with Web Standards, that came out in like 2003, and saying, oh, it's not my fault - it's this whole thing that I described earlier with Netscape and Internet Explorer fighting with each other. And so when I read his book, which is so beautifully written, and explains all these things in stories in a way that's really approachable, I was like oh, yes. And I got excited about the possibility of being able to make websites again. And at this point it feels like a sad, old reason, a naive, old reason, but I was excited about it because it meant people who didn't have access or power in a traditional way, it meant that folks could have that power. And if you wanted to talk about political issues, you wanted to talk about all kinds of things, you wanted to tell stories of people who were not getting their stories told, who were not getting seen in the traditional mainstream media or the traditional mainstream television and film, you could do that. My whole career was about that long before I started making websites and that's to me what's important about the web. And learning the technology is in service of that kind of a mission, or that kind of access for everybody to be out there, having a voice.

[00:37:26.24] SY: Wow, that was beautiful! That was such a great way to wrap up this interview, that was awesome. So let's do a fill in the blank - one thing I wish I knew when I first started to code is?

[00:37:39.04] JS: I belong here. I studied - the first code I wrote was Fortran, when I was in seventh grade at engineering camp at Virginia Tech in the summer for a week. And then I learned basic, in math class, in seventh and eighth grade, and then I learned Turbo Pascal in high school and I was really good at it. I was really good at it - very, very fast, and yet by the time I got to the end of my high school career, I also knew that computer science was not a place for me to be. And I didn't take any classes ever again. And I kind of found my way back when the web showed up, because it was a way to do coding that was artistic and out in the world and cool computer stuff, all at the same time. I was like, what, you get to code and design?! But I wish that somehow when I first started to code that I had the feeling I have now, which is well, I can't express it without using curse words, so I won't express it, but (laughs) like - hey, scoot over. You know?

[00:38:56.05] SY: Yeah. It's interesting that in high school is when you said, this place is not for me. What happened or what did you see or hear that got you to that conclusion?

[00:39:09.03] JS: Yeah, I was taking AP Computer Science in high school which I was very lucky - especially, this was the late eighties, to even be at a school that had such a thing. And there was this both excitement - because I totally fit in, that was definitely the way my brain wanted to work, but there was also this - I don't know what it is when you're a boy and you're acting like a bro, but whatever that is, the child version of being a bro. That kind of culture of this is how you're supposed to act, this is what you're supposed to wear, this is how we talk, these are the words we use with each other, and I just remember hanging out with those guys, and on one hand they were my friends and it was fun, but on the other hand I really did not belong. And they were representing a kind of nerd culture that I didn't fit into. So later when I choices and I - you have to make choices about what classes you're going to take - I just never chose computer science again. I just didn't feel like it was something I wanted to try to force myself into. I was not unaware of the uphill battle that it would be and I just didn't feel like doing it.

[00:40:11.24] SY: Well, I'm glad that you keep coming back, we're all very, very lucky to have you, and we definitely get to benefit from all of your hard work and your continued fight. So thank you for that. So do you want to say goodbye to people listening?

[00:40:24.12] JS: Yes, goodbye people listening! (Laughs)

[00:40:29.15] SY: Awesome. And that's the end of our sixth episode of Season Two! Let me know what you think. Tweet me @CodeNewbies, or send me an email, hello@codenewbie.org. If you're in D.C. or Philly check out our local CodeNewbie meetup groups, we've got community coding sessions and awesome events every month, so if you're looking for real-life human interaction, look us up on meetup.com. For more info on the podcast, check out www.codenewbie.org/podcast, and join us for our weekly Twitter chats. We've got our Wednesday chats at 9 PM EST and our weekly coding check-in every Sunday at 2 PM EST. Thanks for listening, see you next week. (Music).