<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>blog · 0.2 Thoughts</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/02-thoughts" />
<!-- =================================================================================================================== -->
<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/stop_writing_software">
		older article →
	</a><a rel="next" href="/blog/sentinel-returns_guide">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2008-07-13T16:40:00+01:00">
		<sup>4:40<abbr>pm</abbr> • 2008</sup>
		<abbr title="July">Jul</abbr> 13
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/blog/02-thoughts" rel="bookmark tag">blog</a></li>
		<li><a href="/code-is-art/02-thoughts">code-is-art</a></li>
		<li><a href="/web-dev/02-thoughts">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>0.2 Thoughts</h1>
<p>
	<strong>This website is designed to never be finished;</strong> instead constantly improving over time. Therefore I
	call this website “0.1” instead of a “1.0” or Beta (<q>Beta</q> would imply that there was a final product
	somewhere nearby, which there isn’t).
</p><p>
	As much as this site does new, and as much as I’ve truly pushed myself to the limit with the code in this site,
	there are many flaws and I’ve been thinking about what I’d like to achieve with 0.2.
</p><p>
	After being inspired by
	<a href="http://miksago.deviantart.com/art/Yet-To-Be-Branded-Website-WIP-87656172" rel="external">this design</a>,
	here’s a run-down of some of the heavy flaws that need tackling:
</p>


<h2 id="02-less">Less Scope</h2>
<p>
	At the moment most of the complexity in the CSS isn’t from using no classes, it’s from trying to restrict CSS
	styles being applied in certain places where there are multiple levels of scope.
</p><p>
	One good example of this is the <a href="/code/uth2_css3-hyperlinks">hyperlink scheme</a>. This was only recently
	designed and much of the complications in my implementation (<abbr title="versus">vs.</abbr> the sample code) is
	preventing the link scheme applying to all the links outside of the content entries (the header, tag-list
	<abbr title="et cetera">&amp;c.</abbr>). It’s a minefield of do, and do<code>:not</code>s
</p><p>
	What I’d like to achieve in 0.2 is to have the hyperlink scheme apply to all links on the site and then exclude
	individual areas as required, rather than the current practice of applying to only one area (below body level) and
	trying messily to exclude everywhere outside.
</p>


<h2 id="02-links">Squinty Links</h2>
<p>
	I’m not very good with graphic design and the look of this site has never been up to scratch. I didn’t want the
	blue background but couldn’t find anything to go with the orange. Secondly, the whole design lends itself to small
	text on the background areas and so it’s become unavoidable having tiny tag links which render too small on an
	iPhone.
</p><p>
	In 0.2 I’d like something that doesn’t sink into tiny text sizes, but at the same time I really hate web-design
	fads. This website will never have diagonal stripes in it, and it will not be brown.
</p>


<h2 id="02-ems"><em>Ems</em></h2>
<p>
	I did <a href="/blog/02-thoughts/design-ems.css" type="text/css">try</a> to create an em-based layout for the
	site, but there were too many flaws from trying to tack it onto an existing design rather than designing with ems in
	mind from the beginning.
</p><p>
	With 0.2 I’ll try to do everything in ems from the beginning and that should hopefully make the whole thing less
	twitchy.
</p>


<h2 id="02-pings">Pingbacks</h2>
<p>
	The <a href="/blog/stop_writing_software">Reddit invasion</a> did prove one thing though: the ’Web is as
	mashable as ever. Whilst I don’t care what Reddit has to say, the most interesting thing has been seeing people
	blog <em>about</em> the site. Some <a href="http://simonwillison.net/2008/Jul/4/camen/" rel="external">quotes</a>
	have been picked up, and some people have said some truly
	<a href="http://twitter.com/Klondike/statuses/854897104" rel="external">nice</a>
	<a href="http://twitter.com/seanx2/statuses/849903734" rel="external">things</a>.
</p><p>
	In order to publicly respond better, 0.2 could do with pingback support. The major code/design issue with this is
	dealing with potential abuse. I won’t be listing pingbacks on the site at all; if someone has something worth
	talking about I’ll blog about it. Listing pingbacks just adds to the link-incest.
</p>


<h2 id="02-admin">Administration</h2>
<p>
	As I’ve started using this site to regularly post content, it has become apparent how flawed and thoughtless
	I’ve been to the administration side of things. I wanted an interface that was quick to post with, to encourage me
	to write often, which I’ve mostly done.
</p>
<img src="/blog/02-thoughts/02-thoughts-meta.png" alt="Screenshot of my admin interface" title="Hmm, juicy meta" width="640" height="472" />
<p>
	However, when it comes to writing large articles, a simple text field is never going to replicate the editing power
	I have with <a href="http://macromates.com" rel="external">TextMate</a>. I’ve got no search and replace, no
	syntax highlighting, no keyboard shortcuts. Trying to add these things is just <a href="/art/aol">re-implementing
	the wheel</a>, and thus breaks my very own design principle №3, <a href="/blog/hello#hello-iii"><q>Let Everybody
	Else Do Their Job</q></a>
</p><p>
	TextMate is already the best HTML editor I could have, and my O.S. is already better at managing files then any
	interface I could implement. I end up too often copying my writing into TextMate and pasting it back into the
	website to preview.
</p><p>
	The solution is to get rid of the database and admin interface, and manage the website as a folder of text files on
	my computer. The PHP will then simply process and then cache these text files. All I have to do is sync the FTP and
	clear the cache to publish the information. My source files won’t be in a binary blob, and I can easily work on
	drafts without fear of the browser crashing (TextMate does not crash).
</p><p>
	Credit for this idea goes to <a href="http://stevenf.com" rel="external">Steven Frank</a> <ins>of
	<a href="http://panic.com" rel="external">Panic</a> fame</ins> and his elegant blogging solution
	<a href="http://stevenf.com/archive/laguna.php" rel="external"><q>Laguna 2</q></a>. When I saw this, before I had
	released my site, it knocked me back a peg or two. I thought I had an elegant and minimalist bit of code, and this
	just blew it out of the water. I knew this is where I had to go too, but wouldn’t have time to rewrite my site
	before the release in June.
</p>
<img src="/blog/02-thoughts/laguna2.png" alt="Laguna 2, in all its glory" title="Laguna 2" width="280" height="110" />
<p>
	So with 0.2, I want to throw away a lot of code. Throw away the online admin form (or keep it just for posting from
	public computers), throw away the database and make this code only do exactly what is needed and no more.
</p>


<h2 id="02-urls">URLs</h2>
<p>
	My URLs are the best I can do with query-string minimalism, and having as few ancillary pages as possible. I decided
	from the beginning to not have a calendar on the site because it doesn’t tell you anything about what kind of
	content you will get. It’s just
	<a href="http://www.webpagesthatsuck.com/mysterymeatnavigation.html" rel="external">mystery meat navigation</a>
	dressed up as something useful. How I have it at the moment is that you read one page, and if you’re still
	interested, you read the next, and so on.
</p><p>
	However there’s no direct and easy way to find a particular entry. The permalinks don’t tell you anything
	useful, other than how recent the entry is. This isn’t good for people posting links to here on the ’Web, it’s
	too ambiguous. The permalinks should be either be a unique filename, or a flattened version of the title.
</p><p>
	The real hard decision is whether to go with static HTML files, or stick with the PHP. I think this site would be
	painfully dull without the PHP sitting just underneath the HTML5 and ideally I’d always want it exposed and
	accessible somewhere. Going with static HTML files would really simplify the site, but also remove a bit of the
	heart and soul. I want a nice trade-off, where there’s a thin PHP layer there, fetching your pages for you, but
	never a full blown framework. I think this is the one issue I will fight with the most - elegance is extremely hard
	to tame.
</p>


<h2 id="02-wont">What Won’t Be “Fixed”</h2>
<dl>
	<dt>Internet Explorer Support</dt>
	<dd>
		My website will work in IE when the IE team code IE to work with it. I’m not <del>changing</del>
		<ins>breaking</ins> my code to work with a browser that can’t handle what I’m doing anyway. Even if IE8
		passes Acid 2, it still won’t handle HTML5 and ‘<samp>application/xhtml+xml</samp>’, which isn’t
		<a href="/blog/hello#hello-ii">my problem</a>.
	</dd>
	<dt>Firefox 2 Support</dt>
	<dd>
		Firefox 2 doesn’t pass Acid 2, it lacks “<code>display: inline-block;</code>”, it renders rounded
		corners all jagged and the background image outside of said corners. In order to support Firefox 2, I’d
		have to back-hack a lot of stuff and I see zero reason for people to stick with Firefox 2 when Firefox 3 is
		so much faster, better with memory, renders CSS better and has the awesome-bar.
	</dd>
	<dt>Comments</dt>
	<dd>
		My e-mail client is already the perfect administration interface for answering comments.
		<a href="mailto:kroc@camendesign.com">Use it</a>.<br />Click link, type message, click “Send”.<br />
		<br />
		How is that harder than online comments? There’s not even a CAPTCHA.
	</dd>
</dl>

<hr />

<p>
	<strong>With that said,</strong> if there’s anything you think I should do with this site, please let me know.
</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/02-thoughts.rem">Rem</a> •
		<a href="/blog/02-thoughts.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 === -->