How to password protect folders on your web server
July 23rd, 2010
If you do a lot of prototyping, you don’t necessarily want the whole world to have access to the genius work you’re working on.
If you find yourself in that situation, you properly want to password protect the folder in which you keep all your prototyping stuff. Now, if your web server is running Apache, you’re in luck. Enter the world of .htaccess!
Before I’ll start with the very short guide, I’ll describe two nearly identical setups of web folder structures. 90% guaranteed that your setup will look as one of the two described here. I’ll be using these two setups as examples throughout the guide.
(a): /www/mySecretFolder/
(b): /www/myDomain.com/mySecretFolder/
…where “mySecretFolder” is the folder in which you have all your secret stuff.
That last example is if you have multiple domains hosted on the same webserver!
Now to the, as promised, very short guide:
1. In the root of your folder structure, you place a file called “.htpasswd” – without any extension. This file will hold the username and password you want to access your secret folder with (I’ll come back to that in step 3). Here is where your file should be:
(a): /www/.htpasswd
(b): /www/myDomain.com/.htpasswd
2. Go to the following website to create an encrypted password: http://www.htaccesstools.com/htpasswd-generator/. You can make more that one username/password to access your folder with.
3. Now you’ll take the generated username and password(s) and copy/paste them into your “.htpasswd” file. It should look something like this:
sune:$apr1$fbYhV/..$Su1glsPTO2AnoKjWvtV1O/
guest:$apr1$yuFxV/..$ZRSzboC1PC2fOuVULsLc4/
4. In your “mySecretFolder” you create a file and name it as follows: “.htaccess” again with no extension. In this file you paste the following text (again with two examples).
(a):
AuthName “– Restricted area –”
AuthType Basic
AuthUserFile /home/www/.htpasswd
require valid-user
or (b):
AuthName “– Restricted area –”
AuthType Basic
AuthUserFile /home/www/myDomain.com/.htpasswd
require valid-user
It is very important that the “AuthUserFile” path is going back as long as possible. It is not enough to start in your public folder (www).
There you go, that should be it! Now you can place as many folders inside “mySecretFolder” as you want to and they’ll all be protected by a username/password prompt!
Comment this article if you have any questions!
Simulating the iPad Photo Stack
April 28th, 2010
I recently attended “An Event Apart” in Seattle, where many of the presentations was about CSS3 and HTML5. I haven’t really done much CSS3 and HTML5 coding myself due to lack of time in my sparetime and browser support strategies in my professional life (the conference tought me that this is a sorry excuse. “Use CSS3 for none critical stuff, as eye candy for those with modern browsers).
The conference was really an eye opener in terms of the power and possibilities of CSS3 and HTML5.
Anyways; The other night when I was playing around with my iPad, I started wondering if it’s possible to make the photo stack feature (pinching out individual photos from a stack of photos) by means of only CSS3. And guess what? I was, and it was really easy to make too:
Support:
I use “Transform” and “Transitions” in order to move the photos around.
Transforms are presently supported in Safari 4, Chrome Firefox 3.5. and Opera 10.5.
Transitions are supported in Safari 4, Chrome and Opera 10.5.
In short: Use Safari 4, Chrome or Opera 10.5 when checking this demo out!