Pushing the Web: Interesting things to Know


Published on

Published in: Education, Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Pushing the Web: Interesting things to Know

  1. 1. Pushing the web:Interesting things to knowabout upcoming webstandards By Shwetank Dixit, Opera Software
  2. 2. about meWeb Evangelist, Opera DeveloperRelations TeamMember, W3C Mobile Web for SocialDevelopment GroupMember, W3C Web EducationCommunity Grouptwitter.com/shwetankemail: shwetankd@opera.com
  3. 3. Front-end development - a lot of learn!
  4. 4. We’ll focus on a few things
  5. 5. We’ll focus on a few things HTML5 and friends
  6. 6. Same Origin Policy Our story begins from here...
  7. 7. Same Origin Policy1. Let /A/ be the first origin being compared, and let /B/ be the second origin being compared. 2. If either /A/ or /B/ is not a scheme/host/port tuple, return an implementation-defined value. 3. If /A/ and /B/ have scheme components that are not identical, return false. 4. If /A/ and /B/ have host components that are not identical, return false. 5. If /A/ and /B/ have port components that are not identical, return false. 6. Return true.
  8. 8. Same Origin PolicyShould have the same...Scheme / Host / Port
  9. 9. Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttps://www.example.org
  10. 10. Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttp://xyz.example.org
  11. 11. Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttp://www.example.org:1337
  12. 12. Same Origin PolicyThese WILL match, and are considered the same originhttp://www.example.org/abc/http://www.example.org/xyz/
  13. 13. Storage: Web Storage
  14. 14. The problem with cookiesUnreliableNo programmatic APIs to manipulate itNot structuredMost of important of all ...Small file size, so very limited data can bestored.
  15. 15. Web StorageSession Storage and Local Storage
  16. 16. localStorage.setItem(yourkey,yourvalue); // Store the valuevar item = localStorage.getItem(yourkey); // Retrieve the value and assignit to a variableExample of using Web Storage to store andretrieve values in the browser’s local storageWith this, even if you close the browser and re-open the page again, the values shouldstill load properly.
  17. 17. You can store images (andmore) with localStorage ....BUT DON”T.
  18. 18. Automatically save enteredform info locallyin case page crashes or closes, person canresume from where he left off
  19. 19. STORE USER DATA OFFLINE PERIODICALLY<textarea id="draft" rows="10" cols="30"></textarea>......function saveMessage(){� var message = document.getElementById("draft");� localStorage.setItem("message", message.value)}setInterval(saveMessage, 500);
  20. 20. Or...You could save only when you detect a newkeystroke (or a minimum number of them)
  21. 21. GotchaTwo tabs updating the same value
  22. 22. Storage eventsKnow if some other page has changed thevalue or not
  23. 23. GET NEW VALUE IF ITS BEEN CHANGED IN PARALLEL TABaddEventListener(storage, function(event){� if (e.oldValue){� alert(changed from +event.oldValue+ to +event.newValue+);� }}, false);
  24. 24. GotchaUsing a free hosting service - Don’t use localstorage with it if they store users accountson different directories.e.g, freehosting.com/user1and freehosting.com/user2
  25. 25. Cross Origin ResourceSharing (CORS)
  26. 26. Whats CORS?CORS is a system of headers and rules thatallow browsers and servers to communicatewhether or not a given origin is allowedaccess to a resource stored on another.
  27. 27. Access-Control-Allow-OriginHeader to Let the referrer know whether it isallowed to use the target resource.
  28. 28. Access-Control-Allow-OriginAccess-Control-Allow-Origin: nullAccess-Control-Allow-Origin: *Access-Control-Allow-Origin: http://foo.example
  29. 29. Cross Domain XHRvar xhr = new XMLHttpRequest();var onLoadHandler = function(event) { /* do something with the response */}xhr.open(GET,http://url-of-other.server/and/path/to/script);
  30. 30. Capture JS errors ... with JS
  31. 31. window.onerror
  32. 32. window.onerrorError MessageLine NumberFile URL in question
  33. 33. window.onerrorwindow.onerror = function(message, url, linenumber) { alert("JavaScript error: " + message + " on line " +linenumber + " for " + url);}
  34. 34. What could you do with it?
  35. 35. Better looking errormessages.
  36. 36. Log errors in a flat file or DB.
  37. 37. WebSockets
  38. 38. Previous techniquesContinuous PollingLong Polling
  39. 39. WebSocketsBuilt Over HTTPFull DuplexBi-Directional
  40. 40. HTTP Server ‘upgrades’ toa WebSocket server
  41. 41. The initiating handshake from the client should look like this:GET /chat HTTP/1.1 Host: server.example.com Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13And on the serverHTTP/1.1 101 Switching Protocols Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat
  42. 42. What happens1. The client sends the Sec-WebSocket-Key string dGhlIHNhbXBsZSBub25jZQ==2. The server appends the magic string to form the stringdGhlIHNhbXBsZSBub25jZQ== 258EAFA5-E914-47DA-95CA-C5AB0DC85B113. Now the server generates the SHA-1 hash for this longer string, which isb37a4f2cc0624f1690f64606cf385945b2bec4ea4. Finally, the server base64-encodes the hash string to gives3pPLMBiTxaQ9kYGzzhZRbK+xOo=5. And this base64-encoded value is used in the Sec-WebSocket-Accept headerin the server’s response.
  43. 43. WebSockets APIif (WebSocket in window){ /* WebSocket is supported. You can proceed with your code*/} else { /*WebSockets are not supported. Try a fallback method like long-polling etc*/}
  44. 44. WebSockets APIvar connection = new WebSocket(ws://example.org:12345/myapp);or wss://, which is the secure socket variant to ws:// in the same way https is tohttpvar connection = new WebSocket(wss://secure.example.org:67890/myapp);
  45. 45. Handling an open connectionconnection.onopen = function(){ /*Send a small message to the console once the connection is established */ console.log(Connection open!);}
  46. 46. Sending Messagesconnection.send(Hey server, whats up?);orvar message = {name: bill murray,comment: No one will ever believe you};connection.send(JSON.stringify(message));
  47. 47. Receiving Messagesconnection.onmessage = function(e){ var server_message = e.data; console.log(server_message);}
  48. 48. Use CasesAny App which wants real time updating of info1. High performance web based games2. Sport Scores3. Social Media real time updates4. Breaking news real time updates5. Chat applications
  49. 49. My Websockets article onDeveloperFusionhttp://www.developerfusion.com/article/143158/an-introduction-to-websockets/
  50. 50. Device OrientationAccess to gyroscope, accelerometer info etc
  51. 51. Access gyroscope infowindow.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta andevent.gamma }, true);
  52. 52. Access accelerometer infowindow.addEventListener("devicemotion",function(event) { // Process event.acceleration }, true);
  53. 53. Another sneak peak
  54. 54. Check for accessvar options = {‘video’: true, ‘audio’: false};if (navigator.getUserMedia){ navigator.getUserMedia(options, v_success, v_error); }else{ not_supported(); }
  55. 55. Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ video_element.src = stream;}
  56. 56. Use camera + <video> +<canvas> for new tricksvar button = document.querySelector(#button);button.addEventListener(click,snapshot, false);......function snapshot(){ var c = document.querySelector(canvas); var ctx = c.getContext(2d); var cw = c.clientWidth; var ch = c.clientHeight; ctx.drawImage(video_element, 0, 0, cw, ch); }
  57. 57. Keep in mindWebRTC spec (containing getUserMedia) isstill in flux. Not a mature standard yet.Webkit has prefixed its version ofgetUserMedia.
  58. 58. Get it on:Opera Labs BuildLatest Opera.NextOpera Mobile 12
  59. 59. Opera Dragonfly
  61. 61. Inspect the DOM
  62. 62. Debug JavaScript
  63. 63. Network inspector
  64. 64. Style profiler
  65. 65. Tools - Color Picker
  66. 66. Remote debugging
  67. 67. Opera Mobile Emulator
  68. 68. Opera Mobile Emulator
  69. 69. Opera Mobile Emulator
  70. 70. The Developer Briefcase
  71. 71. ‘Edit the Page’ extension
  72. 72. Other developer extensions forOpera- YSlow!- PageRank- Firebug Lite- LiveReload- Layers- ResizeMe- GitHub Notifierand more... HTTPS://ADDONS.OPERA.COM/EN/EXTENSIONS/CATEGORY/WEB-DEVELOPMENT
  73. 73. Read up onDev.opera.com
  74. 74. Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor, twitter.com/shwetank