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.

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:

I am doing some developing with prototype lately and I was having some issues with context of `this` variable. The problem is that javascript is different from python in a way that defines local variable scope of class methods.

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.