Posts Tagged ‘javascript’

Tabs vs. Spaces

December 1st, 2009

Every time I’ve seen one of these “vs” posts its gone into great length about the philosophy behind such and such.  You’ll never convince someone based on ‘religious argument’. So I’m going to take a different approach here and state who does what and hopefully the weight of ‘who does what’ will make the point quite clear.

Screw the Scientific Method!!

Language/Organisation Spaces Tabs Reference
PHP Pear * [1]
Zend (PHP) * [1]
Python * [1]
Ruby * [1]
Java * * [1]
.Net * [1]
C# * [1 Philips (PDF)] [2 - Microsoft]
Lua * [1]
Erlang * * [1]
Object Pascal * [1]
Adobe Flex * [1]
Ada 95 * [1]
Mozilla (Javascript) * [1]
Mozilla * [1]
Google * [1] [2]
Mono Project * [1]
Webkit * [1]
NASA * [1]
Apache (C) * [1]
Linux Kernel * [1]
Gnome * [1]
KDE Libs * [1]
Joomla * [1]
Wordpress * [1]
Zope * [1]
Django * [1]

Notes:

  • Tabs may be rendered differently on different editors and systems.  So they make for less friendly code sharing.
  • Its interesting to note that the ones using tabs all have histories of mental instability, cannibalism, Morris Dancing, witchcraft and heresy.

Clear win for Spaces, which happens to be what I use.

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.

lastminute_logo_368x701

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

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. :)

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 ***

SmoothGallery2.0 – Fantastic Ajax Gallery

November 11th, 2008

Looking around for a decent Javascript gallery to use on ‘this site’ – I came across by far the most comprehensive and pleasant to use in: SmoothGallery2.0

It uses the MooTools library and has a slick interface.  The only downside I’d say is that for large sets of images using a Gallery Set it can get slow and bogged down.

Having a sniff around the code of the gallery it looks like MooTools is well worth a look.  Putting Prototype to shame and coming close to jQuery for slickness.

It also begs the question – why are people still bothering to use Prototype?

6 Ajax Frameworks in Seconds

April 8th, 2008

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

Your MP – Google Desktop Gadget

October 15th, 2007

Your MP Small LogoI 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

Firebug for the Impatient

August 5th, 2007

Firebug LogoI 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.

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.

YUI After the Dojo Snail

March 7th, 2007

I remember seeing Dojo for the first time and I was hooked on the flashy gizmo’s and widgets from the off. The awkward learning curve was cast aside as I went about reading and listening to everything I could lay my hands on. After a while of using Dojo on many of my work projects one of Dojo’s most common complaints became apparent – Speed!
Now this wasn’t because of using excessive amounts of Ajax in inappropriate places. One page in particular just had two dialogs but was very slow to load and would struggle to run on anything at standard ‘business level’ workstations.After some digging I found a number of different ways in which you can improve the speed of Dojo so I set about each one with varying degrees of success.

Implement Using Javascript – Most people when they hit Dojo and get onto all the fancy widgets go straight for the parsed widgets where Dojo simply parses the document for any Dojo tags and generates the corresponding widget for it. This makes the whole process incredibly simple and quick to develop but ultimately it slows everything down when Dojo is having to re-read the page each time. So using the createWidget method and turning off Dojo parsing the page

Only Include What You Need – Too often people will end up adding a lot of includes they just don’t need for all of their pages all of the time. Trim these down if they’re not needed and reduce the clutter of downloading too much.

dojo.io.bind – Any data you can save from being loaded immediately onto the page can be loaded later using bind. Doesn’t sound like it’d help but I shaved seconds off loading times by lazy loading different parts of the page rather than having large swathes hidden.

However, even after these and a few more little optimisations I was getting fed up. Dojo was SLOW! It was annoying my users and I don’t like them being pissed off if I can help it.

Needing a Fast Data Table
I needed a good data table. One that allowed for pagination, dynamic data, effective sorting, Ajax loading/updating, etc. The Dojo tables (FilteringTable and SortableTable) were miserable attempts at this. Two of mybiggest complaints were 1) Sorting across pages was poorly supported. 2) Dynamic data loading and updating was sketchy at best. 3) SPEED!
Fed up I went looked at a couple of other libraries for a solid well-rounded feel – MochiKit, Prototype/Scriptaculous, YUI, etc. The table was either non-existent or a poor after thought to the library. Considering the huge prevalence of tabled data – certainly in my industry (financial). I find it amazing that a simple, powerful, robust and fast implementation has taken so long to come about. The current libraries seem obsessed with creating fanciful widgets rather than going for something nuts & bolts useful to a huge range of people.

YUI
That was until I caught the YUI DataTable widget. Its only in beta but I’ve been so enthralled with its richness, speed and elegance I’ve begun the process of converting a variety of my table designs at work into this new table. Its stable, robust, fast, feature-packed – you really couldn’t ask for more. Oh – and as usual the Yahoo team have absolutely fantastic documentation.
Well after falling for the YUI DataTable I decided to take a peek at all the other library features I’d given a cursory glance over when I first got into Ajax. It has certainly matured and filled out a lot and after using Yahoo partially in one of my latest work projects I noticed a significant speed boost. So it got me thinking – is the Yahoo UI library faster than Dojo. I’ve been running a few speed tests and looking at the Javascript import speed alone – YUI is streets ahead.

In function calls my Firebug window is filled and scrolled massively from Dojo function calls across multiple files from including simply a DropDownDatePicker into the page. If I do the same with YUI (Calendar) I get a fraction of that activity.

With Dojo I’ve had to wait seconds for a page to load – in YUI its given back the users time and resulted in just as good a product.

I’m going to start shifting all of my Ajax code to YUI over the next few months – thats how good I’ve found YUI to be. I’ll still be using Dojo for some widgets not available in YUI but I’ll be predominantly using YUI from now on.