0.2 Thoughts

Edit: Added URLs item to the list.

This website is designed to never be finished; instead constantly improving over time (my CSS is tweaked almost daily). Therefore I call this website “0.1” instead of a “1.0” or Beta (Beta would imply that there was a final product somewhere nearby, which there isn’t).

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.

After being inspired by this design, here’s a run-down of some of the heavy flaws that need tackling:

Less Scope

At the moment most of the complexity in the CSS isn’t from using no classes, it’s from trying to restrict CSS being applied in certain places where there are multiple levels of scope.

One good example of this is the hyperlink scheme. This was only recently designed and much of the complications in my implementation (vs. the sample code) is preventing the link scheme applying to all the links outside of the content entries (the header, tag-list &c.). It’s a minefield of do, and do:nots

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.

Squinty Links

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.

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.

Ems

I did try 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.

With 0.2 I’ll try to do everything in ems from the beginning and that should hopefully make the whole thing less twitchy.

Pingbacks

The Reddit invasion 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 about the site. Some quotes have been picked up, and some people have said some truly nice things.

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.

Administration

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.

However, when it comes to writing large articles, a simple text field is never going to replicate the editing power I have with TextMate. I’ve got no search and replace, no syntax highlighting, no keyboard shortcuts. Trying to add these things is just re-implementing the wheel, and thus breaks my very own design principle №3, Let Everybody Else Do Their Job

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.

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).

Credit for this idea goes to Steven Frank of Panic fame and his elegant blogging solution Laguna 2. 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.

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.

URLs

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 mystery meat navigation 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.

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.

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.

What Won’t BE “Fixed”

IE Support: My website will work in IE when the IE team code IE to work with it. I’m not ~~changing~~ breaking 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 ‘application/xhtml+xml’, which isn’t my problem.
Firefox 2 Support: Firefox 2 doesn’t pass Acid 2, it lacks display: inline-block;, 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 FF3 is so much faster, better with memory, renders CSS better and has the awesome-bar.
Comments: My e-mail client is already the perfect administration interface for answering comments. Use it.
Click link – type message – click “Send”.

How is that harder than online comments? There’s not even a CAPTCHA.

With that said, if there’s anything you think I should do with this site, please let me know.
(The signature below is an e-mail link)

Real-World Test Successful

My article “A List Of People Who Need To Stop Writing Software” got picked up on Reddit here

30’000 unique visits in 24 hours, just 1.89 GB bandwidth. That’s 66 KB each. The caching system didn’t even bat an eyelid. I designed this site to be very fast and it held up great. The source code is free to look at if you’re interested.

Okay, enough meta (I really don’t like it). I just wanted to let anybody following know that:

I made a big mess up when transferring my draft article onto the live site, and the permalink changed giving many people a 404. I’ve fixed that all but too late with the ‘.htaccess’
I’m writing a series of articles detailing some of the hacks and tricks used in this site’s code for those interested in the technology, please excuse today’s non-content entry
Very special thanks to all those who were kind enough to e-mail. That is really, really appreciated and I endeavour to answer all emails personally.

Some Notes:

The AIDS joke was bad, I merely lacked an example in better taste. The point was that if you don’t scrutinise every tick box on every installation screen of everything you download - the Yahoo Toolbar will get you
Norton used to be good. Yes, I know. Shame that’s in the past though. ~~I should have used “Symantec” instead~~
Companies are not people. They are in British English.

A List of People Who Need to Stop Writing Software

Disclaimer: I’m a Mac user, who fixes PCs for a living

Sony: New Sony laptops come with two pages in the Add/Remove list of just Sony junk.
They are also the authors of one of the worst pieces of software ever, SonicStage.
ISPs: I pay you to put a cable in my house, and let me send things up and down it; no more.
I don’t want your useless anti-virus products. I don’t want your “Desktop Help” applications. I don’t want your tray icons. I don’t want your proprietary browsers. I don’t want an e-mail address with you. I don’t want your website as my home page (including a Google search that only shows adverts).
Symantec: Somewhere along the line you decided to protect people from their own computer, rather than protect the computer itself. You have never once written a piece of software that didn’t slow a machine down to a painful crawl. Every machine I have come across that has had Norton on it, has had a virus and multiple spywares still there. Your product is so bad, its own uninstaller does not work. You sell a false sense of security, nothing more.
McAfee: Your product is slow, useless, impossible to configure and relies upon passwords, activation and IE just to do its job. It fails on every level.
Printer manufacturers: A Printer driver is a folder with one ‘.ini’ file, and a couple of ‘.dll’s and that’s it.
It is not a 50 MB download. It is not an IE Toolbar, and Side Pane. It is not half-baked photo software. It is not a splash screen when your computer starts. It is not a tray icon.
Yahoo: If Microsoft bought you, your software would actually improve.
The Yahoo Toolbar is like AIDS. You have to be careful what software you download, otherwise you’re bound to get it from one of them along the line.
Nokia, and other phone manufacturers: You seem to be under the impression that you are the only piece of software on the computer. You’re happy to rear your ugly face at every boot. You make a simple thing like syncing seem like surgery. Your software is so unwieldy, it’d be easier to take up origami.
nVidia and ATI: A graphics card driver drives the screen. It does not include a tray icon, that handily reminds you that you don’t have an SLI configuration every time you boot. Your configuration options shouldn’t be so complex that I have to choose between a basic and advanced mode, both of which are as equally useless as each other.
AOL

Hello.

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 IE, and nor will it ever. I don’t use IE. I don’t use Windows as my primary O.S. 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 <div>s
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 IE 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.

Prototyping

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 padding/margin &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.

HTML5

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 HTML4/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 <figure> (although technically, an<h1> proceeded by a <section>, containing a <figure>; so that I could add blog-like content underneath the image). And in the future, I could add <audio> & <video> content types :)

There are a few hacks involved in using HTML5 though. Pre-Firefox 3b5, 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 <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 structure).

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.

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

PHP

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.

Kind Regards,

When It’s Better to Receive Than Give:

I think that along the way, open source has forgotten what it really means (i.e. in real life) to give.

If I were to hand you a present, (let’s say a nice quality leather-bound journal) I would not do so with a long list of terms and conditions attached to it that you had to agree to before you could use the gift; it’s yours dammit - you own it! You know who the gift came from, I was there when I gave it to you, so you don’t need to agree on a contract that legally asserts that I gave the journal to you, and it can be revoked if you use it for things that I didn’t agree upon (world domination plans, for example).

By viewing this website, its code is now yours. That’s my gift to you. It might be something that goes into a drawer somewhere and doesn’t ever come out, except for those embarrassing times when I happen to mention it. Or, it could be a great gift, something that really empowers you to do new stuff!

Just click on the CSS / HTML and php links at the top of the page and you can look at the source code that makes this website come alive on your screen.

Is this code compatible with GPL v2, 3?

I don’t think you quite understood the word yours, when I handed you the journal. All the code that makes up this site is yours: I don’t want calls at 3 AM in the morning, asking if you’re allowed to write certain things in your journal or not. You can put restrictions on it if you decide to give it to others, sure, but you don’t need to ask my permission for that.

If you’ve found new ways to totally pimp-out your journal, and want to show me, that’s rad, I’d enjoy that! But if you want it to be a secret diary that nobody is allowed to look at or touch, then that’s fine too - whatever makes you happy.

And if you want to sell my gift, no hard feelings, that’s alright. Maybe it’s worth something, who knows. Maybe it was just a poor choice of gift for you, and you’d rather it went to somebody who would get more enjoyment out of it than yourself.

Some of the content on your site is marked with a copyright, or a creative-commons or other licence; I thought you just said there was no strings attached?

Okay, let’s say that along with the journal, I gave you a book (The Lion, The Witch and The Wardrobe, for argument’s sake), or the latest Enya album:

Those things are still yours, because I gave them to you as a present (I hope they were what you wanted). But that doesn’t mean that you now own the copyright to C.S.Lewis’ writing and characters, or the song-rights to Enya’s music. No, you own the physical media, and can do anything you want with the physical properties of those things. You can read the book, quote it in an essay, rebind the book in leather (to match the journal), and even draw all over the pages! You can rip the CD to your iPod, or even remix the music for your own personal use.

But you cannot change the wording and go print a thousand copies of the book and sell it, or go on tour singing interpretations of Enya’s songs – I would seriously have to question your sanity; and what presents I chose to give you in the future. Regular people just don’t do that kind of thing in real life, with physical things.

Therefore, my writings, thoughts and photos still remain my own. You can’t edit the source code or content on this domain name, because this is my website, just as this is the original author’s copy of a book or the gold master of a CD. But your copy of the website you just downloaded to your browser cache, well that’s yours.

My photos, you can print and frame on your desk (if that kind of thing takes your fancy), but you can’t claim that you took the photo, and go selling prints of it; that would upset me and I think we’d have to stop being friends.

You can read my writings, and quote about them on your own website, but you can’t take my writings to a publisher and claim they were your own. So please respect that the content I create on this website is my own work, all I ask is that if you re-use my content, that you include my name so that people know that I helped contribute to your awesome stuff!