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. @angustweets STOP BEING PERFE T C

  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
  3. and I’m writing a Book...

  4. None
  5. The 5 steps to JavaScript Perfectionism

  6. 1. Discovery

  7. (weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit)

    WTF? JavaScript
  8. 2. Consternation

  9. None
  10. 3. Despair

  11. JavaScript developer JavaScript

  12. 4. The Shining Knight

  13. None
  14. 5. The JavaScript Police™

  15. http://stackoverflow.com/questions/3959211/fast-factorial-function-in-javascript

  16. So why do we need imperfection?

  17. 1. Technology thrives on Open Minds

  18. Jed Schmidt has an open mind

  19. None
  20. Web Rebels 2014

  21. ‘Oslo’ === ‘Oslo’; //true new String(‘Oslo’) === new String(‘Oslo’); //false

    Objects have identity, primitives don’t
  22. None
  23. (picture) 2. Context > Dogma

  24. -Classical Inheritance-

  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();
  26. This is why people hate JavaScript

  27. But wait...

  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);
  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);
  30. or just forget OO entirely

  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');
  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');
  33. -hasOwnProperty-

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

    is essential when iterating over the properties of any object” —JavaScript Garden
  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]); } }
  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]); } }
  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
  38. -Array constructor-

  39. [] or new Array?

  40. Google Style Guide google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml? showone=Array_and_Object_literals#Array_and_Object_literals

  41. None
  42. Google Developer Day V8 Performance Tuning Tricks https://mkw.st/p/gdd11-berlin-v8-performance-tuning-tricks/#44

  43. None
  44. more importantly you can write neat functions like...

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

    < 1 ? '' : new Array(count + 1).join(this); } 'me'.times(10); //"memememememememememe"
  46. and...

  47. function range(max) { return Array.apply(0,Array(max)).map(function(e,i){ return i+1; }) } range(10);

    //[1,2,3,4,5,6,7,8,9,10]
  48. -equality-

  49. “Always use === and !==” - Douglas Crockford, The Good

    Parts
  50. if (x == null) //is exactly equivalent to... if (x

    === null || x === undefined)
  51. if (typeof x == “function”)

  52. -with-

  53. //using Ramanujan's approximation function factorial(n){ var r = Math.sqrt(Math.PI)*Math.pow(n/Math.E,n); r

    *= Math.pow(8*Math.pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; }
  54. //using Ramanujan's approximation function factorial(n){ var r = Math.sqrt(Math.PI)*Math.pow(n/Math.E,n); r

    *= Math.pow(8*Math.pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; }
  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; } }
  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; } }
  57. with as equivalent to let

  58. apparently this is our worst nightmare...

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

    i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };
  60. you could wrap it in function scope...

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

    i < nodes.length; i++) { nodes[i].onclick = function(i) { return function(e) {alert(i)}; }(i); } };
  62. or use with (safely)

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

    i < nodes.length; i++) { with ({i:i}) { nodes[i].onclick = function(e) {alert(i)} } } };
  64. -comma operator-

  65. “but it’s really complicated”

  66. doThis(), doThat(); 1) do this 2) then do that

  67. lets you do two things when JavaScript expects one

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

    i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };
  69. var addHandlers = function(nodes) { for (var i = 0;

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

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

  72. function getRandomPrime() { while(n = Math.round(Math.random()*1000), !isPrime(n)); return n; }

  73. make eval run globally

  74. (function() { var localStorage = "bwahahahaha!" return eval("localStorage") })(); //"bwahahahaha!"

  75. (function() { var localStorage = "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage

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

    "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage {length: 0}"
  77. Thanks Comma Operator!!! , Really it was Nothing!

  78. functional programming

  79. None
  80. functional programming

  81. functional programming languages

  82. JavaScript is not a functional language But it has functional

    idioms
  83. function passing higher order functions function composition

  84. Use them and have fun with them You don’t need

    to be functionally pure
  85. 3. Play == Learning

  86. experiment code outside your comfort zone

  87. Future Java Developer

  88. None
  89. Some replies...

  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!”
  91. me

  92. None
  93. Don’t let best practices do your thinking for you

  94. JavaScript is not a Science

  95. There is no Panacea

  96. Your code will Break - it always does. Keep it

    simple and human readable so it’s easier to fix.
  97. Most importantly...

  98. Don’t take anything I’ve said seriously I’m just exploring. You

    should explore too.
  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
  100. @angustweets STOP BEING PERFE T C Tusen Takk!