You Can Call Me Al

3 Handy Utils For Tidy JavaScript Development

2009-04-23T02:04:11Z

I've been working a lot with JavaScript over the last few months. Part of that is inheriting other peoples old messy code and trying to fix and tidy it. Also I've been making production code as tight as possible to keep filesize down. So below are three online utilities I now find essential.

Stuck with an odd error or just want to double check your code? JSLint will give your code the once over for validation.

Inherited some minified or just plain unreadable code? The JavaScript Beautifier will tidy up your code to make it nice and readable. It also give options as to which type of indents you want (tabs, spaces) and will also automatically detect and decode packed JS too.

And when you're ready for production: JSCompress which offers both minification and packing. I'm use minify, as even though packing can often yield smaller files the unpacking process can have a performance hit itself.

Google AJAX APIs Loading Order

2009-03-13T02:03:20Z

Just came across a little issue with the Google AJAX APIs (which I suspect is mentioned in the docs - but I didn't bother to look) while I was doing a little testing for a different blog post.

So first you call the Google Library:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Then in my next <script> block I called the load function for jQuery and carried on to start some jQuery goodness e.g.:

But doing this was would cause a "$ is not defined" error. Using the essential firebug extension for firefox I could see that the google.load() functions insert the requested libraries straight after the closing </script> in which they are called. So jQuery was being loaded after I tired to call the .ready().

Easy fix, seperate out your google.load()'s to their own script block and make them the first thing loaded:

Tiny, ambiguous Spry error in IE

2008-11-12T08:11:51Z

Just a little gotcha I came across at work yesterday, thought I'd post more as a reminder for me really. We had a page using a Spry dataset to generate a sortable table and although it worked perfectly in Internet Explorer and Firefox, IE would show it's "loaded with errors" icon in the status bar. As usual IE was helpful with it's error message "Error: Expected ':'".

I assumed that might be because we weren't fully qualifying the Spry data within the Spry:Region, e.g. we were using {fieldName} instead of {dataSetName::fieldName}. But that wasn't it.

To cut a long and tedious story short, it was where we were passing a Spry binded field to a function - function({fieldName}). As the argument was an integer I didn't think it need quotes (and as I said, it still worked in both browsers and IE was the only one to show an error) but when I added single quotes - function('{fieldName}') - IE stopped whining and all carried on working fine.

Not sure if that's a known thing or if it'll help anyone, but it annoyed me for a couple of hours.

Android/T-Mobile G1: First Impressions

2008-11-05T08:11:37Z

So I've had my T-Mobile G1 for 3 days and I thought I'd post my first impressions.

After putting in the sim card, battery then switching on you're immediately asked for your Google account details (or create a new account). It takes a couple of minutes to link up to your account and sync the mail, contacts and calendar. I loved that part, being back to the online synchronised stuff like when I had an HTC Wizard and an Exchange account. But my first night playing left me thinking there's plenty of faults with it. It's plasticy, the camera is pretty naff (especially compared to the N95's fairly decent one), the touch screen didn't seem very sensitive, there seems too be many interface devices (touch, trackball, keyboard, buttons) and more...

I was disappointed and was seriously considering sending it back. But these all seemed to be hardware issues, Android, the software, is actually very nice. Okay, it doesn't have the "impress-your-mates-easily" multi-touch but the interface is pretty solid. I like the notification "shutter" pull down, the scrolling physics when you flick lists is very "iPhone" and Android Market seems nice enough with some genuinely handy/clever apps. My first full day with it changed my opinion, I expect I was just getting used to it, but the touch screen felt more responsive. T-Mobile's 3G service around London seemed to fairly robust too, better than my experience with o2's on my N95 in recent weeks. GPS is quick to lock and accurate. Even the multiple interfaces seemed to all seem to have a definite purpose. So it's still early days but it's definitely growing on me and I'm going to stick with it.

I have high hopes for Android in the future, as long as T-Mobile keep abreast of updates (I'm sure they will as it's in their and Google's interest to keep it progressing - and updates over-the-air is a nice touch). Hopefully some of the popular iPhone apps are ported over (the train times one would be a nice start!), or maybe I should just learn a bit of Java and do my own...

And just to confirm Android has MMS, copy & paste and SMS forwarding, take that iPhone users! (I say in jest! I love the iPhone, I'm not one of these fanboy facists) :)

A little more Flexing

2008-10-13T11:10:40Z

As a little follow up to my post last week about starting to play with the Flex, I took my last.fm user application a little further to include more of the information they expose throught the audioscrobbler site.

Have a play: last.fm flex app v2

Spry Conditional Validation

2008-10-13T02:10:34Z

Spry blog posts seem a little thin on the ground, so I thought I'd start a series of Spry related posts covering some of the issues that we've come across in the rebuild of the HostelBookers site (yet to be launched). Spry was the AJAX framework of choice for the project before I arrived at HostelBookers and as I'd had a little experience with it in my last job we decided to carry on with it. I've since been named "SpryMan/Guy". Not sure whether to be proud of that or not. Spry seemed to fit nearly all of our AJAX-type needs especially in the data display/filtering/sorting capacity, but it is lacking in some other areas, so we had to draft in jQuery for a nice datepicker and other UI bits and bobs. I think if I got a chance to start from scratch I'd stick to one framework completely, and I think it would be jQuery (mainly for the size of the community).

So my first example will be on conditional validation. We have a section of the site that has a little survey. The very first question decides whether you need to answer further questions or not. If you get the futher questions displayed those fields need to be validated, if they're not, the validation is unnecessary. This will be a generic example, not quite as large as our actual page:

First you'll need to include the required Spry librarys and validation CSS in the <head> for the functionality we're going to use (if you haven't got Spry yet, it's available from Adobe Labs, but the download below includes all the files used in this example). For this example we'll use:

<link rel="stylesheet" type="text/css" href="spry/SpryValidationTextField.css">
<link rel="stylesheet" type="text/css" href="spry/SpryValidationRadio.css">
<style type="text/css">
.hide {display:none;}
</style>
<script type="text/javascript" src="spry/SpryUtils.js"></script>
<script type="text/javascript" src="spry/SpryDOMUtils.js"></script>
<script type="text/javascript" src="spry/SpryValidationTextField.js"></script>
<script type="text/javascript" src="spry/SpryValidationRadio.js"></script>

The Spry CSS covers the validation indicators by hiding the messages by default and colouring fields when they meet certain criteria. The ".hide" class is added to hide the optional questions in our form. Of the Spry JavaScript, the first two are helper utilities, the second two are for the form input validation. We're only going to validate text fields and radio buttons in this example, but you can add select, textarea and/or checkbox valdiation as required. I tend to use the minified versions of the JS files. Packed ones are usually smaller, but the decompression of them can add an overhead.

Our XHTML form will be:

<form name="frmQuestions" id="frmQuestions" action="index.html" method="post">
<div id="valMoreQuestions">
<p>1. Would you like some more questions?</p>
<label for="moreQuestionsYes">
<input type="radio" name="moreQuestions" id="moreQuestionsYes" value="true" />
Yes please.
</label>
<br />
<label for="moreQuestionsNo">
<input type="radio" name="moreQuestions" id="moreQuestionsNo" value="false" />
No thanks.
</label>
<br />
<span class="radioRequiredMsg">Please select</span>
</div>

<div id="valExtraQuestion1" class="hide optionalQ">
<p>2. Extra question one.</p>
<label for="extraQuestion1">Who is your daddy?</label>
<input type="text" name="extraQuestion1" id="extraQuestion1" />
<br />
<span class="textfieldRequiredMsg">Please enter an answer for question 2.</span>
</div>

<div id="valExtraQuestion2" class="hide optionalQ">
<p>3. Extra question two.</p>
<label for="extraQuestion2">And what does he do?</label>
<input type="text" name="extraQuestion2" id="extraQuestion1" />
<br />
<span class="textfieldRequiredMsg">Please enter an answer for question 3.</span>
</div>
<br /><br />
<input type="submit" name="submitAnswers" id="submitAnswers" value="Submit Answers" />
</form>

The form is pretty basic with a few things to note. Each question is wrapped in a <div> with an id. This is so Spry can reference <input> tag it contains and apply the appropriate validation. The <div> tags that wrap the optional questions are given 2 extra classes; "hide", to make sure they're not visible from the offset and "optionalQ" so we can easily select just the optional questions later. Each question's <div> also includes a validation message within a nested <span> tag. The class name of this determines which validation error has occured and so which message to display (these can be found in the Spry Documention, or customised with your own class names when constructing the validation object). The <br />'s are just to make it a little tidier to view.

And finally out custom <script> to make it work:

So this JavaScript block is where all the magic happens. First we set up our variables, "valMoreQuestions" can be set up with Spry Radio Validation straight away as it's always displayed. The next 2 are just set up as placeholders to be filled if they need to be shown.

Next we add event listeners to the 2 radio buttons, so both fire the function "toggleAdditonalQuestions" when clicked. This is where the included SpryDOMUtils comes in very useful. "Spry.$$(CSS Selector)" allows you to select any elements from the DOM from their CSS selectors, so you can be as specific or generic as you need. In the case of adding the event listeners to the radio buttons we've selected "#valMoreQuestions input", so all <input> tags under an element with the id of "valMoreQuestions". This powerful little utility makes selecting and manipulating DOM objects a breeze. In addtion to their selection we use the .addEventListener() method to attach the listener.

Now the event listeners are set up the last part is the function that called when these event are fired, "toggleAdditonalQuestions". This function first tests to see that the value of the currentTarget of the fired event is true (the value of the radio button clicked). If it is, we use another DOM selector to get all the elements with a class of "optionalQ". On this selection of objects we call the forEach() method with fires a function for each element it's found in the selection phase. Each object is passed to the function as an argument so we can then remove the class of "hide" for each one using the SpryUtils function "Spry.Utils.removeClassName(qs,"hide")" (qs being a single element found in the DOM selector). This displays the 2 optional questions. We then add the validation to these options.

If the "No thanks" radio option is clicked the reverse happens. The ".optionalQ" classed elements are selected again and have a class of hide added to them to make them disappear. We then check if the 2 optional validation variable are set with an if statement (we do this becuase the user may have clicked "No thanks" first and the following functions wouldn't be available. If the variables are defined we use the reset() and destroy() methods on the validation object to remove it.

Spry automatically does the rest of the work to trigger the appropriate validation on clicking the submit button. We also added the additional "validateOn:["change"]" to all the validation so they will also validation on the change event.

Download the example files. Also the Spry API is an invaluable reference for all the methods and options.

Forays into Flex

2008-10-09T12:10:32Z

Finally got around to installing Flex Builder 3 to have a play. I've watched a few tutorials over the last few nights and thought tonight was about time to start coding. Within 10 minutes I've got a very very basic application that will take your last.fm username, consume the audioscrobbler webservice feed of your top 50 albums and display them in a tile list. 10 minutes! Why haven't I played with this before?

Anyway I've put my little app up (it's my first go, and does very little, but I'm chuffed with it). Flex is definitely something I want to become proficient at!

Last.fm Top 50 Albums

Gmail Labs - Mail Goggles and more

2008-10-07T10:10:34Z

A slightly quirky idea in Gmail labs, but I know it would of helped me in the past... Mail Goggles sets times that it will give you a maths quiz to confirm you're sure you want to send the email. E.g. late nights/weekends when you may be a little worse for wear and think it's a good idea to email the ex telling her of your undying love. Fairly useless, but I like the thinking behind some of these widgets.

Another, which I've always thought should be standard in every email client, is that if you mention "attached" or "attachment" in your email it should check that you have attached something. Very handy.

To get to Gmail labs go to "Settings" then the "Labs" tab in your Gmail account.

I've gone a bit fruity...

2008-10-03T10:10:40Z

...Blog-wise that is.

It's been a while since I posted but work's calming down a bit so I think I'll be on a bit of a blogging mission soon. In the meantime I've migrated from BlogCFC to Mango Blog.

I'm a fan of BlogCFC, it's served me well, although after having a quick play with Mango Blog I wanted to switch. Coming from a design/CSS background, the chance to easily create themes for my blog was one of the deciders. BlogCFC has always been a bit of a mission to style and more effort maintaining that style after updates. I look forward to seeing what BlogCFC 6 brings in that respect.

Mango installation and migration is an absolute breeze, very much a "is that all I need to do?" kind of procedure. Although, I did have a couple of teething problems while testing. I started with version 1.2.2, but the BlogCFC import would throw an error. A quick post to the Mango Blog Forums and within hours (including the time zone differences) Laura had 1.2.3 on RIAForge. And the import was fixed. But then I noticed all the imported comments (not that I have that many) had been given a date/time of the import, not their original. Seems I was the first to spot it (doesn't look like Mark Drew did in his recently migration, oops). But another quick post to the forums and Laura delivers the goods again this morning with 1.2.4. So that was the decider and I put my blog live in Mango. And here it is :)

A big thanks to Laura Arguello for all her fantastic work and help!

Expect themes and plugins from me soon...

P.S. if you're migrating from BlogCFC don't forget to recreate the rss.cfm in the root pointing to the new feed file: <cfinclude template="feeds/rss.cfm" />. To maintain any existing subscribers.

Looping Through Time

2008-04-02T03:04:00Z

I just came across some existing code in a "revamping" project I'm working on that just didn't feel right. It was to produce a select dropdown of hourly time ranges in a day, in 24hr format: 00:00-00:59, 01:00-01:59, etc.

This was being achieived by using 2 loops. A first looping from 0-9 and building the times using 0#i#:00 - 0#i#:59. Then another loop from 10-23 and changing it slightly to be #i#:00 - #i#:59. Clunky, eh?

First thing that popped into my head was that it could easily be created with 1 loop from 0-23 using numberFormat() to include the leading 0 when required. But then I seemed to remember being told ColdFusion can loop over dates/times.

Not ever trying this before, I decided not to jump straight on Google but to open up my trusty play.cfm to have a try at it.

And strangley enough, it only took 2mins and worked first time.

<cfset fromTime = createTime(00,00,00) />
<cfset toTime = createTime(23,59,59) />
<cfset timeSpan = createTimeSpan(0,0,60,00) />
<select>
	<option value="">- Select Time -</option>
	<cfloop from="#fromTime#"to="#toTime#" index="i" step="#timeSpan#">
	<cfoutput>
	<option value="#LStimeFormat(i)# - #LStimeFormat(dateAdd('n',59,i))#">#LStimeFormat(i)# - #LStimeFormat(dateAdd('n',59,i))#</option>
	</cfoutput>
	</cfloop>
</select>

Pretty self explanitory really, create 2 proper timestamps and a timespan. Loop from and to the timestamps using the timespan as the step. Then just format the index variable as required. Job Done.

Tonights UKCFUG "CFEclipse Reloaded"

2008-03-04T11:03:00Z

Mark Drew gave a few of us at the UKCFUG meeting a preview of his upcoming CFUnited presentation tonight, "CFEclipse Reloaded".

It revolved around the more advanced/lesser used parts of CFEclipse, we all know the code completion and basic shortcuts for a quick <cfoutput> or <cfdump>, etc. (well, you should do, it's surprising to hear when a CF developer doesn't use CFEclipse. No, Homesite isn't the best thing ever).

Parts such as Snippets/SnipEx, Frameworks Explorer, Dictionary editing/creation and even going beyond CFEclipse to show tools that just make a developers life easier (SVN, ANT, Etc.). Basically, all the things that just make sense. I can think of plenty of things I'm going to make snippets of tomorrow and hopefully my boss sets us up a nice SnipEx server to utilise common Snippets within our company.

For anyone attending CFUnited be sure to catch Mark's session. I'm looking forward to the sequel, "CFEclipse Revolutions" :)

And I got an Adobe Water Bottle out of it for the gym. Bargain.

Ubuntu: First Impressions

2008-03-01T12:03:00Z

Unix, Linux, any sort of *nix. I've always thought it was for the mega geeks, the ones like in the films, so deprived of sunlight their skin is almost transparent and talk like "Comic Book Guy" from The Simpsons.

When my parents first got a PC in '93 (a 486SX 25Mhz if you wondered) It was MS-DOS 5, and Windows 3.1. Command lines were a pain in the ass and I was happy to see less and less of them. But the *nix's seemed to want to stay black with a flashy cursor. Do people really want command lines, or does it just make them feel special because it does kind of make you like "cooler" in an odd nerdy type way? Anyway... enough my old *nix prejudice. On to Ubuntu.

I've heard bits and pieces about Ubuntu for a couple of years now, always coupled with the funky code names. But never really saw it in action. Then John B showed me it installed on an old Dell Latitude he had and I have to admit it looked pretty sweet.

I recently upgraded my PC and kept all the old components to use on a MAME cabinet (AMD Athon 2700+, nForce2 motherboard, 1GB RAM, old but still not too shabby). After seeing Ubuntu I thought it would be a perfect chance to try and it out and maybe use it permanently for my MAME project. So that's what I did tonight. Here's it at the login screen:

At first it wouldn't even boot into the OS, it kept freezing. That caused my first outburst "bloody open-source crap..." etc. But it wasn't Ubuntu's fault, the machine kept freezing after about a minute of being turned on, must be to do with it being naked and case-less. So I gave everything a wiggle and away it went.

It booted into the "Live" OS within 2 minutess, wow. From dead PC to GUI and everything in a couple of minutes. Impressive. Selected the install option and off it went, it found the HDD connected to the SATA controller which made me very happy. I was chuffed because it's a Sil3112 SATA/RAID controller, and that isn't part of XP's initial clean install drivers. So even though I don't use a floppy drive, every time I wanted a nice clean XP install, I would have to dig out the floppy (and even harder, find a disk) load it up with the drivers and catch Windows with an F6 at the very first moment or it wouldn't find a HDD. Effort. And Floppy was your only option (apart from slipstreaming them into the CD).

Anyway, the full install couldn't have been any longer than 20 minutes and it was done. Amazing. XP was a good 45mins at least.

One problem though, the mouse wouldn't work, but even though there was a little rant "poxy open-source rubbish...", I think now it might be a dead rodent, I'll get a new one tomorrow. I still managed to have a play with keyboard navigation and I liked what I saw, everything seemed to have drivers for it, the screen res was already the LCD's native, I had sound, FireFox was there as was OpenOffice, all on 1 CD (not DVD) and installed in no time. Again impressive.

But it's not all good. Ubuntu is marketed as linux for the masses, you don't need to be the clammy skinned nerd, but I think you at least need one as a friend. A couple of examples:

I want to use the S-Video out on my graphics card to run a TV (the TV that would be my MAME Cabinet display) so I downloaded ATI's linux drivers. Could I just run them? Nope. The file extension didn't even seem recognised. Looking to the net for help was a quite baffling too. Enabling restricted drivers or something, and then more command-line stuff, with cryptic commands (At least DOS seemed kind of readable, maybe it's just what you're used to).

So I'm undecided, I love the install doing everything, doing it well and doing it in minutes. I like the look and feel. The updates and upgrades seem easy to do which is nice. But there's still that underlying command line requirement which I just don't feel like I want to learn. But it was only a couple of hours of playing, I'll give it another go tomorrow when I have a mouse and report back how i get on.

Hello World 2

2008-02-29T10:02:00Z

Bit of a late new years resolution really. Blog More. About worthwhile stuff. But what stuff? Well a little background and introduction...

After a Multimedia Systems course at Uni I came out as a jack-of-all-trades, not really great at anything. Got my first real job as an artworker for Kidz Biz (a UK toy company). It turned into a bit of an all-rounder position, I was artworker, designer, sysadmin, video editor and towards the end, web designer. But they were hideous creations if I'm honest, I'm glad there's no record of them now.

I left toys and moved into houses. Berkeley Homes. I was now a "Web Manager". Sounds good, but it meant admin monkey. Just updating the website through their CMS (all running on ColdFusion BTW) got very bored very quickly. I finally got the chance to make a microsite, but again I made some terrible all-image Fireworks sliced table thingy. Nasty. I wanted to leave, but the Berkeley Group (the parent company) IT department saved me and took me onboard. Then I started to get some proper work and I steered myself into standards compliance. XHTML and CSS became my thing. Anyway, the IT team expanded and they hired an in-house ColdFusion Developer to expand the public websites and intranet. That was John Beynon.

So there it began, work came flooding in and we needed some more CF skills on the team. I was up for learning a server-side language so I became John's Padawan

A couple of years past we had a tight little team, I learnt the basics of CF, enough to build websites using the CMS (GOSS's iCM). But it was time for a change.

I moved on at the beginning of this year to HostelBookers.com where I'm a (junior) ColdFusion Developer, working under Lead Developer Kev McCabe (aka Big Mad Kev). I'm gradually working my way around the "names" of the UK CF scene :)

So, now being a ColdFusion Developer by trade I thought it was time to blog properly. I still feel pretty junior but I hope some of the things I'll blog about in the future will help other newbies. (I know there's plenty of great info out there, but I thought a little more, from a fellow beginners/junior point of view, couldn't hurt). Although saying that, I have dabbled in the more advanced parts and OO bits like beans, etc. Actually, I'm quite the bean maker at HostelBookers, just call me Heinz :)

But it won't be CF only. There's lots of cool stuff to play with and blog about. Learning Flex and AIR look like fun, so I'm reading Colin Moock's Essential ActionScript 3.0 as my commuting book . I'll be blogging about that when start doing the Flash-y stuff. JavaScript-wise I used a fair bit of Spry and Google Maps API at Berkeley and now again at HostelBookers so when I do funky stuff with them, I'll be sure to blog it. And of course my first love, CSS, the nightmare that it is can be.

Also a few off-topic bits like my MAME cabinet project, which I'm going to try and run on Ubuntu, more on that later.

So HELLO WORLD. It's about time I came out of the shadows and stopped just lurking on other CF'ers blogs.

Adobe, Flex, AIR and last.fm

2008-01-25T03:01:40Z

The Ball Pit, originally uploaded by BigAlUK.

Last night was eventful. The Flex 3 and AIR pre-release tour reached London and 200+ people turned out for the presentation and free beer. Brilliant. Flex 3 is looking like fun, something I need to start playing with.

Then through a friend of a friend, we ended up getting a tour of last.fm HQ, including some ball pit time A night to remember.

Merry Christmas

2007-12-24T06:12:00Z

Merry Christmas Peeps! :)