Friday, August 15th, 2008
Category: HTML
Henri Sivonon has taken Hixie’s Live DOM Viewer, and is now running the Validator.nu HTML Parser within it, using GWT 1.5 RC2, which fixed a bug to do with JavaScript in hosted mode.
Simply open the tool and put in some markup and see the puppy run. Below is an example that I saw on Sam Ruby’s blog.
Thursday, August 14th, 2008
Mark Pilgrim has released his second This Week in HTML 5 episode that covers window.navigator, a new Worker, talk on alt, and more.
The navigator attribute of the Window interface must return an instance of the Navigator interface, which represents the identity and state of the user agent (the client), and allows Web pages to register themselves as potential protocol and content handlers.
Currently, HTML 5 defines four properties and two methods:
![[image]](http://mowser.com/img?url=http%3A%2F%2Fajaxian.com%2Fwp-content%2Fthemes%2Fajaxian%2Fimages%2Ficon_feed.gif)
![[image]](http://mowser.com/img?url=http%3A%2F%2Fmedia.techtarget.com%2Fdigitalguide%2Fimages%2FMisc%2Fplatinum_site_sponsor.gif)
appName appVersion platform userAgent registerProtocolHandler registerContentHandlerThis is only a subset of navigator properties and methods that browsers already support. See Navigator Object on Google Doctype for complete browser compatibility information.
Content-Language. No, not the HTTP header, not even the <html lang> attribute, but the <meta> tag! As reported by Henri Sivonen,
It seems that some authoring tools and authors use <meta http-equiv='content-language' content='languagetag'> instead of <html lang='languagetag'>.
This led to revision 2057, which defines the <meta> http-equiv="Content-Language"> directive and its relationship with lang, xml:lang, and the Content-Language HTTP header.
In the continuing saga of the alt attribute, the new syntax for alternate text of auto-generated images (which I covered in last week’s episode) has generated some followup discussion. Philip Taylor is concerned that it will increase complexity for authoring tools; others feel the complexity is worth the cost. James Graham suggested a no-text-equivalent attribute; similar proposals have been discussed before and rejected.
Switching to the new Web Workers specification (which I also covered last week), Aaron Boodman (one of the developers of Gears) posted his initial feedback. This kicked off a long discussion and led to the creation of the Worker object.
Thursday, August 7th, 2008
Category: HTML
I am really jazzed about the first entry in a new series on HTML 5. Mark Pilgrim (of Python, Greasemonkey, Open Web, writer extraordinaire, and creator of Google Doctype) has started the series This Week in HTML 5 which aims to keep us up to speed on the spec, and progress across the board (what are browsers implementing etc).
In the first episode he discusses the progress with workers, interesting clarification around providing text instead of images, and more.
Anyway, over to Mark:
The biggest news is the birth of the Web Workers draft specification. Quoting the spec, “This specification defines an API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism.” This is the standardization of the API that Google Gears pioneered last year. See also: initial Workers thread, announcement of new spec, response to Workers feedback.
Also notable this week: even more additions to the Requirements for providing text to act as an alternative for images. 4 new cases were added:
Additionally, the spec now tries to define what authors should do if they know they have an image but don’t know what it is. Quoting again from the spec:
If the src attribute is set and the alt attribute is set to a string whose first character is a U+007B LEFT CURLY BRACKET character ({) and whose last character is a U+007D RIGHT CURLY BRACKET character (}), the image is a key part of the content, and there is no textual equivalent of the image available. The string consisting of all the characters between the first and the last character of the value of the alt attribute gives the kind of image (e.g. photo, diagram, user-uploaded image). If that value is the empty string (i.e. the attribute is just “{}“), then even the kind of image being shown is not known.
Great to see this series kick into gear, and having Mark keep us in the loop on the very important HTML 5 effort.
Wednesday, August 6th, 2008
Category: HTML, JavaScript, Tip
Michael Mahemof is working a lot with TiddlyWiki and posted on how the project injects HTML into an iframe, and then get them out later. This enables you to use the browser parser to do its thing:
Friday, July 25th, 2008
Eric Meyer has been working on an HTML 5 linking proposal and has put together a demonstration of his proposal.
His linking demo shows how you could put href="..." on paragraphs, table rows, cells, and many other places.
This demo is done with simple JavaScript for now, with the obvious hope that browsers natively support these features in the future.
Wednesday, July 16th, 2008
Sharath Udupa, an IE developer at Microsoft has posted on the IE 8 page navigations feature:
In IE8 mode, we provide support for script to update the travel log components (for e.g. back/forward buttons, address bar) to reflect client-side updates to documents. This allows a better user experience where users can navigate back and forth without messing the AJAX application state.
What is interesting here is that even though Sharath said: "adopted in IE8 from HTML5" we have Richard Monson-Haefel (Curl evangelist) saying Ajax is dead RIA walking. This strong conclusion comes from the fact that IE implemented an HTML 5 feature???
The Open Web always has baggage from the fact that there are many parties involved, but the benefits have always made it win out. The browser is the virtual machine of the Web. While Richard thinks that fragmentation can kill Ajax, I see a brighter picture. We have HTML 5 to look at, and browser are innovating in interesting ways. That is a good thing. It pushes us forward.
It is interesting that the articles pushed are on Silverlight using this for its own goals, but Sorry Richard, this doesn't mean people will be learning Curl :)
Monday, July 14th, 2008
Category: HTML
John Resig goes into more detail on the HTML 5 data- elements that gives developers a valid place to store metadata:
This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
Which you can get at via some simple code:
Using data- is a very practical solution, but people in the comments of John's post would much prefer a more "pure" solution. There are the "Just use XML namspaces" crowd, and the "define the data outside of the page" group, and the "use an XML island" folk. What are you?
Thursday, June 12th, 2008
Category: HTML, JavaScript
Form validation may seem a little boring, but it is still one of the low hanging fruits for Ajax.
Validanguage is a simple new validation framework that you can access and configure through HTML (via comments rather than attributes) and a JSON API.
For example, if you place the following next to an input, it will flash red if you try to type in anything other than a number, a dollar, or a period (good for a price).
Or you can configure it via JSON:
Features
Wednesday, June 4th, 2008
It seems so obvious once you think about it, but Rob O'Callahan from Mozilla took us by surprise in his blog post demonstrating his experimental branch of Gecko that allows you to apply SVG effects to HTML.
The code for applying the effects above follows:
Rob makes a bunch of good points, such as:
CSS isn't really up to the task [of applying advanced visual effects to HTML]. One problem is that CSS isn't good at manipulating structured values like shapes and filter processing stacks; they're cumbersome to write in CSS expression syntax, or else they require new custom CSS syntax (e.g. @-rules), and there's no standard DOM to let scripts manipulate components of these structured values. Another issue is that we should try to avoid duplicating specification and implementation of complex features.
Contrast that with SVG, which long ago dealt with spec'ing out fancy-pants effects in mark-up and interfacing with JavaScript APIs. In fact, Rob ends his piece with a little snubby-snubby to Flash and Silverlight based both on SVG's status as a standard and its nice integration with page markup:
A nice side effect of providing better SVG-HTML integration is that it gives SVG a leg up on the Web. You can't do these effects using Flash or Silverlight, and since they're not standards they probably won't ever be invited to this party.
Unlike WebKit's shiny new CSS stuff, you can't just yet get a build of this stuff in Gecko:
I'm making tryserver builds right now, and I'll update this post with a link when they're ready. Here's a link to my Mercurial repository.
But it looks like builds are forthcoming. Hats off to Rob for putting together such a cool proof-of-concept.
Wednesday, May 28th, 2008
Mike Chambers has create a nice proof of concept that implements the HTML 5 tag using JavaScript and Flash:
asically, this parses out VIDEO element / tag and its attributes, and replaces it with the appropriate OBJECT or EMBED element to display a Flash video player that loads the specified video. It has support for playing back both h264 content and FLVs.
It uses the SWFObject JavaScript library to display the Flash content.
Currently the following VIDEO attributes are implemented:
The tricky part will be cleanly implementing the VIDEO DOM scripting API, although I believe that that should also be possible.
To get it working, you just need to include the shim along with the video tag:
To see an example, go here, and then take a peak at the shim code itself.
Tuesday, May 27th, 2008
Anne van Kesteren gave an XTech presentation on HTML 5 and boiled it down to this:
The Web's language is HTML
The Web's application language is HTML too
HTML is pretty broken
HTML5 to the rescue
Defines processing for all of HTML
Is for Web applications and documents
Is defined in as an abstract language
Can be written in both HTML (HTML5) and XML (XHTML5)
Is a multi-vendor effort
Worked on by overlapping groups: WHATWG and W3C HTML WG
HTML5 is (partially) implemented today
HTML5 can be used today
Great Community! (Wikis, tools, tests, reviewing)
<section>, <footer>, <progress>, <time>, …
<input type=date>, <input pattern=[a-Z]>, …
Immediate mode graphics: <canvas>
<video> and <audio>
SQL storage, offline application cache, drag & drop, editing, …
Get involved: w3.org/html and whatwg.org.
EOP_ERR exception raised: slide 21
Also, Anne pointed out that ruby support has been added to HTML5.
If you are a Ruby hacker, don't get excited. This is a different ruby :)
"Ruby" are short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation. This specification defines markup for ruby, in the form of an XHTML module.
Monday, May 26th, 2008
Omar AL Zabir has posted about a new library called UFrame:
UFrame combines the goodness of UpdatePanel and iframe in a cross browser and cross platform solution. It allows a div to behave like an IFRAME loading content from any page either static or dynamic. It can load pages having both inline and external Javascript and CSS, just like an iframe. But unlike iframe, it loads the content within the main document and you can put any number of UFrame on your page without slowing down the browser. It supports ASP.NET postback nicely and you can have DataGrid or any other complex ASP.NET control within a UFrame. UFrame works perfectly with ASP.NET MVC making it an replacement for UpdatePanel. Best of all, UFrame is implemented 100% in Javascript making it a cross platform solution. As a result, you can use UFrame on ASP.NET, PHP, JSP or any other platform.
To use it you simply setup a div:
This reminds me a little of purple includes which let you grab pieces of remote documents.
iframes are notoriously slow, and this is one reason why the Caja project exists. If we can trust code to be in the page itself, it can render a lot faster (think widgets in a page).
Also, sometimes I wish I could just say: <div nobleedingcss> around comments in a blog say, so no CSS or formatting from within can effect the outer page (e.g. bad closing of a tag).
![[image]](http://mowser.com/img?url=http%3A%2F%2Fweblogs.asp.net%2Fblogs%2Fomarzabir%2FWindowsLiveWriter%2FUFramegoodnessofUpdatePanelandIFRAMEcomb_C197%2Fimage_thumb_5.png)
Monday, May 5th, 2008
Category: HTML, JavaScript
John must have had some downtime on Sunday afternoon, as he implemented an HTML parser in JavaScript. The library, that you can play with via this demo, lets you attack HTML in a few ways:
A SAX-style API
Handles tag, text, and comments with callbacks. For example, let's say you wanted to implement a simple HTML to XML serialization scheme - you could do so using the following:
XML Serializer
Now, there's no need to worry about implementing the above, since it's included directly in the library, as well. Just feed in HTML and it spits back an XML string.
DOM Builder
If you're using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:
DOM Document Creator
This is a more-advanced version of the DOM builder - it includes logic for handling the overall structure of a web page, returning a new DOM document.
A couple points are enforced by this method:
You would use the method like so:
One place that you could use this API would be on the server-side. For example, using Aptana Jaxer. Although, you could also interface directly to Java, or just use the Mozilla utilities directly.
Wednesday, April 23rd, 2008
Category: Dojo, HTML, Standards, Unobtrusive JS
Simon Willison pointed out the part of the HTML 5 spec that discusses a way to add attributes to HTML elements for your own needs via data-.
For example, a spaceship for a game:
Every HTML element may have any number of attributes starting with the string "data-" specified, with any value.
These are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
The dataset DOM attribute provides convenient accessors for all the data-* attributes on an element. On getting, the dataset DOM attribute must return a DOMStringMap object, associated with the following three algorithms, which expose these attributes on their element:
Simon points out that "this will be incredibly useful for unobtrusive JavaScript where there’s no sensible place to store configuration data as HTML content. It will also mean Dojo has an approved method for adding custom attributes to declaratively instantiate Dojo widgets."
Monday, February 11th, 2008
Category: Browsers, HTML, JavaScript
John Resig has written a Cross-Window Messaging sample using Firefox 3, which implements the current postMessage API in HTML 5. Opera 9 implements a slightly older version, and a new release will fix that of course:
This particular API adds a new method to every window (including the current window, popups, iframes, and frames) that allows you to send textual messages from your current window to any other - regardless of any cross-domain policies that might exist.
Specifically, you're given a new window.postMessage("string") method that generates a message DOM event on the document of the receiving document. This event object contains the message as a property: event.data which the receiving document can use however they see fit.
His example has a sender:
and a receiver:
He also touches on the security issues:
Having a standard, blessed, way to talk using this message based system is going to be great for Web developers.
Monday, January 28th, 2008
Category: Examples, HTML, JavaScript, Unobtrusive JS, jQuery
One of my main annoyances with writing code tutorials is that you need to maintain code in several locations: the code itself and the examples in the tutorial document. This is not really a problem when you can use a scripting language or print out the tutorials from a CMS, but when you just want people to get an HTML document you're in trouble. As I am right now writing a lot of articles I didn't want to waste my time and thought about using Ajax to load the code I am documenting into the HTML on the fly. The result looks something like this:
All you need to do is to add jQuery, the script and a class of "codeexample" to a link in the document you want to display. The script creates a PRE element with the code inside, replaces all the special characters, tabs with spaces and adds line numbers. For example:
If you only want to show certain lines (which you'll have to do if you want to explain some code step-by-step) you can define the lines as a list including ranges. Say you want to display line 5, 10 and 12 to 21, then you'd add:
You can highlight lines of code in the same manner, say you want like 18 to 20 in bold:
Last but not least you can make the link clickable to show an IFRAME with the rendered output. Clicking the link again will remove the iframe. For this, just add a class called "dodisplay":
The <