Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Trends to 2015

othree
October 22, 2015

Web Trends to 2015

othree

October 22, 2015
Tweet

More Decks by othree

Other Decks in Technology

Transcript

  1. ORM

  2. Asset Pipeline • All together assets pack system • JS,

    CSS, images, html • Concat, minimize, hashize, update file name
  3. Nesting nav { ul { margin: 0; padding: 0; list-style:

    none; } li { display: inline-block; } }
  4. function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var

    ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); } } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shape
  5. function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var

    ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shape
  6. Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 5th Edition

    / December 2009 ECMAScript Language Specification
  7. # Assignment: number = 42 opposite = true # Conditions:

    number = -42 if opposite # Functions: square = (x) -> x * x
  8. # Objects: math = root: Math.sqrt square: square cube: (x)

    -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis?
  9. AMD

  10. UMD

  11. (function (root, factory) { if (typeof define === 'function' &&

    define.amd) { // AMD. Register as an anonymous module. define(['b'], factory); } else { // Browser globals root.amdWeb = factory(root.b); } }(this, function (b) { return {}; }));
  12. <brick-tabbar id="demo-bar"> <brick-tabbar-tab target="a" selected> <i class="fa fa-camera-retro"></i> </brick-tabbar-tab> <brick-tabbar-tab

    target="b"> <i class="fa fa-envelope"></i> </brick-tabbar-tab> <brick-tabbar-tab target="c"> <i class="fa fa-home"></i> </brick-tabbar-tab> </brick-tabbar>
  13. Reference number ECMA-123:2009 © Ecma International 2009 ECMA-262 6th Edition

    / June 2015 ECMAScript® 2015 Language Specification