Style Guides with Micah GodboltPublished 9th of July 2017
About Micah Godbolt
Transcribed by Alison
Brad Hey everybody, welcome to another episode of The Style Guides Podcast. My name is Brad Frost.
Anna I'm Anna Debenham.
Brad And today we are really, really lucky to have with us Micah Godbolt. Micah, how are you?
Micah I am good; I'm ready for this, let's do it!
Brad Yes, excellent, well let's just dive right in, I mean I guess for the uninitiated to the Micah Godbolt universe, what's your story, where do you fit in the Design System realm of things? What's your role, what are you working on as it pertains to Design Systems?
Micah Sure. I'm currently a Senior Design Developer at Microsoft which is basically a front end developer, they just don't really have that title. But it's pretty apt for what we do, we really do development but we do development specifically to get our design into our applications, so right now my major focus is on Fabric React, which is a Design System that's used within Office, Office 365 and really a lot of the applications now at Microsoft. It's a Design System that started within one drive in SharePoint but has grown and started to become adopted within a lot of the Office products and actually products across Microsoft in general, so, truly great to be able to write a rack controller that actually gets used by, I don't know the millions, I mean it's probably a large number of people.
So that's been really exciting, I've been doing that for the last nine months or so and diving head first into React and TypeScript which for me was actually a first for both of those. Prior to that, I was doing a lot of Design System work at Red Hat, building out large systems for them, writing a book on Design Systems called Front End Architecture for Design Systems on O'Reilly Press, doing podcasts, doing speaking, doing lean-in meet-up for a couple of years just getting really, really busy, so right now it's kinda nice just to sit down and focus and be able to do this project at Microsoft.
Brad That's great, so it sounds like you know nothing about Design Systems, that's great!
Micah Nothing at all! I have no experience and I shouldn't be here!
Brad Excellent! Yes! No, that's fantastic. Your book is quite wonderful so I'd definitely encourage everyone to pick that up. So, I think a big thing of, as we're diving into this, as we're dusting off this podcast is really seeing how the landscape over the last couple of years as it relates to Design Systems and stuff has really evolved. I think we all understand, OK, this makes sense, it makes sense to set aside these best practices; it makes sense to try to architect things in a way that you're not constantly re-inventing the wheel or that this product would be able to benefit from the thinking of stuff that was born of another product. And also get a sense of how that actually happens: what does that look like? What tools, what technologies we reach for in order to make that stuff happen and I know that at Microsoft you seem to be doing a lot about, a lot of work within React, Fabric React, so do you want to talk about React in general but also specific what Fabric React is and how that's helping and how you're architecting things in a way that allows you to make things at scale?
Micah Sure. Kind of going back to what you're originally talking about, how we've come a long way in the last three years, going from what even is a Design System and why would we ever need one and I think a lot of us are kind of at this Version 2 of our Design System thinking. Three years ago, when I sat down with Red Hat, we'd just launched our site and we were looking to try and kind of bolster the Design System of it and try and create something a little more re-usable.
I was starting to prototype the ideas and get a few things together and one of the managers I was working with asked me, so, how many times have you done this? How many of these have they built? And I'm sure a lot of people would have the same response of, yeah, this is the first time I've ever done this! Because websites, especially when you're working on a large scale website, you usually do one a year-ish, kind of thing; you don't really get a chance to do lots of websites over and over again so yeah, that was the first time I'd gotten to even try and build one.
So this is V2, this is my second opportunity to take what I've learned and start building things and I think just a couple of things come to mind with that respect. One of them is the… it's kind of going back to that Million Dollar Button thing, I'm trying to remember where I heard it but somebody'd written an article or a talk or something about the Million Dollar Button or the Five Million Dollar Button or whatever the case is.
Brad I think that's Jared Spool.
Anna Yeah, yeah.
Micah Oh, OK; nice. I must track that down again. But as soon as I saw that I was like, what?
And then within nine months I'm working on this project; the amount of work I have put into our button and the amount of times it's been re-factored and the amount of times it's been updated with new technologies and so on and so forth, but I think that the power is that as you keep doing more work and more work and more work, we keep coming down to this realisation that so many things in our Design System are buttons, are literally buttons.
If you look at a drop-down menu and all of the items in a drop-down menu, those are buttons; those might be buttons displayed in different ways, with different styles and functionality wrapped round it but in the end they need all that core functionality any button could need, so we're kind of getting to this point where we're almost looking at anything you click on really needs to be, go down to that button.
No one should be writing an anchor tag or a button tag or anything that's not just using the button component itself, so that whole concept of how could you spend that much time and effort on a button? It's because everything you click on is literally a button and there's no reason to use something different because eventually you're going to come to a point where, oh, I wish our other button that we made over here had the functionality that our normal button has. Why can't we add an icon on the left hand side? Why can't we have a drop-down menu on the right hand side? Why can't we do this, do this, do this like our other button does?
The main reason that we've done it is that typically, if you have a button that you want to have, say you want it three different colours; you want a red, a green and a black or something like that. You need to enumerate those in your CSS and attach a class to it or whatever you're going to use for that and so then you say, oh, a green one, and you pass the green class through; the blue one, pass the blue class through. Now you want a purple button, you have to go in the CSS, you need to add purple button and make that a class name and so on and so forth down the list, so as you need more of these colours, how do you support those without going in the CSS and doing that? Or someone has to write CSS that overwrites those styles.
And this is obviously a big problem when you've got a button that needs to be used just about anywhere: hey, I want to use a button in this instance but the styles don't match, or the padding's not correct, or whatever the case is, now I need to write some styles to overwrite it. And what Glamor allows you to do is basically make… in the end, you're still the style tag with a selector and some CSS attributes; properties and attributes, but the way that tag is created is actually at run-time for us now, so every time a button is created, we pass in all the properties of, I want the colour on hover to be green, and you can actually pass that through as a property, so when that button gets rendered, it now has the hover colour of green.
Now there's some over-ride of more specific selector, not as a… oh, now we have different variants in our CSS and we're using a green hover variant; these are values that can be mixed down into the button every time you use it and this is hugely powerful because building this new command bar; we had a command bar that used to just be this monolithic, everything in the kitchen sink, all the functionality built into it, and now I'm breaking it down into all these tiny little pieces and one of those is obviously a button because it's a bunch of buttons, there's some overflow menus and those kind of things, and now in the contract, in the API I have for this command bar, I can literally say that for every item you have on a command bar, you can pass in a set of styles, you can pass in a set of icon colours and background colours and hover colours and all these things that now get mixed down into that button, all the way down at the bottom of that stack so that you can have, oh, I need my icon to be the first one green, the second one red and the third one purple and you can do all of that without a single CSS selector, without having to worry about specificity, without worrying about adding extra bloat to a CSS, or any of that and that's really an amazing place to be: we're able to now start leveraging the flexibility and the power of these really focused and really capable components as you start building larger things with them and seeing that level of flexibility has been really amazing because we're trying to build one command bar that can be used in Microsoft Word, that can be used in Outlook, that can be used in OneDrive and SharePoint, that can be used anywhere, and we don't want to have to add all these, well, here's the OneDrive version, you could pass a class for that, and here's the SharePoint version, you can do a class for that.
We're trying to make something that's powerful enough that you can pass in whatever you need for whatever styling and so you can override the button and use a different render function for that.
It's really kinda neat that, it's kind of moving onto Design Systems as a set of styles but also Design System as a set of functionality, because when it comes down to it, Fabric still has styles and it has, this is our visual language that we use within our product, but we try and make that visual language something that doesn't get in the way if you need it to look completely different, and I think maybe that's the Style or Design System 2.0 as you start wrapping up functionality around all these components as well, making them really capable.
Micah It's kind of crazy and I completely agree and hopefully we'll get to a point where we don't need to do that.
Anna I feel a bit like, I don't know if either of you watch Father Ted? I'm guessing not!
Brad No, sorry!
Anna I feel like, so, Mrs Doyle, she loves making tea for people she works for and she's shown this machine that makes tea and she's just looking really sceptical through the whole demonstration of this machine just making tea and the person who's trying to sell it to her is saying, it's going to take all the misery out of making tea and she just goes, "Maybe I like the misery"! I think that's me, I think that's me with CSS; I love writing CSS and I don't want anything to take that away from me!
Beyond that, you're still creating CSS in the browser and the CSS has to work like CSS does, so I don't think we're taking away the pain of CSS; if you like the pain, it's still there!.
Anna I do like the pain!
Brad Because in my own work, what ends up happening is, I see these clients and they commit to these things that in order to get that sort of standard button style or card style or certain behaviours or whatever, you have to subscribe to a specific library, whether that's React or Angular or JQuery or however they wrote it…
Micah I write my Angular tools.
Brad Yeah, as organisations get bigger and bigger and there's a bunch of different products, there's a bunch of different technologies in use; suddenly you're in this position where it's like, in order to get that button style, I have to subscribe to this iceberg of tech dependencies and stuff that have no real bearing on rendering that…styling that button. So, could you speak to that? I'd love to hear how you're all thinking about, as you, it sounds like, are doing very specific work using very specific technologies, you're also talking about how this is starting to get ported to different products and stuff like that, which is awesome, so, culturally and organisationally, how are you all talking about that, planning for that?
Micah Yeah, there's a ton to impact there, you could probably do a full podcast just trying to dive into all the pieces there. A little bit of history of Microsoft is that there's been a couple of attempts to try and to this, to unify the tech stack; you know, the pieces that we're building, so we're not in these silos all over the place and there have been a few attempts with some home-brewed applications and whatnot because right now, it's a mix of some knock-out over here and some Angular over here whatnot and really we found ourselves within the last year or two of everyone is starting to want to move over to React, so for us, as far as organisationally, for us it's worked out really well because there's been so much movement towards React, where so many different organisations that have independently gone: hey, this would work really well for what we're doing and we really want to get on board and then as soon as they find out, hey, there's also this library of controls that we can use, they've wanted to do it even more.
And kind of going back to the original question of why would you do it versus why tie into this tech stack and get dependent upon the tech stack, it really comes down to, again, this kinda like Design Systems 2.0 that a Design System is starting to be way more than just how a button looks, because we kinda started in this… Fabric started as just a set of CSS and HTML that showed how a button was supposed to look, or how a drop-down was supposed to look but then when we got feedback towards, hey, what happens when you click on it? I need to see what happens when you click on a drop-down and to see the drop-down; we need to… part of the visual language is, how things open and close and whatnot, so we needed to see that.
So as soon as you start going down that path you're like, well, are we going to be writing this whole framework ourselves or should we maybe choose a framework and have that part of our Design System?
I know you don't have to go that path, if you look at Lightning Design System, they very specifically, when you go to their page and you look at components, there's no interactivity to it; if you see a set of tabs it's like, hey, that's nice, those tabs and mark-up. You click on the tabs: nothing happens. You click on the drop-down: nothing happens. Because what they are specifically trying to do is say, this is how it looks. They might have a couple of… here's five different panels of it; here's the closed state, here's the open state, here's the selecting state, so on and so forth, to demonstrate each of those. But they're not writing the interactivity for someone to go in there and play with it and that's a very intentional decision and I've even brought it up a couple of times internally of, hey, should we do this? Take our styles and our markup out and give a peer presentation of it?
And it really comes down to what's the value of it for our team? For us, there's so much work that's gone into making that button do what the button does inside of React that we really would rather just people use that React component and for us to have to maintain both of those and support a team trying to use Angular to do the same thing, it really comes down to we're a product team and our product uses React and for us to fund something that's not directly going into our product, it's not going to happen because we're a product team and that's what we do.
Brad Or… yeah, yeah, exactly. I think that your point about, we're on a specific product team doing specific work for a specific product, I think is important to underscore; I think that as a Design System team, again in my own work, working with these over-arching teams, they're teams that are the ones that are helping shepherd and govern and make these decisions about, cool; we actually have a couple of products that are using Angular, we have a couple of products that are using React, we recognise that the views coming down the pipes or whatever next, or then they're like whatever's going on next year, two years or five years from now but at the end of the day, the users don't care about any of that; they want things to look and to your point, behave the same. So that does require a lot of intention to set that up to simultaneously scale but also be able to help specific teams to specific work faster.
Brad So I think that it's an interesting… it's an interesting conundrum and I think it really ends up being more of a cultural communication thing than it is any sort of specific tech… there's no solve for that.
Micah Yeah, it comes down to the team, the team structure and really the charter. What is the business use-case for the work that you're doing? And if the business says, hey, we want a Design System that is going to meet the needs of Angular and React and KnockOut and X-Y-Z, you're like, all right, what's the staffing requirement to do that? Great, let's get the staff to do it. Now, what's it going to take to make all that work and let's make sure that each product align about this behaviour and those types of things so there's a ton of work that goes into that and the question just comes down to, is that the business charter? We're willing to put money into making this happen and for us, we're using React so that is the direction that we're going with it and if the charter changes in the future and hey, we want to support Multiple, we're like: all right, we need more staff in, because really it comes down to at this point it's a very small team, it's really just two or three of us that are really focused on it primarily and then past that it's very much a federated project where we've got all these other different products that are using Fabric that are contributing pull requests and bug fixes and lots of issues that are using the product and able to contribute back to it.
So it has been a great exercise in how do you create a Design System within a federated approach where you don't have this large core team to push it and you kinda have to be a little bit more of a cheerleader and maybe a sheep wrangler or something to try to figure out, how can we set things up so that anyone can contribute and be successful and add to the system in whatever small spare time they might have inside of their product, so yeah, it's been an incredible experience to say the least.
Anna Something I'm really keen to talk to you about is about visual regression testing. I've heard that you do it and I'm keen to find out how you go about doing it, what you've learned, what your recommendations are for whether people do it in their own projects.
Micah Sure. We're actually close to doing it!
Anna I think everyone's close to doing it!
One of the challenges is it's open source software and it's had a little bit of a rocky life and then CasperJS looks like it was dead on the vine at one point, and then it got resurrected, the ghost came back up!
Brad In a friendly way!
Micah In a friendly way, thank you! So that was great, hey, Casper is on board again and PhantomJS is at 2.0 and it's a little bit more modern, so we're doing good and then Headless Chrome came out four or five weeks, six… a couple of months ago and within a day or, I think seriously within the same day it came out, one of the head maintainers of PhantomJS said, all right, that's it: I, we, whatever, are calling it quits with Headless Chrome coming out that pretty much makes the work we're doing defunct and we really think you should go use that instead!
Brad But, the concept, I guess implementation aside, I guess…
Micah Implementation aside.
Brad Could you speak a little bit to the philosophy of what this does and what that means, if you're building a Design System and you're building components within that Design System, why should people who are building Design Systems be thinking about this as they're building a card of components or as they're building a header.
Micah I painted a really horrible picture of this!
Brad You're like, by the way, it's all dead and nothing matters!
Micah Yeah, it's all dead! Because the other approach, I think Headless Chrome is going to make a huge impact within a year or so, once people start writing for it and it gets mature enough, because once you can do that, then you've got solid, current, modern browser to do all your visual regression testing, and at least for Headless.
The other approach is also you can do it using Selenium WebDriver which is the same thing that BrowserStack uses, the same thing that Sauce Labs uses and that's a great tool because basically you're telling… you're basically remote-controlling a browser and getting screenshots in it and it's a great tool; I've used it personally a couple of times, it's just mostly a workflow question because it requires getting Java installed at your dev machine which can sometimes be a little bad, so for us it's mostly just trying to get over that technical hurdle of workflow, but it can be done.
So to back up real quick, what visual regression testing does is…in unit testing, what you do is you have a function that adds two numbers together and you want to make sure that function always adds two numbers together property, so in unit testing you say, adding two number function when I pass in two and three, it should always equal five and if for some reason that function returns seven or three or a banana, then something's wrong and my unit test fails, so that's unit testing with functions.
It's basically the same idea with visual regression testing, but instead of a function returning a numerical value or whatever that return is, the function is going and taking a screenshot, an actual png screenshot of your component and then comparing it, instead of to my result should equal four, it is, my result should equal the last picture I took, so if you have a button that’s blue with a white border and every time you take a picture of it, it should be blue with a white border. If one day you take a picture of it and it's green with a purple border, when you compare it to the old one it should go, hey, these two images are different and literally you're going through and comparing pixels, like pixel 00 in the top left, what's the value of it? OK, let's compare the two; it's literally going through and looking at all the pixels and seeing if they compare.
And it's a great tool to use because if a padding changes accidentally because you thought you did something right but you actually screwed something up, the two images are going to be different and it'll go, hey, there's a problem here. And when you have a large system with lots of variations, say you've got a button that's got five different variants and several different states and hover states and click states and split buttons with, what happens when you click and then focus and you're like… arghh, so many different variations!
Literally having to go in and every time you make a tweak to the button and go through every single state, OK, what was the focus state on this again and having to go back to red lines and check, it's basically a manual red line checker because the red lines are now all of these baseline images that you captured and you're able to just check, say there's a hundred of them, especially with buttons, you could have a hundred of these things, and to quickly go through...
Anna And the problem that you were mentioning before around browsers, if you've got a team of people and they're all running these reference checks and checking that the screenshots match up, the tool that does it, it will often find differences between the browsers that they're using.
Micah That's exactly one of the problems.
Anna Or what system they're using and so there's this whole debate around do you check in the reference screenshots into your repo? I personally don't; I ask everyone to take their own reference screenshots and compare them against a production branch.
Micah Yeah, you can…
Brad Wait: why is that controversial? Sorry?
Micah If you have a Mac or a PC, fonts render different, or different fonts are installed.
Anna Or if you're using something like an older headless browser, it might not have web fonts, it might not support it.
Brad Oh, I see.
Micah So you have different versions of browsers; the challenge there is to get a consistent test environment, which either a headless browser like PhantomJS, that's why that's so popular is that when you
npm install, it literally installs this browser for you, so that you can lock in what version of browser people are using. The other approach to this is that all of the testing happens in your build process so in Travis CI or your Jenkins instance or something like that.
Anna That's another controversial point, whether you get builds to fail…
Micah Oh, definitely fail!
Anna Well, I don't include it in build processes because it takes a long time if you've got a lot of components but also it's often I want them to fail, I want it to come up and show me what the changes are but I don't necessarily want it to fail because it might be a change I want.
Brad That sounds so negative. That sounds negative, it's like if a test fails because something's different, I guess the way I see it as someone who's… hypothetically if I were to build this into my workflow I'd want to see what's changing and to make sure that stuff is kosher, not necessarily, oh, it's different: I just did the cards padding and now all these screenshots are throwing, I guess you don't call them errors, but if you say it fails then it's like, well yeah, of course it's different; I just made a change. It's all really interesting; I think where to put that, where to build it into your workflow and stuff like that sounds like making that a bottleneck seems pretty extreme, I guess.
Micah The idea there is, if you are checking baselines into the Git repo, the reason that you have something fail is because baselines don't match what the new styles are, so say you're asked to increase the padding on the button, of course, that test is going to fail.
So yeah, if you are going to be including in baselines in the Git repo, that means that any time you add padding to a button, you also need to, in your pull request, which is actually kind of a neat thing is, hey, I've got a pull request that's adding padding to a button, you can see the CSS…
Anna Oh yeah, and including the screenshots, it's really useful.
Micah Yes, so, your pull request will actually include that screenshot as well, so you're like, that's what the new baseline looks like and when that code gets merged in, it gets the new CSS, it gets the new baseline and the next version that will run the tests, if they don't make any changes, should run and pass. And of course you have to get past some of the challenges of differences from one person's machine to the next; that's kind of the problem we've ran into now is, even PhantomJS from one browser to the next we're having, for some reason, errors and so one approach to that, the solution is that all of the testing and all of the baseline creation gets done in one place, so we're trying to get Travis to do that…
Anna Yeah, we do that with production.
Micah Yeah, and the only problem is, Travis doesn't have file storage so you literally have to, in your build step, push those files somewhere else and that's basically where we're at right now is just getting that set up for it to push the files somewhere else that we can get to them so we can pull them down, so if there is an error and a new file gets…you've got more padding on your button, you can go get that baseline and update it. This wasn't a problem when we were doing Jenkins previously because Jenkins was its own… we had an instance of it with its own file storage so we could just pull the file directly from that.
Anna Maybe we should ask you about it in a couple of years' time, see how you're getting on with it?
Brad Yeah, there we go!
Micah I'm really hoping to have this Chrome as a solution there once the UK is mature enough…
Anna I didn't know about that, it sounds good.
Brad Yeah, that's really cool.
Brad It sounds like you…
Micah There's a lot to it!
Brad Yeah, well that's awesome.
Micah But when it's set up, it's a beautiful thing!
Brad Yeah, well certainly. I think we could probably talk about this all day. I also think that there's a little thing called visual regression testing we should… it sounds like that's a good topic for a talk where you could actually see slides and examples; we're talking about this in the abstract… imagine the colour purple… but anyways, just looking at the clock here, as much as I'd love to keep geeking it out here, we gotta wrap up but seriously, thank you so much for your time, it sounds like you're just neck deep in this whole notion of Design Systems 2.0, the sort of next level Design Systems, going beyond OK, yeah, yeah, yeah, we understand consistency is important and how does that translate out, so I'm really looking forward to seeing where you and the rest of your team at Microsoft take this stuff and keep…you're pretty active in the community, so keep that up, keep sharing what you can and…
Micah Definitely will.
Brad Yeah, awesome. Well, thanks so much for being on the show and we appreciate the time. Thanks.
Micah Hey, thank you guys and if I've one last plug I can possibly give is that I will be at CSS Dev Conf this year which is going to be in New Orleans again in October, certainly check that up, but I'll be giving a talk there specifically on React and Design Systems and then we'll also be giving a workshop on Design Systems, so if you're curious about how to build a Design System out, I don't think I'm going to dive fully into React, it's going to be a lot more in kind of the core essentials, but how to take a design, break it down into smaller pieces, how to use the tools for documentation, for visual regression testing and all those types of things, check that out, CSS Dev Conf and I think there's still some spots open and that's our workshop as well.
Brad Excellent! Well yeah, so with that, check that out and we will see you next time. Thank you!
Micah Hey, thanks so much for having me on! Bye.