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.
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/
