Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
CSS Lessons Learned the Hard Way36:06 with Zoe Gillenwater
You’ve probably heard the phrase “learn to fail or fail to learn.” The idea that making mistakes is essential to success has almost become clichéd by now. But in this talk, Zoe is prepared to embarrass herself with tales of her web design screw-ups to prove just how important and powerful it truly is to make mistakes in our work. Along the way, you’ll learn CSS tips and tricks that Zoe learned the hard way so that you don’t repeat her mistakes. Go out, try new things with CSS, and make new mistakes of your very own!
[MUSIC] 0:00 As a way of introducing myself it's kinda hard to put just one title on what I do. 0:04 So, I think it's best to just say that I make things. 0:09 Some of things which come out nicely. 0:12 I make websites of course, I currently work as a designer for booking.com. 0:14 And it's a super successful site that does a lot of things really well which I 0:18 have a tiny hand in. 0:21 I've written two books that I think came out well. 0:24 I created two human beings who are really awesome. 0:28 I like to cook, and I think I'm pretty good at making cakes. 0:32 Here's a peppermint cheesecake that I made, that tasted good and 0:35 was very pretty. 0:38 This cake is not pretty per se, but it is pretty cool. 0:40 I made it for a zombie birthday party for 0:43 my husband, and it had strawberry ice cream inside to represent brains. 0:45 But not everything I make is successful. 0:51 I also make a lot of mistakes. 0:53 For instance, I love gardening, but for some reason, most of my plants die. 0:55 Here's my latest try at a mixed herb pot. 1:00 Supposed to be my little mini herb garden right outside my kitchen window. 1:03 It did not work out as I had envisioned. 1:07 Someone else who made mistakes is the woman who painted Monkey Jesus. 1:12 This lady who was not a trained artist and certainly not an art restorer. 1:16 Was nevertheless so confident in her abilities that she 1:20 saw this 100 year old painting of Jesus deteriorating in her church. 1:23 And said, I am going to fix this. 1:28 And the picture, on the left is what she ended up with, Monkey Jesus. 1:30 And I can just imagine her starting to paint, and she doesn't stop herself and 1:35 say, crap, I am ruining this painting. 1:38 She was like, yes, I can do this. 1:41 So maybe some of you have the confidence or 1:44 self assurance of the Monkey Jesus painter. 1:46 And I congratulate you. 1:48 But I imagine that most of us have to deal with self doubt and 1:50 the fear of making mistakes. 1:53 The trouble is that that fear of making mistakes often keeps us from learning and 1:55 trying new things in web design or web development. 1:59 Just last year I used Sass for the first time. 2:03 I had never used a CSS pre-processor before. 2:06 And I felt really guilty about this. 2:09 Or maybe embarrassed is the better word. 2:11 Because it seemed like everybody who was doing CSS had already jumped on the, 2:13 Sass bandwagon. 2:17 But I was overwhelmed, and I didn't know where to start. 2:19 I tend to think that I have to learn everything from A to Z before I 2:21 can start using it. 2:25 I wanted to set up all my Sass files and rules perfectly on the first try. 2:26 I didn't wanna use it incorrectly or incompletely. 2:30 But when did I ever have time to learn every aspect of Sass so 2:33 I could finally switch over to it? 2:37 What I didn't realize is that changing a single line of CSS is really all that is 2:40 needed to get started. 2:44 Your Sass is not wrong if you don't include every single feature that's 2:45 available to you. 2:48 If you're never used Sass let me show you how simple it can be. 2:50 Install Prepros which is free software for Windows and Mac. 2:54 It turns your Sass into CSS. 2:57 Drag your website's folder in Prepros so it will monitor your files in it. 3:00 In this folder create a folder names styles.scss. 3:05 And then write in this stuff which sets up a few color variables and save the file. 3:09 That's it. 3:13 You have written Sass, your CSS is powered by Sass. 3:14 Now is this perfect sass the epitome of sassness? 3:18 No. 3:23 But trying it out even imperfectly instead of waiting to 3:24 learn every little bit of it to perfection. 3:27 Made me feel confident that I could do more and so 3:30 I did do more and I'm not done. 3:32 It really was not scary. 3:34 One of the reasons that I think we fear making mistakes is that we tend not to 3:36 see other people's mistakes. 3:40 Only their finished product, all fixed up and polished. 3:41 We may think that we're the only ones struggling to learn or do something. 3:45 We don't see that the, the struggle that others went through. 3:49 I'm sure all of you have people in Web design or development. 3:52 That you look up to. 3:55 Who, you know, just make you sick with the awesome work that they produce. 3:56 And, our web design and 4:00 development idols may seem like different types of people than us. 4:01 Special people. 4:05 Well, we're just normal people. 4:05 But, even our web idols struggle and screw up. 4:07 And, that's a good thing, because making mistakes is essential to being successful. 4:10 Professor Edward D Hess has studied innovation for 4:15 years and found that innovation requires a mindset that rejects the fear of failure. 4:18 And replaces that fear of failure with the joy of exploration and 4:22 experimental learning. 4:26 Failure is not the end goal, so 4:28 when you read about how you ought to be failing in your work. 4:30 If you want to be innovative, it's not that you should be trying to fail. 4:33 It's just that failure is a necessary, unavoidable byproduct of 4:36 all the experiments that lead to innovation and success. 4:40 According to another professor, 4:44 Dean Keith Simonton, people that we think of as creative geniuses. 4:45 Like Van Gogh or Mozart or Darwin. 4:49 When fail all the time. 4:51 They just don't let that stop them. 4:53 His researchers found that creative people are not special people. 4:55 They simply do more experiments than other people. 4:59 And in doing so 5:01 they come up with a lot more successes and a lot more failures too. 5:01 So let me give you some personal CSS related examples of the necessity of 5:06 making mistakes. 5:10 First last year I was working on a new presentation on flexbox for a conference. 5:12 I had spoken some about flexbox before and had created demos for it, but 5:17 I wanted to make a brand new demo for this presentation. 5:22 So I created a site devoted to smores because I love them. 5:26 It's an American dessert if you're not familiar. 5:29 And I'm kinda obsessed with coming up with crazy s'mores concoctions. 5:32 So I made this builder form to help facilitate the creation of 5:36 such concoctions with the four components of s'mores. 5:39 With the component class in these four tan boxes and 5:42 an action bar with the field to name your s'mores bar combination. 5:46 Without flexbox I would wrap the four components in a div or 5:49 section together separate from the action box. 5:54 And, but this extra structure in the markup limits where it 5:57 can lay them out in relation to that action box. 6:00 With flexbox I can leave all five boxes as siblings. 6:04 And then use the flex-wrap property on the container to wrap the fifth onto it's own 6:09 line, the action box. 6:13 The flex-wrap just says the items are allowed to wrap. 6:15 This doesn't force any of them to do that. 6:18 So to force a wrap to occur before the fifth box I used the flex property to 6:20 control it's width. 6:24 Let me first explain how flex works in 6:27 case you're not that familiar with flex box. 6:28 It's set on flex items, not their container. 6:31 And it can affect either the flex item's widths or 6:33 heights depending on whether they're laid out horizontally or vertically. 6:36 And there are three components to the flex value, 6:40 it's a short term property, flex-grow, flex-shrink, and flex-basis. 6:42 Flex-grow means how much the flex item will grow relative to the other items, 6:46 if there's extra space available on its line. 6:52 Or you can think of it as the proportion or number of extra shares and 6:55 space that it gets. 6:58 Flex-shrink means how much the item will shrink relative to 6:59 others if there's not enough space,. 7:03 Or the proportion of the overflowing pixels that will have to get chopped off 7:05 of itself, to get everything to fit again. 7:08 And flex-basis is the initial starting dimension, 7:11 before free space is added on or taken away from the item. 7:13 And you can set it to any standard with their height value. 7:17 When you're reading about flex-lax, 7:20 you often see single digit flex values in the examples, which is fine to use. 7:21 That digit becomes the flex-grow value. 7:25 So knowing all that about how the flex property worked my thought process for 7:30 sizing the five boxes in the builder form went like this. 7:34 I want all four components to be the same width. 7:37 So I'll set flex to one for 7:40 each so they each get one share of the space on the first line. 7:42 And then to force the action section to a new line, 7:46 all I have to do is give it flex spaces of 100%. 7:48 Because if it's 100% wide, it won't fit with anything else and 7:51 will always wrap to a second line. 7:54 Perfect. 7:56 And this is what I ended up with. 7:58 Everything was squished and overlapping on the right side. 8:00 And I was [LAUGH] totally baffled. 8:03 Like I had, like I said I had created Flexbox demos before. 8:06 And I had gotten this same CSS of wrapping a 100% wide flex item to work before. 8:09 So to figure out what was the problem in my new demo I took my previous good demo. 8:15 And began gradually removing pieces of the CSS until I 8:20 found what triggered the wrap that I wanted. 8:23 It was side margins on the boxes. 8:25 So, I applied this to my new demo. 8:28 And, I found that if I put just one pixel of margin on one of 8:30 the component boxes the action box would wrap as I wanted it to. 8:33 But, I still had no idea why this was happening. 8:37 I wrote this comment next to the one pixel margin in the CSS. 8:41 And you can tell by the three question marks that I was really frustrated. 8:45 Because I am a firm believer in one question mark, 8:48 one exclamation point except in extraordinary circumstances. 8:50 So I wrote this and then I just left the page for a while and 8:54 worked on something else. 8:57 But I finally forced myself to go back to the spec. 8:59 And re-read the information on the flex property. 9:01 And the flex-box layout algorithm a few times. 9:04 Which was you know, a super fun activity for a Saturday night. 9:07 And I started playing around with random flex values to 9:10 see how they might change things. 9:13 And I finally had a Eureka moment. 9:14 What was happening was that by setting flex to one, 9:16 I was inadvertently setting flex-basis to 0. 9:21 Because when you leave off flex-basis in the flex shorthand it gets set to 9:24 0 pixels. 9:28 Since flex-basis is the starting with for each box it's basically min width. 9:29 At least it is when flex-wrap is on because the browser never has to 9:34 wrap anything or never has to shrink items smaller. 9:38 Than that starting width make things fit because instead it can just wrap 9:41 if things aren't fitting. 9:45 So the flex-basis value of 0 pixels meant 0 pixels was my min-width. 9:46 And it allowed all four components to shrink down to 0 pixels wide if needed. 9:51 The browser shrunk them to 0 pixels only because it 9:56 had a 100% wide box that it was trying to fit to. 9:59 And my flex-value of one told the browser that this was okay to do if it needed to. 10:02 This is an early skeleton of the page before I had, 10:08 had added any padding, margin or orders onto the boxes. 10:10 So that, so they each took up 0 pixels of space. 10:16 And if they take up literally no space then it's perfectly fine for 10:20 the action bar to sit on the same line with them. 10:23 And that's exactly what happened. 10:25 [BLANK_AUDIO] 10:27 That's why adding a side margin fixed everything. 10:29 It made the component boxes take up more space than 0 pixels, so 10:32 the 100% wide action box would not fit with them and would have to wrap. 10:36 But the margin was just a stop gap measure. 10:41 To really fix it, I changed the component's flex-basis to 200 pixels. 10:43 That meant that the components would start out at that width. 10:47 So when the browser would go to add the 100% wide action section. 10:50 It would never have room for it on the line with any of the component boxes, and 10:53 would always wrap to a new line. 10:57 So I fixed it. 10:59 I made a mistake. 11:00 I fixed it. 11:01 And I finally created the layout that I was after successfully. 11:02 This was not just a case of succeeding despite a mistake. 11:06 This was a case of succeeding because of a mistake. 11:09 Before I made this mistake with setting flex to one I had 11:13 never really given flex-basis a lot of thought. 11:15 I thought it was pretty simple and I understood it well enough and 11:17 most of the time could just ignore it and go on using single digit flex values. 11:21 But after making this mistake and then solving it. 11:26 I felt like I finally truly understood the flex-basis and 11:28 what's more that that was the key to understanding the flex property. 11:33 And understanding the flex property is in my opinion the whole foundation for 11:37 understanding flexbox. 11:40 If I had not made this mistake because, let's say, I had started out 11:43 with margins on those boxes and had never seen the squished version. 11:46 I never would've unlocked this understanding of the flex property. 11:51 Now that doesn't mean that I was now an expert in flexbox. 11:57 And never made a mistake in it ever again and lived happily ever over it, 12:00 [LAUGH], ever after in some land where. 12:03 You know, IE 9 and earlier don't exist. 12:05 No, unfortunately it was not long before I made another mistake. 12:08 That hinged on flex-basis being secretly set to 0 pixels. 12:12 If you've read at all about flex-box, 12:17 you've probably seen how you can use the flex property to make boxes be 12:19 proportional to one another in size. 12:22 Because this is a really cool feature that all the tutorials make sure to point out. 12:24 For instance, if I said two boxes to flex one, and 12:28 one box to flex two the flex two box will be twice as wide as the others. 12:32 The browser first allocates pixels to padding margin borders. 12:36 And then it sees how many are left for the flex borders. 12:40 And it give two pixels to the flex two box like it's dealing out cards for 12:43 every one pixel that it gives to each of the flex one boxes. 12:47 You can think of it like grid units in a CSS framework. 12:50 So the box on the very left. 12:54 Wait, right sorry. 12:57 Right is two griddy units wide as if I had set a class of call two or 12:58 something on it. 13:03 Except that these grid units are total flexible and determined by the browser. 13:04 In my s'mores demo, 13:10 I wanted to demonstrate this proportional widths feature of flexbox. 13:11 So I tried setting one of the gallery item boxes to flex: 2 0 200 pixels. 13:15 Expecting it to be twice as wide as the other gallery item boxes on the line, 13:21 something like this. 13:25 But this is what I ended up with. 13:27 The first box is only slightly larger then the others. 13:28 And again, I was totally confused, but only for a little while this time, 13:31 because of my earlier mistake that I had thankfully learned from. 13:35 What I quickly figured out was that proportional size only works as you 13:39 expect, if flex basis is 0. 13:42 As it is when your only using single digit flex values. 13:45 This is because if all the boxes start out at 0 pixels, 13:48 then all the pixels on the line are extra. 13:51 So the flex two item, gets twice as many of those pixels added onto 0 and 13:53 is thus twice as wide as the others. 13:58 If flex-basis isn't 0, 14:01 the flex two item won't necessarily be twice as wide as the other items. 14:03 The browser will still give it two pixels for every one pixel that it 14:08 gives to the others, but it will be adding these pixels on to starting widths. 14:11 For instance, if flex-basis is ten pixels, for 14:15 each of these boxes across a 50 pixel long line. 14:18 The flex two box will end up being 20 pixels. 14:21 While the flex one boxes will each end up being 15 pixels wide. 14:24 And 20 pixels is not twice as wide as 15 pixels because math. 14:28 So my flex-basis was 200 pixels. 14:34 So every gallery item started out at 200 pixels wide. 14:36 The browser put as many as it could on a line then wrapped. 14:39 Then the browser would go back, 14:43 see how much room how much space was left on each line. 14:44 And it would dole out the extra pixels to the boxes in a ration of two to one. 14:48 So ignoring margins for the sake of example. 14:53 Let's say that this line is 700 pixels wide. 14:55 That means that three, 200 pixel wide boxes can fit across it. 14:58 So that totals up to 600 pixels, 15:02 leaving 100 pixels of extra to divide between the three. 15:05 So the first gets 50 pixels, twice as much as the other, the second gets 25, 15:09 the third gets 25. 15:13 So the flex 2 box would be 250 pixels wide and 15:15 the other two would be 225 pixels wide. 15:18 Only a little bit smaller. 15:21 So that's how flex-basis tripped me up again. 15:25 But this second mistake only cemented what I learned about flex-basis and 15:30 the flexbox layout algorithm from my first mistake. 15:34 These mistakes were essential to my successful completion of 15:37 a full page flexbox layout. 15:40 Regardless of whether you already know flexbox inside and out. 15:44 I want you to take away from these mistakes this higher level lesson. 15:47 Don't use CSS shorthand without understanding all the pieces of it. 15:51 Even pieces that you don't see are there in the background doing something. 15:54 So learn what that something is, so 15:58 that you can harness it instead of letting it screw you up. 16:00 More recently, I got the opportunity to make another mistake along the same 16:05 lines of one they used in CSS that I did not understand. 16:09 A couple of months ago I needed to change the style of a light box or 16:14 moodle sort of thing on, on bookee.com. 16:17 And I wanted to see if anyone was doing something new and 16:20 interesting with shadows on Moodles. 16:22 So I did some poking around on Google and other sites for inspiration. 16:24 And I found this slide show with a nice skewed shadow beneath the box and 16:28 I wanted to imitate this. 16:32 So, of course, the first that I did was look at their CSS. 16:33 And I found that their shadow is built out of three separate images in 16:36 three separate divs side by side, which is totally lame. 16:40 I couldn't do that. 16:43 So, my idea instead was to create a shadow with generated content. 16:44 And then skew it with the CSS perspective function. 16:48 Now I all ready knew how to do the generated content part. 16:51 From Nicholas Gallagher's tutorial on generated 16:54 content shadows a couple of years. 16:57 But although I knew there was a thing as perspective in CSS I had never had 17:00 an occasion to use it yet. 17:04 So I turned to Google to look up the basic syntax. 17:06 Third result was from CSS Tricks. 17:09 Perfect, there's great info there, clearly explained so I went straight for 17:11 that article. 17:15 I quickly read the CSS Tricks article and 17:17 looked at the associated demo on Codepen that's shown here. 17:19 And I honed in to where it said the word prospective. 17:24 That's what I need so I copy this prospective line out of the demo. 17:26 And I applied it to my shadow CSS as shown here. 17:30 Which did absolutely nothing. 17:39 So I couldn't get it to work at all. 17:42 The shadow stayed unskewed it was just straight and rectangular. 17:43 I tried some other things. 17:46 I finally just gave up and just styled it a different way. 17:48 Because nobody was telling me I had to make this skewed shadow. 17:50 And there were other fa, other visual effects that I could apply more quickly. 17:53 And easily that would meet the UX goals of the project that I was working on. 17:58 So that's basically how we work at booking.com. 18:02 We try stuff quickly, we test everything with our users, and 18:04 if it doesn't work, we try something else. 18:08 So everyone there makes mistakes all the time. 18:10 And there's no shame in it. 18:12 We just take time to learn from the mistakes. 18:14 So that we can apply what we learn to the next try. 18:17 Or the next thing that we work on. 18:21 But this one was kinda bugging me. 18:24 So I went back later to try to figure out why it hadn't worked. 18:25 And I started with the same article and 18:29 demo, and this time I noticed Rotate X sitting right there by Perspective. 18:31 And I had actually seen it before, but I had ignored it the first time around, 18:37 because I didn't want to turn anything, right? 18:41 I just wanted to make it all perspectivey, like the Star Wars scroll, like that, 18:43 I don't want to turn it. 18:46 So, I originally thought that I didn't need that part. 18:48 Though, thought is perhaps too strong a word. 18:51 I didn't really think it through, I just kinda looked for 18:54 the word perspective, grabbed it and got out of there. 18:56 I hadn't realized before that I needed to combine perspective with 19:00 another transform, to see the perspective. 19:03 Now that I was actually, you know, paying more attention, you know, 19:06 like actually thinking I I finally made that connection. 19:08 Now, I haven't worked with 3D transforms before so although I 19:15 had heard of rotate x, y and z I didn't really understand how they worked. 19:18 And the whole point of going back to this was to learn from my mistakes. 19:22 So, I wanted to know. 19:26 Why rotateX did what it did. 19:27 Not just copy and 19:29 paste some code that would magically make the shadow look how I wanted. 19:30 I already know about the three axes, horizontals, left and right, vertical. 19:35 Or, or X is horizontal, left and right. 19:39 Y is vertical, up and down. 19:41 And Z is like away towards you. 19:43 And you can use your hand as a helpful diagrams as shown in this photo. 19:44 If your hand is strangely deformed maybe this diagram will suit you better. 19:49 So like the x axis is like your thumb and the y axis is your pointer finger. 19:53 And the z axis is someone's severed finger that just sits on 19:58 top of your hand, basically. 20:00 I also thought it was kind of ironic that this, you know, 20:02 diagram is supposed to help you understand perspective. 20:05 And it has such awful perspective in its drawing itself. 20:07 But anyway so I knew which way each axis was oriented. 20:11 I just needed to know what rotate x did. 20:15 Does that mean rotate sideways? 20:17 No. 20:20 Each rotate function means that your box rotates around that axis, 20:21 not in the direction of the axis. 20:24 So in this Smashing Magazine article linked here I thought Peter Gaston 20:26 explained it really well. 20:30 Your HTML element is like a flat card. 20:31 And each axis is like a string running through that card in, in three directions. 20:34 And each rotate function makes the card pivot around the specified string. 20:39 So, if the x-axis runs horizontally, 20:43 a card rotating around it would appear to tilt backward and forward. 20:45 And a car tilted backwards is wider on the bottom, 20:50 narrower on the top as I wanted my shadow to be. 20:53 I'm a visual person. 20:57 So to make sure I really understood this I quickly doodled this 20:58 diagram of how each rotate function pivots around it's axis. 21:01 And this cemented it for me. 21:05 It was clear now what I needed was rotate x and y. 21:06 So I applied my new knowledge to my shadow, 21:11 adding in rotateX to the existing perspective bit. 21:13 And it worked perfectly now. 21:18 Again, making the mistake was beneficial. 21:20 It helped me learn it better. 21:22 If I had from the beginning, correctly copied the rotate and 21:24 perspective lines from the code pen demo. 21:27 Instead of making the mistake of only copying the perspective part 21:29 in leaving out rotate. 21:34 It would have worked fine so 21:35 I would have had no reason to learn why it was really working. 21:36 That means that I wouldn't be able to reuse and 21:40 build on the code in other situations. 21:43 The mistake pushed me to gain a true understanding of something new. 21:45 And since I understand it now I can use it on other things and in other ways. 21:48 Beyond just learning about 3D transforms, I learned that sometimes pen and 21:54 paper can make a new concept real to you. 21:57 We tend to think of sketching as a tool for creating UX and 22:00 design mock ups, or for teaching others. 22:03 But it's also great to help yourself learn technical or abstract stuff. 22:06 That little drawing was in no way meant to be a complete diagram of 22:10 how 3D rotate works, or understandable to anyone else, really. 22:13 It was just a quick doodle that I created for my own benefit to get you know, 22:17 to get that idea of rotate out of my head on to paper. 22:23 So I could look at it and validate that what was in my head was correct. 22:26 Both of these mistakes that I've shared with you so 22:32 far have been solitary affairs. 22:34 I was the only one effected by the mistakes since neither of them were in 22:36 live work and I solved the problems on my own. 22:39 But we all make mistakes in live websites too and 22:43 sometimes need help from others to figure them out and get them fixed. 22:45 One situation like this that I experienced had to do with both CSS and accessibility. 22:49 At my previous employer I kept running into situations where we needed to 22:55 add hidden content for the benefit of screen reader users. 22:58 The most common example of this is probably a skip nav link. 23:02 Which is often hidden until focused on, as on the BBC site. 23:06 But it needs to be read, even when it's hidden. 23:10 But there are lots of other times when hidden text can come in handy for 23:12 screen reader users. 23:15 For instance, if you're using a background background image icons or 23:17 icon fonts to stand in for real text. 23:20 Since you don't have an HTML image element, you can't use the Alt attribute. 23:23 But you still need to provide, you still need some way to provide, 23:28 text equivalent of meaningful functional images. 23:32 Or what about when, 23:36 multiple form fields use the same piece of on screen text to visually label them. 23:38 Screen readers need each field to have its own separate label element. 23:43 Which isn't always possible in complex form, 23:47 so hidden labels can be a good solution. 23:49 Which is what Doodle uses for 23:52 their form to label these checkboxes since the form is laid out in a table. 23:53 And has multiple pieces of text around that table that are, you know, 23:57 visually for us labeling each check box. 24:01 On the flip side, there are times when it is good to hide content not just visually, 24:04 but also make sure that it is not spoken by screen readers. 24:08 A quite common use case for this would be some sorta menu, a drop down or 24:12 tree menu with dozens of options. 24:15 The screen reader users should only hear the currently open or 24:18 active, section of the menu. 24:21 Not all the hidden stuff. 24:23 When it's visible, it should be spoken. 24:25 And when it's hidden, it should be, ignored by screen readers, too. 24:26 Another example of when you might need to hide text form screen readers is if you 24:31 had a honeypot field on a form to prevent spam. 24:34 You don't want screen readers to read that field. 24:38 So again, I kept running across situations like this where we needed to 24:42 add some hidden text for screen reader users. 24:46 So I decided to make three standardized CSS classes that we 24:48 could add to content to do one of three things. 24:51 One, hide the content visually and aurally. 24:54 Two, hide just the text of an element, not the whole element, but 24:57 keep it's text spoken. 25:01 Or three, hide the whole element visually, but 25:03 keep it's text announced by screen readers. 25:05 The first one was easy. 25:09 Display none or visibility hidden, or both will hide text in 25:10 a way that also makes screen readers ignore it and not speak it. 25:14 The second one was not too bad either. 25:18 Giving text indent a huge negative value, places the text off-screen, but 25:20 it keeps it read by screen readers. 25:24 And the box for the element isn't moved at all, just it's text. 25:26 And this is useful for things like links or buttons. 25:30 Where you might have a background color and use a sprite as a background image. 25:32 So you still want to see the button but 25:36 you just want to have some hidden text inside the button tags too. 25:38 So that there will be some content there to be spoken and 25:42 explain the meaning of this right image. 25:45 The third class to, hide an element but 25:49 keep it's text spoken took more work, because there are so many ways to hide. 25:52 Elements. 25:56 But I wanted to find the most bulletproof method that worked in today's browsers and 25:57 screen readers. 26:01 Without all the unnecessary kreft that had been added years ago to help, 26:02 you know, i5 on the Mac or something ridiculously old. 26:07 So I read this article on the Yahoo!, 26:10 Accessibility Blog that described this new method for hiding content. 26:12 That was touted as solving a lot of the problems with some of the older 26:15 hiding methods. 26:18 It basically uses clip to make the box disappear along with killing any padding, 26:20 border or overflow that it might have. 26:25 So I copied the CSS, I used it on a variety elements. 26:28 I tested it with a variety of browsers and screen readers and 26:31 I found that it did indeed hide the text well but keep it spoken, which is great. 26:34 So I've got the class added to some of our kind of global style sheets. 26:42 Along with the other two classes that I showed you and 26:48 developers started using it. 26:50 Which was no small feat where I worked, change was really slow there. 26:52 So I was pretty proud of myself. 26:56 But at some point after this while testing a page, I discovered that in Firefox NVDA, 26:59 which is a popular free Windows Screen Reader. 27:04 Would not read a form label if it had this last class applied. 27:07 And I already explained to you why you might want to use hidden labels. 27:12 So this was a pretty common use case for us. 27:15 And a pretty bad bug for those users. 27:18 So start of the classic debugging technique of delete half the code and 27:21 see if the bug goes away, and I narrowed it down to overflow hidden. 27:24 Removing this part caused the labels to be read out correctly in Firefox by NVDA. 27:29 The strange thing was the content was still hidden without overflow hidden. 27:35 So it seemed like it was therefore safe to remove but 27:40 I figured it must've been put there for a reason. 27:42 So I wanted to go back and 27:45 reread the Yahoo article to try to figure out the purpose of that bit. 27:46 And make sure I wouldn't be screwing up something else by removing it. 27:50 But I got a 404, the article had been taken down. 27:53 So luckily I remembered who wrote it. 27:57 So I got on Twitter and asked the author where it went. 27:58 And he and I through the power of tweeting got Yahoo to republish it. 28:02 Yeah. 28:05 But when I was putting this presentation together, 28:08 I found that it has since moved URLs again. 28:11 Still with no redirection. 28:14 So oh, Yahoo. 28:15 Okay. So anyway for 28:18 the time being I had the article there at my fingertips. 28:20 So, I re-read it but 28:23 it was still not totally clear to me why overflow hidden was part of that class. 28:24 So, I tweeted some more to the author which got my closer. 28:29 But I was still not completely certain so I made a demo so 28:31 I could actually see it and I got it. 28:34 Some browsers don't seem to follow the speck. 28:38 For clip correctly and allow descendent content that has of the clipped element to 28:40 still act like it takes up space on the page. 28:45 So that means that even though you don't see any of that content because it's 28:48 been clipped completely away. 28:52 The browser still acts like padding from the descendent is there and 28:53 it generates this unnecessary vertical scroll bar. 28:57 So here you see there's no visible content underneath the heading. 29:01 So the page should only be as tall as the heading, and 29:05 thus should not need any vertical scroll bar. 29:07 But because a child of the hidden element has a bunch of padding, 29:09 the browser create one, creates one anyway. 29:13 So overflow hidden, on the parent, basically hides this child padding from 29:16 the browser so it won't generate scrollbars where they're not needed. 29:20 And it's an edge case since it's unlikely that 29:24 you'll have padding on the child of a hidden element. 29:27 And even if you do there will likely be lots of other visible elements 29:30 down the page that will necessitate a vertical scroll bar anyway. 29:34 You're not gonna have a page like this with just one heading and 29:38 then a hidden element and nothing else. 29:42 So now that I understood what overflow:hidden did. 29:46 I could decide whether it was safe to remove it. 29:48 And it was. 29:51 With the ways that we were using the hiding class it was very unlikely we 29:52 would come across a scroll bar issue. 29:55 So it didn't make sense to have overflow:hidden there by default. 29:57 So to fix the screen reader problem on my employer's site. 30:01 I removed overflow:hidden from new instances. 30:04 Just instances of the class added to style sheets going forward. 30:06 And then updated the documentation to advise adding it on an as-needed basis. 30:12 So we didn't need overflow hidden there by default. 30:17 But I wanted to make sure everyone knew that it was a fix for 30:20 a mystery scroll bar situation should that arise. 30:24 On the bright side, this bug seems to have finally been fixed in Firefox or 30:26 NVDA, whichever one was responsible. 30:32 When I tested it again, while making this presentation. 30:35 But regardless, hopefully you learned about how to hide text excessively, and 30:38 a few cases where it makes sense to do so. 30:41 I learned that I shouldn't code I find online, without knowing what it does. 30:45 Understand what the code does so that you can adapt it 30:50 to your needs because a one size fits all solution isn't always best. 30:52 There's often extra stuff thrown in to cover all the bases but 30:56 your use cases may not require every little bit. 31:00 Also don't be afraid to reach and out and get help from others. 31:03 Even those you don't know like the author of an article or script or 31:06 framework you're struggling with. 31:10 I'm sometimes afraid to ask questions publicly online, 31:13 worried that I will look dumb, or way behind the times or something. 31:16 But people in our industry are usually really friendly and 31:20 willing to help total strangers online. 31:22 So don't let the fear of failure stop you from learning or 31:26 trying something new or hard. 31:28 Be willing to fail and not only that share your failures with the rest of us. 31:31 That is asking a lot, I know. 31:35 We make ourselves really vulnerable when we open up to admit our 31:37 mistakes and failures. 31:40 A really popular TED talk and 31:42 one of my own favorites is by Brene Brown on the power of vulnerability. 31:44 This sounds like an oxymoron, but as she says, vulnerability is not weakness. 31:48 Rene Brown is a research professor in social work. 31:54 And she has found that those people who are willing to make themselves vulnerable, 31:57 who still find it uncomfortable. 32:01 But accept it as necessary, and embrace it, are the ones with the most courage, 32:03 not fear or weakness, and this courage is essential to creativity. 32:09 She says vulnerability is the birthplace of innovation, creativity, and change. 32:13 To create is to make something that has never existed before. 32:18 There's nothing more vulnerable than that. 32:21 So I know we make ourselves vulnerable when we try new things in 32:23 our work that may lead to failure. 32:26 And when we open up about our mistakes. 32:27 But we need that vulnerability to be innovative and grow. 32:29 [BLANK_AUDIO] 32:33 Sorry. 32:35 Our industry is full of people who are so smart and so creative and 32:36 do such amazing work. 32:40 But all of us make mistakes, take shortcuts from time to time, and 32:41 put imperfect work out there. 32:45 The comments in people's code can sometimes be pretty telling. 32:47 I already showed you this comment from my CSS when I was struggling with flexbox. 32:50 I found these comments posted online and enjoyed them. 32:55 [BLANK_AUDIO] 32:58 So both of these comments are two-parters. 33:07 The second half was written at a later date than the first when some 33:10 confused soul went back in to edit code. 33:13 [BLANK_AUDIO] 33:15 >> [LAUGH]. 33:18 >> And when I read these I laugh. 33:22 Not just because they're clever. 33:23 But because I feel so much happiness at knowing that I am not the only one who 33:24 writes crap CSS occasionally. 33:27 Or writes perfectly good CSS, but doesn't understand why it works. 33:30 My point here may seem like, yay, mediocrity. 33:35 But what I'm really trying to get at is Yay! 33:39 Being human! 33:41 Now it seem that human nature is not only to make mistakes. 33:44 But to try to hide those mistakes. 33:46 At least in our western culture which is all I can really speak to. 33:48 But, I've found that most of the time when you share your shortcoming and 33:52 challenges with others as scary as it can be. 33:55 That they respond really positively. 33:57 On the practical side, sharing mistakes is essential for helping yourself and 33:59 others to learn why an error happened. 34:04 And, what you can do to prevent it from happening again. 34:06 I've had to work at getting better at this over the past several months 34:09 working at booking.com. 34:12 We AB test everything on the site which is really cool when you 34:14 have actual proof that your design helped people accomplish their task. 34:17 And rather painful when you have actual proof that people did not like that 34:22 beautiful new feature that you thought was awesome. 34:25 But we don't see unsuccessful experiments as failures to be punished. 34:28 By creating these even unsuccessful experiments we learn a lot 34:32 about user behavior and that gives us ideas for what to try again. 34:35 So when things go wrong try to shift your mindset from who can I 34:42 blame to who can I teach. 34:45 It's important not only that we learn from our own failures. 34:47 But that others learn from them as well and 34:49 that only happens when we share those failures of course. 34:51 We're always going to be stuck comparing our flawed private first drafts to 34:54 everyone else's public finished masterpieces. 34:58 If those people don't reveal how many crappy drafts they 35:01 went through before that masterpiece was finished. 35:04 And despite the mistakes that we make, please remember that it is awesome that 35:07 you can write a shred of CSS to begin with. 35:10 I made up this stat. 35:13 It's 99 if it's hard to read there. 35:14 But I feel pretty confident about it. 35:16 99% of the population of the world doesn't know how to write CSS. 35:18 So if you do, even mistake-ridden CSS, you are exceptional, not a failure. 35:21 Not everyone is insecure about their status as a quality web design or 35:28 web developer, of course. 35:31 Some of you are at peace with your weaknesses, willing to admit them. 35:33 And confident in your ability to grow or confident about continuing to be awesome. 35:36 I hope that your confidence translates into courage, 35:42 the courage to make yourselves vulnerable by sharing your weaknesses with others. 35:45 So we can all learn from them, yourself included. 35:49 I have shared a few of my CSS mistakes with you. 35:52 I hope this means that you won't repeat them. 35:54 But instead will go out, try something new and 35:56 make fantastic mistakes of your very own. 35:59 Thank you. 36:01 >> [APPLAUSE] 36:03
You need to sign up for Treehouse in order to download course files.Sign up