Remy Sharp has developed a tool for remotely debugging web pages. This works using code injection, so be very sure to keep it out of production environments. However, when you need to diagnosis issues remotely, say, because it’s on a mobile device, with limited console support, or because a client is reporting problems that you can’t repeat locally.

Implementing this is a snap!

:listen

This returns an UUID which you will need to insert into the page markup:

<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA" type="text/javascript"></script>

From then on, calls to console.log() will return their output to your listening machine.

The really handy library has one more trick up its sleeve. You can specify the UUID to which you will listen.

:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA

When the remote device loads the debugging module, you’ll see something like this in your console:

:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Creating connection...
Connected to "FAE031CD-74A0-46D3-AE36-757BAB262BEA"
Connection established with Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8

HTML5 begat the AUDIO tag. Now that we have it, what do we do with it? And how do we accommodate older browsers?

Unfortunately, there are two incompatible standards and the W3C Audio Working Group "has not decided upon a specification".

The Web Audio API works on recent builds of Chrome and Safari. The API includes complex filters and allows developers to roll drum machines and visualizations. It’s active by default on Chrome 16, but not on Safari 5. Worse, Safari 5 reports that it is supported, but won’t run the samples to which I have linked. Adding insult to injury, it’s also slow and can randomly introduce skips and clicks.

Mozilla introduced the Audio Data API, but it only works in Firefox 4 and above. It’s also a very low level API and requires intermediate libraries to be truly useful for non-developer apps, of which there are a number. Like Google’s Web Audio, it’s slow and can randomly introduce skips and clicks.

Since these two technologies encompass only about half of web traffic, we clearly need fallback mechanisms.

There is SoundManager2 which uses both HTMl5 and Flash 8 or 9+ to bridge platforms. It relies on MP3/AAC/OGG/WAV sample files and supports panning, sampling and – most valuable – event support. Events like whileplaying and onposition make it easy to sync your audio and video. Beyond equalization, volume and start/stop positions, however, you can’t do much to filter the sound output.

You might also try Audiolet, which lets you generate your own waveforms in browser, giving you a full range of freedom, but it’s going to sound like 8-bit audio unless you use samples. (Hint: try combining it with MUSIC.js to make the most of that 8-bit arcade sound)

Then there is audiolib.js, which goes even lower than Audiolet and can operate server-side. It allows you to both manipulate and generate audio samples in PCM format, which it can then save for future use.

Audiolet starts quickly and is half the size of SoundManager2, but can click and skip, especially when the browser is scrolling or otherwise pre-occupied. SoundManager2 can bog down when playing too many sounds at once. Try activating +follow and then moving your mouse quickly over its Smashing Christmas Lights demo to see this in action.

Audiolib is extremely low level, but for generating short realistic waveforms, it is effective and fast, both client-side and server. Sadly, in Firefox 9 on my Mac, this example only plays the first bell while Safari 5 and Opera 11.6 played nothing at all. Chrome 16 played it correctly. However, when I had the page open in 3 browsers simultaneously, even though only one was generating noise, the load was causing skipping and clicking in Chrome. Your audio could easily suffer if the end user’s computer is otherwise busy.

In short, there is no good solution yet that is widely supported and flexible and performant, even within modern browsers.

Remember the glory days of 8-bit audio? Games today feature fully scored soundtracks records in dozens of high quality MP3′s, but as late as the 90′s, music was 8-bit frequency manipulation.

MUSIC.js is Greg Jopa’s library for taking notation and calculating its corresponding frequency. This can then be fed to audio generation libraries like audiolet.js to generate the sound.

Implementation is very simple. Take his sample of A from the fourth octave. Two lines is all it takes:

var n = Note.fromLatin('A4');
var freq = n.frequency(); // returns 440

Intervals are similarly straightforward:

var c = Note.fromLatin('C3');
 
// by semitone
var wholeStep = Interval.fromSemitones(2);
var d = c.add(wholeStep);
console.log(d.latin()); // "D"
 
// by interval name
var g = c.add('fifth');
console.log(g.latin()); // "G"

It even calculates chords and scales. Note that all of these calculations are uncached, so you will want to optimize your loops.

Unless you develop in-house sites for companies that have standardized on a very modern browser, you’re stuck developing sites for IE8 and even IE7. (Heaven help you if you’re still developing for IE6).

How then do you access some of the powerful features of ECMAScript or the contextual tags of HTML5 without having to write layer upon layer of fallbacks?

Your fellow JavaScript developers have produced shims to emulate most of this functionality, even in environments where Chrome Frame isn’t viable.

The html5shiv project is still under active development. It not only adds support for HTML5 contextual tags, it sets their default styling and makes them print in IE8 and below. Naturally, their canvas element is not going to have the behaviors you see in other browsers, but at least you can get away with a single set of markup and fewer CSS rules.

The es5-shim project is also under active development. It alters prototypes of native objects, so I wouldn’t combine it with prototype.js. This library also has the benefit of being well documented – including what does and does not differ from the specification. Heed the cautions from Kris Kowal, its author, though:

“As closely as possible to ES5″ is not very close. Many of these shims are intended only to allow code to be written to ES5 without causing run-time errors in older engines. In many cases, this means that these shims cause many ES5 methods to silently fail. Decide carefully whether this is what you want.

We’ve discussed Date.js before. It is an amazing library that makes date manipulation simple. On their home page, perhaps the most elegant line of code is (3).days().ago();

There is a downside though – it’s abandoned. Its last full release was November 2007 and code was last committed May 2008. Moment.js, on the other hand, is still under active development.

It also has integrated support for NodeJS, but what’s particularly cool about it is the emphasis on human-friendly times. The from() and fromNow() methods will return strings like “in 5 days” or “a year ago”, while the format() method can simply be passed “LL” to display a localized date, without the time, simplifying development.

It also adds a diff() method, quickly returning the difference between two moment objects, but in units of your choice.

That said, there are some things it doesn’t do that Date.js does. The comparison methods like compareTo() and equals() are nowhere to be seen, although you could certainly use diff() to emulate them.

Likewise, hasDaylightSavingTime() can quickly be rewritten as

return moment({month: 0, day: 1}).getTimezoneOffset() !=
moment({month: 6, day: 1}).getTimezoneOffset();

which is actually more succinct than the Date.js implementation.

DocumentCloud bills Underscore as “the tie to go along with jQuery’s tux,” but I think that this description is misleading.

In less than 4KB, and without manipulating object prototypes, it provides a superset of jQuery’s set manipulation, fills the gaps in IE’s implementation of arrays, types variables correctly and provides several other neat tricks.

Neat tricks, you say? How about automatically changing the value of this when you call a function? Or providing a very simple templating engine? Or elegantly handling variable name conflicts? Those would be the bind(), template() and noConflict() methods, respectively.

To top it all off, it uses native methods, in browsers that support it, and offers both object-oriented and functional coding support.

With no dependencies, a tiny footprint, and a huge punch, it’s a powerful tool at your disposal.

About a month ago, I found myself In a terrible debugging situation. A web app that I had carefully QA’d in both an IE 8 and IE9 environment was receiving a slew of bug requests from users. Some of these we’d expected. The use of several minor CSS3 tweaks meant that the visual experience was intentionally degraded in IE, but many of these we hadn’t.

Script timeout errors popped up randomly throughout the enterprise.
IE 666 users complained and I wasn’t allowed to take appropriate action.
Layout quirks surfaced.

Even more troubling was the discovery of radically different layout interpretations between builds of IE 8. My testing had proved inadequate because minor build number differences were interpreting the css in radically different ways. Since the app had managed to make it into production with these issues, and fully repairing all of them looked to be a slog I didn’t have the temporal luxury of pursuing; I punted. I threw up conditional comments to repair the issues that were preventing casual browsing. Then I hid the login box for IE users; replacing it instead with a Chrome Frame install prompt.

The results were immediate. My complaint volume dropped astoundingly. More importantly, the number of unresolved Scorchers went to zero. At the same time, no one complained about needing to install Chrome Frame. I had a few issues with insufficient permissions, and a few lingering CSS tweaks that needed rolled out, but the ease of the fix really was astounding.

I’ve since retrofitted most of my production apps and web servers to take advantage of my users newly capable Microsoft Browsers and plan on making the strategic retreat a deployment strategy for many new projects. While I don’t plan on abandoning support for IE, I look forward to minimizing its impact on project risk.

Note:  This post was updated on 2011.6.16 due to a mistake in my account.

For those of you not aware, Hype is a new OSX app for building interactive HTML5 in a Timeline / WYSIWYG interface.

It’s not the first product in the space (Sencha Animator), it’s the first well publicized version 1.0 I’ve come across.  It’s also pretty reasonably priced at 29.99 a seat.

First the good points:

• Ease of use: This is definitely a pretty straightforward tool in this regard.
• Interoperability: The Hype API and ability to execute arbitrary javascript inside the page DOM make this a great option for extending the capabilities of an existing web app.  I’d obviously like it to be richer, but it’s a decent compromise for a rev 1 product.
• OS integration: For those of us on OSX, the drag and drop support  and polished UI are incredibly nice.

So what needs improvement:

• Animation along a path with key frames:  I realize this isn’t as embodied in css3 transforms as other options, but YUI Animation and Sencha Animator do it, so It’s demonstrably possible.
• Dynamic Sprite creation: The fact we can play arbitrary timelines from javascript is nice, but I would like to be able to add timelines to the frame.
• Direct Sprite manipulation: Changing sprite colors or the text in a block might be useful.

If you’ve ever had an autocomplete field, you’ve had to deal with reducing server load and improving perceived performance for the user.

Most of the time, we rely on the server to store the data for us and retrieve it quickly and/or return an HTTP 304.

The cachejs library flips that model on its head and handles the caching client-side using your choice of storage. Currently, it supports HTML5 Local Storage, a variable in the current window, or cookies, but you could conceivably add additional engines.

Further, its only external library is JSON2 for transparent serialization/deserialization, but this could readily be swapped out for your pre-existing framework by editing the JSONWrapper declaration in stores.js.

The only notable downside to the implementation that I have found is that it creates at least four global variables, when it could easily have been implemented as members of a single object.

Alright,  So you’ve spent 3.4 billion dollars to acquire a massive software development firm only to discover that their flagship product; Flash.  Is about to go the way of the dodo in favor of HTML5.  What’s an Adobe to do?

One answer they’ve presented is Wallaby: a standalone tool to compile FLA files into html5.

From a business perspective, this is awesome.  It allows you to continue using the awesome FLA authoring toolkit Adobe sells while shell leveraging the power of modern browsers.  Lets face it, the era of flash as a runtime is over, the era of needing powerful easy to use authoring environment for rich web media is only going to increase over the next few years.