Pretty much the first thing I did with it is start hunting for free web development ebooks. I was quite surprised to find that there wasn’t a free tag reference for HTML5.

So I made one.

It’s not in the Amazon store, but you can download and copy it to you Kindle over USB.

Download HTML5 Reference here.

AdBlock

Blocks all (well most) ads on sites around the web. No-one likes ads, apart from the people pushing them, this plugin makes them go away.

Flash Block

Blocks all those irritating flash animations from jumping straight down your eyeballs when all you want to do is read an article. It lets you choose which flash objects to enable with a click. You can also white-list sites, preventing flash from being blocked at all (YouTube is white-listed by default).

Keep My Opt-Outs

A plugin provided by Google to stop Google from using your browser habits to send targeted ads. Needless to say, they don’t market this very widely, but it is there.

Ghostery

Ghostery aims to block those nasty tracking scripts from running in your browser. It doesn’t promise to block everything, and requires a little configuration, but something is better than nothing.

KB SSL Enforcer

This plugin checks every site you visit for SSL support, if it does it forces you to use it. SSL ensures that the information sent over the internet can only be read by the site you’re visiting and no-one else along the way.

Google SSL Web Search

Adds a secure version of Google search to your search engines list. You should set Google SSL as your default search engine.

There’s certainly more that you could do to improve your safety while on-line, but adding these plug-ins to your browser is a good start.

PHP Password Policy makes it easy to implement a password format policy on your application. It includes functions to return password validation errors and a decription of the defined policies to be displayed to your users.

PHP Password Policy is straight forward to implement, and can fit right in to your existing password setting procedure.

1
2
3
4
5
6
7
8
9
10
11
12

// Include the library
require_once('password-policy.php');
 
// Create the Password Policy object
$policy = new PasswordPolicy();
 
// Define your policy rules
$policy->min_length = 8;
$policy->max_length = 64;
 
// Validate a password
if( $policy->validate($password) ) echo "Password OK!";

You can get hold of PHP Password Policy Here

“IE9’s emulations of older versions of IE are not the same as running the old version. The code is different. The emulations are very close but not exactly the same.” [ref]

That’s from Ted Johnson, a MS Engineer.

So adding IE9 to your browser testing suite won’t save you the trouble of having to run IE7 and IE8 too. And you’ll never waste your time changing “The Modes”.

The script will minify any file in your css and js folders that do not already have a .min.css or .min.js extension. Style sheets are minified in to a single file where as Java Scripts are minified in to individual files. The minified files are created in the same folders as the original files.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

CSS='css'
JS='js'
FILELIST="minify.$$.tmp"
COMPORESSOR="yuicompressor-2.4.2.jar"
MINCSS="css/styles.min.css"
 
# Minify CSS to single file
echo -n '' > $MINCSS
ls $CSS | grep -v min > $FILELIST
while read LINE
do
    OLD="$CSS/$LINE"    
    echo "$OLD -> $MINCSS"
    java -jar yuicompressor-2.4.2.jar $OLD >> $MINCSS    
done < $FILELIST
 
# Minify JS to multiple files
ls $JS | grep -v min > $FILELIST
while read LINE
do
    OLD="$JS/$LINE"
    NEW=` echo "$JS/$LINE" | sed 's/.js/.min.js/g'`    
    echo "$OLD -> $NEW"
    java -jar yuicompressor-2.4.2.jar $OLD > $NEW    
done < $FILELIST
 
rm -f $FILELIST

The parameters at the top of the script configure the file and folder paths. CSS ans JS are to folders containing your style sheets and Java Script files. FILELIST is the location of a temporary file. COMPRESSOR is the YUI Compressor program. MINCSS is the single output CSS file.

The minification processes for CSS and JS are separated to illustrate the different approaches. I chose to minify CSS to a single file to there can be just one request for styles from the browser. I decided not to do the same for the Java Scripts because they can be loaded asynchronously by a utility like Head.js.

As always, comments, criticisms etc. greatly appreciated.

EDIT Feb 8th
There is a bug in the YUI Compressor which causes it to invalidate media queries. this will be fixed in version 2.4.3, but for now a bit of sed magic on line 14 fixes it.

java -jar yuicompressor-2.4.2.jar $OLD | sed 's/and/and /g' >> $MINCSS

Also, if you want style sheets to be minified and added to the styles.min.css file in a particular order (which you probably do), name them numerically like so.

00-meyer-reset.css
01-global-styles.css
desktop-styles.css
mobile-styles.css

One of the points to consider when making changes to cached files, is that the browser won’t know to download the modified file without being prompted to re-fetch the manifest file.

A common workaround is to make some change to the manifest file to force an update, typically using a version number. This works fine in most instances, but Firefox stubbornly ignores this. The usual workaround for Firefox is to set the manifest file to expire by using the following rule in the .htaccess file.

1
2
3
4

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>

While this works, it’s not much good if your’re not using Apache, or if your host has blocked .htaccess usage.

However, you can achieve the same effect by setting the HTTP headers in PHP. Put the following lines in to top of your manifest file, and change the extension to .php.

1
2
3
4
5

<?php
header("Content-type: text/cache-manifest");
header("Cache-Control: no-cache, must-revalidate");
header("Expires: ".date(DATE_RFC1123));
?>

The first line sets the content type to text/cache-manifest, this is a requirement for manifest caching to function. The second tells the browser not to cache the file. And in case the browser ignores that, the third line expires the file immediately.

Now the browser will keep the manifest cache up-to-date, but still cache the files you want.

I’ve written a raplet which displays data from an LDAP directory next to a message thread in GMail. The records are matched against the email address (mail attribute). The data that is returned is easily configurable at the top of the script.

You can get hold of the file on gitHub.

Pretty aint it? But wait, it uses images – bleugh! Us web developers don’t need no Photoshop, we’ve got CSS3!

Here’s my image-less version (in Firefox 3.6).

The live demo is here. You’re smart enough to figure it out from the source.

Comments and criticisms are most gratefully received below.

Google Reader

I keep an eye on a lot of blogs, mostly design/science/art focussed. Typically I’ve got about 100 feeds in my feed reader, but I’ve had a bit of a purge recently, and chopped it down to about 30. I use Google Reader to keep track of them all, sorted in to various tagged groups (Graphics, Science, Paper Craft, Comics etc..).

I tend to read through one group at a time, toggling the Expanded or List views depending on which group I’m reading. Expanded view is best for the graphics feeds making it easy to quickly scan through the images, picking out interesting pics. I prefer List view for text articles where I tend just to scan the headlines.

Tumblr

For a while I used to keep a photo album as a scrapbook of various images from magazines and what-not. As I tend to browse more articles online than off these days the photo album has become a bit redundant. For a while I kept printing off images and sticking them in, but this process was too cumbersome to keep up with.

Now I use Tumblr as my scrapbook, combined with a Firefox plugin and an Android app, I can quickly and easily add inspiring images to my collection.

In Firefox I use the Tumblr Post plugin. With this I simply right click an image and select ‘Post photo to my Tumblelog’. I copy and paste the page link (for reference) in to the comment field and hit upload.  Update: There’s actually a plugin setting that sets the image link to the page URL, no copy and paste needed! Easy as.

On my mobile phone (HTC Hero running Android) I have the Asuka Tumblr app, which allows me to send any image on my phone straight up to Tumblr. I can use this to take photos of things I see and stick them straight in to my scrapbook.

Twitter

I love Twitter. It’s awesome. However, managing followees and keeping an eye on conversations takes a bit of work. Lists and Saved Searches are the answer. I’ve got a number of lists grouping the different people I follow, and I take a gander at each on a semi-regular basis.

I’ve also set a few custom searches for words and phrases I’m interested in. Twitter search accepts logical search constructs, so I can search for "paper engineer" AND "paper engineering" in one go. This is a good way to find other people talking about things I like to talk about.

Incidentally, I’ve tried, but not really got on with any of these social network aggregation programs, I’m much happier with the good old Twitter site itself.

Follow me on Twitter
Check out my Tumblr Scrapbook