Must have firefox addons for web development

It's been a few days since I last posted as have been busy busy with various things, mostly work related but some which will hopefully become more apparent as time goes on.

Anyway, as far as an introduction to this post goes one needs not look much further than the title. There are literally hundreds of firefox addons out there of varying usefulness so I'm just going to go over three I use in development.

ShowIP
ShowIP is a handy little addon which sits on your bottom bar and displays the current IP address of the page you are currently on. Clicking the IP address will give you a few handy little options like going to the whois entry for the address - conviently in a new tab.

Web Developer
Web developer is a very cool tool bar addition. I won't go through the full functionality here but some useful options are:

• The ability to quickly disable JavaScript, Cookies, Cache, page colours etc - all dead handy if you're working to a W3C accessibility guidline
• Useful cookie operations if you're debugging your code and wondering where the chuffing hell those cookies went.
• The ability to disable css by category, view a page's css, even edit the css on the fly (though I use firebug for this - ssee below)
• Form manipulation tools including swapping POSTS and GETS and a lot of other functionality
• An information drop down that tells you just about everything about the page - one of the most useful parts I found was the "Display Element Information" (bound to ctrl+shift+F) which will outline your html elements with a red border and display their information if you click on them.
• There's rulers (handy when you're fiddling about with images and css), there's line guides, there's options to outline different elements, resize the page, edit the html on the fly, and so much more
• There's also a tools menu with links for page validation including HTML (ctrl+shift+H), css, feeds, WAI and so on.

It's a great tool, I still find new bits in it all the time.

Firebug
This is definitly full of epic win. Firebug gives you a nice pane in the bottom of the browser window where you can see your html and css (plus other bits) in a sane and readable manner. Also, mousing over your html elements in firebug shows them highlighted with an overlay in the browser, with different colours for the padding, margin, border etc. You can view an elements css with all the inheritance laid out nicely and even dive in and edit it on the fly which is an enormous boon if you are from the "trial and error" school of css like myself.

There are as I mentioned loads and loads of other addons for firefox out there to be discovered - if you find a good one let me know!

Someone did point me in the direction of an IE viewer addon to test your page in IE... I prefer just to use IE as I trust it to really foul things up properly. Although for those that don't know www.browsershots.org is an amazing if slow way to get screenshots of your page in about 100 different browsers across OSX, recent windows and various linux distro's.

I think that's enough from me today, have a nice weekend!

A great second in unix time

So how many partied like it was 1234567890 last night? I must confess I watched the once in a life-time moment tick past after watching a bit of Doctor Who on iplayer.

What am I talking about? Ok...

Unix time is measured from what is commonly know as the "epoch" or "Unix Epoch" which started on 1st January 1970, before my time. Unix system time is measured in seconds since the epoch and at 23:31:30 GMT on Friday 13th Feb this year (2009) unix time ticked over to 1234567890 seconds since the epoch - how cool is that?

There were parties all over the world, sadly none near me - not that I would have gone with this dose of what ever it is making my nose run like the mississipi (slow and muddy - lets not go there). Is all this a bit sad? Well as one person pointed out in this article from the Times:

"Celebrating the millennium - why do that? It was just like any other day, the Earth rotates on its axis and it moves around the Sun. All these things are arbitrary, so for geeks to celebrate Unix time is something for them to enjoy."

Well said! However staying with the same article I really have to pick fault with it - that's the media for you can't get anything right.

"The problem with a 32-bit integer like this is that it can only count 4,294,967,296 seconds, or 136 years."

Err... hang on... reaching for calculator... yup 2^32=4,294,967,296, divide by 60 for seconds in a minute, divide by 60 again for minutes in an hour, divide by 24 for hours in a day and 365.25 for roughly days in a year counting leap years = 136.1 (rounded) ok so they are doing well in their maths so far... or are they? This is where a number of issues arise. Let's look to start with at the maximum count.

To simplify the problem lets work on a 4 bit integer, no signing (all that messy 2's compliment is a pain). Our maximum unsigned integer value is 1111 = 8 + 4 + 2 + 1 = 15 and it's 4 bit so 2^4=16 ... hoooooooold on a minute! So maximum value looks like (2^n)-1 ok that's not really going to cause many problems on our calculation considering we were rounding like goodun's anyway - what's the difference between 4,294,967,296 and 4,294,967,295 other than that it will be the 4,294,967,296th second where the clocks have turned. And the poster at the bottom of the article who claimed the maximum integer was 2,147,483,647 was working on a 31 bit register for some reason - why use signing when it's not needed?

So that's knocked a second off the time till the much awaited "epochalypse" hey ho, I can't say I'm too bothered. However - the date claimed in the Times was sometime in January 2038... that seems quite soon doesn't it? The quote being:

"...136 years. This covers a period between 1901 and 2038."

As a good friend once said "WTF?", where did 1901 suddenly come from - hold on! this person's done the "Introduction to Microsoft Excel" course haven't they. If you type 1 into a cell in Excel and format it as a date you realise excel starts at 1/1/1901. But they just said unix time starts at 1/1/1970 so that takes us to 2106 (sometime in January I guess). AHA! So microsoft will bring about the end of the world before unix - there's no surprise.

Edit: I'm going to add an edit in here rather than re-writing the rant above. I just realised that using a signed integer you could say that pre-time (i.e. negative numbers) goes back to sometime in december 1901 - 2,147,483,647 seconds before 1/1/1907 and then yes the "epochalypse" is indeed scheduled for 2038 (03:14:07 on January 19th to be precise). You can even buy the t-shirt

Anyway, everything's shifting onto 64 bit architecture which gives something in the region of 584.5 billion years (not 294 as the Times incorrectly states) - nice - considering in a 100th of that time our sun will be a red-giant with radius greater than the current radius of the Earth's orbit, I'm not really going to worry overly.

It does irritate the hell out of me though when the media, particularly well thought of branches of the media such as the Times cannot get its facts straight or miss out vital pieces of information. Also sentences like:

"It's the same principle as the millennium bug, but one that many scientists believe should be be taken more seriously, as only people who count in binary will see it coming."

/facepalm, I personally grow weary of the "boffin" image for starters (this article in wikipedia sums it up for me) - it's so Pathe News. And what the hell does the above sentence mean anyway? Add the word "scientists" to a news article to give it the necessary gravitas for Joe Public not to question it then put them down by telling them they can't count in binary - gods talk about repressing the masses - binary counting is not hard, I could do it when I was 4 (see profile picture) its just that most people don't need to count in binary. If hexidecimal was the commonly used number system then we'd all count in base 16 and every one would think decimal difficult and weird.

I'm going to stop ranting about media conspiracies and repression of the masses now as it's not even 10am on Saturday morning and its getting that 1984 feeling already.

People I will leave you to the glorious uncertainty of existance with one word of warning Do not believe everything you read in the papers (particularly if it's about something scientific).

Creating list based navigation bars with CSS

"At last" they cry, "more technical content!" Something a little straight-forward this time I think. Lets have a look at how to create nice navigation bars on websites. For this we'll be using a bit of HTML and a sprinkling of CSS.

Now we all remember nav bars that looked like this:

Item 1
Item 2
Item 3

Yuck! So how is a list going to help this you may ask? Surely it's going to look just as bad if not worse, something like this maybe:

• Item 1
• Item 2
• Item 3

Argh, my eyes my beautifuls eyes. Right enough messing about, sorry. All this list needs is some careful styling, lets start by having a gander at the html used above:

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

Ok, lets put a <div> around that and give it an ID.

<div id="navbar">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>

Right now we can fiddle about with the navbar div to our heart's content in the CSS. I won't bother with the actual div CSS itself beyond a width just put in for example because I've no idea where you want to put it or anything so lets go straight in an modify those list styles:

#navbar {
width: 150;
}

#navbar ul {
margin: 0;
padding: 0;
}

#navbar ul li {
list-style: none; /* gets rid of the bullet points */
}

#navbar ul li a {
text-decoration: none; /* gets rid of underlines */
width: 150px;
background-color: #eee; /*a very light grey*/
}

Due to the aparent limitations of this blogging interface and WYSINRWYG (What You See Is Not Really What You Get) I don't seem to be able to display this here which is a pity (God knows I've just spent the last hour trying to). But never mind go to this link to see it in action

One final addition of note: to change something when the user mouses over the navbar item do the following


#navbar ul li a:hover {
text-decoration: underline;
background-color: #ccc;
}

that will underline the text and make the box a darker grey when the mouse point moves over it.

Notes
A couple of extra's I've picked up on my way round, this method seems all the more effective if you name the anchor so <a id="nbar" etc then in the css you can refer to something like #navbar ul li a#nbar.
Iceweasel under debian seems to like having <br /> tags after the list element... no idea why
For horizontal navigation bars just include the property display: inline; in the css.

have lots of fun and if you get totally lost, try w3schools, it's got shed loads of useful info.

Reflection: 6502 assembler

I intended this blog to be part technical and part anecdotal, this post I feel probably falls into both categories at once.

Back in the day when I were a lad etc etc and other grammatically incorrect cliches pertaining to a time only about 12 years ago, I was studying an A-Level in electronics under the Welsh Joint Education Committee exam board. The course was split up into 5 modules:

1. Basic digital electronics
2. Basic analogue electronics
3. Slightly harder digital and analogue electronics
4. 6502 assembler
5. Communications
6. A project

Okay so I can't count... anyway you can guess the vague areas studied in each: 1. Logic gates, boolean algebra, karnaugh maps and so on; 2. resistance, capacitance, diodes, transistor switches and amplifier circuits, RC circuits etc; 3. capacitor charge and discharge, diode characteristics, a/d and d/a converters; 4. 6502 assembler 5. yeah y'know radios, tv's, all the stuff I'd covered in my radio amateurs exam at 14 years old (yawn). 6. I made a guitar tuner... phase locked loop... I won't even go into it here.

You may have noticed something here, 4. 6502 Assembler ... umm ... I've no idea whatsoever why this was included in the course - there's a miriad of exciting bits of electronics out there to cover but no, there it was 1 whole terms worth of assembly language - wow!

The way our practicals work was that we sat down infront of a base unit connectd to a central computer and got assimi... no sorry, wrong reality again, ... got tested on a bunch of multiple choice questions. The great bit was that the whole practical could be carried out on the same unit which looked like one of those yamaha O2R digital mixing consoles without any over the twiddly knobs on top - instead we normally had a prototype board on which we could just plug components in to build up whatever circuit we required.

Module 4 supplied a basic motherboard with a 6502 processor, a socket for an eprom (dead flash - we had a battery unit for ours so we could actually retain work on it!) and even an io port. But the best part was a 16 key hex pad and a 6 x 8 segment led display - old skool!

So how did it work? You had to figure out what you wanted to do - I mean exactly what you wanted to do, which register was going to hold which bit of data and so on; then you wrote it down in pnemonics - a shorthand pseudo-language; then the best bit: you translated it directly into hex represented 6502 machine code with the aid of a lookup table and typed it in on the hex key pad.

Now while this was all very well and good, what was the purpose? The purpose was a very good one - to gain an in-depth, ground level understanding of what was going on inside. I'm a huge fan of modern languages like python who's high level functionality provide an amazingly flexible approach to software development but isn't it better to really really understand what's under the bonnet?

Well that's my opinon anyway.

</rant>

Ajax Autocomplete

As a first technical post this is an ideal candidate as it took me bleedin' ages to get sorted out - so here goes.

The purpose behind this exercise is to try and make a form input text field on your webpage come up with auto-complete suggestions based on items already in the database in question. Okay lets start right at the very very beginning:

1. Go and get the scriptaculous scripts, download them to your computer and unzip them. Have a look through the folder you just unzipped, there should be a subdirectory called src with a bunch of .js files in it. Got it? Good! Bung controls.js and effects.js in the directory you are keeping your scripts in (for our example we'll call it scripts/).

2. Now you want to go and get prototype, and chuck the script prototype.js in the same location as the other two you just got.

3. Now then, in the header of your html file where the input text field appears you want to link the scripts you just got, something like this:

<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/effects.js" type="text/javascript"></script>
<script src="scripts/controls.js" type="text/javascript"></script>

Make sure you include them in this order or they'll get upset.

4. In the same file go and find your input field. It might look like this to begin with:

<input name="rodent" type="text" />

We need to add an id attribute to the field as this is what the autocompleter looks at.

<input name="rodent" id="rdnt" type="text" />

5. Next job is to add in a div underneath the input tag to take the results, something nice and simple:

<div id="autocomplete">

6. Last but no means least for this file, create a new autocomplete object:

<script language="JavaScript">

new Ajax.Autocompleter("rdnt", "autocomplete", "auto_comp.php", {frequency: 0.1});

</script>

A bit of explanation here: there parameters passed are 1. the input id, 2. the div id, 3. a php file that returns a <ul> list of database results and 4. I like frequency 0.1 (seconds) as it seems pretty smooth - for big databases this might be a bit too much strain.

7. Ok now well visit the php. This is quite simple to do: imagine we have a database table with an id and name of a small furry animal. We want to return autocomplete suggestions based on what's been typed i.e. if someone types a "b" into the input box above we want to see entries like "badger" and "beaver" pop up. Note that the value currently in the text box will be passed via the $_POST['<input name>'] variable. Something like the following should do the job:

<ul>
<?php
$text = mysql_escape_string($_POST['rodent']);
$sql = "SELECT * FROM rodents WHERE name LIKE '".$text."%' GROUP BY name"
$result = mysql_query($sql)
while ($row = mysql_fetch_array($result)) {
echo '<li id="ac_items">'.$row['name'].'</li>'
} ?>
</ul>

Nothing exciting just returning an unordered list of the query returns.
This should now be working (touch wood) but probably doesn't look very special. It's time to go and visit the css - this is up to you how you do it - I would recommend setting list-style: none and padding-left: 0 in div.autocomplete ul li {}, change the cursor for the li elements and probably include a mouse over colour too so it's ovbious the elements of the list do something.

I've skipped a good deal in this little post but there's a fantastic wiki for all the script.aculo.us scripts and many other points and examples to be found through google.

Good Luck

What's in a name?

Welcome brave reader to the first installation of "The Programmer's Den". Having recently moved back into the realms of development - this time far more comfortably in web development with out all that messy mucking about with science on the side - I decided it was high time to get blogging proper. The main impetus for this has been that over the first two weeks at my totally fantastic new job I have been relying heavily on many other kind people's sharing of their discoveries as they have been tackling similar conundra as myself. The list of these unknowing contributors is already too long to mention but they all have my utmost gratitude.
Anyway - as the title asks: "What's in a name?" A very good question indeed! At first glance it may seem a suitably geekly title for a blog writen by my good self. But dear reader the geek-tastic reference go so so much deeper.
Who now amoung the development fraternity remembers Colossal Cave? Yes I can see some tentative hands raising, no sir don't pretend you are just stroking your long white, pony-tailed hair, I'm sure you've been through the source code a few times when you got stuck.
Anyway, for those of you who don't, Colossal Cave (also known as Adventure or ADVENT (this is what the executable was normally called)) is like the grandfather of computer games. A good old text interface (in the original) describing - sometimes irritatingly - what you can see and waiting for you to say what you are going to do next... does that sound familiar? Single player, solo adventuring, fanstasy role play kind of idea... yeah this is starting to sound like it spawned a lot of things.
There are many many memorable parts to this game that if you were to quote to someone who was of the Adventure playing crowd would definitly recogonise instantly. I'm sure a lot of folk have come across the magic word "XYZZY" - handy little translocation device from the "inside the building" and the "debris room". How about plugh? Again took you from the building where you could stash all your stuff (yeah people were after epic lewtz even in the 70's kids - don't think your purplz lol are anything new!) to Y2.
I could go on and on and on as this game still has a great impact today. Stanford University only stopped requiring it's first year comp-sci students to re-implement the game as a project last year.
Anyway, back to explaining the name: Don Woods wrote probably the most famous version of the game after discovering it as a graduate student in Stanford. This version, known as Adventure 350 (due to 350 being the highest score), is the one you may have been introduced to as an aspiring young, pre-teen geek (or was that just me?) on an old PC, mine was a 8086 with a fairly burnt monocrome hercules, orange on black monitor that my father helped me build after fishing components out of a skip round the back of Aberystwyth university physics dept. He knew of adventure because he had played it back in the 70's on a PDP-11 ... ah! now we're going back a bit (before I was born admittedly). He told me of a place he'd discovered in colossal cave - not available in Wood's version, but presumably available on the one he'd played which one can only assume was the age old Will Crowther original, called "The Programmer's Den" - with pictures of undraped Cray's on the wall, half drunk coffee on the desk and half eaten pizza in a box (this is really starting to sound familiar isn't it? we really are creatures of habit). It seemed a suitable name for such a writing expedition so I've gone for it.
I would be interested in hearing from anyone else who ever encountered the fabled place as I can find absolutely no reference to it anywhere else - though I may be force to grab the original source code and search the data file one day just to check.
Well I'm pretty much out of orange smoke so we better call it a day. I future I intend there to be some slightly more illuminating posts on development rather than idle ramblings on ancient computer entertainment. So watch this space for my latest (not very) shocking discoveries in PHP, MySQL, JavaScript, AJAX, Ruby on Rails, Codeigniter, Perl and what ever the hell else the universe deems fit to lob at me. (Image above borrowed from wikipedia).