Pushing the Web: Interesting things to Know

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 EducationCommunity Grouptwitter.com/shwetankemail: shwetankd@opera.com

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 ﬁrst 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-deﬁned 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.

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 ﬁle size, so very limited data can bestored.

Web StorageSession Storage and Local Storage

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.

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 saveMessage(){� var message = document.getElementById("draft");� localStorage.setItem("message", message.value)}setInterval(saveMessage, 500);

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){� alert(changed from +event.oldValue+ to +event.newValue+);� }}, false);

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

Cross Origin ResourceSharing (CORS)

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.

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: http://foo.example

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);

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 " +linenumber + " for " + url);}

What could you do with it?

Better looking errormessages.

Log errors in a ﬂat ﬁle 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: 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

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.

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*/}

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);

Handling an open connectionconnection.onopen = function(){ /*Send a small message to the console once the connection is established */ console.log(Connection open!);}

Sending Messagesconnection.send(Hey server, whats up?);orvar message = {name: bill murray,comment: No one will ever believe you};connection.send(JSON.stringify(message));

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 real time updates4. Breaking news real time updates5. Chat applications

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.beta andevent.gamma }, true);

Access accelerometer infowindow.addEventListener("devicemotion",function(event) { // Process event.acceleration }, true);

Another sneak peak

Check for accessvar options = {‘video’: true, ‘audio’: false};if (navigator.getUserMedia){ navigator.getUserMedia(options, v_success, v_error); }else{ not_supported(); }

Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ video_element.src = stream;}

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); }

Keep in mindWebRTC spec (containing getUserMedia) isstill in ﬂux. Not a mature standard yet.Webkit has preﬁxed its version ofgetUserMedia.

Get it on:Opera Labs BuildLatest Opera.NextOpera Mobile 12

Opera Dragonﬂy

(RIGHT-CLICK ON PAGE) -> ‘INSPECT ELEMENT’

Inspect the DOM

Debug JavaScript

Network inspector

Style proﬁler

Tools - Color Picker

Remote debugging

Opera Mobile Emulator

The Developer Briefcase

‘Edit the Page’ extension

Other developer extensions forOpera- YSlow!- PageRank- Firebug Lite- LiveReload- Layers- ResizeMe- GitHub Notiﬁerand more... HTTPS://ADDONS.OPERA.COM/EN/EXTENSIONS/CATEGORY/WEB-DEVELOPMENT

Read up onDev.opera.com

Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor, twitter.com/shwetank

Pushing the Web: Interesting things to Know

by n|u - The Open Security Community on Aug 30, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 494

Statistics

Pushing the Web: Interesting things to Know Presentation Transcript