Image by ccmerino via Flickr

Marko Samastur – Easy deployment of site-extensions with a browser plugin.

Starting with Zemanta presentation, since it’s relevant for the presentation. Zemanta is a tool for contextual matching for blogging platforms and has to support a wide variety of platforms.

The limitations of XHR was a problem because of limitations of security-model that doesn’t allow cross-domain POST requests. In case of Zemanta, we can use custom-build JavaScript function.

When to use extension?

When web-site as such, doesn’t provide integration points (e.g., Blogger.com platform), the other reason is if you want to use functionality that is not available within the normal browser window.

Process

First thing that you need to do, is that you need to find a place for widget. In case of Zemanta, we used right side widget. In this case, we used CSS and made it a bit narrow.

photo credit: chucks

But wherever you go, CSS selectors that you use, will most probably match styles of the platform. So if you use a widget on different platforms.

You can conquer this within CSS by writing selectors that are more binding than the default way. The one that we did (and is not the best way), we use a platfora of id’s and classes and then we use these names and classes that get injected into web-page and are more binding than the platform ones. This one works great if you use two files: general one and platform specific one.

Second way is to use nesting and “id envelops” – encapsulation and while it’s ugly, it’s the best way:

#zem1 #zem2 #zem3 h3 {

}

the second thing that you should try to use is microformats. After you put your widget into the page, you usually want that widget to do something, and for that we normally use Javascript.

Javascript problems

The variety of problems is large, but a short selection:

Extending Object and Array – it sounds a good idea in a start, but it’s a major problem down the road. It’s usually a bad idea that many JavaScript libraries (like JQuery), use Objects as configuration buckets and if you extend it, it means that all objects will have this and bad things will happen.

The second thing is, that if you have a web-site and you want to have it “extendable”, it’s a good idea not to step all over their feet and potential code.

Private name-spaces – either through anonymous functions or through object hierarchy. The problem is that sometimes you want to change behaviour of methods that are hidden behind namespaces (e.g., changing how dragging boxes works in 2.3 WordPress).

One thread implication: what comes later can rely on what came before. It’s not always true, because JavaScript API’s like DOM functions doesn’t always run in the same thread.

While you can do is to test your JavaScript on slow browser and computers, and on different connections. But this is often not enough, so you should actively protect from this and check to make sure the code and functions are there before you call them.

Useful tools for extension creation

Firefox extension Wizard – http://ted.mielczarek.org/code/mozilla/extensionwiz/

FUEL – http://developer.mozilla.org/en/docs/FUEL

Besttoolbars – http://www.besttoolbars.net/

Related posts:

1. Zbigniew Braniecki – the power of communities [firefox3 release party notes]
2. Gorazd Golob – Firefox extensions and what we have to do with them [firefox 3 release party notes]
3. Marko Mrdjenovic: I’m POSH are you?


"Hello world"


to JavaScript where, e.g. jQuery , expects you to write:


$('#foobar')


with single quotes, it can be quite annoying to always have to type it twice, since for double quotes (“), TextMate it always does it automatically. This feature is called Auto-Paired Characters.

Here is a procedure how to extend your Auto-Paired characters to also include ‘, in the default list (or any other character for that matter).

Go to Bundle Editor, and locate Text bundle (you might have to turn it on using Filter List in bottom left corner). Now locate Text -> Miscellaneous with (p) next to it. Inside it you should see a snippet of text that says:


...
smartTypingPairs = (
( '"', '"' ),
( '(', ')' ),
( '{', '}' ),
( '[', ']' ),
( '“', '”' ),
( "', '" ),
);
...


edit that snippet to look like this:


...
smartTypingPairs = (
( '"', '"' ),
( '(', ')' ),
( '{', '}' ),
( '[', ']' ),
( '“', '”' ),
( "', '" ),
( "'", "'" ), <--- insert this line
);
...


And that’s it! Just restart TextMate for Bundle to reload and try it out by typing ‘ and observe its new auto-pairing powers.

Related posts:

1. Double bind() for better `this` experience
2. Caspar Berry – Risk Taking and Decision Making, Professional Poker player [Thinking digital session notes]

So here is short snippet with double bind(this) that allows one to reference class `this`. In essence, you just have to make sure that every call is wrapped into bind(this) if you want to be able to access `this` of class instance.


// class code goes around and params dict
new Ajax.Request('json-url',
{ parameters: params,
method: 'post',
onSuccess: function(transport) {
response = transport.responseText.evalJSON();
response.images.map(function(i) {
this.local_func(i.image.prop);
}.bind(this));
}.bind(this)
});


Related posts:

1. TextMate tip: Making single apostrophes double
2. MSN Live Search python API access
3. Usability reflections: How Google failed to keep their BlackBerry experience simple