Creating htpasswd / htaccess restricted areas

I have to do this all the time. You’ve created a staging site for a client, you want to show it to them on a live server – but you don’t want it to get indexed by search engines, nor do you want people accidentally coming across it – you want to use htaccess and basic auth to restrict the directory. I almost always google the syntax for both: the htpasswd command. the htaccess syntax for adding auth. It’s annoying, this shouldn’t be this hard to remember (but it is). So, in a moment of free time I wrote a really simple shell script that does all of this in one command for me. I’m calling it htpassmaker. This is it, in a gist: Assumptions I’ve made: You’re using apache. You have htaccess files enabled on your server. You have shell access to your server. Things to remember: Put your htpasswd file OUTSIDE you webroot. I find the best course of action is to put htpassmaker in your unix path, then run it from the directory above where your webroot is, once complete, copy the created “.htaccess” into the webroot (or append it to the existing htaccess if you have one) I take no responsibility for this. It’s unlikely, but if you use this (or think it’s stupid) let me know in the comments, or on twitter...

Digital Color Meter

DCM lives in the Applications/Utilities folder on your mac When you open it you are presented with a small window, the left of which shows a small zoomed image of what’s under your mouse and the right allows you to choose the type of colours you are interested in. For our purposes as a web developer we want hex codes, so we choose RGB in Hexadecimal (8bit). The true secret to working this tool into your workflow is the keyboard shortcut to copy the colour as text. To do this, you just hit Apple-Shift-C while the correct colour is shown, this will copy the text of the hexadecimal colour into your clipboard.. something like: “#186231”. This can be pasted directly into your CSS or HTML. It’s somewhat annoying that it copies with quote marks… but still a real...

Creating an accessible navigation menu from a UL

To start with, we create the markup for our navigation.. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="about/">About</a></li> <li><a href="contact/">Contact</a></li></ul> Obviously you can put as many or few items as you need into the list. Now to style the list…. first we’ll style it horizontally: ul.nav,ul.nav li,ul.nav li a { display:block; float:left; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-right: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} and now vertically, just to show how it works… ul.nav,ul.nav li,ul.nav li a { display:block; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-bottom: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} Obviously, you have the freedom to apply any CSS you want to...