camen design

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:

  1. 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’
  2. 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:

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.

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!

The Real Reason Microsoft About-Faced on IE8 Standards Opt-In

Microsoft decided that due to their new interoperability initiative, they would reverse a previous decision to make IE8 default to the IE7 engine, instead of supporting standards-compliance by default.

No article or musing I have yet read has delved into what is increasingly likely, the reason for this sudden change in decision – and that is this: the mobile web is coming.

The iPhone & iPod Touch have caused an influx of mobile web browsing the likes even Google had not seen. Many smart phones have an Internet browser, only Apple’s has had the interface to make it desirable to use to non-geeks in a way that can be measured in server-log lines, and not in forum-posts by iPhone detractors.

Microsoft have a mobile-browser, how are they competing with this? They are not. Pocket IE is unusable compared to the development buzz surrounding mobile web-apps using Safari, which supports a full compliment of standards.

If Microsoft were to default to the IE7 rendering engine on their desktop browser, how would this affect the rapidly rising mobile browsing market? They would simply get left behind.

Their mobile browser would have to ship both IE7, and later engines to maintain compatibility with a web they were partly defining with their desktop client. Any new fancy features their mobile browser could offer to compete with Safari would be stymied by the fact that the majority of websites would be coded to the IE7 engine by unaware novice web developers and out of date web development packages; all the time while web developers explore new avenues of web apps using the full set of standards open to them on Apple’s handheld via iPhone-only websites.

Microsoft are having to face their own irrelevance in this market. They could either stick to the age-old excuse of backwards compatibility, and in doing so totally jeopardise progress with Windows Mobile in comparison to swifter competition in the form of Apple, and Google’s Android - or they could jettison the weight of 10 year old business intranets and ship a lighter, quicker, safer and more competitive browser to help them shape how people view the web from both the desktop, and the mobile.

Microsoft are dropping the hint that lagging enterprise customers need to upgrade to standards or be left in the lurch. Ageing web apps will break. That is a massive change in attitude to “Microsoft of old” a week ago. They would only do that unless the benefits absolutely, absolutely outweighed any short term loss. Businesses can experience the usual upgrade headaches by changing a few web apps that haven’t been touched in 10 years, they have no choice anyway - where the web matters is no longer the enterprise, it’s in the pockets of individuals.