SlideShare a Scribd company logo
1 of 48
Download to read offline
Tuesday, September 28, 2010
Not your mother’s
                                 JavaScript
                              Tobias Schneider, @tobeytailor - uxebu
                                      Sep 26 2010, jsconf.eu




Tuesday, September 28, 2010
@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
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
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
Hack driven enhancement
                  The evolution of JavaScript is a history full of workarounds.




Tuesday, September 28, 2010
First, there’s a limitation



Tuesday, September 28, 2010
Then there’s a hack



Tuesday, September 28, 2010
The interwebs likes it?



Tuesday, September 28, 2010
Then it gets a buzzy
                  name and becomes a
                        standard


Tuesday, September 28, 2010
Do you remember...
                                   AJAX in 2001?
                                Canvas before 2004?
                              Cross Domain Ajax 2010?




Tuesday, September 28, 2010
AJAX 2001
                                  Requirement:
                 Requesting the server without reloading the whole
                          page again & again & again...




Tuesday, September 28, 2010
AJAX 2001
                                  Requirement:
                 Requesting the server without reloading the whole
                          page again & again & again...
                                     Why?
                               Loading data async




Tuesday, September 28, 2010
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
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
Canvas 2003
                                      Requirement:
                              Drawing pictures in the browser




Tuesday, September 28, 2010
Canvas 2003
                                      Requirement:
                              Drawing pictures in the browser

                                          Why?
                                        LASERS!!!




Tuesday, September 28, 2010
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
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
Cross Domain Ajax
                                      Requirement:
                    Having a script from domain X loading data from Y




Tuesday, September 28, 2010
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
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
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
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
Current state?



Tuesday, September 28, 2010
Handling binary data



Tuesday, September 28, 2010
Requirement?
     Dealing client-side with low level file formats and protocols




Tuesday, September 28, 2010
Why?



Tuesday, September 28, 2010
Low level file formats
                              Parsing/Creating ZIP, PDF, SWF...




Tuesday, September 28, 2010
Networking protocols




                              http://github.com/kanaka/noVNC
Tuesday, September 28, 2010
Emulators




   http://github.com/bfirsh/jsnes
                                 http://www.kingsquare.nl/jsc64

Tuesday, September 28, 2010
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
The hack?




Tuesday, September 28, 2010
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
Awesome, how to
                               start hacking
                                JavaScript?


Tuesday, September 28, 2010
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
2. Explore your browser’s
           microcosmos!
                              Missing API != Missing Feature




Tuesday, September 28, 2010
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
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
3. Watch out for
                     paperclips and gums
                              Use the wrong tools for the right job.




Tuesday, September 28, 2010
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
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
Nonsense, yet


                                  var1 += var2




Tuesday, September 28, 2010
Nonsense, yet


                              window.__defineGetter__("var1", function(){
                                console.log("Function 1");
                              });




Tuesday, September 28, 2010
Nonsense, yet

                              window.__defineGetter__("var1", function(){
                                console.log("Function 1");

                                return {
                                  valueOf: function() {
                                    console.log("Function 3");
                                  }
                                }
                              });




Tuesday, September 28, 2010
Nonsense, yet

                              window.__defineGetter__("var2", function(){
                                console.log("Function 2");

                                return {
                                  valueOf: function() {
                                    console.log("Function 4");
                                  }
                                }
                              });




Tuesday, September 28, 2010
Nonsense, yet


                              window.__defineSetter__("var1", function(){
                                console.log("Function 5");
                              });




Tuesday, September 28, 2010
Thanks.
                @tobeytailor | github.com/tobeytailor | schneider@uxebu.com




Tuesday, September 28, 2010

More Related Content

Similar to Not your mother's JavaScript

Node.js and websockets intro
Node.js and websockets introNode.js and websockets intro
Node.js and websockets introkompozer
 
Whats Ajax Cheatsheet
Whats Ajax CheatsheetWhats Ajax Cheatsheet
Whats Ajax Cheatsheet51 lecture
 
Whats Ajax Cheatsheet
Whats Ajax CheatsheetWhats Ajax Cheatsheet
Whats Ajax Cheatsheet51 lecture
 
SenchaLabs Connect & Express
SenchaLabs Connect & ExpressSenchaLabs Connect & Express
SenchaLabs Connect & ExpressTim Caswell
 
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Corpeño
 
Google - Charla para CTOs
Google - Charla para CTOsGoogle - Charla para CTOs
Google - Charla para CTOsPalermo Valley
 

Similar to Not your mother's JavaScript (7)

Node.js and websockets intro
Node.js and websockets introNode.js and websockets intro
Node.js and websockets intro
 
Whats Ajax Cheatsheet
Whats Ajax CheatsheetWhats Ajax Cheatsheet
Whats Ajax Cheatsheet
 
Slide Test
Slide TestSlide Test
Slide Test
 
Whats Ajax Cheatsheet
Whats Ajax CheatsheetWhats Ajax Cheatsheet
Whats Ajax Cheatsheet
 
SenchaLabs Connect & Express
SenchaLabs Connect & ExpressSenchaLabs Connect & Express
SenchaLabs Connect & Express
 
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.
 
Google - Charla para CTOs
Google - Charla para CTOsGoogle - Charla para CTOs
Google - Charla para CTOs
 

Recently uploaded

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Recently uploaded (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

Not your mother's JavaScript

  • 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
  • 26. Handling binary data Tuesday, September 28, 2010
  • 27. Requirement? Dealing client-side with low level file formats and protocols 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
  • 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