html5 - Dave's Blog


Search

JavaScript Promises: There and back again - HTML5 Rocks

2013 Dec 17, 9:02

The ES6 form of Promises.

PermalinkCommentstechnical javascript

Pixel Perfect Timing Attacks with HTML5 - Context » Information Security

2013 Aug 7, 8:25PermalinkCommentssecurity html html5 svg javascript requestAnimationFrame iframe

Subtleties of postMessage

2013 Jul 15, 1:00

In IE10 and other new browsers one may create MessageChannel objects that have two MessagePorts each connected (w3c spec calls it entangled) to one another such that postMessage on one port results in the message event firing on the other. You can pass an array of ports as the last parameter to postMessage and they show up in the ports property of the message event arg.

Origin

The postMessage here is like the worker postMessage and unlike the window and iframe postMessage in that it applies no origin checking:

  1. No origin postMessage in workers and MessagePorts: postMessage(messageData, ports)
  2. Origin postMessage in windows and iframes: postMessage(messageData, targetOrigin, ports)

Unfortunately the origin isn't an optional parameter at the end to make the two postMessages have the same signature.

On the event handler side, the event arg always has an origin property. But in the no origin case it is always the empty string.

Source

There is also a source property on the message event arg which if set is an object that has a postMessage property allowing you to post back to your caller. It is set for the origin case, however, in the no origin case this property is null. This is somewhat reasonable because in the case of MessagePort and Workers there are only two endpoints so you always know the source of a message implicitly. Unlike the origin case in which any iframe or window can be calling postMessage on any other iframe or window and the caller is unknown. So not unreasonable but it would be nice if the source property was always set for consistency.

MessageChannel start

When a MessageChannel is created it has two MessagePorts, but until those ports are started they will queue up any messages they receive. Once started they will dispatch all queued messages. Ports don't have to be started to send messages.

A port may be started in two ways, either by explicitly calling the start method on the port, or by setting the onmessage callback property on the port. However, adding an event listener via addEventListener("message", does not start the port. It works this way in IE and Chrome and the spec states this as well.

The justification is that since you can have only one callback via onmessage that once set you must implicitly be ready to receive messages and its fine to start the port. As opposed to the addEventListener in which case the user agent cannot start implicitly because it doesn't know how many event listeners will be added.� I found Hixie stating this justification in geoloc meeting notes.

Links

W3C Spec

Opera introduction

PermalinkCommentsDOM html javascript postMessage technical web-worker worker

Raising the bar on web uploads

2012 Apr 25, 5:00

Flickr’s new HTML5-ish photo upload feature technical overview.

PermalinkCommentstechnical html html5 javascript css3 css flickr file-upload

Image Error Level Analysis with HTML5

2012 Apr 16, 1:59

Javascript tool says if a photo is shopped. It can tell by looking at the pixels. Seriously. Links to cool presentation on the theory behind the algorithm behind the tool: http://www.wired.com/images_blogs/threatlevel/files/bh-usa-07-krawetz.pdf

PermalinkCommentstechnical javascript jpeg photoshop

WHATWG Weekly: http+aes URL scheme, control Referer, …

2012 Mar 7, 8:08

Seems generally bad to embed sensitive info in the URI (the http+aes URI scheme’s decryption key) similar to the now deprecated password field.

Use case is covered here: http://lists.w3.org/Archives/Public/ietf-http-wg/2012JanMar/0811.html.  Also discussion including someone mentioning the issue above.

PermalinkCommentstechnical html5 html uri uri-scheme http http+aes

HTML5 Table Flipper Experiment

2012 Mar 2, 1:02

The goal of this experiment was to combine the flipping tables emoticons with the Threw It On The Ground video using shiny new HTML5-ish features and the end result is the table flipper flipping the Threw It On the Ground video.

The table flipper emoticon is CSS before content that changes on hover. Additionally on hover a CSS transform is applied to flip the video upside down several times and move it to the right and there's a CSS transition to animate the flipping. The only issue I ran into is that (at least on Windows) Flash doesn't like to have CSS transform rotations applied to it. So to get the most out of the flip experiment you must opt-in to HTML5 video on YouTube. And of course you must use a browser that supports the various things I just mentioned, like the latest Chrome (or not yet released IE10).

PermalinkCommentscss-transform flipping-tables css-transition html5-video technical threw-it-on-the-ground

Mothereffing animated gif

2012 Feb 17, 7:31

Client side animated GIF creator web app.

PermalinkCommentstechnical javascript gif animated compression html5

Glimpse of the future: Fiddler and HTML5 WebSockets

2011 Nov 24, 5:00PermalinkCommentstechnical fiddler websockets html5

[html5] Web Workers: Race-Condition setting onmessage handler?

2011 Sep 20, 7:17There's no race between posting to a web worker and the web worker setting up its message handler as long as the web worker sets its message handler in the first sync. block of code that runs in the web worker: "Basically, once the initial worker script returns, the worker's port is enabled and the normal message port event delivery mechanism kicks in (including dropping unhandled messages on the floor)."PermalinkCommentstechnical web-worker webbrowser programming postMessage

manifestR - offline web apps made easy (well easier)

2011 Jul 14, 7:34A bookmarklet to help you create an appcache manifest: "...click the manifestR button, and it will create an HTML5 appcache manifest file for that page."PermalinkCommentsdevelopment javascript tools html5 cache technical

X-Icon Editor

2011 Apr 15, 8:13PermalinkCommentseditor icon favicon html5 online

Spirit of Indiana (Jones) – syncing HTML5 Video with Maps ✩ Mozilla Hacks – the Web developer blog

2010 Dec 16, 1:12Nice! Indiana Jones style map fade in over video done in HTML5 with video tag, and Google maps API.
PermalinkCommentshtml5 video map technical demo google animation svg

Revision 60.000, first bits of the URL API and pingin’ the anchor « Peter Beverloo

2010 Sep 27, 3:08Adam Barth's URI API draft starts to appear in webkit: "One of the things Adam Barth is currently working on is an URL API. Citing it, the API can be used for constructing, parsing and resolving URLs through scripting, easening up tasks like getting and setting parameters. Today the first part landed in WebKit, which added the “origin” property."PermalinkCommentswebkit adam-barth uri url api javascript dom html html5 browser webbrowser technical

Video+html5+Popcorn.js=hyper-video - Standblog

2010 Aug 22, 4:04Demo of marked-up video with the people and places shown in the video popping up along side in real time.PermalinkCommentsvideo html html5 javascript technical mozilla

File API

2010 Aug 13, 4:38Blobs are coming and they're bring with them a new URL scheme...PermalinkCommentsblob html5 url html file api javascript technical uri guid

The Emperor’s New APIs: On the (In)Secure Usage of New Client-side Primitives

2010 May 6, 7:43Covers case studies of insecure usage of HTML5 cross-document messaging and web storage.PermalinkCommentshtml html5 web browser security technical webstorage research facebook google system:filetype:pdf system:media:document

Distributed Extensibility - Dive Into HTML5

2010 May 4, 10:52On HTML5's extensibility: how does microdata work in HTML5?PermalinkCommentsvia:kris.kowal html5 html microformats semanticweb todo technical

Code Standards | Isobar

2010 May 2, 3:14"This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular)." Glad to see coding styles and best practices for HTML, CSS, JS, associated HTTP headers etc etc etcPermalinkCommentscode css html html5 javascript web browser programming development technical via:kris.kowal

HTML 5 Video Seeking and Redirects

2010 Apr 26, 3:09Firefox developer on the topic of HTML5 video and the issues of using HTTP range requests to seek within an HTML5 video.PermalinkCommentshtml html5 http range technical video firefox web browser bug code programming
Older Entries Creative Commons License Some rights reserved.