“Minimalist” Is Not the Right Word

Sam Ruby is moving to clean HTML (no divs, no classes &c.).
He describes this as Minimalist Markup.

Unfortunately, I have to find fault with this term. Just because some code is not full of needless bloat, does it then make it minimalist? No, it is simply as is it should be.

Just because my website is not full of ads, side bars, widgets and crap, it is not therefore minimalist.
Exactly everything is here as it was designed to be.

The same goes with the source code. Just because there are no class attributes, it does not make the code minimal. It still renders exactly as it would render had I used CSS classes.

I’m sorry if people are so used to terrible website design that they consider a website that doesn’t have this bloat as minimalist. That’s faulty perspective.

Whilst it’s obviously fantastic that he is moving toward sane HTML, I don’t see it as anything particularly special. This is how all websites should have been from the beginning. It’s only because of the terrible habits bred into us developers by IE4 and Netscape that it’s taken so long to get back into shape with standards again.

The class attribute is not evil, nor wrong. It doesn’t need to be avoided, it just needs to be used only when it is appropriate, and not as a catch-all for the failings of some browsers. The class attribute is simply a way to say that an element will have changed semantics from how it has been seen before. For example, a blockquote with and without a class attribute are semantically different; the latter blockquote is of a different class.

In my own website, it’d be perfectly correct (even more correct than it is now), to use a class on my <article> elements, since the semantics of each article are different due to different internal content (blog | tweet | photo &c.)

I decided to go totally without classes to show that it could be done and that there is a light at the end of the tunnel, and that this would fit within my three guiding principles of design.

Sam, I’m in your debt. If there’s anything I can help with this new design of yours, I’m at your disposal.


Kind Regards,

“These Things I Believe”

These things I believe is a beautiful mantra of software philosophy.
I agree with everything there.

Here are some choice quotes:

Are users dumb?

When software is hard to use, don’t make excuses for it. Improve it.

When a user makes a mistake, don’t blame the user. Ask how the software misled them. Then fix it.

The user’s time is more valuable than ours. Respect it.

Good U.I. design is humble.

A good software developer defends his work by actions - fixing it, improving it.
A bad software developer places the blame anywhere but on their own head.

What is the task of the U.I. designer?

Users do not know what interface they want. Users do not know what features they want.

Users know the tasks they want to do, and the problems they have.

We learn more by watching the user work than by asking the user.

The job of the U.I. designer is to provide what the users need, not what the users say they need.

It is to make tasks easier, not to provide features.

And my personal thoughts:

If you believe users to be idiots, then you will write idiot-software

I would go as far as saying that:

With intelligence, you can write good code.
But without philosophy, you cannot create art.

It takes love to write beautiful code (and a beautiful functionally interface), and there’s not much of that in this technology-world of pent-up, angry, aggressive and indignant geeks.

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)

Under the Hood #4:
Getting a File’s Mime-Type From Apache

There is no sane way to get a file’s mime-type in PHP.
The mime_content_type command is depreciated and not installed by default in PHP5.
The FileInfo PECL extension is not installed by default and can be insanely difficult to install.

Thirdly, you can use a Unix call:

$mime_type = exec ("file -i -b '$file_path'");

But that only works on Linux / BSD / Mac systems and not for Windows users, and it also requires that if you’re on a shared webhost that they allow you to use the exec command. This method also doesn’t always give accurate results.

Lastly of course, you could write a simple function to look up a file-extension and return the appropriate mime-type:

function mimeType ($extension) {
	switch ($extension) {
		case 'gif':	return 'image/gif';			break;
		case 'jpg':	return 'image/jpeg';			break;
		case 'png':	return 'image/png';			break;
		case 'pdf':	return 'application/pdf';		break;
		case 'zip':	return 'application/zip';		break;
		case 'exe':	return 'application/octet-stream';	break;
	}
}

But this is hardly automatic, requires constant maintenance when you comes across new types that enter your system and looks plain ugly in your code. It lacks elegance.

I found a cute solution to this problem through looking at the headers returned by Apache. For every file you access, Apache sets various HTTP Headers, here’s an example from a photo.

Date: Sat, 12 Jul 2008 11:24:33 GMT
Server:	Apache/2
Last-Modified: Tue, 17 Jun 2008 13:34:34 GMT
Etag: "2678b24-5edfe-cdfaae80"
Accept-Ranges: bytes
Content-Length: 388606
Content-Type: image/jpeg

And lo, Apache is returning the mime-type automatically for any file-type. Since PHP has the ability to access remote URLs with many of its functions, we could theoretically ask PHP to ping the local file we want to know the mime-type of and retrieve the relevant information from the HTTP headers.

This is indeed possible, the get_headers function will give the HTTP Headers returned from a URL request as an array (if the second parameter is “1”). This function does not work without a full URL (“http://”), and therefore in order to get the mime-type of a local file, it needs to be in a publicly available location (even if only temporarily). You just prepend your domain name to the file path.

Here’s the final example:

$domain = 'http://camendesign.com';
$file_path = 'data/content-media/photo/DSC00013.jpg';

$url_headers = get_headers ("$domain/$file_path", 1);
$mime_type = reset (explode (';', $url_headers['Content-Type']));

echo ($mime_type);

Which correctly outputs:

image/jpeg

Apache sometimes returns a Content-Type value with the character set appended, e.g. “text/html;charset=UTF-8”, so “explode (';', …)” is used to break this apart, and reset returns the first array element.

Limitations

There are a lot of issues with this practice, which is why it is not used on this site:

• On some web hosts, the firewall will prevent the loop-back call of the sever requesting a file on itself via an external route (the full domain URL). This will always work okay on your localhost and may work fine in many environments, but it’s not guaranteed, so always test first. I had to fall back to the stupid look-up function :/

• This introduces lag! Remember that the server is loading an external URL, even if the URL ends up on the same machine. There is inherit lag due to the DNS lookup. Use an IP address if possible, and always cache the result.
  Do not run this code every time a user views a page! Use it once and once only for a file and then save the result somewhere!

Update: Using the ‘Mime.types’ File

Hiếu Hoàng writes:

Debian’s default lighttpd.conf executes a
“/usr/share/lighttpd/create-mime.assign.pl” file to get mime-type assignments.
The “/etc/mime.types” which it uses is from the package mime-support.

This would alleviate writing the look-up function.

Sample output:

$ /usr/share/lighttpd/create-mime.assign.pl
mimetype.assign = (
	".ez" => "application/andrew-inset",
	".anx" => "application/annodex",
	".atom" => "application/atom+xml",
	".atomcat" => "application/atomcat+xml",
	".atomsrv" => "application/atomserv+xml",
	[....]
	".avi" => "video/x-msvideo",
	".movie" => "video/x-sgi-movie",
	".mpv" => "video/x-matroska",
	".ice" => "x-conference/x-cooltalk",
	".sisx" => "x-epoc/x-sisx-app",
	".vrm" => "x-world/x-vrml",
)

This file isn’t included in the Mac OS X PHP distribution, but I’ve copied it below with some small modifications (Output a PHP array, and Mac OS X’s ‘mime.types’ file is in ‘/etc/apache2/’ instead of ‘/etc/’).

#!/usr/bin/perl -w
# (I don’t know Perl, and how to colour this right)
use strict;
open MIMETYPES, "/etc/apache2/mime.types" or exit;
print "\$mime_types = array (\n";
my %extensions;
while(<MIMETYPES>) {
	chomp;
	s/\#.*//;
	next if /^\w*$/;
	if(/^([a-z0-9\/+-.]+)\s+((?:[a-z0-9.+-]+[ ]?)+)$/) {
		foreach(split / /, $2) {
			# mime.types can have same extension for different
			# mime types
			next if $extensions{$_};
			$extensions{$_} = 1;
			print "\".$_\" => \"$1\",\n";
		}
	}
}
print ");\n";

This could then be used to quickly put together a comprehensive (though massive) look-up function. I’ve saved a copy of the output of this script, enclosed at at the bottom of this article.

The ‘mime.types’ file is interesting as there may be a way to write a real small function (probably regex) to pull out a mime-type on request, which would be a far more elegant (and practical) than my own solution. I’ll have to give that some thought.

An Example of Code-Is-Art,
HTML5 + MathML + SVG

This is great. A beautiful hand-typed example of practical web design; Dana Lee Ling writes test papers for his college algebra and statistics courses in XHTML, with SVG graphs and MathML equations.

He also maintains a brilliantly pure resolve to never break a link:

Ted Nelson always objected that the world wide web is not what he envisioned when he coined the term hypertext in 1965. Like Vannevar Bush’s Memex envisioned in 1945, the links would be paths that do not “break.” Some form of massive distributed database would, theoretically, have kept track of material and kept links from breaking when material was “moved” or reorganized. Of course that would not be possible nor desirable.

My own paean, however, to Ted is to never move or rename a page once I put it up - even if I have misspelled the file name. Yes, I could use a meta to redirect, but my simpler solution is to not move a page. Nor reorganize my site. Organic growth unanticipated in 1998 has complicated site management, but that’s life - complicated in places.

My hat goes off to him for having such beautiful code tucked away in places we’d never think to look.
I don’t even have any SVG in my site, and certainly not the brains to use MathML, so please give some attention to the wonderful work within his site