Friday, May 15, 2009

An easy, understandable Konami Code implementation (using Javascript with JQuery)

This is just a quick post on my own Konami Code algorithm. If you haven't heard of the Konami Code, I'd like to refer you to sitepoint's article on it and Wikipedia.

My algorithm uses an array of integers, that represent the keyCodes that correspond to the Konami Code: var konamiCode = [38,38,40,40,37,39,37,39,66,65];

Furthermore it used an index: konamiIndex. This index starts at and resets to 0. If a key is pressed, the algorithm checks if that key corresponds to the konamiCode array at the position of the current index. So if the index is currently 0, a keypress will check if the keyCode is equal to konamiCode[konamiIndex] which evaluates to konamiCode[0], which is keyCode 38, which is up.

If the pressed keyCode is correct for the Konami code, the konamiIndex increments by one. If then the konamiIndex equals the length of the konami code array, we have a winner!

My code:

var konamiCode = [38,38,40,40,37,39,37,39,66,65];
var konamiIndex = 0;
$(document).keydown(function(e) {
if(e.keyCode == konamiCode[konamiIndex]) {
if (konamiIndex == konamiCode.length) {
// You are in Konami code territory!
konamiIndex = 0; // Reset the index
} else {
konamiIndex = 0;

Monday, July 21, 2008

Programmer's creed

This is my code.

There is many like it, but this is MINE.

My code is my best friend. It is my life.

I must master it as I must master my life.

My code without me is useless. Without my code, I am useless.

I must program my code true.

I must program more elegantly than my competitors who are trying to put me out of business.

I must finish my code before they do. I will...

My code and myself know that what counts in competition is not the lines I type, the noise of my key strokes, nor the coffee I consume.

I know it is the quality that counts. I will write quality code...

My code is human, even as I, because it is my life.

Thus, I will learn it as a brother.

I will learn its weaknesses, its strengths, its architecture, its context, its components, and its dependencies.

I will ever guard it against the ravages of function abuse and general bad-practice.

I will keep my code clean and stable, even as I am clean and stable.

We will become part of each other. We will...

Before God I swear this creed.

My code and myself are the defenders of my company.

We are the masters of our competition.

We are the saviors of my life.

So be it, until there is no competition, but PEACE.
Written by: Paul van Iterson (Quaint)

Based on 'My rifle' by Maj Gen WH Rupertus (the US Marine Corps' Creed)

Tuesday, May 6, 2008

Solution: All text in Firefox in italics

Out of nowhere, some time ago, all my (normal) texts in Firefox and Internet Explorer went italic. Meaning, every bit of text that wasn't in bold or a header went italics...
What happened was that for some reason the default Arial font went missing. Firefox and IE then automatically switched to the italics variant of the standard Arial font for displaying text in Arial. The solution is easy: copy a Arial.ttf file back into c:\windows\fonts.
I can't supply you with the file (licensing issues) but just know that it is supplied with every copy of windows. Just open up c:\windows\fonts on any PC that doesn't have the problem, copy the file Arial.ttf (Arial standard) onto an USB stick and then copy the file into the c:\windows\fonts folder of the PC that does have the problem..

Tuesday, September 4, 2007

Quick Review: Zalman VF1000 + RHS88

Just a quickie on some new equipment I just bought. I bought my new PC a couple of months ago, and got into overclocking a bit. My PC has a GeForce 8800 GTS 640 MB graphics card in it.. Of course, it overclocks nicely, but the temperatures are scary to say the least! With the stock cooler I did around 70 idle, 85 degrees at full load (fan auto, Windows Vista). With the fan manually turned up to 100% these temperatures were around 68 idle to 80 at load..

The Zalman VF1000 in combination with the RHS88 heatsink definitely knocked off a lot of degrees, 15 to be exact! My new load temperature is around 65 degrees (fan @ 100%). This, of course, is great! I can actually run the GPU stable at 650/1000 MHz at which the temperatures won't even reach 70! Superb!

Installation was quite doable, however I'd advise you to pay a lot of attention when removing the old heatsink! Also, be sure to clean the old cooling paste of properly (using special chemicals, which you can purchase at your local computer retailer).

The price of the set (you need the RHS88 heatsink if you want to use the VF1000 on a GeForce 8800) is quite high, but of course the performance is incredible! Furthermore it doesn't take up any extra space in your case, which is a big advantage over the HR-03 Plus! Good job Zalman, I'd say!

Thursday, August 23, 2007

Screen resolutions

According to Google Analytics, 0% of all visitors ever viewing this blog were using a resolution lower than 1024x768. This, of course, is great news! Sadly though, still around 10% of the users world wide use 800x600 (the difference is that this blog is only read by techy people)..

When do you think web developers should drop support for 800x600 clients (and make them scroll)? Which percentage of visitors is acceptable? Does it depend on the target audience of your website? Or should we all start using fluid designs?

Wednesday, August 22, 2007

Lightbox, Leightbox and my improved Leightbox

For my latest project I wanted to include a nifty 'Lightbox effect'. The original Lightbox effect however is limited to displaying images and I wanted to show HTML.. So I searched the net and came across Leightbox. Leightbox is a modification to Lightbox which allows you to easily display a piece of HTML (a DOM node actually) using a lightbox effect..

The problem with Lightbox however is the way it binds itself to click events.. You can only load a Leightbox using a click event.. I wanted to have a Leightbox appear using a timer, so I looking into the source and came up with the following:

1) change the initialize function inside the lightbox.prototype to:

initialize: function(ctrl) {
if(ctrl) {
this.content = ctrl.rel;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};

What this does is check if the 'ctrl' variable is actually passed.. If it isn't, the function does nothing..

2) Add a new function:

initCallable: function(rel) {
this.content = rel;

3) You can now manually load up your Leightbox of choice by calling the following:
lb = new lightbox();

Update: this technique is no longer valid or neccesary in the current Leightbox version.
New instructions:
1) Leave the lightbox.js (from leightbox) unmodified (download the latest version at:
2) Remove the class="lbOn" from your lightbox activating links
3) Create a javascript var (outside a function):
var myLightbox;

[4) Use an intialization function (i.e. body onload="initFunction"):
myLightbox = new lightbox($("IDOfActivationLink"));
(Don't forget to set the rel property of the link to the DIV's id you want to show (like you normally would with Leightbox))]

You can now use myLightbox.activate() and myLightbox.deactivate() to turn on/off the lightbox.

Wednesday, July 25, 2007

Quick Tip: Listing your CakePHP app controllers

Hi! When I started development on my latest CakePHP project, I wanted the homepage to print out a list of all available controllers in my application. Since I'm still in the beginning of development, a lot is bound to change so I don't want to manually have to update my navigation all the time.. Here's a quick and dirty solution for my problem:

// Read all PHP files in the controllers directory, return only the filenames
foreach(r(CONTROLLERS.'/', '', glob(CONTROLLERS.'/*.php')) as $file)
// Now convert the filename to a controller name
// Use a static call to Inflector:camelize() to convert the filename (minus _controller.php) to a
// camelized controller name.
$controller = Inflector::camelize(r('_controller.php', '', $file));
echo "\t". '.$controller."\n";
I use this in home.thtml, so I get a quick link list to all the controllers I have. You could also modify this and print it in your default.thtml template, so you can access every controller everywhere!

Monday, May 21, 2007

More on Creative X-Fi Xtreme Audio

A month ago, I posted about my frustrations concerning the Creative X-Fi Xtreme Audio soundcard I recently bought. The card is not really compatible with Vista (no control panel, no surround, etc.), so when some time ago the Vista X-Fi drivers were released, I was quite thrilled! This feeling didn't last long however, as the new drivers are only compatible with every other X-Fi card, except for the Xtreme Audio. I let this pass, as Creative has promised it will have proper drivers for it sometime in Q2-2007... But as times goes, I'm getting more and more frustrated.. So I Googled this, and guess what turns up..

The Xtreme Audio version of the X-Fi line does not feature a X-Fi chipset at all! It is merely a tuned up version of the Live 24! card, with some software features that emulate X-Fi functions.

For more information on this, please visit this thread:

I don't know yet what frustrates me the most.. Either the fact that Creative published a card that clearly deceives consumers, or the fact that my computer vendor doesn't mention this (complete misinformation actually)...

Anyway, I hope the above mentioned computer vendor will offer me some solution for my problem..

For now, be warned: if you are looking for a soundcard that actually reduces your CPU load (when gaming, for instance), don't go for the X-Fi Xtreme Audio, instead purchase X-Fi XtremeGamer or something alike!

Friday, May 4, 2007

Google SketchUp on Windows Vista

Google has recently released version 6 of the amazing SketchUp. Even though they do not officially support Windows Vista, I have found that it will install and run if you follow the following procedure:

  1. Download Google SketchUp;
  2. Go to your download directory:
    1. Right click the downloaded file -> Properties;
    2. Go to Compatability;
    3. Activate Compatability mode, select Windows XP (Service Pack 2)
    4. Activate 'run this program in administrator mode' (or something like that, I have a Dutch Vista, so translated this myself)
  3. Now run the setup file
It should all work fine now!

Wednesday, May 2, 2007

How to remove Ubuntu from a Vista dual-boot config

On my new PC I wanted (still want) to have to a go with Linux. I chose to experiment with Ubuntu. I downloaded the desktop CD, burned it, freed up some disk space (inside Vista) and loaded up Ubuntu from the CD. After some experimenting I figured out how to install Ubuntu in the empty disk space and it all worked fine (GRUB took over my booting (recognized Vista automatically!) and Ubuntu loaded up fine).

Then I tried to install my GPU drivers and everything went wrong.. For some reason Ubuntu wouldn't boot anymore (failed to load X-Server or something). I was completely lost and wanted to remove Ubuntu.

This is where things start to get really messy!

If you simply remove the Ubuntu partition, GRUB (Linux boot loader) will still be on your PC (in control). It will trip out, as the Ubuntu partition will be removed.. Bad thing!

So you need to restore your Master Boot Record (MBR) for Vista (so that Vista will handle the booting, not GRUB).

Google only pointed me to sites that explained how to REMOVE VISTA, which isn't what I wanted. Many sites talked about the 'fixmbr' command, but this is really only available in Windows XP.

So how do you restore your MBR for Windows Vista?

1. Put the Windows Vista installation disc in the disc drive, and then start the computer.
2. Press a key when you are prompted.
3. Select a language, a time, a currency, a keyboard or an input method, and then click Next.
4. Click Repair your computer.
5. Click the operating system that you want to repair, and then click Next.
6. In the System Recovery Options dialog box, click Command Prompt.
7. Type Bootrec.exe /FixMbr, and then press ENTER.

That's it. Now when you reboot your PC, Vista will load automatically... You can now safely boot using your Ubuntu desktop CD, to use the built in Gnome Partition Manager to remove your Ubuntu partition!

Tuesday, April 17, 2007

Syntax Highlighting on Blogger

Since this is a Technical Blog, concerning topics that have to do with programming mostly I wanted to add some sort of syntax highlighting library to this website. Blogger allows you do fully edit your HTML (actually XML) template, so I did the following:

  1. Looked up syntax highlighting on blogger
  2. Ended up here:
    Note how someone states in the comments that it SHOULD be possible to add dp.SyntaxHighlighter since the template is editable.
  3. I did as instructed.. I upload the library to my personal website, and editted the template so that the files were included.
  4. I surrounded code blocks as instructed by dp.SyntaxHighligher...
The end result: I ended up with each block of code showing as one line of code, with a <br /> tag at the beginning and at the end.

What I discovered was that blogger prints a post on a SINGLE LINE. All new line are omitted (even if you didn't use 'Compose' mode, but editted the HTML directly). SyntaxHighlighter can't cope with this (expects newline characters, etc.).

Blogger, this is seriously messed up and I would REALLY appreciate native syntax highlighting support, or if that is not going to happen a way to include third party libraries and make it work properly!

Furthermore I do like to recommend dp.SyntaxHighlighter if you can't syntax highligh server side! The library is very extensive, easy to use and produces very nice syntax!

Monday, April 16, 2007

An easy way to add (web 2.0 like) tags to your posts

One of the features that is closely linked to the web 2.0 developments is the use of Tags. Tags are short phrases (/words) that describe the article they accompany. Tags are great for categorizing posts and give the reader of an article information on it's subject instantly.

You see, for Tags to be effective it would be best to minimize the variety being used. If all tags concerning programming have a tag 'programming' attached to them, we could use that tag to effectively categorize those posts. Using standard tags for posts helps us create a more structured and better organized category system. The problem however is that you can't remember all the tags you already use and you probably don't have enough room (or want for that matter) to show all the tags in a row.

Using however this problem is solved very easily! First of all, if you didn't know this already, Scripaculous is an open source Javascript framework. It used the Prototype framework and it provided many graphical effects and other powerful tools to it's users. One of the things it offers is an Autocompletion class, which we are going to use to make our lives a lot easier. Basically autocompletion presents matching options while the user is typing. The user can click the options (or use his keyboard) to select an option after which the text is inserted in his input field. Go to this Scriptaculous demonstration to see what I'm talking about.

First of all we need a database that contains the tags. This database must at least contain these fields:
- id (int, primary key, auto_increment)
- tag (varchar, unique)

Then we need a table to link tags to posts:
- tag_id (int)
- post_id (int)

Next, let's set up the input page. First of all we need an INPUT field, e.g.:
<input name="tags" id="tags" value="" style="width: 300px;" type="text">

Next we need an invisible DIV that Scriptaculous will use to show it's autocompletion results, e.g.:

<div id="auto_complete" style="display: none;"></div>

Now on to the Javascript!
For the sake of easy testing, let's add a local array containing the tags that are already used on the website (the tags the autocompleter will use):
var tags = new Array('news', 'websites', 'links', 'programming', 'php', 'mysql', 'apache', 'games', 'hardware', 'holiday', 'business', 'ICT', 'music');

Be sure to add that inside a Javascript block!

Here comes the magic! Below the form field containing the tags, add the following Javascript function (inside a javascript block:
new Autocompleter.Local('tags', 'auto_complete', tags, {});

This function will add the autocompleter. It will use the INPUT field 'tags', fill the DIV 'auto_complete' with results and use Javascript array 'tags' as it's source. The {} at the end signify the options array (empty for now).

The above works! However there is a small problem with it.. It will only allow you to add one tag! After that, autocompletion won't work.. Luckily, Scriptaculous can fix that! In the empty brackets ({}) at the end, add the following: tokens: ','

Or make it like this:
new Autocompleter.Local('tags', 'auto_complete', tags,
tokens: ','

Now you can add multiple tags and seperate them using commas! How neat is that! You can also set more options (for instance partial searching, minimum characters for autocomplete to start, etc), which are described here.

Of course it's also possible to load the autocompletion tags using Ajax. I think however it would be better to render the tags array using PHP at page load, because of performance (each Ajax request takes time, while the tags won't change..).

Click here to view my demonstration page for the above!

Next is the PHP part!

I won't go into much detail here.. This part basically requires 2 steps:

  1. Split up the tags;
  2. Save each one. If they already exist in your table, only add a link from the new post to the tag, if they didn't exist add the new tag and link the post to it.
Splitting up requires a small 'heads-up': scriptaculous will allow whitespace after the seperating comma, so you need to watch out for that aswell. Here's how:

// Strips whitespace at the beginning of a string
$_POST['tags'] = ltrim($_POST['tags']);

// Splits up the tags
$tags = preg_split('/[ \t]*,[ \t]*/', $_POST['tags']);

Now all you need to to is loop through $tags and store the tags (as described in point #2). Make sure you first check if the tag already exists! If it does, only store the link from this post to the tag! If it doesn't, add the tag, then get it's id (mysql_insert_id()) and then store the post->tag link.

On great thing to do with tags is create a (Web 2.0) tag cloud!

Also be sure to check out my demonstration for the above!

Happy web 2.0'ing!