Resources I have used to build this site:

The following links below are the main sources that have been used when putting together this web site.

The generous people behind these sites, and similar web design sites, deserve high praise for sharing their valuable innovations and spearheading the openness within the web and support for non-commercial entities.

markup representation with banana in pocket

  • DHTML / CSS stuff

  • Onlinetools.org - PureDOMExplorer Onlinetools.org The Pure DOM Explorer menu is a great a windows explorer style tree menu. PureDOMExplorer automatically recognises which list item has a nested list. It then adds a class called "parent" to this item and adds a linked image that shows and hides the nested list. PureDOMExplorer does not collapse a list if there is a STRONG element in it allowing you to keep a "current section" state visible in your tree. The author has an excellent book called Beginning JavaScript with DOM Scripting and Ajax.
  • Tjkdesign.com - Current location Tjkdesign.com The DOM current location indicator allows you to use the DOM to differentiate navigation links depending on the document which hosts them. This solution does not need any hooks besides an ID for the menu. It replaces the current anchor with an EM element or plugs a class in that anchor. The very generous Thierry showed me how to adapt the JavaScript to work with the PureDOMExplorer menu which you can see working with this site. See the DHTML tree menu testing for details.
  • DNolan.com - Expandable menu Daniel Nolan The DOM expandable menu from Daniel Nolan is an update on the menu first made available at gazingus.org. The html mark-up is as simple as it gets and the JavaScript enables you to open each node at a desired page.
  • HTML Dog - Suckerfish dropdowns Suckerfish HTML Dog provide the original suckerfish drop-down and the revised 'Sons of Suckerfish' with the better java and Opera fix. I use the horizontal solution and turned it into a vertical menu. In order to put atop on the jar (3rd level menu) I added an image as a list item then adjusted the position to align with the adjustable lower part of the jar.
  • A List Apart - Sliding doors slidingdoors Sliding doors is a wonderful, completely flexible 'tab menu system.' I've used it (the first version) with my My PHP tests section for the style-switcher option. A second revision is available with some improvements.
  • 456bereastreet.com - Inverted Sliding doors 456bereast Inverted tabs are similar to sliding door tabs but are bottom-aligned, and as text size is increased, more of the tabs are revealed from the top down, instead of from the bottom up. I've used it with my PHP tests section - except I've removed the body padding and forced it into an absolute position with the overflow hidden - i.e. completely ruined it and the ability to change text size - to fit it into my design.
  • A List Apart - Taming lists taminglists I found this helpful for understanding the basics of using CSS with lists and how to use inline lists with good semantic structure to the mark-up.

  • CSS Layouts

  • The Man In Blue - design Man in Blue I had to poach this site's design and layout structure. Liquid backgrounds make me go 'oooh nice'. He's release a great book called The JavaScript Anthology with DOM and CSS stuff. Also used the JavaScript for the page options show / hide.
  • HTML Dog - Elastic layout html dog I used the elastic layout from html dog in my flash movies section. An Elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices. The article on elastic layouts is at A list Apart [Elastic layout
  • fu2k.org/alex/ - frames without frames Frames without frames I used this site's solution for creating a liquid inline frame for my PHP Tests area. The method emulates fixed positioning and the combination of top and bottom, left and right properties in IE. The xml prolog is needed for IE6 to display correctly which does mean IE6 operates in quirks mode. I've used php which means you need to echo the xml prolog to get this to work.

  • JavaScript stuff

  • ToolMan.org - Direct Manipulation Using JavaScript and CSS toolman This fantastic ToolMan package lets visitors rearrange a list and edit the titles as they see fit. It could be a navigation menu or a bunch of MP3s. I've created a site list you can adjust. After advice from The Tool Man I got cookies working on the 'sorting in two dimensions' by adding a unique id to each list item. Server-side is good, but browser side enables visitors to manage content and navigation without authentication or databases.
  • Simonwillison.net - Executing JavaScript on page load simonwillison For a script to behave nicely in the presence of other scripts there's a need to assign a callback function directly to the window.onload handler. I've used this script with the PureDOMExplorer and TJK current location scripts.

  • PHP stuff

  • A List Apart - Manage content with PHP A List Apart I think the clarity of this explanation is very good for people starting out with PHP. 'Requiring' elements with PHP means you can re-use elements, such as the menu, throughout the site. Once that's done, any changes you make are global. It's a very straight forward guide to organising all elements of a web page for optimum flexibility and ease of content creation.
  • Contrastsweb.com - PHP style sheet switcher contrastweb This tutorial is Rob Ballou's clarification and improvement on Chris Clark's (ALA) PHP style sheet switcher. I've used it on the front page. I choose this method over Styleswitcher V2, which allows you to give the user control over any individual attribute. I believe it's the site owner's responsibility to decide how the site looks, although a print and visual impairment style is advisable. I also tried out the A List Apart method in my PHP tests section.
  • Evolt.org - PHP Login System evolt PHP Login System with Admin Features. Admin Centre, Randomly generated IDs, User levels, Visitor Tracking, Account Info, Forgot Password and email notification. There's also a beginner's tutorial referenced. Another tutorial I found useful was Basic User Autherntication from www.php-mysql-tutorial.com
  • KScripts.com - Pearl Search kscripts KScripts offers a fast, efficient, and highly customizable web site indexer and search engine written in pearl. It's got masses of features and there's automated scripts to help with the administration. A good selection of useful comments and instructions to help get it set up are provided.
  • Masuga.com - AJAX rating bar masuga This Multiple CSS/AJAX star rating bar from http://www.masuga.com/ is the dog's blox. Everything is set up so you can just stick as many as you like anywhere in your site. The mark-up for any star rating component is a very simple 'PHP require' with a unique ID. It automatically creates an entry in the MySQL table whenever anyone votes. Looks like a good place for design help at http://www.masugadesign.com/.
  • IBDHost.com - Contact form ostermiller IBDHost.com provides a free PHP email form. The PHP Script hides your email address, checks for required email (format) & blanks and can validate to XTHML 1.0. All this using PHP - no JavaScript required. Another good secure email form using Perl scripting can be found at http://ostermiller.org/.

  • Flash stuff

  • Flash Kit - Flash resources flashkit I've lost count of all the flash components I've borrowed. Here are just a few: Adam Bowman's Spider, Philip Radvan's Globe, Kirupa's loading random movie, Henrique's circle preloader, Assembler's clip preloader, Vemix's speed indication preloader, Dan Ivanov's Lightballs, Zer' turntable, Oleg's sanglass, Dynamic Calendar, Colour Picker.
  • N T Designs - .flas flashkit I used a zoom in - zoom out onmouseover effect in one of my flash movies to give a 'disco' feel. I got the actionscript and assistance from T. Norman of N T Designs. There's a number of handy flash effects, tutorials and code samples at the site.
  • Deconcept.com - W3C valid flash deconcept.org I've used two methods for 'embedding' flash, both are good. A List Apart's Satay method is simple and best for small movies or when you have a container movie (mine loads a random movie into the jar).
    Deconcept.org requires you to use JavaScript, but means you don't need a container, caters to screen readers and you can set parameter values (e.g transparency) so it was my preferred method for the movies.