Online Marketing

Practical lessons from a year of building web components – Google I/O 2016

Thank you for coming to this 9:00 a.M. Session for the jet lag and insomniacs, and those of you often left from the party last night. So let’s talk about web components. We had a whole bunch of titles. For this talk, it doesn’t actually match. What’s in a program, my favorite was the me Annika school for kids, who went to web component good and do other things good too.

It was rejected and addy osmani suggested Miao Miao pro-tips Miao Miao, which is pretty much what’s going to happen here. So Miao Miao hi everyone, I’m Monica, I’m not Waldorf on Twitter and github in Internet places and officially at Google, I’m an Imagineer and that’s because I get very excited about emoji and I sort of like shout about it into the void that is Twitter, but what They actually pay me, for it is OH emoji, so fun thing about the slide.

I had to use Android emoji and not the Apple ones. It was mandated by legal and what I do is web components and for the four people in the audience. I think, as we did a raise of hands, we don’t know what that is. What components are a standard we’ve been working on so that you can write reusable widgets for the web, so you can make your own fancy parts and give it to people and everybody can use it.

I work on polymer, which is a library that helps you write. These web components, and in particular I write web components with polymer. We have elements like these ones that are like material design. For me elements we also have lemons. I don’t look like anything. We have a declarative, Ajax element that you can put in your page and get super easy, xhr requests and that’s kind of fun. So you might not think of yourself as an element developer.

You might think like you’re, a web developer, you make apps, but if you want to start playing with web components, I think thinking like an element. Developer is really important, so you might only make to make elements for your for your own application, but you’re kind of making them for future. You because future you is going to have to use these elements and if they’re crappy, future use going to have a hard time.

So I’m going to tell you basically all the mistakes I’ve made in the last year of making web components so that maybe you won’t have to do the same ones. So there’s like four things that I thought are kind of interesting about making web components you got to make an API that doesn’t enrage your users, and this is actually kind of interesting. You’ve got to maintain this element once you start giving it out people you got to make sure that’s fast and isn’t like slow like molasses and destroys everybody’s application, and you want to make sure that it’s accessible.

So these are the four things we’re going to talk about. So let me tell you a story in the 90s, we had HTML one and it was lovely and was basically like reading the paper on the internet. Things that you might see on a page were things like links and headers and images. If you were lucky and that’s all it happened, you opened a web page and you read it and I was pretty much it and in 1995 things got exciting.

We got HTML 2 and they Channel. We got three awesome elements, we got input, we got form and we got but and we got select and I think we found button well, input type equals buttons there. So now this meant that like websites could offer you interaction. You can type something in a text box and the website would react to you in some way and the reason why I think this is important is that these are basically like ogee web components.

There are little reusable widgets that the platform gives you and you can put in your application. That’s exactly what a web component is, and since 95, in the 21 years that we’ve had this we’ve come up with a couple of more web web components or like whatever you want to call them. We have article and audio, which are kind of awesome. Canvas is like an enormous framework in and of itself dialog in details, and things like that.

I’r really implemented in all the browsers and a lot of the input types aren’t implemented in all the browsers. So the reason why I’m telling you is that, even though we kind of had web components for something like 21 years, we’re not very good at making web components and I’m going to spend the next like 10 minutes telling you how input is really terrible. Because that’s one of my favorite things to do in life on the other side of the world, we have UNIX and here’s where, like begins to be a little bit of a flame war.

So we’ve had your NIC since the 1970s, and one of the things that UNIX is really good at is making reusable little programs that everybody knows how to use. These are the ones that I just like used, probably in the last week. These are the ones you’ve. Probably used ever in your life, maybe not till knit and lynx unless you’re playing a joke on somebody, but UNIX is really good at this. You use LS every day like if you use a terminal, you use LS every day and the reason why UNIX is so good at it is because UNIX has a philosophy about how to write these super tiny components, commands programs whatever you want to call them, and That’s what we’re going to talk about for a little bit, because, if you’re going to go ahead and right web components, I want you to think of what grep does and not what input does grep is a great example of our useable component.

Input is absolutely terrible. First thing so: yeah UNIX has like 17 bullets in their philosophy, and some of them are super meta, like value developers times over computers, which is great, and I don’t know what that means. But one of the ones – that’s the most popular one – is that your component should do one thing, and this is a hundred percent true of web components. If you build a component, it should be really tiny.

It should do the thing that it says it does and it shouldn’t do anything else. If you look at the cat command cat takes a file from your computer and spits it out to the terminal, it doesn’t try to print it. That’s what LPR is there for it doesn’t try to find a string in it. That’s what grep is there for it doesn’t try to sort it alphabetically, that’s what sort is there for cats takes a file and prints it to the terminal.

Input, on the other hand, has something like 21 types. I think today. Last time I checked, even when it started in 1995, it had eight eight types off the bat, that’s how he started the races and that’s really terrible, because they don’t really have anything in common. These input types others in they allow you to select a value. You have input type equals text ray just like mash keyboards and they appear on-screen.

You have the slider which, like you, drag a ball on a vertical slider and that magically picks a number. You have a color picker that gives you an RGB color. You have the map type, which is basically like an image map and where you click on that image is the thing that gets saved as a value. So again, all of these things they have in common the fact that they have a value. They shouldn’t be the same element.

They don’t even look the same, and then you start like painting yourself into a corner once this is your API that you started with. So here I’m creating input, it’s a by default of type equals text, so it’s an HTML input and because you can type in it – and it has a carrot, you can get where that carrot is and selection start is the property that you do this and then I’r going to change the value, the type to input type equals number I can still type.

I still have a carrot, but now, if I actually try to access that property, I get an exception. It’s not that it’s like a bad value. I literally get an exception. The browser panics this makes no sense from an API perspective. Both of these are an HTML input element. Both of these have the same prototype. They have the same property, and yet, if you access it on some types like most of the types to be honest, selection start just barfs on your console and the reason why this is happening is because input type equals text and imple type equals number should never Have been the same element, they were the same 11 because in 1995 we didn’t have JavaScript, we didn’t have polyfills, we didn’t know how to fall back to a default behavior.

So we’re just like we’re going to put everything in one element and it’s going to have a default value and it’s going to be great, but 21 years later, we’re still paying for these mistakes that we had to do in 1995. Because of what the platform was like, so this is why don’t look at input for API advice, because input makes mistakes all the time another one of the UNIX philosophies is composition.

Programs play very nicely with pro with other programs in UNIX. This happens with pipes, the output of any program can become the input of any program and everything works, magically and beautifully, and the way this works on the web is by sort of nesting elements together. So select is composable like select an option or composable. That’s how you can put elements in a checkbox and you can put in text and you can put in a button and you can put in an input and an image and can what do you think is going to happen here? Does anybody know what actually happens? Yeah, this happens, it’s amazing, so the input gets rendered outside of the select box, we’re not even trying there’s no image and with a button we’re just taking its text value.

This is not a composable element. This looks like it could be composable, and so I’ve had a chance to get it really right and they made a mess of it and the historical reasons here are again because in like 1995, when it came out, are you four on Windows didn’t know how to Draw select, select, combo boxes, otherwise, but 21 years later again we can do better and with polymer we did do better. We made our own select box, we called it paper because its material design and in the drop-down you can put on items.

So you can put in text, you can put in an input and you can put in a button and it looks like exactly what you would expect there is the text. There is the button there’s the lemon. I don’t know why you would put an input in a pop-up menu, but I mean you could nothing to nope nobody’s stopping you if you want to do that and that’s a composable element. So when you’re making your elements think about this, are you expecting to have children composed in there? And if you you, try not to make assumptions about them, try to expect sort of any types in there, because people are going to put inputs in your drop-down menus and you’re going to have to deal with it.

And this one leads me to extensibility, which is the code that you’re writing today should work in ten years from now, unless was written 40 years ago on a platform that is nothing like the Mac that I’m running it now and Allah still works. It probably had to be recompiled, but I don’t think anybody changed the source code dramatically. 20 years ago. We wrote forum and forum is the opposite of an extensible and plan for the future element, because forum only works with the input element and when I say it only works with the input I mean it is literally baked in the parser when the parser gets to The for form element: it only looks for input for elements that have the tag, input and skips everything else, and this blows for us as web developers, because what, if I make a super awesome input now that is like way prettier than the crazy native endpoint.

I can’t put it in a form because the form is going to ignore it altogether, so I have to like start hacking around it and make hidden input so that the form recognizes it. So, in contrast in polymer, we try to like not make assumptions about what sort of things again our element expects. We have the swipeable container, where anything that you put in it gets this like magical, Android, swipe, left or swipe right action, and this means that I can put in divs and I can put in inputs and I can put in polymer elements, and I can even Put in like web components that people wrote without polymer that a lemon doesn’t care, it accepts everything and that’s a really good element, because if it works today, it’s going to work in the same in the same way in like 10 years, when the Dom might change A little bit but the platform stays, but the elements stay similar.

So the point here is like to not make any assumptions when you’re making your relevance – and it’s very so. The way I interpret is that when you create your element, assume that it starts like sort of naked, without anything, it doesn’t have any property set on it. It doesn’t have any children, it’s just like born into the world, and then it starts reacting to things when properties change react to that.

Don’t assume that the properties are already set. If people add content to it, react to that assume that when your element starts up, it has nothing and you have to deal with everything that follows, and that means that pretty much in any way that people are going to use your element you’re going to be Fine, because you pretty much covered all your bases by just reacting to changes – and this also sort of leads me to this conversation about state, because, unlike UNIX and this is where UNIX wins, UNIX programs don’t really have any state, they start up.

You give them some input, they do something with the input and then they die and everybody’s happy, but on the web the input sort of lives there on the page, for as long as that page is open and you’re probably going to type in it, and it Has to somehow remember what you typed in it and that’s it isn’t, is internal state which isn’t necessarily bad, but what what you should do about it is that make sure that if your element changes the state internally, you communicate this to anybody.

Who cares you fire? An event every time this internal state changes and similarly you as a user, should be able to always change the internal state of this element in the same way that the element can do it and guess what guess? What input fails that so input type equals number? It’s kind of a good one, a good element, because in theory it lets you like validate when you type in it. So it lets you type in digits and a period for decimals and like the negative sign in a for exponents.

So it doesn’t. Let me type in Monaca emoji, which is great. I guess so, if I type in one two, three four, the internal value of the input is one two three four. If I type in nothing, the value is nothing, and if I type in junk the value is nothing wait what yeah. So it turns out, because this value is actually invalid. The input is going to secretly reset the value to the empty string, but don’t actually tell anyone.

This is going to do it internally and not fire an event about it and if you start with nothing and you type in junk, you as a programmer cannot detect this change, like nobody has told you that that anything has happened, but you with the eyeballs are Looking at that input and be like look there’s junk in it, you got to do something about it, but as a program where you can because input is like hiding, it stayed away from you.

So don’t do that don’t be input which is pretty much. The like point of the stock never be input, because nobody really likes surprises, like surprises in an API, are the worst they’re like finding that your cake is made out of kayo and not cake, and this is San Francisco. Everything is made out of kale. This is the new tragedy in my life, so remember how I said that the reason why we painted ourselves into a corner with input is because in 1995 we didn’t have polyfills.

We had to somehow have a default type on all these stupid inputs, and the only way we could do it is just jamming them into one object, but now we have polyfills, so we need to deal with polyfills, and the really important thing about polyfills is that If your element expects a polyfill, please for the love of God, do not include that polyfill with the element and here’s the story. So we have an element that uses the web animation polyfill with the web animation spec, which works on some browsers and not all of them.

So there’s polyfills for this and we were like we’re going to be so nice to our users and include the polyfill with this element and everything’s going to be grained you’re going to have a great time and then Chrome settings came around and they’re like. We would really like to use this element on Chrome settings, a page that runs on Chrome and no other browsers. Chrome has the web animation standard implemented, but because we jammed the polyfill in that element, chrome has to actually download the polyfill for something they already know.

How to do on every single page? That’s really great, so they don’t really want to use that element and they hate us for it um. So the moment you include the polyphen in your element, you take that choice away from the application developer. Maybe they want to use a different polyfill. Maybe they don’t even care about supporting Internet Explorer. Who cares? Don’t Jam the polyfill in there you’re not actually helping anyone document it, but it’s required, but let the user take care of that.

So what I hope you got from this last ten minutes is that input is terrible and you should not look at it for any API advice, and that group is kind of really good, because UNIX is actually really good at making this. So if you want to read the 17 full at least 17 bullets of UNIX philosophy, I strongly recommended they’re kind of really interesting and they’re, probably going to make you help better make you make better APs help you make better ApS, got it in the end.

Awesome. So we have an element: we’ve given it to people, it has a beautiful API, nobody hates us for it, and now we actually have to maintain it somehow. So the thing about maintaining your elements and why it’s important is that if you go on NPM and you download a package that hasn’t been updated in two years, this is going to give you like the creepy GPS like if nobody cares about this package – and nobody Is fixing it and I’m probably going to be running with a lot of bugs? This is the same with web components.

If you want people to use your elements, you got to keep your elements up-to-date, because that makes them cool and usable and one way we and polymer do. This is by making sure that we follow semver. Oh whoa, whoa, whoa whoa. That was exciting. We got there Samburu, I get excited with silver all the time, so silver stands for semantic versioning and it basically means that every of the every one of these numbers in these versions actually mean something they’re, not just random.

So the last number on the right here I have a tweet from Dave Mithen who makes fun of semver because no matter how what do you think you’re shipping you’re actually going to break your users. So you know keep that in mind. The last number means that this patch has a patch fix. It has bug, fixes it still backwards-compatible everything is a-ok. The middle one means that you’re shipping some features, but they still backwards compatible.

So if you’re using this version yesterday and then you update and you get the new version, your your app should still be fine you’re going to get new features, you don’t have to use them, but like everything that used to work should still continue to work. It probably won’t because you’ll write some bugs, but that’s a different problem and the first one is a major version. This means you’re actually introducing breaking changes.

So if somebody wants to pick up this new version, they actually have to do a little bit of work for everything to work in their application and there’s two things. I want to tell you about major version. Bums, one of them numbers don’t have meanings. Please do not think that increasing your major version is actually like a marketing ploy, or anything like that. Don’t get obsessed about this all you’re doing is communicating that this version has breaking changes, you’re going to have a bit of a hard time and the second one is just because you can communicate this breaking changes doesn’t mean you should have like really aggressive breaking changes.

Breaking changes are really terrible for your users. They have to do work. They have to like read the new API and figure out how you broke them and figure out how to like make their stuff work again. So I’m Palomar we try to be very deliberate. We haven’t shipped a major change yet because we want to make sure that, like the moment, we ship it. It’s like a write change and it’s going to not be actually very hard for users to update to it so be very deliberate about what you’re shipping.

In a major change, don’t just abuse it because you can’t communicate it. That’s what Ruby does um so now that we have cember, we can tell the users that you know this user. This version is going to break you or not, but the only way we’re going to figure out if we’re actually going to break users is by testing, and this should not be new to anyone. You’re right software, you tested duh, but testing.

Look. What is is kind of interesting, because what components are new, and I found that I had to test things that I did not expect that I had to test the first one is obviously the public API. If you pinky swear that a function exists, you should make sure the function exists and does what it says it should do. Duh umm and I’m trying to click now we’re having great times with this remote. I really like it.

So. The other thing is that you might want to start introducing this idea of like a private API. Javascript doesn’t care, so don’t worry about that one. But if you introduce a convent, couldn’t convention like underscore news private, you get to be responsible for less of that API. Like a lot of your configuration methods or any of like your internal functions, you don’t have to make them public because, if you’re making it public you’re responsible for them, but if you make them private, then anybody who’s using them.

You can be like listen you’re on your own. I told you not to use it. If you really want to use it can’t promise it’s going to be there same polymer, you use, underscores any functions or properties that start with an underscore or two underscores. If it’s a behavior, I private use them at your own cost. I might just delete them for shits and giggles. You should test your accessibility, so element should be accessible and I’m going to like rail on this one in about 20 minutes, but you should also test this.

You should unit test it because you don’t want to break it. We use the accessibility, developer tools. It’s on github under Google Chrome, that’s what this cryptic diagram means and they’re, basically an API that you can run as a unit test and every time you said something like roll on an element. It makes sure’s it like, runs 20 tests and make sure all the Aria labels are set up correctly and tab indexes are set up correctly and your contrast isn’t terrible.

So that’s really good. You can automate them. You should also test the look and feel – and this is where things get interested, because your vending elements that look like something the thing that they look like kind of becomes part of your cart. It becomes part of your contract with the API it with the element user. So I discovered this a super hard way where we had an element. It was a button and I thought, being extremely awesome and I changed the box sizing from content box to border box, and I was like everybody’s going to love this change and I broke like 15 people because it turns out if you change it to border box And somebody was sending a size on that element.

That side is now completely messed up and they’re going to have like adjust everything and add 20 pixels to everything, and I ship that as a bug fix – and it was actually breaking change. Go me and that’s because I don’t have any tests for the UI so make sure you actually test the UI, because you’re promising your user. That a thing looks like the thing. It should look like. Here’s a bunch of UI frameworks and libraries that let you make UI tests, I don’t care which one you use just use, one.

You don’t even have to you everybody’s, taking pictures of these nice. You don’t even have to use this one. You can literally do like get bounding client direct on your elements and make sure that the right size and like the font size, is the same. Do whatever you want as long as you test your and if I don’t remember, I told you, elements are composable and they like should accept children and they should like working other things.

So if your element should be composable and that’s the thing that you care about, make sure that you test it. If you’re writing something, that’s like a form put all sorts of things in that form and make sure it doesn’t crash. If you think is like an input, put it inside a form and see that works, fine test, your things, cool, we’re testing, we have silver, we’re telling the users we’re updating our elements.

Users, trust us they’re delighted with our elements are going to use them forever. We need to actually write documentation about it, um, because if you don’t WTF m, you can tell people to RTS em later so cover your bases. Now, if your element has any edge cases document them, I don’t care that your element is being weird if it’s in like RTL mode as long as you tell me about it, because otherwise, I’m going to write this like super-lonely stock over Stack Overflow post, that nobody’s Going to respond to I’m just going to be sitting there and be like it’s been 10 hours.

Why doesn’t this element work just document your is going to be great, we’re maintaining irrelevant. Everything is great. Let’s talk about performance, so performance has been a big topic at i/o performance. We want fast steps fast, apps, lead to user engagement, lead to more views, leads to me getting promoted and getting paid more. Everybody wants that. But when we talk about elements, performance is actually really important, because if you it doesn’t matter how fast I make my application, I can use rail and purple at everything if I’m building it out of really terrible and slow elements, there’s nothing that I can do, which Means that you, as an element developer, have to make to be very careful about what you put in an element because it’s going to screw somebody in a major way later.

So, if you think about your element, maybe it’s like 1 milliseconds fast. Let’s see it’s a checkbox and it takes 1 millisecond to paint because that’s what we really do, one thing: do it fast duh? So if you think about painting, if it takes one millisecond to paint your element, you might like high-five yourself and be like one. Millisecond is the fastest paint I’ve ever heard of in my life, I’m doing great, but if I have like a thousand pizza toppings on that page and they’re, all checkboxes you’ve now added a whole second to that page and a whole second to a web page is Actually enormous we’ve been trying to like save milliseconds out of pages, and you just made it so much slower, so focus on first paint and make sure that the first time your element shows up on the page is as fast as I can possibly be.

Steve are well on the polymer team. Has an amazing rule about this? The best to advise about how to make your element be fast is do less and be lazy. This applies to like any, that you want to be fast, do less be lazy? By do less, we literally mean that don’t do anything, you don’t need before. First paint, don’t like said magical handlers, don’t set magical Styles that are needed maybe later so we had this code a lot in a lot of our polymer elements were like when the element was being attached.

So when was actually inserted in the Dom, we were updating the pointer events to make sure you couldn’t click on disabled things, and we are, you know, adding click handlers, and this looks like very reasonable code right. It’s very short. It probably doesn’t take very long to run, but again, if you do it a thousand times, that’s a thousand event listeners you’re setting up before you’re painting the page, that’s enormous.

So what we do now is we wrap it in this like after next render? We do everything that’s needed for paint, this isn’t needed for first paint and everything that’s needed, like literally the tick right effort painted we do it after the next render – and this is really great because now my page paints really fast. My elements paint really fast and they’re interactable the milli site like instantly right after so everything is perfect and everything is fast.

Be lazy. Take sad one step, one step further, don’t do anything unless somebody acts chillie asks you for it. Don’t just like volunteer to do work, that’s bonkers! You would never do that in real life. I have nothing to do right now. Let me do some work. It’s great you’ll read Netflix. You know you do so in polymer. In polymer, we have a lot of polymer elements: they implement the material design, spec and the material design.

Spec. Has this thing where, like every time you click on something has like a really satisfactory poll that is a little jiggle and everything’s, really nice and fun. So the way we were coding it up is that literally every element had a ripple element inside of it check boxes buttons inputs. Everything had a ripple which sounds really great in theory, right like it should ripple, we should put a ripple element in there.

It turns out that’s crazy. Let’s go back to my pizza, topping analogy. I have a thousand pizza toppings, I’m probably going to click on like four of them, because I’ve tried to put all the pizza toppings on a pizza before and it is terrible. Don’t do it pineapple and mushrooms don’t go together. They go together with onions, though so, if you’re only going to like click on three things, you only need three ripples you’re now creating like 997 ripples.

You don’t actually need so we update our code and we do something else that where no element has a ripple when it starts up, but if you click on it, the first thing is going to do on that clicking will be like do. I have a ripple. No well, here’s a ripple make it jiggle. So now, in this enormous application, we’re only creating the ripples, we actually need or being incredibly lazy – and this makes everything super fast because I’m not just creating Dom nodes that are sitting on the page.

Doing absolutely nothing not even giving them access to Netflix do less be lazy, do less be lazy. This is your manager tattoo it somewhere and we didn’t just like come up with us one day. Well, Steve did he woke up he’s listening to like this weird podcast? I think that tells him that, but like we actually started writing tests for performance to figure out how this was going and there’s many different ways in which you can test performance and they’re all terrifying, because I’m actually terrified of everybody else’s frameworks.

So I have like two simple ones that I use and they work really well. The first one is console dot time so cause the whole time, takes a label and basically like between the first time. You call time and time end on that label. It calculates how much time does this cost and you can also nest them, so you can be like well. Creation took this long, but setting attributes took this long and the reason what causes all time is.

Nice is because you get dev tour. You get a timeline in the of tools and you can see like what’s actually happening here. This is incredibly fast because I was just doing random numbers in a loop you’re, never going to get code that runs in ten milliseconds like that, but yeah. So that’s constant load time. It gives you a time line if you’re even lazier than that, and you don’t want to don’t care about that aki-nee’s performance now, which literally just tells you milliseconds now milliseconds now, so you can do it before and you can do it after a task and see How long that took – and I think that you do inside, if you want to test your first paint – is that you want to create your element.

You want to attach it to the body and you want to do a giant hack. So let’s talk about this giant hack in the same way that we’re optimizing our elements, the browser has been optimizing itself because it assumes there were terrible developers which we are so just because you’re appending something to the body doesn’t actually mean chrome is going to paint It Chrome’s going to like wait to batch them.

If that’s the thing isn’t visible, chrome doesn’t even care if it doesn’t affect the layout, it doesn’t care and you can’t actually tell chrome to paint things so the only way we can we can time. This correctly is by sort of forcing chrome to relay out the entire page, which also forces it to paint offset with. Is one of these attributes that when you call it on a on an element, is a style attribute? It like has to recalculate the layout because it’s in reference to its parents, so that’s the one that I use pretty much anything with the word offset in it is going to cause a relay out.

You can Google for all the other ones. If you don’t like it, but the idea here is that, if you want to make sure your element has painted somehow trigger our relay out on the page and the follow up to that is don’t do this once do it like a thousand times, do it as Many times as you have time for, because if you only do it once anything could have happened in there, somebody could have sent you an animated gif to your slack blog, which slows down your computer.

The garbage collector could have run the garbage. Collector could have not run if you do it a thousand times you’ll get more accurate numbers. You actually get a good answer about how slow or how fast your element is at painting, and the reason why this is awesome is that now you can automate it. You can put this in a unit test. You can put it on a test that you run on every merge and then on every more.

You can be like well, this elementals, like 10 milliseconds fast yesterday and itself 15, and then you can ask yourself whether the feature you’re, adding or the bug fix, you’re adding, is actually worth this performance, constant you’re taking. So let’s talk about accessibility, there’s! This amazing quote about so anywho, but the conclusion here, just to like bring it home, is test your elements for performance make sure they are fast.

If your elements are have their ups really slow. I hate you and you’re going to slow down the web. Please don’t slow out. The web is really hard for all of us accessibility. So there’s this amazing quote by Cordelia Dylan, which is that accessibility is like a blueberry muffin. So the way you make a blueberry muffin isn’t by taking a plain muffin and a fistful of blueberries and jamming them in there and be like I made you a blueberry muffin, you made me garbage the way you make a blueberry muffin is by taking the eggs And the flour in the sugar and the butter and beating them together and adding the muffin the blueberries to this raw dough and putting them in the oven and waiting for 35 minutes, and then you get delicious blueberry.

Muffins accessibility is hard. You have to do it. The entire time from the birth of your element to the end of your element, in the same way that you make muffins, you can’t just make an element and the last day before you ship and be like, I didn’t, make it accessible. Let me jam some Eric: are your labels in there you’re going to make a terrible job about it, and the reason why this is important is that if you don’t have accessible elements, you’re not going to be able to make accessible apps? And if you don’t want to make accessible, apps you’re a terrible person, you should have meat making apps for anybody.

You should be doing something else. Thanks y’all Rob Dodson gave a really good talk yesterday at 9 a.M. On this stage about how to make your elements accessible, and I strongly recommend going and reading it at home. It’s an amazing talk and he tells you like proper, concrete things on how to make it better. I’r going to tell you two things that I got wrong because they were like kind of like really easy things for me to get right, and I didn’t focus dates.

Are only a big one, focus dates tell you, you know where the focus is on the page. It’s a really ugly outline that in the 2000s it was really cool to set outline none on focus because nobody really liked it and that’s really terrible, because if you’re not using the mouse and you’re just using the keyboard, you’re not going to know where you’re on The page, but even if you are a mouse user, if it’s just like you, remember the last time you had to buy something on the internet and at the end you get to the 15 field.

Visa credit form where you have to like fill in on your information. Your shipping address your mailing address, your name and your credit card number and you’re going to be tabbing to them. I promise you, you don’t actually click on every single field. I know you and if nobody is telling you where the focus is on that page you’re going to start typing your credit card number in your like address field, you’re going to get frustrated, it’s already frustrating experience buying things on the Internet.

Don’t make it worse, don’t make bad you eyes for people, I don’t care whether you use this outline or a different outline or you’re communicating focus in a different way. As long as you are communicating focus in someone, you can make like a nice ripple around it. Just make sure that if somebody is using the keyboard, they know where the focus is on that page and the platform helps you with this tap index equals zero.

Whatever you put it on, that thing becomes focusable and by default at least it gets the really ugly outline it’s ugly, but you’re doing better than not doing anything at all. And the other thing is that you have documented active element which tells you where the focus is on that page, which means now you can unit test this and automate. This make a test where you have 17 of your elements and simulate tabbing through it, and check that the thing is that the thing that is focused is the thing that you expect to be focused, and it’s styled, like you, expect it to be focused unit tests Are the best they make sure that your element doesn’t randomly break? The platform also gives you Aria.

Aria is what a voiceover application is used to read: HTML, there’s a whole bunch of like documentation. Aria, I’m not going to talk about Aria. I just want to mention that some elements have like built in Aria like nav and a have like extra Aria built in themselves, and that are you labeled by is this really awesome attribute? That is basically like Aria label on steroids, because if an element already has a built in Aria label like input the native input, does it uses the Aria label to read whatever you typed in it? You can’t put an extra Aria label on it.

You can only have one so if you want to make the native input more accessible, like say, with a label that describes what it’s for. Are you labeled wise, therefore, that it always adds more information to any element, so this is really important. Please make your elements accessible, because if we’re going to make accessible elements, we’re going to get accessible, apps and the same thing happens for performance.

If you have fast elements, you’re going to get a fast app and if you have maintainable elements, you’re going to get a maintainable app and that’s really our goal as element developers, we want to make the web better. We want to make amazing apps for other people, so that’s it. I hope you got something out of the stock. Please go home and make elements and if you do tweet them at me, so I can what remained thanks.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.