SlideShare a Scribd company logo
1 of 117
Download to read offline
JavaScript & HTML5
     Brave New World
“O wonder!
How many goodly creatures are there here! How
beauteous mankind is! O brave new world! That
has such people in't!”

                             - Shakespeare’s The Tempest
JavaScript
“Are you telling me that I cant away anymore
without getting deeply into Javascript?”

                                        - Developer
“That is a disaster for me! I have made a career
out of actively avoiding Javascript.”

                                         - Developer
“If I cant continue to ignore Javascript, then you
may as well amputate one of my limbs.”

                                           - Developer
// Variable declaration
var firstName = "Forrest";

// Function declaration
function party () {
    return "Stupid is as stupid does";
}
// If statement
if (badGrades) {
    return "Mom sleeps with teacher";
}

// Switch statement
var age = 10,
    lifeState;
switch (age) {
    case 10:
        lifeState = "Young";
        break;
    case 60:
        lifeState = "Old";
        break;
}
// Shorthand assignment
function (boxOfChocolates) {
    var life = boxOfChocolates || "Snickers bar";
}

// Ternary operators
(looking)? "I gotta find Bubba!" : "It's ok";
“Coercion is the practice of forcing another party
to behave in an involuntary manner”

                                          - Wikipedia
// Assignment
var happy = true;

// Equality
if (7 == "7") {
    // true
}

// Identity
if (7 === "7") {
    // false
}
// Assignment
                               rci on
                             oe
var happy = true;
                           c
// Equality        Ty pe
if (7 == "7") {
    // true
}

// Identity
if (7 === "7") {
    // false
}
// Type coercion
var sum = "5" + 6 + 7; // 567
// Prevent type coercion
var sum = parseInt("5", 10) + 6 + 7; // 18
// Various "false" values
var nullVal = null;
var undefinedVal = undefined;
var zeroVal = 0;
var falseVal = false;
var emptyString = "";

// All would equal false in an if-clause
if (emptyString) {
    // Would never go in here
}
// Self-invoking functions
(function () {
    var investment = "Lieutenant Dan got me
invested in some kind of fruit company.";
})();
// Scope - global or local

// Global
var quote = "I had run for 3 years, 2 months,
14 days, and 16 hours."

function () {
    // Local
    var pantherParty = "I'm sorry I had to
fight in the middle of your Black Panther
party.";

    // Global
    question = "And so, you just ran?";
}
// Global
function meetingJFK () {
    var JFKQuestion = "Congratulations, how do
you feel?";

    // Local
    function forrestReply () {
        return "I gotta pee.";
    }

    return forrestReply();
}

meetingJFK(); // I gotta pee
forrestReply(); // Error: not accessible
// Controlling scope
function whoAmI () {
    return this.nodeName;
}

whoAmI(); // undefined
whoAmI.call(document, "Hello"); // #document
whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY
// Using arguments
function friends (friend1, friend2) {
    return friend1 + " & " + friend2;
}

// Lieutenant Dan & Bubba
friends("Lieutenant Dan", "Bubba");

// Lieutenant Dan & undefined
friends("Lieutenant Dan");
// Using the arguments collection
function friends () {
    var allFriends = [];
    for (var i=0, il=arguments.length; i<il; i++) {
        allFriends.push(arguments[i]);
    };
    return allFriends.join(" & ");
}

// Lieutenant Dan & Bubba
friends("Lieutenant Dan", "Bubba");

// Lieutenant Dan
friends("Lieutenant Dan");
// Extending core JavaScript objects
if (typeof Array.prototype.push === "undefined") {
    Array.prototype.push = function () {
        for (var i=0, il=arguments.length; i<il; i++) {
            this[this.length] = arguments[i];
        };
        return this;
    }
}



var locations = ["Vietnam"];
locations.push("China", "White House");
// locations = ["Vietnam", "China", "White House"];
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

var action = happens("Shit");

action("happens"); // Shit happens
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

var action = happens("Shit");

// Breaking it down
var action = function (verb) {
    return "Shit" + " " + verb;
};
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

var action = happens("Shit");

// Breaking it down
var action = function (verb) {
    return "Shit" + " " + verb;
};
var link;
for (var i=0; i<3; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function () {
        alert("I am link " + i);
    };
    document.body.appendChild(link);
};
var link;
for (var i=0; i<3; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function (index) {
        return function () {
            alert("I am link " + index);
        };
    }(i);
    document.body.appendChild(link);
};
What is HTML5?
Video
<video src="swedish-flag.ogv"></video>
<video src="swedish-flag.ogv" controls
  width="320" height="240">
</video>
<video controls>
  <source src="swedish-flag.mp4">
  <source src="swedish-flag.ogv">
  <p>
    Sorry, your web browser doesn't
    support the video element.
  </p>
</video>
<video controls>
    <source src="http://robertnyman.com/video/swedish-flag.mp4">
    <source src="http://robertnyman.com/video/swedish-flag.ogv">
    <object width="425" height="340" type="application/x-shockwave-flash"
data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf">
         <param name="movie" value="http://pics.robertnyman.com/ria/
ShizVidz-2010012201.swf">
         <param name="allowFullScreen" value="true">
         <param name="flashVars"
value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b
nltYW4=">
    </object>
    <p>Sorry, your web browser doesn't support, well, anything...</p>
</video>
var video = document.getElementById("my-video");

 // Play/pause button
 if (video.paused || video.ended) {
     video.play();
 }
 else {
     video.pause();
 }
// Methods
video.canPlayType();
video.load();
video.pause();
video.play();
// Properties
video.paused;
video.muted;
video.autobuffer;
video.autoplay;
video.buffered; (Unimplemented)
video.bufferedBytes; (Unimplemented)
video.bufferingRate; (Unimplemented)
video.bufferingThrottled; (Unimplemented)
video.controls;
video.currentSrc;
video.currentTime;
video.defaultPlaybackRate;
video.duration;
video.ended;
video.error;
video.muted;
video.networkState;
video.paused;
video.playbackRate;
video.readyState;
video.seeking;
video.src;
video.totalBytes;
video.volume;
// Events
video.abort;
video.canplay;
video.canplaythrough;
video.canshowcurrentframe;
video.dataunavailable;
video.durationchange;
video.emptied;
video.empty;
video.ended;
video.error;
video.loadedfirstframe;
video.loadedmetadata;
video.loadstart;
video.pause;
video.play;
video.progress; (lengthComputable, loaded, total)
video.ratechange;
video.seeked;
video.seeking;
video.suspend;
video.timeupdate;
video.volumechange;
// Checking codec support
if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) {
    video.play();
}
else {
    alert("Evil browser with only licensed codec support!");
}
Canvas
<canvas id="my-canvas" width="200" height="200">
    I am canvas
</canvas>
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

context.fillStyle = "#ffffa2";
context.fillRect(0, 0, 100, 100);
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

context.fillStyle = "#ffffa2";

// Adding shadows and tilt
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 100;
context.shadowColor = "#000000";
context.rotate(0.05);

context.fillRect(10, 10, 100, 100);
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

// Adding shadows and tilt
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 100;
context.shadowColor = "#000000";
context.rotate(0.05);

// Adding a little gradient
var gradient = context.createRadialGradient(90, 63, 10, 90,
63, 50);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(1, "#000000");
context.fillStyle = gradient;

context.fillRect(10, 10, 100, 100);
HTML5 Canvas for Internet Explorer
                -
          explorercanvas
Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        alert(position.coords.latitude + ", " + position.coords.longitude);
    });
}
Web Storage
// sessionStorage
sessionStorage["name"] = "Robert";
alert(sessionStorage["name"]); // Robert
// localStorage
localStorage.setItem("origin", "Sweden");
alert(localStorage.origin); // Sweden
// Using JSON
var info = {
    "language" : "Bulgarian",
    "location" : "Veliko Tarnovo"
};

// Save as string
localStorage.setItem("info", JSON.stringify(info));

// Load as JSON object
alert(JSON.parse(localStorage.info));
postMessage
// Use postMessage on a window to send a message
var iframeWin = document.getElementById("da-iframe").contentWindow;
iframeWin.postMessage("Love you!", "http://robertnyman.com");
// Handle message
function displayMessage (evt) {
    var message;
    if (evt.origin !== "http://robertnyman.com") {
        message = "You are not worthy";
    }
    else {
        message = "I got " + evt.data + " from " + evt.origin;
    }
    document.getElementById("received-message").innerHTML = message;
}

// Using onmessage to receive message
if (window.addEventListener) {
    // For standards-compliant web browsers
    window.addEventListener("message", displayMessage, false);
}
else {
    window.attachEvent("onmessage", displayMessage);
}
Web Workers
var worker = new Worker("worker.js");
// Main page code
    var worker = new Worker("worker.js");

    // postMessage
    worker.postMessage(5);

    // Receive message back from Worker
    worker.onmessage = function (evt) {
        document.getElementById("worker-results").innerHTML = evt.data;
    };

    // Error handling
    worker.onerror = function (evt) {
        document.getElementById("worker-results").innerHTML = "An error
occurred";
    };
// Web Worker code
onmessage = function (evt) {
    for (var i=evt.data, il=1000001; i<il; i++) {
        postMessage(i);
    };
};
Offline Web Applications
if (window.addEventListener) {
    /*
        Works well in Firefox and Opera with the
        Work Offline option in the File menu.
        Pulling the ethernet cable doesn't seem to trigger it
    */
    window.addEventListener("online", isOnline, false);
    window.addEventListener("offline", isOffline, false);
}
else {
    /*
        Works in IE with the Work Offline option in the
        File menu and pulling the ethernet cable
    */
    document.body.ononline = isOnline;
    document.body.onoffline = isOffline;
}
// Poll the navigator.onLine property
setInterval(function () {
    console.log(navigator.onLine);
}, 1000);
<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
...
CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

NETWORK:
/live-updates
File API


Drag & drop
                     History

 contentEditable
Robert Nyman
                                                              http://robertnyman.com/speaking/
                                                               http://robertnyman.com/html5/

                                                                                Twitter: @robertnyman
Pictures:

Volcano: http://www.boston.com/bigpicture/2010/04/more_from_eyjafjallajokull.html                               Overloading: http://theshadowhive.blogspot.com/2010/04/mutating-chaos-gene.html
Laptop smurf: http://www.schleich-s.de/cms_schleich/cms_bilder/detail/40263.jpg                                 Closure movie: http://www.monstersandcritics.com/dvd/news/article_1332892.php/
Computer smurf: http://www.schleich-s.com/en/wishlist/index.html?PHPSESSID=cwjpavod                             Golden_Globe_winner_Gillian_Anderson_stars_in_Closure
Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html                   Steve Ballmer: http://www.businessinsider.com/microsoft-completely-rebooted-its-mobile-strategy-yesterday-heres-
Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html                                           what-you-missed-2010-2
Smurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpg                            What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/
Baby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpg                                           Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gif
Baby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpg                             APIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/
Most popular language: http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-   Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/
need-updating.aspx                                                                                              Video: http://www.roirevolution.com/blog/2009/05/make_sure_your_excluded_placements_are_actually_be.html
Sunrise: http://www.manywallpapers.com/space-wallpapers/earth/sunrise-from-space.html                           Waiting in line: http://www.roirevolution.com/blog/2009/05/
Astronaut: http://martianchronicles.wordpress.com/2009/01/23/carnival-of-space-87/                              make_sure_your_excluded_placements_are_actually_be.html
Netscape 2: http://blog.explorelearning.com/2005/12/index.html                                                  Canvas: http://www.brianbatson.com/ablankcanvas/giftlist.html
Internet Explorer 3: http://www.guidebookgallery.org/screenshots/browser                                        Geolocation: http://www.datadial.net/blog/index.php/2008/09/22/the-definitive-guide-to-website-geo-location/
Gandalf: http://web.mit.edu/kayla/Public/Backgrounds/LOTR%20Gandalf%204.JPG                                     Storage fail: http://failblog.org/2009/02/09/storage-box-fail/
Now: http://www.geekologie.com/2007/07/15-week/                                                                 Cookie monster: http://open.salon.com/blog/shiral/2009/03/25/
Axe: http://bestgamewallpapers.com/a3-the-age-of-sovereign/axe                                                  the_coveted_shiral_interview_with_kermit_and_cookie_monster
Time: http://www.mindhacks.com/blog/seeing/index.html                                                           Boy giving the finger: http://www.deangoodman.com/ThingsThatSuck.html
Money: http://www.mediabistro.com/unbeige/ideas/                                                                Postman (Costner): http://nationallampoon.com/articles/the-list-top-20-movies-about-the-end-of-the-world
Happy Ape: http://thesituationist.wordpress.com/2007/06/14/                                                     Web Workers: http://miscellanea.wellingtongrey.net/2007/06/03/this-modern-life/
High speed train: http://www.freefoto.com/preview/23-22-1?ffid=23-22-1                                           Dude offline: http://blogs.phoenixnewtimes.com/uponsun/2008/06/you_asked_for_it_dude_offline.php
Sunspider results: http://blogs.msdn.com/ie/archive/2010/03/18/the-new-javascript-engine-in-internet-           Cute dog: http://www.emmitsburg.net/humor/daily_additions/2007/mar/30.htm
explorer-9.aspx                                                                                                 Firefox: http://www.flickr.com/photos/tedion/3966234643/
Forrest Gump: http://wallpaper-s.org/36__Forrest_Gump,_1994,_Tom_Hanks,_Robin_Wright_Penn.htm                   Google Chrome: http://www.flickr.com/photos/tedion/3966233919/
Hillary Clinton & Soldier: http://confederateyankee.mu.nu/archives/154032.php                                   Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.html
Dog (Cat): http://www.cartoonstock.com/directory/f/false_identity.asp                                           Opera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.png
Play with yourself: http://www.justwhatshesaid.com/?p=965                                                       Bill Gates: http://punditkitchen.com/2009/04/14/political-pictures-bill-gates-failure-windows/
Tiger Woods: http://blogs.bigadda.com/pal4868546/2010/01/                                                       Winning IE: http://cybernetnews.com/april-browser-stats-safari-triples-its-windows-market-share/
Dirty water: http://www.freefoto.com/preview/13-08-52?ffid=13-08-52                                              Internet Explorer 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/
Extensible table: http://www.amishshowroom.com/index.php?main_page=index&cPath=40_64                            Mila & Macaulay: http://uk.eonline.com/uberblog/b61889_mila_macaulay_home_alone.html
                                                                                                                Hearts: http://www.funonthenet.in/content/view/395/31/
JavaScript & HTML5 - Brave New World

More Related Content

What's hot

HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowRobert Nyman
 
Paris js extensions
Paris js extensionsParis js extensions
Paris js extensionserwanl
 
node.js Module Development
node.js Module Developmentnode.js Module Development
node.js Module DevelopmentJay Harris
 
CouchDB on Android
CouchDB on AndroidCouchDB on Android
CouchDB on AndroidSven Haiges
 
History of jQuery
History of jQueryHistory of jQuery
History of jQueryjeresig
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at NackademinRobert Nyman
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranRobert Nyman
 
KISSY 的昨天、今天与明天
KISSY 的昨天、今天与明天KISSY 的昨天、今天与明天
KISSY 的昨天、今天与明天tblanlan
 
kissy-past-now-future
kissy-past-now-futurekissy-past-now-future
kissy-past-now-futureyiming he
 
Open Source Ajax Solution @OSDC.tw 2009
Open Source Ajax  Solution @OSDC.tw 2009Open Source Ajax  Solution @OSDC.tw 2009
Open Source Ajax Solution @OSDC.tw 2009Robbie Cheng
 
Backbone.js: Run your Application Inside The Browser
Backbone.js: Run your Application Inside The BrowserBackbone.js: Run your Application Inside The Browser
Backbone.js: Run your Application Inside The BrowserHoward Lewis Ship
 
REST with Eve and Python
REST with Eve and PythonREST with Eve and Python
REST with Eve and PythonPiXeL16
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?jaespinmora
 
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 SederhanaPraktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 SederhanaMuhammad Yusuf
 

What's hot (20)

HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
 
Paris js extensions
Paris js extensionsParis js extensions
Paris js extensions
 
node.js Module Development
node.js Module Developmentnode.js Module Development
node.js Module Development
 
CouchDB on Android
CouchDB on AndroidCouchDB on Android
CouchDB on Android
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
History of jQuery
History of jQueryHistory of jQuery
History of jQuery
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
KISSY 的昨天、今天与明天
KISSY 的昨天、今天与明天KISSY 的昨天、今天与明天
KISSY 的昨天、今天与明天
 
kissy-past-now-future
kissy-past-now-futurekissy-past-now-future
kissy-past-now-future
 
Open Source Ajax Solution @OSDC.tw 2009
Open Source Ajax  Solution @OSDC.tw 2009Open Source Ajax  Solution @OSDC.tw 2009
Open Source Ajax Solution @OSDC.tw 2009
 
Backbone.js: Run your Application Inside The Browser
Backbone.js: Run your Application Inside The BrowserBackbone.js: Run your Application Inside The Browser
Backbone.js: Run your Application Inside The Browser
 
REST with Eve and Python
REST with Eve and PythonREST with Eve and Python
REST with Eve and Python
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?
 
Micro app-framework
Micro app-frameworkMicro app-framework
Micro app-framework
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 SederhanaPraktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
 
YouDrup_in_Drupal
YouDrup_in_DrupalYouDrup_in_Drupal
YouDrup_in_Drupal
 

Similar to JavaScript & HTML5 - Brave New World

JavaScript and HTML5 - Brave New World (revised)
JavaScript and HTML5 - Brave New World (revised)JavaScript and HTML5 - Brave New World (revised)
JavaScript and HTML5 - Brave New World (revised)Robert Nyman
 
JavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDayJavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDayRobert Nyman
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesRobert Nyman
 
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!Guilherme Carreiro
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScriptryanstout
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5arajivmordani
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloRobert Nyman
 
Firefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileFirefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileRobert Nyman
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it meansRobert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileRobert Nyman
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresRobert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoRobert Nyman
 
Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nlWilfred Nas
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresRobert Nyman
 
Node.js for PHP developers
Node.js for PHP developersNode.js for PHP developers
Node.js for PHP developersAndrew Eddie
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxJeff Strauss
 

Similar to JavaScript & HTML5 - Brave New World (20)

JavaScript and HTML5 - Brave New World (revised)
JavaScript and HTML5 - Brave New World (revised)JavaScript and HTML5 - Brave New World (revised)
JavaScript and HTML5 - Brave New World (revised)
 
JavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDayJavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDay
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of Chocolates
 
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScript
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
JavaScript Neednt Hurt - JavaBin talk
JavaScript Neednt Hurt - JavaBin talkJavaScript Neednt Hurt - JavaBin talk
JavaScript Neednt Hurt - JavaBin talk
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
Firefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileFirefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobile
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it means
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
 
Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nl
 
JavaScript patterns
JavaScript patternsJavaScript patterns
JavaScript patterns
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
Node.js for PHP developers
Node.js for PHP developersNode.js for PHP developers
Node.js for PHP developers
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
 

More from Robert Nyman

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?Robert Nyman
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google DaydreamRobert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the WebRobert Nyman
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaRobert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & productsRobert Nyman
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goRobert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilitiesRobert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the NordicsRobert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?Robert Nyman
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupRobert Nyman
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiRobert Nyman
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiRobert Nyman
 

More from Robert Nyman (20)

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 

Recently uploaded

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 

Recently uploaded (20)

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 

JavaScript & HTML5 - Brave New World

  • 1. JavaScript & HTML5 Brave New World
  • 2.
  • 3. “O wonder! How many goodly creatures are there here! How beauteous mankind is! O brave new world! That has such people in't!” - Shakespeare’s The Tempest
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. “Are you telling me that I cant away anymore without getting deeply into Javascript?” - Developer
  • 19. “That is a disaster for me! I have made a career out of actively avoiding Javascript.” - Developer
  • 20. “If I cant continue to ignore Javascript, then you may as well amputate one of my limbs.” - Developer
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27. // Variable declaration var firstName = "Forrest"; // Function declaration function party () { return "Stupid is as stupid does"; }
  • 28. // If statement if (badGrades) { return "Mom sleeps with teacher"; } // Switch statement var age = 10, lifeState; switch (age) { case 10: lifeState = "Young"; break; case 60: lifeState = "Old"; break; }
  • 29. // Shorthand assignment function (boxOfChocolates) { var life = boxOfChocolates || "Snickers bar"; } // Ternary operators (looking)? "I gotta find Bubba!" : "It's ok";
  • 30.
  • 31. “Coercion is the practice of forcing another party to behave in an involuntary manner” - Wikipedia
  • 32. // Assignment var happy = true; // Equality if (7 == "7") { // true } // Identity if (7 === "7") { // false }
  • 33. // Assignment rci on oe var happy = true; c // Equality Ty pe if (7 == "7") { // true } // Identity if (7 === "7") { // false }
  • 34. // Type coercion var sum = "5" + 6 + 7; // 567
  • 35. // Prevent type coercion var sum = parseInt("5", 10) + 6 + 7; // 18
  • 36.
  • 37. // Various "false" values var nullVal = null; var undefinedVal = undefined; var zeroVal = 0; var falseVal = false; var emptyString = ""; // All would equal false in an if-clause if (emptyString) { // Would never go in here }
  • 38.
  • 39. // Self-invoking functions (function () { var investment = "Lieutenant Dan got me invested in some kind of fruit company."; })();
  • 40.
  • 41. // Scope - global or local // Global var quote = "I had run for 3 years, 2 months, 14 days, and 16 hours." function () { // Local var pantherParty = "I'm sorry I had to fight in the middle of your Black Panther party."; // Global question = "And so, you just ran?"; }
  • 42. // Global function meetingJFK () { var JFKQuestion = "Congratulations, how do you feel?"; // Local function forrestReply () { return "I gotta pee."; } return forrestReply(); } meetingJFK(); // I gotta pee forrestReply(); // Error: not accessible
  • 43.
  • 44. // Controlling scope function whoAmI () { return this.nodeName; } whoAmI(); // undefined whoAmI.call(document, "Hello"); // #document whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY
  • 45.
  • 46. // Using arguments function friends (friend1, friend2) { return friend1 + " & " + friend2; } // Lieutenant Dan & Bubba friends("Lieutenant Dan", "Bubba"); // Lieutenant Dan & undefined friends("Lieutenant Dan");
  • 47. // Using the arguments collection function friends () { var allFriends = []; for (var i=0, il=arguments.length; i<il; i++) { allFriends.push(arguments[i]); }; return allFriends.join(" & "); } // Lieutenant Dan & Bubba friends("Lieutenant Dan", "Bubba"); // Lieutenant Dan friends("Lieutenant Dan");
  • 48.
  • 49. // Extending core JavaScript objects if (typeof Array.prototype.push === "undefined") { Array.prototype.push = function () { for (var i=0, il=arguments.length; i<il; i++) { this[this.length] = arguments[i]; }; return this; } } var locations = ["Vietnam"]; locations.push("China", "White House"); // locations = ["Vietnam", "China", "White House"];
  • 50.
  • 51. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); action("happens"); // Shit happens
  • 52.
  • 53. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
  • 54. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
  • 55. var link; for (var i=0; i<3; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function () { alert("I am link " + i); }; document.body.appendChild(link); };
  • 56. var link; for (var i=0; i<3; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function (index) { return function () { alert("I am link " + index); }; }(i); document.body.appendChild(link); };
  • 58.
  • 59.
  • 60.
  • 61. Video
  • 63. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
  • 64. <video controls> <source src="swedish-flag.mp4"> <source src="swedish-flag.ogv"> <p> Sorry, your web browser doesn't support the video element. </p> </video>
  • 65.
  • 66. <video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source src="http://robertnyman.com/video/swedish-flag.ogv"> <object width="425" height="340" type="application/x-shockwave-flash" data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf"> <param name="movie" value="http://pics.robertnyman.com/ria/ ShizVidz-2010012201.swf"> <param name="allowFullScreen" value="true"> <param name="flashVars" value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b nltYW4="> </object> <p>Sorry, your web browser doesn't support, well, anything...</p> </video>
  • 67. var video = document.getElementById("my-video"); // Play/pause button if (video.paused || video.ended) { video.play(); } else { video.pause(); }
  • 69. // Properties video.paused; video.muted; video.autobuffer; video.autoplay; video.buffered; (Unimplemented) video.bufferedBytes; (Unimplemented) video.bufferingRate; (Unimplemented) video.bufferingThrottled; (Unimplemented) video.controls; video.currentSrc; video.currentTime; video.defaultPlaybackRate; video.duration; video.ended; video.error; video.muted; video.networkState; video.paused; video.playbackRate; video.readyState; video.seeking; video.src; video.totalBytes; video.volume;
  • 71.
  • 72.
  • 73.
  • 74.
  • 75. // Checking codec support if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) { video.play(); } else { alert("Evil browser with only licensed codec support!"); }
  • 77. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
  • 78. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
  • 79. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#ffffa2"; context.fillRect(0, 0, 100, 100);
  • 80.
  • 81. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#ffffa2"; // Adding shadows and tilt context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 100; context.shadowColor = "#000000"; context.rotate(0.05); context.fillRect(10, 10, 100, 100);
  • 82.
  • 83. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); // Adding shadows and tilt context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 100; context.shadowColor = "#000000"; context.rotate(0.05); // Adding a little gradient var gradient = context.createRadialGradient(90, 63, 10, 90, 63, 50); gradient.addColorStop(0, "#ff0000"); gradient.addColorStop(1, "#000000"); context.fillStyle = gradient; context.fillRect(10, 10, 100, 100);
  • 84.
  • 85. HTML5 Canvas for Internet Explorer - explorercanvas
  • 87. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
  • 88.
  • 89.
  • 91.
  • 92.
  • 93. // sessionStorage sessionStorage["name"] = "Robert"; alert(sessionStorage["name"]); // Robert
  • 95. // Using JSON var info = { "language" : "Bulgarian", "location" : "Veliko Tarnovo" }; // Save as string localStorage.setItem("info", JSON.stringify(info)); // Load as JSON object alert(JSON.parse(localStorage.info));
  • 97. // Use postMessage on a window to send a message var iframeWin = document.getElementById("da-iframe").contentWindow; iframeWin.postMessage("Love you!", "http://robertnyman.com");
  • 98. // Handle message function displayMessage (evt) { var message; if (evt.origin !== "http://robertnyman.com") { message = "You are not worthy"; } else { message = "I got " + evt.data + " from " + evt.origin; } document.getElementById("received-message").innerHTML = message; } // Using onmessage to receive message if (window.addEventListener) { // For standards-compliant web browsers window.addEventListener("message", displayMessage, false); } else { window.attachEvent("onmessage", displayMessage); }
  • 100. var worker = new Worker("worker.js");
  • 101. // Main page code var worker = new Worker("worker.js"); // postMessage worker.postMessage(5); // Receive message back from Worker worker.onmessage = function (evt) { document.getElementById("worker-results").innerHTML = evt.data; }; // Error handling worker.onerror = function (evt) { document.getElementById("worker-results").innerHTML = "An error occurred"; };
  • 102. // Web Worker code onmessage = function (evt) { for (var i=evt.data, il=1000001; i<il; i++) { postMessage(i); }; };
  • 104. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesn't seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false); } else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline; }
  • 105. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
  • 107. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
  • 108. File API Drag & drop History contentEditable
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116. Robert Nyman http://robertnyman.com/speaking/ http://robertnyman.com/html5/ Twitter: @robertnyman Pictures: Volcano: http://www.boston.com/bigpicture/2010/04/more_from_eyjafjallajokull.html Overloading: http://theshadowhive.blogspot.com/2010/04/mutating-chaos-gene.html Laptop smurf: http://www.schleich-s.de/cms_schleich/cms_bilder/detail/40263.jpg Closure movie: http://www.monstersandcritics.com/dvd/news/article_1332892.php/ Computer smurf: http://www.schleich-s.com/en/wishlist/index.html?PHPSESSID=cwjpavod Golden_Globe_winner_Gillian_Anderson_stars_in_Closure Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html Steve Ballmer: http://www.businessinsider.com/microsoft-completely-rebooted-its-mobile-strategy-yesterday-heres- Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html what-you-missed-2010-2 Smurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpg What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/ Baby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpg Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gif Baby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpg APIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/ Most popular language: http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills- Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/ need-updating.aspx Video: http://www.roirevolution.com/blog/2009/05/make_sure_your_excluded_placements_are_actually_be.html Sunrise: http://www.manywallpapers.com/space-wallpapers/earth/sunrise-from-space.html Waiting in line: http://www.roirevolution.com/blog/2009/05/ Astronaut: http://martianchronicles.wordpress.com/2009/01/23/carnival-of-space-87/ make_sure_your_excluded_placements_are_actually_be.html Netscape 2: http://blog.explorelearning.com/2005/12/index.html Canvas: http://www.brianbatson.com/ablankcanvas/giftlist.html Internet Explorer 3: http://www.guidebookgallery.org/screenshots/browser Geolocation: http://www.datadial.net/blog/index.php/2008/09/22/the-definitive-guide-to-website-geo-location/ Gandalf: http://web.mit.edu/kayla/Public/Backgrounds/LOTR%20Gandalf%204.JPG Storage fail: http://failblog.org/2009/02/09/storage-box-fail/ Now: http://www.geekologie.com/2007/07/15-week/ Cookie monster: http://open.salon.com/blog/shiral/2009/03/25/ Axe: http://bestgamewallpapers.com/a3-the-age-of-sovereign/axe the_coveted_shiral_interview_with_kermit_and_cookie_monster Time: http://www.mindhacks.com/blog/seeing/index.html Boy giving the finger: http://www.deangoodman.com/ThingsThatSuck.html Money: http://www.mediabistro.com/unbeige/ideas/ Postman (Costner): http://nationallampoon.com/articles/the-list-top-20-movies-about-the-end-of-the-world Happy Ape: http://thesituationist.wordpress.com/2007/06/14/ Web Workers: http://miscellanea.wellingtongrey.net/2007/06/03/this-modern-life/ High speed train: http://www.freefoto.com/preview/23-22-1?ffid=23-22-1 Dude offline: http://blogs.phoenixnewtimes.com/uponsun/2008/06/you_asked_for_it_dude_offline.php Sunspider results: http://blogs.msdn.com/ie/archive/2010/03/18/the-new-javascript-engine-in-internet- Cute dog: http://www.emmitsburg.net/humor/daily_additions/2007/mar/30.htm explorer-9.aspx Firefox: http://www.flickr.com/photos/tedion/3966234643/ Forrest Gump: http://wallpaper-s.org/36__Forrest_Gump,_1994,_Tom_Hanks,_Robin_Wright_Penn.htm Google Chrome: http://www.flickr.com/photos/tedion/3966233919/ Hillary Clinton & Soldier: http://confederateyankee.mu.nu/archives/154032.php Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.html Dog (Cat): http://www.cartoonstock.com/directory/f/false_identity.asp Opera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.png Play with yourself: http://www.justwhatshesaid.com/?p=965 Bill Gates: http://punditkitchen.com/2009/04/14/political-pictures-bill-gates-failure-windows/ Tiger Woods: http://blogs.bigadda.com/pal4868546/2010/01/ Winning IE: http://cybernetnews.com/april-browser-stats-safari-triples-its-windows-market-share/ Dirty water: http://www.freefoto.com/preview/13-08-52?ffid=13-08-52 Internet Explorer 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/ Extensible table: http://www.amishshowroom.com/index.php?main_page=index&cPath=40_64 Mila & Macaulay: http://uk.eonline.com/uberblog/b61889_mila_macaulay_home_alone.html Hearts: http://www.funonthenet.in/content/view/395/31/