[00:00:01.26] (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 web animation. (Music) I remember watching a talk on web animation - but it wasn't cartoon, Pixar animation, it was about animating parts of a website. The speaker was going on about how we can use CSS animation to bring our pages to life, and I thought "It's a form. Why would I need to bring it to life?" It sounded so gimmicky. But then they gave a demo. And showed what it looked like. There was a form, and instead of flat, dead fields, the boxes moved when they were full, shook when there was an error, popped into place when you moved to the next step. They came to life, just like the speaker promised, but it didn't look gimmicky. It looked awesome. So I wanted to learn more about web animation.

[00:00:57.29] RN: Back in the early days, the long, long ago times, before Flash-

[00:00:59.11] SY: That's Rachel Nabors, author, speaker, coder, and founder of the Animation at Work community.

[00:01:05.22] RN: The web was a series of linked documents. But now we're getting all these wonderful APIs and CSS attributes and things that allow us to go back to making the web a more interactive space.

[00:01:16.04] SY: Today, we're learning about animation - how to do it, learn it, use it. And how - yes, it can be super creative and tons of fun -

[00:01:23.26] RN: You can even build, well, the entire world in 3D with Web Geo-

[00:01:26.20] SY: But it's also really helpful - and surprisingly practical. We've also got a new Coding Corner for you, that's all about CSS. After this.

When you're looking for a program to develop your skills and get that dev job, there are a few things you should consider. Does the program teach in-demand skills? Is the community supportive? Do they offer real world projects so you can get real world experience? And are they based in a tech hub, so you have job opportunities when you graduate? DigitalCrafts gives you all of that, through sixteen-week full-time classes, and twenty-four week part-time classes. They teach full stack web development, with JavaScript - no JS and Python. It's an intense program, designed to take you from beginner to full stack software engineer. Whenever possible, they also partner with local companies and nonprofits, so you can solve real world problems with real life projects. They have campuses in Houston, Texas and Atlanta, Georgia - the fourth largest tech hub in the US, and support for student housing is coming soon. Their cohorts start in early November, so check out www.digitalcrafts.com. Link is in the show notes.

[00:02:27.20] So I think a good place to start is to define web and UI animation. What does that mean?

[00:02:33.03] RN: When the web started, it was a very document-centered place. We call them HTML documents, right? Back in the early days, the long, long ago times, before Flash, the web was a series of linked documents. And they were mostly text, if you were lucky, maybe a picture or video in there, and Flash came along and allowed people to add interactivity and animation. And this was something people hadn't done before. You didn't really interact with a document, besides scrolling through it. And then Flash went away, but now we're getting all these wonderful APIs and CSS attributes and things that allow us to go back to making the web a more interactive space. We can add animations for instance, two-dimensional interfaces - we can even build, well, entire worlds in 3D with Web Geo, so web animation definition stretches across a wide variety of technologies. And I specifically specialized in two-dimensional animation, but I go to tell you, I'm really excited by the direction that 3D animation is taking on the web as well.

[00:03:34.19] SY: And so, when I think about animation on the web, I have two gut reactions. The first one is - oh my god, this is going to be so cool, and you get to build so many creative things, and potentially tell stories, and just do really amazing things with code, in a way that - as you said - may not feel historically code-y. Like, they're not static, technical documents and such, so that's really exciting. But the other part of me thinks, do we really need to do that? Apart from explicit storytelling, if I'm building a basic web app, and it has users, and I'm focusing on getting from one page to another and I'm basically make a CRUD app, do I need to integrate this thing? What value does it have if we're building products that aren't inherently creative or story-focused?

[00:04:27.21] RN: So, animation actually offers some cognitive benefits. For instance, on the web, we tend to think about using the web in a desktop place, because most of us develop on a desktop. We are used to consuming what we create on a desktop. And in that model, it makes sense that when you click a button and hover over something - a new page - a new interaction just appears. But imagine if you were to use your iPad or your phone, a touch device. And you did something, and then something just appeared. Like, you swiped, and instead of anything moving, you just saw the next page - it just came in. It would feel weird. It would feel a little broken, right? You need that gesture, that animation tied to your input, for it to feel like a natural experience, a natural interface. It's really, really apparent when it comes to using small touch screen devices. It's less apparent on desktop because we've been trained to expect the web on desktop to be a very point and click adventure. Click thing, new thing comes. It doesn't have to be that way though. Models used with touch devices are actually less of a burden on the human brain. When you see now that animation is creeping into the interaction models with web apps especially, that can be used on touch devices, on small devices, in many different situations. Instead of doing point and click page change that just cuts a new page in, you might see that the interaction designers put a little thought in there and made it so that the different elements on the new page fade in. This is even easier to do these days than it was in the past, because frameworks like React and Angular and Vue support animation models better than ever before. So it can be practical and fun.

[00:06:12.05] SY: Yes. And I remember - I can't remember which iOS update it was, but I remember seeing all these new animations - and it was very, very subtle things. It was things like, in iMessage, the little speech bubbles moved a little bit more like the ocean, a little bit. And they kind of popped up, and they had a slight bounce to them. And what was really interesting about that, from a web animation perspective, is because literally a second ago I was using something that was much more static, and then all of a sudden I got a software update and all of a sudden everything moved a little bit more. I could really see the difference, I could really feel the impact of something that just felt more human.

[00:06:55.09] RN: I think that was iOS 7, and the thing I remember the most that changed was, when you would tap on an app icon, previously, you'd just suddenly the app would be there. But in iOS 7, when you tapped on an icon, it would zoom into the icon and reinforced where that app lived on your home screen. I always was forgetting where my different apps were, and once they made that change, suddenly, I remembered it. Of course, a lot of people didn't like the zooming, and there was a quick patch update to allow people to turn that setting off. I left mine on, but I think it was the first time we saw animation and accessibility lock horns.

[00:07:35.02] SY: Absolutely, and - my thing is that I hate all software updates. That's just my default reaction, they make me so, so angry, and then two days later I'm like, this is the best ever! So that was one of the ones where I remember being very angry, because I said "You're just taking up one second of my life so you can zoom and be fancy?" and then now it's totally natural and I can't imagine it any other way.

[00:08:00.29] RN: That's a common concern.

[00:08:02.08] SY: Yeah, so have you seen that in your world, in web animation? Are people generally resistant, or do they start off thinking, what is this gimmicky, unnecessary thing and then eventually adopt it and enjoy it? Or is there any initial pushback, any friction to the animation?

[00:08:19.12] RN: There's often pushback from developers, who come from a very "Users want things fast, why would you slow them down?" But you'll find designers tend to be really embracing of it, a little too much in some situations. The truth is that there's this thing called cognitive load. And this is how long it takes the human brain to process what the heck just happened. And if you have taken somebody from one page layout to a completely different page layout, and they have to find something, it increases their cognitive load if that page layout is completely different. They have to set up a new mental model of where everything is and then hunt for the thing that they're looking for. It takes time for a person to reorient in any system. But if you could use animation to just point to the thing that they're looking at, be like, on this page, this thing that you're looking for is now in this place on this other page, if you can guide people through that, you could decrease their cognitive load, thus making the experience feel like it's taking less time. If it takes a person three seconds to figure out where the thing they're looking for is, without animation, but one second with like, a two hundred second animation, that's a net gain of two seconds. That person can be more effective in that mental model.

[00:09:37.25] SY: Yeah, that's a good way to look at it. That makes a lot of sense.

[00:09:39.23] RN: It only took me five years to figure that one out.

[00:09:42.20] SY: (Laughs) Well, we are glad that you did, and now you can speed up our understand process a little bit more, so thank you for that.

[00:09:50.07] RN: My pleasure.

[00:09:50.10] SY: So, we talked about the application of animation and why it's useful and why it's helpful. Let's talk about the actual implementation of it a little bit. So, if I said, I want to have a really cool zooming in effect for pressing a button on my website, how do I even begin to break that down and implement it?

[00:10:15.12] RN: Part of this is going to come down to what are you using to host your site? Are you using a framework like React or Derby, etcetera? Most of those have animation modules that you can drop in. React Motion is one of them. But if you are self-hosting, for instance you're using Jekyll, or maybe WordPress, or Drupal, things that don't have animation modules, they're not JavaScript frameworks for serving up content, they're more like flat-file systems and sometimes they have access to a database. The point is that the content isn't very dynamic. In those situations, you would look into something called pjaxs. It's from so long ago, I don't think anyone who's listening remembers it. But what it stands for is pushState and AJAX. AJAX is this technique that allows you to use JavaScript, to go out, get a little bit of information from somewhere else - maybe it's another HTML document on the web, maybe it's something from a database, come back to the page, and then put that content onto the page without ever reloading the page. It was kind of the intermediary step between flat-file systems and non-dynamic page serving, and what we have now, with various JavaScript frameworks, where all the content lives as JavaScript modules. But the great thing is that there are still systems that you can use - things like Barba.js, and the others tend to rely on jQuery, and Barba is vanilla JS. I like things without dependencies, and the developer did a lot of really thoughtful things with it. So, if you're working with something like Jekyll or WordPress, or Drupal, I would recommend that you check out Barba.js and you can add it there. And it will essentially do what I just told you, use AJAX to go out, get content, like say you user is clicking from one page to another, with that button that maybe it says Add to Cart or something. Barba.js will intercept that message before loading a new page, will go out to that page, it will gather all that information off that page that you need to update the site to look like the next page, and then you can say, I want you to animate that information like so. So you could add a little zoom with CSS or JavaScript. And then paint the new information in. It will use PushState to update the URL and the browser's history so it looks like you're on the new page, even though it just updated the HTML document there. And this allows you to navigate forward and backward using animations as well.

[00:12:44.28] SY: So, in that example, it sounds like the framework is doing a lot of the heavy lifting and as far as me actually creating the animation, that's done in CSS or JavaScript?

[00:12:58.03] RN: CSS and JavaScript can both be used to do animations. I prefer CSS because it lets the browser decide how to animate something, and it usually will pick the most performant way of doing it. The browser will be like, oh, that's a really easy animation, I'll just do that over here on a separate thread, or I'll send that to the GPU. I won't let it interrupt the JavaScript or whatever. If you use JavaScript, it tends to be more like, the JavaScript goes to the document object model and updates the individual elements on the page with new CSS values. And anytime you're going to the document object model and touching it and updating it, it's a little bit more roundabout. Also, the browser can't look at what's happening and say, oh that's an animation, I should put that on a different thread. It's just on the JavaScript thread. Now, there are libraries like GreenSock, where the developers have put a lot of energy into making sure that those animations will be as performant as possible. And they are pretty competitive with things like CSS, or the web animations API, which is new and not fully supported by all browsers. It does a good job, but one day, we think that things like the web animations API will probably surpass the performance of JavaScript libraries. So, it's a good idea to keep an eye on the web animations API and learn to be proficient with CSS animations, rather than investing all of your time in learning on JavaScript library, because there are times when you might be trying to do something very complex, but it's just not going to be very performant with JavaScript, and you'll want to be able to lean back on those good old-fashioned CSS animations.

[00:14:32.16] SY: Yeah. So, how far away is CSS animation from, I guess, traditional CSS, where I'm mostly using it just to style a page and make it look nice and make it very usable. How transferable are my existing CSS skills if I want to get into web animation and using CSS to do that?

[00:14:56.14] RN: Well, lucky for you, CSS animations are very CSS-y. I actually have a course on this - I got your listeners a special discount, you can use the discount code NEWBIE, all caps, to get ten percent off.

[00:15:14.01] SY: Awesome, thank you.

[00:15:14.01] RN: You can find this course at courses.rachelnabors.com. And if you are already subscribed to Frontend Masters, or you're thinking about it, my course is also available on Frontend Masters, so you should check them out too. They've got a lot of really great things by people like Sarah Drasner, you can learn Vue, etc.

You can learn directly from me, or if you want to find this course available on another site, there are many paths forward. But anyway, CSS animations look intimidating at first - they've got complicated values like delay and oh my gosh, Fill Mode, animation-fill-mode.

[00:15:52.28] SY: Oh, that sounds scary.

[00:15:54.07] RN: And what is that even? It sounds complicated. But it's probably one of the more accessible ways to learn to animate things if you already know CSS. And CSS - if you know CSS, big hand, there are so many JavaScript developers who find CSS really intimidating, so if you know CSS, it's awesome. You've got so much in your corner already. But it's fairly accessible to get into it - I'd highly recommend it. If you already know JavaScript, you shouldn't not learn CSS animations. You should invest in giving those a shot. Because like I said, sometimes, there's something you're going to want to do, and it's not going to work out so great in JavaScript. So you should have CSS as a backup in your pocket. If you can animate with CSS, you should. There's this popular thing where people learn a library, first and foremost, a really big one, like GreenSock or something like that, and that's the only animation tool that they use. And they don't know how to do these animations with CSS. And while a library like that is really useful for a complicated, interactive website - kind of like the Flash sites of old, where lots of things are moving and lots of interactions are happening - it makes a lot of sense for those. It makes less sense for doing something like a page transition or a hover effect or an icon animation. For those things, knowing CSS is going to pay off in spades. You'll make lighter, faster code. So you really need to know when you want to pick each tool.

[00:17:18.23] SY: So, I assume that for more complex web animation, there might be a step before we actually implement where we kind of plan things out, maybe do some storyboards, map things out a little bit. When you are getting more creative, and there's more complex animation, what is your process for figuring out how to actually implement that?

[00:17:40.29] RN: For me, having my background in comics means that I typically try to do a storyboard, or I'll be directly animating something in the browser. You tweak a few CSS properties here and there, and you can make things move all over the place. But for me, if it's more complicated, I'll tend to sketch out how I'm thinking things should move, and then I'll try it with code. Some people mock up their code by writing out what they want it to do first, and then they write it in code. It's sort of like that. But visually, because you're showing where you want elements to move, not just the logic that you want to have in place. I did an article, actually, about storyboarding, maybe you could put the link in your show notes, it's available online, so it could be super useful. There's a template and everything in it. If you come from a design background, that might sound like a lot of fuss and bother for you. You might be thinking - but Rachel, I already know After Effects - and if you already know After Effects, bully for you. You have a great skill and I totally admire you for it. There are plug-ins with After Effects that allow you to export your prototype animations directly to things like SVG and JavaScript. Bodymovin is the current favorite to win - I know the developer, he's from Argentina, his name is Hernan Torrisi.

[00:18:53.29] SY: That's an awesome name.

[00:18:54.10] RN: It is. He's an awesome person. He's married to a studio animator, and this project started as them collaborating trying to make a children's storybook together. They never finished the storybook, but the tool that they built went on to become a really big deal. Such a big deal, that Airbnb's Lottie is built on top of it. Lottie takes the JSON information, which tells what properties are animating where and when, etc., and repurposes it into iOS Android React Native code, and even code for developing apps for Windows, so build once and export to any format. It's really useful. Thus, if you know After Effects, you've already got a great way to prototype animations. It's a little tricky to turn those into CSS animations, or animate them with GreenSock, but it's a good way to feel out what you want to do, and you do have some export options.

[00:19:47.02] SY: So, what are some common CSS animation tools that I might use if I want to make my website a little bit more human, a little bit more interactive, and a little bit more fun?

[00:19:58.21] RN: There are a couple of CSS animation libraries. There's a tool called Animista, it sounds sort of like something you might drink -

[00:20:12.17] SY: (Laughs) It sounds delicious!

[00:20:13.14] RN: Animistaaaa. It's a tool that lets you experiment with building animations in the browser. And if you're actually - you've built some CSS animations, and you want to test out how they work, and maybe tweak them a bit, I highly recommend using Firefox developer editions tools. Firefox has some of the best CSS and web animation API tools around. Firefox and I kind of teamed up on that one, so maybe I'm a little biased. But they definitely listened to people working with CSS animations. If you want to learn how to use them, check out DevToolsChallenger.com. It was a little adventure site that I built with Mozilla like a year or two ago that takes you on a deep sea adventures while showing you how to use their developer tools and animations.

[00:21:00.26] SY: So, you actually wrote a book called Animation at Work. We talk about not just animation and how awesome web animation is, but specifically how to apply it on a team, talking about best patterns and making decisions and communication. So, let's shift the conversation over to that and talk about how do you take these ideas we've talked about so far in this interview, and how do you actually bring them to work with you, and use them in your company's project?

[00:21:31.04] RN: This is my first technical book that I've ever published -

[00:21:33.20] SY: Congratulations!

[00:21:34.18] RN: Thank you. I'm really excited, it's with A Book Apart, you can find it at abookapart.com, and guess what - that coupon code NEWBIE totally works at abookapart.com too, you'll get ten percent off the book. Given that it's an eight-dollar e-book, it's less than a dollar off, so I feel a little cheesy about that, but -

[00:21:54.14] SY: (Laughs) We appreciate the gesture.

[00:21:55.14] RN: The great thing about it is that it goes everywhere. It's five years of experience in one book, and while my course is all about how to build things in CSS and here are the properties, etc., this book actually is more about where and when to use the animations in your day-to-day. It's a short book, you can read it in one weekend, and it's only eighty pages long. And like I said, it's five years worth of experience, so you're essentially standing on my shoulders. You don't have to make all the mistakes I made. And it applies not just to web development, but also to app development, so if any app developers, this is also a pretty awesome thing for you to check out. But it does focus mostly on the science behind how human perception and animation work together, different common patterns that can give you big wins, how to prioritize it, kinds of information you need to communicate animation across a large team. And you know, best practices, which is still an expanding field, because the science around how people interact with animations has largely been informed by tuition and less by, say fMRI scans, and that sort of thing. But that's changing rapidly, and I try to keep up with it at my site, animationatwork.com. So, the information that expands on those topics tomorrow should be at that site. Now, the thing that I should point out here is - if you're listening and you're like, oh my god, I want to be a web animation person, Rachel. You're doing this - obviously it is a job. It's not a job.

[00:23:28.29] SY: Aw!

[00:23:28.20] RN: Eh, it's alright. It's actually a great skill to have. So, what I've noticed from the market is that there are two kinds of people who use animation when building things. Motion designers, and developers. So, originally, you might have thought maybe web animation will be a real thing, like a specialist thing. Maybe I can be a web animation expert. I don't recommend you try it personally. It's not very profitable. But, if you are frontend developer who's able to code complicated animation, it's an extremely valuable skill. Everybody wants that right now. If you are a designer, who can make motion design comps - that is the term people use now, it's motion design, even though not all animations involve motion, like opacity and fades, those aren't motion, those are just change over time. But if you can do that - if you can export things using Bodymovin, or you can communicate to developers what exactly you need using motion comps, and storyboards, that's extremely valuable as well. And if you are a UX or UI designer, and you know about how all these motions work with the human visual system, then that is also valuable. So, this is an incredibly valuable skill, no matter what kind of position you're looking for or you already have. You make a little investment in this, and you're going to give the project you're working on a huge boost in comparison to its competition.

[00:24:59.01] SY: How do you make the business case for this? 'Cause I can imagine I'm a frontend developer, I'm super excited to get into web animation, and I read the book, I take the course, I have all these ideas about what I can bring to the website - but at the end of the day, I still have to get the approval, the endorsement of my tech lead, my PM, maybe even the CTO. How do you make the case on a team?

[00:25:27.01] RN: The short end of the story is - scientifically we can give users a better experience using appropriate animations to ease their cognitive load and guide them through a flow to the thing they want or need to do. Sites that don't do that, products that don't do that, will not be competitive with the ones that do. So, if your company is in a tight competition, look at their competitor - is their competitor using it yet? Are they using it better? If yes to either of those - and you're going to get yes to one of them - this is something that your company should be investing in right now. Most companies - large ones especially - are loading up on motion designers in their prototyping departments right now. Smaller companies tend to not be able to afford motion designers just making movies of how things should look, or prototypers that make throw-away code to experiment with different ideas. Smaller companies tend to need people who have those kinds of skills to ideate and implement in their own roles. So, the argument you could make was - to stay competitive, we should be investing in this, because it will be good for our interaction models and we can help users do better and prefer us to our competitor.

[00:26:42.13] SY: So, I can imagine people getting really excited about web animation and thinking, I'm going to animate everything. I'm going to go on my website and find all the places where I can add in transitions and really cool zoom effects, and I'm going to put all this knowledge to good use and put it everywhere. And I'm going to assume that is generally not a good idea. So, how can we avoid creating things that may be fun and really cool from an artistic perspective, or from a I just learned this and I want to use this tool perspective, and make things that are actually helpful to the user?

[00:27:17.19] RN: When I first found out I could animate things with CSS, I quit my job so I could animate all the things. And just traveled around and was like, I animate cool things now, I don't want to talk to anyone else. That was probably not the greatest career idea, but I wrote a book, so not doing too badly. Yeah. The fun thing is that if you do animate all the things, you might animate some things that probably shouldn't be animated. Now, every time something moves on the screen, it's going to have a cost. There's the cost of you or your developers implementing it. There's the cost of the processor and the battery to make it happen on the screen, and sometimes there's the cost of the user's attention. If everything is moving, what are they supposed to be paying attention to? The trick with animation is to use it decisively. Animation should be like the decisive blow of a Samurai sword.

[00:28:12.01] SY: Love that.

[00:28:12.18] RN: I find it's helpful to make a grid where you plot out what is easy to implement versus what is going to have the biggest win for your customers and what is going to involve more people's collaboration. And you want to aim for the things that are easiest to implement and have the least impact on the performance of the whole system and are the biggest wins for the people using your product. And those are the things you want to aim at first. And if you're working on a start-up where there's just a lot of people cranking out a lot of things at a lot of times, you're probably not going to get to the rest. This is probably it. These are your low-hanging fruit, these are your easy wins, these are the things you can get into the product. And if you're lucky, you'll be able to fit some of the other ones in on slow days. If you work at a bigger company, you might be able to put the difficult things that are also important on a long-term track that you get to over a course of months or years and you're able to prioritize them or set aside time for them. But the fun stuff is probably stuff you're never going to have the time to work on, unless you like doing that sort of thing on your weekends, in which case knock yourself out.

[00:29:26.24] SY: So, what advice do you have for newbies who are excited about web animation who want to learn more and want to figure out how to integrate this stuff into their own projects?

[00:29:36.19] RN: Well, a great place to start is to subscribe to my newsletter, Web Animation Weekly, it's at webanimationweekly.com. Every week you're going to get a lovely selection of links, tutorials, etc., hand-selected by yours truly and the editorial team at Web Animation Weekly. We are all web animation wonks, just like you, we love it, it's a great place to start. My book and my course are also excellent starting points. You can find the book at ABookApart.com. You can find my courses at courses. RachelNabors.com, don't forget your coupon code of NEWBIE. Other great places to look around - there's a slack for animation at work - slack.animationatwork.com. It's full of people - great people in the community, of various levels of implementation. You've got old-hat folks, who've actually developed animation libraries and are working to improve them, they've got their own channels where you can come and give feedback, and you've got people who are new to web animation and they're just getting started. And sometimes people put up creative code challenges and work together, and it's a great place to go and get feedback from people who have been doing this for a while, as well as making other friends who are on this learning journey with you.

[00:30:50.15] SY: And I love that there are so many different formats, too. With the newsletter, that's kind of updated news, kind of weekly, on-going stuff, then there's the book, then there's your courses - so just having that wide range of formats just makes it really accessible. So, thank you for that.

[00:31:08.18] RN: I try to think about everybody's different consumption style.

[00:31:11.28] SY: Oh, that's a good phrase. Consumption style, I like that. Coming up, I talk to Rachel about her career. And how she went to cartoonist to coder. That might seem like a natural progression, especially since this episode is all about web animation, but it's actually a pretty big jump. She shares her pretty inspiring story about getting started with code, and her thoughts on following your passion - spoiler alert, she's not a fan. We've also got another installment of the Coding Corner with Joe Burgess, VP of Education at the Flatiron School. We'll talk about CSS, and more specifically - understanding CSS grid systems. After this.

Choosing a boot camp isn't just about the curriculum. It's about the connections that program has to job opportunities, resources, and the local community. This is why you should check out DigitalCrafts. They've got campuses in Houston, TX and Atlanta, GA - the fourth largest tech hub in the US. That means plenty of networking opportunities and neighbors who understand what you're going through. In addition, students and alumni alike - they call themselves builders - get access to rotating elective classes in the evenings, so you can keep learning even after you graduate. They cover skills and topics like UI and UX design, CS fundamentals, and iOS mobile development. A great curriculum - and a community is essential. So check out digitalcrafts.com for a schedule of upcoming classes. They've also got a great list of resources that you can start prepping on your own. Their upcoming cohorts start in early November, so check them out at www.digitalcrafts.com.

[00:32:37.25] And now it's time for the Coding Corner with Joe Burgess, VP of Education at the Flatiron School. So, let's talk about layouts and grids and CSS. How do you feel about CSS?

[00:32:51.17] JB: It is way better than table-based layouts, which is how I originally learned. I mean -

[00:32:58.02] SY: You can be honest. This is a safe space.

[00:32:59.03] JB: I personally do not like CSS -

[00:33:03.21] SY: There we go.

[00:33:04.13] JB: But I am fully convinced the reason is why is because I am not very good at it.

[00:33:08.06] SY: I agree with you - not I agree with you not being good (laughs) - I have that same feeling, too. I hate it, but I accept that it's because we haven't gotten to know each other well enough.

[00:33:18.14] JB: It's just this annoying, negative - I both know that I don't like it, I know I don't like it because I'm not good at it, and I kind of don't like myself for not liking something just because I don't know much about it.

[00:33:30.21] SY: A lot of negative feelings going on, yeah.

[00:33:31.00] JB: In iOS - I used to teach iOS - we would do Auto Layout, and I loved Auto Layout, and I'm fully convinced I only loved Auto Layout because I just knew it better.

[00:33:41.22] SY: Yep, yep, absolutely.

[00:33:43.21] JB: That being said, I love the current model of CSS HTML, which is that your HTML is just the data, it's just the content, and the CSS is all the styling. I think that's so important, and as I've gone through a few redesigns, for Learn and Flatiron School, and personal websites, it's so nice to just swap out CSS and not have to change anything else.

[00:34:03.21] SY: So, one of the - I'd say the most popular tools within CSS and styling - is the grid system. How would you explain the grid system?

[00:34:13.01] JB: Yeah, so the grid system - it's not a CSS concept. It's a design concept. It comes from the idea that to provide consistent visual weight, you can design what you do into a grid. And whether that grid is a tic-tac-toe board, where it's three by three, if you played four square on the basketball courts, it's like a two by two, or even just halves. It's this idea that things should be in proportion. The most common example of it is a three-column layout, where let's say the left column takes up a quarter of the space, the middle column where your content is takes up half the space, and the right column takes up a quarter of the space, width-wise. And that's a grid. If you add up two side columns, a quarter plus a quarter, it equals a half, which is the side of the middle. It lends itself to be just visually prettier -

[00:35:03.00] SY: And more organized.

[00:35:03.05] JB: And more organized. It's actually one of these funny little hacks I never noticed until I heard about it and Googled it and all of a sudden you get all these websites that will lay a grid on top of these designs that are beautiful and you go - oh.

[00:35:14.15] SY: Oh, that's cool.

[00:35:15.00] JB: A nice little hack when you're trying to build your own blog is do it in a grid.

[00:35:20.24] SY: Is the grid concept specific to web development and websites or is that something we took from -

[00:35:26.03] JB: It comes from like design and layout design. I don't know when it really started, but it comes from traditionally magazine layout, or advertising layout. It's a very standard graphic design concept. That web developers kind of yanked and warped to work in the web world, but in the end, I think actually it's really similar to how it works in a print world. I think. I'm a terrible designer.

[00:35:53.02] SY: (Laughs). Well, the good thing is, we have standard grid systems that we generally use. Like you mentioned, we can do a two by two, we can do a three by three, but there is kind of expected, common systems that we can just plug and play. So what are some of those?

[00:36:06.27] JB: The way that a lot of people do this is they use a third party CSS framework. The most common one I think is still probably Bootstrap, which is this thing that Twitter built to make it easy for them to build websites. There's other ones now, there's one called Foundation, Material Design, there's a bunch of them. The coolest thing it does is it breaks your content into a twelve by twelve grid. Twelve columns by twelve rows. In a website, we don't care too much about rows, because it's kind of like however much content you have, it always grows vertically, right. And the reason they do twelve - and I never really understood why - I was always like, alright, I guess they want you to have a lot of grid -

[00:36:46.18] SY: Options. That's what I thought.

[00:36:46.26] JB: What I found, what someone pointed out to me, is that twelve is nice, because it lends itself, it's divisible by a lot of things. So it's divisible by two - twelve over two is six, so if you want to do something in halves, you can use columns one through six for one half, and seven through twelve for the other half, and it's halved. It's divisible by four, so if you want to do things in quarters - woo, doing mental math now - one through three, four through six, seven through nine, and ten through twelve. So it's evenly divisible by thirds as well - so if you want to do thirds, you do one through four, five through eight, and nine through twelve. Which by the way - forever and always - will always require thinking and you'll usually never get it right on your first try.

[00:37:33.19] SY: (Laughs). Yes. It was a little confusing, because if I want to split the area in two, I want to put column two, but that's not the way to do it. You put column six, and that gives you half of the available columns, that's how you get to half. So yeah, that whole process took a while for me to get used to.

[00:37:50.23] JB: It's really great, once you wrap your head around that, it's pretty stellar not to have to care about it. The other thing that's nice about grids and columns is as we do responsive design, which is the idea that a single or roughly single CSS layout can work for web, tablet, and phone in a way that on the web, you have your columns left to right - so you have a left column, a middle column, and a right column - when you shrink, an easy kind of catch-all way to shrink that is you can either say, delete this column - easy. Or, instead of it being horizontally stacked, vertically stack them. And a lot of the framework like Foundation and Bootstrap will almost do that for you automatically, and if it's not automatic, it allows you a ton of customization options to build out however you want.

[00:38:33.00] SY: Ok, so why can't I just do that with my own width values. So, for example if I want to have a grid that's half and half, split it evenly in two, why can't I just do width fifty percent for this section, and then width fifty percent for the other section. Why do I need a system?

[00:38:50.08] JB: A hundred and ten percent, you can't. It just makes it easier, is the honest answer. Using a framework that takes a lot of that stuff out of the way for you, it means that if you decide that I'm going to go to thirds - boom, done, easy. If you go eh, now I want to make it mobile responsive, boom, done, easy. With every framework, no matter what the framework is, you can always do the thing without the framework! It's just, I find, less fun and more difficult.

[00:39:14.24] SY: I know that. I'm like, I don't know this big old framework, I'm going to do my own thing. And there are a couple things with the grid system that I've noticed are very helpful. One, like you mentioned is responsive. So, I want it to be half and half on desktop, but then on mobile we need to expand everything to take up the full width. So having those opportunities are so much easier. But the other thing is that with grid systems, they also give you a gutter, which is the thing I always forget about. So if you do a fifty percent/fifty percent, then they're touching each other, there's no room. And the grid system always handles that spacing between columns really nicely as well.

[00:39:48.26] JB: Yeah, that's a good point. I always - I never call it a gutter, I always call it a margin. But gutter's a much better term for it.

[00:39:53.11] SY: Also from print.

[00:39:55.25] JB: Yeah, exactly, it's also from print and there's also like safety margins and all this stuff, right.

[00:39:59.12] SY: Yes. It gives you all those little details that, like you said, you don't have to think about.

[00:40:02.13] JB: Yeah, it chooses sensible defaults that make you look good, and I love that.

[00:40:06.21] SY: (Laughs) Anything that makes me look good is awesome.

[00:40:10.04] JB: Exactly.

[00:40:10.25] SY: If you want to learn more about the Flatiron School and how to get started with web and iOS development, check out FlatironSchoolNewbies.com. Link is in the show notes.

So next I want to talk about your career. You wrote this blog post - you wrote it actually a while ago, a couple years ago - but I'm wondering how you feel about it now. The blog post is called, Don't Do What You Love. And it is basically pushing back against the general career advice that says do what you love and the money will follow. You know, you don't necessarily buy into that and you wrote a blog post explaining that and I'm wondering, how do you feel about it now?

[00:40:46.04] RN: It's interesting 'cause I grew up poor in the middle of nowhere. And getting out of that situation was hard. I mean, one of the reasons that I went on to work for Microsoft was that I remember using the computer and internet access at my local library - which was like thirty minutes away from me, and down country roads, and it had a little placard on it: "This computer and internet access donated by the Bill and Melinda Gates Foundation." And I really wanted to see the house that Gates built and be a part of that magic that changed my life. So, when I was growing up, people would constantly be telling me, if you find the thing that you're great and talented at, that you love, if you just do it, people will eventually pay you money. This is not true. What you need to find is something that you love that other people really need, and will pay you money for. And you don't have to do something that you love. Sometimes you do something that you like, or you do not hate, and you keep the things that you love as something that you do on the side. In this case, you never grow to hate it. I think you posted something about how community work - if you do not buffer yourself and set boundaries and make it sustainable, eventually can turn into something you don't like doing, or that wears you out instead of energizing you. And that can happen when you try to make something you love into something that makes you money. It happened to me with comics. I loved making comics - I had four hundred thousand readers following my work every week. These were women - young women - from around the world. Some of them I'm still friends with and still talk with. I always wanted to be friends with my fans. Not necessarily the wisest decision. But I've watched them grow and change and some of them have pursued what they love, and some of them have succeeded and some of them haven't. And I know that I left the thing that I loved - comics - and moved into tech, which is now the thing that I love. You can fall in love several times in your life. That's ok. The thing that you do for a living should be the thing that people want the most from you, that you can do without burning out, and that you enjoy. That is my feeling now. Animation is something I love. It's not my job though - it's something I want to share and help other people do better, but it is not the thing that I do to put money on the table.

[00:43:14.20] SY: So, when you think about your own career moving forward, do you hope that one day web animation will be the job that puts food on the table? Or is the assumption that it's generally going to be a side thing that you do because you love it, but you'll probably do something maybe related but not quite the same thing as your primary job?

[00:43:36.11] RN: I think I will always be doing something that's related to animation, whether it's working on a design system, or diving into augmented reality, where a lot of the things that I learned while diving deep with animation actually apply to how humans interact with the virtual world as well. So I think tangentially, I'll always be doing something related to this core interest in how people interact with the world around them and communicate with each other. Animation has been a wonderful outgrowth of that interest. But it does not define me, and I'm not limited to just being this.

[00:44:11.20] SY: So, when you first got into code, was it something that you like that you came to love, or are you at a point now where you like it, but you're not necessarily in love with it?

[00:44:25.16] RN: Oh, I'm also in love with it. When I first got into code, I was doing comics for a living, and pretty popular, winning awards. But I noticed when I'd go to Barnes and Noble to get books for drawing better, I'd end up sneaking over to the web development side of the bookstore, and I'd be like, what's this ASP.net stuff? Oh, this looks cool, oh wow, CSS. And back in those days, you couldn't have an online presence the way you can now. If you want to sell something today, go to Etsy.com, sign up for an account, take some photos, boom, you're in business. Or, go to shopify. But in that day, if you wanted to sell something online, you had the option of Ebay, or you could download OsCommerce, which was a PHP shopping cart system, and you could install that on your own server, and then it would look ugly so you needed to learn CSS to make it look nice like the rest of your site. And I tended to do those things because I was promoting my own brand, selling comics, doing all this stuff. And I slowly found out I was really enjoying this, it was a great puzzle. And in the meantime, comics wasn't paying well enough to keep me happy. And it became grimmer and darker and less satisfying. I felt more like a slave to my passion, and it wasn't making me happy, it was making me sad and nervous and scared. And I found out - you know what, people actually pay a lot of money for this other thing that I'm starting to fall in love with. Maybe I should do that instead. And then the recession hit and that's another story.

[00:45:55.08] SY: Ah.

[00:45:58.02] RN: But the point is, if I were still a cartoonist, I'd probably still be really enjoying it, but I would probably also be super scared and nervous about the future, I would be having trouble with, you know, I was able to get jaw surgery because of this passion of mine. Code loved me back, code paid for my jaw surgery, comics wasn't going to, even though people were at that time raising money to help me with it. We didn't have Gofundme back then, so it was all PayPal donations. You had to do everything by hand! But now I feel like I can take care of myself, I'm taken care of by my passion. So my passion for coding, it grew, it blossomed, it was partly an escape from the thing that I loved that wasn't loving me back, and it loved me back sufficiently that I - well, it's really easy to love someone who loves you back, let's put it that way. But some people say to me - Rachel, don't you ever miss making comics? Don't you ever miss storytelling? And I'm like, not really.

[00:46:58.07] SY: Huh, interesting.

[00:46:59.25] RN: Because I haven't stopped telling stories. The thing I loved about comics is that I was telling stories and interacting with people who loved those stories. I still use those skills to do talks, to write books, to post great things online. I'm always telling stories. And I'm still interacting with people. A big component of my life is that interaction, and code helps me do it in a different way. So, sometimes you need to see - what is the common thread? Do I like doing this thing because it is this thing, or is it actually an underlying common thread that unites those two things? For instance, for me, I love the storytelling aspect of both cartooning - drawing comics - and of making things on the internet, and sometimes even getting on stage or on a podcast to talk about those things to other people who share that love.

[00:47:52.22] SY: That is really good perspective. That's really, really good, and that's something that I've been trying to figure out for myself for many years. And finally I found CodeNewbie, or I guess I created CodeNewbie, and that's my thing now, but for a long time, it was trying to figure out if I like so many different things, what is that common thread, what is the common denominator that everyone shares, and how do I pursue that thing. So, I like that, I like that as advice. That's great.

[00:48:20.08] RN: It can be really frustrating, too. If you have any amount of skill in some of these things, I often say I'm like the elephant and everyone is the blind friend around me. My UX friends will be like, you're totally an UX-er. My design friends will be like, you're totally a developer. My developer friends will be like, you're totally a designer. And everyone sees something different and awesome in there. But inside, especially if you're good at all these different things, you have all these passions and these loves and you feel like you should be doing all of them, right, because that's what you're supposed to do, you're supposed to love what you do and do what you love, and oh my god, I have to be all these things to everyone. You can just be you. You can just do what you want to do, and love what you want to love. And that's ok.

[00:49:03.16] SY: Yeah, and that love can change. And that's ok too.

[00:49:06.00] RN: It can, and sometimes it will stop energizing you, and it's ok to move on.

[00:49:10.02] SY: So, one thing I want to point out is that you are - or you were - a cartoonist and you know, for a lot of us, when we think about cartoons, and animation, they seem very interchangeable, but they're actually very different because you did comics. Was the transition from that to web animation, was that a natural next step for you, or was there still a lot of learning involved to get into the animation side of things?

[00:49:41.00] RN: The confusion between comics and cartoons is that a person who draws comics is called a cartoonist, and a person who draws cartoon is an animator. I know, right? So when I tell people - I'm a cartoonist turned web animator, they usually say oh, cool, so like Mickey Mouse and stuff, right? Not quite. I did have to learn a lot about animation when I first started playing around with CSS animations. I was excited because I always wanted to make my comics into cartoons, to see my creations moving and talking on the screen. It was a dream of mine. It's not a dream of mine right now, but at that time, it was really fun to learn about it. But I also had to learn a lot about how things should move. I did a lot of studying of techniques used by Chuck Jones and the nine old men at Disney Studio who - how hair should move when someone is walking versus running. And there are all these different things - it gets into physics, it gets into material design, and you can dive really deep in the studio animation side of things and learn a lot about things that you didn't think would be useful when building an app, but then when you're building an app, it totally comes into play, because you'll be like, well, if this thing is lighter and on top, it should move more like this. And this thing should act more like that if it's heavier, but it was a learning curve. Comics don't move, animations do. But did you know that most animations start with a storyboard, which is basically a super-formal boring comic book? So I already had the platforms.

[00:51:24.16] SY: So, one of the things I hear a lot for our community is people who come from different careers, different backgrounds, backgrounds that don't feel very directly related or transferable to tech and specifically to coding, and what I love about your story is if someone said, I draw cartoons and I want to be a web developer, that would feel to me like a relatively big jump, but you've been able to totally use that to your advantage and to have that give you an edge and to open up all these opportunities that we've talked about today. But what advice do you have for people who may feel self-conscious about coming from a different industry or having a different skillset that doesn't quite obviously transfer to coding?

[00:52:13.06] RN: That's a tough one. 'Cause I kind of stumbled around in this. I could've gone to just design, 'cause comics and layout have so much in common. Being able to lay out a good comic and lead people through a story - it makes for great layout, great sales design, great content design, et cetera. So you could spin out a number of different kinds of careers off of that, depending on what set of skills you want to follow. But, for people not me, I would say, don't focus too much on how do I take this set of skills that I have and be to an employer, yeah, I totally can take my plumbing skills and these will be useful to you. Focus on what it is about the thing that you are doing that you are good at - was it working with the 3D spaces? Plumbing requires working with 3D spaces. You need to manipulate pipes and understand flows of water. That could translate to working with 3D or VR. Consider that when you're looking at the different coding paths open to you. What about the thing that you're doing was particularly exciting or good for you? Or that you were exceptionally good at or found satisfying in some way? If none of that was satisfying, probably better to just explore all the things until you find the thing that makes you feel satisfied. Then you'll have a story to tell about how you know that that is the thing that is the most satisfying to you. And telling a compelling story is the most important part of all this. Can you tell a compelling story, and understand why are for you now the way they are.

[00:53:42.09] SY: There was a woman on a Twitter chat some time ago who said, I'm a nurse and I'm trying to get a coding job and I'm interviewing, and I'm so self-conscious about my nursing background because what in the world does that have to do with coding? And immediately, I was like, ok, so you deal with people who have different health-related issues, so you probably are very empathetic, you probably have lots of knowledge on accessibility, you probably have really great communication skills, you're probably really good under pressure. Immediately I listed like five things that she was amazing at that transfer so well with coding. So, instead of focusing on the difference in the industry - health versus tech - and even that, there's so much health tech, so there's a lot of overlap there as well, but figuring out, what are those underlying skills, those things you have to be good at, that also crossover.

[00:54:33.17] RN: Like, what about nursing did you love? Was it helping people? And what do you take from it to the new place? You have a lot of experience with different kinds of people, different abled people. So, when you're building something, it's not hard for you to pop out of your current mindset, and be like yeah, but that might not work great for other people. Having that perspective is invaluable for a competitive company.

[00:54:54.13] SY: Absolutely. So, next let's move on to some fill in the blanks. Are you ready?

[00:54:59.05] RN: Yes!

[00:55:00.20] SY: Number one. Worst advice I've ever received is?

[00:55:03.23] RN: Do what you love.

[00:55:04.14] SY: Ok, there you go. (Laughs). What you wrote in that blog post made me really happy because part of my take-away from the blog post was - a lot of people give you advice that is really good for them and is very good for very specific situations, but doesn't apply - obviously didn't apply to you, doesn't apply to a lot of other folks - and what I love about that first fill in the blank question is it gives people the opportunity to be more critical of advice they get that might seem good but doesn't quite work out. So. That's a good one.

[00:55:38.08] RN: So, I was going through my Goodreads profile the other day, 'cause I wanted to take a census of all of the books that I've read, and I noticed some books have stuck with me for a long time. I can still quote parts of "Animals In Translation" by Temple Grandin even though I read it over ten years ago. I was looking at a lot of self-help books, and a lot of like, "The Richard Branson Story," and I didn't get anything out of them. They didn't' stick with me, they didn't teach me any lessons, and I realized that the common thread was that these were written by people not like me. These were people who had parents they could lean on in a time of panic or crisis. So they were able to take more risks and say things like yeah, if you don't like your job, you should just quit. That's horrible advice if you don't have a family you can rely on, or you're on your own. That's terrible. If you do that, you're going to be in a place of fear, and that's not a good place to be thinking from. So, I have become a lot more choosy in which self-help and so-and-so story books that I read, because some of them I'm more likely to nod my head to and be like, oh, that's useful, that's insightful, and those ones come from people who are more like me. So, I look for books that are written by people who didn't have a lot of resources growing up, or they grew up in strange, rural areas, and then ended up in cities. I look for those kinds of books, because I find it's like talking with someone who understands me, as opposed to getting off-the-cuff advice from someone who doesn't understand how dangerous their advice might be for people who aren't like them.

[00:57:07.20] SY: Yep, absolutely. Number two - my first coding project was about?

[00:57:10.10] RN: My first coding project? That was a GeoCities site. I made a gallery to show my artwork to other people. My mom never encouraged me to be a programmer. She used to be a systems analyst, but she kind of had a break with the development world and dragged me off into the forest and raised me as a child of the wilderness. So, it was interesting, when I grew up and I was like, I am interested in programing games. When I was like twelve, she was like, I don't think you'd enjoy that. You make one mistake, everything will go wrong. You should do art. You like art - do art. So I did art. I did a lot of art, and I didn't find many books on programming until I started accessing the internet at the library, and I realized I wanted to share my art with other people. So I showed up at the library, I took a little introductory course they had there on HTML, and I built a GeoCities site where I - I bought a scanner, that was a big investment too, I bought a scanner so I could put my art onto GeoCities. And it was a terrible looking website, but I was able to share my art, and that's how I ended up eventually writing and drawing comics for a living.

[00:58:17.01] SY: What did your mom say to the GeoCities site?

[00:58:20.03] RN: I think at that point my mom was also doing HTML and CSS for her own purposes -

[00:58:23.05] SY: Oh, cool!

[00:58:23.18] RN: But I don't think she considered it programming. She used to write in COBOL and Assembler in big main frames, so this was probably just like a toy to her. But she seemed to think it was fine - she didn't have a problem with it.

[00:58:37.22] SY: Number three - one thing I wish I knew when I first started to code is?

[00:58:40.23] RN: I wish I'd known that coding isn't just coding. When I was transitioning from comics and storytelling to development, I felt like I was cutting off a part of myself. I was taking all my fans, all my readers, and I was saying goodbye everybody! I'm not doing this anymore. I'm this new person. I always wanted to go and continue my stories, I always was like, next year I'm going to get back to comics, next year I'm going to get back to storytelling. I'm just doing this to get my surgery, and weather the recession - next year, it will be next year. And that year never came. I grew up, my readers grew up, we still keep in touch. And I eventually found out that I can tell stories with code. I can do things like CSS animations. I can give talks. I can draw comics and illustrations and animate them and do all these different kinds of things that I used to feel like to get that kind of, that fix, that external validation, I had to do this one thing. And this one thing did not involve code. I wish someone had told me - code can be whatever you want it to be. It enables all of our communications, it enables everything that we do. It is the glue that keeps humanity stuck together now in the modern era. It is what you want it to be.

[00:59:50.27] SY: Absolutely. And I feel like that's something that I'm still reminding myself of. Just because a bunch of people got there first and said, this is how we decided that a website should work, doesn't mean that that is the only way that it can work. So, I feel like I'm always having to remind myself that anything can be code, and code is just a tool to do whatever you want.

[01:00:11.13] RN: It's like the iron of this iron age.

[01:00:17.20] SY: Yeah, yeah, I loved that.

[01:00:18.06] RN: I can be shaped into anything, it can be used for ornamentation, for weapons, for utilitarian purposes, it's like being a codesmith.

[01:00:25.22] SY: I like that a lot. That's good. So thank you so much Rachel for being on the show. You want to say goodbye?

[01:00:30.03] RN: It's been wonderful, and thank you CodeNewbies, who are listening. I can't wait to see what you create.

[01:00:36.29] SY: And that's the end of our last episode of Season One! Wow, we've covered a lot. We talked about accessibility, VR, computer science, JavaScript, React, technical interviews, web performance, and finally, animation. So 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 each months, 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 chat - we've got Wednesday chats at 9PM EST and our weekly coding check-in every Sunday at 2 PM EST. Thanks for listening. See you in Season Two.