Opera Web Standards Curriculum

Ever since Opera accepted that no one uses their browser for general browsing they’ve been huge activists for the semantic web, and this yet another example of what they’re doing to help the web evolve and educate the masses. Kudos to Opera. This should be required reading for all new developer/designers and even clients.

jQuery How To’s

This is a great list of specific things and how to do them with jQuery.

Fluid

Fluid app is something I’ve been looking into for a little while now. I normally wouldn’t put this up here, because it’s a mac–only application; but it seems really neat. It creates desktop apps from web sites, like a bunch of little stand alone browsers in your doc. It does a similar thing to Google Chrome, by modularizing your web apps so if one crashes everything doesn’t fail.

Digital Web Magazine

I don’t know exactly how this site evaded my RSS reader for so long, but it’s a very informative ‘zine about the web. When I first saw it I read through a few articles and really liked what I saw.

Hngry

Hngry is the lunch time app we all wanted, but are too lazy to build. It’s very nice, but it needs a lot more data.

You can hide your development space from the public many ways, a weird URL no one will find, use a local testing server (localhost), or set up a development server. Up until my last redesign I was just using a directory called dev under csskarma.com. And that was fine, but my file paths would all have to be adjusted when I went live (not a huge deal, but annoying none-the-less).

If you’re a frequent reader, you might remember that in my last post I mentioned that I was coming out of laziness and cleaning up some stuff on my server. So I finally set up my dev server. It’s just a sub-domain, but seems to work well so far.

Not that I have anything on it. but I felt like I should use some best practice stuff and password protect it. In password protecting a directory, you use an .htaccess file coupled with an .htpasswd file (to store the usernames and passwords)

The first thing you need is a list of users you want to grant access to. Let’s say I want to set up a general account for people to access my directories. We’ll make the username guest and the password dontstaylong.

Next, we have to go to a site that will encrypt the password for us, I use htpasswd generator. After plugging in the username and password, you’ll come out with something like this:

Your full .htpasswd file

guest:ZGu8x2pjH62Pk

Take that code and place it in a file called .htpasswd (you’ll need to create this). You can put that file anywhere on your server, but it’s best to make sure it’s not web accessible (so no one can steal your password). So, if you have a public_html directory or a www, put the file one level higher than that.

Now that we have our .htpasswd file on our server, we can start cutting off access to various parts of our site using an .htaccess file. You can also add multiple users by following the same process as the first one, but put one user per line in the .htpasswd file.

Let’s say I have a directory at http://www.csskarma.com/articles/htpasswd/ that I want to password protect. To do that I would put an .htaccess file in that directory with this code in it:

Your full .htaccess file

AuthType basic
AuthName "This directory is protected"
AuthUserFile /full_server_path_to_file/.htpasswd
Require valid-user

Important: the AuthUserFile must be an absolute server path to the file, relative will not work (at least it didn’t for me).

Lastly, you visit your new password protected directory (username: guest – password: dontstaylong) and marvel at your greatness. This password should apply to all sub directories as well.

In my experience, this is the easiest way to secure an area of your site. However, if you’re passing sensitive information through, you may want something a little more secure than this. Yahoo! provides a good best practices security write-up you can use as a reference.

Anyone have any thoughts/suggestions for beefing up the .htpasswd file?

While I was putting together my usual .htaccess file I thought that maybe I could build it a little better and create a file template that I can use in the future when I’m doing something like this again (since, I know this will come up again). So I did a little research about things I knew I wanted to add in like the 404 error page rewrite rule (which many tutorials seem to omit) and denying a directory listing.

This is the file template I came up with:

For those who don’t know, you create a file called .htaccess with the below code in it, and stick it in the root directory of your site. It does all sorts of neat stuff. It can also be used to password protecting directories, but that’s for another day

DirectoryIndex index.php index.html index.htm

<IfModule mod_rewrite.c>
RewriteEngine On
ErrorDocument 404 /errors/404.php
ErrorDocument 403 /errors/403.php
ErrorDocument 500 /errors/500.php
</IfModule>

Options -Indexes
Options +FollowSymlinks

<Files .htaccess>
deny from all
</Files>

Breaking it down

This .htaccess file is in 4 basic parts: the directory index, the error documents, directory listing options and denying access to the .htaccess file itself.

DirectoryIndex

DirectoryIndex index.php index.html index.htm

DirectoryIndex is the first thing I learned in my .htaccess explorations, it’s very simple. It tells the server which pages to display by default and in what order. In my example, if I have index.html in a directory along with index.php, the index.php file will be displayed by default, so you have www.csskarma.com pointing to index.php and if you want to get to index.html you’d have to type it in like www.csskarma.com/index.html. Many servers get this right without the DirectoryIndex, but it’s like doing body{background-color:#fff;}, I put it in just in case.

ErrorDocument

<IfModule mod_rewrite.c>
RewriteEngine On
ErrorDocument 404 /errors/404.php
ErrorDocument 403 /errors/403.php
ErrorDocument 500 /errors/500.php
</IfModule>

This is the stuff that I dig. It gets the most press out of all the .htaccess elements; so I guess it’s the rock star of the .htaccess file. A List Apart did an article on it in 2004, and it was a big usability issue building a good 404 error page. Now we all have our fancy 404 pages.

The mod_rewrite module (as to my understanding of it) deals with rewriting the URL. In this cae, it’s the thing that lets you have a 404 error without exposing the URL of the actual error page. 403 Error is a permission denied error and 500 is an internal server error. You can check out all the error codes if you’d like, but you shouldn’t bog down your .htaccess file too much, so I keep it to these 3.

Index Options

Options -Indexes
Options +FollowSymlinks

Options -Indexes is what you use to deny a directory listing; inversely, you could use Options Indexes (no dash) to allow a directory listing. I use this for things like my images directory.

Options +FollowSymlinks tells the server to follow Symlinks (no kidding huh?). Some apache servers require this for mod_rewrite to work. So if your mod_rewrite is working fine, you may not need this, I include it just in case. In my experience Symlinks are generally abused and overused but it’s still good to know how to create them from the command line.

.htaccess Access

<Files .htaccess>
deny from all
</Files>

This is very simple and (I think) very necessary. It prevents people from viewing your .htaccess file. There’s really not any sensitive information in my .htaccess file, but it’s good practice to protect this file in case you do put things in it that you don’t want exposed.

Fin

So, that’s my .htaccess file starter template. I’d be interested to hear what others use in their files and if I missed anything in mine, I’m certainly no Apache expert.