Web coding

This section of our web site deals with the technical end of things.

Snippets of and links to xhtml, css and php code are what you’ll find here.

TXP vs WP performance

by Ben Hamilton.

So finally here is the promised follow-up to my first benchmak (Wordpress vs. Textpattern – a quick performance benchmark) which will compare Wordpress, Textpattern, Serendipity and Lightpress, the last one (currently) only being a frontend for Wordpress.

Sencer.de: Weblog-Software Benchmark II

Flash example

by Ben Hamilton.

I don’t normally point to sites using lots of dohickys. But this site is immaculate. It really impresses me.

http://www.nside.it/.

It uses a CD/CD Cover as the UI(User Interface) to great effect.

On loading it does play music. So have your speakers at an appropriate volume.

Tagged with: , .

Common fonts

by Ben Hamilton.

Nice list of fonts common to PC and Mac.


Here you can find a list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”. This is the reference I use when making web pages and I expect you will find it useful too (knowing what fonts can you use in a web page is essential for a web designer).

Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) – Web design tips & tricks

Tagged with: , , , , .

The CSS cheat sheet

by Ben Hamilton.

This cheat sheet for CSS has actually answered a question I had yesterday that I spent some time looking for, and still didn’t find.


The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

CSS Cheat Sheet – CSS – ILoveJackDaniels.com

I wanted to know what the CSS snippet achieved:


ol > li {

property: value; }

Now, thanks to Mr Daniels, I know.

It applies the style rules to <li> with <ol> as parent.

This sheet is now printed and on the wall.

Tagged with: , , .

Using lists for navigation

by Ben Hamilton.

I make almost all navigation bars (vertical and horizontal) as unordered lists (<ul>). If you wanting an easy to understand tutorial on how to do this, visit the CSS Resource, List Navigation Tutorial.

Tagged with: , , , , .

Typography series

by Ben Hamilton.

This article is the first of a series on typography. I’ve found some really interesting points that will make their way into the next web site I do.


The Measure is the name given to the width of a body of type. There are several units of measurement used for defining the Measure’s width. The three basic units are:

Mark Boulton | Information design | Journal | Five simple steps to better typography

Tagged with: , , .

Cool effect with XHTML and CSS

by Ben Hamilton.

Beyond the link is a very cool effect done entirely in XHTML and CSS. It really shows that with some out of the box thinking, almost anything is possible.

Of course you need a modern browser (hint: MS Internet Explorer isn’t one).

Go take a look at http://biocandy.dk/test.html.

Tagged with: , , .

3D CSS Box Model update

by Ben Hamilton.

Joh Hicks has updated the box model diagram, added CC license.


Since I posted the original 3D CSS Box Model diagram, I’ve had a lot of requests from people who want to re-use and/or adapt it. I always intended that it be free for the taking if someone found it useful, but people seem to like the security of a legal document. So its now released under a Creative Commons license to do with as you wish, and has been moved to a more permanent location at http://www.hicksdesign.co.uk/3dboxmodel.

3D Box Model is now Creative Commons : journal : // hicksdesign

This diagram makes it much easier to understand what’s going on when designing web pages with CSS.

Tagged with: , , .

Textpattern plugin ttag

by Ben Hamilton.

This Textpattern replaces the previous one.

I’ve updated the code, and changed the name.

First the name change, I found that in testing it, it was painful to type it frequently. So I’ve shortened the name to make it less painful.

The code changes: when previewing the body of an article which made use of ben_tag the tag word wouldn’t appear. Now it does.

Usage:

  • <txp:ttag>tagword</txp:ttag>
  • <txp:ttag url="http://example.com/">tagword</txp:ttag>

Some people want the URL to point somewhere other than Technorati.

Download ttag here.

Tagged with and .

CSS hacks to hide from browsers

by Ben Hamilton.

A nice list of to hide CSS code from various browsers can be found at Café Phespirit – CSS Hacks.

This is useful stuff. It allows you to code a web site to appear the way it should in modern and current browsers, and then either code it so that it degrades nicely in older browsers, or code it so that the CSS styling is ignored totally, giving a very bland but readable site.

Thanks to colak for the pointer.