Toluu

John Resig

Blog, Projects, and Links

EtherPad: Real-time Editing with JavaScriptYesterday

I had the opportunity, last year, to talk with the team behind AppJet. They're building something quite cool: A simple platform for developing reusable server-side applications written completely in JavaScript.

They've come a long way since I originally wrote about them late last year. They now even provide a copy of their server-side software along with the full source. This, together with Aptana's Jaxer, means that there is, at least, two high-powered, Open Source, JavaScript server platforms.

EtherPad is something new altogether. Building upon their existing platform, and adding in Comet streaming, they've constructed a completely real-time, multi-user, text and JavaScript editor.

I use two editors in my day-to-day work: vim and SubEthaEdit (in fact I'm writing this blog post in SubEthaEdit, at the moment) - and I can say pretty definitively that EtherPad is just like SubEthaEdit.

JavaScript iPhone AppsNovember 17

I've been watching, with interest, developers create new applications for the iPhone. Owning one myself - and being knowledgeable in JavaScript - I've been wondering what options there were for creating downloadable JavaScript applications or the iPhone. In doing some research I found a number of solutions, some simpler than others, some requiring more knowledge of Objective-C than others.

Before looking at the options I should note that given the requirements of the platform if you're really serious about getting in to iPhone development you should learn Objective-C. None of the options appear to provide the full range of functionality that a normally-written application would.

JiggyApp

This was an early entry to the JavaScript iPhone application market - arriving back in 2007. It requires a Jailbroken iPhone (likely running version 1.1 of the Operating System).

JiggyApp provides a full API for developing an application - apparently separate from most of the typical APIs. Arguably, though, the code ends up being relatively usable.

Plugins.load( "UIKit" );

var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
window.setHidden( false );
window.orderFront();
window.makeKey();
window.backgroundColor = [ 0.8 , 0 , 0, 1 ];

var mainView = new UIScroller();
mainView.contentSize = [ window.bounds[ 2 ] * 2 , window.bounds[ 3 ] * 2 ];
mainView.backgroundColor = [ 0 , 0 , 0 , 0 ];

window.setContentView( mainView );

var hello = new UITextLabel( [ 20 , 20 , window.bounds[ 2 ] - 40 , 100 ] );

hello.text = "Hello World!";
hello.backgroundColor = [ 0 , 0 , 0 , 0.25 ];
hello.setFont( new Font( "Trebuchet MS" , 2 , 46 ) );
hello.color = [ 1 , 1 , 1 , 1 ];
hello.centersHorizontally = true;

mainView.addSubview( hello );

The above snippet was from the Getting Started with Jiggy page.

JSCocoa

JSCocoa is a full bridge that maps Cocoa development into JavaScript (instead of the typical Objective-C/Cocoa mapping). The result ends up working in both OS X and on the iPhone.

It's a pretty-clear port of Objective-C style and mannerisms but with a JavaScript syntax. Note some of the differences:

Objective-C/Cocoa:

[[NSButton alloc] initWithFrame:NSMakeRect(0, 0, 100, 40)];

JSCocoa:

NSButton.instance({ withFrame:NSMakeRect(0, 0, 100, 40) }) 

Right now it seems like JSCocoa is more usable for developing OS X applications but the progress moving forward is certainly promising.

"Applications" in MobileSafari

While it's not, technically, a true iPhone application one option is to adapt your existing web applications to be used in a more application-centric manner.

Apple provides a number of tips for improving the style of your web application. The most important points of which are:

1. Providing a tray icon for the application (to be used when the user saves it).
2. Providing a full-screen view of the application (with no MobileSafari toolbars showing).

This will give the full appearance of a regular iPhone application (after using some more styling and setup from iui, or similar).

PhoneGap

The next step to making your iPhone web application more native-like is to tap into some of the underlying native APIs. One recent release that will help is that of PhoneGap.

PhoneGap is an application that exposes a few JavaScript APIs to pages running MobileSafari. Right now this includes Geolocation and access to the Accelerometer.

Geolocation:

getLocation();

function gotLocation(lat,lon){
  document.body.innerHTML = "latitude: " + lat +
    " longitude: " + lon;
}

Accelerometer:

function updateAccel(){
  document.body.innerHTML = "accel: " + accelX + " " + accelY + " " + accelZ;   
  setTimeout(updateAccel, 100);
}

They're also working on access to the camera, sound, and vibration tools of the phone.

WebTouch

The other day "Dr Nic" wrote up an article on how he had used a WebKit instance (along with HTML, CSS, and JavaScript) to render a portion of his iPhone application.

I contacted him about the project and wondered if he'd be willing to provide some of the code that backs it. Written up by his co-worker at Mocra, Anthony Mittaz, the result is called WebTouch.

Right now it's just a zip file of sample code but hopefully it'll be expanded at some point.

It's really simple and gives you a good entry point into the world of hybrid HTML/CSS/JavaScript/Objective-C/Cocoa development. If you've been interested in Objective-C this might make for a good starting point, as well.

Bonus

While this isn't something that you can actually use, I think it's pretty cool. This guy ported my Processing.js work to the iPhone, writing his own Canvas implementation using OpenGL ES hooking in to SpiderMonkey.

Accuracy of JavaScript TimeNovember 12

There were two events recently that made me quite concerned.

First, I was looking through some of the results from the Dromaeo test suite and I noticed a bunch of zero millisecond times being returned from tests. This was quite odd since the tests should've taken, at least, a couple milliseconds to run and getting consistent times of "0" is rather infeasible, especially for non-trivial code.

Second, I was running some performance tests, on Internet Explorer, in the SlickSpeed selector test suite and noticed the result times drastically fluctuating. When trying to figure out if changes that you've made are beneficial, or not, it's incredibly difficult to have the times constantly shifting by 15 - 60ms every page reload.

Both of these cases set me out to do some investigating. All JavaScript performance-measuring tools utilize something like this to measure their results:

var start = (new Date).getTime();
/* Run a test. */
var diff = (new Date).getTime() - start;

The exact syntax differs but the crux of the matter is that they're querying the Date object for the current time, in milliseconds, and finding the difference to ge

CSS Animations and JavaScriptNovember 11

Apple, and the WebKit team, have recently proposed two different additions to CSS: CSS Transitions and CSS Animations.

The two specifications are confusingly named - and it's hard to tell what the difference is between them at first glance. However, to put it simply: CSS Transitions are easy to use, while CSS Animations are made for programmers.

CSS Transitions

CSS Transitions provide you with the ability to force CSS property changing to occur smoothly over a period of time, rather than immediately and coarsely.

For example if you were to set elem.style.width = "500px";, and its current width was 100px then the element would, normally, jump up to 500px wide. With a CSS Transition it would smoothly move from 100px to 500px - the full CSS required would look something like this:

#elem {
  transition-property: width;
  transition-duration: 1s;
}

This would make it such that any manipulation of that element's width would be done as a smooth transition. Note that no other properties are

Picking TimeNovember 11

It's not often that new user interface conventions are born - or popularized. Even less so within the realm of web development. I'd argue that Sparklines and Lightbox are two of the best examples of UI conventions that were popularized on the web.

Recently Maxime Haineault announced a simple jQuery plugin for inputting a new time of day called jQuery.timepickr.js. Its principles are very similar to jQuery itself: Get users to input the time as simply as possible with as little input as possible.

To achieve this he made a "two click" time picker. The first click is within the time field. This activates the display and allows the user to choose the time - all of which is done by moving the mouse over the times that you desire. The final click is anywhere - filling in the time that was chosen. It's hard to explain, you simply have to try it.

One thing that you'll notice using it is that it's fast. Very fast. I'd argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then movin