<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>blog · Welcome.</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/welcome" />
<!-- =================================================================================================================== -->
<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="previous" href="/blog/are_you_ready">
		older article →
	</a><a rel="next" href="/blog/krocos">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2009-11-01T16:03:00+00:00">
		<sup>4:03<abbr>pm</abbr> • 2009</sup>
		<abbr title="November">Nov</abbr> 1
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/blog/welcome" rel="bookmark tag">blog</a></li>
		<li><a href="/web-dev/welcome">web-dev</a></li>
		<li><a href="/code-is-art/welcome">code-is-art</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>Welcome.</h1>
<ol>
	<li><a href="#new-design">New Design</a></li>
	<li><a href="#new-nav">New Navigation</a></li>
	<li><a href="#focus">Focus on the Content</a></li>
	<li>
		<a href="#semi-static">Semi-Static</a>
		<ol>
			<li><a href="#thin-air">Thin Air</a></li>
			<li><a href="#half-baked">Half Baked</a></li>
			<li><a href="#hotlinking">Hotlinking</a></li>
		</ol>
	</li>
	<li><a href="#why">Why?</a></li>
</ol>
<p>
	<strong>This website</strong> renders best in a browser with native HTML5 support, capable of CSS3 media queries and
	passing the ACID 2 test, as well as various advanced CSS features beyond that.
	<br /><br />
	If this site is white instead of orange, you should
	<a href="http://whatbrowser.org/browser/" rel="external">upgrade your browser</a>.
</p><p>
	This site’s <a href="/blog/welcome.html5">HTML</a> uses no <code>&lt;div&gt;</code>s, no
	<code>&lt;span&gt;</code>s, and the <a href="/design/">CSS</a> has no classes and no IDs. There is no JavaScript.
	All of the code, including the <a href="/php">PHP</a>, is free for you to take, study and re-use how you see fit.
	It is a work of love for this medium.<br />
	<br />
	Welcome to Camen Design.
</p>

<hr />

<p>
	<strong>If you’ve been</strong> following this site before, this is now <abbr title="version ">v</abbr>0.3 of the
	site.<br />
	The main things I changed are:
</p>


<h2 id="new-design">New Design</h2>
<p>
	I didn’t redesign with v0.2, mostly because I wasn’t unhappy with the original design anyway, but as I started
	making progress with 0.3 I fell more and more in love with the design and I can’t stand how the old site looked
	now <samp>:P</samp>. Here it is for nostalgia:
</p>
<figure>
	<a href="/blog/welcome/old.png" type="image/png">
		<img src="/blog/welcome/old_thumb.jpg" alt="Screenshot of old site design" width="600" height="450" />
	</a>
	<figcaption>v0.2</figcaption>
</figure>
<p>
	You can still download the source code for the old site <a href="/.system/archive/0_2/">here</a>.
	<br /><br />
	You should be looking at something like this:
</p>
<figure>
	<a href="/blog/welcome/hifi.png" type="image/png">
		<img src="/blog/welcome/hifi_thumb.jpg" alt="Screenshot of new site design" width="600" height="450" />
	</a>
	<figcaption>v0.3</figcaption>
</figure>
<p>
	This new site makes use of many new browser features available since the old site (which waited for Firefox 3.0 to
	be released). Embedded fonts, box-shadows, CSS3 media queries and more.
</p><p>
	Because only fairly recent browsers support CSS3 media queries the site’s CSS staggers support by laying down a 
	basic print-style and then building a lo-fi version of the site for browsers without CSS3 media queries, and then
	the full hi-fi design is added on top of that.
	<br /><br />
	If you view the site using Firefox 3.0 or Camino 2.0 you’ll see this:
</p>
<figure>
	<a href="/blog/welcome/lofi.png" type="image/png">
		<img src="/blog/welcome/lofi_thumb.jpg" alt="Screenshot of the new site’s lo-fi design" width="600" height="450" />
	</a>
	<figcaption>v0.3 “lo-fi” mode</figcaption>
</figure>
<p>
	I would offer this design as an alternative stylesheet but the following two bugs are preventing that:
	<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=79021" rel="external">#79021</a> &amp;
	<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=216537" rel="external">#216537</a> <small>(yes, those were
	filed in 2001 &amp; 2003 respectively)</small>. If you have any means to pull some strings to get those bugs fixed,
	please do, and let me know; thanks.
</p><p>
	Because of this staggered CSS code, the site also prints beautifully. Every line in the site is 19px or a multiple
	thereof; this means that the site can even be printed on lined-paper!
</p>
<img src="/blog/welcome/print_thumb.jpg" alt="Screenshot of PDF print preview of the new site" width="600" height="450" />
<p>
	And, I suppose I may as well support the iPhone, despite not having one myself. Since I can only test with the
	iPhone Simulator, could you report any issues with the design you have on a real device.
</p>
<img src="/blog/welcome/iphone_thumb.png" alt="Screenshot of the website on an iPhone" width="640" height="344" />
<p>
	The iPhone doesn’t support <code>position: fixed</code>, so unfortunately you have to scroll back to the top to
	navigate, I’ve found that in the simulator you can click on the phone’s status bar at the top of the screen to
	jump back to the top.
</p><p>
	I’ve also fixed the design into a non-panning screen, more like an app than how you view most sites on the device.
	This reduces the complexity of navigation greatly (the page won’t accidentally slide left or right as you scroll),
	and focuses on the content. That said, however, you can’t zoom. I’ve made extra alterations in the CSS for the
	landscape mode to give you a larger view: the text reflows to the width so more fits on one screen, and images scale
	to the width too, so if a screenshot is too small in portrait, try rotating the iPhone and it’ll appear much
	larger.
</p>
<img src="/blog/welcome/iphone-img_thumb.png" alt="Screenshot of an image in the site on an iPhone in landscape" width="640" height="344" />
<p>
	Again, if you’re having problems with the site on the iPhone please <a href="mailto:kroc@camendesign.com">contact
	me</a> with suggestions.
</p>


<h2 id="new-nav">New Navigation</h2>
<p>
	Before, the site was split into five articles per page. I didn’t like having to scroll about to change from one
	page to the next. Now each article is its own page and the next / previous links go article by article. The category
	links to the left of an article take you to the same article, but where it lies within that category; so you can
	page through the articles in that category. The old site let you page through the main types (blog | photo | code
	<abbr title="et cetera">&amp;c.</abbr>) but not the tags (web-dev | annoyances | inspiration
	<abbr title="et cetera">&amp;c.</abbr>), which you can now do. It may seem a little disorientating at first, but I
	think it’s a change for the better that you’ll get used to.
</p>


<h2 id="focus">Focus on the Content</h2>
<p>
	The site was pretty spartan to begin with, as I hate <a href="/art/if-i-designed-engadget">needless side-panes,
	content-modules, widgets and gumpf</a>. The ‘header’ has been moved to the bottom of the screen to focus more
	on the content. I wanted to downplay the brand. You already know this is Camen Design, the URL says that; no need to
	repeat it 1’000 times across the site.
</p><p>
	The “tweet” section has been renamed “<a href="/quote/">quote</a>” as I don’t want to favour one
	person’s brand, especially Web 2.0 brands which come and go so quickly. Twitter might be great, but one day the
	next shiny thing will come along and we’ll all fly off there. I also now quote other people and places too in the
	section.
</p><p>
	The giant Creative Commons logo and enclosure icons are often sources of complaint. It being larger than anything
	else, draws attention away from the content! Content is worthless unless you know what you can do with it. On my old
	site the licence was relegated to a tiny line underneath each article. Here, I want to encourage the re-use of my
	content. How is that not important!? It’s a fundamental freedom that must be communicated <em>first</em>.
</p>


<h2 id="semi-static">Semi-Static</h2>
<p>
	<a href="/.system/archive/0_1/">v0.1</a> of the site used a <a href="/code/uth3_sqlite">SQLite database</a> and
	a simple admin section for editing content. This was ditched in v0.2 for a <a href="/uth5_new-website-ish">number
	of reasons</a>, the main two being that editing HTML in a browser text-box was awful and unreliable, and that the
	database meant that I couldn’t edit the site as a whole like I can with text files on my hard disk—there was no
	global search and replace, and adding one would just add more work re-implementing the wheel when the text editor on
	my computer could already do that.
</p><p>
	I created <a href="/code/remarkable">ReMarkable</a> to solve the HTML problem, providing me with a light-weight
	text-format for writing articles. v0.2 of the site switched to a <a href="/.system/archive/0_2/publish.php">static
	publishing system</a> that searched through a folder of text files and spat out all the pages in the site which
	were then uploaded.
</p><p>
	Whilst I could now use my <a href="http://macromates.com" rel="external">favourite text editor</a> and manage the
	site as a collection of files—rather than isolated binary blobs—I could only edit and upload the site from my
	main computer at home, which was fine, until I got a <a href="/blog/of_netbooks">netbook</a> and a
	<a href="/writing/why_wifi">3G connection</a>.
</p><p>
	Now I wanted to blog from anywhere, and plan to blog more regularly but ironically I had removed the online editing
	capability from my site. Now I had the right text format with ReMarkable, editing online wouldn’t be so bad, but
	it was vital that with <abbr title="version ">v</abbr>0.3 I could edit both online and off, being able to use
	TextMate at home, but a <dfn title="content management system">CMS</dfn> when on the move.
</p>


<h3 id="thin-air">Thin Air</h3>
<p>
	I hate content management systems and <a href="/quote/quoth_the_teabag">frameworks</a> and all that junk because
	they are simply a by-product of web-browsers and web-servers not being tightly integrated into the perfectly
	functioning ‘content management system’ we all use called an ‘operating system’. My OS already handles
	hundreds of thousands of files quite adequately, and my text-editor is better than any browser will ever be able to
	replicate.
</p><p>
	Because of this, I had the inspiration for the core idea behind v0.3—that is, the website should be nothing but a
	folder of content and the server should just produce the site out of ‘thin air’. The content and the server-code
	should be 100% separate, so that the whole publishing system could be swapped out with something else, and not a
	line of the content would have to be changed. I think I have mostly achieved that, given the limitations of Apache
	and PHP that I constantly ran into.
</p><p>
	The web-root of this website has a folder for each content-type, and each article in the site is
	<a href="/blog/welcome.rem">a ReMarkable text file</a>.
</p>
<img src="/blog/welcome/webroot.png" alt="A screenshot of the folder hierarchy of articles on this site" width="236" height="449" />
<p>
	<small>(For size, the folders containing the article images and other resources are not shown here, but basically
	for each article like “/blog/welcome” there can exist a folder of the same name
	“<a href="/blog/welcome/">/blog/welcome/</a>” to hold images for the article.)</small>
</p><p>
	That really is this website that you’re looking at. The magic is three hidden objects that handle all server-side
	functionality. There’s a hidden folder “/.system” which contains the PHP code and site design (HTML templates,
	CSS <abbr title="et cetera">&amp;c.</abbr>).
</p>
<img src="/blog/welcome/invisibles.png" alt="A screenshot of the hidden objects that make up ‘Thin Air’" width="241" height="225" />
<p>
	The <a href="/.htaccess">.htaccess file</a> maps URLs to the right file / action. When you view an article, the
	.htaccess file checks the .cache folder for a cached copy of the HTML and if there, will serve that. This keeps
	things snappy and static. The cache files are already gzipped, ready to go. If the cache file does not exist for
	that page, <a href="/.system/article.php">article.php</a> is called to produce the HTML and save it to the cache,
	simples.
</p><p>
	<abbr title="By the way">BTW</abbr>, are you surprised that you can view the .htaccess file and PHP files, live, on
	this site? Open source should mean “Open &gt; Source”, there’s no difference between the code running on my
	server and a zip file you could download, so why hide something you are allowed to read anyway?
</p>


<h3 id="half-baked">Half Baked</h3>
<p>
	I call this system ‘Thin Air’ and I hope to have some kind of re-usable distribution of it available for people
	to make their own sites with sometime in the future. You can already download the code for this site and re-purpose
	it how you please, but it could do with being more readily accessible in an easy download with full documentation.
</p>
<img src="/blog/welcome/thin_air_thumb.png" alt="‘Thin Air’ logo" width="600" height="345" />
<p>
	At the moment this system is only half complete. I didn’t want to hold back the front-end benefits with the
	redesign just because of the back-end. I’m getting this site out to you early and will continue to polish and
	finalise all aspects of it over time.
	<br /><br />
	The site is still missing the ability to edit files online, but I have been working on that:
</p>
<img src="/blog/welcome/edit_thumb.jpg" alt="Screenshot of editing an article online" width="600" height="450" />
<p>
	It’s a very simple system that’s just a text box that uses <abbr>AJAX</abbr> to fetch the ReMarkable output from
	the server to give you a preview.
</p>


<h3 id="hotlinking">Hotlinking</h3>
<p>
	I’ve never had a particularly major problem with hotlinking, but I’ve never done a particularly well designed
	job of blocking it. This time around, I decided to do a better job and make something almost likeable.
</p><p>
	The <a href="/.system/hotlink.php">hotlinker</a> takes an image being hotlinked, and runs a few filters on it so
	that it comes out like this:
</p>
<img src="/blog/welcome/hotlink.jpg" alt="Example of an image that has been hotlinked, it is slightly blurred and in greyscale" width="600" height="338" />
<p>
	The mod_rewrite is supposed to serve the original images to Google, Yahoo, Bloglines and
	<a href="http://feedafever.com/" rel="external">Fever</a> installs (if at <samp>//fever.*</samp> or
	<samp>//*/fever/</samp>) but if you’re getting the grey images instead of normal in your RSS reader of choice,
	then please <a href="mailto:kroc@camendesign.com">contact me</a> so I can add it to the allowed list.
</p>


<h2 id="why">Why?</h2>
<p>
	The question is usually “how?”. People wish to know how I made this site. I couldn’t really tell you
	specifically, read the code. I’ve tried to describe the <a href="/code/how_to_learn_html5">unspecific
	process</a> before, but really it’s the principles that matter. It’s simple: if you care about your site, your
	code, your design—it will be good, to you and that’s all that matters when it comes to a personal site.
</p><p>
	This website continues sticking to <a href="/blog/hello">its principles</a> in that it is here to please me, and
	not anybody else. This website is uncompromising, unflinching and undeviating from my personal ideals of design and
	code—that is, that code is art. Here is some advice I can give about design &amp; web-development:
</p>
<dl>
	<dt>Don’t look at ‘CSS gallery’ sites, stay well clear of them</dt>
	<dd>
		<p>
			Don’t <em>ever</em> let a social group’s idea of what is right or best sway your own internal
			compass as to what you define as quality. These so called inspiration / CSS galleries are nothing
			but Photoshop bukkake. The actual HTML and CSS is <em>never</em> the focus of these sites—the
			majority are usually awful sliced designs with even worse CSS produced by Dreamweaver. If any of
			these sites were about the actual quality of the code and <em>design</em> (rather than purely how
			many pixels one can cram in), then my site would be in the top ten in every one.
		</p><p>
			These sites just make you feel inadequate and less of a designer, just because you can’t master
			Photoshop. Photoshop is completely irrelevant when it comes to proper web-development. Your tools
			are HTML &amp; CSS, not some over-priced, crappy piece of Adobe software.
		</p><p>
			Design is how well thought-out something is, not how many layers in your PSD you have. Armed with
			nothing but free software, even on the most basic computer, you can single-handily invent the next
			greatest website, rivalling the biggest corporations with highly paid developers.
		</p>
		<blockquote>
			<p>
				Never forget that—with just Notepad, you can take on the world.
			</p>
			<cite>Kroc Camen</cite>
		</blockquote>
	</dd>
	<dt>Absorb design, don’t take other people’s word for it</dt>
	<dd>
		Just absorb good design ideas from the sites you come across. Don’t write it down, don’t bookmark it.
		Take someone else’s idea as the input to your design process, and output something new. Evaluate design
		ideas for yourself, do not take it as given. The truly good ideas will float to the top, the mediocre and
		bad ideas will sink and be forgotten. Don’t needlessly clutch on to mediocre and bad ideas by writing
		them down or bookmarking them.
	</dd>
	<dt>Always strive for better</dt>
	<dd>
		Purer, cleaner, simpler, more elegant. Don’t accept <em>anything</em> anybody else does as good enough.
		You are the one who defines what is good enough for you. I rarely—if ever—use third party code, because
		I always end up designing <a href="/code/remarkable">something much, much better</a>. Accept defeat only
		when you can master something and you don’t care enough to do it yourself
		(<abbr title="for example,">e.g.</abbr> I have no desire to fight with IE’s bad JavaScript, so I use
		<a href="http://prototypejs.org/" rel="external">Prototype</a>). Keep your eye open for ways to dump
		reliance upon third-party code when the future arrives.
	</dd>
	<dt>Fail</dt>
	<dd>
		<p>
			Fail constantly. Fail every day. Fail in everything you do. If you are not failing, then you are
			not learning. If you are not failing, you are not designing properly. I’ve been failing at
			programming and designing all my life, I can barely name anything that I’ve ever actually
			finished. I have a list of failed projects a mile long. If something doesn’t work out, just do
			something else—better. One day, one failed project will lay the foundations for something that
			succeeds.
		</p><p>
			Don’t use others as the metric by which you measure yourself. Don’t try to be as good as
			anybody else (including me), be as good as yourself can be. There are better designers and better
			programmers out there than me, but I don’t care—this is the best damn website <em>I</em> can
			make. I made every decision, I sweated the details, I cared about every byte as I hand crafted it.
			Nobody can do that for you. Even if you’ve only just started learning web-development, all you
			need to ask is “did I really try my best?”.
		</p><p>
			I’m not saying you should be arrogant and completely unopened to feedback, no. Rather, that you
			are not a slave to other people’s suggestions. Love what you do, and it will suffice.
		</p>
	</dd>
</dl>
<p>
	Web-design is a lot like high-jumping. <em>You</em> set the bar how high you want to jump. You won’t always clear
	it, but you will continue to work at it until you do, and then you can move it up a notch.
	<br /><br />
	With that, I bid you adieu.
</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/welcome.rem">Rem</a> •
		<a href="/blog/welcome.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 === -->