Thursday, March 29, 2007

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 :)

Sunday, March 25, 2007

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!

Saturday, March 24, 2007

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!

Friday, March 23, 2007

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!

Thursday, March 22, 2007

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.

Why you want Object Oriented Programming in PHP

First let me explain what the issue is around Object Oriented Programming (OOP). Traditionally (from the beginning of the computer era), programming was done by combining conditional statements with GOTO blocks to create a program flow. In the early '70s a Dutch computer scientist Edsger Dijksma strongly advocated the use of procedural programming, which means abandoning GOTO statements and creating a sort of chronological program flow in your code (from top to bottom). This style has been widely adapted and for most people is the way they program PHP applications. It is however already a thing of the past. Most modern programming languages are based on an OO approach and don't even allow for procedural coding anymore (for instance in languages as Java, C++, C#, Python, and Ruby). Explaining OOP goes beyond the scope of this article, so for understanding OOP in PHP I'd like to point you in this direction. For now let's just say that OOP is about creating relatively small objects with specific functions that interact with each other to form a complete application.

Typically, the main advantages of OOP are:

  • Reusability of code; a well designed object has only one specific function and is therefore completely independent of the environment it is placed in and thus can be reused easily.
  • Clearer structure of code; again a well designed object has only one specific function which means that all the code supporting that function is located in one place which increase maintainability.
A major disadvantage of OOP is that it requires more lines of code and is therefore more time consuming to produce.

In PHP we as developers are left with a choice. Typically, anyone who started out with PHP without any (OO) programming background will have started with learning procedural coding. Most tutorials on the web only cover procedural coding and quite honestly, the old fashioned way is just easier to use in many situations (for instance in small applications, or when you just start out with PHP).

However (here comes the wise lesson) Object Oriented Programming in PHP is definitely the way to go for any serious PHP developer taking on serious projects. For the past 8 months my web development firm has been working on a huge project for a real estate agent. The application takes care of many aspects of the clients administration, publishes it's information to multiple people (each with different clearances) and in multiple formats (web content, PDF, RTF). Using OOP in projects such as this is so incredibly superior over using procedural coding. Using OOP, we for instance model a real estate object (a house...) as a PHP object. The (PHP) object contains over 60 variables (all stored in a MySQL database but intelligently retrieved by the object) and many functions that allow the object to update it's data and return information on itself based on the users clearance levels. The data itself can be interpreted by either our web content generator object, or by our PDF generator object, no changes required. This goes for all the little parts the application has and you wouldn't believe how much time it has saved us in making small adjustments and adding small new features.

Doing this project in procedural code would have been horrible and messy. Just imagine having new additions to your project specifications on a weekly basis for several months and jotting all those things in between the already existing code using if/else statements etc. in procedural coding. You would probably go screaming mad about the PHP files containing more than 500 lines of code without any clear structure in them..

What's more, many of the classes we have designed for this project are useful in other projects as well (this actually already proved true). Furthermore we are experiencing nice and clean work divisions since we switched to OOP which definitely increased both our productivity and efficiency.

The thing is that the extra work needed when using OOP will be earned back with huge interest in a little while. Maintenance time is dramatically reduced, there is no more code overlap in your application and you (and your fellow programmers) will work more efficiently due to clearer work divisions and structure. Switching to OOP is really not that difficult, given the many tutorials (for instance this one, by Harry Fuecks) and will save you valuable time and most of all make your life easier.

If you are still not convinced I strongly suggest you read Harry Fuecks' tutorial mentioned in the previous paragraph as it will point out more advantages to you. Also you mind want to start learning OOP because of the PEAR project (standard libraries written in OO PHP, designed to really make your life easier by offering standard functions in freely available packages). Feel free to ask questions if you have any!

Wednesday, March 21, 2007

Gray out page with pop-up

Honestly, I don't know a better name for this technique than a page gray-out with a dialogue box pop-up (if this actually has a name, or you know a better one, please do inform me). What I'm talking about here is a technique that instantly grays-out the entire web site when you click a link, so that all your attention shifts to the pop-up that is loaded. The technique is used quite often by Web 2.0 enabled websites, so I bet that you have already seen something like it and probably thought that it was pretty cool.. That was exactly what I thought, so I tried it out and came up with a simplesolution which I want to share with you all.

A demonstration is available right here, and I suggest you load it up so you know what I am talking about! The simple (ugly) page has a neat Javascript application build in, that allows you to dynamically fill an Unordered List (UL html element). The fun part is of course the way the dialogue box is presented! After you click the link the entire page grays-out (it's not even accessible anymore) and a dialogue box pop-up is presented where you can fill in the new entry's value.

Some neat things about this solution:

  • Enter/Return key is enabled, so you don't have to (mouse) click the Add button.
  • You can press the ESCAPE button, which will close the dialogue box. If the new value field is not empty, the script will first ask for confirmation.
  • 'Focus' shifts to the pop-up (so the user can start typing right away).
  • The gray overlay always fills out the entire page, even if the resize the page later on.
  • The script is both MSIE and Firefox compatible (tested in MSIE7 and Firefox 2.0, should work in older versions as well, perhaps not IE4/IE5).
The code on the demonstration page is available for all public use, so feel free to copy it. The code itself contains plenty of documentation which should make it understandable and adaptable to your own personal needs.

Please note: this script uses the Prototype and Scriptaculous libraries, which are available for free on the respective websites.

How it is done
The most important part is the overlay. This DIV element is hidden at first, but can be made visible using Javascript. The CSS style of the element is very important:
  • position: absolute;
  • left: 0px; top: 0px;
  • width: 100%; height: 100%;
  • background-color: #666666; /* dark gray */
  • opacity: .7; filter: alpha(opacity=70); /* opacity: partly transparent */
  • z-index: 1000;
(please view the demonstration page code for more details).

The dialogue pop-up is positioned above the gray overlay, so that it is accessible and visible to the user. After the dialogue box is either submitted or closed (using the close link, or the escape button) the gray overlay and dialogue box are hidden again.

First of

Welcome to my Technology Blog! In the past I was part of the (late) Genesis Evolved tech blog team. The site sadly died, but after taking a little break I have decided to get back at writing some technical articles for your reading pleasure and interest. The topics covered on this weblog will mainly be web development and web technology. You can expect useful tutorials, tips and links, alongside interesting technical/ethical debates.

About the author:
My name is Paul van Iterson. I'm a 21 year old Dutch web developer / Information Technology & Economics student at the Erasmus University Rotterdam. I work for a web development company and run a small web dev firm on the side. I have an active interest in the Internet and its surrounding technologies and through this blog I hope to share my knowledge and insights with the world.

Enjoy.