Toluu

Ajaxian

Cleaning up the web with Ajax

Backwards compatibility and HTML 5Today

John Allsopp has a thoughtful piece that races some old concerns about the new tag set in HTML 5, and how we will ever be able to jump on that train when the cabooze still has IE.old train cars.

It is great to have new semantics for <section> and all, but what will browsers do with these new tags?

John walks through a simple example with the new tags, shows some issues, and then wonders if we could use the existing extension points (attributes):

Let’s invent a new attribute. I’ll call it “structure,” but the particular name isn’t important. We can use it like this:

PLAIN TEXT

HTML:

1.  
2. <div structure="header">
3.  

Let’s see how our browsers fare with this.

Of course, all our browsers will style this element with CSS.

PLAIN TEXT

HTML:

1.  
2. div {color: red}
3.  

But how about this?

PLAIN TEXT

HTML:

1.  
2. div[structure] {font-weight: bold}
3.  

Sharing and creating HTML and CSS templatesToday

There are a slew of HTML/CSS design sharing template sites out there. What if there was a manifest that defined what they had, and tools could work with that so you could import repositories.

That is the vision that Daniel Glazman had when just created the HTML+CSS Templates Manifest 1.0 CC licensed spec.

You would end up with a file that looks like the example:

PLAIN TEXT

HTML:

1.  
2. <?xml version="1.0" encoding="UTF-8"?>
3. <templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
4.   <template shortname="aFarewellToColor">
5.     <title xml:lang="en">A Farewell to Color</title>
6.     <description xml:lang="en">
7.      

Watch out for the zoom; Debugging fun with CanvasYesterday

Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp.

The debugging exersize was fun, and he shares it with you on his personal blog.

The moral of the story is: watch out for that zoom feature in today's browsers!

Along the way, I got to learn that canvas supports fractional coordinates:

My first thought was that it would be due to fractional coordinates. I have years of experience with drawing APIs that force integer coordinates, so I’m used to relying whacking off the fractional part of a coordinate and making up the difference when necessary in a second pass. Canvas, on the other hand, supports fractional coordinates, which I’m told is the fancy thing to do these days. (How the fraction is converted to an actual pixel is depenendent on whatever drawing system is doing the heavy lifting somewhere down the stack.) When your coordinates are fractional, you can get this kind of fuzziness.

Because the interface I’m working with involves a few layers of rendering code, ensuring that integers ruled the roost took some time. But after quite a bit of poking around, I found no evidence of fractional coordinates. It was around this time I saw Vlad (Mozilla’s graphics guru) walking around the office and asked for some help.

We s

Web Workers update for Firefox 3.1Yesterday

Ben Turner has nicely written up the state of Web Workers that we will see in Firefox 3.1 (in beta 2 right now).

To show the latest, Ben got a demo working that decrypts Weave data in the client using a Worker:

PLAIN TEXT

JAVASCRIPT:

1.  
2.       // Launch the main worker.
3.       if (!worker) {
4.         worker = new Worker("weaveDecryptorWorker.js");
5.         worker.onerror = onerror;
6.         worker.onmessage = onmessage;
7.       }
8.  
9.       worker.postMessage({ types: types,
10.                            user: document.getElementById("username").value,
11.                            phrase: document.getElementById("passphrase").value,

AddressChooser: address picker in real-timeYesterday

Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.

As well as a basic version, you can also tie in auto complete.

Features include:

• Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …
• Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.
• Interactive map display location while you arex typing an address.
• Center map on user location (based on its IP) if mapping system allows it.
• Fully customizable.
• Fully documented with pdoc.
• Works on Safari, Firefox, IE 6/7, Chrome and Opera.
• ...