Not your mother's JavaScript

6,938 views
6,318 views

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,938
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
51
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Not your mother's JavaScript

  1. Tuesday, September 28, 2010
  2. Not your mother’s JavaScript Tobias Schneider, @tobeytailor - uxebu Sep 26 2010, jsconf.eu Tuesday, September 28, 2010
  3. @tobeytailor Munich based web worker Born as a natural coder in the Black Forrest JavaScript hacker for ~8 years now Pushing limits for uxebu since August 2010 5 GitHub projects, 1626 watchers, 1143 followers 3 bad jokes Tuesday, September 28, 2010
  4. So you’re a hacker, but why JavaScript? Small, fast and widely misunderstood Most flexible language of the world It’s open & almost everywhere Hack driven enhanced You can haz jsconf It isn’t perfect, still has lots of limits and constrains... Tuesday, September 28, 2010
  5. Constraints boost creativity “If you don't have the right equipment for the job, you just have to make it yourself.” (MacGyver) Tuesday, September 28, 2010
  6. Hack driven enhancement The evolution of JavaScript is a history full of workarounds. Tuesday, September 28, 2010
  7. First, there’s a limitation Tuesday, September 28, 2010
  8. Then there’s a hack Tuesday, September 28, 2010
  9. The interwebs likes it? Tuesday, September 28, 2010
  10. Then it gets a buzzy name and becomes a standard Tuesday, September 28, 2010
  11. Do you remember... AJAX in 2001? Canvas before 2004? Cross Domain Ajax 2010? Tuesday, September 28, 2010
  12. AJAX 2001 Requirement: Requesting the server without reloading the whole page again & again & again... Tuesday, September 28, 2010
  13. AJAX 2001 Requirement: Requesting the server without reloading the whole page again & again & again... Why? Loading data async Tuesday, September 28, 2010
  14. AJAX 2001 Requirement: Requesting the server without reloading the whole page again & again & again... Why? Loading data async Hack iFrame fun Tuesday, September 28, 2010
  15. AJAX 2001 Requirement: Requesting the server without reloading the whole page again & again & again... Why? Loading data async Hack iFrame fun Specification today XHR Tuesday, September 28, 2010
  16. Canvas 2003 Requirement: Drawing pictures in the browser Tuesday, September 28, 2010
  17. Canvas 2003 Requirement: Drawing pictures in the browser Why? LASERS!!! Tuesday, September 28, 2010
  18. Canvas 2003 Requirement: Drawing pictures in the browser Why? LASERS!!! Hack Tons of IMG’s in your DOM rendered with IM Tuesday, September 28, 2010
  19. Canvas 2003 Requirement: Drawing pictures in the browser Why? LASERS!!! Hack Tons of IMG’s in your DOM rendered with IM Specification today Canvas API (ExCanvas!) Tuesday, September 28, 2010
  20. Cross Domain Ajax Requirement: Having a script from domain X loading data from Y Tuesday, September 28, 2010
  21. Cross Domain Ajax Requirement: Having a script from domain X loading data from Y Why? e.g. Pulling public web services Tuesday, September 28, 2010
  22. Cross Domain Ajax Requirement: Having a script from domain X loading data from Y Why? e.g. Pulling public web services Hack JSONP Tuesday, September 28, 2010
  23. Cross Domain Ajax Requirement: Having a script from domain X loading data from Y Why? e.g. Pulling public web services Hack JSONP! Tuesday, September 28, 2010
  24. Cross Domain Ajax Requirement: Having a script from domain X loading data from Y Why? e.g. Pulling public web services Hack JSONP! Specification someday? XDR, Cross-Origin Resource Sharing Tuesday, September 28, 2010
  25. Current state? Tuesday, September 28, 2010
  26. Handling binary data Tuesday, September 28, 2010
  27. Requirement? Dealing client-side with low level file formats and protocols Tuesday, September 28, 2010
  28. Why? Tuesday, September 28, 2010
  29. Low level file formats Parsing/Creating ZIP, PDF, SWF... Tuesday, September 28, 2010
  30. Networking protocols http://github.com/kanaka/noVNC Tuesday, September 28, 2010
  31. Emulators http://github.com/bfirsh/jsnes http://www.kingsquare.nl/jsc64 Tuesday, September 28, 2010
  32. The hack var xhr = new XMLHttpRequest(); xhr.open("GET", "test.png", false); xhr.overrideMimeType("text/plain; charset=x-user-defined"); xhr.send(); if(200 != xhr.status){ var data = xhr.responseText; for(var i = 0; undefined != data[i++];) var byteValue = data.charCodeAt(i) & 0xff; ... } } Tuesday, September 28, 2010
  33. The hack? Tuesday, September 28, 2010
  34. The hack? http://github.com/pkrumins/node-png var sys = require("sys"), fs = require("fs"); var Png = require("png").Png, data = fs.readFileSync("data.bin"), png = new Png(data, Buffer.length / 4, 1, "RGBA"); png.encode(function(png_image){ sys.print(png_image); }); var img = Image; img.onload = function(){ ctx.drawImage(img, 0, 0); var data = ctx.getImageData(0, 0, this.width, this.height); ... }; img.src = "data.png"; Tuesday, September 28, 2010
  35. Awesome, how to start hacking JavaScript? Tuesday, September 28, 2010
  36. 1. Know the limits! I mean, know the limits!! You can't push the limits when the limits aren't there to begin with. Tuesday, September 28, 2010
  37. 2. Explore your browser’s microcosmos! Missing API != Missing Feature Tuesday, September 28, 2010
  38. Inflating Zlib data var scanln = "x00" + zlibData, adler = readInt() + 65536, uri = "data:image/png;base64," + btoa("x89PNGrnx1An" + buildChunk("IHDR", toInt(zlibData.length / 4) + toInt(1) + "x08x06x00x00x00") + buildChunk("IDAT", "x78x9cx00x01x00xfexff" + scanln + toInt(adler)) + buildChunk("IEND", '')), img = new Image; img.src = uri; ... ctx.drawImage(img, 0, 0); var inflatedData = ctx.getImageData(0, 0, img.width, img.height).data); Tuesday, September 28, 2010
  39. Fake ctx.fillText function fillText(ctx, font, textToDraw, x, y){ var img = new Image; img.src = 'data:image/svg+xml,' + '<svg xmlns="http://www.w3.org/2000/svg">' + '<text x="' + x + '" y="' + y + '" ' + 'style="font:' + font + '">' + textToDraw + '</text>' + '</svg>'; ctx.drawImage(img, 0, 0); } var ctx = document.body.appendChild( document.createElement("canvas") ).getContext("2d"); fillText(ctx, "30px Arial", "Hello World!", 50, 50); Tuesday, September 28, 2010
  40. 3. Watch out for paperclips and gums Use the wrong tools for the right job. Tuesday, September 28, 2010
  41. Class autoloading ["Person", "Ninja"].forEach(function(className){ window.__defineGetter__(className, function(){ return require(className + ".js"); }); }); var person = new Person(); person.is_ninja = true; if(person.is_ninja){ var ninji = new Ninja(person); } Tuesday, September 28, 2010
  42. def.js def ("Person") ({ init: function(name){ this.name = name; } }); def ("Ninja") < Person ({ init: function(name){ this._super(); } }); var ninjy = new Ninja("JDD"); http://github.com/tobeytailor/def.js Tuesday, September 28, 2010
  43. Nonsense, yet var1 += var2 Tuesday, September 28, 2010
  44. Nonsense, yet window.__defineGetter__("var1", function(){ console.log("Function 1"); }); Tuesday, September 28, 2010
  45. Nonsense, yet window.__defineGetter__("var1", function(){ console.log("Function 1"); return { valueOf: function() { console.log("Function 3"); } } }); Tuesday, September 28, 2010
  46. Nonsense, yet window.__defineGetter__("var2", function(){ console.log("Function 2"); return { valueOf: function() { console.log("Function 4"); } } }); Tuesday, September 28, 2010
  47. Nonsense, yet window.__defineSetter__("var1", function(){ console.log("Function 5"); }); Tuesday, September 28, 2010
  48. Thanks. @tobeytailor | github.com/tobeytailor | schneider@uxebu.com Tuesday, September 28, 2010

×