Tag Archives: Ajax

Use Firefox extension to solve your AJAX problems

This are the slides from my talk at Widgets Web Expo, earlier this month. While the original title was a bit more conservative, the main purpose of the talk was to inform the interested public about the issues regarding AJAX, cross-domain post request and how it affects your application.

What I tried to do here, is to discuss the User Interface decisions that you have to make, when you’re talking to remote servers. Namely:

  • progress delay and emulation of instant gratification with non-smart recommendations
  • quiet parsing in background, to not give user the need to watch progress
  • limited HTML inclusion as lots of blog platforms limit what you can do with HTML and CSS
  • teaching of users how to use widgets and where and how they are activated as we don’t have true conventions yet

More details in presentation:

Reblog this post [with Zemanta]

Marko Samastur – Easy deployment of site-extensions with a browser plugin [firefox3 launch party notes]


Description unavailable

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.

Blog better using Zemanta
Creative Commons License 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/

Zemanta Pixie