Chrome Extension Screenshot - Shiny MPs

Writing extensions for Chrome is so refreshingly simple it’s exciting. So as a result I produced another one and this time for a slightly more specialised use. If you’re UK-based and interested in politics then this plugin will enable you to keep tabs on your MP with their latest parliamentary updates and links to further info.

If anyone had suggestions I’d love to hear them.

The extension: Shiny MPs

The Source: Bitbucket Hg Repo

The API used is developed by the great TheyWorkForYou.com

My first widget is mainly for UK users who take a lot of flights.  Its a Lastminute.com flight checker widget so you can find the latest pricing info for a given date.

You can view it and install it here.

How the UWA Widgets Work

They’re dead simple in principle.  So simple a widget is nothing more than a specifically formatted HTML document.  You have to make sure you’ve got a few things in there like a UTF-8 encoding attribute at the top and a few other bits but the skeleton document helps a lot.  Other than that you can use Javascript and style it with CSS all like a regular HTML document.  More about UWA.

Forms

This was a serious pain in the arse.  The form documentation for Netvibes is rubbish and the forum had little of use – although I was helped by Xavier and managed to get round my problem.
Basically in Netvibes – don’t use a form.  Or at least don’t submit a form in the traditional sense.  It won’t work, and even if you manage to get it working it’ll die on Mac.  You need to emulate the behviour of the form by packaging the variables up and executing the widget.openURL() function.  Thats for GET forms.  POST forms will need to use the Ajax API Netvibes includes.

Packaging Up Your Form to Get

Someone else may find this useful…

var formElements = document.lmfForm.elements;
var qString = '?';
for (el in formElements) {
  if(formElements[el].name != undefined && formElements[el].value != undefined){
    qString += formElements[el].name + '=' + formElements[el].value + '&';
  }
}
widget.openURL('http://www.example.com/script.php' + qString);

Quick rundown:

• MP details: Name,Constituency,Party and Expenses
• Optionally show MP photo next to details.
• Debates listing now includes the date given.

You know what would be REALLY useful?

Feedback!

Its been broken for the past 3 months and no one thought to tell me!

So feedback would be most welcome.

It wasn’t good.  Javascript source documentation is still in the dark ages as JS is still trying to be taken seriously not many people seem interested in documenting it nicely.

But I did eventually find a nice selection of 5…

JSDoc

This is based on the great JavaDoc and is a simple Perl script you run against your Javascript files and it outputs HTML, XML or XMI (UML diagram data).  I liked this a lot as a lot of the tags happen to coincide with the tags used in PHP (my ‘father’ language – please don’t hate me! ).  So it had virtually no learning curve and I would have settled if it wasn’t for my incessant curiosity…
Get JSDoc

HeaderDoc

If you’re a Mac fanboy I’ll probably lose you at this point as you go running off to use this Mac-made open source project.  Unfortunately its sh*t.  Although Mac made it they don’t make their documentation as nice and easy as their systems.  It reminded me of the heinous Amazon developer docs with excessive wordiness and fluff.  JSDoc above told me everything on a single page – done.  This spanned several pages going into minute detail on every possible usage.  It does cover a lot more languages like Obj-C, Java, C, etc but although its also based on JavaDoc I don’t like its unusual syntax which is just slightly different to JSDoc and the likes.  Why the “/*!” instead of “/**”?
It only exports HTML format too…
Get HeaderDoc (needs a login)

Natural Docs

This looks nice – both the output and the formatting of the source document tags.  It uses a more natural formatting rather than the usual tag method.  Although it does support JavaDoc style tags its much nicer to use the Natural way of doing it.  It supports a large number of languages such as C++, Python, Ruby, Java, etc.
Again it only exports in HTML or framed HTML formats but if thats all you’re after then its great.
Get Natural Docs

jGrouseDoc

This is onto a winner already with a name like that!  This project seems to understand the inherent difficulty of documenting Javascript code and so uses source comments as its only way of documenting.  Its heavily influenced by JavaDoc in its tags and output – which unfortunately isn’t great.  Does anyone else think the JavaDoc template looks utter tripe?  Thankfully it does come with other templates available and it is very easy to customise the output.  This is built very differently to the others as an ANT task.
Get jGrouseDoc

ScriptDoc

This is more of a specification and as such has no parsing utilities to output niceley formatted HTML.  Its an interesting idea but its s similar to JSDoc that you wonder why they’re even bothering.

Microsoft

Yes – they’ve been building XML-based JS documentation for their new VisualStudio when it comes out.  But as its Microsoft I’m sure we’ll all collectively not give a shit.

• YUI -Stable and comprehensive but a little verbose.
• jQuery – Clean, fresh and perky but plenty of hacked, cruddy plugins to be wary of.
• Ext – Beautiful to look at but agonising to use.
• Prototype/Scriptaculous – Only popular because its used by Rails and CakePHP, but you can do better with jQuery.
• Dojo – Meh.
• MooTools – Trying to be like Prototype, little realising its picked thewrong one to copy.

This gadget is just a simple interface so you can enter your postcode and the panel then shows your local MP with links to their profiles (BBC, Wikipedia and the Guardian) with the list of the most recent debates they’ve been involved in.  All of this is done with three requests to their server resulting in three seperate JSON responses.  The first response is used to get the “person_id” which is necessary for the next two which retrieve further info and debates listings.

The gadget is hosted on Google’s Code Project Hosting site and released under GPL 3 so anyones free to tinker if they wish.

Download Your MP Gadget

Tags: video, javascript, ajax

UPDATED: As of Jul 10th 2009

Open Source seems to be exploding all over the place at the moment and with online services increasingly jumping on the free offerings its been fantastic for developers wanting to host, manage, flaunt and communicate their projects online. Here’s a rundown of 6 free SVN hosting and project management offerings I like the look of.

Unfuddle

Nice name and nice site. Very web 2.0 and slick with project tracking such as issue tickets, source control, time tracking, milestones, etc. The free package only comes with 200Mb and restrictive user allowances (1 per account) and only one project. This makes them the stingiest of the group. This is reflected in their price-resources on paid plans with $99 only getting you 10Gb and 50 projects. Compare this to $59.99 at Codespaces for the same space but unlimited projects.

Pros: best interface, great features, Git support.

Cons: high price, low resources, tiny free account.

CodeSpaces

They have a hefty 500Mb for 2 free users per account and they have a good range of prices starting from $9 per month for 4-man teams upto $59 for unlimited.

Pros: nice interface, good pricing, active and involved developers.

Cons: Not as many features as the ‘big-beast’ Assembla.

Assembla

Part of a large and feature-packed service full of project management features as well as basic 200Mb of SVN hosting. It even has a jobs board but the project hosting comes with wiki pages, blogs, etc. The free package has all of this but lacks phone supports and is only for open source projects.  They have VERY competitive prices starting from $3.

Pros: packed with features, reliable, supports Mercurial.

Cons: pricey in the higher plans.

OpenSVN

One of the first to release free SVN hosting and starting to show its age with very barebones features. They had a major failure in backup and restore last year which causes some worry about their reliability. So when I say “free SVN hosting” I really mean just that!

Pros: unlimited space, unlimited projects.

Cons: very unreliable, no features!

XP-Dev

This is a very no-frills setup but they have one killer feature: Private SVN repo hosting – FOR FREE!!  Made for agile and extreme programmers this doesn’t have a lot of the features inherent in other services but thats just fine.  Its also got an unlimited repo limit.

Pros: unlimited repos, free private hosting

Cons: Only one paid option, very few features.

Bounty Source

Still going strong after I first mentioned it back in June Bounty Source offer your basic SVN along with a wiki and CMS for managing your projects online presence as well as a task tracker. Bounty Source have a unique feature though that enables a developer to be paid for the work they carry out on user feature requests. Something I really like the look of – all I need now is an open source project people are going to pay me to finish!

Pros: bounty system helps devs get paid to work.

Cons: no paid option, looking old, falling behind in features.

SourceForge

Like an old grandfather clock this has been around years and although very reliable its showing its age. They tried to spruce it up with some Web2.0 gradients and curves but you can’t scrub out the moldy smell from that interface and features-set.

Pros: reliable, well established.

Cons: very intrusive ads, pain to use.

Google Project Hosting

They seem to have taken a lot of the old school methods of project hosting from SourceForge. Unfortunately as mentioned earlier they’re looking old and although Google looks much cleaner its features still lack the richness that the smaller providers have who’ve gone all out on innovation while Google remains formulaic. Google also don’t provide paid private hosting. Its all open source here.

Pros: reliable, clean interface, good features, supports mercurial

Cons: no private paid options, open source only

Comparison Table – Free Accounts

• [1] Unfuddle allow one active project but unlimited numbers of repos within it.
• [3] They state nowhere on their site about limits to project size.
• [4] Google claim in their terms that there’s no upper limit but they reserve the right to impose one.

See the response of Ajax calls
This was what really hit me when I delved a bit deeper into Firebug. Its a shame its so hidden away but by opening up your Firebug console and selecting the “Net” tab before clicking “XHR” you will get a listing of all the Ajax calls made so far since the last full page load. If you click on a particular listing then it’ll expand to give you information on the headers sent and any server response. This is invaluable to debugging your Ajax apps!

Edit HTML and CSS live
When you eventually get out of the habit of pressing F5 for every change you make to your page and start using this feature you’ll become a whizz. You can inspect and modify the entire DOM on the fly with all changes appearing live.

Debug Javascript
Not only will Firebug notify you with a statusbar area the number of errors in your document but you can open the Firebug console to get further detailed information on any errors, including their location and debug messages.
You can even execute any javascript commands from the Firebug console allowing you to tweak and experiment with the page on the fly.

More info…

Logging
You can enter anywhere in your javascript code the logging commands to get information on a variety of variables and objects as your code runs. Which is so much more freindly and efficient than the old school “alert()” method.

console.log(myVar); //echos the var to the console
console.dir(myObject); //echos all the variables and methods of the supplied object

More info…

Getting info on objects and variables
On the console you can type a variety of commands but my most heavily used is:

dir(myObject);

It doesn’t look like much but its incredibly useful as it allows you to see all the methods, values and state of the object you pass to it. You can do it with anything in your document, including the document itself.