JavaScript

The ultimate embedded MP3 player: SoundManager 2 and hAudio

20after4 — Sat, 31 May 2008 06:54:56 -0500

Tonight I implemented this MP3 player for my band's website using SoundManager 2 and minimal support for the hAudio Microformat.

I'm rather pleased with the way that this turned out. Thanks to SoundManager 2 I have a nice playlist embedded directly in the semantic html on the page. Javascript catches clicks and hands off the URL to a hidden Flash object embedded on the page. It degrades gracefully: users without Javascript or Flash support will still be able to download the mp3 file since it's the target of a href link and the hAudio microformat should make it robot-friendly.

Another benefit: Songbird can see the mp3 files automatically populate it's web playlist.

If you would like to implement something similar you can visit this page and view the source, or check out the examples on the SoundManager 2 Project Page.

New Project: XULFolio

20after4 — Mon, 18 Feb 2008 17:04:31 -0600

This XULRunner-based application will be used for managing an online photography portfolio.

Overview

Currently supports Zenfolio's API. I may add Flickr and SmugMug support in the future, I am striving to keep the interfaces abstract so that it will be easy to plug in to other sites by writing a simple API Compatibility Layer.

Update: SmugMug isn't allowing anyone to obtain an api key at this time. This puts them indefinitely out of consideration for this project. Also, Flickr could end up owned by Microsoft. I am strongly apposed to this acquisition and I do not intend to develop anything for a Microsoft-owned site. As long as this is a possibility, I won't be working on Flickr support.

Interesting Developments

I developed a simple JSON-RPC library in javascript which uses Mozilla's new native JSON support.
ZenFolio uses SHA-256 hashes for their challenge-response authentication scheme. This took quite a while to work out but once I figured out how to use nsICryptoHash then it all went pretty smoothly.
I created a CRYPTO.jsm module to wrap up the hash generation functionality. In the process I got to play with the awesome new JavaScript code modules feature in XULRunner. This is similar to creating an XPCOM singleton component, however, it's much easier to implement.

I will post up the code on SVN soon. I think that the CRYPTO.jsm and my simple JSON-RPC code might be useful to someone.

Writing desktop applications with XULRunner and EXT

20after4 — Wed, 01 Aug 2007 07:55:04 -0500

I have been experimenting with EXT JS in XULRunner. I'm using it to build yet another photo upload application, similar to some Firefox extensions that you may have seen such as Fireuploader. I don't have a lot of details to report, however, I really like using the EXT Javascript framework. It's a bit complicated at first but the interfaces that it produces are really slick. Once I have a working demo I plan to post it here as an example of what can be done with XULRunner and EXT. Stay tuned!

Dragging widgets (Undecorated XUL windows)

20after4 — Mon, 30 Jul 2007 02:19:00 -0500

The following is a simple bit of code that can make a borderless window dragable, currently tested only on Linux. While this may not be needed in most X Windows Managers (due to alt-click dragability) it's still an important part of any desktop widget runtime. In WidgetRunner you can simply include this JavaScript file to provide the functionality automatically.

/* widget.js - shared code used in all widgets.
*/

window.addEventListener("load", startup, false);
var widgetRunner= window.opener.widgetRinner;

function startup() {
	
	window.opener.widgetLoaded(window);
	if (loadWidget) {
		loadWidget();
	}


	var startPos=0;
	var mouseDown = function(event) {
		startPos = [ event.clientX, event.clientY];

	}
	
	var mouseMove = function(event) {
		if (startPos != 0) {
			var newX = event.screenX-startPos[0];
			var newY = event.screenY-startPos[1];
			window.moveTo(newX,newY);
		}
	}
	
	var mouseUp = function(event) {
		startPos=0;
	}

	window.addEventListener("mousedown",mouseDown, false);
	window.addEventListener("mouseup",mouseUp, false);
	window.addEventListener("mousemove",mouseMove, false);
}

I have published a stripped down version of this code as an example on the Mozilla Developer Connection wiki. That document is here: Code_snippets:Windows#Draggable_windows

XHTML Applications and XULRunner

20after4 — Mon, 25 Jun 2007 05:05:16 -0500

As much as I love XUL and the Mozilla platform, I would like to introduce a related topic that I think deserves a little bit of attention. Maybe everyone is aware of this already but I rarely see it mentioned so I would like to devote a few minutes to the topic of XHTML applications in XULRunner. It may not be completely obvious to everyone: XULRunner can do a lot more than XUL. Just about any technology which works on the web will work inside of XULRunner - you can develop applications that utilize HTML, JavaScript, SVG and even Flash (via the Flash Player plugin.) Some developers may feel that XUL is superior HTML for user interface design, however, there are a lot more people who are familiar with HTML and JavaScript.

In my opinion, XUL should not be terribly difficult for any web developer with strong HTML, CSS and JavaScript. On the other hand, it's not exactly easy for new developers to familiarize themselves with all of the terminology and unfamiliar technologies provided by the Mozilla platform. It took me at least 6 months of casual coding and experimentation before I was beginning to be comfortable and productive working with XUL and XPCOM. The situation has improved since I first started coding Firefox extensions a little over one year ago; today the Mozilla Developer Center provides a lot of wonderful information to help newcomers familiarize themselves with the technology and become productive Mozilla developers. Even with great resources like MDC, it seems to me that Mozilla development can still be moderately intimidating for the uninitiated.

There was a point to all of this rambling, I'm sure of it. Oh yeah, XHTML Apps in XULRunner... I think that we should try to do whatever we can to make it very easy for web developers to write applications and deploy them into XULRunner packages. Developing web applications has never been easier than it is in 2007. There are many wonderful JavaScript libraries like jQuery, Prototype, YUI, Dojo and so many more. These tools, combined with HTML and CSS provide a framework for developing wonderfully rich applications. Compared to some other popular development environments, often web applications can be developed with less effort while having a lot more fun in the process.

I am very excited about one recent development that could be very interesting to the masses of web developers out there, though I am unlikely to reach many of said developers with this blog. The recent development that has me excited is called POW and it started as a Firefox extension by David Kellogg.

From the description of POW:

Turn the web on its head with the Plain Old Webserver (POW), which adds a server to your browser. Information and a tutorial for POW can be found at this wiki http://davidkellogg.com/wiki/Main_Page

POW is a very POWerful piece of software. It's a lot more than just a simple http server application. POW harnesses the power of the Mozilla platform in a way that I have never seen done before and it could be a basis for a lot of new and interesting applications. It should be possible to develop almost any small-scale web application using plain old html and javascript and deploy the application in unique ways with the help of POW and XULRunner. POW really blurs the line between client and server, making it possible to things like replacing server technologies such as PHP with "server-side javascript." I could go on and on about the possibilities but I'm not a wonderful writer; I would probably be boring my audience and that is assuming anyone even reads my blog. If you made it this far, I highly recommend that you take a look at POW and start thinking about the implications of this innovative approach to application development. If you love JavaScript as much as I do you should be getting excited about POW and the Mozilla platform in general. Thanks to so many incredible people in this community, It's a great time to be developing applications on Mozilla technology.