Reset your CSS

css_logo

I had an issue with CSS today and it was difficult to figure out what exactly what was going wrong. A great way to avoid this is to reset everything before you start.

A good way to do this is to use a preset reset such as the Yahoo UI reset or the Eric Meyer reset.

While these resets are very comprehensive often it feels like you reset everything, only to then redefine a lot of properties on the elements. Eric Meyer recommends that you should not just take his reset stylesheet and drop it in your projects if there is a more effective way of using it. Tweak it. Build upon it. Customise, and make it your own.

Perhaps it could be something as simple as removing padding from the elements:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Using isset() instead of strlen()

php-logo

When you treat strings as an array, each character contained in the string is actually an element in that array. By determining whether an element exists you can determine whether the string is at least that many characters long. (Obviously the first character is element 0, so $username[7] is actually the eighth character in $username.)

This is slightly faster than strlen() however the reason is somewhat more complicated. Essentially whilst strlen() is a function, isset() is actually a language construct. Calling a function is generally more expensive than using a construct.

Determining PHP script execution time

php-logo

Today I needed to quickly determine how long a script was taking to execute. Whilst a dedicated class could offer a lot more (including milestones) I needed something to do a quick ‘sanity check’ on a script. Heres how I did it:

function determinetime_float()
{
list($utime, $time) = explode(” “, microtime());
return ((float)$utime + (float)$time);
}

$script_start = determinetime_float();

Put the above at the top of your page, and put the below at the bottom of your page:

$script_end = determinetime_float();
echo “PHP script executed in “.bcsub($script_end, $script_start, 4).” seconds.”;

So, – whats happening?
PHP’s microtime() function gives the current timestamp in microseconds (we need this level of precision for script execution time). However microtime() returns a value like 796374521.15534500, when what we really want is 0.15534500 796374521 (The 0 is removed from the decimal section and added on to the integer). We use the above function to take care of this.

PHP5 date() Function

php-logo

Whilst migrating a clients website to a new server today I came across an unexpected error:

Strict Standards: date() function.date: It is not safe to rely on the system’s timezone settings. Please use the date.timezone setting, the TZ environment variable or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. (etc)

Well, if you are on shared hosting you most likely do not have access to the php.ini file in order to set the timezone.
Instead head along to your .htaccess file and add the folllowing line:
php_value date.timezone [your_zone] where [your_zone] is found from the link here

PHP 5 Mailer Class

phpmailer

I spent about a day creating a basic mailer class until I decided that there had to be a much better implementation created by a third party. Whilst it was interesting to have to iron out the bugs in the examples I found on the internet ultimately I wanted a solid, secure platform for both myself and my customers. There are a lot of code snippets on the internet that just are not up to the job…

So, the one to use is PHPMailer from Codeworx Technologies. Find their link here and access the script from their SourceForge page

For reference my functional example is located here
Let me know if you require a more detailed explanation of how it works.

Update: this page has been getting a few views, so it is obviously something that people are interested in. As of this edit (20/05/2010) the version is 5.0.0.0

Features include:

  • Supports emails digitally signed with S/MIME encryption!
  • Supports emails with multiple TOs, CCs, BCCs and REPLY-TOs
  • Works on any platform.
  • Supports Text & HTML emails.
  • Embedded image support.
  • Multipart/alternative emails for mail clients that do not read HTML email.
  • Flexible debugging.
  • Custom mail headers.
  • Redundant SMTP servers.
  • Support for 8bit, base64, binary, and quoted-printable encoding.
  • Word wrap.
  • Multiple fs, string, and binary attachments (those from database, string, etc).
  • SMTP authentication.
  • Tested on multiple SMTP servers: Sendmail, qmail, Postfix, Gmail, Imail, Exchange, etc.Good documentation, many examples included in download.
  • It’s swift, small, and simple.

Scriptaculous list sorting with AJAX callbacks

sorting

An outline of what we are trying to achieve:

  1. Populate list values from a database and render them onscreen
  2. Use JavaScript to setup the sortable items 
  3. Add a JavaScript callback to the drag/drop pointing to a serialising function to send an AJAX request to the server
  4. Create a server-side script that loops through the list updating the database with the new order

You will need the prototype library: http://prototypejs.org/
And of course the Scriptaculous library: http://script.aculo.us/downloads

To enable this methodology there are several files:

  • test.php – contains the list and necessary JavaScript
  • request.php – necessary to processes our AJAX request
  • db.inc – a database class that is included in both index.php and request.php to make the connection to the DB and has methods to get the current list and to update the list
  • Click here to download the necessary example files.

    test.php

    JavaScript: the call to Event.observe tells the browser to call the init function after the page loads. The init function creates a new sortable list on the listContainer element, setting all divs within it to be sortable and setting the updateList function as a callback whenever the list is updated. This means that when the order of items in the list change, this function will be called with the list element passed as an argument. This function will perform the AJAX request to update the database.

    The updateList function sets a variable for the url used during the AJAX request before it calls Sortable.serialize passing the container ID as an argument to serialise the list to a format such as listContainer[]=5, listContainer[]=7, listContainer[]=2

    The first three items of the list would be the items 5, 7, and 2 and the divs representing these items would have the following ID values: item_5, item_7, and item_2. This serialised list is set in the variable ‘params’.

    Next an AJAX request is opened using Prototype’s Ajax.Request class. It is called with two arguments: the URL and an object with various options. The options include the type of request (POST in this example, parameters to pass the params variable and two functions (onLoading/onLoaded) that handle the showing and hiding of the ‘Updating database…’ div.

    Normally in an AJAX request you would also add a callback for onComplete to handle the response from the server, but in this case the AJAX response doesn’t really matter because it is a one way communication in this demo. In a real application you would have more error handling and would need to correctly handle error conditions.

    At the footer of the file there is a div with the ID ‘containerDiv’ which is the container for our list. Within this is some PHP that loops through an associative array and prints out each list item as a div with ID ‘item_10’ where 10 is the ID for that record in the database.

    request.php

    This file begins by calling session_start() to send the right http headers to prevent the file from being cached. Next it instantiates an object and calls the updateList method passing the listContainer variable from the POST request (containing our serialised list).

    db.inc

    This is a simple db class that connects to the database and has methods to get and update the order of the list. In a ‘real’ application you should have a much cleaner implementation of the database access and would use other DB libraries to connect.