Stop being Perfect

Stop being Perfect

Presented at Web Rebels, Oslo, Norway
May 22nd 2014

52c6174ba60557536f93809b4e95d97c?s=128

Angus Croll

May 22, 2014
Tweet

Transcript

  1. 2.

    I’m British but I live in America I work at

    Twitter (used by twitter.com, tweetdeck, airbnb, beats music etc.) I co-wrote Flight
  2. 4.
  3. 9.
  4. 13.
  5. 19.
  6. 22.
  7. 25.

    var Widget = function(color) { this.color = color; }; Widget.prototype.render

    = function() { console.log('render...', 'width:', this.width, 'height:', this.height, 'color:', this.color); } var Button = function(width, height, cb, label, color) { this.width = width; this.height = height; this.cb = cb; this.label = label; Widget.call(this, color); }; Button.prototype = new Widget(); Button.prototype.constructor = Button; Button.prototype.initialize = function() { console.log('init...', 'onclick:', this.cb, 'label:', this.label); }; var b = new Button(20, 30, alert, 'hello', 'blue') b.initialize(); b.render();
  8. 28.

    var widget = { render : function() { console.log('render...', 'width:',

    this.width, 'height:', this.height, 'color:', this.color); } } var button = { initialize: function() { console.log('init...', 'onclick:', this.cb, 'label:', this.label); widget.render.call(this); } } var myButton = { width:20, height:30, cb:alert, label:'hello', color:'blue'}; button.initialize.call(myButton);
  9. 29.

    var widget = { render : function() { console.log('render...', 'width:',

    this.width, 'height:', this.height, 'color:', this.color); } } var button = { initialize: function() { console.log('init...', 'onclick:', this.cb, 'label:', this.label); widget.render.call(this); } } var myButton = { width:20, height:30, cb:alert, label:'hello', color:'blue'}; button.initialize.call(myButton);
  10. 31.

    var widget = { render : function(width, height, color) {

    console.log('render...', 'width:', width, 'height:', height, 'color:', color); } } var button = { initialize: function(cb, label, width, height, color) { console.log('init...', 'onclick:', cb, 'label:', label); widget.render(width, height, color); } } button.initialize(20, 30, alert, 'hello', 'blue');
  11. 32.

    var widget = { render : function(width, height, color) {

    console.log('render...', 'width:', width, 'height:', height, 'color:', color); } } var button = { initialize: function(cb, label, width, height, color) { console.log('init...', 'onclick:', cb, 'label:', label); widget.render(width, height, color); } } button.initialize(20, 30, alert, 'hello', 'blue');
  12. 34.

    “Only hasOwnProperty will give the correct and expected result; this

    is essential when iterating over the properties of any object” —JavaScript Garden
  13. 35.

    var obj = Object.create(null); obj.a = 3; obj.b = 5;

    for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } }
  14. 36.

    var obj = Object.create(null); obj.a = 3; obj.b = 5;

    for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } }
  15. 37.

    var obj = Object.create(null); obj.a = 3; obj.b = 5;

    for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } } TypeError: [Object Object] has no method hasOwnProperty
  16. 41.
  17. 43.
  18. 45.

    //From prototype.js extension of //String.prototype function times(count) { return count

    < 1 ? '' : new Array(count + 1).join(this); } 'me'.times(10); //"memememememememememe"
  19. 46.
  20. 50.
  21. 52.
  22. 53.
  23. 54.
  24. 55.

    //using Ramanujan's approximation function factorial(n){ with(Math) { var r =

    sqrt(PI)*pow(n/E,n); r *= pow(8*pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; } }
  25. 56.

    //using Ramanujan's approximation function factorial(n){ with(Math) { var r =

    sqrt(PI)*pow(n/E,n); r *= pow(8*pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; } }
  26. 59.

    var addHandlers = function(nodes) { for (var i = 0;

    i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };
  27. 61.

    var addHandlers = function(nodes) { for (var i = 0;

    i < nodes.length; i++) { nodes[i].onclick = function(i) { return function(e) {alert(i)}; }(i); } };
  28. 63.

    var addHandlers = function(nodes) { for (var i = 0;

    i < nodes.length; i++) { with ({i:i}) { nodes[i].onclick = function(e) {alert(i)} } } };
  29. 68.

    var addHandlers = function(nodes) { for (var i = 0;

    i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };
  30. 69.

    var addHandlers = function(nodes) { for (var i = 0;

    i < nodes.length; console.log(i),i++) { nodes[i].onclick = function(e) {alert(i);} } };
  31. 70.

    var addHandlers = function(nodes) { for (var i = 0;

    i < nodes.length; console.log(i),i++) { nodes[i].onclick = function(e) {alert(i);} } };
  32. 76.

    //see http://perfectionkills.com/global-eval-what- are-the-options/ by Kangax (function() { var localStorage =

    "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage {length: 0}"
  33. 79.
  34. 88.
  35. 90.

    “use [] not new Array” “aren't r and i also

    global?” “eval.....” “global arr variable :P” “Why is it Useful?” “evil() is like cheating” “no global functions!”
  36. 91.

    me

  37. 92.
  38. 96.

    Your code will Break - it always does. Keep it

    simple and human readable so it’s easier to fix.
  39. 99.

    Picture Credits Mr Perfect by Roger Hargreaves http://www.mrmen.com/characters/mr-perfect/index.html If Hemingway

    wrote JavaScript by Angus Croll No Starch Press Bayeux Tapestry Maker http://bayeux.datensalat.net The Scream by Edvard Munch JavaScript: Good Parts by Douglas Crockford http://shop.oreilly.com/product/9780596517748.do cheetah cubs 2013bestpicz.blogspot.co.uk lion cubs https://c2.staticflickr.com/6/5339/6947068456_0b99b8fa58_z.jpg