Reducing Filesize by 10% (28th December 2007)

While developing Project Cerbera 2.0, I hosted it in a subdirectory. The PHP had a little function to ensure navigation links used relative URIs rather than absolute ones.

In a uncharacteristic moment of logic, I realised the PHP could detect when the site is at the root of the domain and be smart about that case. Duh!

Old Navigation List

From a page 3 levels deep in the site heirarchy: 

<div id="navigation">
<h1>Site Menu</h1>
<ul>
 <li><a href='../../.././'>Home</a>
 <li><a href='../../../blog/'>Blog</a>
 <li><a href='../../../misc/'>Thoughts</a>
 <li><a href='../../../web/'>Web Technology</a>
 <li title='You are in this section.'><a href='../../../ui/'><strong>User Interfaces</strong></a>
 <li><a href='../../../tools/'>Tools &amp; Editors</a>
 <li><a href='../../../gta1/'><acronym title='Grand Theft Auto'>GTA</acronym> 1</a>
 <li><a href='../../../gta2/'><acronym title='Grand Theft Auto'>GTA</acronym> 2</a>
 <li><a href='../../../gta3/'><acronym title='Grand Theft Auto'>GTA</acronym> 3</a>
 <li><a href='../../../gtavc/'><acronym title='Grand Theft Auto'>GTA</acronym> Vice City</a>
 <li><a href='../../../gtasa/'><acronym title='Grand Theft Auto'>GTA</acronym> San Andreas</a>
 <li><a href='../../../tutorials/'><acronym title='Grand Theft Auto'>GTA</acronym> Tutorials</a>
 <li><a href='../../../links/'><acronym title='Grand Theft Auto'>GTA</acronym> Links</a>
 <li><a href='../../../sitemap'>Site Map</a>
</ul>

New Navigation Markup

From the same page: 

<div id="navigation">
<h1>Site Menu</h1>
<ul>
 <li><a href='/'>Home</a>
 <li><a href='/blog/'>Blog</a>
 <li><a href='/misc/'>Thoughts</a>
 <li><a href='/web/'>Web Technology</a>
 <li title='You are in this section.'><a href='/ui/'><strong>User Interfaces</strong></a>
 <li><a href='/tools/'>Tools &amp; Editors</a>
 <li><a href='/gta1/'><acronym title='Grand Theft Auto'>GTA</acronym> 1</a>
 <li><a href='/gta2/'><acronym title='Grand Theft Auto'>GTA</acronym> 2</a>
 <li><a href='/gta3/'><acronym title='Grand Theft Auto'>GTA</acronym> 3</a>
 <li><a href='/gtavc/'><acronym title='Grand Theft Auto'>GTA</acronym> Vice City</a>
 <li><a href='/gtasa/'><acronym title='Grand Theft Auto'>GTA</acronym> San Andreas</a>
 <li><a href='/tutorials/'><acronym title='Grand Theft Auto'>GTA</acronym> Tutorials</a>
 <li><a href='/links/'><acronym title='Grand Theft Auto'>GTA</acronym> Links</a>
 <li><a href='/sitemap'>Site Map</a>
</ul>

Old markup was 1,058 bytes. New markup is 944 bytes. A saving of just over 10%.

Old Breadcrumb Markup

Same page as the navigation list samples: 

<p id='breadcrumb'>You are here: <a href='../../../'>Project Cerbera</a> > <a href='../../'>User Interfaces</a> > <a href='../' rel='up'>Windows XP</a> > Recycle Bin in Windows XP</p>

New Breadcrumb Markup

<p id='breadcrumb'>You are here: <a href='/' rel='home'>Project Cerbera</a> > <a href='../../'>User Interfaces</a> > <a href='../' rel='up'>Windows XP</a> > Recycle Bin in Windows XP</p>

The new code ends up just 3 bytes bigger than the old code, despite adding rel='home'.

Syntax Highlighting

Attribute values now use <span> instead of <var>:

Entity names now use <b><b> instead of <span>. This is 1 byte longer avoids class.