<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>blog · Hello.</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/blog/rss" title="Just blog" />
<link rel="canonical" href="/blog/hello" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/" rel="tag">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul><a rel="next" href="/blog/stop_writing_software">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2008-06-18T10:21:00+01:00">
		<sup>10:21<abbr>am</abbr> • 2008</sup>
		<abbr title="June">Jun</abbr> 18
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/blog/hello" rel="bookmark tag">blog</a></li>
		<li><a href="/code-is-art/hello">code-is-art</a></li>
		<li><a href="/web-dev/hello">web-dev</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>Hello.</h1>
<p>
	<strong>This site</strong> renders best in an
	<a href="http://www.webstandards.org/files/acid2/test.html" rel="external">Acid 2</a> compliant browser.<br />
	You can discover why in the rest of this article.<br />
	Please use either <a href="http://getfirefox.com" rel="external">Firefox 3</a>,
	<a href="http://apple.com/uk/safari/" rel="external">Safari</a> or
	<a href="http://opera.com/" rel="external">Opera</a>.
</p>


<h2 id="hello-principles">The Principles <em>of</em> Camen Design:</h2>
<h3 id="hello-i">Ⅰ. Code <em>Is</em> Art</h3>
<p>
	If you <em>don’t</em> believe this, close your browser now. There is nothing I can do to help you.
</p><p>
	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.
</p>


<h3 id="hello-ii">Ⅱ. Solve Only <em>My</em> Problem</h3>
<blockquote>
	<p>
		The Internet is full of generic code that solves generic problems, generically.
	</p>
</blockquote>
<p>
	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.
</p><p>
	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?
</p>
<blockquote>
	<p>
		The standards have been around for over 10 years.<br />
		Using an incapable browser is your problem, not mine.
	</p>
	<cite>Kroc Camen</cite>
</blockquote>


<h3 id="hello-iii">Ⅲ. Let Everybody Else Do <em>Their</em> Job</h3>
<p>
	Copy &amp; 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 &amp; paste
	has existed on computers longer than I have been alive… use them.<br />
	<br />
	I don’t obsfucate my <a href="mailto:kroc@camendesign.com">email address</a>, Google Mail works.
</p><p>
	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 <em>truly</em> have something to say to me about what’s on this site, they will <em>want</em>
	to e-mail me. Public comment threads just encourage people to write a lot of words, and <em>say</em> nothing.
</p><p>
	This is the Internet in <em>2008</em>; 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 <em>lazy-filter</em> I so desire.
</p><p>
	Validation logos / links do not tell you anything useful. You can view the <a href="/blog/hello.html5">HTML</a> /
	<a href="/design/">CSS</a> and even <a href="/php">PHP</a> 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.<br />
	<br />
	But it goes much deeper than this.<br />
	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 <em>respects</em> you.
</p>


<h2 id="hello-how">How It Was Done</h2>
<p>
	The simplicity of this website’s look totally belies the simplicity of the <a href="/blog/hello.html5">HTML</a>
	&amp; <a href="/design/">CSS</a> underneath.
</p>
<ul>
	<li>There are no <code>&lt;div&gt;</code>s</li>
	<li>There are no classes, none</li>
	<li>There are no IDs <small>(only bookmarks for H2, H3 <abbr title="et cetera">&amp;c.</abbr>)</small></li>
</ul>
<p>
	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.
</p><p>
	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.<br />
	<br />
	But how many <em>developers</em> actually <em>like</em> Internet Explorer?
</p><p>
	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.
</p>
<blockquote>
	<p>
		Seriously, as a skilled one-man-band web-developer creating your <em>personal</em> site,<br />
		who is it that you care about that <em>willingly</em> uses IE6 that you have to support them?
	</p>
	<cite>Kroc Camen</cite>
</blockquote>
<p>
	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.
</p><p>
	Creating this website without any thought of Internet Explorer has been a joy. CSS “just works” in Firefox,
	Opera &amp; 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.
</p>


<h3 id="hello-proto">Prototyping</h3>
<p>
	I started out by using the <a href="http://code.google.com/p/blueprintcss/" rel="external">Blueprint</a> 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 <code>padding</code> / <code>margin</code>
	<abbr title="et cetera">&amp;c</abbr>. 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
	<a href="http://webtypography.net/sxsw2007/" rel="external"><cite>Web Typography Sucks</cite></a> presentation.
</p><p>
	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 <em>blueprint</em>.
</p><p>
	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.
</p>


<h3 id="hello-html5">HTML5</h3>
<p>
	All credit goes to <a href="http://intertwingly.net/blog/" rel="external">Sam Ruby</a> for showing that HTML5 is
	doable in the here and now, and just how much it simplifies the document structure.
</p><p>
	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.
</p><p>
	It was <a href="http://www.w3.org/TR/html5-diff/#language" rel="external">adopting HTML5</a> 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).
</p><p>
	A <a href="/quote/">tweet</a> is just a <code>&lt;blockquote&gt;</code>. A blog is a
	<code>&lt;section&gt;</code> (representing a page). A photo or piece of art is a
	<a href="http://www.whatwg.org/specs/web-apps/current-work/#the-figure" rel="external"><code>&lt;figure&gt;</code></a>
	(although technically, an<code>&lt;h1&gt;</code> proceeded by a <code>&lt;section&gt;</code>, containing a
	<code>&lt;figure&gt;</code>; so that I could add blog-like content underneath the image). And in the future, I
	could add <code>&lt;audio&gt;</code> &amp; <code>&lt;video&gt;</code> content types <samp>:)</samp>
</p><p>
	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
	use a <code>&lt;figure&gt;</code> with the <code>&lt;legend&gt;</code> inside you must always serve as XML as both
	Firefox 3 and Safari have major issues with a <code>&lt;legend&gt;</code> not being inside a
	<code>&lt;fieldset&gt;</code> (Firefox inserts an implicit <code>&lt;fieldset&gt;</code> into the document
	structure).
</p><p>
	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 <a href="/photo/">photo</a> or <a href="/art/">art</a> sections is a
	legend.
</p>

<pre><code>&lt;figure&gt;
	&lt;legend&gt;&lt;a href="/data/content-media/photo/DSC00511.JPG" type="image/jpeg"&gt;
		DSC00511.JPG (494.4 KB)
	&lt;/a&gt;&lt;/legend&gt;
	&lt;a href="/data/content-media/photo/DSC00511.JPG" type="image/jpeg"&gt;
		&lt;img src="/data/content-media/photo/DSC00511_preview.jpg" width="640" height="480" /&gt;
	&lt;/a&gt;
&lt;/figure&gt;</code></pre>


<h2 id="hello-php">PHP</h2>
<p>
	I like compact code. Or more specifically, I hate spawning temporary variables.<br />
	I’ll write more about the PHP on this site later if there’s interest, but you’re
	<a href="/writing/when_its_better">free</a> to <a href="/php">explore the code</a> for yourself.
</p><p>
	The fast caching system used in the site was inspired by the code of
	<a href="http://osnews.com" rel="external">OSNews</a>, written by Adam S.
	(<a href="http://firsttube.com" rel="external">firsttube.com</a>) 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.
</p>

<hr />

<p>
	<strong>Thank you</strong>, 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.<br />
	<br />
	Kind Regards,
</p>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/blog/hello.rem">Rem</a> •
		<a href="/blog/hello.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->