Browsers that aden't <=8

With Windows XP killed by Microsoft, IE8 has less and less market share every week. That's why companies are deciding to drop the support for this ancient browser. In his presentation Wojtek will try to answer the question of viability of supporting IE8 in your projects. He will also tell you about things that you can start/stop using today if you drop the support. You will be amazed of what you can do in JavaScript right now - without fancy compilers, shims or hacks.

Transcript

1. BROWSERS THAT AREN’T <=8 THINGS YOU CAN START/STOP USING TODAY BY DROPPING SUPPORT FOR IE8! / Front-trends 2014 lightning talk, 07.05.2014r Wojtek Urbański @wojtiku
2. ABOUT ME Front-end developer @ - ! Working on the JIRA team with meet.js co-organizer @wojtiku Spartez We are hiring Atlassian
3. IE8 IS AS LAME AS JOKES ABOUT IT
6. IS IT WORTH IT? IE 8 was almost 44% of all IE testing at Atlassian in last ~10 months 2159 - number of test VM with IE8 instances created Assuming one test session lasts for 1 hour… it’s 90 days (24h) or 270 man days (8h), ~13 man months! Atlassian is dropping IE8 support... just about now!
7. IE USAGE STATCOUNTER.COM IE8 - 6.71% IE9 - 3.78% IE10 - 4.13% IE11 - 8.97% RANKING.PL IE8 - 3.75% IE9 - 2.17% IE10 - 2.13% IE11 - 5.46% JIRA ONDEMAND IE8 - 6.34% IE9 - 9,55% IE10 - 7.05% IE11 - 9.34% Each website is different, check your stats Windows XP SP3 support ended on April 8th, 2014!
8. WHAT’S AVAILABLE?
9. HTML5 ELEMENTS SUPPORT no more <!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->
10. addEventListener ALL THE THINGS! document.getElementById('my-button').addEventListener('click', handlerFunction); is better than function addEventHandler(elem, eventType, handler) { if (elem.addEventListener) elem.addEventListener (eventType, handler, false); else if (elem.attachEvent) elem.attachEvent ('on'+eventType, handler); } addEventHandler(document.getElementById('my-button'), 'click', handlerFunction);
11. EVENT CAPTURING
12. ECMASCRIPT 5! but no "use strict";(
13. Object.defineProperty var o = {}, val = 1; Object.defineProperty(o, "propertyKey", { //visibility in the for(var x in o) loop enumerable: false, //ability to modify this descriptor or delete property from the object configurable: false, //value can’t be changed via assignment operator writable: true, // any valid JS value value: 123 // OR getter and setter! get: function() { return val * 2; } set: function(v) { val = v; } }); // you can get the descriptor with Object.getOwnPropertyDescriptor(o, "propertyKey"); // Object {value: "propertyKey", writable: true, enumerable: false, configurable: false}
14. GETTERS AND SETTERS Imagine Backbone.js models like this this.model.attrName = 123 instead of this this.model.set("attrName", 123)
15. NATIVE-LIKE OBSERVER Check out and get/set like a boss Watch.JS //defining our object however we like var ex1 = { attr1: "initial value of attr1", attr2: "initial value of attr2" }; //defining a 'watcher' for an attribute watch(ex1, "attr1", function(){ alert("attr1 changed!"); }); //when changing the attribute its watcher will be invoked ex1.attr1 = "other value";
16. PREVENTING MODIFICATIONS var o = {}; Object.preventExtensions(o); // no new properties Object.isExtensible(o); Object.seal(o); // no new properties, existing non-configurable Object.isSealed(o); Object.freeze(o); // object is immutable Object.isFrozen(o);
17. LIST OF PROPERTIES var arr = ["a", "b", "c"]; Object.keys(arr); > ["0", "1", "2"] Object.getOwnPropertyNames(arr); > ["0", "1", "2", "length"]
18. ECMASCRIPT 5 SUPPORT - ARRAYS Array map reduce lter every some forEach indexOf and more... Array.isArray var arr = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181]; arr .sort(function(a,b){ return b - a; }) .filter(function(item) { return item % 2 == 1 }) .map(function(item) { return item * 2; }) .forEach(function(item, idx, array) { console.log(idx + ": " + item); });
19. JAVASCRIPT - OTHERS Function.prototype.bind - no more underscore! String.prototype.trim - no more $.trim! Immutable undefined Date.now Function.prototype.apply accepts array-like objects instead of just Arrays (e.g. arguments) (worked in IE8) Text Selection API Geolocation API Canvas
20. PSEUDO CLASS SELECTORS : rst-child :last-child :nth-child() :only-of-type : rst-of-type :last-of-type :nth-of-type() :only-child :checked :enabled :disabled :empty :not
22. + input:enabled + label { background: yellow; } input:checked + label { background: red; } input:disabled + label { background: silver; } <form method="post" action="/action"> <input type="checkbox" checked=""><label>a</label> <input type="checkbox"><label>b</label> <input type="checkbox" disabled=""><label>c</label> </form>
23. CSS BACKGROUNDS multiple backgrounds RGBa/HSL colors background-size SVG in CSS backgrounds #foo { background: url(top.png) no-repeat top, url(bottom.png) no-repeat bottom, url(pattern.png) repeat-x; } #a { background: rgba(255, 0, 0, 0.5); } /*Red Green Blue Alpha*/ #b { background: hsla(350, 50%, 45%, 1); } /*Hue Saturation Lightness Alpha*/ #foo { background-size: cover, contain, 100% auto; }
24. calc() width: calc(100% - 20px); Remember about performance!
25. NEW CSS UNITS rem it’s like em, only better relative to :root element vw/vh vw - 1% of viewport witdh vh - 1% of viewport height vmin and vmax not supported be careful with font-sizing
26. CSS - OTHERS media-queries box-shadow border-radius max/min-width works correctly -ms-transform opacity (no more lter!) no need for EOT fonts in @font-face
27. SVG SUPPORT Inline SVG in HTML SVG in IMG tag SVG in CSS backgrounds styling SVG via ll property
28. AND <AUDIO> MP3 & AAC <VIDEO> H.264
29. WANT TO DROP IE9 IN THE PROCESS? XMLHttpRequest 2 Web Workers Web Sockets File and FileReader API IndexedDB Of ine web applications (push|pop|replace)State ECMAScript 5 Strict Mode classList PageVisibility API CSS3 Transitions CSS3 Text-shadow CSS Repeating Gradients CSS Gradients CSS3 Animation SVG lters
30. RESOURCES MDN Can I Use HTML5please ES5 comaptibility tables by Kangax Quirks Mode
31. QUESTIONS?