 Hello. Hello. Can everyone hear me? Great. So I'm waiting for my slides. They show up at some magical point in the future Hi, I'm Sam. I'm from a search company. You might have heard of us You know some value of search I guess So Who's this guy? Why is he talking to you? I feel like I'm a bit of the wildcard here I know very little about Drupal. I know a lot about PHP from my time at university and working on random projects and stuff So my title is developer programs engineer Which means I get to come out and give talks and write samples and libraries and things like that at Google We offer or often described as the zeroth customer So we consume Google's API's before anyone else outside the world gets to and we say well this sucks This is good. This is bad. This is great and often will take opinionated views on the things we ship So we might have a restful API But we actually ship a library that does the one thing that 90% of people want to do right and that's my job to help write those libraries Before that though, I worked on Google Maps fry phone This is a prize to me as well that I knew anything about iOS So if you want to blame me for your directions on your phone, let me know although I will give you a hint that mostly it's a glorified 3d renderer Well, you know You can ask me about that later. I previously worked on things called wave for some of you might know Anyone were wave yay App Engine which small plug does host PHP Although you have to pay us unlike the other services Drive a thing called Google keep and a bit on Chrome and my job now is mostly to evangelize or work as a developer engineer on Chrome So it kind of fits in the model of well, let's talk about new web stuff And things that you know, you may and I'll be using yet What are my goals at Google? This is my mission at work I haven't really worked it out and I've been there for long enough that people don't really care what I do Also, people don't really care what I do anyway I'm a big a little cog in a big machine so like I mentioned before a long time ago around shared hosting my Distinguishing feature was that I had PHP 5 so that might give you an idea of how long ago that was and people, you know We're like, oh, you're on PHP 5. That's amazing. You're registered globals turned off. That's amazing And also I wrote like some sign-up flow stuff. So, you know fill in form here go to page here Make sure the form was there all that kind of stuff This isn't a back-end talk at all. I just wanted to give you my background I mostly write in go now Which also has a cute cuddly mascot. So Taddle talk is talk to talking about the modern web. What does that actually mean? Is it web 2.0? Well, I mean, okay, this to court is from obviously, you know Two nights ago when I wrote this talk when I wrote this quote or added this quote in but web 2.0 Was this thing modernized like or described almost 10 years ago or more than 10 years ago in 2004 at a web 2.0 Conference which went for many years and eventually stopped and it really talked about the idea that websites used to be Static and boring and it was kind of an idealized version of the web, right? There was no crazy Ajax There was no crazy Applications it was just like oh, I have a page and I want to tell you some stuff And I'm gonna link to someone else wants to tell you something else and it was simple in the world was I Don't know arguably like a I sound like an old man, right? It's like the world was a better place when all it was was just tags that meant what they actually were and not We're trying to be used to create, you know menus and drop-downs and crazy stuff like that but You know the Frameworks that sprung up around those times like these guys that I've bolded here really took the really bare-bones primitives that you had You know literally 11 years ago and made all some things out of that, right, but we've come a long way since then, right? And browsers were simple then they didn't do that much, but they were pretty consistent in what they did, right, you know The wonderful example of this is you had very limited primitives Right, you were using tables to make pages And you know this isn't really the point of the talk to talk about tables and layout although I touched on that later But like people still ask these questions, you know, that's not a new this problem hasn't gone away in the last 11 years Despite the fact that browsers have moved on from that that period and what's hard about the web Especially from Google's point of view is that when you search for something, this is what you get, right? You don't get by the way, all of this is 10 years old people just search for the first result and go oh that looks good Let's build that right? You know when you search for Ajax the first hit tells you to create this Microsoft ActiveX object stuff, right? And I know that working for governments and enterprises you need to support old browsers but IE 6 really Please tell me if you're using supporting IE 6 anyone anyone Okay, that was a joke good And it was like there's some other weird stuff that that we've kind of moved on from like you send data encoded like this And you have a ready-state change event for XML But in reality, okay The problem is of course that when I say we've moved on what this also means that you have more standards because we still have to support this old stuff in some cases But you know, we've got these bodies that help define your standards that browsers implement and these things that have come in ebbs and flow over the last 10 15 years I'll give you some background The W3C was set up by Tim Berners-Lee who did the the web essentially. It's you know, he's org What happened in reality is in about 2000 2002 all of their abouts the browser venus at the time which was basically Webkit although not Apple really at the time Firefox, Mozilla and IE Set up this thing called what WG and it's like the web hypertext application something something working group So what happened in reality is While you had this lovely well intentioned standards body that in the W3C the major browser ventors went vendors basically went This is too slow. We're gonna do it ourselves and and the reality for better or worse Is that when you're shipping 99% of the world's browsers? You can kind of dictate how the web's gonna evolve So we have these two standard bodies you'll find if you look at things like the HTML5 standard Which apparently is now final which I find a bit confusing and odd It's sort of written by the what WG but reference from W3C and like there's actually interchangeable It's just they have a slightly different membership Of course now what WG has Chrome and effectively operates Chrome right, but they're in that they're in there too now So stepping back to things like Ajax, you know The thing at the top there is essentially the standard for doing Ajax requests in 2015 And I have a get I would have a hunch that many of you have never seen this before right But in Chrome 42 or whatever you can literally go to a console type fetch and give it these basic parameters And you can go look up the standard and what WG you can look up Firefox's implementation You know whether Apple is making Apple barely very rarely makes any noise about what they're doing So we don't know if they're doing it, but probably they are And there's a nice polyfill and at the very least you have this new way of doing Ajax requests, which Still looks like what we used to do, but it's a bit simpler So what are we fighting to get here right and I'll have a few more examples of cool new things that we're doing It's not just about Ajax and tables, but I mean, how do we fight this like the web is These primitives that you know How do we avoid people using primitives which are 10 15 years old to build their what build their modern websites and basically? It's history right like I If people still you know when you look up how to do things you still get results for ie6 compatibility I still get a look up how to do the clear fix hack and find suggestions about oh if you're supporting ie4mac and it's like This hasn't been around for so long right The guy on the top left isn't really history. It's mobile Safari. It's been described as the ie6 of the web I'll get into that later on but it's something worth thinking about Google and other companies struggle with Apple because The iPhone for better or worse is like an aspirational target if you're out if you're if your application works well on an iPhone. That's great but the reality is their Brought the market share is not as high as Android, but Android kind of has shitty old browsers and like it's a complicated story, right? Um Android jQuery to some extent is part of our history right like libraries like jQuery and other bits and pieces you know this this dollar sign thing essentially You know pave the way for this Standard which talked about which has document query selector and document query selector all and in fact now the dollar sign thing is implemented using this guy Right, so the speeds about the same You know, this is pretty marginally different There's some cases where It's very similar some cases where like if you're doing get element ID by ID This is super fast right because it doesn't have to like try to work out what this string means but The point is these libraries have been really great in getting as to where we are now and it pioneered this idea of this little dollar sign thing Which turned into a standard? So it's great. It's helped it helped you a long time ago, but I post you that it's not so useful anymore So what I kind of mean by this is your fractions are bad and you should feel bad. I was kind of mixed about the title but It seems to have stuck so You know on the left here is what we have like ten years ago or even how people still build sites now But we have a browser. We have a framework have plugins. We have stuff built on top of that You get this reasonably intricate web of stuff happening in kind of user space land in your browser Whereas on the right we have this idea that the browser is doing a lot of this work for you so We have more tons of modern APIs and we're going through some of them, you know in a few slides and They work well and interact with each other very well and when cases where they don't exist yet You can provide polyfills which sort of by definition work very well if they're isolated because as soon as that feature is implemented by your browser The need for that polyfill goes away and that particular feature becomes a lot faster Whereas if it has this weird dependency chain, you can't just take it out of the system, right? So a good example was that fetch API, right? So that is literally the polyfills 100 lines or something, right? And what you can do is if you want to use this new standard you Write a website you include its tag in the header if that's features already supported It doesn't run you can even go further than that and not ship it to those people But you know have an automated process where those clients get that particular thing and as soon as your your browser of choice implements that feature the need for that goes away your site becomes faster usually and maybe better for other reasons fetch Obviously, it's not super interesting, but there are other cases where this becomes more appealing. I Like I just like this site vanillajs.com and If you haven't got the gag the thing in the middle here says no matter what you take you get zero bytes This is a few years old now, but I still think it's cute It's just saying we've come a long way in terms of like all the JavaScript standards So to get to contents although I've been talking for a while, and I think that's almost a thought of my talk so far There's some things I want to talk about there's one thing I mentioned in my Blob that I that I think I won't get to because it takes a lot of time And that's the thing called service worker which people might be curious about but I might get to that if I have time at the end so Let's talk about web animations. So in the beginning there was set web window dot set time out and it was pretty bad so I have a couple demos, so I'll be like switching between them if you want to move something around the screen on a web page You know this code kind of probably makes a bit of sense. You've created a credit start time. He said an end time You said it's transformed to be a certain position along the screen and while it's still pending you keep running this animation, so Quick demo not very exciting. Let's see if this comes up All right, let's bring a tab up and then Yes, so we'll cut cute elephant moving across the screen and And one thing I touch on is actually performance, right? So this is the way, you know, if you run jQuery right now and you want to move something from left to right This is the sort of code that it'll actually generate. So in Chrome. We can do this lovely thing where we say Let's go to timeline. Let's hit record and we'll see that You know, I won't get into this to do in a two great detail post it's pretty crummy to see up there but you can see that Each frame is taking you a bit of time, right? So this is one millisecond three cells Millie seconds eight milliseconds. So it takes about 12 milliseconds to move this move this guy around the screen So that's fine animation. It's cute. You know, you can do a few more things like that You can now use this thing called request animation frame So what's actually happening in the background is that little elephant is still moving the pages in the background But it's still using my CPU, which is kind of silly, right? Like why do I care about this cute animation? So instead I can say well only call me when I'm ready to draw sound simple I'm not going to show a demo because it's literally the same code except it doesn't nothing happens when it's in the background Which I can't show you anyway. This is supported by 85% of browsers So one thing I'll be doing this talk is talking a little bit about the level of support these features have and whether they have polyfills or not And I guess up to you guys as you know developers or integrators or whatever or even people who are selling stuff to your clients Is to what level of percent are you happy to to match, right? I mean I read somewhere recently that you know Australia still has 2% of people on dial-up connections, right? Would you still target them is that still you know, so it's 96% or 98% enough for your to use a feature that? You know, it doesn't work anywhere else So actually touching this a little bit with the animation frame stuff I actually stole this from a talk I have entirely on web animation So if you're curious about that, I'll send you the link later Still has a bit of work and that that that cost we saw for a frame will still be you know at 12 milliseconds or whatever Interestingly enough to talk about polyfills and features Request animation frame is a cute hack to do work later So let's say you use is got their site open in a background tab somewhere You can actually say well, you know, I don't want to refresh this page all night Maybe there's some content that changes every five minutes, but instead I just want to refresh it when they've come back to it Right, so I know it's ready again. So you can use request animation frame not for an animation, but to say oh Look, I'm in focus again. I can be used Although then there's a thing called the page visibility API and I'll give you a hint the page visibility API Polyfill is built on request animation frame, but actually you don't need to care right so if you want to use a thing this API to see whether the page is visible or not you just include the Polyfill things magically work and when they're actually done properly by the browser you get a few nicer bits of bits and pieces like You know, I won't get into the nitty-gritty, but you know using the polyfill you it takes like a good second for the food for your page to Realize that it's in the background as an example But it still does mostly what you expect So web animations is a way to Programmatically in JavaScript just do an animation between two states pretty simple It's standard. It's supported by I Confess whenever you see 40% this basically just means Chrome So make of that what you will but we have a nice polyfill that works basically everywhere So this is a lovely standard, right? If you want to move something on a screen you want to have a cute effect You want to whatever you like You can just use this nowadays, right? The polyfill is great It works almost everywhere if you go to the link later on I'll put these slides up You can read all about it and this is just something that people aren't you know I think you know we could we we as Google actually know have a vague idea of where this is being used and in fact on Chrome status comm You can go to a thing which says what are the features that I've seen in use of the last 30 days And this is aggregate stats for everything that Chrome every Chrome user has seen You know in the last 30 days and the stuff you expect is that is at the top, right? You see like a form element and for CSS you see width right turns out width is the most common CSS property But if you're curious about where these features are actually being used in reality you can go and look them up So I'll give you a quick demo, but as you might expect So okay, that's still the old elephant which is still happily moving away You'll see that Looks exactly the same the key here is that when you do your profiler and you go, okay. Well, I'll go back to timeline And I say record and I wait, you know second or two We see that actually So this is a bit tricky you can't quite pick this up, but These great boxes at the very top, which are really hard to see show that actually the zero work happening on the on your pages thread at all It's absolutely nothing, right? So the benefit of this kind of stuff in browsers that support it is that you don't do any work on the main thread You move it all to the GPU or you move it all to a second thread Which is great news because JavaScript single threaded and blocking and all that kind of jazz and You know yet this guy in the background is still consuming, you know eight milliseconds per Whatever which is technically still doing some work on my CPU And I need to apparently I changed it So that's pretty cool So I'm going to move on to another topic now, which is interactive html elements There's actually only a couple of these but they're really pivotal things that have kind of had Hopefully fill a gap in html. Actually the third one Possibly not so useful, but there's three of them that I want to talk about one is dialogue Dialogues you can have them Most they do a bunch of interesting stuff But the most interesting part of this standard is the modal dialogue support so you you want to block your page You want to let user enter, you know type something in or enter something Second one is details in summary. It's not as interesting, but it's cute. I'll give you a quick demo to give an idea what these actually are and Yet again, let's get rid of this guy so Not much is going on here, but I'm going to show a modal dialogue covers the whole page Okay, admittedly it covers the inner page so I can still tap on the code pen stuff around the edges But I can't tap on this guy behind here I can't focus that I can't have to what I can't do anything, right? So while the page is still running this is a really nice, you know You've seen these forms where you can kind of scroll around and the black box disappears Or you can tab and like click a link behind the box and things like that, right? This is a common problem and now we've kind of been able to solve that through these spec bodies pushing through new specifications and this feature you can actually get one used right now because you can include this polyfill in your browser and I don't want to get into the nitty-gritty too much needless to say there's With the polyfill there's invisible html elements that you tab to and we steal the focus from and yada yada yada But just some extent you don't have to worry. It's not built on some other framework You just include it and when your browser supports it you get some slightly better benefit Details in summary There's pretty much as it is. There's no JavaScript going on here. There's just a state state a thing that has a state So, you know, I can see that if I were to inspect that I'd see that it was, you know Either set is open or closed So these are fine. If you don't use a polyfill though, some of them don't fall back very sanely So, you know details in summary with the have a little with a little opener turns out if you don't have a polyfill They just works right because it's just content, but the dialogue because the JavaScript involved you'll end up crashing So you need to use the polyfill in this case Standards bodies also add some other interesting things that are kind of obvious You know who here is set display none to hide an element turns out in every browser You know I haven't I 11 and above you can now just say hidden It just works Except of course it's implemented by the thing below, which means you can override it So it's not always done implemented perfectly. Although that's the way Chrome implements it. Maybe it's done better somewhere else But it's so really nice So I'm gonna switch switch up a bit and talk about HTML and CSS so I Mentioned tables when we started who here is used tables to designer to lay out anytime recently So, you know, I mean whether it's true or not no one wants to admit to it. So I think it's not the question anymore You know what I was researching this I looked up tables versus divs and the articles you read very much Talk about, you know div for this div for that and they mentioned oh, you should avoid divitis I try not to have too many of them right with HTML five You can have things like articles and asides and headers and stuff that actually have semantic meaning But it's kind of a hack right because you're kind of you're trying to balance the the the right elements that that happen to match your content That happened to also match your styling rules, right? So you're kind of trying to find a balance here One thing that's really interesting that I think isn't picked up as much as it should be is what's called flexible box layout also known as flex box and so It actually has 85% adoption. It's pretty good Safari insist on using the web get prefix, but if you if you can ignore that and actually it works Pretty much in all modern browsers. It's modular. I think I ate has struggles with it. Although I dubiously call I ate a modern browser And you can actually look this up later. You can go to can I use calm and see which which, you know Browser support this feature, but it's just a really nice way of you know It solves a bunch of interesting layout problems that Your people have struggled with with floats and padding and hacks and all this kind of stuff, right? And it's just it's at 85% usage I don't really know what other point what other other thing, you know, we as kind of the web Browser support supply can do to make it, you know more useful There's also things called bread layout and multi-column column layout They've actually been around for a while, but they're still behind flags and they have prefixes So like Chrome doesn't support it unless you like tick a box and stuff So even though there are standards this kind of comes back to what I said before like unless your browser's actually move on it Being a standard is sort of worth nothing And for better or worse flexbox seems to be getting a lot of love whereas these other guys Not so much And if you're curious about the internal workings of the standard standard groups I'm very happy to chat about that too, but it's would take a long time So modern web design probably means flexbox if you're into it plus And I don't really know what to call non-table list design because it's not really divs anymore, right? To give you some concrete examples of flexbox by the way And I don't want to make this talk about flexbox needless to say that it can do a lot of cool stuff You can put a div in the center of something whoo Or you can do what was once referred to as the one true layout Which is the kind of multi-column stuff that just seems to work reasonably well and has a sensible Responsive model and you can read Missils guide to this because it's quite good There's some other woefully ignored TSS features. This is stuff. I just looked up while I was researching this talk CSS calc supported by 85% also supported by 85% of browsers The top one's not very interesting because it's just boring math But as you get to different units it becomes super cool, right? You can say well, I have this box it needs to be this high But also I have a header which is a different unit type and stuff like that Current color this is a really random cute small feature if you have a color But you want your background or your border color to be the same as it you just say current color I did not know about that one despite it being the most one of the most well-supported features that I'm talking about And it's cute I don't really know if it you need it in a land of sass and less in all these libraries But it you know it shows that you know you can Google for this term and you can and you can see that you know There's articles from 2011 saying oh, we don't know if browsers will support this and you know It's a cool new feature, but you know don't place your bets on it and admittedly three years is a long time But you know it's pretty nice to see that articles from three years ago Can become fact and browsers can pick them up and actually you know do bother to build implement these things And box sizing is cool, too If you don't know about it, it's really nice If you have like a box as an element which has you know a width of a hundred You know and you add a border of one pixel. Does that mean the box is 102 pixels wide or is a hundred? This just solves that problem and moves that the border inside the box as opposed to outside So I want to talk a bit about web components People have talked to the talks. I've been to today. I've talked a lot about components and Various different terms of that Obviously CSS is a big part of that right you have some object you want to style it in a certain way It's probably web components, you know, I would take this this Wikipedia quote with a grain of salt It's not quite just Google doing this stuff, but let me get into it in a little second so If you use github today every single page you load has web components on it So it's not very exciting, but the times you see in the revision logs This is what it comes down to this is what you get from the server you get absolute dates and you get a reasonable default and then it upgrades to something useful via a custom element, so It then modifies its content to say seven months ago pretty simple pretty cute I guess now that I think about it, they could just send you that text but For better or worse, this is the way they've done it and I think it's quite cute It's probably a bit too encapsulated because really it's not doing a whole lot of stuff here I it's just I've got a bit of text. I want to change it to some other text You can imagine people using this for localization Although that comes into a whole lot of sweet of issues and I don't know much about that So don't you know go away and start doing all your localization via HTML custom elements and The odd thing too is if you replace it with a bunch of DOM then kind of that DOM inside that element becomes a bit weird like Does your if you have someone building a component do they need to care that you know We're developing now can get inside that DOM and muck with your internal workings I'll come back on that to the second but What Google thinks of web components and what other people think I think of well is a good example is things like a button But a bad example is a thing like a whole application, right? Your whole application doesn't need to be encapsulated. You've got the DOM and the HTML for that But you know a good example of something it's small and neat and doesn't have much state and you can reuse it everywhere So having your own button type might be cute and you might say I don't know by default. It says click me There's some examples, which I think I'm going on a little bit So you can look at these later, but there's a Pokemon element which you say, you know x Pokemon name equals I don't know someone give me a Pokemon Right and it just shows you a picture and that's it It's done, but it shows you that this is quite powerful You can then include that in your page and just use it as a reusable component There's no worries about CSS or anything else. It just shows up and works Support of course is a bit lackluster and this is where I get back to talking about polyfills and stuff Firefox does some of the stuff Chrome effectively is opera now. So, you know, that's not worth mentioning In theory, we support polyfills for all these things in Google ships these The issue here and I won't get into details too much. She's mobile Safari struggles a little bit The other browsers are mostly pretty good Google has an interesting take on web components and this is what I was saying before so We're betting on this thing called shadow shadow DOM, which is basically a way of saying if I have an HTML element how do I Create a bunch of presentation or sort of layout DOM within that element that does something sensible Without exposing that to my actual end user and the user in this case I guess is you guys as the developer so your button has a bunch of div and spans and bubble blood to make it look What like it does a good? What a good example of this is Google's polymer elements and this is a thing up the very right Our material design such polymer stuff has this cute effect where you tap and it gets a bubble and a ripple, right? So we can use shadow DOM to encapsulate that and hide that from you as a developer So you don't care that the thing has a has a bubble or a ripple you just care that it's a button So we're betting betting big on that, but It's a hugely expensive polyfill and we have to do things like replace query selector and things like that So other approaches that you might have heard about Facebook has a thing called react which is kind of get been in the news a lot lately There's also a thing called ember, which is another approach to web components the what these do is they take sort of Custom elements you might describe and then actually render them to DOM and you basically remove that original thing from your if you're on your html page And then you get Totally different DOM the challenge there is that if you want to treat this custom element like a real element and do query selector and modify It's properties. It's just gone, right? You can't get get it get back to it So you really end up moving a lot of your pages logic into pure JavaScript rather than treating the DOM as a representation of your content or your I guess your content. Yeah And it gets a bit tricky when you have like sub levels of this, right? So this thing at the bottom might become this huge long string of DOM and I can't get to this object called my container anymore Where is it, right? So actually, we'll show a quick example because I feel like maybe it's useful to see a custom element in practice This is something that I'm keen to show off which something I wrote recently. This is called the mobile first element And all it is is a phone you can drag around And the idea is when you're actually on a mobile device, it literally hides itself and doesn't do anything so it frees you from the Traconian ability to have to which I've got to reload That to build for mobile and to stop down desktop. You just tell your desktop users Well, it's meant to be used on a phone have fun But this is something that when you look at the source code if I can work out how to do that Well Okay, this is a bit tricky to show but it's literally two tags And you don't see any that that weird phone stuff or the rotation logic or anything like that Let's get back to it. So one thing I want to talk about which is a bit odd for this talk is I think is form validation and this is actually One of the things I started with with this whole You know, what does the modern web do and I thought about you know, web components are a big part of that because they help You encapsulate a logic in a single DOM element and web animations is cool because it takes these primitives that We've had a lot of time and then creates whole new ones that you know don't run on the CPU and things like that But I find that form validation is something that people tend to overthink and part of that is because you get these results which Look like Trump if they are from a long time ago So when you search for form validation in your favorite browser favorite search engine, sorry you get all these examples and Honestly, most of the time these are just too complicated, right? You've got to add JavaScript and maybe you've got jQuery anyway Maybe you've got Angular anyway, but it's cognitive load. You're adding to your page this is most of what people need and this works in I Haven't even put this out up here because I think it's 95 96% You just literally say if someone has to type this thing in Put a required tag on it and you'll find that nearly every browser will say well, you can't submit this without this data And you're done. No JavaScript. No nothing Like I entered that Angular is also a culprit right Google ships Angular and we also have these, you know complicated examples This is I won't go through all of this right now But essentially, you know, I can have a warning class that a warning tag that tells you, you know, what I need to do You know in addition to the browser's default little pop-up that I can start based on a CSS selector So if the user hasn't typed their name in here, I Just get a notice And so I can move a quick demo of that and you know, it's pretty much as you expect I hit submit and I get a bunch of warnings and this is very little code and mostly It's just done with these required tags and a bit of CSS You can't do everything, you know, if you want one of one one also this a or b But it's one of these cases where you know, this has been you've had so few primitives for so long that People have built all these huge libraries to actually, you know emulate the behavior you really want and apparently I'm tapping through which is probably a sign that I'm I'm just going through it So there's a few validation options things like length pattern There's even a site on the web you're right right now where you can search for You know custom patterns right if you want a pattern to match an AmEx credit card number or something you can look that up So final thoughts and I hope they've given you some examples of cool new stuff plus some reasons why you might just Embrace the new kind of standards that we have now Pick and choose your support like I said this before right like if you see a site saying by the way for IE Mac You need to do this like maybe you're at the wrong site Maybe it's a bit out of date and even IE 8 which I think we struggle with and Google for example We struggle with IE 8 because things like the Maps API which is built in Sydney and I sit next right next to these guys Still has to support IE 8 It's actually interesting because IE 8 actually wasn't that bad as a browser, but it was very bad at adopting standards So it actually works really well just all the names of things are really wrong. So To that end you can actually polyfill a lot of those mistakes away Technically, there's still some memory issues and it might be a bit slower But if all you worried about is just making sure that people you know that your site doesn't blow up on these browsers And you can mostly solve that with things like polyfills and I think in many cases The reason people don't use new features is because they worried about that one or two percent or that five percent Who they think are still very valuable? Well, what if you can say we can still support them the experience won't be quite as good as we you know Give to everyone else, but it won't explode and won't die They won't get a blank page when they load when they load our site in this case And you know these are the sort of the sort of battles you can win with polyfills Especially when you're talking about polyfills back to IE 8. There's certainly the class of polyfill like web animations Which on modern browsers run really runs very fast But certainly for any old features or any old browsers you can mostly solve this with JavaScript and libraries that you drag in as well So when this goes up later, there's some links And that's it. Hey, there's a mic as well if you want to apparently I'm being recorded Oh, sorry, I can read So on browsers that support it. It's great. And of course, that's Chrome and you know I sent I sent up here I'm not setting up to here saying Chrome is the be on end all but obviously, you know I'm wearing my Google shirt and you can make of that what you will So the reason we do shadow DOM is really to hide the internal workings of these elements, right? That's the key of it. Whereas the other approaches have taken a more pragmatic approach and said well We can't solve the same time soon and we want to be faster So we're gonna add all the cruft that represents the inner workings of this to your page There's a few I don't know for how many of you have done computer science as a as a as a background, but there's a few kind of O n squared type operations in the shadow DOM polyfill And we're kind of we almost go back to the place We started with jQuery and things like that for the dollar sign, which was doing some manual traversal and things like that So it's not amazing and I you know, I can Honestly, I can't give you exact figures because it turns on your usage But I would recommend you go look it up and make your own informed decision about whether this is a good idea or not Things like the Google I O website for instance, if you're curious is entirely polymer, right? So you can try loading that in in Chrome versus another browser and see if you feel a difference there Because this is a real-life site that it's entirely built with material design and polymer that people use all the time You know the people will be will be hitting a ton in the next few months trying to get tickets and stuff and Any other questions? Cool. All right. Well, thanks a lot. I'll be around feel free to grab me about Google or anything else you want to talk about