 So today I'd like to speak to you guys about this thing by Valvetate. So before I begin, I just want to know how many of you have used Valvetate? Okay, cool. I don't even know about this one. Okay, a lot more. Okay, good. So it will be a good overview of what is available in this one by Valvetate and what are the ways you can use some of the, you know, like the build script and stuff which seem to be something that people are not that familiar with. So before I go further, well, my name is Divya and I'm a web opener for Opera Software. How many of you know what web openers are? No one. Okay, so what do we do? It's a really exotic game and I don't think many people have that as their, you know, career option. So what I do as a web opener is to contact people like you and basically say, hey, your website sucks in Opera. Make sure it works. And also I'll say, so make sure it works in other browsers as well and use standard scuffle and code and all that stuff. And also write and sometimes I also speak like today and hopefully make sure that you guys test in Opera before you release your websites and don't use browser snippet. So when I am not working, I also contribute a HTML5 boilerplate which is what we'll be talking about today. And I am also a member of the CSS working group. How can you know about the working group? Okay. So there is something called the CSS working group which is responsible for creating all the CSS, you know, the syntax that we use. So all of that is created by the working group based on, thank you, discussions inside the working group and what is useful, what is not useful. Sometimes some things get appreciated. So all of that discussions happen in the working group. I am luckily a member of it. So I also write on my website because at newphony.com I haven't written recently, but I'm also on Twitter at Divya so if you have any questions, just ask me. Okay. So what, okay, for those of you who don't know, HTML5 boilerplate, what do you think it is? Anyone? Framework. Framework, yeah. Okay. Anyone else? Just guess from the name. Anyone else? It's a collection of best practices. You can't just say what's on the website. It's a boilerplate. It just does whatever you don't have to do every time. Oh yeah. Okay, yeah. The basic starting stuff is all right. It's just to get on the bandwagon of HTML5. So I think actually not much to do with HTML5. So it's basically what it is on site, which is a collection of best practices for cross-prose development, basically, so that it has very good defaults. So you don't have to think about those defaults when you're using HTML5 boilerplate. So for example, if you don't, how do you start your new project if you're working with HTML5? How do you start it? Anyone? The CSS normalization? Sure. Not you. Anyone else? How do you start your projects? Swear. What? No, no, no. I meant in terms of code. Like, how do you start? What's your base? Adopted. No, like, do you use an old project or do you start from scratch brand new or do you have something to start with? What do you guys do? I did it. You guys did it. You did it. That is because you used it. A lot of people have their own boilerplates. Yeah, so I frequently just pick up whatever I did last time was assembling this. Yeah. Start cutting out codes for that. Yeah. Yeah. That's what I used to do, too, which is just copy from previous project which seemed to make more sense and start from that. But the thing is most of the time almost always are missing something because you don't put your thought into what should be a good default. You just have worked in the nick of time and the deadlines and all that. So what boilerplate does is to provide you a good set of defaults so that it has your back even when you forget to provide the fallback that is required. So boilerplate is created by five main people and then which is great. Can you still see it? Yeah. Okay, cool. So there's Paul, there's Shichuan, there's Nicholas, Matthias, me, and then several more hundreds more who have contributed to different aspects of boilerplate, but we maintain it actively and make sure things are up to date and stuff. So in terms of usage, well, boilerplate has been like, I have not foreseen that it would be used so often in so popular websites like burnupupapa.com and Jerry Seinfeld, et cetera, et cetera. So it's just to give more validation to the kind of defaults that we provide. So I just like to show you how it is organized. So what we have here is just the, this is the default that boilerplate comes with. So we have the index file which is your default index page you start with. Then we have 404 page in case you forget to provide a 404 page. Then robots.txt is what would be used by Google to make sure it crawls all the pages in your site. So the default is to make sure all the pages can be crawled and that's what we provide. And then we have a list of favicons. Basically we, well, I touch icons. If you are using a mobile phone and Android device or iPhone device, you want to add a bookmark on your screen, home screen. You could use these icons to do so. And then there's also a favicon. And because these icons have specified dimensions, these images are like defaults that you could use to create your own icons. And we also have the cross domain.xml which is required for using flash. And then we have a set of folders which is the JS is where all the JavaScript goes and libraries is where we keep all the common libraries that you'll be using like jQuery and Modernizer. And these are what we provide and our hope is that in my list folder you put the libraries that you would want. And then plugins.js is where you put all your plugins. Like if you're using jQuery, how many of you use jQuery? Okay. Okay. That's a signable number. So, if you're using jQuery then you have a lot of jQuery plugins like, you know, for slideshows, for cycling, animations, what not. So if you're using those, we recommend you put all the plugins in one script file because you don't have to have too many network requests. So that's what plugins.js would be for. And then script.js would be typically used to invoke those plugins. So if you have, you know, to invoke all these plugins, that's where you'll be putting, that's where you'll be using script.js for. And we also have the IMD folder which is where you put all the assets that we're using for your site. Typically, this is where you put images that you use for styling more than images that you use for content. And then, well, then you have the CSS folder which is where the default CSS styles are. And then the build folder is where we use to run the build script later. So these are what I would consider as interesting features of a super boilerplate. And this is what I will be going through for today. Well, as you can see, there are a lot of these and let's go through one by one. So the first thing is conditional comments. How many of you know what they are? So what conditional comments are are there is this, what about you're seeing on screen this source of it. So if you notice here we have something here called if less than IE7 in this weird way. This is a conditional comment. What it would do is that conditional comments are only understood by IE. So what this would do is that this will appear as a comment for every other browser. But for IE less than 10, it will start interpreting what it does and what it means. So it'll look at this and it says am I less than IE7? If I'm not, then it'll ignore that particular text. But if it is, then what it will do is it will output this text which is hestible class nojs IE6 so the reason why this is a useful way of doing browser targeted or browser specific hacks is that well, you just need to do in your CSS file dot IE6 followed by the selector that you want to specifically target for your IE6 specific styling. And you don't have to do any JavaScript sniffing, any browser sniffing or any other markup that is required. So this is a very simple way of targeting for IE6 specifically. And then there is the same way for IE7 and then IE8 etc. So it's typically the same. And if it is greater than IE8 it just output the same hestible because IE9 luckily is not as bad as IE8, 6 or 7 so we don't need to target IE9 specifically but for everything else you can use these class names to target them specifically. So the good news is well I don't know if you have considered good news but the good news is that IE10 onwards there will be no more such targeting so you can't use if less than IE10 and do something because that will go over. At least that's what they say it will be. So hopefully that would be the case. And now there is something that we provide called XUA Compatible Meta tag. How many of you know what that is? Okay, same usual suspects. So what this XUA Meta tag would do is to make sure IE renders as IE. So the problem IE faces is that when IE6 first came out it was the best because it was available at the time which unfortunately like today we have optimized for WebKit we used to have 10 years ago optimized for IE6 and unfortunately IE6 has fallen quite behind times so there are lots of websites that are optimized for IE6 so those websites will break when IE7 or 8 or 9 try to render those sites using the latest modern technologies that they support because they are optimized for IE6 and I think what IE tries to do the later versions of IE is that if it sees the site that is in if it's part of a blacklist or if it's part of internet or something it will try to put it under a compatibility mode which means it will try to render it using IE6 rendering engine which means all the latest selectors that are using will not work and it will be on Quark's board and all the brokenness of IE6 so your user will be using IE7 or IE8 or IE9 so what we want to do is to force IE to always use the latest version for rendering and not use the older IE6 version for rendering and that's what we do using XE8 compatible of course you can also use the stack to force particular version of IE to be used for rendering your page so you could say use the stack to make sure IE uses IE7 rendering engine or IE8 rendering engine on what's available so there is this stack and let's look at that this is how we specify so we have IE is equal to edge which means always use the latest version that's available and we also have a Chrome is equal to what one so what that does is that if Chrome Frame is available for me if you know about Chrome Frame a lot more so Chrome Frame is a plugin that is available on IE so if Chrome Frame is available make sure you use that to render this page so your page will always look nice but we have had issues using this metatag with conditional classes so we always recommend you put it in your HG access file that is a HGTG header that can be set and that would be the best way of doing this rather than as a metatag I have a question with Chrome Frame but the problem is it doesn't work apparently it doesn't work with iFrame I have no idea I don't even know how Chrome Frame looks like but we should ask the Chrome Frame people essentially the iFrame the iFrame has been served by you as well and if you put this in that it will pick up Chrome Frame no it's not, it's a Facebook app basically so it's open in this space because what I've done is I've loaded Chrome Frame on so I know if that works I'm not sure if it's not on the outer and it won't load yeah I don't think you need to I don't know what is exactly a problem it's not loading for your frames or what basically the user agent frame says it's basically the Chrome Frame upends the Chrome Frame work to the user agent frame that is set the site is not rendered using Chrome Frame it looks the same as old iU you mean within the iFrame the user agent is set yeah within the iFrame I have no idea actually so that's completely you should ask the Chrome Frame people I have one more question if that meta tag is only for iU then why if we don't put that meta tag inside the conditional command yeah as I said it doesn't work it will not be interpreted by if you put it on the conditional that's why we come to it so and it also has issues with conditional commands before it so that's why we recommend to put it in HD access any other questions that is boilerplate is for new projects so why do you have to worry about IE6 optimized websites you don't have to worry about it it's just that your website could be considered as one of those old sites and you don't have a choice in that matter IE decides for you yeah you can go into rendering using IE6 depending on where it's served from whether it's on a blacklisted domain or whether it's on intranet or something else so you need to make sure it forces it to IE6 rendering anyone else okay then there's another thing car set whatever so the way it typically will be that's how you used to do is use this long winded incomprehensible way of meta tag the good thing is that in ten years that it has been in existence very few people have actually got this meta tag right which means browsers have to account for all these failures in how people use this meta tag so browsers don't even look at HTTP attribute or the content attribute they only look for two things which is the meta keyword and the car set is equal to the ufa so using this would effectively give you the same kind of understanding for browsers as you had previously so now with hstable 5 you can just use this and get away with it and your content will be understood in the manner you're supposed to be understood so this is what we recommend as default and it works on all browsers so I mentioned we have a list of favacons and touch icons there is a way to use them to link to them from your index or html page but we recommend you don't do that because browsers will automatically look for your favacons or the touch icons in the root directory of your page so you don't have to specify it once again in your index or html just drop those in the root directory there is also a way of including jQuery this is a pattern that you might not have seen in other places which are the cdn version of jQuery so we use the google cdn version of jQuery the main reason being that it is likely that a user will have a cached version of that jQuery in their local finds because other websites will be using it too so it won't be a network request so you are more likely to find your page will load faster and there is also sometimes if you're developing or in a very unlikely event of google cdn failing you'd want to make sure jQuery is still loading which is why we have the fallback which is your local version of your jQuery which loads if jQuery is not google cdn jQuery is not available and if you notice the source element this is the cause of most issues in boilerflake because everyone assumes there is a mistake in this because there is no http colon in the source it just starts with slash slash it just starts with slash slash and there is no http or https there is a reason for it and the way there is a term for it which is called as protocol relative URLs now if you just put http colon slash slash what happens is if you have this page rendering with https then in ie you will get a dialogue box that says do you want to download unsafe items there is nothing unsafe about this jQuery except that it is linked to with http inside of a https context so using this protocol relative URL what happens is that depending on what context you are in https it will try to load the https URL of the cdn and if it is http it will try to use the http version of the cdn so those dialogue box won't annoy your users anymore so that's something that almost always catches me when we are doing dialogue because you typically test for ie6 last on the last day especially and then you see this dialogue box popping up and you have no idea why so this is a good way to make sure that you load the right version for the right protocol so you could use the same way for jQuery UI or any other plugins that are using this format will be something that will be useful something known as the mobile viewport only if you know what that is viewport so if you are using mobile devices and you are accessing your website the way to typically render is something like this which is a zoomed out version of a website and you know there is no if you have written something that optimizes for mobile pages that will not be rendered because it just zooms it up well if you use this meta thread for specifying a mobile viewport now if you notice this is much more zoomed in and there is actual and it matches the width of the website matches the actual device width and the way you would do that is using the meta viewport which is here and you have width is equal to device width this is the default that we arrived after testing in some printing mobile devices and finding out what would be a good default which is stating that make sure the width of the website matches the width of the mobile device screen that is available and that set the initial zoom level of the website to be one and not zoomed out like 0.2 or 0.3 or whatever is typically used to make sure the website the whole website fits on the screen so we want the website to only show legible content and that's a good default to have now there is a proposal from opera which will try to do this in css and using a new rule called at viewport and then you can specify the same thing within css but that is already available in opera and opera mobile but it's not available in other browsers but they are looking to implement it or so I hear and so well the meta is literally I would prefer it in css because it's typically a style thing rather than just a thing that you do in markup so this is with pain in the ass there is a good research that's on that link there and I recommend you read it to understand what's happening is it supported by non-red grid browsers all of them? yeah why? it should be as far as I know I have not tested it but I know it's supported by on firefox mobile and android obviously all of them are webkit opera and webkit I know this works yeah firefox mobile too I'm guessing i9 would I'm not sure then obviously working for i9 okay how many of you use reset css in your code? okay so reset css is a way to make sure you so browsers come with their own user agent styling so if you don't specify a style browsers apply a style that is part of their browser default styles and now what reset css would do like you know it's like throwing a nuclear bomb into that user agent styling so it just shots them all and make sure all the styles are set to zero and a very default value that so every style that you would be applying needs to be reset again by yourself so you need to if there's a form element you need to make sure you set the right to minimum padding and etc so that it looks legible on screen so that's something that has been that we had in boilerplate for a while till we came up with this normalize.css it's mainly the work of two people Nicholas Gallagher and John the new so what they have done is to not throw a nuclear bomb into the user agent styling but make sure that you use the user agent styling but it accounts for inconsistencies and bugs in different browsers so what they end up doing is that it normalizes so all it looks the same on all browsers so if you have small inconsistencies it tries to fix those inconsistencies rather than trying to reset all styles to zero like martin zero padding zero so with this what would end up happening is you have a hfons and h2s with the kind of font sizes that is typically found in different browsers and it's not set to 12px or anything like that or the base font size it is set to the usual browser defaults and if something is center-aligned it will be center-aligned on all browsers so the reason we prefer this is that we have all the new html elements coming up as well so browsers provide a default that actually works and that looks sane and legible on your screen and if you have not accounted for that in your the reset css it's gonna look horrible and especially when you have all these third party plugins using it or something like that and it may not look the way you want it to look so you may not have thought about some interactions or some new elements and if you use reset.css that's gonna make your styles go agree and you have to keep writing new styles but with this you know you'll be provided with the same default you don't have to keep overriding it so that's why we use normalize.css and we also have a bunch of helper classes for styling in point of play so the first is the image replacement class how many of you do image replacement I'm sure everyone does what? do you guys know what is image replacement? no? I know you so image replacement is a technique by which you have text in your page and then you try to replace it with an image so typically you have a logo so that's the common way of doing it so you have a hedge fund company name and if you have a company name you want to just show the logo instead of the company name so you want to do image replacement sometimes before web fonts came about you used to use image replacement to create to show fancy graphical text on your page that's typically how it used to be used for and there are different ways to do image replacement so we have one way that we think works this is how we do image replacement there's nothing fancy in this this is a very old technique using text indent but the interesting thing that we have to add in after we got a few bugs from right to left text because this image replacement technique would not work with that because when you use right to left text text indent minus 900 n actually has some text rendering the image so we have to force a direction of left to right which is direction colon LTR so that the right direct text will be hidden and the image will be shown so and sometimes there's another one issue that was pointed out is that in an element that is image replay sometimes there are break elements like VR elements and that goes up with the image replacement because the text is now no longer in one line but it is in multiple lines so the image you know the text is still visible so we have to make sure that the break element is no longer visible so we just spin on it and then we have a clear fix please tell me some people please use this okay good it saved my life good I know it does save my life too so what version do you use who uses or for hidden okay who uses auto who uses auto that's fine too and then what about DID class is equal to clear or VR class is equal to clear or clear both yeah and what about a class name clear fix or something like that and use a class name okay there's a few people so we recommend using a class name typically a class name for clear fix now I personally actually don't use a class name what I do is just add the selectors to that particular rule so that the same styles get applied now the problem with overflow hidden or overflow auto is that sometimes you may have positioned elements and interactions do not always render the way you want them to and then you have DID class is equal to clear is that you'll have multiple markup elements in all of them just to make sure you clear the floats and when you have suddenly those elements are no longer floated then you have just an excess markup in your index on a stable page so what we did with the clear fix is that oh wait let's look at that so there is a technique for clear fixing that is from 2007 and then Nicholas Gallagher iterated on it and came up with this one actually there is a slight difference the content used to have a dot in it and it doesn't have a dot anymore the reason being that when you had a dot it introduces a small space at the bottom of the cleared elements and the parent container and then you had a boundary when you have a border with background colors you would be able to see that and that's not something that you want in your pages so we now have just empty contents and then this is much smaller as well so we are using this in our vegetable file wallet later as a default but it seems to be working no one has complained about it so far so we also have elements sometimes you want to hide something from rendering on your screen but you still want it available for screen readers say so sometimes it's like skip to navigation text that you want to hide and only make it available for screen readers so we have a class called visually hidden so we hide it on the screen and what it simply does is there is just one thing it does which is make sure that element is completely hidden visually so you can't use display none because when you do display none screen readers will not read the text that is hidden in that manner so you need to do some tricks to make sure that the screen reader does read it but it's still not visible on the screen so this is Jonathan Neil did some research and he found this link that someone else did which has the clip syntax the clip feature the property which seems to be working for us to hide these text off the screen and it all works on all the browsers and IE6 even so this seems to be the one that we are going with and there is also one additional thing that we introduced which is to have another class name called focusable in addition to visually hidden what that will do is when you tap to that particular element it will be visible so if you are using keyboard navigation and you want people who are using keyboard navigation to see a particular set of navigation elements you can use focusable to make sure that particular element the child elements are all visible that they can now get to and from those links and then we have there is sometimes you would want elements to be hidden from screen and what did I say so basically what it does is it if you use display none elements that are hidden will have width 0, height 0 and then if you show them again then they are going to expand out and it's going to disrupt the layout sometimes you don't want to disrupt the layout where the elements are you simply want to hide them and you can't use display none so what you do is visibility hidden and that's what this class does which is using visibility hidden and then you can say visibility visible if you are using JavaScript to make sure that element can be seen and instead of displaying display none thousand times you can use a class name which is height and that's what these helper classes do so in addition to these helper classes we also have print styles how many of you have ever used a print style feature so typically pages can be printed from browsers right so not many people optimize the pages to be printed from the browser and what we do at boilerplate is to make sure you have a good default to start with but it's no means complete and it might depend on your styles but this is a good base default to start with when you are printing or working with your pages like so the way it has normally been done is to have a separate print stylesheet linked from your but the problem with the separate stylesheet is that the browser whether or not you are printing a page is going to download it all the time so you have two stylesheets being downloaded or what could have been one stylesheet so we use a print media which looks like this let's say act media print that's always required and it's understood by all browsers so that all these styles will be applied by the browser when you are trying to print a page so what's interesting is that this so what we have here is make sure that after every link element you are printing the formal link as well which is the href of the a element so that the user when you are reading a page will know where to look to when you are looking at a link offline but then again you need to make sure that you don't print all the hrefs because some of these could be JavaScript links like model windows and you don't want them to be printed and some of them could be images which are just links but you don't want it next to an image so that looks really ugly and it's not even relevant so you don't want them to be printed which is why we have .ir a column after and then there are links that are local links which are links within the same page and there's no point in printing that because it's all referencing to something that is on that same page so we are not printing that either so there are some other defaults as well like we have t-head, table header group what that would do is that when you have tables that are split over multiple pages you'd want the headings of each table to be printed on those multiple pages so that the user can understand what's going on in the tables so that's what that would do and make sure your color is black and the background is transparent and you don't have any text shadows or filters working on those styles on your screen so that it's not it doesn't waste ink and it prints fast so that's what we can also set margins on a page using so here we have margins 0.5 cm and this what this would do is that make sure that if you have a paragraph of text make sure there are at least three words in that paragraph of text if it is at the last line or the first line so if it is less than three words so there is only make sure that when you have an orphan which is the last line of text you only have three words in it so if it is more than three words it will go to the next page and things like that so it makes sure that when you are printing a page it doesn't look too awkward because there is very little you can do to control what content goes into a page and then there is page break after a while sometimes you may have headings as the last line of the page and then you have the content that the heading is for start on the next page and you don't want that so we have a page break after a while which means that if there is a hedge to make sure there is never a page break so if there is a hedge to it will go into the next page rather than splitting the content into two different pages how many of you have heard of modernizer? let's see so modernizer includes modernizer by default and we include a custom build of modernizer but the whole thing so what we do in modernizer is provide a HTML5 ship how many of you know what that means? okay thank you so when you are using HTML5 elements in browsers like IE so HTML5 elements would be like header there is a putter element and all these new elements in IE if you are applying styles to those new elements they will not be rendered on the screen because IE does not understand well IE678 do not understand these new elements at all so the way there is a hack around it which is to use java script to add these elements to the DOM which is to say document.gradeElement and then you add the new element and then somehow and miraculously IE seems to recognize these new elements and apply the styles to it so HTML5 ship is optimized it's a very small script to make sure that IE will apply these new styles to these new HTML elements so that's provided by default by our custom build in HTML5 boilerplate and then we also have a java script loader it uses the script from yetnote.js what that would do is that if you have multiple java script files and you have a condition if you want to check for a condition and only load scripts if a condition is fulfilled this loader and that's available as part of modernizer as well and it also adds these class names if you have .node.js then it will remove that and add.js if there is java script that is available on the browser and it tests for that and then it adds this class so you could tailor your styles based on whether java script is available or not or if java script is available maybe you want to add or do something more and you can do that as well and then it does two classes and then ultimately does what it is supposed to be doing which is test a bunch of html5 features so it could be css3, svg, canvas, and then it will output a set of class names to the html element itself so if for example here if there is text shadow it does a test for text shadow and if text shadow is available on the browser then it will put a class name called .textshadow so you can use that in your css to style accordingly depending on what feature is available or not and you can do the same with java script as well because modernizer has a good API that can be used to apply different kinds of script based on what kind of feature is supported so if there is no text shadow then this no text shadow class name is available on the html element and then you can provide a fallback or maybe change the color you know what you want we also have htaccess file that is included it's not something that most people seem to be familiar with so yes you mean html5 shim well html5 shim has only one purpose to provide the shim there is nothing else to it but modernizer's primary purpose is not to provide the html5 shim but to do these core tests and output the class names it does this html5 shim as part of it it's like a bonus typically if you are using modernizer you don't need that but if you are only using something for specifically for making sure i.e. renders the new elements you can use the html5 shim if we are happy with a square column in i.e. then we don't need to use modernizer if we are only using those so it's not just for i.e. modernizer it's for all the browsers which do not support some features for example let's see WebGL so WebGL is not supported in all browsers so if you are looking to use WebGL you may want to do a test first and see if it's supported and then use WebGL or if it's not supported maybe provide a fallback solution so for example in Firefox and Opera it provides something that is different, it's like a graphic rather than using WebGL to render on the canvas so it's only for progressive enhancement yeah you can say that feature detection it does feature detection but you can use this for providing progressive enhancement yes the reason we have we ship our html5 file because Apache is like the most common server that would be available we have a good robust way of targeting most of these servers where your files will be hosted so what it does is first provide a good mime type for all your files so you make sure all your fonts have the right mime type and etc and provide gzip compression again it's not something that's provided by default so you have your files are much smaller because of gzip and it will be rendered and you'll have expires headers so that you can cache your images or styles for a long time so the user if the user visits your site you know the second time it will be much faster to load because these resources are cached and this is something that you would have if you have WordPress or Drupal or any of the CMS because they do it by default but otherwise typically you don't see it which is why I give you URLs to make sure that www.domain.com redirects to the www less version of it because all these search engines consider these two domains to be separate websites and so you will not get the kind of search engine that you want if you don't redirect them and so that's something that is provided by wall of it and so sometimes by accident you may have these folder indexes on your site and you don't want that to be rendered on the screen so while the ht axis blocks that and it also blocks access to hidden folders so sometimes you may by accident leave a .svn file or .t file on your directories and you don't want people to try and see if that exists and see what kind of folders and files that you have so it has a bit of security built in and there are a lot of commented out it has lots of comments that are useful to understand and you can well, stop screen picker, all these stuff that are commented out, you can use it if you like and it's pretty well commented and if you want to understand more about what each of us does just read the comments and it will be easy to understand but we also have server conflicts for other servers but it's in a separate repo and some of it is still actively maintained some of it is not but if you consider yourself as an expert in one of these servers feel free to fork this project and submit pull repress can someone ask anything you said that you have to read the other way around the other way around the other way around in between that without the WWW no, I just don't like typing extra characters, that's all that's my my way of looking at it okay, we come to the most interesting part for me, which is the build script what the build script does is it automates a lot of things for you so there is a lot of good things that you need to know about making sure a page loads quickly on a user's browser and the build script does a lot of that for you so for example, you may have multiple CSS files and that's going to be multiple requests for the user when they are using the browser so it's going to be your page is going to load slower because the browser needs to fetch all the CSS files before it renders the page and then maybe you have multiple JavaScript files because you have maybe 10 plugins jQuery plugins and you have jQuery and so then the browser needs to fetch all these requests as well and all these files as well before you can do some interaction with the page so the recommendation is that you just have a CSS file the minimum number of CSS files with JavaScript files so what the build script does is concatenate all these files together and present mini files and present just a single file images as well which are not optimized so sometimes you have PNG files which are like one MB big and if you don't if you optimize then they'll reduce to maybe 100 kb even so the build script has a way to optimize those images as well and there are some other features that I would like to show you there are different options this is all run on the terminal and we use the ant to build this to use the build script there is also a version that's available using rake and cake but they are nowhere close to the robustness that is provided with the ant build script so these are the options that you could use so I'll just mention one of the features that you can use before I go so this is all the features that you get with the build script and I mentioned the first three the fourth one is how many of you know about offline HTML perhaps ok that's not a bad number so there is a way to make sure your websites are available offline when the user is not connected to the internet so for example if a user has loaded a page when that user is online and wants to revisit that page when your she is offline and tries to access the page if not load if you don't have an offline manifest so what the build script does is that you can use an option and set an option and it will automatically generate a manifest file for you that will be used by the browser to make sure that the resources that is required to render the page when offline will be loaded locally and it will be used to render the page when the user is offline so what we do is provide all the CSS file the JavaScript file and the index page and all that is provided in the cache manifest and the build script does that for you so if you it puts in the concatenated minified version of the CSS and JavaScript so that you don't have to manually do all that and there is a basic HTML compression that is available with some of these commands and there is also HTML minification that is also available so HTML minification removes all the white spaces and it's a very what do you call it actively trying to minimize your HTML file but the basic version will just try to remove codes and very simple minimization so so these are the commands that you can use so typically you will be going to your folder let's go to my terminal and then I'll go to my build folder and then I'll be running either of these and build you can see still need to use command plus so I can do ant build or ant minify which is what I used to compress I can use ant build if you are developing a site and you want to build it you don't want the minification and the concatenation to happen because you are still debugging your styles and JavaScript so if you use ant build dev it will not concatenate minify your CSS and JS files it will simply copy them over to the final built directory which is what we in this script the folder is called publish and if you look at the files we'll just look at the demo just now and see how this goes on so this slide show is made of HTML file so I'm just going to build this slide show so I'm just going to say ant minify and it's going to take a while I have enabled appcache manifest so it's we did an appcache manifest file as well and it's all output to the publish folder and now it's trying to optimize the few images that I have and it's going to take a while to do that if you notice suddenly there is a publish folder that has and there it is the build is successful and now I have a publish folder which has all these files if you notice the index.html page it's all minified if the previous index.html has all the white space but here it's all it's all minified if you look at the css I have this is my generator css it's all minified and it's all minified and then I have JavaScript also minified I have a manifest this did not exist before it was created by the build script and you have the consumer pages the css all the JavaScript files is required for your app so all that is done by default and all these images have been optimized as well now I can see so there is another one that well if you want you can see what is the generator windowset works fine and it is there is another thing that you can do which is ANT css split so a lot of people have asked us that if they want to work with multiple css files for logical ordering and making sure things are split separately and nicely so what this command does is to split your existing style sheet for example the html file style sheet into multiple style sheets so here let's do the minified css split it's created multiple style sheets and if you look at this style sheet all these multiple styles they did not exist before and all of these are separate sections of the default style that comes with boilerplate and we have primary styles which is where I should be putting all the styles this is where my slides styles are and then there is style.css which simply imports all these style sheets in one and when you publish when you do ANT build and minify after you do this the published folder will still contain the concatenated version of your styles so there is no more added board so for performance reasons we recommend that you don't use the added board rule to import your styles in your page so that you can fetch all these multiple style sheets there's going to be a lot of network requests so the page is going to load much more slower than if you have just a single style sheet so with the build script you can use the added boards for your development but on your final rendering you can make sure that it's just a single style sheet and it's all concatenated and minified conditional added boards no that's not available in CSS as far as I know you can use media queries but I don't know you can't even use the media the version number is just a date here so there is no version are you talking about the name of the file this is a sharp that is used in the project yes it's just a random number that we have used to name an end it automatically replaces an index.html let's look at the and if you look at the style sheet it automatically replaced the style.css with that particular name that was used to generate the build script and the same with the JavaScript as well let's see so there is the JavaScript it automatically replaced that all the multiple scripts how is the uniqueness adapting in short using some checksum or something how is the uniqueness of this number the SHA so you can set how long you want the unique number to be and that can be set in the config file which is all set in the build folder so there is a config file and there is project properties where you can right now the hash length is 7 and if you want to take it to 8 or 3 if you uncomment this and change the length you can set that and there are also other things that you can set or you can exclude files from being concatenated or minimized you can set your options for manifest files and then if you want more index if you don't just have index on html you have multiple dot html files that you want to apply the same you want the CSS files to be replaced on you should be putting them in here so that it will be replaced in those files as well and what else is there so there is something known as project.xml some people ask us if they can write their own build scripts on top of boilerplate project.xml is where you put if you are an expert in writing build scripts to run on top of boilerplate if you say and build these scripts will also run when you are running the boilerplate scripts as well so there is one other thing which is how many of you know about jace hint when you write JavaScript code you want to make sure that your code does not have errors or it is consistent with what is good JavaScript code and jace hint is a way to find out if your code has any such errors or warnings and it gives you all those warnings and we have it built in as well so you can use jace hint to find out if there are any errors in your code and if you are using css lint it's a similar tool but for css and this is also available internally so you can use and css lint to find out if there is any errors in your css no jace hint I think it applies for all tasks you have to put the globals as a comment otherwise we give an exception on the globals if you are using yui3 you can give an exception jace hint itself has an option for jQuery as far as I know any global variable why jace is hint not jace is lint jace lint well jace lint is a very angry and very rude so jace hint is slightly more polite should it not mean jace lint that you may have hurt your feelings yeah so it actually does hurt your feelings we don't want developers to hurt then we have a lot of frameworks that I am using to simplify boilerplate as part of their offering so there is a fork of vegetable fiber boilerplate that uses compass compass is a framework that is on top of what is called a sass and sass is a css free processor that would compile side sheets and well it's a good way if you are using these abstractions to use these forks and less is another abstraction that is available so there is also word pristines that use boilerplate and are I think frequently kept up to date and there is also Shopify integration and there is a note package even using HTML5 boilerplate and a lot of stuff so we have all these documentation is all available on this URL and it's typically the wiki and we edit the wiki and you can edit the wiki actually and we are on twitter, mailing list, website and all that so we also have mobile sibling projects like for mobile boilerplate is what you would use if you are developing targeting specifically or optimizing for mobile web apps and it has a lot of good defaults for that. HTML5 boilerplate only makes sure that your site is readable and provides a very basic set of defaults for mobile but if you want something more you would use mobile boilerplate and then the server conflicts I already mentioned which provides the server conflicts for other servers rather than Apache and well we would always welcome your contribution so you could do if you understand something and you want to explain that in the documentation please go ahead and write it and help us resolve some issues there on the issue tracker on github and then provide feedback if you don't think something should be in boilerplate tell us why, if you think something should be in boilerplate just tell us why and that's it so I am on tibia or general web opera general is there any work going on regarding getting all the awesomeness of cssv processes into the main spec itself no we are trying but it's very hard at least nested css it's gonna take a while but it might happen the parent selectors you mean boilerplate we have right now a prompt for isix which tells users to download chrome frame if they are on isix and don't have chrome frame so they work inside the isix apparently not that's what you are saying so you talked about good defaults and then you sort of just took those websites where the defaults are being used and you said that's what's validating I mean you talked about the good default then you just talked about and you said they are also using your defaults so the use is validating so their use is validating your defaults so I just want to ask you is validation does validation happen for use and does use lay down the convention yeah well just that when you see your site being used on these websites delpas think it's more trustworthy because such big sites are using it maybe it is in my time too so it's not propagates in that way so well when we first launched it was unprecedented the kind of support that we saw but then we saw all these other big websites using it which is why we saw even wider adoption who chose the colour for the phone selection not me I trust me one thing I always turn off but you don't pick it I know some people have had very poor as this thing of putting particular colours in a real project of us it's just hot pink always now here's another one the badass thing that's just what it looks like anything else actually what I am seeing is we are moving away from just static HTML and actually working with code frameworks we have an idea developers are working on including say HTML 5.8 into coding light what it is actually there's almost a port for almost every framework out there with HTML 5.8 but the problem is you need to make sure it's up to date some of them are not kept up so that's the problem but well if you are willing to work on it I had an issue with the build script building oh yeah you get all these cases in JavaScript but they are not replaced inside the in the templates file we have had issues with PHP files as well which we solved but I don't know about Jambo did you submit an issue actually I wrote my own script see she submitted an issue and then a pull request which fixes that so that would work for us cool thank you guys