Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Edge of the Web

855 views

Published on

[Slides from my 'Edge of the Web' workshop]
The web platform has evolved significantly over the last several years, giving developers more power than ever to create rich, interactive applications delivered via browsers. New capabilities in HTML, CSS and JavaScript paired with constantly updating browsers make it possible to do things on the web that used to be the exclusive domain of plugins and native apps. In this workshop, you’ll be introduced to some of the most powerful and useful techniques available to the modern web developer that will change the way you think about web app development.

The future of web app development is exciting, and these are the technologies that will underpin and drive that change. Don’t get left behind with IE8-era knowledge. Get ahead of the curve and master the edge of the web.

Published in: Software

Edge of the Web

  1. 1. So good, it hurts. Workshop Demo Download: bit.ly/TaskListDemo
  2. 2. 10 % Read 20% Hear 30% See 50% Hear + See 70% Say + Write 90% Experience
  3. 3. Hello, my name is… @toddanglin VP, Technology & Developer Relations Telerik (a Progress Company)
  4. 4. AM oBrowsers & Debugging oNew web APIs o Markup o Media o Storage o Offline PM oModern JavaScript (ES6) oModern CSS o Styling o Layouts o Mobile & Media Queries
  5. 5. 1. Expand awareness of modern web technologies 2. Introduce techniques for using modern web 3. Enhance knowledge of existing web technologies 4. Provide practical “next steps” on modern web journey
  6. 6. Source: Wikipedia, https://en.wikipedia.org/wiki/HTML5
  7. 7. 22:31
  8. 8. <HTML> CSS:3; ECMAScript(); “HTML5”
  9. 9. “Living Standard” WebSockets FileAPI WebGL HTML5 Forms Geolocation Offline Canvas Video Audio Canvas Video Geolocation Semantic Tags SVG WHATWG | W3C | IETF
  10. 10. Where the word “standard” reeks with irony
  11. 11. WD LC CR PR REC
  12. 12. Browser Layout/Rendering Engine JavaScript Engine Browser Layout Engine JavaScript Engine Mozilla Gecko Spidermonkey Chrome/Opera Blink (fork from WebKit) V8 Safari WebKit JavaScriptCore IE/Edge Trident/EdgeHTML Chakra Node.js V8
  13. 13. of internet browses with IE, FF, Safari, Chrome, or Opera 99%
  14. 14. StatCounter NetMarketShare Records data from 3 million websites Analyzes data from 40 thousand websites Analyzes 17.5 billion page views per month Analyzes 160 million unique visits per month Make no adjustments or weightings other than removing bot activity and pre-rendering Applies country weightings according to CIA Internet Traffic data. For example, if Brazil accounts for 4% of global traffic but only 2% of NetMarketShare data, the results are doubled Is independent and has no commercial partners Is a commercial company with partners paying for data Reports are based on page views Reports are based on daily unique visitors Source: http://www.sitepoint.com/browser-trends-april-2015-statcounter-vs-netmarketshare/
  15. 15. “Evergreen” Versioned WinXP WinVista < v9
  16. 16. IE Evergreen
  17. 17. Source: Morgan Stanley
  18. 18. 0 20 40 60 80 100 120 140 160 180 200 IE7 IE8 IE9 IE10 IE11 Edge (13) FeatureCount Supported HTML5/CSS3 Features As reported by CanIUse.com
  19. 19. Selectors (2.1) position:fixed 7.0 LocalStorage DragDrop API JSON querySelector 8.0 Video Audio WOFF SVG Canvas Geolocation Semantic Tags Lots of CSS3 9.0 XHR2 Web Workers Web Sockets IndexedDB History API File API CORS Blob URLs Typed Arrays Defer/Async Form Validation New Input Types Offline App Cache Much more CSS3 10.0
  20. 20. Selectors (2.1) position:fixed 7.0 LocalStorage DragDrop API JSON querySelector 8.0 Video Audio WOFF SVG Canvas Geolocation Semantic Tags Lots of CSS3 9.0 XHR2 Web Workers Web Sockets IndexedDB History API File API CORS Blob URLs Typed Arrays Defer/Async Form Validation New Input Types Offline App Cache Much more CSS3 10.0 3D Transforms Web Crypto CustomEvent X-Doc Messaging DeviceOrientation FileReader API HTTP/2 CSP 1.0 SVG effects Touch events Video tracks ES6 getUserMedia Templates Picture Meter PointerLock API ASM.js Gamepad API Date/time inputs … Edge (13)
  21. 21. status.modern.ie
  22. 22. 17 18 33 113 113 222 250 270 300 304 322 329 346 396 396 396 405 449 452 467 470 493 497 501 526 0 100 200 300 400 500 600 IE10 IE11 Edge
  23. 23. X X X X X X X X X X X X X X X Only use features natively available in all target browsers
  24. 24. X X X X X X X X X X X X X X X Only use features either natively available OR available via JavaScript polyfill X X
  25. 25. X X X X X X X X X X X X X X X Only use features available in target browsers AND design alternate experience for other browsers X X X X X X X 22:31
  26. 26. graceful degradation
  27. 27. [Source: Aaron Olaf, Flickr] 22:31
  28. 28. [Source: Mercedes USA, http://mbusa.com/]22:31
  29. 29. X X X X X X X X X X X X X X X Create experiences targeted at specific browsers (or classes of browsers) X X X X X X X 22:31
  30. 30. Modernizr.[featureName] if (Modernizr.canvas) { //Use It! } .[featureName] || .no-[featureName] .no-canvas { //Styles } .canvas { //Other Styles}
  31. 31. Modernizr
  32. 32. It’s more than the DOM and Images
  33. 33. DOM/Markup JavaScript API CSS States WebAPI
  34. 34. (or today, too, if IE support is not critical)
  35. 35. HTML5 Forms Geolocation Video CSS3 {Web Sockets} {Storage} {IndexedDb} {Semantic Data}
  36. 36. tag: <header> <footer> <nav> <article> <hgroup> support: IE9, FF3.5, Safari, Chrome, Opera <body> <div id=“header”> </div> <div id=“content”> <div id=“nav”></div> </div> <div id=“footer”> </div> </body> <body> <header> </header> <section> <nav></nav> </section> <footer></footer> </body> VS.
  37. 37. oAccessibility* oSEO* oCode readability oDeveloper street cred oWhy not?
  38. 38. data-* Valid approach to storing data in HTML <!--Store values in data-* attributes--> <div id="mydiv" data-key="26" data-name="My product name"> ... </div> <!--Access values with JavaScript--> var key = mydiv.getAttribute("data-key") //OR var key = mydiv.dataset.key support: IE9, FF3.5, Safari, Chrome, Opera
  39. 39. oEmbed data in page 22:31
  40. 40. Semantic rich media Reach more people on more devices Container Codec Silverlight FlashHTML5
  41. 41. <video src="clip.mp4" controls type="video/mp4"> <object classid="..."> <param name="flashvars" value="file=clip.mp4" /> <param name="movie" value=“player.swf" /> <embed src="player.swf” type="application/x-shockwave- flash” flashvars="file=clip.mp4" /> Your browser does not support video </object> </video> support: IE9, FF3.6, Safari, Chrome, Opera 22:31
  42. 42. oVideo for plug-less mobile devices oEliminate dependencies on Flash/Silverlight (future proofing) 22:31
  43. 43. tag: time, date, search, email, etc. Web Forms 2.0 HTML5 Forms <form> <input type="email" autofocus="autofocus" placeholder="Enter your email" /> </form> support: Safari, FF4*, Chrome, Opera
  44. 44. oHTML: Required, Type, Pattern oJS: checkValidity() oCSS: :invalid, :valid, :required <form> <input type="email" placeholder="Enter your email" required title="Please enter a valid email address" /> <input type="submit" value="Go" /> </form>
  45. 45. via A List Apart (bit.ly/html5validation) 22:31
  46. 46. 22:31 iOS 7 & 8 deprecated datetime support & handles week poorly
  47. 47. 22:31
  48. 48. 22:31 “Consuming raw or undercooked meat, poultry, seafood, shellfish or eggs may increase risk of foodborne illness.”
  49. 49. COOKEDRAW 22:31 Available heat: - Kendo UI (validation + UI) - jQuery HTML5 Form - H5F
  50. 50. oMobile input oImproved form behavior in modern browsers oSemantic forms oNew styling options 22:31
  51. 51. navigator.geolocation.getCurrentPosition(callback); function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy; } support: IE9, Safari, FF3.5, Chrome, Opera opt-in user feature to share physical position
  52. 52. COOKEDRAW 22:31
  53. 53. oEnrich apps with location awareness oTrack user position 22:31
  54. 54. sessionStorage = per window localStorage = per browser <script> sessionStorage.setItem('value', this.value); localStorage.setItem('value', this.value); sessionStorage.getItem(‘value’); sessionStorage.clear(); localStorage.clear(); </script> support: IE9, FF3.5, Safari, Chrome, Opera 5 MB limit
  55. 55. protocol host port (+ browser mode)
  56. 56. COOKEDRAW 22:31 Available heat: - localstorage polyfill - amplifyJS - lawnchairJS
  57. 57. oBetter than cookies oSimple API 22:31
  58. 58. easy drag & drop for any HTML element <!-- Make an HTML element draggable --> <div id=“myDiv” draggable=“true”>...</div> //Handle the DnD events, such as Drop function onDrop(e){ //e.target is the current target element if(e.stopPropigation) e.stopPropigation(); //Prevent redirect //Do something with payload return false; } support: IE9, FF, Safari, Chrome, Opera
  59. 59. IMG File HTML draggable dragstart drag dragenter dragleave dragover drop dragend Change appearance, Set payload Change drop target appearance Process DnD payload
  60. 60. dragstart drop e.dataTransfer.setData([MIME type], [payload]) e.dataTransfer.getData([MIME type]) e.dataTransfer.files; //FileList object
  61. 61. COOKEDRAW 22:31 Available heat: - Kendo UI (DnD & Upload) - jQuery UI Draggable
  62. 62. oSupport DnD files in the browser oReduce JS footprint 22:31
  63. 63. access to local file system & data streaming var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { var dataUrl = event.target.result; }; reader.readAsDataURL(file); .readAsBinaryString(file); .readAsText(file); .readAsArrayBuffer(file); support: IE10, FF4, Chrome, Opera 11.1
  64. 64. COOKEDRAW 22:31
  65. 65. oProcess files with fewer server trips oImprove usability oDesktop-like experiences oBetter file upload 22:31
  66. 66. <div id="slider"> <input checked="" type="radio" name="slider" id="slide1" selected="false"> <input type="radio" name="slider" id="slide2" selected="false"> <input type="radio" name="slider" id="slide3" selected="false"> <input type="radio" name="slider" id="slide4" selected="false"> <div id="slides"> <div id="overflow"> <div class="inner"> <img src="images//rock.jpg"> <img src="images/grooves.jpg"> <img src="images/arch.jpg"> <img src="images/sunset.jpg"> </div> </div> </div> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> </div>
  67. 67. <img-slider> <img src="images/sunset.jpg" alt="a dramatic sunset”> <img src="images/arch.jpg" alt="a rock arch”> <img src="images/grooves.jpg" alt="some neat grooves”> <img src="images/rock.jpg" alt="an interesting rock”> </img-slider>
  68. 68. 1. Custom Elements 2. Shadow DOM 3. Templates 4. HTML Imports <head> <link rel=“import” href=“/components/my-tag.html”> ... </head> <body> <my-tag ranking=“2” /> </body>
  69. 69. Shadow Root <img-slider> </img-slider> Shadow Host Shadow Boundary Component CSS Component JS Component DOM
  70. 70. COOKEDRAW 22:31 Available heat: - X-Tags - Polymer
  71. 71. Polymer (Google) IE10+ X-Tag (Mozilla) IE9+ *Custom Elements only
  72. 72. <kendo-dropdownlist style="width: 100%;"> <option value="male" selected>Male</option> <option value="female">Female</option> <option value="notsay">Rather not say</option> </kendo-dropdownlist> <select id="ddl" style="width: 100%;"> <option value="male" selected>Male</option> <option value="female">Female</option> <option value="notsay">Rather not say</option> </select> <script> $("#ddl").kendoDropDownList(); </script>
  73. 73. oImproved page composition oEncapsulate/isolate related DOM/CSS oHigher cohesion oCreate reusable building blocks oEasier to ready
  74. 74. api: openDatabase db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000); if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); }); } db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);}); support: Safari, Chrome, Opera “This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.” –W3C
  75. 75. JavaScript API for indexed local storage var request = window.indexedDB.open("CandyDB", "My candy store database"); request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // User's first visit, initialize database. ... } } support: IE9*, FF4, (Chrome)
  76. 76. COOKEDRAW 22:31 Available heat: - IDBWrapper - PouchDB - lawnchairJS
  77. 77. oBrowser storage of larger datasets oOffline data oBetter than local storage for complex data operations 22:31
  78. 78. api: WebSocket ws = new WebSocket("ws://localhost:8282/test”); ws.onopen = WSonOpen; ws.onmessage = WSonMessage; ws.onclose = WSonClose; ws.onerror = WSonError; function WSonMessage(event) { $(“#myDiv”).html(event.data); }; support: IE9**, Safari 5, Chrome, FF4*, Opera 11*
  79. 79. COOKEDRAW 22:31 Available heat: - SignalR - Socket.IO - Sockjs
  80. 80. o2-way real-time messaging oReplace long-polling & interval “hacks” oEliminate dependencies on plug-ins 22:31
  81. 81. tag: <html manifest="html5demo.manifest"> MIME type: text/cache-manifest CACHE MANIFEST # Files you want cached for your app to work offline myLogo.jpg //Interacting with cache window.applicationCache.update(); alert(window.applicationCache.status); support: FF3.5, Safari, Chrome, Opera 10.6
  82. 82. COOKEDRAW 22:31
  83. 83. oAggressive resource caching oFoundation for offline 22:31
  84. 84. Service Workers Superior to AppCache by providing programmatic control offline cache. Background thread for web apps with control over network requests.
  85. 85. ECMAScript 6
  86. 86. <TODO: HAPPY PLACE IMAGE>
  87. 87. Why JavaScript? WHY?!
  88. 88. No, really. Brendan Eich. Netscape.
  89. 89. : :: :
  90. 90. Sept 1995 Netscape Aug 1996 Microsoft June 1997 ECMAScript // Mar 1999 XHR Feb 2005 Ajax Aug 2001 IE6 Firefox Safari Chrome Mobile
  91. 91. Scott Koon
  92. 92. Faster. Easier. Better.
  93. 93. 1. Slow Execution 2. Memory leaks 3. Poor Code Organization 4. Lack of Understanding
  94. 94. jQuery is a friend… …that will stab you in the back. Prove It
  95. 95. CACHE OBJECTS $("#myDiv").css("color","red"); $("#myDiv").css("opacity",1); BAD $("#myDiv").css("color","red") .css("opacity",1); BETTER var $myDiv = $("#myDiv"); $myDiv.css("color","red"); $myDiv.css("opacity",1); BEST* Prove It
  96. 96. NATIVE LOOPS $.each(arr, function (i) {i / 2;}); BAD arr.forEach(function (i) {i / 2;}); BETTER var i = 0, len = arr.length; for (i = 0; i < len; i += 1) { i / 2; } BEST* Prove It
  97. 97. Avoid Global Variables They're slow & rude.
  98. 98. function add(num1, num2){ return num1 + num2; } var result = add(5, 10); 22:31 Prove It
  99. 99. var name = "Todd"; function sayHello(){ alert(name); } function sayHello(){ var name = "Todd"; alert(name); } 22:31 BAD BETTER
  100. 100. function doInitStuff(){ ... } function loadSomething(){ ... } function handleButtonClick(){ ... } function harlemShake(){ ... } yourFile.js
  101. 101. function doInitStuff(){ var user = "Todd"; } function loadSomething(){ if (user == "Todd") ... } function handleButtonClick(){ ... } function harlemShake(){ ... } yourFile.js
  102. 102. var user = ""; function doInitStuff(){ user = "Todd"; } function loadSomething(){ if (user == "Todd") ... } function handleButtonClick(){ ... } function harlemShake(){ ... } yourFile.js
  103. 103. var [window].user = ""; function [window].doInitStuff(){ user = "Todd"; } function [window].loadSomething(){ if (user == "Todd") ... } function [window].handleButtonClick(){ ... } function [window].harlemShake(){ ... yourFile.js
  104. 104. var app = (function(){ var _name = "Todd"; return{ sayHello: function(){ alert(_name); } } }()); app.sayHello(); 22:31 BEST(ISH)
  105. 105. var app = (function(){ var _name = "Todd"; return{ sayHello: function(){ alert(_name); }, sayGoodbye: function(){ alert(_name); } } }()); 22:31 BEST(ISH) Your “Public” API
  106. 106. SUPER PATTERN (function(window,$,c){ var _private = "Todd"; function privateClass(){} function myWidget(){} myWidget.doSomething = function(){}; window.myWidget = myWidget; }(window,jQuery,console)); Immediately Invoked Function Expressions (IIFE) + Global Imports + [Prototype] Prove It
  107. 107. Bind to Events & Pub/Sub Just listen.
  108. 108. <button id="btn" onclick="sayHello();"> Click Me </button> $(function(){ $(“#btn").on("click",sayHello); }); 22:31 BAD BETTER
  109. 109. $(document).on("click", "button", sayHello); 22:31 BEST Why? Compare A Compare B
  110. 110. function doSomthing{ ... doSomethingElse(); doOneMoreThing(); } 22:31 BAD
  111. 111. function doSomething() { ... $(document).trigger("DO_SOMETHING_DONE"); } $(document).on("DO_SOMETHING_DONE", function(){ doSomethingElse(); }); 22:31 BETTER Example
  112. 112. function doSomething(successCallback, failCb){ //Do something async... if(error){ failCb(); } else { successCallback(); } } function doSomethingElse(){ doSomething(function(){...}, function()...); } 22:31 ANOTHER PROBLEM
  113. 113. function doSomething(){ var dfd = new $.Deferred(); //Do something async, then... //dfd.resolve(); //OR //dfd.reject(); return dfd.promise(); //Returns immediately! } function doSomethingElse(){ doSomething().done(//Success!).fail(//Error); } 22:31 ANOTHER SOLUTION
  114. 114. Don't fondle the DOM. Go with the flow.
  115. 115. My Awesome Page Copyright Fo'eva Lorem ipsumy samplish jibber jabbish text only meant to serve as a placeholder, and much like Pi, should never repeat or be read much beyond the first few characters.
  116. 116. function doSomething{ ... var $list = $("body").append("<ul>"); for(var i = 0; i < 10; i++){ $list.append("<li>"+ i +"</li>") } } 22:31 BAD
  117. 117. function doSomething{ ... var $domChunk = $("<ul>"); for(var i = 0; i < 10; i += 1){ $domChunk.append("<li>"+ i +"</li>"); } $("body").append($domChunk); } 22:31 BETTER
  118. 118. DOM SPEED WITH STRINGS & INNERHTML function doSomething{ ... var domString = "<ul>"; for(var i = 0; i < 10; i += 1){ domString += "<li>"+ i +"</li>"; } domString += "</ul>" $("body")[0].innerHTML = domString; } Prove It
  119. 119. <script type="text/x-kendo-template" id="tmp"> <ul> #for(var i = 0; i < data.length; i += 1){# <li>#= data[i] #</li> #}# </ul> </script> function doSomething(){ var myData = [1,..,10]; var template = kendo.template($("#tmp").html()); $("body").append(template(myData)); } 22:31 BEST Prove It
  120. 120. Begin adopting ES6. (Just get ready to compile your JavaScript)
  121. 121. obreak ocase ocatch ocontinue odebugger odefault odelete oelse ofinally ofor ofunction oif oin oinstanceof onew oreturn oswitch othis othrow otry otypeof ovar owhile owith
  122. 122. o break o case o class o catch o const o continue o debugger o default o delete o else o export o extends o finally o for o function o if o import o in o instanceof o let o new o return o super o switch o this o throw o try o typeof o var o while o with o yield
  123. 123. o arrows o classes o enhanced object literals o template strings o destructuring o default + rest + spread o let + const o iterators + for..of o generators o unicode o modules o module loaders o map + set + weakmap + weakset o proxies o symbols o subclassable built-ins o promises o math + number + string + array + object APIs o binary and octal literals o reflect api o tail calls
  124. 124. oShort-hand for function BEFORE: myArray.forEach(function(item){ alert(item); }); NOW: myArray.forEach(item => { alert(item); }); Example:
  125. 125. Guaranteed to Hurt Your Feelings™ 22:31 MINIFY YOUR JS Words are for humans. MASTER BROWSER DEV TOOLS Debug JavaScript where it runs.
  126. 126. Everything you always wanted in CSS
  127. 127. <html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Lorem ipsum</p> </font> </table> </body> </html> {HTML}
  128. 128. <html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body> </html> structure body { color:#FFF; } header { margin:5px; } article { margin:5px 0; padding: 10px; background: #333; } style {HTML} {CSS}
  129. 129. 22:31
  130. 130. CSS 2.0++++ Module Status Animations WD 2D/3D Transformations WD Selectors (Level 3) REC Media Queries (Level 3) REC Backgrounds & Borders (rounded corners) CR Text Decoration (text shadows, outline) CR CSS 2.1 REC WD LC CR PR REC
  131. 131. WD LC CR PR REC CSS 2.1 CSS3 Color Selectors Media Queries Backgrounds & Borders Multi-column Flex Box Marquee 25+ Drafts Transitions Transformations Animations Gradients CSS3 Text
  132. 132. -webkit -moz -o -ms "standard" way browsers implement custom features. 22:31
  133. 133. RECENT NEWS Browser "flags" will handle emerging feature
  134. 134. -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 2px #333; -webkit-box-shadow: 2px 2px 2px #333; box-shadow: 2px 2px 2px #333; -webkit-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px;
  135. 135. * E[foo] E[foo="bar"] E[foo~="bar"] E[foo|="en"] E:first-child E:lang(fr) E:hover E:focus E:disabled E::before E::after E > F E + F E E:link E:active E:visited E::first-line E::first-letter E.warning E#myid E F E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:checked E:not(s) E ~ F
  136. 136. oPowerful new selector options //Alternating Items li:nth-child(odd) { color: blue; } li:nth-child(even) { color: green; } li:nth-child(3n) { color: red; } //Every 3rd item //First/Last Items li:first-of-type { color: blue; } li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last //Enabled/Disabled input:enabled { border: 2px solid green; } input:disabled { background-color: #BBB; } *Use jQuery to support legacy browsers
  137. 137. 22:31 Licensing. (And then file format.) (And then performance.) (And then Comic Sans.)
  138. 138. @font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”); } //Usage h3 { font-family: Delicious, sans-serif; }
  139. 139. 22:31
  140. 140. 22:31
  141. 141. -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 2px #333; -webkit-box-shadow: 2px 2px 2px #333; box-shadow: 2px 2px 2px #333; -webkit-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px; 22:31
  142. 142. 22:31
  143. 143. 22:31
  144. 144. /*These two rules do the same thing*/ @media all and (min-width:500px) { … } @media (min-width:500px) { … } /*Multiple conditions*/ @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }
  145. 145. • width/height • device-width/height • aspect-ratio • orientation • color/color-index • resolution + media type & logical operators
  146. 146. (Eventually.)
  147. 147. Flex Container display: flex; Flex Item Flex Item Flex Item Flex container controls items width/ height/ order
  148. 148. Flex Container display: flex; Flex Item Flex Item Flex Item order: -1;
  149. 149. Flex Container display: flex; Flex Item Flex Item flex: 2; Flex Item order: -1;
  150. 150. Flex Container display: flex; flex-direction: column; Flex Item Flex Item flex: 2; Flex Item order: -1;
  151. 151. Flex Container display: flex; justify-content: flex-start; Flex Item Flex Item flex: 2; Flex Item order: -1;
  152. 152. Flex Container display: flex; justify-content: flex-end; Flex Item Flex Item flex: 2; Flex Item order: -1;
  153. 153. Flex Container display: flex; justify-content: center; Flex Item Flex Item flex: 2; Flex Item order: -1;
  154. 154. Flex Container display: flex; align-items: flex-start; Flex Item Flex Item flex: 2; Flex Item order: -1;
  155. 155. Flex Container display: flex; align-items: flex-end; Flex Item Flex Item flex: 2; Flex Item order: -1;
  156. 156. Flex Container display: flex; align-items: stretch; Flex Item Flex Item flex: 2; Flex Item order: -1;
  157. 157. display: flex; margin:auto; Extra
  158. 158. .parent .parent { display:grid; grid-columns: auto 100px 1fr 2fr; grid-rows: 50px 5em auto; } 100px 1fr 2frauto 50px 5em
  159. 159. .header { grid-column-span: 3; grid-row: 1; } 100px 1fr 2frauto 50px 5em .header .side .side { grid-column: 4; grid-row: 2; grid-row-span: 2; }
  160. 160. Good Bye. Adios. Auf Wiedersehen. E: anglin@telerik.com T: @toddanglin S: slideshare.net/toddanglin

×