Some of the technologies for browser based games coming out are simply amazing. Hardware accelerated 3D graphics, ability to use PS3 or Xbox controllers within the browser, and full screen game play. Many of the demos looked indistinguishable from games on the PlayStation 3 and other consoles. Compared to Flash, HTML5 based technologies are definitely on an equal footing — of course unless the site needs to work in Internet Explorer. Some things never change…

There were many good take-aways from the talks. Improving tools was one of the main ones, one that I’ve now had a chance to implement. I’ve built a number of new tools in both shell scripts and compiled code to validate the code quality of the sites I produce. These validators, called ‘lint’ in programming, help make sure the sites I build not only work but are well written too. I’ve made a tool to help automate site creation, which really improves consistency – another core part of quality work.

It’s really incredible how far JavaScript has come as a language. The number of places it’s now used outside the browser is amazing – server-side to run web servers, inside PDF documents to validate forms and as the automation language of choice in many applications, including Photoshop and InDesign. As the language matures, so do the best practices and this conference was a great opportunity to catch up on the latest thinking in this area.

And last but not least, another if not web related takeaway was Decaf Sucks, a coffee review site that is excellent if you’re visiting Australia – really takes the stress out of finding a decent espresso!

1. No Opening Hours
   You would be surprised how many sites don’t have this essential piece of basic information. If you have a retail business, people visting your site most likely want to know where you are and when you’re open. There’s nothing more annoying than turning up at a business, and finding them closed because you couldn’t find out their business hours.
2. Poorly Designed Credit Card Forms
   So many e-commerce sites get this wrong, it seems like no thought goes into this most information screen. If the customer has reached the last screen of the checkout process, you want to make it as easy as possible to complete the transaction. The details printed on credit cards are always laid out in the same order, top to bottom: card number, expiry, name on card. The customer copies the details line by line into the form — easy, right? Except how often have you started to type in the card number and then realised the first field was labelled ‘Name on Card’? Don’t make your customer do more work then they need to, make sure the form is laid out like the card.
3. Assuming Familiarity
   This is another content issue. Sites that seem to assume you’re already very familiar with their business and products, and thus provide no information about what they do or the value their products provide. It’s very uncommon for a business not to want new customers, yet many sites like this exist – by all means provide information for your existing clients, but don’t alienate potential new ones by ignoring them in your content strategy.
4. Are You Local?
   In the past, the holy grail of domain names was the ‘dot com’. But the Internet has become more congested with sites, so users are now scanning the search results for regional domain, like .com.au or .co.nz. For businesses based in New Zealand it’s much better to have a .co.nz address than .net or even a .com address.
5. Login and Abandon
   If pages on your site require login, make sure they redirect correctly after login. For example if a user follows a bookmark to a page that requires login, after they login, make sure they’re redirected to the page they were trying to reach and not default post login page. This seems to happen more often than it should, hopefully not on your site!

and one extra…

6. Captchas
   Those little hard to read number and letter codes to make sure a human is filling out the form. If your site has this functionality — make sure they work as there’s nothing more annoying than an unsolvable captcha!

This functionality can however be quite useful in certain circumstances.  The ‘No Page Style’ option turns off all style sheets, making it easy to copy otherwise difficult to select content, or page elements that have been constructed to stop copying – like transparent images over other content. Which highlights why all such faux-protections achieve is hampering usability, if you don’t want something on the Internet copied, password protect the content or don’t put it on the Internet at all.

Even more useful for web development, is testing new site features with alternative style sheets.  The alternative style sheet, as the name suggests, is added the html page in addition to the main one.  Normal visitors to site won’t see any change, but the developer can select anyone of the alternatives and navigate the site with completely different styling.

This a handy way to test seasonal site theme changes, Christmas, Easter etc, in cases where there isn’t a staging server for the site in question.

Add a couple of AirPort Express base stations for AirTunes and you can control both music selection and multiple sets of speakers from the iPhone. AirPorts can just be setup to join an existing network, rather than creating their own, to provide an additional set of speakers to send music to.

The main problem with iTunes is it’s not really designed to run as a server application. For example you must log in and run the app after every restart, a necessity for Windows Update. Admittedly you could set the computer in question to auto-login and add iTunes to the startup group, nor is it even practical if the computer in question is an office server as well.

It is, however, possible to successfully run iTunes as a service. The trick is to use a service wrapper utility called SrvAny from the Windows 2003 Resource Kit. This runs when the computer starts up and starts iTunes as a service in the background. We set up a separate user account for iTunes and SrvAny to run under, and set permissions on this account to lock it down so it could only access the music files. To set up iTunes as a Service, copy ‘srvany.exe’ to c:windowssystem32, add the following to the registry (customising for your system as necessary), and then in the Service to login as ‘iTunesServer’:

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesitunesservice]
"Type"=dword:00000010
"Start"=dword:00000002
"ErrorControl"=dword:00000001
"ImagePath"="C:\Windows\System32\Srvany.exe"
"DisplayName"="iTunes (Media Server)"
"ObjectName"="NT Authority\LocalService"

[HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesitunesserviceParameters]
"Application"="C:\Program Files\iTunes\iTunes.exe"

[HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesitunesserviceEnum]
"0"="Root\LEGACY_ITUNESSERVICE\0000"
"Count"=dword:00000001
"NextInstance"=dword:00000001

This has been tested on a Windows 2008 Server here, but should work fine on any version of Windows, desktop or server. If you need to access the iTunes UI for any reason, stop the service and run the app interactively from the ‘iTunesServer’ user account.

The other minor annoyance of iTunes is the speaker list that comes up in Remote.app. You can specify a name for AirTunes speakers, but the ones attached the computer iTunes is running on are always called ‘My Computer’. Fortunately this can be customised too by editing the iTunes localisation file. Locate the file below (selecting the correct .lproj folder for your language):

Windows:
c:Program FilesiTunesiTunes.Resourcesen.lprojLocalizable.strings

MacOS:
/Applications/iTunes.app/Contents/Resources/English.lproj/Localizable.strings

And search for string ‘163.035’ (without quotes)—that is the name for the built-in speakers. Change it to whatever you want. In iTunes 10 and newer the localisation files are commented, so it’s easier to find and edit these text strings.

Generally I think Hamilton has got better over the last few years, drivers are more aware and the number of cycle lanes has increased. However it could always be better, will be voting pro-cycling in the upcoming local elections—even though most of my (probably many other cyclists’) transport needs are met by car.

* On an interesting side note, the YouTube video above is using HTML5 video for playback (or flash in the cases where HTML5 isn’t supported).

Design needs to take into account the different amount of space each language will need to say the same thing. Problem areas include menus, dialogs and buttons. For example, on any given button, the text in French will be four times wider than in Chinese; this means that not only will the button have to be wider, but its container also needs to be able to accommodate the extra length.

There are roughly four main language groups:

• English: 100% width
• European: on average 130% wider than English
• Complex Scripts (Thai, Arabic, Hindi, etc.): generally about 80% of the width of English
  and can be right-to-left
• CJK (Chinese, Japanese and Korean): on average 50% of the width of English

If the design requires copy to fit tightly, then a separate layout for each language or language group is the best option. The alternative is a design with built-in flexibility to handle variations in content width. Designing for the longest language, and allowing for the layout to contract if necessary, tends to be the best plan of attack. Trying to build a design that works for all languages, unless it’s very simple, generally ends up with a poor visual result.

Messaging is easy to overlook, but there are a lot of places where error messages can be generated. There’s the front-end in form validation and the back-end in Ajax responses; all the possible error, confirmation and status messages need to be translated. In addition, Quality Assurance needs to test every combination in every language – and if several languages are involved, the amount of work can really add up.

Multilingual sites can be straightforward if they’ve been well planned, but it’s never a case of just dropping in replacement copy over the English text!

One of the problems with adopting new API’s is that the eco-system of code that interacts and extends it is often very immature as well. Code examples can also be a little sparse, though fortunately Google’s documentation was excellent in this regard. The difficulty is when you need something that’s not included in the box. Our map has markers, a lot of markers, thousands of them in fact, and to stop the browser impaling itself on a spike we needed marker clustering.

Clustering is where you replace several individual markers with a single marker group icon that indicates to the user that there is X number of markers in this location. The more you zoom out, the greater the number of markers grouped into each cluster. The clustering solutions for Google Maps version 2 were numerous, but for version 3 there was just a handful. The most suitable library was barely 3 weeks old, certainly immature, but as a port of a stable release of the same library for the v2 API it was a viable option.

This is where the having a strong knowledge of the language and the browsers you are working with is really helpful. The library definitely had a few bugs, but having come from a time before JavaScript libraries it was easy to write override methods to patch these until library author corrected them. In between the initial implementation and project release the library authors did in fact patch those issues, so we were able to drop in the latest code and dispense with these patches.

Another problem we faced was that the styling provided by the library was limited. It expected the marker to be centered on the location, rather than above the location as the design needed. Method overrides and a good understanding of cross-browser rendering bugs allowed us to extend the library to meet our – and our client’s – needs.

I still wonder if too many new programmers now rely too heavily on JavaScript libraries, without understanding how things work behind the scenes. Every browser will always have its quirks and a professional front end developer should know how to deal with these. I’m not advocating against using JavaScript libraries, as they definitely get projects out faster and reduce costs. But if things don’t work correctly, or if they require slightly different functionality, I wonder whether many programmers would cope without their jQuery fix.

However, there’s a difference between a plug-in you’ve chosen to install, and one that just installs itself along with another piece of software. Worse still are those plug-ins that you just can’t uninstall. iTunes is particularly annoying in this regard, there’s no uninstall and deleting the plug-in files causes iTunes to reinstall itself (and the plug-in) on next run. Sure you can disable the plug-in in the browser, but I’d prefer it not to be there in the first place.

After looking into this further, there is a way to permanently block unwanted plug-ins without deleting the files (which just causes iTunes, the .NET Framework Firefox plug-in, and many others to reinstall themselves). The trick is to create another Administrator user account on your machine, and use that account set file permissions on the plug-in to block access from your normal user account. Without ‘read’ rights to the plug-in file, there’s no way it can load into your browser disabled or not.

Locating the plug-in files to block is pretty straight forward if you know where to look. In Internet Explorer it’s under: Tools > Internet Options > Programs > Manage Add-ons. Once in the ‘Manage Add-ons’ dialog you’ll see a ‘File’ column with the plug-in’s filename, right clicking on the column heading and checking ‘In Folder’ will also show you the paths to these files. In Firefox the plug-in list is displayed by typing “about:plugins” in the address bar. Unfortunately you’ll need to figure out the file paths yourself, as Firefox doesn’t tell you this.

Once blocked, your browser plugins list will be reduced to just those that you need and want, in doing so making your browser more stable and secure.

Of course one can sync between the two using iTunes, but this is tedious to say the least and not exactly practical if you use your Calendar and To Dos a lot.  The iPhone OS 3.0 introduced Exchange ActiveSync, allowing medium- to enterprise-sized businesses with an Exchange Server installation to do 2-way wireless sync.  For smaller enterprises this may not be an option, even if they have Exchange, due to the increased security concerns of making their mail server internet facing.

It is possible to have 2-way sync without Exchange, by using a Google Calendar as intermediate store and synching both the iPhone and Outlook against that.  Internally we use ‘Google Apps for Business’ for our e-mail, mainly due to the excellent spam filtering, and that also provides calendar accounts.  However any Google calendar account will do.

The process is as follows; as with anything, make sure you have a full backup before you start and that you have synched with iTunes first so both calendars are in sync:

1. Setup a Google Calendar Account
2. Use Google Calendar Sync to synchronize between Outlook 2003 (or newer) and your Google Calendar.†
3. Setup Exchange ActiveSync on your iPhone to sync between the iPhone/iPod Touch and Google calendar

† At the time of writing Google Calendar Sync doesn’t work with Outlook 2010 beta, however it is expected that this will be resolved by the time Office 2010 is released.

Google Calendar Sync

This can be downloaded from the URL below.  The configuration is very simple, just enter the username and password of the Google Calendar you wish to sync to and save.  The program is automatically added to your ‘Startup’ group and will run in the background, synching your calendar every 2 hours by default (this can be changed to any timeframe that suits).  The only caveat is it will only sync your primary calendar, so if you have multiple calendars in Outlook you may wish to consider consolidating those and using Category labels if possible.

http://www.google.com/support/calendar/bin/answer.py?hl=en&answer=89955

Exchange ActiveSync for Calendar

Google’s servers now support Exchange ActiveSync communication, which unlike previous calDAV setups support data ‘Push’.  This means that, when Google Calendar Sync updates the Google Calendar online from Outlook, Google’s servers will push the updates down to your device immediately (even if it’s asleep) so reminders work straight away.

1. Open the Settings from the home screen.
2. Open Mail, Contacts, Calendars.
3. Tap Add Account…
4. Select Microsoft Exchange.

Account Info

• Email: your Google account address (usually somebody@gmail.com) or Google apps email address
• Domain: leave blank
• Username: same as the email field, your Google account address
• Password: your Google account password
• Server: m.google.com
• Choose Accept if the Unable to Verify Certificate dialog appears.

Sync

• Mail: no
• Contacts: no
• Calendars: yes

If you’re just synching calendars as described, the Mail sync options can be ignored and left as the defaults.

Once Exchange ActiveSync is set up your iPhone/iPod Touch and Outlook calendars should automatically stay in sync without intervention on your part.  And best of all, without having to use iTunes.

On a recent project we had the case of a simple keyword search bar that not only had to return relevant results but aggregate data returned from several sources. The user expects to type a search and get nicely-formatted results that match their query. Our problem was that the results came in multiple formats from multiple servers with quite variable response times.

The project in question was a Google Maps API and Google Local Search API powered Facebook Application. A search query could match one of several things: an address (Google Maps API Geocoder), a business or landmark name (Google Local Search API with the current view port of the map), a user’s name or personal details (either from the local database or via the Facebook API), or a game location (from the local database). The Google-related searches are done in JavaScript and the Facebook/local database ones were SQL queries in PHP.

Our initial implementation was to have tabs. The Addresses search was run, results were shown, and the other inactive tabs when clicked would carry out their respective searches. The problem was that there was no guarantee the first search type (addresses in this case) would return any results, and if the businesses search had returned results it would have been much better to display that first. The tabbed interface was also very disjointed, as swapping tabs had to perform the search (causing a delay), and users expect switching tabs to be instant. Also, the usability suffered, because if the search resulted in a few matches of each type, you couldn’t see them all on one screen.

The final implementation was in two parts. Firstly, all the searches were executed in parallel via Ajax, displaying and updating a progress bar as each was completed. This visual feedback helped offset the now-longer delay before any results were displayed. Then the data returned from each API was normalized so it could be fed to a single HTML render, facilitating output into the same screen. This allows the results to be displayed in a single list, grouped by type. Types with no results (or ones that timed out) are omitted from the output, pushing the relevant results to the top.