Web Developer Hobo

A difference between Chrome, Opera and Firefox

2010-03-20T03:22:00.003+01:00

While working on the project they gave us in college, I came across yet another fun example of the difference between the big browsers.

Firefox 3.6.2: Firefox Screenshot
Opera 10.50: Opera Screenshot
Chrome 5.0.322.2: Chrome Screenshot

IE8 gave the same result as Chrome.

Save this code and open the file in those 3 browsers if you wanna try for yourself.
Or click this link: Link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        /* CSS RESET*/
        html, body, div, h1, h2, h3, h4, ul, ol, li, form, fieldset,
        input, textarea {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }
        ul {list-style: none;}
        img, fieldset {border: 0;}
        h1, h2, h3, h4 {font-weight: normal;}
        em {font-style: italic;}
        strong {font-weight: bold;}

        #header{
            outline: solid 2px red;
        }

        #headertext{
            max-width: 200px;
            height: 40px;
            border: dotted 3px green;
            float: left;
            font-weight: bold;
            font-size: 1.8em;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="header">
            <div id="headertext">
                <h2>Foo in the bar</h2>
            </div>
            <div id="navbar">
                <h3>Foo in the bar</h3>
            </div>
        </div>
    </div>
</body>
</html>

Querying the servers

2010-01-08T06:24:00.003+01:00

When you build a website, you'll probably be using these pieces of technology:

Client-side languages like HTML, CSS and JavaScript
Server-side languages like PHP, ASP.NET, etc...
A relational database like MySQL, MSSQL, PostreGreSQL, etc...

Depending on how active a certain website is, the database will get more or less queries. Some fellow students of mine appear to think that this is completely dependent on the activity of the user. I am here to show that it is not.

Let's take a look at this drawing I made:

Granted, the query for the 5 pieces of data at once might be a tiny bit bigger, but it makes no significant difference. And this is only 5 times. Suppose it were 20, or 100. The difference would be a lot bigger. And that's not taking into account that this is only one user doing one thing. The one user can spend hours doing many more things and besides that one user, many other users will also be doing this. The implications are enormous.

One might think this is all very straightforward. The logic is simple and there's no refuting it. Yet it keeps happening. Because in a lab-environment, performance is not an issue. Testing remains limited to functionality and endurance is mostly ignored. The remarks I've heard from various students and people on the internet boils down to: it's working under this condition, so I'm not going to bother with it anymore

In conclusion, I think the drawing speaks for itself. Performance is always an issue, and taking the stress of your system can certainly improve it.

Variable variables

2009-09-25T22:42:00.014+02:00

Since I'm not researching new things right now, due to my total lack of initiative, I'm gonna post something on things I already know which I believe to be useful.

Variables

To explain this, I need the reader to get into a certain state of mind.
To be brief, think of a variable as a cardboard box in which you put things. You can have many boxes like this, the "variable" thing about them being the name you give the box.

And that's what I'm gonna be working with here. Putting a box inside a box inside a box... and so on.

Variable variables

Which is a fancy name for what I said just now. Every variable has 2 basic things in common with all other variables:

A name, by which it can be identified. We need to know which box we need.
Content. You need to put something in the box(you can leave it empty if you want).

PHP example:

$number = 6;
echo $number //outputs 6 on the screen

Simple enough. Now watch this:

$a = 'test';
$$a = 'testing this test';
echo $test; // This will output: "testing this test"

You might be asking: "but where did the $test variable come from?"

That is what variable variables is all about.

To understand this, remember what I said earlier about "a box inside a box inside a box...". We have 2 dollar signs, so we have 2 boxes. Starting from left to right, you have the biggest and final box, then the box just a bit smaller, and so on, until you reach the last box. What happened is that I removed the smallest box and used its content to name the next box.

Note: You can't pick a random order. You can use an infinite amount of dollar signs(boxes), but when you're going to determine what the final variable will be, you have to start doing the replacement from right to left. The smallest box gets deleted first and it keeps going like that until you finally reach the biggest box.

I defined the variable $a = 'test';. So the content of $a is test
Since we removed a box, we have to remove a dollar sign and the variable-name connected to it. We then replace it with the content of that variable. And thus birth is given to the $test variable.

Note: The smart reader will have asked him/herself this already: "what happens if I do this with many variables, but in the middle of the line, there's a typo?"

To be honest, I'm not entirely sure. In PHP, an unknown variable is treated as an empty string. So if you make a typo somewhere and you get a reference to a variable that hasn't been created yet, it should be replaced with an empty string of text. That will probably create an error or a warning, I'm not sure. Either way, since the variable that you'll be calling in the end doesn't exist, that too will be replaced by an empty string of text.

Functions too

You can pull this trick with functions as well. How? Because functions are never preceded by dollar signs. If php sees the () signs, it knows there's a function. But what if this happens:

$function_name();

Well, the parser will assume there's a variable somewhere name "function_name". It will look up the content and replace it, same way you've witnessed before.

So if you have this:

function test() {
  echo "hello world";
}
$function_name = 'test';
$function_name();//outputs "hello world"

The parser will look for a function called test(). Simple as that. And once again, you can keep going with this. The depth is unlimited(theoretically).

What do you use it for

You can do anything you want with it really.
Something I use this for is easy creation of variables to represent the content of database entries.

For instance, suppose you have a database table with these columns:

username | email | gender |age | married | number_of_children | street | province | etc

And you're viewing the profile of a single person. Image having to type all the variables. Seems normal? Now check this:


$vars = array('username','email','gender','age','married','number_of_children','street','province','etc');//or some function that calls the column names for you
  foreach($vars as $var) {
    $$var = $sql->getUserInfo($user_id,$var);//user_id to be obtained at some earlier point
  }

A bunch of variables will be created for the specific user_id.
This principle becomes more and more useful with every extra column you need. If you have a function that can call all the columns of a certain table, you'll have the variables for all the columns you need (and those you don't need too, keep that in mind).

That's about all I have to say on the subject. Thanks for reading.

escaping characters in PHP

2009-08-17T14:48:00.014+02:00

Recently this PHP function was introduced to me:

mysql_real_escape_string()

I hadn't heard of it before.

To escape strings, I'm used to using

addslashes()

I'm told that the difference in the mysql function is that it is dependent on the MySQL server settings.

I have a standard install on this machine, with no settings altered whatsoever. I decided to do a simple test, with all the characters my keyboard can produce:

$link = mysql_connect($dbhost, $dbuser, $dbpw);
mysql_select_db($dbname, $link);

$test = "|@#[^{}³1234567890°_-)àç!è§('\"é&²AZERTYUIOP¨*$^poiuytreza€[]£%MLKJHGFDSQqsdfghjklmùµ´`>WXCVBN?./+=:;,nbvcxw<\~";
echo addslashes($test);
echo mysql_real_escape_string($test);

The output for both functions is identical. Here's a screenshot:

I have no knowledge of extra settings that might influence the function. So I'm stumped. If anybody ever reads this and knows of a way to influence the behavior of this function, feel free to let me know.

Formchecking in PHP

2009-08-16T22:51:00.015+02:00

I recently asked a question on Stackoverflow

I was a bit confused over a concept in programming/web-development I had never seen before, which turned out to be "Abstraction". I was provided with some good answers.

Several people mentioned that my code didn't look like it was checked for errors pretty well. The post has some long answers and my original one got pretty long too, so I decided to elaborate here.

I should note that my native language is Dutch. Most variable names will be in dutch, though some resemble their English counter-part. Though I'll be re-writting some of it in English randomly.

register.php

The HTML of this page contains a hidden field with the name 'postback'.

<input type="hidden" name="postback" value="" />
<input type="submit" name="btnOk" id="btnOk" value="Register" />
<input type="reset" name="reset" value="Reset" />

In the source code, you'll find this:

if(isset($_REQUEST['postback'])) {
    $allOk = true;
    ...

This is where the formchecking begins. What we were taught to do, let's leave whether this is a good or bad practice out of it for a second, is to control the input of every field for possible SQL injection, XSS and other stuff.

The basic idea is that the moment something bad is detected, the allOk variable is set to false and can never be set to true again.

Here are a couple of examples of SQL injections we got from our instructor:

admin'--
' OR 1=1--
' UNION SELECT 1, 'hackerX', 'letmein', 1--
' HAVING 1=1--
' GROUP BY users.id HAVING 1=1--
' GROUP BY users.id, users.login HAVING 1=1--
' UNION SELECT SUM(login) FROM users--
'; INSERT INTO users VALUES(666, 'hacker', 'letmein', 0xffff)--
' UNION SELECT @@version,'1','1','1'--
' UNION SELECT MIN(login),1,1,1 FROM users WHERE login>'a'--
' UNION SELECT MIN(login),1,1,1 FROM users WHERE login>'admin'--
' UNION SELECT password,1,1,1 FROM users WHERE login='admin'--

So how do I check my forms? The way I remember doing it most. And this is how:

Step 1

Using $_POST[], I make all the variables I need.
Example:

$naam = addPostSlashes($_POST['naam']);
$straat = addPostSlashes($_POST['straat']);
$paswoord = addPostSlashes($_POST['pasw']);
...

addPostSlashes() is a function that checks if the php.ini file has magic quotes enabled or not. If not it applies the addslashes() method and in the other case it's been done already.

I saw people mentioning the mysql_real_escape_string() function. I looked it up on PHP.net and compared it to the addslashes() method. The documentation itself doesn't show a lot of difference and some debugging didn't either, though I haven't tried the SQL injections yet. I doubt they'd have created mysql_real_escape_string() if it does the exact same thing as an existing function.

Part 2 - Regular Expressions

I use a couple of regular expressions to test the variables.

$rexSafety = '/^[^<,"@$?=>|;#]+$/i';
$rexMail = '/^[a-z0-9\._]+@([a-z0-9-_]+\.)+[a-z]{2,3}$/i';

I'd like to mention that the Regular Expressions you see here have been tested and work. The only tiny problem I'm having is with the first one, which doesn't seem to allow empty strings. Which can be a pain for non-required fields in a registration form.

The first one is used as follows:

if(!preg_match($rexSafety,stripslashes($naam))){
  $allOk = false;
  $naamError = ' please don\'t use < , @ # - >  $ ; = | or "';
}

I'm checking if any of these characters are present in the received string and if there is even one, the entire registration gets canceled. Next to the field where the error was found appears a message explaining what went wrong to the user. In this case, asking to please not use any of the following characters.

Rest assured, a potential customer accidentally filling in something wrong won't have to re-write the whole thing. The page is reloaded not only with the explanations, but also has all the previously entered text in the correct place, with the exception of passwords not being reloaded.

Thinking about this, I realize that anyone with a @ in their password is gonna be pretty miffed at me for doing this. As far as I'm aware, you can't escape a @ or a # sign and they can both be used in SQL injection. Please correct me if I'm wrong. And should you do so, please refrain from such comments as: "what a horrible piece of coding" and other such comments. I'm here to learn, not to get insulted.

Part 3 - All Ok!

Once everything is checked and no errors are found, I call upon the SQL class and the User class. They respectively represent the SQL actions I want to perform and the actions on the User I wish to perform. I should perhaps mention that the register.php file has a require statement for both classes at the top of the file.

So this happens:

$sql = new SqlObject();
$newUser = new User('',$naam,sha1($passw),...);
$sql->addUser($newUser);

All of those are escaped. Just have to remember it's all stored with escaped characters, as to make sure logging in works.

Let's look at an example of what the User.class.php file looks like:


<?php
class User {
  // members
  var $id;
  var $name;
  var $password;
  
  // constructor
  function User($id=-1,$name='',$password='') {
      $this->id = $id;
      $this->name = $name;
      $this->password = $password;
  }
}
?>

This is shortened, but you get the general idea I hope.

The SQL class has

require "User.class.php";

written on the first line, which enables it to use instances of the User class.

Which brings us to the addUser() function:

function addUser($user){
  $insQuery = 'INSERT INTO users(naam,paswoord,...)';
  $insQuery.= " VALUES ('".$user->naam."', '".$user->paswoord."')";
  @mysql_query($insQuery) or showError("user insert failed");
}

I highly doubt this but I'll mention it anyway: the ... are meant to indicate more fields, not actual input.

So that's how we've been taught to do it. That is to say, we were shown the basics and were allowed to choose our own way of implementing it.
I read the term "prepared statement" a few times. I looked it up and it looks interesting enough.

To answer Mr. Vinko's example: the string John O'Donell will be entered into the database as John O\'Donell, that is true. Your concern seems to be that the escaping of the characters should happen at the insertion, and not during the checking for SQL injections(and similar stuff). To be honest, I've never considered doing this, because of the simple reason that it's not the way I did it the first time I did this type of formchecking. The fact that it worked, was enough for me untill now. This whole ordeal has gotten me thinking, and I'm beginning to believe I'm mixing up a few things.

EDIT:
I read all the things most of you said and it's starting to make sense. I can divide it all into 2 basic steps now

Check for faulty input/possible injections without escaping anything
If everything checks out, send it to the PHP that handle database insertion and escape it there.

That's what I think this all comes down to. I hope I got it right this time...

I hope this wasn't too long and I realise this was more of an explanation to certain people than a proper blog entry, but I did what I said I'd be doing when I made my first post on this blog: learning. If anyone has any pointers or tips on the subject of formchecking or prepared statements, feel free to tell me.

Though if you choose to do so, please don't say stuff like "That's a bad practice, the way I do it is better!" and the walk off without even offering an example. If you're gonna say I'm wrong or it could be better, then take the time to prove it. Offer me a good reasoning and I will listen/read. I'm not the kind of guy who sticks to what he believes no matter what for fear of new things, I just hope the rest of you out there aren't either.

Efficient image preloading in JavaScript

2009-06-06T18:43:00.016+02:00

What is image preloading?

Image preloading is loading images into a browsers cache, before the user requests to see a certain image. By doing this, you avoid making the user wait those extra seconds to see the picture he/she wants to see.

In effect, the images will be downloading in the background and saved in the users' cache. On one hand, the user will get to see the images as soon as he/she clicks the image, on the other hand you're making the user download all images, whilst they may not be wanting to see all the pictures, which means you've not only used up their bandwidth, but your own too. If you're on a tight budget, take into account that implementing this technique will make every single page load every single image of the folder the user has requested.

And than there's the text files, which also get bigger, since you need to preload all those images.

How do you do it?

The amount of code needed is very small.

var preLoad = new Image();
preLoad.scr = "URL/to/file";

Once you've done that, you're done. No need to put inline JavaScript in your HTML to switch sources and such. The reason for that is that by preloading, JavaScript will save the image to your cache. Upon next requesting it, your browser will first check the cache and find it there, and instantly display it on screen.

The only hard part is that in pure JavaScript, removing an <img /> tag and creating a new one, with the correct attributes, can take up to 10 lines of code, for 1 image.
I recommend using jQuery instead, which allows you to simple do this:

$('#ID of whatever triggers the call for the next pic').click(function(){
  var img = $('<img>').attr('src', '/link/to/correct/image/');
  $('#ID of the element containing the img tag').html(img);
});

Three lines of code, which can be used over and over to put a new pic in the same spot.

Trouble with multiple images

If you're going to be preloading multiple images, beware for 2 things:

The users' cache size limit. Very unlikely, but you never know.
Make a new Image() object for each image.

The 2^nd on is pretty important. Here's an example:

var preLoading = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < preLoading.length; x++){
    image.src = preLoading[x];
}

If you use this implementation, only the last image in the array will be preloaded. You can see an implementation of that here:
http://www.rootspot.com/stackoverflow/preload.php.

When the site finished loading, click the second image. It will become visible immediately. However, the first image will have to be downloaded. It's a pretty big file, so no matter your connection speed, you should be getting this.

The correct code is:

var preLoading = ['image1.jpg','image2.jpg'];
for(var x = 0; x < preLoading.length; x++){
    var image = new Image();
    image.src = preLoading[x];
}

I have no example of it, but anyone with a bit of coding experience should see why this works.

Credits

Thanks to the guys at Stackoverflow who had already worked this out:
Link 1 and Link 2.

It looked interesting and I felt like making a blog about it.

XHTML versus HTML

2009-05-21T00:30:00.020+02:00

I recently set out to check HTML5 vs XHTML2 a bit.

Here's a nice comparison: XHTML 5 Versus XHTML 2.

It's a nice article, simply listing the new things about XHTML2 and HTML5. No opinions on which of the two is better.

Beginnings

When I first started studying web development, we were taught to use XHTML 1.0, later XHTML 1.1

Our course gives a reason for this:

Not picking a standard is not an option, unless you want to start coding in a manner that will put you out of a job in a few years. So HTML or XHTML? Since the step from HTML to XHTML is a small one, it's best to choose XHTML.

So we went for XHTML. And learning XHTML and comparing it with HTML4.01 tells me that XHTML is cleaner. Every time I see attributes without quotes, I feel a little uncomfortable. Same for unclosed tags or tags with capital letters. I just liked XHTML and the strict rules if offered more than the easy going, not-caring-about-errors HTML I came across on the internet.

The course in question was written in 2006. Today is 2009 and things have changed more than anyone could have thought possible 3 years ago.

With Firefox 3.5 implementing the <audio> and <video> tags, IE finally mastering the ACID2 test with IE8 and Opera 10 almost arriving, the landscape of web browsers and the syntax of websites has taken a turn in a different direction.

The present

XHTML is no longer the future of web development. And as it turns out, it never was to begin with. Yes, too bad for XHTML.

Why was it never that, you may ask? Very simple: not a single browser has ever properly implemented it. You heard me: XHTML was never properly implemented by the web browsers.

You might be saying: "But I coded everything in XHTML and the W3C validator says it's fine and the site is displayed correctly".

Well, that's all good and well, but your XHTML is being treated as if HTML. You see, XHTML is actually HTML + XML. Adding XML to HTML was supposed to bring flexibility and loads of powerful extra options to websites. So XHTML was born. Let's look at this next website shall we?
HTML+MATHML+SVG

Using XHTML, we added together HTML, MathML and SVG. Is it W3C valid? You bet ya!

Try pressing CTRL+U. You now have the source code of that page.
Make a new HTML file, paste the sourcecode in there and try viewing it in your browser. You'll notice that you're not getting the same result.

The reason for this is pretty simple: XHTML has to be interpreted, meaning that it has to be given to your web server, and the webserver must then give the proper information to your browser, in order to correctly display what you want to be shown.

Getting it to work

So in other words: you have to set up a server.
I happen to have Apache 2.2.11 installed. So I went to the httpd.conf file and added this line of code, which is necessary:

AddType application/xhtml+xml .xhtml

.
I saved the code to a file named test3.html under my htdocs folder, so I started my browser and entered this URL:

http://localhost/test3.html

.

And you guessed it: It works! (Yes, pun intended)

Get the full article here: Beware of XHTML

Conclusion

As a developer, you can't go without a server, so you'll probably have one.
And in modern web development, there are so many apps to do fancy fonts and mathematical representations for you, that almost nobody uses MathML. SVG is a little more popular, but still insignificant in amounts.

My conclusion is that for each task, you need different tools. Depending on what site you have to work on, you might come across things like this, and if you don't know how to handle it, the customer will simply go elsewhere with his/her money.
Looking into this subject was pretty fun, since it helped me see that web development goes way beyond "HTML vs XHTML".

So in the future, I'll be using HTML5 doctype whenever I can, and XHTML when needed. That seems like a good plan.

Absolute positioning within relative, the victory of the box model.

2009-04-29T19:44:00.007+02:00

I found this at Stackoverflow, whilst looking through posts on CSS.
It shows how to use absolute positioning within relative positioning.

The W3C describes the effect of

position: absolute;

as:
An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

Let's focus on an important detail of that text: relative to its containing block.

This "block" is the "box" from the "box model".
So, let's look at some boxes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Boxy Boxes in a Box</title>
    <style type="text/css" media="screen">
    #container {position: relative; margin: 100px auto; height: 175px; width: 175px;}

    .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}

    #box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
    #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
    #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
    #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
    #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
    #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
    #box_7 {top: 70px; left: 70px; background-color: white;}
    #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
    #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
    </style>
  </head>
  <body>
    <div id="container">
      <div id="box_1" class="box">1</div>
      <div id="box_2" class="box">2</div>
      <div id="box_3" class="box">3</div>
      <div id="box_4" class="box">4</div>
      <div id="box_5" class="box">5</div>
      <div id="box_6" class="box">6</div>
      <div id="box_7" class="box">7</div>
      <div id="box_8" class="box">8</div>
      <div id="box_9" class="box">9</div>
    </div>
  </body>
</html>

Al you need to do is copy this, paste it into a fresh HTML document and view it in the browser.

It's a pretty funny sight and show the power of the CSS boxmodel. Enjoy

Angry at Thumbs.db

2009-04-11T21:12:00.007+02:00

Something other than web development this time.

Every now and then I find Thumbs.db files all over my hard drive. I find it rather annoying.

Thumbs.db files are used by Windows to store thumbnails, which make sure that if you look at your folder containing your vacation pictures again, the thumbnails are loaded immediately instead of Windows having to generate them again and again.

While this is useful for some people, for others it is not. My view settings are almost always on "details", meaning I don't need these thumbnails.

There is a way to disable them, by selecting "do no cache thumbnails" in the folder view options. Being an ICT student though, that's not good enough for me.

I once came across a BATCH command which claimed it would delete all Thumbs.db files on your drive. I tried it out and it appeared to work, but something tells me the original poster doesn't know what "hidden" files are.
Many Thumbs.db files are in fact hidden. Hidden files can only be viewed when you select it in the settings.

So I modified it a bit and here's the result:

del /s /q /f /a:h Thumbs.db

So, in steps:

Click start, click Run
enter the letters "cmd"(without the "") and press enter
The dosbox will appear, enter the command
```
cd \
```
and press enter. This will take you to the topmost map on your harddrive
Enter the above command and press enter. This will take a while, depending on how large your harddrive is.
If you have other drives you want to sweep like this, you can go to those by entering a command. Suppose the other drive is labeled E, type
```
e:
```
and press enter. You will have switched drives and now you can execute the command again.

I posted this command on my Snipplr account too, you can find it here: http://snipplr.com/view/13464/remove-all-thumbsdb-files/.

Hope this was helpful.

PHP and ASM (Assembler Language)

2009-04-06T22:39:00.008+02:00

NOTE: what I'm about to write here is only possible for PHP 5.3 and up.

I've mentioned before that I'm still a student and that means I'm learning new things.
So I was browsing along the PHP documentation and I found something of which I wonder why it was implemented in the PHP language.

For those of you who've programmed ASM in the past, this will look familiar.
Pulled straight out of the online documentation:

<?php
goto a;
echo 'Foo';
 
a:
echo 'Bar';
?>

The output will be

Bar

.

You can read the online documentation for this here: http://be2.php.net/manual/en/control-structures.goto.php

The moment I saw this, I was reminded of the 3 months I got some classes on ASM programming. Using loops and stuff, going back and forth between these declarations with these simple 'goto' statements.

I came across a blog post from way back in 2004, when "adding goto to PHP" was apparently a discussion.
Link: http://www.procata.com/blog/archives/2004/07/29/goto-in-php/

So, PHP is adding this to the language... why?
Almost the entire programming world agrees on the statement that "goto is dangerous".

When I first saw this, I thought: "hey, this might make things easier in PHP-land."
But after reading a few articles and thinking about it a bit, it will probably make things much, much harder most of the time.

So I'm turning this post into a question: why did PHP bother to add this deprecated statement to the language?

The different ways of doing something

2009-03-23T14:26:00.020+01:00

My previous blog was about Google Maps and how I implemented it.
I did this the way the online documentation showed me how to do it: with pure JavaScript.

A fellow student of mine, Lester, contacted me on how I implemented Google Maps and showed me how he did it.

Apparently, he'd come across a PHP library that makes the work a lot easier. I've experimented with it a bit and it has some nifty features.

You can view the source code here: http://www.phpinsider.com/php/code/GoogleMapAPI/

And view a nice demo here: Demo.

First, a non-coding related complaint: why is it only available as a tar.gz download?
I don't work on Linux all that much (which I hope to change soon, but still), so a zip file would be nice.

Now about the coding, it requires a minimal amount of php code. All you have to do is require the API, set your Google Maps key, and then you can start working. An example:

$map->setAPIKey('my key');
$map->addMarkerByAddress('Address 1','Name for address 1');
$map->addMarkerByAddress('Address 2','Name for address 2');

You'll have to fill in a real key and real addresses offcourse.

Not using a template here, so in your HTML, you'll find this:

<head>
  <?php $map->printHeaderJS(); ?>
  <?php $map->printMapJS(); ?>
</head>

And to finally implement it:

<body onload="onLoad()">
  <?php $map->printMap(); ?>
  <?php $map->printSidebar(); ?>
</body>

And we have ourselves a working Google map.

I did it a bit differently, I made a small .gif file to demonstrate how my own implementation works, you can view it here: Link.
As you can see, the scrollbar is at the bottom. When I click the link above the map, the route description between the 2 addresses shows up.

What I miss in the API is the ability to plan a route between 2 points. I can't tell it to make a route, like I did in my implementation.

Also, this API has a function to calculate the distance between 2 points. It does so by using the geocoordinates of those points. In other words, the calculated distance will be in a straight line from point A to point B. It's related to this.

Personally, I would prefer to know the distance I have to drive or walk from point A to point B instead of how far it is in a straight line.

But other than that, it's a nifty little library.

Learning to use google maps

2009-03-13T13:19:00.016+01:00

Today, I programmed something in Google Maps for the first time.
I pulled out a few hairs and all that, but it all worked in the end.

What I have on my hands is a site where it is mandatory to enter your address.
So when you're viewing someone's profile, a Google Map appears and you immediately see a route on the map from your place to theirs. I do this via PHP, the profile address pulled from the database and the address of the viewing person from a cookie.

The code I ended up with is a bit different from the example code you'll find on the documentation pages, but I find it to be shorter and much more to the point.

I'm posting it here so others can learn from it and I have a place to post it and can come back to look at it should I ever need it or Google Maps in general again.

Note that the XHTML version is 1.1, which is why I'm using CDATA tags.

I put this directly in my HTML, in the head block.

<script type="text/javascript">
 //<![CDATA[
 var map; 
 var directionsPanel;
 var directions;

 function initialize(address1,address2) {
   if (GBrowserIsCompatible()) {
     map = new GMap2(document.getElementById("map"));
     //that slider zoom thingy
     map.addControl(new GLargeMapControl());
     //a scale, showing the actuall distance
     map.addControl(new GScaleControl());
     //allows you to choose between normal map, sattelite...
     map.addControl(new GMapTypeControl());

     //the route description 
     directionsPanel = document.getElementById("route");
     directions = new GDirections(map, directionsPanel);
     directions.load("from: "+address1+" to: "+address2);
   }
 }
//]]>
</script>

And then somewhere in your XHTML document you'll need these:

<span>Google map:<a href="#" id="showroute">Click for route description.</a></span>
<div id="map"></div>
<div id="route"></div>

What'll happen is the div with ID "map" will be used to contain the actual map and the div with ID "route" will get the route description.
I used a separate CSS document to make sure it's not displayed automatically.

Then I made a little JavaScript document to display the route description upon clicking that anchor:

function loadEvents() {
  var toon = document.getElementById('showroute');
  var route = document.getElementById('route');
  toon.onclick = function() {
    route.style.display = 'block';
    return false;
  };
}

That's the code, now to get it all to work, I simply wrote this at the bottom of the XHTML page:

<script type="text/javascript">
if(document.getElementById) {
  initialize({ADDRESS1},{ADDRESS2});
  loadEvents();
}
</script>

And that's what made it work.

Minifying CSS

2009-03-08T23:25:00.014+01:00

I announced it in my previous post: Minifying code.

So here it is, a summarization of my CSS code minifying tricks.
Please note that you should not make your code unreadable while editing it. It's probably best to have a separate development environment apart from the servers where your code is actually downloaded from. That way you can work on a normal location and when you're done, you minimize your code and transfer that file to the actual server.

So here are some tricks I use:

Color code

A web browser can interpret the values you give to color declarations in many ways.
For instance:

color: #44FF66

Can be turned into

color:#4F6

And it's limited to that. You can't turn

color: #44F2F2

Into

color: #4F2F2

It needs to be either 3 or 6 numbers.

The last semicolon

The last semicolon in a CSS code block is not needed.
Example:

h5 {
padding: 5px;
border: solid 1px blue;
line-height: 20px;
color: green
}

Notice how the color declaration has no ; symbol after it. That's because it's not needed. The reason for that is that it's the last declaration within that code block. Also, if there's only 1 declaration in a block, then it doesn't need a semicolon.

Putting sub-attributes together

I've done this already in the piece of CSS code right above this topic:

border: solid 1px blue

What I've done here is taking a few sub-attributes of the border property and put them together.
What would normally take 3 lines of code:

border: solid;
border-color: blue;
border-width: 1px

And turned it into a single line:

border: solid 1px blue

The order is of no importance here. I could just as well put "solid" after "blue". You can even write

border: blue;

Instead of

border-color:blue;

You can do this with all attributes that have sub-attributes I think. I don't know all of them, but the background attribute is another example of putting sub-attributes together.

Margin and Padding(and border too)

When declaring how many pixels, points or em values your padding, margin or border is, you can use the "shorthand" notation to save on keystrokes. Be careful, if you do this with borders, then you won't be able apply the sub-attribute trick anymore. You'll have to enter every value separatly.

Here's something I see often:

margin: 40px 40px 40px 40px

This is a waste of space. You're saying all 4 directions are to be given 40 pixels, which doesn't require that amount of code at all.
It can be done with:

margin: 40px

This is saying all 4 directions are to receive that amount.

That long notation declaring a distance 4 times works as follows:

MARGIN: TOP RIGHT BOTTOM LEFT

How do I remember? It's the same way clocks rotate. At 12, the long arrow points to the top, as it turns it'll point right, then to the bottom and then to the left.

You can also do this:

border-width: 8px 5px 2px

This is: TOP, RIGHT and LEFT, BOTTOM.

And finally, there's this:

margin: 15px 2px;

This is: TOP and BOTTOM, LEFT and RIGHT.

That's it for me. See any errors or know some tricks I don't? Feel free to let me know.

Minifying code

2009-03-08T22:44:00.016+01:00

To put their website online, people will usually apply for online web space. Up to a certain amount of megabytes, this is usually free. When you pass that amount, you have to pay real money for it. But you also have to pay for used bandwidth.

Now, for those of you who don't know what bandwidth is, I'll just say it's a measure for the amount of data your server(s) have received and have sent. This is usually monitored monthly.

Let's say you can afford 1000 dollar per month. Nice round number.
Let's say that gets you 4 Terabytes per month. Just picking a random number, I realize it's probably not very realistic.

Now for the past couple of months, you've seen the used bandwidth per month go for that 4 TB and now suddenly, your worst nightmares come true: your site has used more than the 4 TB you pay for.
For those who have no experience with this: 4 TB of data per month is a decent amount, a very decent amount.

So how does this involve web development? It's as follows:

I've already explained how bandwidth is measured by how much data is sent from and to server(s). This includes the files web browser needs to display your site.

These files are usually, but not limited to, HTML files, CSS files and JavaScript files.

You type in a URL, your browser send the request and the server that has those pages will receive it, read it and send you the pages you need. These pages have a certain size, usually several megabytes if your site is content-heavy.

So that adds to your bandwidth. And you want to keep that bandwidth usage as low as possible.
So in other words, you want to shrink the file size of those files.

The size of any text file is determined by the amount of characters in it. This is everything in it. Spaces, end of line statements, newlines, literally everything.

Here's a CSS example:

* {
 font-family: Verdana, Arial, sans-serif;
 margin: 0px;
 padding: 0px;
}

This is some nice, readable css, perfect for editing while you're working on your website.

I'm counting the following:

5 spaces
4 newlines
3 tabs

Question: Does the browser need these to properly interpret the code?
Answer: No.
Conclusion: Waste of bandwidth!

You might be saying: "who cares about a couple of spaces, some newlines and a few tabs"? The answer is, very few people do, but a lot of people (developers and owners of sites that get loads of traffic) should.

Here's the minified code:

*{font-family:Verdana,Arial,sans-serif;margin:0;padding:0}

Difference? 22 bytes.

Big sites have big files, so this small piece of CSS code is less than 1％ of a real file for a site that goes over 4 TB.

You don't need to be a math genius to realize that the saving on bandwidth can be very significant if you practice minimizing your code. Not only for CSS, but for your JavaScript too, and for all other text files. You might even go as far as stripping metadata of pictures displayed on your site. It all depends on how far you're willing to go.

For those of you who are wondering how, check this lifehacker post: http://lifehacker.com/5149327/jpeg--png-stripper-removes-the-metadata-from-your-images

I realize this has been a long post, so I'll make a list of CSS minimizing tricks I know in the next post.

First post

2009-03-08T22:01:00.001+01:00

Hooray, my first post.

I've decided to keep this blog here as a sort of way to post about stuf that probably nobody will read. :P
I'll be posting about webdevelopment, mostly the coding in (X)HTML, CSS, Javascript, PHP and other related stuff.

And please note that Webdevelopment ≠ Webdesign. Webdesign is thinking about and creating the looks of a site. It's usually done in Photoshop or GIMP.
Webdevelopment is the coding that makes a website actually work.

And in general, designers are lousy developpers and developpers are lousy designers.
People who are good at both are usually called "diviners".

Sometimes my posts will be informative, other times it'll be ranting about stuff that gets on my nerves(regarding web developpement).

Please note that my native language is not english, it's dutch. Still, I like to think my english is pretty good and since the web is mostly english, I'll be using english to blog here.

Somuch for introductions, let's try making a second post about something actually usefull. And when I say usefull, I don't necessarily mean to web specialists. I am no specialist, I am a student. I'll be writing about the stuff I come across in my projects and on sites I visit and about my research.

So you might think I'm posting about things that are childishly simply, but you might just be a developper with decades of experience. Students reading this might find stuff usefull that you allready know, and I'm not gonna spend time limiting myself like that.