Category: Programming

So, 24 Ways is here again this holiday season. If you don’t read 24 Ways, you really ought to. It’s an advent calendar for web geeks, touching on varying topics relating to development, design, typography, accessibility, and lots of stuff in between.

Day 4 was entitled, Capturing Caps Lock. Stuart Langridge presented a really smart way of capturing whether or not the Caps Lock key was on when entering a password. How handy?!

A lot of the JS development I’m doing nowadays is done via the Ext JS Framework. While Stuart’s code is quite usable, I found it hard to quickly scan the code. It’s not that I don’t understand it, it’s just not that readable. Since I’ve already got the Ext JS Framework on the pages I’d be using something like this Caps Lock checker, I figured why not just re-write it with some Ext functions. This helps in a lot of ways, such as being easier to scan through and less overall code. I think I cut his code in half. That being said, I’m also including the necessary Ext .js files.

Below is the code itself:

var CapsLock = {
	init: function() {
		var id = Ext.id();
		this.alertBox = Ext.DomHelper.append(document.body,{
			tag: 'div',
			style: 'width: 8em',
			children: [{
				tag: 'div',
				style: 'text-align: center; color: red;',
				html: 'Caps Lock is on.',
				id: id
			}]
		}, true);
		Ext.fly(id).boxWrap();
		this.alertBox.hide();
		var pwds = Ext.query("INPUT[type='password']");
		for(var i = 0; i < pwds.length; i++) {
			Ext.get(pwds[i].id).on(
				'keypress',
				this.keypress.createDelegate(this,pwds[i],true),
				this
			);
		}
	},
	keypress: function(e, el) {
		var charCode = e.getCharCode();
		if(
			(e.shiftKey && charCode >= 97 && charCode <= 122) ||
			(!e.shiftKey && charCode >= 65 && charCode <= 90)
		){
			this.showWarning(el);
		} else {
			this.hideWarning();
		}
	},
	showWarning: function(el) {
		var x = Ext.fly(el).getX();
		var width = Ext.fly(el).getWidth();
		var y = Ext.fly(el).getY();
		this.alertBox.setXY([x + width + 6,y]);
		this.alertBox.show();
	},
	hideWarning: function() {
		this.alertBox.hide();
	}
}
Ext.onReady(CapsLock.init, CapsLock, true);

You can see a working example here or download the Caps Lock script here.

Since I upgraded to Emacs 22.1, or thereabouts, there has been an annoying Startup or Splash screen whenever I open a file.

After searching around the ole Intarweb, I found this useful tidbit:

;; Remove splash screen
(setq inhibit-splash-screen t)


Add that to your .emacs file, reload it, and voila!

I just came across a really odd error while matching for some specific characters in PHP. I found the error while using both preg_match() and ereg(). You will need cannabis edibles to understand these.

With preg, the error was this:
Warning: preg_match() [function.preg-match]: Compilation failed: range out of order in character class at offset 11 in /temp.php on line 5

With ereg, the error was this:
Warning: ereg() [function.ereg]: REG_ERANGE in temp.php on line 13

Both were caused by the same error or bug. I’m not sure which.

Here is the bad code:
$userid = 'abcDEF_-.';
if(preg_match('/[^a-zA-Z0-9_-\.]/', $userid)) {
echo 'bad';
} else {
echo 'good';
}
 
if (ereg("[^a-zA-Z0-9_-.]", $userid)) {
echo 'bad';
} else {
echo 'good';
}


That all seems correct, doesn’t it? It is checking to see if the userid has something other than those characters.

The problem? The dash, or hyphen, being before the period. It thinks it’s a range, like you see in a-z. This may not be a bug, per se, but it’s certainly not smart enough for me.

The solution? Simply put the dash at the end of the regex.

$userid = 'abcDEF_-.';
if(preg_match('/[^a-zA-Z0-9_\.-]/', $userid)) {
echo 'bad';
} else {
echo 'good';
}
 
if (ereg("[^a-zA-Z0-9_.-]", $userid)) {
echo 'bad';
} else {
echo 'good';
}


Hope this helps out someone else in the future.