Top posts
Latest articles
Testing for mobile devices
As you might know this blog is also available through an own developed mobile edition, at http://m.narnio.com. It’s based on a plugin that I developed. But how do you go about with the testing for mobile platforms, when you don’t have all of them.
I mean who has the money to buy every possible phone out there, or every tablet. Well there are some ways to do this without having all of the devices. Here is a short list:
- Run it through the validator at http://validator.w3.org/mobile/
- Use a simulator for testing like:
- Doing a simple resolution check, for IE this can be done by hitting F12 and selecting Tools -> Resize
- Checking the load times on different connection speeds, using Fiddler 2 by changing Rules -> Performance -> Simulate modem speeds
So what are resolutions to check for with mobile devices, well here is a short list.
- 480 x 800 (default Android 1.5 – 2.2)
- 540 x 960 (newer Android phones 2.3.3)
- 640 x 960 (iPhone4)
- 1280 x 800 (various Android 3 tablets)
Using Ajax in your website
(1 votes, average: 3.00 out of 6)
Loading ...I noticed something when I went through the posts I created on this blog. I have been raving for and against Ajax in several posts. Ranging from whether or not you should include Ajax for usability, how to work with Ajax in combination with forms and my personal favorite if you should use Ajax at all. Please keep in mind that this last post is really old already and probably a bit outdated.
Looking through all of these posts I noticed that even though I talked quite some bit about Ajax I never actually gave any examples of how to implement it. So today I will correct this mistake 
A simplified explanation of what Ajax is
It’s probably best to first give a very brief explanation of what Ajax is and how you could use it to create more dynamic and user interactive web pages. So what is Ajax actually. Well in a nutshell it’s a JavaScript implementation of communicating between the browser and the web server without having to reload an Internet page.
You can create a good impression of how it works by thinking about this as follows. In an traditional website each action a user takes will cause the browser to call a page on the web server. The web server then generates the full HTML for that page and returns it to the browser. This is visible to the user as the page they are looking at will ‘refresh’. Ajax is a technique to call the web server without reloading a page or redirecting to a new page. Hence fetching new content to an already displayed page in the browser. See the image below for a graphical overview of the communication between the browser and the web server during a typical Ajax call.
This gives you the change to greatly enhance your existing website with new features. Loading in content area’s on the fly. Submitting forms to the server without having to redirect the user, you name it and you can do it with Ajax. There are some limitations, but most of those are covered in my initial articles on this blog.
Multiple browsers, multiple problems
One of the first things I should probably try and explain is that every browser seems to have a different way of implementing the Ajax object. On its own this is not a big issue, but you need to keep track of this fact when you build some form of Ajax functionality in your website.
So creating the Ajax object needed to perform these calls to the web site has to be done with some try and catch work. Below is an example of how to create the Ajax object, supported by most of the popular browsers. In the example we first try and create the Ajax object for the Internet Explorer, which uses ActiveX objects.
try
{
// try to allocate the ActiveX object used by Internet Explorer
this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
this.xmlHttp = false;
}
}
if (!this.xmlHttp && typeof XMLHttpRequest!='undefined')
{
// fallback for Firefox and other Mozilla based clients
this.xmlHttp = new XMLHttpRequest();
}
After executing this code (keep in mind it is JavaScript so put it in a script block in the HTML) you should have the Ajax object available in this.xmlHttp. It may be useful to know a little more about the object functions before continuing the example. The Ajax object has the following functions:
- .status,
returns the current status of the page. This is after the result is returned from the web server. (Status 200 is good) - .responseText,
contains the result that was sent by the webserver after the url was called - .open(protocol, url, asynchronized),
will open the connection to the web server and start the call - .onreadystatechange,
the event that gets triggered by the Ajax object during the call to the webserver. This will be called multiple times, especially in Internet Explorer. (Possible status: 2 = busy, 4 = done) - .send,
send the request to the server and wait for the result (or not if asynchronized call was selected)
A basic call to the webserver
After initializing the Ajax object you can perform any call to the webserver you’d like. The example below will show you how to open an web page and display the result into a message box. What the content is that is returned is not relevant for the functioning of the example.
this.xmlHttp.open('GET', 'http://www.example.com/page.html', false);
this.xmlHttp.onreadystatechange = function()
{
if (self.xmlHttp.readyState == 4)
{
alert(self.xmlHttp.responseText);
}
}
this.xmlHttp.send(null);
As you can see this is a very basic example, but it does show exactly how to use the Ajax technology. You can apply this logic for loading in new content on the fly, or just preloading some stuff.
Speeding Apache up using Compression
(No Ratings Yet) Loading ...As of late I started to notice my little VPS server had more difficulty keeping up with the amount of data it has to sent to the webbrowsers. I knew that the amount of requests increased and after some tracking I found out that the average page size also increased.
Keep in mind the average page size is not only the size of the HTML but also adding the external CSS, JavaScript and images. Which could dramatically increase the amount of data the users are downloading. So I started looking in the compression options of Apache 2.0
First I looked on the official Apache page, but as usual the data is probably available but not very user friendly. So after some testing and crashing I found out the following procedure which seems to work fine to enable compression per Virtual Host.
Firstly enable the module that supports compression by executing:
:> ln -s /etc/apache2/mods-available/deflate.load /etc/apache2/mods-enabled/deflate.load
This will instruct Apache to load the needed library (module) for compression using GZip. The second thing you will need to do is add the following lines to every single Virtual Host you want to use compression on.
<Location / >
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</Location>
This will enable the compression for output (everything sent to the end-user) but not for incoming requests, which in my case is enough compression for right now. It also exludes some browsers that do not support compression.
Now restart or reload your apache by running the statement below and your website should support compression. This will make the loading of pages faster, though the client software needs to decompress the pages from this point on.
:> etc/init.d/apache2 reload
If you have any trouble enabling compression just leave a message and I’ll try and help you where I can.
Google found a way to crash Internet Explorer
Ok today I came accross something really weird. I was trying to find information on setting up my own mail server using PostFix. No problem really, just used Google search to find the information.
The strange crashes started happening once I found a page that didn’t contain the information I needed and I hit the back button. Every single time I did this Google crashed my tab with some type of cross scripting warning. Even when IE tried to recover the tab it crashed again. After the second crash IE just said, slightly paraphrased, ‘f*ck it the website keeps crashing go somewhere else instead!’.
So here is the steps to reproduce (as it crashed every single time):
- Use Internet Explorer 8
- Have multiple tabs open, I had at least two in a google search result
- I was logged into personalized search, don’t know if it is relevant but hey you never know
- Click on of the search results
- Hit the back button, or the backspace key
- Presto crasho.
Always fun to see how some javascript can crash a Internet Explorer tab. I am at least presuming it is caused by javascript.
Upgrading my VPS to Debian Etch
You might have noticed it yesterday, or not . But my blog and several other websites hosted by me went offline yesterday for a couple of hours. Well this had to do with me upgrading the VPS to Debian Etch.
So far I ran every website on Debian Sarge, and though it’s stable they choose to no longer developer for it nor support it. So it was time to move to a newer version. Wich I did yesterday. Here’s some of the steps you should take before upgrading to the next version of Debian.
- Make a full backup of any website’s / databases / scripts running (don’t forget your crontab and logrotate files)
- Copy the backup to a directory not affected by the upgrade. In my VPS the provider has one folder which will be left untouched, but also pull the backup to a local system (just in case )
- Notify any other users also using your server, don’t want any suprises to potential paying customers.
I was lucky that my hosting provider offers an easy way to upgrade or reinstall a Linux distro on the VPS. Just a couple of mouse clicks and they prepare the VPS for the installation. Please note that this will take up to an hour to complete. Once this base installation is complete you will want to perform the following steps:
- Un rar the backup of the websites / conf files and scripts (tar xf <tar name>) and move them to the right location.
- Setup the proper user account /groups to have access to these files (or your users won’t be able to upload or change the website’s any more)
- Install apache / PHP and mysql by running the following command:
apt-get install php5 mysql5-server apache2 mysqllib - Setup the apache conf file to load in your restored conf files (eg: Include /export/conf/apache/*.conf)
- Replace the mysql my.cnf with the one you backed up previously
- Enable the rewrite and ssl modules of apache (I forgot and got some upset calls
)
From this point on your ready to go. All of the websites should be running without any problems. You do need to configure any other tools you had installed, like AWStats / Subversion or anything else. Though these should not require to much configuration as all of the configuration files where included in your backup. At least if you followed a setup similar to my first article on setting up linux.
