Mozilla Labs announced it will no longer maintain the Prism project. Attention instead will focus on the more general Chromeless project, which also is a ”task-focused layer” running on top of Mozilla’s XULRunner runtime environment. In a blog entitled “Prism is now Chromeless,” Lloyd Hilaiel wrote: “The final change we’re announcing today takes the form of widening of the goal of the Chromeless project, that is specifically, we now want to make it possible to build desktop applications with Web technologies. “
Aug 26
(Various Shivs)
Via JD Bartlett comes HTML5 innerShiv for IE. Before innerShiv, the following would not work in IE:
HTML:
var s = document.createElement(‘div’);
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);
For example, let’s imagine we have some CSS that defines the following for the HTML5 elements footer, header, and section:
CSS:
footer, header, section {
border:1px solid #ccc;
display:block;
padding:10px;
}
border:1px solid #ccc;
display:block;
padding:10px;
}
Unfortunately, even if you are using one of the tricks to force IE to deal with HTML5 elements shivs don’t work when dealing with innerHTML before an element is appended to the DOM:
However, the shiv doesn’t work in Internet Explorer when an element’s content is added with innerHTML before being appended to the document. That’s a common use case, and noticeable in libraries like jQuery when you try to append or load (etc.) HTML5 content
Some example bad JQuery code that runs into this problem:
JAVASCRIPT:
$(‘#example-1′).append(“<section><header><h3>Example 1:\
a broken section</h3></header><p>This section element should\
have a black border like the others. It doesn’t in Internet\
Explorer. :(</p></section>”);
a broken section</h3></header><p>This section element should\
have a black border like the others. It doesn’t in Internet\
Explorer. :(</p></section>”);
JD’s library is the solution to this problem:
innerShiv is a function which takes your HTML string, adds it to a hidden document-appended element in IE, and returns an IE-safe document fragment or collection
Now you can do the following to have things work:
JAVASCRIPT:
$(‘#example-2′).append(innerShiv(“<section><header><h3>\
Example 2: a successfully styled section</h3></header>\
<p>This section element should have a gray border like the\
others. And it does! Even in Internet Explorer! Yay!.</p>\
</section>”));
Example 2: a successfully styled section</h3></header>\
<p>This section element should have a gray border like the\
others. And it does! Even in Internet Explorer! Yay!.</p>\
</section>”));
Note that you don’t have to use JQuery to use innerShiv.
Aug 11
The HTML5 love continues to be doled out by Paul Irish. First, he offered up Modernizr and now, he’s teamed up with Divya Manian to create an HTML5 boilerplate which leverages best practices to get your started.
It’s essentially a good starting template of html and css and a folder structure that works. But baked into it is years of best practices from front-end development professionals. Take a peek through the source to get a feel of what’s inside. And if you think there’s too much? Delete key that badboy.
Straight from the site, here are some of the features that make this very cool:
- Cross-browser compatible (IE6, yeah we got that.)
- HTML5 ready. Use the new tags with certainty.
- Optimal caching and compression rules for grade-A performance
- Best practice site configuration defaults
- Mobile browser optimizations
- Progressive enhancement graceful degradation … yeah yeah we got that
- IE specific classes for maximum cross-browser control
- Handy .no-js and .js classes to style based on capability
- Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.
- Javascript profiling…in IE6 and IE7? Sure, no problem.
- Console.log nerfing so you won’t break anyone by mistake.
- Never go wrong with your doctype or markup!
- An optimal print stylesheet, performance optimized
- iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
- IE6 pngfix baked in.
- .clearfix, .visuallyhidden classes to style things wisely and accessibly.
- .htaccess file that allows proper use of HTML5 features and faster page load
- CDN hosted jQuery with local fallback failsafe.
- Think there’s too much? The HTML5 Boilerplate is delete-key friendly. :)
I’ve heard several people mention about getting some sort of HTML5 template to work from setup so it’s nice to see one completed and out in the wild. This should be a big help.
The project uses everyone’s favorite source control system Github so you can grab it from there or download a zipped up file from the site.
Jun 23
Rick Waldron has detailed the SharedWorker support that Opera has added in 10.6 beta (and has been available in Safari 5 and Chrome 5).
Web Workers are fantastically simple. Simple message passing. No thread locks and semaphores and craziness. However, not being able to share a thing as a constraint is painful, and a nice addition to the spec is the notion of a SharedWorker:
Instead of a single message processing function, workers can attach multiple event listeners, each one performing a quick check to see if it is relevant for the message. If multiple authors wanted to collaborate using a single port to communicate with a worker, it would allow for independent code instead of changes having to all be made to a single event handling function.
To get the Gist of it, Rick put together some GitHub goodness to exemplify the new world:
Basic HTML page for running the test:
The HTML page called in the iframe:
The Renderer (that’s your browser window)
The SharedWorker
This demonstrates how we can connect two different pages to the same SharedWorker process, and track our connections to them from one persistent object variable. Very exciting!
