Simple Web 2.0 Design and CSS Tutorial

This tutorial aims at teaching you how to make a simple “Web 2.0″ design.

Download Tutorial Files

View Final Design Read More…

Posted in CSS, Photoshop at March 17th, 2008. 12 Comments.

Online .htpasswd Generator

Use the following .htpasswd generator to secure your Apache web directories.

Make sure you have a .htaccess and .htpasswd file in the directory you want to secure, then add the entries once you’ve generated your password.

Posted in .htaccess, Apache, Tools at March 7th, 2008. 2 Comments.

Online MD5 Hash Generator

Here is a simple MD5 hash generator I created quickly as part of a useful toolset I’m planning to build up.

The code to generate an MD5 hash using PHP is simple:

md5($string_to_convert);

Posted in Tools at March 7th, 2008. 12 Comments.

Top 10 .htaccess Tips and Tricks

Custom Error Documents

Creating custom documents gives your site a more professional look, as not only are you providing a ‘net’ to catch unsuspecting visitors when they follow a bad link and such like, but they also allow you to customise the style of the page so you can maintain your basic site design by adding HTML.

# custom error documents
ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php

Control Access

Being able to control access to certain areas of your server can be very useful. The following example demonstrates how to only allow access from those connecting from a 192.168.0 LAN IP pool. This could be easily modified to only allow access from a single remote IP address or addresses.

# no nasty crackers in here!
order deny,allow
deny from all
allow from 192.168.0.0/24
# this would do the same thing..
#allow from 192.168.0

Hide and Deny Files

Hiding and denying access to files is crucial to servers that have sensitive data held within files that may be accessible via the website(s) on it. The following example demonstrates how to prevent acces to any files ending with .log – and is case insensitive (i.e. .LoG / .lOG / .loG).


 Order allow,deny
 Deny from all
 Satisfy All

Basic Rewriting

I have written a mod_rewrite tutorial, but this is worth a mention as a top 10 tip for .htaccess files as it’s becoming more and more commonly used these days – primarily for SEO purposes.

This example will redirect a request for http://edrackham.com/page_one.htm to http://edrackham.com/page_one.php. The r=301 tells apache to send a proper HTTP Permanently Moved redirection (301), which will update the address bar in the browser window to show ‘page_one.php’. Without this, you’d still see ‘page_one.htm’ even though you’re seeing a PHP page. This helps SEO, as spiders and search engines will update their listings to reflect the PHP versions.

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(.+)\.htm$ http://edrackham.com/$1.php [r=301,nc]

Shorter URLs

Shorter URLs are beneficial, as visitors that persist in typing full URLs won’t have to type as much, and they’re more memorable. Do they benefit SEO, even though the full URL contains the same keywords? I don’t know, maybe someone can tell me.

This example will rewrite a page requested as http://edrackham.com/files/code/apache.zip to http://edrackham.com/download.php?type=code&file=apache.

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^files/(.+)/(.+).zip download.php?type=$1&file=$2 [nc]

Prevent Hotlinking

Preventing hotlinking can reduce bandwidth, by disallowing other websites from displaying images hosted on your server. The following rule basically says that if the referer is NOT edrackham.com, run the following rule. The rule (on the next line) says that if the request is for a .gif, .jpg or.png then redirect the visitor to http://edrackham.com/img/hotlink_f_o.png. I’ll leave you to work out what the ‘f_o’ stands for.

Options +FollowSymlinks
# no hot-linking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?edrackham\.com/ [nc]
RewriteRule .*\.(gif|jpg|png)$ http://edrackham.com/img/hotlink_f_o.png [nc]

Hiding Page Extension

Similar to the mod_rewrite code above, this will redirect a request for product-3.html to products.php?id=3. As we’re not using r=301, the requested page will remain in the browser’s address bar.

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^product-([0-9]+)\.html$ products.php?id=$1

Ban Selected User Agents

In my opinion, it’d be ace to block all requests from a Microsoft user agent, but alas, that wouldn’t be too cool as some people are still hell-bent on using a non-standards compliant browser. Having said that, Microsoft is making their new IE8 release standards compliant by default.

The following provides some examples for blocking requests to your server from certain user agents.

#####################################
# Deny Useragents
#####################################

RewriteCond %{HTTP_USER_AGENT} ^FrontPage [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Java.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Microsoft.URL [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^MSFrontPage [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline.Explorer [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^[Ww]eb[Bb]andit [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Zeus [NC]
RewriteRule ^.*$ - [F]

Making Other Filetypes Executable

Ever wanted to make your site look like it runs off a new language such as .w00t files? Well you can with .htaccess! Adding this neat one-liner, you can request .w00t files, which will be served and interpreted as .php type files.

AddType application/x-httpd-php .w00t

Force Media Downloads

Sometimes, when clicking on media files, the browser wants to play or stream it directly from itself. Using the following rules, media files (.avi/.mpg/.wmv/.mp3 in this example) will provide a download dialog box instead.

# instruct browser to download multimedia files
AddType application/octet-stream .avi
AddType application/octet-stream .mpg
AddType application/octet-stream .wmv
AddType application/octet-stream .mp3

Require SSL

Sometimes you will require an SSL connection. This following snippet will do just that!

# require SSL
SSLOptions +StrictRequire
SSLRequireSSL
SSLRequire %{HTTP_HOST} eq "domain.tld"
ErrorDocument 403 https://domain.tld

# require SSL without mod_ssl
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

Sources:

http://corz.org/serv/tricks/htaccess.php

http://roshanbh.com.np/2008/02/hide-php-url-rewriting-htaccess.html

http://expressproducts.net/htaccess.htm

http://perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/#usa4

http://phpsecurity.wordpress.com/2007/12/22/htaccess-tips-and-tricks/

Posted in .htaccess, Apache at March 6th, 2008. 11 Comments.

Get Random Row with MySQL Without ORDER BY RAND()

This is an update to a previous post of mine which uses the RAND() method. Using the following code, you can retrieve a random row much, much faster (MySQL 4.1.x/5.0.x), with thanks to Jan Kneschke:

SELECT FROM

AS r1
JOIN (SELECT ROUND(
RAND( ) * (
SELECT MAX( id ) FROM
)
) AS id
) AS r2
WHERE r1.id >= r2.id
ORDER BY r1.id ASC
LIMIT 1;

Replace:

  • <COLUMN> with the name of the column(s) you wish to retrieve
  • <TABLE> with the name of the table you wish to retrieve the data from

I've tested this with a table with over 660,000 records, and got a response in 0.0200 seconds, whereas with ORDER BY RAND() i got a response in 2.1599 seconds.

Total Number of Rows:

Cardinality

Old Method:

Old Method

New Method:

New Method

Posted in Featured, MySQL at March 5th, 2008. 14 Comments.

Standards Compliant Internet Explorer (IE8)

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Don your glad rags and party hats, it’s time to celebrate! Microsoft have announced that their new interoperable release of Internet Explorer (IE8) will be standards compliant by default.

Their explaination for change still hints at their stubborness though: “While we do not believe any current legal requirements would dictate which rendering mode a browser must use, this step clearly removes this question as a potential legal and regulatory issue.”.

So what does this mean for us as designers?

Don’t misconceive me – I’m not primarily a designer, but I do design all sites I build …in pure CSS. This change will mean that we should know that our designs will render the same in all mainstream browsers such as FireFox, Opera, Safari and of course IE8 (provided we use valid CSS1, 2 or 3 [when fully supported] code). The days of running both FireFox and IE6/7, uploading your new CSS file and hitting F5 to find that the bug you just fixed in IE6/7 has now broken something else layout-wise should now be gone.

IE8 will support standards compliant mode as default, but will be backward compatible with our already ‘IE Bug-Fixed’ CSS files. So, to save us backtracking to make our previously written CSS files – which have no doubt taken us hours upon hours to write thanks to IE7- rendering modes – we can insert a meta tag into IE8 to set it to “Quirks Mode” for this exact purpose.

A final note

All in all, I don’t have much confidence in Microsoft and the web. This confidence decreases even more after hearing any one of Steve Ballmer’s semitars, especially the one about Microsoft winning the web. In my opinion, they never will, but this is a fantastic step in the right direction which leads me to say two things; Well done Microsoft, and two, Let’s get used to the days of IE7-.

Posted in Web Standards at March 4th, 2008. No Comments.