Time tracking for freelancers and small firms made REAL easy.

I have just launched a new web site called 88 Miles. I was sick and tired of trying to juggle excel spreadsheets to maintain my client timesheets - I ended up having to double input (Because it was too much of a pain to enter the time directly, so I would write them down first) and would usually leave the task until the end of the week. Not suprisingly this part of my week wasn’t my favourite.

Punch-in punch-out demoEnter 88 Miles. This little system that I have designed is meant to be REALLY basic. There is no invoiceing system or task system and this is by design. I wanted to make it’s primary role - that is entering time - extremely quick.

When you go to the site, you click punch in to the project you are starting. When you have finished the job, click the corresponding punch out button. That’s it. Really.

At the moment, the system is in beta so it is missing some of the other features that I plan implement before the official launch (Aiming for 1 June 2006) like RSS, an API and some desktop applets, but please feel free to go and have a play with it and let me know what you think!

As a bonus, those of you that sign up before the 1st of June get the first two months of access for free if they decided to continue after that point!

Prices look like they will be $24/year for the premium account - standard accounts will be free but limited to three companies and five tasks at any one time.

The tech:

The system is built in Ruby on Rails and is running on Textdrive.

Javascript colour picker based on Prototype

I have written a small colour picker using the Prototype javascript library, which I thought I would share with the world.

It is very simple, but does the job suprisingly well. I may very well add extra features to it later on, so watch this space.
You can download the source file here.

Instructions for use

1. Include prototype.js and colourPicker.js in you html

2. Create a “target” element and a “trigger” element. The target element is the input tag that will store the colour hex code, so a text box or hidden input will work nicely. The trigger element is the element the user will click to popup the colour picker

  1. < input type=“text” name=“colour” id=“picker” value=“” />
  2. < a id=“trigger” >Pick a colour< /a>

3. Create an instance of the colour picker using the following javascript:

  1. var picker = new ColourPicker(‘picker’, ‘trigger’);

And that is it! Clicking the link will popup the colour picker and after a colour is selected, the text box will then have the hex value in it.
Future plans include better positioning of the popup, and callback functions to you can intecept the colour.

Update: you can see a demo here.

Spammers trying to fool your scanner - What the hell did they say?!

I find some of the spam I receive quite amusing. I use spam assassin on my server so I end up with quite a number of mails in my spam folder. Sometimes it fun to go through them and see what the spammers are trying to get past my filters. The following techniques often make me chuckle, and sometimes stare at my screen bewildered. Keep in mind that the idea of spam is to try and sell you something.

  1. Empty spam: These are message with no body. Sometimes they don’t even have a subject line. I don’t imagine the click-through from these mails is very high…
  2. Spam with no links or URLs or email addresses: Well now that you have convinced me that I need to purchase low-priced pharmaceuticals from your esteemed client, how do I actually do that?!
  3. Non-sensical spam: Sending spam with random string of text. Great for confusing the spam filters. Also great for confusing the user. I really don’t think I’m going to click on a link embedded in text that resembles Lorem Ipsum. If anyone can work out what this gem means, I’d love to hear from you (From a viagra spam):

on decoy on tibia be formica.
try pessimum try conspiracy or typography, the detest a cerebellum , exogamous it sin but company not brainwash.
and grandchildren be conjugacy some arroyo.
, consecrate but judicial but jensenor ginsburg , presbytery it quadrature.

Something in that for all of us really…

Image verification for comments in WordPress 2.0

Tags: php || 7 Comments

I’m sick of blog spam. It is such a pain to have to mark it all as spam (And what exactly does that function do? I’ve seen the same spam come through many times, so it doesn’t seem to learn…)

Anyways, here is my quick and dirty hack to add a image verification box on the comments page (Warning WordPress hack ahead - I’ll bother to learn the plugin system one day…)

This hack requires the following PHP libraries installed on your server: Freetype, GD and mcrypt.

Create a new file in [path_to_your_blog]/wp-image-verify.php

Insert the following code:

  1. < ?php
  2. require( dirname(__FILE__) . ‘/wp-config.php’ );
  3. $verifier = $_REQUEST[‘verifier’];
  4. $display_string = decrypt($verifier);
  5. $image_details = imagettfbbox (10, 0, ‘/usr/share/fonts/TTF/tahoma.ttf’, $display_string);
  6. $image = imagecreatetruecolor($image_details[4] - $image_details[5], (0 - $image_details[5]) - (0 - $image_details[3]) + 1);
  7. imageantialias($image, true);
  8. $background = imagecolorallocate($image, 255, 255, 255);
  9. imagefill($image, 0, 0, $background);
  10. imagettftext($image, 10, 0, $image_details[0] + 1, 0 - $image_details[5], imagecolorallocate($image, 119, 119, 119), ‘/usr/share/fonts/TTF/tahoma.ttf’, $display_string);
  11. header(“Content-type: image/png”);
  12. imagepng($image);
  13. ?>

Note - you will probably (ok will) have to change the path of the font as /usr/share/fonts/TTF/tahoma.ttf is a font I copied from my windows directory.

Open [path_to_your_blog]/wp-comments-post.php and add the following lines at around line 25:

  1. $verifier = trim($_POST[‘verifier’]);
  2. $verifier_compare = decrypt($_POST[‘verifier_hash’]);

Open [path_to_your_blog]/includes/comments-functions.php and add the following lines at the top of the file:

  1. // image verifier functions - by Myles Eftos
  2. $key = “afedss”; // Enter a 5 character string
  3. $iv = “sdfesdf”; // Enter a 7 character IV
  4. function random_string($length = 6) {
  5. $str = ;
  6. for($i = 0; $i < $length; $i++) {
  7. $str .= chr(rand(ord(‘A’), ord(‘Z’)));
  8. }
  9. return $str;
  10. }
  11. function encrypt($string) {
  12. global $key;
  13. global $iv;
  14. return base64_encode(mcrypt_encrypt(MCRYPT_DES, $key, $string, MCRYPT_MODE_ECB, $iv));
  15. }
  16. function decrypt($string) {
  17. global $key;
  18. global $iv;
  19. return chop(mcrypt_decrypt(MCRYPT_DES, $key, base64_decode($string), MCRYPT_MODE_ECB, $iv));
  20. }

Replacing the $key and $iv variables with a random 5 and 7 cahracter string respectively.

Finally find the comments.php file in you theme directory - if you are using the default theme it is at [path_to_your_blog]/wp-content/themes/default and add the following lines after the url textbox (Around line 89 in the default template):

  1. < p>

  2. < input type=“text” name=“verifier” id=“verifier” size=“22″ />
  3. < label< small>Enter the string you see here: < img src=“< ?php echo get_option('siteurl'); ?>/wp-image-verify.php?verifier=< ?php echo urlencode ($image_hash) ?>” alt=”" />< / small>  < / label>
  4. < input type="hidden" name="verifier_hash” value=”< ?php echo $image_hash; ?>” />
  5. < /p>

All done :)