How to fix jQuery 1.7 Date Validation for UK dates in Webkit browsers

Turns out the jQuery date validation in jQuery Validate from 1.7 is pretty screwed… it prevents valid UK dates from being submitted in Chrome and Safari and allows nonsense like 31/31/2012 through in Firefox.

Lots of people use the fix here: http://geekswithblogs.net/EltonStoneman/archive/2009/10/29/jquery-date-validation-in-chrome.aspx

But it doesn’t seem to work in Safari: luckily commenter ‘Mad’ points to an alternate solution in Microsoft’s AJAX library which seems to work great everywhere:

		// Fix for international date validation woes in jQuery Validate
		// as described here, but fix only for chrome: http://geekswithblogs.net/EltonStoneman/archive/2009/10/29/jquery-date-validation-in-chrome.aspx
		// alternate method as linked from comments here
		// http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js
		// assign class 'date_international' to target datepicker text field instead of 'date'
		jQuery.validator.addMethod(
			"date_international",
			function(value, element) {
				var check = false;
				var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
				if( re.test(value)){
					var adata = value.split('/');
					var gg = parseInt(adata[0],10);
					var mm = parseInt(adata[1],10);
					var aaaa = parseInt(adata[2],10);
					var xdata = new Date(aaaa,mm-1,gg);
					if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
						check = true;
					else
						check = false;
				} else
					check = false;
				return this.optional(element) || check;
			}, 
			"Please enter a correct date"
		);

Slightly edited from http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

iOS Prototyping With TAP And Adobe Fireworks

use Fireworks in combination with other tools to create complex iOS prototypes (for both the iPhone and iPad) with similar ease?

via iOS Prototyping With TAP And Adobe Fireworks (Part 1) | Smashing Fireworks.

Great article, must take a look at this properly.

I’ve loved Fireworks for many years, and although I don’t use it as much as I used to (things like Balsamiq Mockups have taken its place) I think it’s an awesome piece of kit, far ahead of any other software for professional web graphic production (and yes, I’m looking at you Photoshop). I hated CS4 and I hate Adobe’s expensive software. At a time when all the other professional tools I use are £20-£50 on average, it seems obscene for Adobe to charge the price of a laptop for a piece of software. I also didn’t like the direction the UI had taken.

It seems it has moved on since I last looked at it, and I’ll definitely check it out again. Maybe it would be worth the cost of an upgrade after all…

Terrific git command – whatchanged

A really common task when collaborating with others is to see what’s been going on in the current directory recently. I still find I struggle to remember the switches for git log to format the output so I was pleased to come across this one

git whatchanged .

Ian-Andersons-MacBook-Pro-15:fastd ian$ git whatchanged .
commit a7e5f5a9fb1294edbbfaafc34330e1b2a16a4368
Date: Fri Oct 19 18:01:34 2012 +0100

initial

:000000 100644 0000000... eb3489a... A .gitignore
:000000 100644 0000000... 9791654... A Gemfile
:000000 100644 0000000... 7657e20... A Gemfile.lock
:000000 100644 0000000... 7c36f23... A README.rdoc
:000000 100644 0000000... c3bb015... A Rakefile

Even I can remember that… :)

Worst captcha in the world

Worst captha in the world

Someone thought this would be a good way to tell bots from users. Not everyone can use a mouse or has the fine motor control skills required to drag the little shape onto the big shape; this technique is profoundly discriminatory and the person responsible should stand in the corner and have a long hard think about what they’ve done…

jQuery Date Validation in Chrome

the date validator in jQuery Validate is broken if you want to use UK format dates with the jQuery datepicker; it tries to validate as US format irrespective of the format you tell it to use. And because webkit correctly barfs on invalid dates like that, you can’t submit.

Found a useful post: jQuery Date Validation in Chrome.

Chrome seems to ignore the current locale when it creates the date object, so a valid date in UK dd/mm/yy format – 29/10/2009 – fails as Chrome seems to interpret it in US mm/dd/yy format. Easy to test outside of all other code by entering some simple JavaScript into the address bar:

javascript:new Date(’29/10/2009′).toString()

Which Firefox renders as expected

I take issue with the last bit: Firefox renders that date as May 10, 2012 instead of October 29, 2012 – hardly what I’d have expected…

So the upshot is to make it work in Chrome or Safari you need to paste in a function to patch jQuery. Bloody annoying

date: function(value, element) {
     //ES - Chrome does not use the locale when new Date objects instantiated:
     //return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
     var d = new Date();
     return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
},

Functional testing with Selenium and PHPUnit

Installing this stuff is simple in principle but a bit of a pig in practice

1. Install pear
download http://pear.php.net/go-pear.phar
sudo php /tmp/go-pear.phar

2. Install PHPUnit
pear config-set auto_discover 1
sudo pear channel-discover pear.symfony.com
pear install --alldeps pear.phpunit.de/PHPUnit
sudo pear install phpunit/DbUnit
sudo pear install phpunit/PHPUnit_Story

3. Install PHPUnit selenium package
pear install phpunit/PHPUnit_Selenium

4. Install Selenium Server
Download a distribution archive of Selenium Server. http://seleniumhq.org/download/
Unzip the distribution archive and copy selenium-server-standalone-2.9.0.jar (check the version suffix) to /usr/local/bin, for instance.
Start the Selenium Server server by running java -jar /usr/local/bin/selenium-server-standalone-2.9.0.jar

Then execute test file using
phpunit --colors testSubmitLoginForm test.php

PHPUnit 3.7.9 by Sebastian Bergmann.

..

Time: 30 seconds, Memory: 5.25Mb

OK (2 tests, 3 assertions)

All sounds simple but in reality several hours of dicking around with Pear channels may ensue before final success…

Useful links:
http://seleniumhq.org/download/
http://net.tutsplus.com/tutorials/php/how-to-use-selenium-2-with-phpunit/#close=1
http://www.phpunit.de/manual/current/en/selenium.html
http://devzone.zend.com/1014/acceptance-testing-of-web-applications-with-php/

Installing Ruby on Rails on Snow Leopard

So here I am setting up a new clean development environment on Snow Leopard. And this is how I got Ruby on Rails installed.

1. Install XCode from the Mac OS X CD

2. Check gcc properly installed


gcc --version

3. Install the RVM from github

curl -L https://get.rvm.io | bash -s stable

4. Switch to new terminal window and check rvm all installed

rvm --version

5. Install Ruby 1.9.3 under rvm

rvm install 1.9.3

6. Make cuppa, watch video about squirrels..

rvm use 1.9.3
rvm --default 1.9.3
sqlite3 -version
gem install sqlite3
gem install rails
rails -v

Mustache.js and ICanHaz.js

The server-side has never been in better shape, but on the client-side I still wrestle with how to structure applications so I don’t end up with gigantic piles of crap consisting of hundreds of nested anonymous functions. According to Rebecca Murphey, Dojo offers more grown-up approaches to keeping code well organised, but I still like jQuery and I want to keep using it. Besides which, in the contracting world you often don’t get to choose your toolset, but have to work with what’s already there. And jQuery is the game in town at the moment.

In large part thanks to Rebecca’s tutorials and videos, I’ve gone up a gear with my jQuery and now know how to structure it inside an object which makes it much cleaner and easier to write and maintain. But that’s only the start; there are a bunch of other pain points too, and a host of new libraries that are emerging as potential standard approaches to dealing with these issues.

There’s problems of approach when migrating functionality from server-side to the client. Firstly, if you can do all this stuff on the server side, lots of developers don’t get why you’d want to duplicate things like templating in JavaScript. PHP _is_ a templating language, why duplicate this stuff? Secondly, how to reconcile the longstanding web standards approach of progressive enhancement with this new world where the temptation – and even the best practice – seems to be to build functionality that only works with JavaScript on.

Do we need to do everything twice?

There seem to be at least four additional areas of concern beyond the basics of just getting it to work in the first place.

  1. MVC on the client side (e.g. backbone.js)
  2. Unit testing for JavaScript code (e.g. jUnit)
  3. Supplementing the basic language and smoothing over browser differences even more (e.g. underscore.js)
  4. Templating (e.g. mustache.js and icanhaz.js)

And a lot of libraries are expanding to cover more than one of these areas.

Honestly, the whole thing is a jungle right now. There are no clear winners and little evidence of consensus emerging as to which approaches are to be considered best practice yet.

At the moment, my take on it is that unless you’re building a single page app (think Gmail) then things like backbone are probably overkill just now. I’m still coming at this from the progressive enhancement end.

I’d like to look into the unit testing side at some point, but I don’t really have a good handle on this on the server-side yet either, so I’m leaving that for a bit.

I don’t really understand the need for the supplemental libraries like underscore; I’m not aware of having any problems that they solve, so ignoring them for now.

The scenario I’m looking into just now is a page which loads content initially as HTML, but then adds Ajax functionality once the page has loaded. Like a to-do list, where the list elements need to be iterated over on the server side when the page is loaded, and then repopulated on the client side as items are edited and added without a full page load.

I wanted to find some nice microtemplating approach not just for the client side itself, but where the same microtemplate could be used on the server side to build the page initially, as well as embedded into the page for later manipulation.

Turns out mustache has both JavaScript and server-side support, so that’s where I’m starting.

<p id="output"></p>
{{#data}}
<li id="user_{{">
Hello I'm {{ name }}
</li>
{{/data}}



$(function () {

var users = {data: [
{id: 1, name: 'ian'},
{id: 2, name: 'susan'}
]};
var user = ich.user(users);
$('#output').html(user);
});