RewriteRule Examples and Explanations

1. example

Our goals in this example:

  • Remove .php extensions. For example becomes
  • Add trailing slash to the given URL (if it’s not there already)
  • Redirect to /404.php if the file (resource) does not exist

You can find the solution below with a step-by-step explanation. Also, look at the DEMO I made for this example. Try out different URL-s to see what happens.

RewriteEngine On
RewriteBase /

# 1 
RewriteCond %{ENV:REDIRECT_END}  =1
RewriteRule ^                    -                    [L]

# 2 - remove php file extension on GETs
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_METHOD}   =GET
RewriteRule (.*)\.php$          $1/                      [L,R=301]

# 3 - add trailing slash
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*[^/]$            $0/                      [L,R=301]

# 4 - terminate if file exists. 
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^                   -                        [L,E=END:1]

# 5 - terminate if directory/index.php exists.  Could be $1index.php, too, cause "/" already exists between them.
RewriteCond %{REQUEST_FILENAME}    -d
RewriteCond %{REQUEST_FILENAME}index.php    -f
RewriteRule ^(.*)(/?)$             $1/index.php          [L,E=END:1]

# 6 - resolve urls to matching php files 
RewriteCond %{DOCUMENT_ROOT}/$1.php  -f
RewriteRule ^(.*?)/?$              $1.php                [L,E=END:1]

# 7 - Anything else redirect to the 404 script.
RewriteRule ^                      404.php              [L,E=END:1]

Solution explanation

As you can see I divided up the solution into 7 parts and now I will go through them one by one…

Create an Interactive Map Using Javascript and HTML5 Canvas

I will show you how to create a custom interactive map using the HTML5 <canvas> element.
You can check the result: DEMO here
The map size on the demo is 1920x1080 pixels.

Creating simple interactive maps is not so hard, you can see examples here, or here.
But when you need more customization, like different territory textures, shadows, special font-styles…etc, well then you have to use different tools for this job.

What you will need:

  • Vector graphics editor to draw the base paths for the map (I used Illustrator)
  • A general graphics editor like Photoshop, we will import the paths from Illustrator to here
  • KineticJS, a Javascript library, for the canvas manipulation
  • A little Javacript knowledge

Hello World..

I’ve just set up Octopress.

I chose it because Octopress is a static blog engine, therefore you can host the whole thing on GitHub so no worries about backup and traffic pikes. It’s not that hard to set up and make some customizations, at least everything went smoothly so far.