Straw Dogs

The Tao of Ruby, Python, and….Straw Dogs?

Archive for the ‘javascript’ Category

Chrome Extension: Shiny MPs

January 3rd, 2010

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

Leave your comment »

Posted in javascript, web technologies

Tags: chrome

First Netvibes Plugin

January 1st, 2009

Just finished my first Netvibes plugin. Hopefully it’ll be the first of many to come as I’ve now got the hang of the Universal Widget API (UWA) now.

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);

Leave your comment »

Posted in javascript

Tags: ajax javascript netvibes projects uwa widgets

Updated: YourMP Google Desktop Gadget

December 23rd, 2008

Quick post to say my Google Gadget, YourMP, has been updated. Its now a lot more efficient, cleaner, working and just overall better.

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.

Leave your comment »

Posted in javascript

Tags: gds google javascript

5 Ways: Documenting Javascript

December 22nd, 2008

I stumbled across a need for this while I was doing some updates to my Google Desktop Plugin (YourMP). If you’ve ever done any coding for GDS gadgets then you’ll know it uses JS. Now my documenting was pretty poor so I wanted to tidy it up and went hunting for the usual format.

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.

Feature	JSDoc	HeaderDoc	Natural Docs	ScriptDoc	jGrouseDoc
Export	HTML, XML, XMI	HTML	HTML	None	HTML
Build	Perl	Perl	Perl	None	ANT
Platform	All	All	All	N/A	All
Influence	JavaDoc	JavaDoc	Natural & JavaDoc	JavaDoc	JavaDoc
Format	*	**	*****	N/A	***

Leave your comment »

Posted in javascript

Tags: javascript js

6 Ajax Frameworks in Seconds

April 8th, 2008

Lets skip the big comparisons here and get to brass tacks. Here’s the rapid review of Ajax frameworks:

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.

6 Comments »

Posted in javascript

Tags: ajax dojo ext frameworks javascript jquery mootools prototype yui

Your MP – Google Desktop Gadget

October 15th, 2007

I was playing around with the Google Desktop Search API again at the weekend and threw together a gadget that queries the TheyWorkForYou.com UK MP database. It basically enables you to gather all sorts of interesting info about various MPs, Peers, debates and committees.

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

4 Comments »

Posted in javascript, web technologies

Tags: desktop gadget gds google javascript open source plugin search

10 Free SVN & Project Hosting Services

September 20th, 2007

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

Metric	Unfuddle	Code Spaces	OpenSVN	Bounty Source	XP-Dev	Google	SourceForge
Project/Repo	1/Unlimited[1]	Unlimited/Unlimited	1	Unlimited	5	Unlimited[4]	Unlimited
Space	200Mb	50Mb	Unlimited	N/A[3]	300Mb	Unlimited[4]	Unlimited
Wiki	Yes	Yes	No	Yes	No	Yes	Yes
Tracking	Yes	Yes	No	Yes	No	Yes	Yes
Browser	Yes	Yes	No	Yes	No	Yes	Yes

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

69 Comments »

Posted in general, javascript, php, project management, python, rails, ruby, subversion, web technologies

Tags: project management subversion svn webapps

Firebug for the Impatient

August 5th, 2007

I installed Firebug a long while back and didn’t think much of it. Granted I never read the docs or even the description. I like to just try things out and if I don’t figure it in 10 seconds flat it normally gets ignored. Unfortunately that meant I missed an absolute goldmine and looked a prat in the process.I’ve since attained ‘Firebug Enlightenment’ and so I thought I’d throw together a ripspeed post on Firebug for the un-initiated and un-convinced:

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.

Leave your comment »

Posted in javascript, web technologies

Tags: firefox javascript

Y Your Pages Are Slow

August 4th, 2007

Firebug already comes with solid profiling built in showing times, averages and call frequency for files but Yahoo have now released a plugin for Firebug (yes Firebug) that gives even greater detail on page performance and rates it based on Yahoo’s own performance criteria.You can grab the addon from the Firefox addons site (you’ll need Firebug first) and you can see Yahoo’s info over at their development site.