Pushing the web:Interesting things to knowabout upcoming webstandards      By Shwetank Dixit, Opera Software
about meWeb Evangelist, Opera DeveloperRelations TeamMember, W3C Mobile Web for SocialDevelopment GroupMember, W3C Web Edu...
Front-end development - a lot of learn!
We’ll focus on a few things
We’ll focus on a few things               HTML5 and friends
Same Origin Policy        Our story begins from here...
Same Origin Policy1. Let /A/ be the first origin being compared, and let /B/ be the    second origin being compared. 2. If ...
Same Origin PolicyShould have the same...Scheme / Host / Port
Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttps://www.example.org
Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttp://xyz.example.org
Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttp://www.example.org:1337
Same Origin PolicyThese WILL match, and are considered the same originhttp://www.example.org/abc/http://www.example.org/xyz/
Storage: Web Storage
The problem with cookiesUnreliableNo programmatic APIs to manipulate itNot structuredMost of important of all ...Small file...
Web StorageSession Storage and Local Storage
localStorage.setItem(yourkey,yourvalue); // Store the valuevar item = localStorage.getItem(yourkey); // Retrieve the value...
You can store images (andmore) with localStorage                 ....BUT DON”T.
Automatically save enteredform info locallyin case page crashes or closes, person canresume from where he left off
STORE USER DATA OFFLINE                 PERIODICALLY<textarea id="draft" rows="10" cols="30"></textarea>......function sav...
Or...You could save only when you detect a newkeystroke (or a minimum number of them)
GotchaTwo tabs updating the same value
Storage eventsKnow if some other page has changed thevalue or not
GET NEW VALUE IF ITS BEEN CHANGED         IN PARALLEL TABaddEventListener(storage, function(event){�   if (e.oldValue){�  ...
GotchaUsing a free hosting service - Don’t use localstorage with it if they store users accountson different directories.e...
Cross Origin ResourceSharing (CORS)
Whats CORS?CORS is a system of headers and rules thatallow browsers and servers to communicatewhether or not a given origi...
Access-Control-Allow-OriginHeader to Let the referrer know whether it isallowed to use the target resource.
Access-Control-Allow-OriginAccess-Control-Allow-Origin: nullAccess-Control-Allow-Origin: *Access-Control-Allow-Origin: htt...
Cross Domain XHRvar xhr = new XMLHttpRequest();var onLoadHandler = function(event) {  /* do something with the response */...
Capture JS errors ... with JS
window.onerror
window.onerrorError MessageLine NumberFile URL in question
window.onerrorwindow.onerror = function(message, url, linenumber) {  alert("JavaScript error: " + message + " on line " +l...
What could you do with it?
Better looking errormessages.
Log errors in a flat file or DB.
WebSockets
Previous techniquesContinuous PollingLong Polling
WebSocketsBuilt Over HTTPFull DuplexBi-Directional
HTTP Server ‘upgrades’ toa WebSocket server
The initiating handshake from the client should look like this:GET /chat HTTP/1.1 Host: server.example.com Upgrade: WebSoc...
What happens1. The client sends the Sec-WebSocket-Key string dGhlIHNhbXBsZSBub25jZQ==2. The server appends the magic strin...
WebSockets APIif (WebSocket in window){   /* WebSocket is supported. You can proceed with your code*/} else {   /*WebSocke...
WebSockets APIvar connection = new WebSocket(ws://example.org:12345/myapp);or wss://, which is the secure socket variant t...
Handling an open connectionconnection.onopen = function(){  /*Send a small message to the console once the connection is e...
Sending Messagesconnection.send(Hey server, whats up?);orvar message = {name: bill murray,comment: No one will ever believ...
Receiving Messagesconnection.onmessage = function(e){  var server_message = e.data;  console.log(server_message);}
Use CasesAny App which wants real time updating of info1. High performance web based games2. Sport Scores3. Social Media r...
My Websockets article onDeveloperFusionhttp://www.developerfusion.com/article/143158/an-introduction-to-websockets/
Device OrientationAccess to gyroscope, accelerometer info etc
Access gyroscope infowindow.addEventListener("deviceorientation", function(event) {      // process event.alpha, event.bet...
Access accelerometer infowindow.addEventListener("devicemotion",function(event) {     // Process event.acceleration   }, t...
Another sneak peak
Check for accessvar options = {‘video’: true, ‘audio’: false};if (navigator.getUserMedia){ 	 navigator.getUserMedia(option...
Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ 	 video_element.src = ...
Use camera + <video> +<canvas> for new tricksvar button = document.querySelector(#button);button.addEventListener(click,sn...
Keep in mindWebRTC spec (containing getUserMedia) isstill in flux. Not a mature standard yet.Webkit has prefixed its version...
Get it on:Opera Labs BuildLatest Opera.NextOpera Mobile 12
Opera Dragonfly
(RIGHT-CLICK ON PAGE) -> ‘INSPECT ELEMENT’
Inspect the DOM
Debug JavaScript
Network inspector
Style profiler
Tools - Color Picker
Remote debugging
Opera Mobile Emulator
Opera Mobile Emulator
Opera Mobile Emulator
The Developer Briefcase
‘Edit the Page’ extension
Other developer extensions forOpera- YSlow!- PageRank- Firebug Lite- LiveReload- Layers- ResizeMe- GitHub Notifierand more....
Read up onDev.opera.com
Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor, twitter.com/shwetank
Upcoming SlideShare
Loading in …5
×

Pushing the Web: Interesting things to Know

3,680 views
3,606 views

Published on

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,680
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
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
  60. 60. (RIGHT-CLICK ON PAGE) -> ‘INSPECT ELEMENT’
  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

×