This site renders best in an Acid
2 compliant browser.
You can discover why in the rest of this article.
Please use either Firefox 3,
Safari or Opera.
The Principles of Camen Design:
Ⅰ. Code Is Art
If you don’t believe this, close your browser now. There is nothing I can do to help you.
Not all code is art, just as much as asking for a cup of sugar, is not poetry. However, just as poetry is the
considered selection of words to create an underlying metaphor - the considered selection of functions can formulate
artistic code that really embeds the programmer’s unique personality into the design.
Ⅱ. Solve Only My Problem
The Internet is full of generic code that solves generic problems, generically.
Every line of this website has been fretted over, to reduce it and hone the whole cohesive mass into an absolute
straight forward solution of my problem: my website.
This website would not have been possible for me to create if I had to constantly keep in my head the design
considerations of people I have never met, nor even care about. This website does not work in Internet Explorer, and
nor will it ever. I don’t use Internet Explorer. I don’t use Windows as my primary OS. I don’t even care what
Windows people do. This is my personal website, so why should I cripple my code trying to solve their problems?
The standards have been around for over 10 years.
Using an incapable browser is your problem, not mine.
Ⅲ. Let Everybody Else Do Their Job
Copy & paste has existed on computers longer than I have been alive. You will find no social bookmarking links
on this site; firstly, because I find such sites a scourge on the Internet, and secondly because copy & paste
has existed on computers longer than I have been alive… use them.
I don’t obsfucate my email address, Google Mail works.
E-mail has also been around for longer than I’ve been alive, therefore there are no public comment threads on this
website. If people truly have something to say to me about what’s on this site, they will want
to e-mail me. Public comment threads just encourage people to write a lot of words, and say nothing.
This is the Internet in 2008; if you must reply to me publicly, anybody can get a free blog on any street
corner of the Internet. Having no comments is the perfect lazy-filter I so desire.
Validation logos / links do not tell you anything useful. You can view the HTML /
CSS and even PHP of this site and decide if it’s any good yourself.
All validation will tell you is that a machine was able to read the code.
But it goes much deeper than this.
Your browser, your computer and most importantly– you, are perfectly capable of doing the right thing. You do not
need to be cajoled with re-implementations of the wheel. This website respects you.
How It Was Done
The simplicity of this website’s look totally belies the simplicity of the HTML
& CSS underneath.
- There are no
- There are no classes, none
- There are no IDs (only bookmarks for H2, H3 &c.)
So how is this possible? It’s possible because it has been possible for several years now. The fact of the matter
is that people are tied both financially and psychologically, to Internet Explorer.
Internet Explorer’s dire support for CSS has meant that in order to support everybody, web-developers have become
used to making messy code full of classes to work around the lack of even the most basic selectors.
But how many developers actually like Internet Explorer?
We are brought down to this kindergarten level of CSS because of job requirements. Developers work for businesses
that have to support IE6 users. But too many developers then take this broken method of development and apply it to
their own personal websites; inventing ingenious hacks to support IE6 users.
Seriously, as a skilled one-man-band web-developer creating your personal site,
who is it that you care about that willingly uses IE6 that you have to support them?
Tell them to download Firefox, Opera or Safari, and you will be doing the Internet a world of good - but more
importantly you will be doing yourself a whole world of good.
Creating this website without any thought of Internet Explorer has been a joy. CSS “just works” in Firefox,
Opera & Safari, and I have been able to push my skills to the limit by not holding myself back on users using an
outdated, broken and insecure browser on a platform that has the choice of many other browsers—all better.
I started out by using the Blueprint CSS framework to mock-up
a layout that obeyed a strict reading rhythm and a sensible metric for measurements. Before, I would usually just
pick whatever number seems sensible for my
&c. and whilst that is still fine, for this website I wanted to explore more
precise typography (for which I am still just a beginner) after being inspired by the
Web Typography Sucks presentation.
The problem with Blueprint is that as a framework, people forget to take the scaffolding down! The fact that
Blueprint includes tools that let you compress the code down so that you can leave it in your site, defeats the very
nature of a blueprint.
Regardless, my thanks does go to them for helping me define a nice solid feeling to the site by not having to
randomly make up sizes on the spot.
All credit goes to Sam Ruby for showing that HTML5 is doable in the
here and now, and just how much it simplifies the document structure.
When I started this site, I had set myself the goal of no more than three IDs and no more than three classes for the
CSS. This would have been achievable in HTML 4 / XHTML, but the CSS-selectors would have become so long, and
cryptic, that it would not prove much.
It was adopting HTML5 that struck me with the idea that
each unique “content type” on my website could use a different HTML element to represent it, and thus require no
classes at all (and be semantically cute).
A tweet is just a
<blockquote>. A blog is a
<section> (representing a page). A photo or piece of art is a
<h1> proceeded by a
<section>, containing a
<figure>; so that I could add blog-like content underneath the image). And in the future, I
<video> content types :)
There are a few hacks involved in using HTML5 though. Pre-Firefox 3β5, you must serve HTML5 as XML otherwise the
new HTML5 elements are permanently inline and won’t accept block level content in them. However, if you have to
<figure> with the
<legend> inside you must always serve as XML as both
Firefox 3 and Safari have major issues with a
<legend> not being inside a
<fieldset> (Firefox inserts an implicit
<fieldset> into the document
Legends have always been very hard to style… so you’ll be glad to know that the the yellow title that appears
when you mouse over a picture in the photo or art sections is a
<legend><a href="/data/content-media/photo/DSC00511.JPG" type="image/jpeg">
DSC00511.JPG (494.4 KB)
<a href="/data/content-media/photo/DSC00511.JPG" type="image/jpeg">
<img src="/data/content-media/photo/DSC00511_preview.jpg" width="640" height="480" />
I like compact code. Or more specifically, I hate spawning temporary variables.
I’ll write more about the PHP on this site later if there’s interest, but you’re
free to explore the code for yourself.
The fast caching system used in the site was inspired by the code of
OSNews, written by Adam S.
(firsttube.com) which eschews all beauty for practicality (a
completely fair purpose given the traffic requirements). This helped me par down my caching system to a bear minimal
amount of lines and gave me a better overall perspective of fast code.
Thank you, thank you Mozilla for such a wonderful, love-filled product that has been such a joy to
develop for. This website is not finished, nor will it ever be. It will improve as the browsers do; but it’s been
such a relief to develop in a way that should-have-been for the last 10 years. Keep up the great work.