However, if you are running require()-esque loader code in the browser you want to avoid blocking calls else Steve Souders will come over and beat you up.

I have seen a couple of interesting items in this area:

RequireJS

James Burke of Mozilla Messaging has spent a lot of time in the depths of dojo.require(). He has taken another look at the problem and RequireJS a solution that offers:

• some sort of #include/import/require
• ability to load nested dependencies
• ease of use for developer but then backed by an optimization tool that helps deployment

He walks through the problem and why other solutions like LABjs, CommonJS require, and Dojo itself don't cover all of his bases.

The end result is:

Google Analytics "async add to []" Pattern

When talking to Davis Frank of Pivotal about some Google Analytics code, he pointed me to details about the new GA asynchronous loader that we very excitedly blogged about since GA was such a blocking offender on the Web.

Part of the asynchronous API is that you, the developer create an array, and use the push() method to put commands on a queue. This means that you can start pushing commands immediately.

Then, when the GA code loads asynchronously, it takes over that array and wraps those standard methods. Now it can take the commands and fire them back to GA and push() can do more. Freaking brilliant.

David Desandro has developed a newtypeface family named Curtis and done so in an interesting way.... using CSS:

Each character is wrapped in a <span> and then depending on the complexity of that character, more empty <span> elements are added to the markup to render each shape. Here's the markup for R:

PLAIN TEXT

HTML:

1.  
2. <span class="css_char r">
3.         R
4.         <span class="inside split_vert"></span>
5.         <span class="outside split_vert"></span>
6.         <span class="stroke"></span>
7.         <span class="fill"></span>
8. </span>
9.  

The Curtis CSS font wasn’t conceived of any practical application. I was more interested in seeing if it could be pulled off, and if so, what the final result would look like.

Fun and crazy!

Disclaimer: Ben and I work for Palm and created this program. I wanted to make sure that you were aware of it over here, since Web developers have a great chance of getting some $ :)

At Palm we wanted to reward the mobile Web developers who build great applications that our users can enjoy. We didn't want to do an "Mobile App Idol". For one, I didn't want to play the role of Simon (being the token Brit and all), and for two we find it hard to judge correctly.

So, we came up with the Hot Apps program that rewards based on the market (which while not perfect, takes out emotion from the judging system).

We put in 1 million dollars, and wanted to be sure to reward two sets of developers... those that created paid apps, and those that generously offered up their code for free. It is kinda fun to be able to say "oh, thanks for giving this away for free, but here is a reward for your hard work."

We also didn't want to just give money to the top couple of developers, but wanted to spread the love (whilst still having prize amounts that are meaningful). If you take a look at Project Appetite you can do some math on how you still have a great chance to make some $ if you get a great app into the competition.

So, if you fancy flexing some Web skills in mobile.... consider giving a run for Hot Apps.

Want to see some of the tools and a quick app build? Here is a screencast walkthrough that shows building a simple webOS app taken from a look at a helper script that I wrote:

Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn't see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).

John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:

updated with info from Microsoft press release:

As part of Microsoft’s broad engagement with open source communities, Corporate Vice President Scott Guthrie today announced that Microsoft is investing resources to contribute to the development of the jQuery JavaScript Library to help improve the development process of standards-based Web applications. Microsoft will also work to provide better interoperability between ASP.NET and the jQuery JavaScript Library by enhancing ASP.NET so .NET developers can better incorporate jQuery capabilities. In addition, Microsoft will actively promote and distribute versions of the jQuery JavaScript Library by packaging it with popular products such as Microsoft Visual Studio 2010 and ASP.NET MVC 2. As a first step, Microsoft will contribute a templating engine to the jQuery JavaScript Library Team to simplify Web applications.

It is early days (preview release) but great to see a solid go at it here. I *really* want the IE9 team to help us put the Silverlight team out of business :)

The Chromium folk have posted about JavaScript conformance as they release a test runner for Sputnik, that allows you to easily run the complete test suite from within your browser:

Sputnik touches all aspects of the JavaScript language defined in the 3rd edition of the ECMA-262 spec. In many ways it can be seen as a continuation of and a complement to existing browser conformance testing tools, such as the Acid3 test. While we are always focused on improving speed, Sputnik is not about testing how fast your browser executes JavaScript, but rather whether it does so correctly.

Since we released the Sputnik tests as an open source project, the most requested feature has been the ability to run the tests in a browser, and we are excited to launch that functionality today. The new test runner lets you run the tests from a single URL and quickly see the results in your browser. This makes it easier both for users to see how well their browser conforms to the JavaScript spec, as well as for browser makers to find bugs and incompatibilities.

You can also use Sputnik to compare browser conformance.

The dart board shows relative conformance based on the number of tests that hit or miss. Of course, in the real world, all tests are not equal. This has been an issue with Acid tests. The race to 100 is socially interesting, but if you miss a few core tests that could be worse than meeting 10 corner cases in SVG :)

The Problem

It is impossible to have an element fixed in CSS on the page in the mobile Webkit browser. When you are surfing the web on your phone, webkit opens the page completely and acts as a viewport.

"Imagine a book in front of you. Take a piece of paper, cut a 320*416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see." -Richard Herrera

Why it is important

To create better mobile applications and websites, we need fixed positionning to give the user better tools to browse the web on handled devices. Like a real mobile app, we could have a fixed toolbar when scrolling on a site, it is critical to not take the user in hostage in very long list or on long content pages. This is something we can't really emulate in javascript as mobile devices are not really powerful.

The solution

The Webkit team could give us a proprietary CSS property that would overwrite the viewport behavior, and this is the proposition here. Give us a CSS property like position: -webkit-viewport-fixed that we can apply on a div so it can be fixed to the viewport.

That is one feature request, but surely there we can add to that? The broad domain of "abettermobileweb.com" deserves more!

What would you like to see for mobile specifically that isn't covered in the current Web and device API standard work?

He starts with the simple pattern that Crock-y documented back in the day..... and then goes on to discuss augmentation (loose and strict) and then deeper into some cool patterns:

Cloning and Inheritance

PLAIN TEXT

JAVASCRIPT:

1.  
2. var MODULE_TWO = (function (old) {
3.     var my = {},
4.         key;
5.      
6.     for (key in old) {
7.         if (old.hasOwnProperty(key)) {
8.             my[key] = old[key];
9.         }
10.     }
11.      
12.     var super_moduleMethod = old.moduleMethod;
13.     my.moduleMethod = function () {
14.         // override method on the clone, access to super through super_moduleMethod
15.     };
16.      
17.     return my;
18. }(MODULE));
19.  

This pattern is perhaps the least flexible option. It does allow some neat compositions, but that comes at the expense of flexibility. As I've written it, properties which are objects or functions will not be duplicated, they will exist as one object with two references. Changing one will change the other. This could be fixed for objects with a recursive cloning process, but probably cannot be fixed for functions, except perhaps with eval. Nevertheless, I've included it for completeness.

Cross-File Private State

One severe limitation of splitting a module across multiple files is that each file maintains its own private state, and does not get access to the private state of the other files. This can be fixed. Here is an example of a loosely augmented module that will maintain private state across all augmentations:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var MODULE = (function (my) {
3.     var _private = my._private = my._private || {},
4.         _seal = my._seal = my._seal || function () {
5.             delete my._private;
6.             delete my._seal;
7.             delete my._unseal;
8.         },
9.         _unseal = my._unseal = my._unseal || function () {
10.             my._private = _private;
11.             my._seal = _seal;
12.             my._unseal = _unseal;
13.         };
14.      
15.     // permanent access to _private, _seal, and _unseal
16.      
17.     return my;
18. }(MODULE || {}));
19.  

Any file can set properties on their local variable _private, and it will be immediately available to the others. Once this module has loaded completely, the application should call MODULE._seal(), which will prevent external access to the internal _private. If this module were to be augmented again, further in the application's lifetime, one of the internal methods, in any file, can call _unseal() before loading the new file, and call _seal() again after it has been executed.

This pattern occurred to me today while I was at work, I have not seen this elsewhere. I think this is a very useful pattern, and would have been worth writing about all on its own.

Sub-modules

Our final advanced pattern is actually the simplest. There are many good cases for creating sub-modules. It is just like creating regular modules:

PLAIN TEXT

JAVASCRIPT:

1.  
2. MODULE.sub = (function ()) {
3.     var my = {};
4.     // ...
5.      
6.     return my;
7. }());
8.  

While this may have been obvious, I thought it worth including. Sub-modules have all the advanced capabilities of normal modules, including augmentation and private state.

Nice work Ben!

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

Then, two canvas objects are placed, one on each side, of the video itself.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

• Detecting the visitor's location with the W3C geo API and with IP as a fallback
• Find geo location from text
• Find location from lat/lon pair
• Find locations in a certain web document (by URL)
• Get the location for a certain IP number

And all of that in pure JavaScript. For example:

Will get you:

Other uses:

This gets the name and the country of a lat/lon pair:

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

Read all about it on my blog and enjoy!

There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):

There are lots of other great samples for you to play with and study!

Take the animated DataView transitions for example:

On top of that, the release includes:

• Multiple sorting and filtering on Ext.data.Store
• Composite Fields
• Slider improvements
• Toolbar plugins: ToolbarReorderer and ToolbarDroppable
• New Accessibility Theme: compliant with Section 508 of the Disabilities Act.
• Quality Assurance: Unit Testing: over 180 bug fixes and enhancements over 3.1

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

• border-radius
• box shadow
• gradients
• rgba support in backgrounds
• transforms
• font-face

Really nice way to make tweaks inline in the page..... nicely done. Hope to see some other examples out there :)

What does it do?

Kangax has forked John Resig's HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled="true" -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that—to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = 'darker'. This was on the HTML5 spec before but got removed. Just so you know what I'm talking about, this is like the "multiply" blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

The HTML5 specification introduces the

The above quote is from the Audio Data API extension that joins a bunch of juicy developer work in Firefox 3.7.

Thomas Sturm has taken that API and created a spectrum visualization a kin to some of the great work by Scott Schiller (using Flash).

There is a new onaudiowritten attribute:

that lets you get access to info such as the spectrum:

Add to that the ability to write audio....

Nice work all around.

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?

You have to grab Firefox nightly, do the about:config / gfx.font_rendering.directwrite.enabled game, but then you get to see it in action.

IE9 showed off how they will support hardware rendering, and I am sure we will see more at MIX, but it is very cool to see this across the board.

CSS Transforms/Transitions/Animations are going to feel like butter in 2010!

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down.

The most computationally expensive part is trying to satisfy the constraints. To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. This is something that cannot simply be thrown out either, so what do you do? You approximate it. There are lots of mathematical tools for approximating functions, in this case I chose the first couple terms of a taylor expansion.

Check out his fast vector, constraints, and finally the cloth itself.