0
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'...
JavaScript
“Are you telling me that I cant away anymore
without getting deeply into Javascript?”

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

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

                               ...
// Variable declaration
var firstName = "Forrest";

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

// Switch statement
var age = 10,
    lifeState;...
// Shorthand assignment
function (boxOfChocolates) {
    var life = boxOfChocolates || "Snickers bar";
}

// Ternary opera...
“Coercion is the practice of forcing another party
to behave in an involuntary manner”

                                  ...
// Assignment
var happy = true;

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

// Identity
if (7 === "7") {
    // false
}
// Assignment
                               rci on
                             oe
var happy = true;
                    ...
// 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 emp...
// Self-invoking functions
(function () {
    var investment = "Lieutenant Dan got me
invested in some kind of fruit compa...
// Scope - global or local

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

function () {...
// Global
function meetingJFK () {
    var JFKQuestion = "Congratulations, how do
you feel?";

    // Local
    function f...
// Controlling scope
function whoAmI () {
    return this.nodeName;
}

whoAmI(); // undefined
whoAmI.call(document, "Hello...
// Using arguments
function friends (friend1, friend2) {
    return friend1 + " & " + friend2;
}

// Lieutenant Dan & Bubb...
// Using the arguments collection
function friends () {
    var allFriends = [];
    for (var i=0, il=arguments.length; i<...
// Extending core JavaScript objects
if (typeof Array.prototype.push === "undefined") {
    Array.prototype.push = functio...
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

var action =...
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

var action =...
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

var action =...
var link;
for (var i=0; i<3; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onc...
var link;
for (var i=0; i<3; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onc...
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 doe...
<video controls>
    <source src="http://robertnyman.com/video/swedish-flag.mp4">
    <source src="http://robertnyman.com/...
var video = document.getElementById("my-video");

 // Play/pause button
 if (video.paused || video.ended) {
     video.pla...
// Methods
video.canPlayType();
video.load();
video.pause();
video.play();
// Properties
video.paused;
video.muted;
video.autobuffer;
video.autoplay;
video.buffered; (Unimplemented)
video.bufferedB...
// Events
video.abort;
video.canplay;
video.canplaythrough;
video.canshowcurrentframe;
video.dataunavailable;
video.durati...
// Checking codec support
if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) {
    video.play();
}
else {
    al...
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";
...
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

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

// Adding shadows and tilt
cont...
HTML5 Canvas for Internet Explorer
                -
          explorercanvas
Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        alert(position.coo...
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
localStor...
postMessage
// Use postMessage on a window to send a message
var iframeWin = document.getElementById("da-iframe").contentWindow;
ifram...
// Handle message
function displayMessage (evt) {
    var message;
    if (evt.origin !== "http://robertnyman.com") {
    ...
Web Workers
var worker = new Worker("worker.js");
// Main page code
    var worker = new Worker("worker.js");

    // postMessage
    worker.postMessage(5);

    // Receive...
// 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 ...
// 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/
              ...
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
Upcoming SlideShare
Loading in...5
×

JavaScript & HTML5 - Brave New World

10,684

Published on

A presentation about JavaScript basics and new exciting HTML5 APIs

Published in: Technology
4 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,684
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
503
Comments
4
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript & HTML5 - Brave New World"

  1. 1. JavaScript & HTML5 Brave New World
  2. 2. “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
  3. 3. JavaScript
  4. 4. “Are you telling me that I cant away anymore without getting deeply into Javascript?” - Developer
  5. 5. “That is a disaster for me! I have made a career out of actively avoiding Javascript.” - Developer
  6. 6. “If I cant continue to ignore Javascript, then you may as well amputate one of my limbs.” - Developer
  7. 7. // Variable declaration var firstName = "Forrest"; // Function declaration function party () { return "Stupid is as stupid does"; }
  8. 8. // 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; }
  9. 9. // Shorthand assignment function (boxOfChocolates) { var life = boxOfChocolates || "Snickers bar"; } // Ternary operators (looking)? "I gotta find Bubba!" : "It's ok";
  10. 10. “Coercion is the practice of forcing another party to behave in an involuntary manner” - Wikipedia
  11. 11. // Assignment var happy = true; // Equality if (7 == "7") { // true } // Identity if (7 === "7") { // false }
  12. 12. // Assignment rci on oe var happy = true; c // Equality Ty pe if (7 == "7") { // true } // Identity if (7 === "7") { // false }
  13. 13. // Type coercion var sum = "5" + 6 + 7; // 567
  14. 14. // Prevent type coercion var sum = parseInt("5", 10) + 6 + 7; // 18
  15. 15. // 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 }
  16. 16. // Self-invoking functions (function () { var investment = "Lieutenant Dan got me invested in some kind of fruit company."; })();
  17. 17. // 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?"; }
  18. 18. // 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
  19. 19. // Controlling scope function whoAmI () { return this.nodeName; } whoAmI(); // undefined whoAmI.call(document, "Hello"); // #document whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY
  20. 20. // Using arguments function friends (friend1, friend2) { return friend1 + " & " + friend2; } // Lieutenant Dan & Bubba friends("Lieutenant Dan", "Bubba"); // Lieutenant Dan & undefined friends("Lieutenant Dan");
  21. 21. // 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");
  22. 22. // 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"];
  23. 23. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); action("happens"); // Shit happens
  24. 24. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
  25. 25. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
  26. 26. 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); };
  27. 27. 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); };
  28. 28. What is HTML5?
  29. 29. Video
  30. 30. <video src="swedish-flag.ogv"></video>
  31. 31. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
  32. 32. <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>
  33. 33. <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>
  34. 34. var video = document.getElementById("my-video"); // Play/pause button if (video.paused || video.ended) { video.play(); } else { video.pause(); }
  35. 35. // Methods video.canPlayType(); video.load(); video.pause(); video.play();
  36. 36. // 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;
  37. 37. // 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;
  38. 38. // Checking codec support if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) { video.play(); } else { alert("Evil browser with only licensed codec support!"); }
  39. 39. Canvas
  40. 40. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
  41. 41. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
  42. 42. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#ffffa2"; context.fillRect(0, 0, 100, 100);
  43. 43. 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);
  44. 44. 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);
  45. 45. HTML5 Canvas for Internet Explorer - explorercanvas
  46. 46. Geolocation
  47. 47. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
  48. 48. Web Storage
  49. 49. // sessionStorage sessionStorage["name"] = "Robert"; alert(sessionStorage["name"]); // Robert
  50. 50. // localStorage localStorage.setItem("origin", "Sweden"); alert(localStorage.origin); // Sweden
  51. 51. // 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));
  52. 52. postMessage
  53. 53. // Use postMessage on a window to send a message var iframeWin = document.getElementById("da-iframe").contentWindow; iframeWin.postMessage("Love you!", "http://robertnyman.com");
  54. 54. // 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); }
  55. 55. Web Workers
  56. 56. var worker = new Worker("worker.js");
  57. 57. // 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"; };
  58. 58. // Web Worker code onmessage = function (evt) { for (var i=evt.data, il=1000001; i<il; i++) { postMessage(i); }; };
  59. 59. Offline Web Applications
  60. 60. 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; }
  61. 61. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
  62. 62. <!DOCTYPE html> <html manifest="offline.manifest"> <head> ...
  63. 63. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
  64. 64. File API Drag & drop History contentEditable
  65. 65. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×