It is my absolute great pleasure to introduce our next speaker, Christian Heilman known to everybody as Code Poet, big round of applause. I have a little bio here. So, Chris Heilman has dedicated a lot of his time to making the web better, as we know. Originally he came from a radio journalism background and he built his first website from scratch around 97 and discovered JavaScript at that time and cursed it. He spent the following years working on lots of large international websites. He spent a few years in Yahoo building products, X Yahoo, and explaining and training people and is now at Mozilla. He wrote and contributed to four books on web development and he's written hundreds of articles and hundreds of blog posts for Ajaxian, Jaxian, Smashing Magazine, Yahoo, Mozilla, Script Junkie and many, many more. He's basically going to give a talk on HTML5 and how it's changing the world and how it makes the world a better place. Christian, all yours, man. Thank you. All right, it's fun to be back in India and I think the last four days everybody asked me why I never come back to India or why it's not so often that you see me over here and the main reason that I talk to people about was that it's quite rather hard to get a visa here because I have to have my passport in England for a whole week normally and I'm never in England for a whole week. So it's rather tricky to get the visa but that's actually partly a lie because it's a more emotional thing. I lived in Mumbai in 2003 and I met this incredible woman back then and we broke up and sadly enough we never saw each other again and she was amazing. She had weird eating habits but I guess you get used to that but I still remember her but she never emailed, she never called it was really, it was as if I didn't exist any longer it's just really really annoying but yeah this is what I looked like, young and long hair still, it's good. But back to what we have here wasn't yesterday absolutely amazing? I mean I was like, I did not know what to expect for JS4 the organizers are great guys and I was like I was expecting us to be in some hotel lobby with 400 people in it and the project that didn't quite work and everybody would be like saying like oh Google said this so we have to do this now, Microsoft said this and everybody here had something great to tell. Everybody had some great demos and it was new materials as well, it was nothing that I heard before and I'm at conferences every week so there's cool new stuff that people talk about here which I don't see much at other conferences because I see people repeating their talks or talking about the same things or instead of giving people information they just show tools for one and a half hours and tell them like if you use this then you're a professional otherwise you're gonna be out of a job tomorrow and here was just like okay this stuff is interesting look at that, look at that and I was originally planning to do a lot of HTML demos like really cool stuff and then I saw yesterday and I don't have to do it anymore you know we saw like 3D sound we saw like Gaddafi starting sending thrones out with Node.js and it was all in all a very exciting experience and it was good to see that these stuff works and I find it interesting that when you've been following HTML5 and JS conferences for a while like I have you end up with the same stuff all the time like oh this works if you turn on this extra thing in the browser and this is a nightly browser that only I have on my computer and you cannot do something with it and it's getting better, that's what I like about it we don't have to have these special build browsers any longer stuff is already in the shipped browsers nowadays in most of them of course so my life is actually explaining HTML5 and I get the same things from everybody I get these same prejudices all the time that like oh yeah it's never gonna work and native is gonna be better and like oh yeah Facebook said it's not gonna work what do we do now so I talk to developers, I talk to designers I talk to journalists, I talk to VC people everybody has a different idea of what HTML5 is about and in my case it's quite interesting because it's these massive extremes I either get the people saying like HTML5 can't do that and we'll never be able to do that you know people that are afraid that there's different browsers out there like oh if only there were one browser that the government gave us and we have to use that one, that would be great that would mean the government can spy on us oh wait, anyways people keep telling me that that's not possible that's not possible, that's not possible because it's not across all browsers and I think we have to stop doing that we have to stop thinking as a web developer and somebody who loves the web to bits I always said you have to support everybody there's no way you can block people out of the internet just around here looking what people are using what kind of horrible devices and you're like okay or the DNS handshake here being more like a DNS walk in the park finding the other house and then doing a handshake we have to think about everybody out there and we cannot say that this is the browser that you have to use, this is the environment that you have to use but that does not mean we have to support everybody the same way like when I talk to a journalist and he says like well this doesn't work in internet explorer so it's not ready yet that's not true, we have if statements we can ask the browser can you do this and if it can do that then we apply it if it doesn't, if it cannot do that and it might not miss it we give it an interface that still works there's nothing wrong with a search box and a button that actually sends something to a server and comes back with a list of results of course it's cooler if it's got a spinning thing and rotating in 3D and unicorns dancing in the background but you don't necessarily need it like I found it here on the hotel when the connection was really bad I cannot use Facebook, I cannot use Google Plus because without a JavaScript fully loading and being fast the interface is not even responsive yet whereas Twitter falls back to a normal input field I can still send things off or it has an API that I can write this thing for myself in a few lines of code and send my things off that way so support means not the same across all devices that's the worst thing to do that's like sending a JPEG on the web and then calling it a website and even that wouldn't be the same because the color differences between browsers and between displays are different so you cannot say it's the same everywhere the other one of course is that people that get very excited and say that HTML5 can do absolutely everything these are the people that send you like 23 Mac websites with 570 resources being loaded that when you scroll do all kind of cool things we reinvent flash a lot we do the same things we did in flash back then we were like these computers are fast we can do something about this let's animate a lot of stuff let's do background music that nobody needs let's do some opacity on top of other things let's make sure we have got everything I love that, that they're selling tattoos, lemonade and dog biscuits that's its entrepreneurship this is the kind of stuff that you go and actually go to vcs with we're going to do that dogbiscuits.com and when I see people getting excited about loading animations you see these like showcases of 600 CSS animations to show a loading animation you've done a mistake when there's a long loading animation if somebody has to wait for a minute for your website you steal their life you're killing them with a little knife continuously I don't want to wait for stuff I want to have it and if it doesn't look perfect I want to go to the front but I can use it that's the most important bit not be like oh please wait 15 minutes we have something cool for you yes you got excited about your designers are excited about it I just wanted to buy a ticket and I don't restaurants are my favorite when you go to restaurant websites you're like what do I want I want to know the menu maybe but I mostly want the telephone number and where the heck the restaurant is will the telephone number have a tell domain so I can click it on my mobile phone most likely not will the address be somewhere about this big in the footer and above I've got a panorama of how great the thing looks or what the food is supposed to look like and then you go there and you eat it and you're like it's not what you're having the website might be England I mean we don't have food so I think there's lots and lots of in between these two about getting overly excited about HTML5 and also saying like it doesn't work because it's a technology will never work 100% everybody who tells you that flash was easy because everybody had flash installed never worked with flash because flash had so many different versions and differences between Mac and Windows and Linux not at all so it was the same problem there and this is a country where all these things are a bit deflexible I mean I saw this the other day in a poster here that you have these scooters being sold maximum occupancy is like two people normally like man and wife but then you see them in the streets and there's like the kid and the other kid and then like another kid in there and a cow and a monkey and basically whatever can fit on these things it's absolutely amazing when you go in the road you're like no and I love it when especially when you have the kid there with like a helmet on that the kid fits into the helmet you know you don't put the strap on their helmet oh yeah that's gonna help you in a full frontal thing that's great I saw guys with hard hats that's another really cool thing like it's like oh look I'm safe yeah from bricks falling on your head but not from cars crashing into you but at least we've done something about it but this flexibility I want you to apply to everything now HTML5 what we call HTML5 has a lot of disappointments a lot of times I want to do something and I cannot do it and there's many reasons for that or but sometimes I just want to use it because I want to use it not because it makes sense or sometimes something is like prefixed in one browser and we're like why does not every browser do that because prefixes are there to try things out prefixes are there to be not there to be trusted if something says WebKit dash at the front of it don't use it just as the only thing let it fall back to something without the WebKit something useful like a background image background gradients was the big thing chrome opera had to move to the new rendering engine because half the mobile web was broken on opera because people said WebKit linear gradient background this and that and then you had like white buttons with white text because it wasn't a WebKit browser like if they had said background green and then background linear gradient it would be a green button it wouldn't hurt anybody would still be a beautiful button it wouldn't have a gradient oh my god that maybe makes it faster as well so make sure that you don't think about just prefixes all the time but it's even getting better when you look at the standards HTML5 has been defined quite some time ago now and it's still not finished but that was another stupid question like when is HTML5 finished and oh in 2022 and you're like you just pulled that out of somewhere and said like oh yeah I've given a date and then the journalist shuts up not understanding that journalist put these things out in headlines but the standards sometimes have interesting bits in them where you're like how what did that come to be now video this is how I embed video in a page everybody's like oh yeah HTML5 video isn't ready yet because there's like these browsers that are special and different from others like Isaac's and we got to do something about that so normally people say like okay here's HTML5 and then we fall back to flash or we fall back to silver light not so much we fall back to flash and I think it's not needed it's really not that necessary anymore because you just encode the thing and have flash in there and all kind of things it shouldn't be up to use the developer to do these kind of things so right now you have a video with controls that gives you the controls a poster which is a preview of the video in case it doesn't load fast enough and then you have the sources you got your mp4 which should still be the first because the first iPhones had a problem if that wasn't the first then you have your webm for all the other browsers and we have okvideo if you really want to go to old browsers and still support them browsers that already support the video tag and then I just fall back to an image and say like here's an image of a bunny and it links to the mp4 click to watch the video like why should that not be why should I have to simulate another player if the user could click on it and watch it in vlc or mplayer or whatever they use on their computer to watch videos with of course providers will be like oh they could download my video you can download the video anyways stop being so defensive about that so but the problem is if you don't do that what happens then like mp4 is not supported in all browsers cause it's a proprietary file format it's not an open file format so in firefox we cannot put an mp4 decoder into the browser because it's not free software we would be pirates if we did that yeah it would be cool but it would be also illegal so we can't do this unless mp4 becomes completely open that's why we do webm huh ok so the logical person in me says like ok this is a video element if the thing cannot be played it should fall back to this right because something went wrong if I have an image in the page that cannot be loaded the alternative text is being displayed which is the same fallback mechanism not so much this is what you get in firefox and this is not a good experience somehow like especially that like no video supported format that mime type found and other people would look at that like what's a mime type is that like a clown or is it like like one of those guys that goes like like I have no idea what you're talking about here so the fallback is only for browsers that don't support the video element at all which is a dwindling mass of like small browsers and things that should have died years ago and I find that hard to believe that we have to know how do I do a fallback then how do I make sure that I know the browser played the thing of course as a javascript developer there's probably an event handler take a look at it ok document query select the video get the first video in the page add event listener error tell me where it hurts tell me what's wrong please tell me what the error is that should work right every time on error on windows tells me whatever something happens no silence nothing coming in and you're like ok what do I do and what do you do when something like that fails you tried everything in your arsenal maybe reading the specifications is a good idea that's always the last option right we're like let's make it work on all browsers and then see how w3c thought about doing it and this is how you have to do it so you select the video you select the source elements that are in the video you get the last source element and you apply an event listener to that one and when an event an error event is fired on the last source element then the video cannot be played this is defined in the specifications and you're like if all fails why don't you fire an error handler on the video itself what other error handler could ever be on the video element rather than like I'm not supportive but then it wouldn't fire an error handler either so these things we have to jump through from time to time in the standard implementation are interesting and you know what I think it's because we don't give feedback enough because we let these things happen and say oh these are clever people Microsoft from Google and Mozilla I'm not clever enough so I'm not going to do this but this is not useful I had to hack this and people are like oh my god you found out how to do that this is not how a standard should work we should find out how to do it we should have it in the specs somehow how about the operating system is the other thing that lets html5 down because we have not support for everything the best browser when it comes to html5test.com right now anybody guess yes to a degree but maxed on because it switches from rendering engine to rendering engine one engine browser blackberry blackberry browser how excited are you about blackberry but what they do with html5 is awesome really good work so I'm trying to hire a few of those guys I'm working with them so operating systems what is the biggest problem about operating systems stock browsers this is exactly what we had with internet explorer 6 and we all love that one to bits the problem with internet explorer 6 is not that it was a bad browser it was an awesome browser when it came out a problem was that it was hardwired to the operating system so if you wanted to have an upgrade for the browser you have to upgrade the operating system if the operating system can't come out for 6 years is too expensive to update or doesn't give you anything useful that you want to update with we're stuck with an old browser till the end of time and the amount of people the amount of effort we put into ie6 and things like that is really not worth our time at times times at times whatever but this problem prevails because if I look at right now at things like validation for example validation is awesome like the amount of javascript validation libraries out there is stunning they're also all pretty useless because if you only validate in javascript I have a command line I have curl I can so hack your server like don't trust javascript that's the only way of validating so why do we spend so much time in writing validation things in javascript because browsers don't do it for us unless you have an html5 browser and you put just a required attribute on the thing and when you send this off now without entering anything in it you just get please fill out this field this is beautiful it's styleable you can change that text that text is actually localized to the operating system if I had a german setting on that one it would be the other message there and users could get used to that you know like when I do something wrong this is what it looks like if I do something wrong there's a rotating elephant and like blinking signs or depending on other people a small button on the bottom error handling should not be a surprise for people it should be something that will be like ah it's that again then we have a problem to actually make secure systems out there and not just style them beautifully and this works this is wonderful I just put a required on there I don't need to actually write a javascript validation I need to write my server validation because that's the most important bit in the javascript bit and the browser would not send off that form I also get the red outline here telling us that something went wrong I can style this outline as well so I've got a pseudo selector in CSS for that great except IE 8 or 9 not supporting it well that's no surprise but iOS Android, Opera Mini and BlackBerry until 7 and how cool would it be not to have to do client side validation on a mobile device this is where I really want that not on the desktop nobody supports it and you have the problem with like with like 2.1, 2.3, 3.0 and stuff I heard yesterday a lot of people asking me what I do with about 2.3 and I'm like you just cut your hair and stuff like everybody else because that Chrome the browser that Google loves to bits and I love to bits as well is not available to older androids and you have to buy a new androids just pisses me off sorry about that but it does because I should not have to buy a new phone to get a better browser this is 1980s thinking we should be better than that and both Firefox and Opera are available until back until Froyo on Android problem is like we can optimize any way we want to but the end users out there 99.73% of the users out there will use the browser that it comes with this thing is called internet and has a blue world button that's probably the internet I'm not going to install any other browser because that's too much work so we're stuck with these terrible things because we keep making the same mistake of hardwiring the browser to the operating system and unless we break that we will never have a chance as web developers to get the coolest news for all our end users out there unless everybody jumps to your new operating system and gets rid of the old one I don't see that with Windows 8 I don't see that with iOS 7 right now I just hope that people get tired of this as well of being told what they have to do auto complete, another one input list browsers data list id browsers with all the lists in there this has been done to be backwards compatible so on a browser that doesn't support any of the data list stuff doesn't matter it's still an input element but you have to send them to your server or you have to check in javascript and say like well it's not one of those so it can't be actually what you wanted but if I start typing here right now and I just go in and say like an O for example it gives me internet explorer firefire internet explorer firefox chrome everything that has an O in it or I say I start with F it gives me only firefox and safari so you can pre-fill input fields cool this is what we wanted as well so we don't need to use that jQuery auto complete widget or YUI auto complete widget because it comes already in the browser it's done for us again none of the stock browsers i.e. mobile doesn't have it safari never cared about it i.e. doesn't have it either these things should be green I'm sorry this has been standard definition this has been in the html5 standard from the very beginning instead we come up with new things all the time we are prefixed and say like our browser does this now and the others don't so the basic support for things are missing so we're all doomed that's it there's no way actually we can be web developers because all the browsers are terrible and html5 has a lot of problems as well so sad beat sorry that was it actually not we're just a bit short-sighted if it's not supported it will be supported if it's supported in others and gives us a lot of benefits there it should not stop us from doing it nothing will ever be supported across all browsers cause there's different things about why you would do an operating system I mean the web is a great thing for us but for somebody who wants to make money by selling native applications making the web be really really good on the device is probably shooting yourself in the foot a bit which I mean it's a business model that can't scale either I see marketplaces going away in the next five years because they're going to collapse on themselves much like download.com e-commerce big platforms msn.com or Microsoft as the number one thing to go on the web collapse on itself yahoo is not your starting point for everything anymore they have realized that there's other services out there that are using as well people want choice people don't want to have one thing that gives them everything but what do I mean about how we're short-sighted about this we try to fix everything with javascript cause we're intelligent and we know how to fix things with javascript instead of going to the mailing lists and filing bugs for browsers we write yet another library to make it all work fine just use my library that does two things different from the other library that you used last week we spent so much time learning about abstraction layers rather than just trying to get the platform fixed and that's why things like simple implementations of like autocomplete and stuff fall through the cracks cause browser makers don't realize that people use them I talk to engineers in firefox and when I say for example why don't we have slider well we looked around nobody uses it this is our fault this is our web developer fault if we don't use this new stuff browsers don't have browser makers builders on the browser the engineers that are busy with lots and lots of bug fixing don't see it as a high priority to do it it's like it's a chicken and egg problem if we don't use the stuff that's not going to get implemented and it's a very simple thing to say like oh web developers don't do that stuff so we have different priorities to do other things so please use things instead now here's a great example from yesterday day before yesterday I gave a workshop and one of the one of the people in there Abhinav Abhinav here tweeted me and said like I had this problem and as he's a great guy he tweets with a js fiddle so I can see the problem and I can test it myself and not like I have this problem fix it for me what is your setup fix it for me how does it not work oh it's not working firefox is shit that's the kind of feedback that I get a lot but if you want me to fix things send me the thing that where it hurts now this was the problem he wanted to have a newly generated element to fade in easily like evil people just use jQuery and say fade in with that cause it means the browser has to do it in javascript and it's getting very slow and the battery is dead and you just basically your kick kittens instead he used css like css is there to do these things nowadays for us doesn't do anything in ie6 doesn't draw an error in ie6 fine use it problem is he created a new element appended it to the body set its opacity to 0 and set its opacity to 1 and that should do it right the css has a transition on it so that means everything that is changed in this element will transition smoothly in within 2 seconds to the other state problem is this jumped from 0 to 1 everywhere like basically except for chrome chrome did it nicely I think no didn't but anyways it was just from 0 to 1 it was just black and there and there was no fading and what do we do so then we look into how browsers work then we look into how things are being rendered in browsers and we find solutions so what are the solutions is get computed style element opacity reading out the computed style which forces a layout so that one actually tells the browser like do something hey did you do it and then like do the other one that works in chrome and firefox get the element client hide so reading anything from the css means the browser says like okay this is it and then it applies the next one forcing the browser to do something in between with the thing to make it work or a set timeout with 0 which is the biggest hack ever which is like an eval if you think about it because it's just like wait 0 seconds and then do this so that works some of them in others some of them not so what they did in the live page was using jQuery hide show immediately next to each other this is not what this feels wrong okay what do we do about this I put it on twitter and one of the results was like okay set timeout is bad and it is we need to use request animation frame so here is the javascript solution to make this thing work this now works in all the browsers right now because it actually reads out all the different support for request animation frame it generates a new next animation frame where it waits for the next rendering of the browser and does these kind of things and I was like okay this thing should work according to the specs it shouldn't work but what was the problem here the problem is that we do a CSS animation a transition but we change the content in javascript so we set a style element in javascript which is a completely different rendering than from what CSS is doing CSS is doing it first and then javascript later so we change things in javascript and then we wonder why CSS doesn't know about it because CSS is already I'm done I don't want to have anything to do with that document anymore that's why you have to do the set timeout of zero so I said okay what do I do with it I don't do anything in javascript with the style collection stop doing that it's a last resort if you want to do something beautiful to some element put a freaking class on it and let CSS deal with it so I said okay create element div append it to the body set a class name on fade on it and then I looked what can I do in CSS to make that work and it was not a transition it's actually an animation so div opacity zero animation fade 5s and then you basically do a key frames of fade from opacity zero to opacity one this is how it works across all the browsers and it's hardware accelerated because it's only in CSS and it happens before you render the rest of the page so stay on target don't cross the streams because we can do everything in javascript does not mean we should do everything in javascript CSS is there to do the transition so CSS should probably also be the one that changes the opacity and not javascript change the opacity and wondering why CSS not mine so make it in one technology and let the technologies talk to each other worry a lot when someone says use a 10 millisecond delay then everything works that's like this painting over cracks in your ceiling and wondering why the wind goes still through so when something says like oh just a time out we'll do it like this is how we fixed Internet Explorer 6 and this is why we still have it we fixed too many problems that people think we shouldn't have to get rid of it stay flexible transition not working maybe an animation is the right thing to do play with the different technologies learn what things do understand that a transition is a different thing from an animation a transition transitions from unknown to unknown an animation you define what you want to animate so in this case we only want the opacity fine great so we do it in an animation piling a fix on top of a hack on top of a polyfill really kills kids that's what the long code was about like oh request animation frame is not supported in Internet Explorer 6 so we have to do something about request animation frame CSS animations and transitions are not supported there so why do you even bother with that but we just add and add and add and say like this is better now than having it just working think about use cases of things that you might not have thought about before we saw yesterday the motion sensing in camera into canvas and like detecting the pixels of the hands I've seen that six years ago in flash much slower fun enough but we have these kind of things now one thing I always wanted to have on the web and I never had was irregular rollovers so this is an image with like transparency and non transparency so if I go on the image it's linked and it actually has a hover effect if I'm not on the on the pixels of the image I'm not cool isn't it that's a pinchy and in the past what you do you you go into Photoshop and you paint an image map around every single element and then when your image change you had to paint that again and you're like not fun image maps were not fun at all so how do you do this first we start with events get a rollover image and start using a mouse over copy image on mouse over hover on mouse move and reset image on mouse out this is how you do event handler stop that whole jQuery on click blah blah blah this works everywhere this doesn't work in internet explorer and it means like oh it's not for you good do an just do as your first test if a window add event listener and if not don't give JavaScript to that thing it's very simple to do copy image takes the image which is the target of the event sets the I created a canvas element up front sorry that's missing here so I created a canvas element store it in C and I set the width of the canvas to the offset width of the image the height of the canvas to the offset height of the image and then I put the image inside the canvas with the height and width I don't even have that canvas in the page it's just in memory because it doesn't have to paint it it's not intercepting with the browser and then I just say the image offset left and the image offset top is in OX and OY this means so I detect if the mouse is actually in the image rather than like trying to detect the mouse where the image isn't on hover I get the client X and client Y minus the OX and Y to find out where my mouse position is and then I get the pixel color in proper English spelling of course the image data of the image and that is just reading one pixel that's not looping through the whole array that's not necessary you can actually in image data you can say just one pixel by one pixel starting at X and Y if the third intro in the pixel color array is 0 it means it's transparent then add a class of hover to the image element otherwise remove a class of hover from the image element that's like RGB and opacity on each of the pixels so all I needed to do was read out the third one which is the fourth one in human terms and I have this thing in there on reset image I just get it out there and I remove the class over again and that is all I need to do to actually have this effect and as I put it together in a little JavaScript irregular shape rollers that works with images that have so these are PNGs and this is a GIF for example and this one is actually even linked so when you click here nothing happens when you click on the pixels then it actually goes to the page that is linked was that possible? never thought of canvas that way canvas to me is a toy to play with pixels other people use canvas to paint things and it's good for that as well but having pixel access to an image is awesome so what is this? another little demo that I've done in a workshop actually is this pixel zoom and pick thing so what that allows me to do is take an image for example image pocket here and drag it into the browser so this is drag and drop API with file reader API works across browsers and now I've got the image in my browser here and when I now move my mouse around I can see the colors up here and I can start collecting colors and once I'm happy with the colors once I'm happy with my colors I can just say get code and it generates the CSS for me from the colors that I collected no server involved no framework involved the whole thing is a few lines of javascript because I use that trick of reading out the pixel array and just create things also uses local storage so when I reload the thing I can see the direction of most beautiful colors that I have from different images sometimes really good if you get a logo from a client and you have to get the images out there you don't have to start Photoshop we can do this in the browser nowadays it's time to step up it's time to think more about what can you do as a developer to make HTML5 better and this is not only to help me this is to help all of us I think it's time to stop complaining like oh why isn't HTML5 working using it in a secure manner doing if statement around it nobody is going to get hurt that's all fine we need to improve this is me being unhappy with mobile development we need to use the HTML features especially start reading on them don't just go for the like this is the coolest HTML5 interactive music video on a ball with like 3D sound and these kind of things start looking at what HTML5doctor.com has written start looking at like HTML5 rocks the old things go to the HTML5 landing page on mdn and find out how this stuff works it's not hard to do but it's actually much more exciting than looking at a demo that looks really slow on your computer and you can't do anything with and you go back to your job and you're frustrated like finding something like a data list or finding something like a required attribute you can use that in your job right now it makes much more sense than actually dreaming of being able to work for Google and then be allowed to do these cool things that Chrome has just in the latest beta be open to people who want to do good and we always talk about Microsoft we always talk about Mozilla and Google when it comes to HTML5 but Microsoft does amazingly good work they gave us the Frankenstein hybrid of a touch interface with a keyboard and a mouse and we're like okay how the hell are we going to do that as a javascript developer like was this a touch, was this a keyboard was this a and then they gave us the pointer proposal that says like okay something happened you do an event listener on it and then it tells you if it was a touch if it was a keyboard if it was a mouse click so they solve their own problems and actually make them standards when it comes to the W3C work in HTML5 I think Microsoft are the ones that give the most in because they have to because all their clients are like these very evil or not evil very traditional government companies very enterprise level agencies that wouldn't do anything that's a standard they want a standard and this is what the W3C is about so it makes no sense to listen to them what they're doing as well Adobe the people who gave us flash and obviously kill kittens if they gave us flash they actually do a lot of great HTML5 work now there's great performance talks by the HTML5 team and a lot of flash developers have a lot of knowledge that we need right now we're reinventing a lot what flash has been doing years and years ago in HTML5 right now and we're having the same mistakes we're having the same problems but nobody talks about these flash guys we're just like I use flash nobody needs you anymore instead of like hey how did you solve that in flash and do you want to take a look at me most of the time they're like oh my god that API looks awful compared to flash but we're like yeah that's what we have so deal with it but let's help us get this thing better and find out the problems like all the off-screen canvas tricks and stuff we've done that in flash before as well all the rendering issues all the syncing of audio and video that has been done in flash as well we just have to talk to people brackets of Adobe is an online editor an HTML editor written in HTML and it's an open source project by Adobe it's a great open source project by Adobe because they actually do things like triaging bugs if there's new bugs that come in that actually are very simple to fix instead of fixing them they tag them as beginner bug so if you want to be part of brackets you go to the repository you look at beginner bug and you fix one of those and learn about the project while you're fixing that one simple bug rather than just looking at a project and being overwhelmed and not becoming a contributor so they're doing a really good job in getting new people in blackberry I said has the blackberry browser and they know everything about every other browser as well that was really interesting to talk to blackberry guys at the center conference and Samsung is bringing out Tyson and great another another open HTML5 platform shame the workshop is happening afterwards and I'm speaking in a Samsung conference because I just on twitter like hey you got a conference do you talk about HTML5 and they're like yeah you want to come okay and then like I thought they put me in a side room and stuff but they're like yeah our CEO doesn't want to do the HTML5 talk so you do that now I don't work for you but that's okay that's why I like working for Mozilla, I can do that at Yahoo I couldn't have talked at the Google conference or something that would be nice demand more basic support for HTML5 standards yes this is hurting because Firefox does not have input type range but everybody filing a bug about this or commenting on the bug then maybe I can go to our engineers and say like let's fix it now we need more complaints about basic missing features of HTML5 in every browser especially in the iOS and in the Android browsers as well offline first the first question I get from every journalist is like yeah HTML5 will not work because you always have to be online Pollocks you have AppCache, you have IndexedDB you have all kind of cool offline storage stuff going you can make your application work offline fine in HTML5 it didn't work in the first iOS that's why everybody tried it out once and said like it's not on a cool shiny thing oh that's broken no they catch up as well they listen to us from time to time, not often but they do so there's no fixed resolution nobody switches their browser for you this only works in Chrome everybody will have Chrome in a year's time no this is a 1024 pixels wide awesome I can do that Ipad 2 Ipad mini, both 1024 resolution Ipad mini has 2 inches less on the screen can you detect if it's an Ipad 2 or an Ipad mini no you can't so all your 1024 resolution layouts that you've done for Ipad completely break on the Ipad mini and you ask Apple if you can do something about it no so don't fix for any size and if you do a responsive design which you should don't do like 800 pixels do 820 pixels give a bit of leeway people have fat fingers people resize their browsers differently than you think they do so what's coming in the future what's the future of the internet and it's probably kittens in 3D because kittens already are great on the internet and people love these kind of things one thing that I think is very important is that we start having semantic HTML and hardware access hardware access is something that we define with the web APIs in Chrome packaged apps there's a lot of stuff happening there's a battery meter in that line of code a meter element which again is not supported in IOS document queries like the meter navigate a battery level change show value is the battery of the level now it's fully charged earlier it was like a gray thing here and the green thing there I can build interfaces we needed this in Mozilla to start with Firefox OS you cannot build an operating system without having this kind of information to access to the hardware and instead of just saying ok this is Firefox OS now we made it a specification for the W3C and it's part of the W3C specification now and now every other browser can implement that as well a few already are working on it a few already did it and this is the cool stuff that we're going to have in the future sensors that's an interesting one we saw that yesterday that you access the camera and the problem is with all the webRTC stuff because the camera is running it's basically becoming very very heavy it's like my computer is burning up and use a lot of battery and my camera is on all the time and I'm not closed it's not fun so this is the battery the device light sensor that actually gets the light around the computer so you can see now here if I put my hand on this it goes down to zero if I put my hand away it goes down to up to 25 and stuff if I shine a light into it um what do I do this if I shine a light into it it goes up to like the 5000, 7000 and stuff this is cool as a developer I want random numbers coming from stuff I can do great visualizations and all kind of things with that and you know what, the camera is not on the camera is not recording me this is already happening because I have the backlit keyboard on macbooks this is exactly using the same sensor as that this is exactly using the same sensor while you kindle or your google map switches from black to white to white on black this stuff is happening already and I got access to that I haven't done it yet but you can make a gesture animation a gesture detection with that just by seeing the difference in color the difference in light if I go closer to the sensor it gets darker and if I say if the difference is like 100, 150 I know probably what the distance is going to be so it's not going to be like a connect it's not going to be like a leap motion it's not going to be like webRTC but you actually have already a sensor that you can play with and that's pretty sweet it also means that like your fan will not go off I always said we already have a web API that accesses the fan you just start with webGL and the fan will start as well but web components that's the big one that's the big one that we need right now the browser is busy painting things 60 times a second 60 FPS frames per second which is not 60 times but it's frames per second and that's cool, looks smooth, we like it it's wonderful then we start putting widgets in there in JavaScript and we use setTimeOut where you say every 200 milliseconds do this and the browser is basically painting and we go in like there's a horn here in the street like which happens all the time as well and the browser then like I don't want to do that give me more battery, give me more memory give me kind of things we work against the browser and with web components and Shadow DOM and all these other standards that are out there we will have a chance to actually become part of these 60 frames per second instead of having a widget that works against that and hopes that it signs that it that it syncs up with it we become part of the rendering flow in the browsers and we just don't know it if you look at Chrome and you look at the debugging tools and that's coming in Firefox as well this is a video of Firefox OS here and the video is basically in Flash this was a black box, I had no idea what that thing is I basically just had a video in newer browsers now I can rotate that, I can change the opacity it's like any other HTML element but what is this here what are these play buttons control buttons here and stuff is that Flash, is that Java is that whatever no, it's HTML, CSS and JavaScript the only thing is you don't see it in the browser unless you turn it on in your inspector so in the inspector here I actually when I do when I go to the video here I have turned on the Shadow DOM so this one has a document fragment in here which is not that easy to read this one has a document fragment in here that thing is in here again and then it has a diff and the diff has a display num here and another diff has this WebKit transition on it and there's an input type button and you see I'm debugging down here nothing in the browser like input elements like video elements like upload buttons these kind of things are magical codes they're HTML, CSS and JavaScript they're just part of the browser that's why becoming part of the Chrome team and becoming part of the Firefox team doesn't mean you have to be a C++ developer you can be a web developer because lots of it is written in JavaScript by now and the Shadow DOM allows me to access that and see that so with web components and Shadow DOM I can build new tags that render with the browser rather than like having a document and then putting things inside it and that one means that it's part of the normal rendering flow but there's lots of stuff happening there there's a lot of Google projects one thing we have in Mozilla is called Mozilla Brick and we actually built this because we need it for Firefox OS again I have it open here but I don't have it open here so I click this one now on GitHub like everything else there's nothing hidden so we show how bad our code is so you can help us fix it and this is what it looks like to have a flip box that does this you can switch X flip box with either a flipped or no flipped element and two divs with the front face and the back face you then have access to it with event listeners and in the event listeners you just do a flip box toggle and you're there this is how easy it will become to build your own widgets and the other thing of course with that one is this can be styled independent of the rest of the document CSS had that issue that it was like atomic font color if you want to put your widget inside my page overwrite everything otherwise it will actually look in Comic Sans Serif rather than the one that you wanted to define and as these things are inside a document fragment they're actually not inheriting the style from the main page they can have their own style they also don't inherit the events and these kind of things so you don't have these race conditions you have with click handlers nowadays and there's all kind of stuff in Brick already you can download it now you can build your interfaces with it for example a date picker which is kind of interesting because there's a date picker in HTML5 which we don't support actually hardly anybody supports but this one now is a date picker here that allows you to put a calendar in there and always the markup is x date picker and you set properties the value, the submit value and polyfill in case you want to polyfill means if the browser already generates that date picker for you and you have like you can submit questions and all kind of stuff in there it's a new way of thinking about building web components building websites and web apps with markup that is reusable and that's what everybody wants everybody on iOS that is an iOS or Android developer comes up to me and says where's your SDK we don't have any it's the web use whatever you want we have building blocks that we can pick and mix yes we do now with the brick stuff we have an opportunity of doing that we don't want to force a look and feel onto you but I think it's a new way of thinking about and Google is totally on board with that does a lot of stuff with it I don't know Microsoft has done anything with it but Shadow DOM and web components to me is what we really really need because I'm tired of having to fight the browser and as a JavaScript developer know how browsers render and how they fail like the whole thing about having an interface that tells me when there's a reflow in the browser and debugging it this is clever but I should not have to know this this is stopping me from being an effective programmer I know how Internet Explorer 5 fails at rendering different drop-down boxes do I need this knowledge any longer no but I had to learn it back then and back then I had to get a drop that way now let's go really wild who knows about Mozilla WebMaker WebMaker is a way to actually get people onto making the web we teach people HTML we teach people how to build their first website we teach people that you can do a command you and you see the source code of a page which is not the matrix it's just HTML don't be scared of it and we allow people to start playing with the web and then we realize of course there's apps out there so how about we do something for that as well and this is what Flat Hat or the App Maker is right now so this is a very very beta which is every time I reload it so I'm not quite sure because I don't control that server it's a colleague of mine in Canada this is what it looks like so you say let's start with this one and it gives me an interface and it starts loading the components and it actually loads long and it's actually slow which is not good but fair enough and instead of just giving you an interface it actually becomes a gaming thing like hey how about you start building your first app how about you enough to do that add a button to your app is the first mission okay I've got a button here I drag the button in there I've got a button in my app level 1 done cat random put that one in the page and actually put that one on your page so you say like okay where's cat random and these are all web components these are not DOM elements these are all already rendering in the shadow DOM for you put that one in there and completed level 2 the random cat gives you a different cat every single time you actually press a button how about a rating give a 1 star rating so I find the rating thing here put that on there and then it loads it slowly but steadily I click on the 1 star rating okay you got this now and now start your mission shoot a firework so what you do is you have a firework controller here which I still don't know why they did that but that is basically beautiful for people to see I've got a firework controller here and that does nothing but it has a shoot rocket like how do I do the shoot rocket now I need a button for that so I actually put a button in there and when I start pressing the button I shoot a rocket and now hey now you can start building your application and this is how easy it is to do these things I can put for example a metronome now in here which is nothing else but like a game thing so that one now shoots rockets every second and I can change the setting of that metronome and or they change the interface for that so there you go I can customize that to 0.2 and then instead of every second I shoot lots and lots of rockets and of course this is pretty pointless so let's do something else drop this on the bin unless it doesn't work anymore okay let's start a new app it works, it's a alpha right now but you have things like for example a shutter which allows me to actually take a picture and then I have an image preview which I put on top of that an image vignette for example as well and I connect those two and if I now click that button I got access to the camera I can take a picture of myself I can use this picture but it's broken but it's working right but you don't need to look up on webRTC you don't need to learn this kind of things you can build this application and if the application is now you can for example have a list as well let's do something simpler a list and an input and if I now say a move and I submit this one it accesses it to the list but it didn't give enough space hey betas awesome but once you're happy with your app all you have to do is basically say publish it published the apps on the internet and I click that too early and I got a URL and in this URL now this is my application that actually runs doesn't have much in it right now but it's installable so I can take this now for example and put it on a Firefox device Firefox OS device simulator I've got Firefox OS running on my computer now yay interesting probably I should install it like six times in a row or something put it in there put it on the web put the URL in there that I just had click the install button once it loaded install it on my operating system go back to my computer and the app that I just built in the browser is available on Firefox OS once it loaded and does something and that's how easy it should be to publish apps and this is what I want this is what we need we can be so excited about our libraries we can be so excited of going to the command line and start a drone and things like that but end users out there are also developers out there and there are many developers out there that don't want to write by hand so having an app like that having a tool like that to me is the future because we have to get this thing easier iOS and Android is not hard to build an app HTML5 is too hard to write an app right now so think about building tools think about building components the whole idea of web components is that these things become reusable I can actually take the button that is in the browser right now and inherit everything from it and then create my super button instead of having to start from scratch again everything becomes OO in the browser that it is not right now of course it will take time like installing windows 8 from floppy disk but we have a movement some things happening things are starting to roll things are starting to get together and I hope that today I managed to get you a bit excited about thinking about what we have looking back into the documentation and finding out about things that you might have forgotten about and thought are just not possible because the just not possible from half a year ago is now very very possible and it is coming out every six weeks this is what you should be thinking about and that is all I had for now so thank you very much we have plenty of questions anyone? back there do you think there is a a lot of sync between the T39 and the ESX community with the W3C and say for example web components when web components come out even though the browser comes six weeks or once new version it doesn't really realize a web component so there is some project like polymer coming up or web break there are so many polyfiles and shims floating around so do you think what is stopping the browser vendors to implement and do you think there must be something between the T39 and the ESX community with the STML5 groups because they do something and it is out of sync and they then catch up and this phrase is happening from a big problem that we define things in standard bodies and browsers move faster than that then developers build shims and polyfiles to make that thing work for everybody as well and then people say why don't browsers have that and why isn't it standardized standards are more than making something work it is really hard to make a standard really bulletproof a lot of standards were rushed in the past that is why we had security problems in web sockets that is why things like interactive intents came out in chrome and vanished again in chrome and everybody relying on it is like no chance to do anything right now so the implementation phase of what browsers are doing is very very important the shimming and polyfilling phase is something that I think we are getting too excited about we are thinking we are super clever to make it work in all the browsers right now and then we even don't look at making the standard work anymore standards take time and especially committees are a big issue because a lot of people have different things to put in but it's up to us as developers as well to go to these committees and say like we need this stuff now make it optimized let's stop getting too excited about one browser does it this way another browser does it that way we want to do this right now and I think polyfills the definition of a polyfill when Remy Sharp defined that term and it's basically something to just cover cracks in the wall in England that is polyfill this is not stuff you should rely on to fix things quickly and a polyfill on shim should vanish over time but we rely in on that I mean jQuery is something that made it easier to access the DOM and now everybody relies on it PhoneGap was defined to be redundant Brian LaRue is very open about this saying like PhoneGap should not exist we just wanted to cover the access to the hardware with web APIs and things that we defined right now until that's possible we need PhoneGap so the standard bodies are a mess I gave up on being part of that because I don't have enough time because I don't sit in an office I'm traveling the whole time but there will be harmony we had harmony in JavaScript as well it will happen it just needs to be the fanboying about like Chrome has it already why is it not in every other browser is holding us back and the same with Firefox the same with everybody else and the specification has to be bullet proof before it's something else the same with like people saying CSS like SAS because SAS doesn't have a specification SAS has an implementation a documentation how to use it but how it actually does what it does it's never defined and that's something that is very very tricky and especially when you when you don't mix the implementation and the standards body thing then you have design by committee in the standards bodies then sooner or later somebody says this is the way it is even if nobody uses it and that's how we get things like XHTML and WML that nobody needed so as they keep saying a camel is a horse defined by committee like put this in put that in put that in so there will be harmony but I think the most important thing is that we actually as developers as professional developers we should push for standardization and not say like it works in one browser cool why doesn't the other browser do it you guys are falling behind you cannot rely on a browser they will go Google might go bankrupt not that likely but it might then it might go away and then all the implementations are not there any longer it needs to work across browsers and the standards define how it works across browsers hope that answered some things I have a question so HTML and CSS and stuff they basically started off as a document format and now it's becoming this application engine with brick and web components and all that except the thing about the internet unlike for example iOS there is actually some value in letting go some of the decisions that were made years ago so that you get much cleaner code and all that Apple is kind of good at that and it actually drives innovation but we are stuck with like what like changing the scrolling without telling people don't even start me on that let's not go there but there is some value I mean we have to use a ugly margin hack to center stuff in with CSS and all that and that seems like that is never going to go away we have Flexbox and all and coming and all that I just want you to comment on that because that's how the web is different right like the decisions that were taken 20-30 years ago we are living with right now there is still super decisions though there is still incredibly decisions and there is nothing wrong about something saying that everybody should be part of it the myths that innovation comes by breaking other things can happen but it doesn't have to be the right way I mean look at the blackberry interface this is incredibly innovative but I couldn't use the thing for the first half hour until I read the documentation how to use it so the document model of the web is a terrible thing for application development that's why we have to come up with something like web components and before that we used Flex we used Java, Applets we used all kind of evil things to break out of that document model but for example when people get very excited about javascript applications one page applications links are not evil they are a totally cool thing like a link that I can send to a friend in an email is the best way to actually promote your application rather than like having just like oh you go to the marketplace you type that into the search box you find my application and you start installing it so the what made the web what it is are totally fine some of the decisions about documents and how to access the documents they have to go away and they get better I mean that's why we have query selector instead of just document get element by ID and get element by tag name that's why we have things like CSS animations and transitions now because it was just not part of javascript and we still didn't in javascript so we moved it into the into the layer that actually does the look and feel rather than the behavior I think you cannot the backwards compatibility feels like a crux to a lot of people that come from application development and other platforms but it's also what made the web the web it made it as easy as possible to actually publish things everybody can become a maker and I mean when I showed my workshop two days ago the a lot of people still don't know that you have CSS 3 stuff there you go you have now things like flexbox which fixes a lot of these issues my favorite about CSS and layout when you said like margin hacks and stuff is that you go to stack overflow you have a CSS problem and a java guy answers you no not happening please don't do that and don't tell people layout tables work because they don't but flexbox for example allows you to do proper layouting in the page this is still prefixed in different browsers differently but we're getting there so this one for examples has this one two three these are just different elements without any with a margin padding and border so making these 100% is already a problem because you have to give them all 33% or 33.3% you have to get the margins off or you get the borders off and you have to start calculating you can calculate in CSS now with calc that's possible but Internet Explorer was always the pain that it's just not fun and nowadays I can actually say like if I don't want to have them at the end and the start but I want to have them at the end I can move them to the end if I want to have them to the center I can actually move them to the center I can actually move them vertically as well so I can say start or end or if I don't give it anything then all of them get stretched to the height of the element similar height columns look at that we finally have it like that was the biggest problem always then you can say for example you have the problem that all of them are now not filling up the space but if you take that one out right now oh wait if you take that one out right now they all fill up the space immediately and I don't have to do any of the calculations of the borders and the paddings and the margins that's the kind of stuff we have already we just have to use it and give feedback how it breaks now this is not disco enough like if the second one needs to be bigger than the others how about I just give it that and it calculates the rest of the space around it for me I don't have to do that in JavaScript or in CSS myself how about order this is one two three in the source order but if I need the two at the end of it do I have to go back to my HTML and change the order in the HTML no this is not 997 any longer I can actually move that to three here and it moves it to the end of it I can move it to zero and it moves it to the front of it so we got all these things in the making and that's just this is more or less right now a specification thing so this is where this is happening but we need this we so need this and we don't get it if people say like okay because we don't have that in the in the document thing the web is broken as it is we have to replace it I don't think that the document structure of the web is going away anytime soon and I think applications and package applications are super important but in the end somewhere somehow people will go and want to see a website to find your application so we cannot break that backwards compatibility of the web thank you any more questions guys hi today if you see the websites are converting into the web apps and as you said about the HTML document model now if you see the web apps the browser back button is always a problem for the developers so no matter how there are various things to achieve the back button problem but don't you feel that there shouldn't be API to disable that back button because that is a problematic to a developer who is developing a single page not a website that problem has been there since flash we have the history API we have ways to actually stop a back button from working in terms of UX if you think about that about the interface to get rid of them applications can be full screen there's a lot of people think HTML5 applications are applications that run inside a browser no HTML5 applications can be packaged up to have the full screen and that's what an application should have we should have access to that it was interesting yesterday that Microsoft showed the full screen API because that one has been in many browsers already for quite a while so for example this slide deck here which is written in HTML5 as well has a go full screen button and out of a sudden I don't have anything else any longer you even have things like the for 3D gaming you have a pointer lock API that when you have a 3D game having a cursor would be absolutely awful because you turn the 3D and then you get to the end of the screen and you can't turn it anymore much like when people start using the mouse for the first time and they end up at the end of the mouse mat and they're like what do I do now and with the pointer API you just rotate the 3D space with your mouse rather than like having a pointer in there anymore so these things are there I think when you talk about HTML5 applications we have to start thinking about that these are not in the browser these can be packaged these can be full screen in a browser they can be used with PhoneGap and things like that to use them on iOS to use them on Android as well the browser is there to get you to an application but the application can take over the browser later on if you wanted to as well it's a security things that's why we have this like oh do you really want to go full screen which I think is important because otherwise I can make something look like your interface of your bank or like windows and ask you for your passwords and stuff but the neutering the browser and taking things off the browser functionality is to me not sensible when we have ways to actually break out of the browser nowadays in a secure manner in the past we'd only had a way of like saying like do you really want to go if you pressed the back button and then of course you have the iOS 7 just had this wonderful problem that just came out that it generates the URL bar when you go to a page and then you scroll back and it vanishes but it doesn't it doesn't fire a resize event so there's a good article about this right now out there that a full screen HTML5 application in iOS 7 are completely broken because you don't have you don't know when the bar is going to show and when it isn't and that's one of the things that we need to actually fix and we had that problem in Android Firefox as well and we actually documented it so Apple is welcome to come and go with that but I think your application you should think about having the full screen you should not have to think about like what if people reload the page if people reload the page and your application is well done it actually gets the thing from the app cache and indexdb as well and nothing should change if your application breaks when somebody just goes to the page before then I think something is wrong already we have a chance to give the application into the face of people but inside the browser they should still be in control they should be able to do things I for example like to highlight things in a document and translate it that should not be possible when you don't allow me to highlight things within your application because you think people only do bad things with that so functionality should not be limited to what the browser does but think about HTML5 applications as being outside of the browser the browser is just an engine for your applications but sooner or later every platform should be installed and run like any other application on the operating system hello my question is about getting a HTML5 and a JavaScript application indexed basically so if you look at Google for example like it doesn't index your JavaScript content so if you just submit the URL to Google webmaster tools or whatever it just indexes the page but only gets a HTML content it poses you to render the page on your server and just submit it to Google so why is that so it adds to the complexity of the developer so the first complexity is rather than going with the traditional way of developing an application you create a single page application so that is good for the consumers but on the other hand it's bad for the developer because in order to get his content indexed he has to do this that ugly URL or whatever then Google sends that to you you have to create it, render it on your server so why all this pain like there's two ways of this this has been in flash a problem as well like I made the whole website in flash nothing for Google I worked on McDonald's code at UK back then that was basically in flash 3 or something like that and what I did is I basically I put all the content in XML because that was cool back then and generated the flash from the XML and generated HTML with XSLT from the XML as well so I had two different versions of the same website it rendered the HTML and when you had flash enabled it replaced it with the flash which was the happiness for everybody else Google indexing your JavaScript and indexing your applications that's actually by design that people don't want their applications indexed somebody having a ticket website somebody having an agency or something or Expedia they don't want to be indexed by Google with the content that you have in the pages because that's basically content that changes continuously so the way to work around that would be first of all to think about what tools the search engine gives you site maps, things like descriptions things like fallback content the danger of it of course is that when you just send something only to Google then they might blacklist you because you're trying to spam them BMW had that problem BMW basically had the same website twice in two different languages and redirected for Google just to the other one and they blacklisted them for two weeks or something like that, didn't hurt them much because they make most their money by selling cars on their website but it's a very dangerous thing to start playing with like if it's Googlebot then do this but that's the problem, like do you want to be indexed on the web or do you want to be an application I think having a good brochure where site around your application redirecting to the application with a button to the user start working here would index it in Google and give you the functionality of the application I'd be scared if my web applications get indexed by Google but they do actually scan a JavaScript if you put URLs in your JavaScript Google will find them, how do they do that I don't know, same way they index flash using Gordon or their own whatever version is a flash renderer in JavaScript so it's already happening but I think you should concentrate most on actually advertising your application with that and let's not get into SEO that's just such a race that's brutal to do one question down there I think the next one should ask a question up there I just love your scene running so I wanted to ask where forms in HTML when will, where are they supposed to start supporting methods other than get and post like put and no idea actually I would say that with with the forms itself why would you need that as a lot of times because most of the time a putter would do with the API and I just get the data from the form but for example with file uploads and things like that it would be an interesting one but in a time of in a time of XHR and JavaScript I can still do the put requests with the XHR and don't do it with a normal form submit then I also have the opportunity of having like a progress bar down the line we are because I got the different states of the XHR rather than just the like I send it off good luck to you so that's one thing to think about alright he's been speaking for an hour and a half ladies and gentlemen Christian Heilman thank you I want to take this opportunity again for Mozilla joining us this time for JSFU I've been saying this the Mozilla takeout of JSFU is almost about complete thanks to people like Robert Heilman Francis Maurier big round of applause for Mozilla


We are going through the TC-3. We are working on combat casualty care, and it's been going well. We're working through providing casualty care while under fire or not under fire, making sure we are mentally, physically, and have the skills to save or assist in any soldier that's wounded, hurt, or deemed damage. I'm learning new ways to apply hasty tourniquets and pressure gauze and learning how quick you need to do it, how long to hold it, what are the steps and the basic builds to doing all this and performing under pressure as long as how to in a timely manner. This is my first time going through a full casualty care class and so far it's been an eye-opener for sure. It taught me more than I thought it would. It's going very smoothly, learned a lot, took a lot of notes. It was definitely knowing the small details to each step. It was more than I thought and definitely helps me more in the future when I go on my future deployments. It would definitely help while either being under fire or needing to help and assist a fellow soldier who's down, injured, or such and it's been interesting to say the least for sure to see the new techniques and personal techniques and learn from the combat medics that have been teaching this class. That's been excellent. Teachers have been fantastic. Their assistants have been just as good. Learned a huge amount and they've been doing it in great time and shown us a lot more than we knew.


Novak Djokovic vs. Rafael Nadal is the second semi-final for the men's French Open for 2021, and both players are about to fight their way into the semi-finals. Rafael Nadal came into this tournament as the number three seed and would play Alexey Poprin in the first round. And after a tight third set, Rafa would eventually get through in three, six, three, six, two, seven, six. His second round opponent was an opponent who was all too familiar with, Risha Gaskay. And after a close second set, again, Rafa got through in straight sets, six love, seven, five, six, two. His third round opponent was against fellow lefty Kamnori, and this was a clinic from Nadal winning in straight sets, six, three, six, three, six, three. His fourth round opponent was the much-typed 18th seed Yannick Sinner, and these two had met last year at the French Open with a close first set. And this match would be no different with Sinner putting up a fight in the first set, but then Rafa taking over, getting through in straight, seven, five, six, three, six love. In the quarter-finals, Rafa would take on the number 10 seed Schwarzman, and after losing the second set, Rafa rebounded to win in four, six, three, four, six, six, four, six love. Novak Djokovic entered the French Open as the number one seed and took on Tennis Sangren in the first round. And it was no problem for Novak getting through in straight sets, six, two, six, four, six, two. His second round opponent was against shotmaker Kwebos. Djokovic wasn't affected by the shotmaker winning in straight sets, six, three, six, two, six, four. His third round opponent was against Berenkus, and after a close second set, Djokovic blew Berenkus out in the third set, six, one, six, four, six, one. His fourth round opponent was against Italian young gun, Mussetti, and this match turned into an epic, with the world number one having to come back from two sets down, eventually winning in five, six, seven, six, seven, six, one, six love, four love, retirement. In his quarter-final, Djokovic would take on the number nine seed Teo Berettini, who had a very impressive clay court season into the French Open. After winning the first two sets easily, Djokovic struggled to finish the match, but eventually got through in four, six, three, six, two, six, seven, seven, five. These two have played 57 times before, with Djokovic leading their head-to-head just 29-28, but the last three matches they've played on clay have gone to Nadal, including a couple of weeks ago in the Rome final. If Rafa's going to win, he needs to just be the king of clay. He needs to make sure that he gets the ball back, keeping it deep, and make Djokovic move, because that's what Berettini did, and it really worked for him. So if Rafa can do the same, he's going to get through this one. If Djokovic is going to win, he needs to be patient, and he also needs to make sure he doesn't let the crowd affect him, because the crowd was affecting him a little bit back in the Berettini match in the quarter-finals. He needs to make sure he's patient, and he needs to play a little bit like Schwartzman did against Rafa, taking time away from the king of clay. This match is always a blockbuster, goat versus goat, and it's always impossible to pick, but because it's on a clay court, I'm going to go with Rafa in five sets. I think it's going to be an absolute classic, with the winner making the final and being the favorite for sure in that final. But let me know down in the comments below, who do you think is winning this goat battle?


That debate was crazy. Like the first hour of that debate was probably one of the most Explosive debates I have ever watched and I truly believe that 20-30 years down the line Political scientists are going to be looking back at this debate and really judging every aspect of it really analyzing how a Billionaire who tried to buy his way into the White House got absolutely embarrassed on national television I don't even know how to describe it like if I say it was brutal for Mike Bloomberg that really doesn't do it justice and usually I don't recommend this because these debates are so toxic But I honestly think that if you didn't see this debate go back watch the first half hour One hour at a maximum and you will see that was incredible And for all of this talk of unity that was real unity that I saw where you had each candidate basically taking turns dunking on the billionaire who tried to buy his way on to the debate stage with the exception of Pete Buttigieg who just had his nose up in the air the entire time and was basically Trying to portray Bernie Sanders and Mike Bloomberg as equal threats to democracy and the party which is interesting But we'll get into all of that first. Let's talk about some numbers So when it comes to talk time Elizabeth Warren clocked in 16 minutes and 35 seconds Amy Klobuchar actually came in Second place this time with a total of 15 minutes and 55 seconds We had Bernie Sanders with 15 minutes and 24 seconds Pete but a judge with 14 minutes and 46 seconds Joe Biden with 13 minutes and 25 seconds and Mike Bloomberg with 13 minutes and two Seconds so there is a lot to talk about with regard to this debate I think that this debate may actually change the dynamics of the Democratic Party primary in a way That's how influential I think that this will be but one thing that I know for sure is That this was a good debate for Bernie Sanders He came in as the definitive front-runner And I think he left as the front-runner Although there's things to talk about here because we had a lot of admissions from the candidates that they basically don't really believe in Democracy with the exception of Bernie Sanders But let me just jump right into it get to the winners the losers and a new category that I am introducing So when it comes to the winners in this category, I am putting Elizabeth Warren Bernie Sanders and Joe Biden here But there is a clear standout and that is Elizabeth Warren I think she absolutely Dominated this debate and she did what she needed to do she needed to have a good night She was hanging on by a thread going into this debate the 538 projections Claim that she had a 1 in 100 shot of winning a majority of pledge delegates now That's that's bad odds, right? It's really bad odds to put it into perspective Bernie Sanders has about a 41% chance of winning a majority of pledge delegates Warren had a 1 in 100 chance. So she needed a phenomenal performance. She needed to Go after the other candidates be aggressive and that she did she attacked Bernie Sanders predictably because that's what she's been Doing but she finally ended this weird alliance between her and Amy Klobuchar She attacked Pete but a judge and perhaps more so than anyone else. She obliterated Mike Bloomberg It was a bloodbath and Individuals online who are reporters who were at you know, Mike Bloomberg debate watching Campaign headquarters or whatever they were saying like members of his team were groaning during some of the exchanges between him and Elizabeth Warren Because she absolutely exposed him But that's not to say that Bernie Sanders they didn't you know have a couple of times dunking on Mike Bloomberg asking him where his tax haven is telling him that you know we live in a country where there is socialism for the rich and rugged individualism for the poor to cite Dr. Martin Luther King and It was really brutal now, even though I think that Elizabeth Warren was the winner of this debate I think that Bernie Sanders was in a fairly close second and more importantly He was able to maintain as the frontrunner like he kind of just sat back as Pete But a judge and Amy Klobuchar took turns arguing and Elizabeth Warren and claim Amy Klobuchar took turns arguing and Bernie Sanders Just was riding high. He stepped in when he needed to he had a phenomenal performance And I think that this really is going to not change the trajectory for him I think he's going into Nevada very strong and This is setting him up very well for Super Tuesday We'll say that there's one more debate next Tuesday before South Carolina and Super Tuesday, but I think Bernie Sanders did a phenomenal job Even though Elizabeth Warren is the winner, maybe she'll get a boost from this still Bernie is looking really good now Joe Biden I do believe he is a winner, but he's not anywhere near Elizabeth Warren and Bernie Sanders. I do believe that there's some distance with regard to the winners in this category You have you know Elizabeth Warren way at the top as the main winner you have Bernie Sanders in second and then at distant distant third you have Joe Biden and Throughout the first half of this debate. He performed phenomenally. Well, he was articulate He didn't seem to stumble over his own words He was landing some pretty strong shots at Mike Bloomberg and I think that the audience was feeling it but towards the second half didn't do too well During his closing statement He was protested for his role in deporting of three million undocumented immigrants and he should have been protested for that That's disgusting Overall, I think he did pretty well. Now in the loser category. I have Amy Klobuchar and Pete Buddha judge Now, I know what you're thinking. Where's Mike Bloomberg? Hang on. We'll talk about him, but Pete Buddha judge I don't know what he was trying to do But he was attacking Bernie Sanders more than he was Mike Bloomberg during this debate and throughout the entire debate You can see his Twitter feed with his campaign attacking Bernie Sanders Like you can see that this little rat was jockeying for some type of power And you know, he knows that Mike Bloomberg going into this debate was one of the front runners Which is maybe why he chose to hold his fire, but you can see he wants to be the VP He wants money from Mike Bloomberg if he's the nominee, so it's just it's all so fake It's inauthentic. You could see how disingenuous he is He has the same rehearsed lines at every single debate and this time What was different when it came to that health care portion where he tries to pretend as if he has the moral high ground Was he got exposed by Bernie Sanders? Like he was talking about how his plan Medicare for all who want it has majority support Factually incorrect Medicare for all has majority support Elizabeth Warren called him out on that You had Bernie Sanders call out his lies on Medicare for all and not only that but call out the Financial contributions the support he's received from the pharmaceutical industry I mean, this is just this is bad for him This is bad and you can really tell he was getting on everyone's nerves Namely Amy Klobuchar who I don't think that mainstream media can possibly spin as having a good night the question about her prosecutorial record was brought up and that was really really cringe-worthy the the Portion of the debate where she was asked about the fact that she forgot in a in an interview with Telemundo The Mexican president's name and then she tried to say overdone almost fucked up his name again I mean that was genuinely cringe-worthy and you can see her like visibly shaking when Pete But a judge towards the end of the debate kept trying to push her and push her buttons more and more and more and it like Honestly looked like she was going to physically assault him like it was wild to watch and when Elizabeth Warren Said that she looked at her health care plan and it's like two sentences Embarrassing absolutely embarrassing. So I think that this Warren Klobuchar alliance Maybe it was just one for strategy and not necessarily ideology.  This is his debut, right? He's running all of these ads spending hundreds of millions of dollars Hiding behind a curtain and I think voters are seeing why he didn't want to show his face. He has Zero charisma zero He comes off as a creepy out of touch Republican claim that he earned his 50 billion dollars and then Bernie Sanders had a great line actually I think that your workers are the ones who earned that he just he demonstrated that he's not cut out for the Democratic Party a Centrist and center right as the Democratic Party is He's out of touch. He's too conservative for the modern Democratic Party Which really says a lot and he just couldn't defend himself no matter what he did He couldn't land any lines. The audience was actually audibly groaning at some of the things that he said He was booed. He called Bernie Sanders a communist. You could see that. He was like sweating and desperate I've never seen a performance this horrible.   Oh That's so embarrassing. That is so Embarrassing like if I'm Mike Bloomberg, I'm hiding my face for sure I'm not showing up at the future debates.  Oh, yeah, this is a greedy oligarch who's literally ruining democracy So you can't really feel bad for him. I don't know what to say Mike Bloomberg Obliterated absolutely curb stomped each candidate took turns dunking on him. He was visibly uncomfortable There are moments where he was fidgety I mean, I don't even know that I have the words to capture how poorly Mike Bloomberg did and it's so bad That I don't even think that the media can spin this like how are you gonna spin this as a good performance How can you possibly say that Mike Bloomberg did a good job or even performed? Okay? I mean, this was awful for him. This was embarrassing Like I wouldn't be surprised if his number started to drop right after this debate That's how poorly he performed now I'm not gonna say that like he's done but if he is done if his campaign is over It's this debate performance that did it and I mean you had how long to prepare for this You knew that all these attacks would come out the candidates would bring them up if moderators didn't and they did and your responses Were just it was laughable. It was embarrassing Absolutely embarrassing your response to Sexual harassment lawsuits against you was to say well I have women that work for me and they have a pay equity Unreal absolutely unreal So Mike Bloomberg performed so poorly that I had to create a special category for him So to recap in the winner category, I've got Elizabeth Warren at the tippy top I've got Bernie Sanders in second place Joe Biden in a distant third And then I have Pete Buttigieg in fourth Amy Klobuchar in fifth and Mike Bloomberg at One billion because that's how that's how bad he did like honestly like if you haven't seen this debate again I want to stress Watch it watch at least that first hour. Do yourself a favor if you want to see a billionaire get dunked on It's gonna be glorious for you. I think that Kyle Kalinsky on Twitter described it as Bloomberg Humiliation porn and that is so accurate and I saw a jiff from Jurassic Park That made me laugh about Mike Bloomberg entering the debate And then I saw even from Trevor Noah who I think is a hack generally and not funny Claimed that you know a billionaire hasn't had this bad of a night since Bruce Wayne's dad in that alley It was bad and I think that it's universally seen that Mike Bloomberg was the biggest loser not even close He lost this debate and it might have tanked his entire campaign all that money Wasted possibly because of this debate Now getting to the specifics when it comes to socialism Bernie Sanders was absolutely Dominant during this portion So you have Lester Holt propose a poll and say well most people don't support socialism and then burning's response was just incredible He just stared at Lester and said who's leading in that poll crushing that narrative Responding to you know, this anti socialism bias that msnbc clearly has an anti sanders bias more specifically that msnbc had by saying we already have Socialism for the rich in this country as I alluded to earlier He he quoted Dr. Martin Luther King jr. And it was just absolutely incredible burning sanders I think at this debate perhaps more so than others even though he's not the winner necessarily Demonstrated that if anyone is going to be able to take on Donald trump It's him possibly elizabeth warren But nobody else can hold their own now. I think that elizabeth warren would lose to donald trump But at this debate at a really crucial time She did demonstrate that she is a capable debater like these last couple of debates She's just been fading into the background And uh this time she came in guns blazing and that's what she needed so kudos to her She had a couple of cheap shots at brenny sanders When the moderators decided to Divert attention away from bloomberg because everyone was dunking on him too much And tried to get people to attack brenny sanders because of his supporters elizabeth warren joined in But at the same time, I mean brenny sanders held his own I think that his responses were persuasive. Look the black women on my campaign in a term they get harassed all the time So this isn't something that's unique to brenny sanders in spite of what that little rat said on the debate stage People just literally tried to say that brenny supporters are uniquely evil Okay, well these uniquely evil brenny bros aren't gonna vote for you So you better hope that you are successful in stealing the nomination peat because you're not getting our vote now On that note of election theft One of the most striking things in this debate I think possibly the standout moment besides all the dunking on bloomberg Was the fact that every single person on that stage with the exception of brenny sanders came out tonight Against democracy they revealed their inner authoritarian leanings Because they all claimed that they would be open to stealing the nomination from someone Even if they have a plurality of delegates and the most votes even elizabeth warren said that So we're gonna dive into that a little bit deeper in a separate clip But that honestly made me feel sick to my stomach Because it showed the democratic party.  The oldest democracy Is now having people openly running for president saying That they'd be open to undermining the will of the people using super delegates to steal the nomination Away from the person with the most votes and this comes at a time when all of these dipshits have been railing against the electoral college claiming That the person with the most votes should be able to win and now they're all saying You know, since i'm probably not going to be able to get more delegates than brenny Yeah, I'd be open to stealing it Disgusting even from elizabeth warren if they think they can do that and go on to win I don't care how much brow beating you do donald trump gets a second term It's basically guaranteed and that's like the least that democrats have to worry about because their party is just done at that point But again, I don't want to speak too much about that because I have a separate segment for that but um Democrats they're playing With fire like I can't stress that enough but getting back to the overall debate That's basically all that I want to say in my overall debate breakdown Because I have more segments that I will plan on putting up just about individual little instances here and look This debate was great if you're a brenny sander supporter You've already got the momentum going into this debate And so what we needed was for brenny sanders to be able to maintain and show strength when he's tested He did just that he performed exceptionally well Elizabeth warren had the breakout performance. You can tell she really prepared And good on her but the question I think that we have to ask ourselves after this debate Is can mike bloomberg survive this debate? I honestly believe it's an open question And how will this debate impact elizabeth warren? I don't think that joe biden did enough to move the needle for him in nevada There's a poll that came out today that showed him and brenny sanders tied in south carolina Let me just explain if joe biden loses south carolina His campaign can't survive. That is the firewall. He's been making everything on south carolina if he loses that Even if he ties you can argue He's done It can't happen So I don't believe he did enough to move the needle, but I think his performance was okay If elizabeth warren gets a boost. I will probably attribute it to this debate, but I just don't think that um She's going to be able to do that. She's really far behind In nevada, she could pull out of you know a second place victory Possibly a victory if really her performance is viewed by voters as you know that great But I think that brenny sanders performance was so solid that if you were already supporting brenny sanders You have no reason to jump ship all the momentum is behind brenny sanders He has the most persuasive argument and when it comes to health care He really like honed his craft like all these democrats are talking about how brenny sanders wants to take away health care And brenny sanders is able to respond in such a persuasive way that it makes them seem like liars And it's because they are lying right nobody's wanting to take away health care brenny sanders Wants to expand health care to 100 of the population and people didn't just plan about choice I mean his plans would raise costs for people elizabeth warren exposed that So I think that elizabeth warren's debate strategy and basically trying to go after everyone else I think it worked for her because when you're behind You have absolutely nothing to lose so you might as well go guns blazing elizabeth warren She had to turn up and I think that she did that But is it enough to you know, uh overcome this Gigantic behemoth in the race that is brenny sanders I personally don't see it I mean brenny sanders has the entirety of the left coalescing behind him And you see a lot of moderates now starting to break away from other candidates and on To brenny sanders when you look at head to head matchups brenny versus biden brenny versus clobach arm He's demolishing them the only one who comes close is elizabeth warren So the question is did she peel off brenny sanders supporters? If any it's not going to be enough i don't think but she did do a great job at this debate Overall her and brenny emerged victorious and mike bloomberg just had a horrible Horrible night. I said on twitter that I know he's not accepting donations But I would be willing to send him some ice Because he is definitely going to need it after this debate ouch