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: http://www.sitepoint.com/blogs/2006/08/29/flickr-mysql-dba-blog/
   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!

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 script.aculo.us 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!

CakePHP Routing Explained

I'm currently playing around a bit more with CakePHP. I'm rewriting our CMS system based on the CakePHP framework. It's a great learning exercise because you constantly have to deal with real life problems!

Just now I was wondering about the url structure of the website. The CMS has two different "areas" designed for two different end users. First there is the site itself (displayed to the visitor of the website) and second there is the CMS administration panel. Because I started designing the system from the administration panel's perspective, I soon discovered that thát part of the website was going to be accessed at the root (/). This of course isn't a logical structure, as it would require the pages the visitors visit to have a prefix or something.. So I looked into CakePHP's routing system and came up with some solutions to my problem.

First of all, there is CakePHP's CAKE_ADMIN config setting. This is a routing solution that allows a function called: index() in controller: users to be accessed like this: /admin/users/index. All you need to do is rename the method to: admin_index() and set the CAKE_ADMIN variable to 'admin'. This seemed like a nice solution, but frankly it wasn't. You can still access the controller without the /admin/ prefix, but it will then give out errors (view for admin_index() could not be found). So I went to play a bit more, and found out the following:

1. You can easily reconstruct Cake's default routing (i.e.: /controller/action/param1/param2/...) by using the following route:
   $Route->connect('/:controller/:action/*', array());
2. The order in which routes are set matter: if one route is successful, Cake will not bother to look at the rest of the routes.

So I designed my own /admin/ prefix, like so:
$Route->connect('/admin/:controller/:action/*', array());

Then by changing the default route (for '/') to the following line:
$Route->connect('/:page/*', array('controller' => 'posts', 'action' => 'output'));

I can have nice page structures, which are rerouted to /posts/output... Using this structure /posts/output knows which page to load by looking at $this->params['page'] (:page is a custom parameter!). Even better, secondary parameters are still passed (thanks to the trailing /*)!

Since CakePHP uses ordering in the routing, it stops routing after a route was successful. So if you place the /admin/ route above the /:page/* route, administration should be fine!
Also, you might want /admin/ to be accessible without passing on controller/action, etc. (i.e. you would end up at the start page for the administration panel). To do this, include the following route (place it at the top):
$Route->connect('/admin*', array('controller' => 'posts', 'action' => 'index', 'page'));

This will reroute a request to /admin to a default routing location (for me: /posts/index/page)

What I find strange is the fact that the above route doesn't stop Cake from looking on (it will still find the more elabore one; /admin/:controller/:action/*). This is possibly because of the trailing Asterix (*)?

You can of course use these techniques to set up different "areas" for your website (while physically all files are located in the same Cake folder). For instance you could have the following areas:
/blog/
/shop/
/customer_service/

simply by setting up your routings properly.

Please note the 'standard' routing variables:
/somedir/:controller/:action

Here: :controller sets the controller Cake will use and :action sets the action that will be invoked. Furthermore you can set custom parameters with this:
/blog/:page
Now the value for page will be available by using: $this->params['page'].
By the way, other parameters are available in the following array: $this->params['pass']!

I know the post is a bit messy, still I hope it might help some people out! Good luck!

Creating an Favicon

A favicon is an icon that is displayed left of the url in your browser (well, in most browsers it is). The icon is also stored in your bookmarks and is thus a very easy way for users to identify your website.

Since a favicon file is a .ico file, I supposed it was kind of hard to create. Guess again. Just create a simple .gif or .jpg file (make sure that it is clear at 16x16 pixels) and upload it on this website. It automatically creates a preview for you and of course you can download the icon and place it on your website. How? Simple, just insert the following lines in the <head> section of your website:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Also make sure you place the favicon.ico file in your webroot/document root!

Update: I would advise that you create a gif or jpg image of 32x32 pixels, which is also clear at 16x16 pixels. The favicon.ico stores 2 versions of the icon, one is 16x16 while ther other is 32x32 so you should make sure that your submitted image is fine at both sizes!

Further endeavours into baking Cake(PHP)

I have been playing around with CakePHP for the past several days. I've started work on two projects using Cake; a financial administration system (for my company) and a redesign of ITKA's iCMS Content Management System (link is in Dutch). I feel that I'm learning CakePHP quite quickly, which of course is a good thing. A word of warning though to other aspiring Bakers (see, I've already copied their slang!): CakePHP takes somes time to master, and I really wouldn't advice anyone using it without complete knowledge of how the system works.

The point is that CakePHP takes convention over configuration. Personally I love this concept, what's the point in being able to configure everything if you could also just play by the rules. You see, reading up on configuration in the manual is just as time consuming as reading up on Cake conventions. Furthermore Cake offers configuration exactly where you need it. Who cares that you need to access functionality via the controller (e.g. www.example.com/posts/edit/1) if that is only visible to the user. Routing is a powerful CakePHP function that is quite similar to mod_rewriting, except that it is more powerful. You can easily prefix /admin/... to administration functions and make pretty urls like www.example.com/blog/my-first-post using routing. Even if you use exceptional names and stuff the standard Cake conventions can be manually overwritten, it's all possible!

The one major question that currently still has my concern is performace. If you print_r() some objects used by Cake during runtime you can see that they are truly massive containing information on the database tables, related database tables (and models), etc. etc. Anyone have any thoughts on this?

For now I have got some tips for beginning Cake developers (like myself).

1. Use scaffolding and only scaffolding when you are designing your database structure. At the start of a project, first build all the necessary models, controllers and db tables. Link them using Cake's $hasMany/$belongsTo/$hasOne/etc. functions and check to see if all relations work properly (i.e. when viewing one thing, you get 'related [other things]'. Scaffolding will really help you out here, as you can instantly check everything (no need to rewrite any HTML, etc).
2. At the start of an application get your internal structure right. Like mentioned in #1, use scaffolding to get your database/model relation structure right. In the early stages it's a) easier and b) less time consuming to set everything right for final implementation. Consider Cake's MVC approach: you need to seperate data, business logic and presentation. First get your data and data structure right, then add business rules and logic and only at the end worry about presentation. The method is not the same as the MVC approach (which is only about code seperation). This is an engineering approach that takes on different parts of the project one-by-one, in a logical order.
3. Learn by experience. This by the way goes for any programming language learning and is generally the way I advice people to learn programming. The point is that programming isn't something you know, it's something you feel. It's a creative process! Building a program can be done in many different ways and quite often there isn't even a best way. You need consider your alternatives, choose and finally go with that choice. You will always encounter new problems as a developer and so you will always need to come up with creative solutions for those problems. The best way to learn to do this is by gathering experience. Create a small but challenging project for you to take on, take it on and come up with solutions for the problems you encounter. Search the web, talk to other developers on forums, but get your problems solved. CakePHP, due to it's extremely intuitive conventions, is perfect for this learning method. Finding the answer you are looking for in Cake is easy as for some reason you just know where to look.
   

As you can see I am very enthusiastic on Cake. I'm looking forward to finishing up the applications I've started work on. Those projects should provide me with a sufficient knowledge base for implementing CakePHP in customer projects, which would be great considering the development time Cake saves you :)

Creative X-Fi frustrations

When I recently purchased a new computer, I chose for the Creative X-Fi Extreme Audio sound card. That version is actually the cheapest of the X-Fi series and right now I am really frustrated by Creative. There still is not Vista driver available that enables the X-Fi functionalities. Right now the only Vista driver is seriously crippled, which means I can't even get more that stereo sound out of my speakers. In windows testing I do get sound out of the rear speakers and subwoofer, but in applications it just doesn't work. Apparently this has to do with the lack of support for CMSS-3D (creative surround sound of something), but clearly this is just bad service by Creative. Vista has been available for 2 months now, please hurry up with proper driver support!

CakePHP: Setting up the ACL tables

I am currently exploring my way into CakePHP. Have to say I am really enjoying working with it. Everything is starting to get clearer to me step by step.. Just now I've been struggling with getting the ACL tables properly set up. The manual suggests that I simply ran the /cake/scripts/acl.php scripts from the command line. I appeared that this was easier said than done, so here's what I eventually came up with:

1. Open your command prompt (Windows Key + R);
2. Move to your PHP directory (which contains php.exe)
3. Run the following command:
   php.exe -f "x:\webroot\cake project\cake\scripts\acl.php" initdb

The script now properly executes and creates the aros, acos and acos_aros tables. Please make sure your database is properly configured and for the rest just follow on what the manual has to say!

Apache server on Windows Vista

In the past I always configured my own Apache webserver / PHP, etc. I don't know why (I'm not that much of a server expert), but it just fellt better. On my new PC with Windows Vista however, I couldn't get it to work easily. So I looked around a bit and stumbled upon an all-in-one solution called Wamp. According to the developers it works fine on Vista (takes care of UAC), and after some testing I can happily confirm that it does! The setup asks a few questions, so it automatically configures the web servers. Another cool thing is that Wamp runs an icon in the taskbar (next to the clock) that let's you quickly configure stuff! Nice!

Running multiple version of IE on one machine

Microsoft auto updating can be quite annoying for us web developers.. A large amount of users still use IE6 (some even use IE 5/5.5) and after IE7 is (automatically) installed for you, you can't test your websites using olders browsers anymore. At least, not without a little effort. Luckily Yousif has created this amazing package called Multple IE, that actually installs Internet Explorer versions 3, 4, 5, 5.5, and 6 as standalone applications! It creates shortcuts for the chosen versions (you can configure which versions to install) which is truly great! A must have for web developer's, I'd say. Right now I've tested version 5, 5.5 and 6 in Windows XP SP2 and they work fine.

My own first taste of CakePHP

I've started experimenting with CakePHP yesterday. This was actually the first time I've used any framework and even though I don't completely grasp how it works yet, I was already pretty impressed by what I could build up in just half an hour (using Sitepoint's CakePHP tutorial).

The idea with CakePHP is as follows:

Cake is a rapid development framework for PHP which uses commonly known design patterns like ActiveRecord, Association Data Mapping, Front Controller and MVC. Our primary goal is to provide a structured framework that enables PHP users at all levels to rapidly develop robust web applications, without any loss to flexibility.

Personally the main advantages I take out of this is that using such a framework forces you to use a certain approach to programming, which usually means following a good practice one. The MVC (Model View Controller; seperation of data, output and business logic) approach brings more structure into your applications and with the help of all the built in functions provided by CakePHP is very powerful, yet also quite flexible!

I recommend any PHP developer with some spare time on their hands to take a look at this tutorial and the CakePHP website. The website contains a pretty elaborate manual with detailed installation and configuration instructions (don't worry, takes about 5-10 minutes). Getting started with CakePHP with just the manual was a bit difficult though, so that's why I recommend the Sitepoint tutorial. This tutorial will take you around 30 minutes to complete and really gives great insight in what CakePHP (or a development framework for that matter) is all about.

Update #1: acutally this post on Giga Promoters Blog has some very interesting things to tell about CakePHP before you get started.

Update #2: another great tutorial by IBM. Actually part of a series. (requires registration with IBM, free).

CryEngine 2 movie

I have been following the development of Crysis and the CryEngine 2 game engine for some time now, and it is simply amazing. Just take a look at this movie, which demonstrates some ingame image rendering capabilities, A.I. and next-generation physics. If all the stuff your read about and see of this engine/game is true, it truly is an amazing piece of work. This is truly next generation stuff!

Integrating DIGG into your blogger

In a (successful) attempt to include a 'Digg this' button into this blog I came across this website which quite clearly explains how it is done. I have only one addition, when replacing the code you need to 'download the full template' first, edit that file and upload it again.