Welcome to Arkanis Development

Arkanis Development Version 3

Published

Welcome to the third brand new version of my website. It's not only a face lift but also (again) a complete rewrite of the entire website. I officially switched the page to English now and German posts are specially marked since this fits my habits more. Theres also some new stuff like the tag cloud, the projects page and a proper archive. I've also added some funny things like the blurred navigation subtitles and some texts at the bottom of pages. So feel free to look around.

Ok, that was the obligatory introduction everyone probably skips, so right down to the interesting stuff.

Motivation

The old website was fairly sophisticated and had a lot of features, so why another rewrite? Basically because it was sophisticated and complex. Maintenance also was a concern since Rails applications tend to be a bit difficult to deal with in the long run. However the strongest point was simplicity.

Often complexity is added without properly thinking about it and I wanted to know how far simple stuff can carry you. I'm not talking about the simplicity frameworks like Rails or CakePHP give you: this simplicity is often bought by knowledge of a framework which tries to hide it's own complexity (Rails is very good here). However if you look at it in the greater scale (e.g. like a good system administrator does) such a framework adds a tremendous amount of complexity to your application which you will always need and use.

I wanted to get closer to a form of "absolute" simplicity. If there is nothing, nothing can break and you have nothing to maintain. However I need at least something to write my stuff and the bare minimum for that are a bunch of files: text files with the content and some additional files like pictures grouped into some directories. This was the simplest way I came up with and much to my surprise it's all you need for a basic website like this one. Add a few simple PHP lines to the mix to present these text files as nice HTML and use SSH to create and edit the text files. That's it. It does not only sounds easy, it is easy.

The weblog files in Ubuntus file browser

In a time where many ditch SQL in favor for more scalable (and simple) key-value stores the move to simple files looks a bit odd. At least to me it did. However if you think about it some time you realize that this opens up many new options. Caching is basically as simple as with key-value stores (e.g. serialize and store frequently used data) and if the disc I/O becomes a bottleneck you can move the most used ones to a RAM disk. You can use version control for your content (e.g. SubVersion) or can do any crazy stuff you can do with file systems (UnionFS, EncFS, …). It happened to me more than once on this project that simplicity proved to be equally flexible and extensible.

Server side technology

Enough about why, lets go on the the how. For the text files I used the format that is used so often that most programmers don't even notice it. No, I'm not talking about XML but a simple header and body structure like used by mails (SMTP), HTTP and many other protocols.

A simple post file
Title: My post
Tags: test, files

And here comes the content.

These files are then read by some PHP pages. I didn't used a PHP framework… well, if you look at PHP close enough it already is a framework. Thanks to the alternative control structure syntax and short opening tags you get a nice template system for free. There are also some other features like anonymous functions that keep the code clean as long as you keep it reasonable simple and not to mention the large standard library.

In the greater scale I used some mod_rewrite rules to build nice and clean URLs that get rewritten to a Rails like structure of PHP files. There's one PHP file for each action and it contains the logic code at the beginning, followed by the view code (mainly HTML with some embedded PHP). And thanks to output buffering it's easy to wrap everything into a layout. That are about the features that I used most of the time. You get all this for free without any maintenance. Well, you have to install PHP but thats just one package you can install along with Apache.

Design

The new design with the same test entries as in the prototype

The most visible change is a new design based on the Modern Ambience design prototype. However the whole design was made completely from scratch directly as HTML5 and CSS3 code. I didn't opened Inkscape once, simply because it wasn't necessary. The article Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius more or less was the spark it all started with. While the original Modern Ambience prototype took several weeks to complete the current design was done in about 3 hours. All thanks to the new CSS3 properties. However these properties also made this website a little browser benchmark and you actually see a performance difference between Opera, Firefox and Chromium.

Writing the HTML code with the semantic tags of HTML5 that matched the content at hand was actually fun. It just feels good if your markup gives you a good representation of the content. Thanks to CSS2 and 3 selectors styling them isn't a problem and in the end I only needed one semantically useless div element in the layout.

I strongly recommend anyone building websites to check out the Beautiful UI article. It's astonishing what's possible with CSS and it's actually faster than using an Image program like Photoshop or Inkscape to design the website.

The endless details

As with every project there are a lot more details I could write about. Some interesting use of the table-* values of the display property for the figures and their captions, the tag cloud, HSL-colors, the PHP class used to load the files, simple caching functions, the comment markup, no foreign request policy etc. If you 're interested in some details feel free to post a comment. I'm willing to answer any questions. :)

As a last note: This project proved for me that simplicity is worth the time thinking about what you need. So before the next project spend the few minutes and think about what you really need before firing up your framework of choice.

3 comments for this post

leave a new one

#1 by
Marc
,

Wow, the new site looks nice, good work!

p.s.

and use SSL to create and edit the text files

I think you mean SSH :)

#2 by
Marc
,

Also: How do you implement the comments?

#3 by
Stephan
,

Thanks for the SSH tip. It's fixed now.

The comments are files like every thing else too. They are stored in the directory of the blog post and the structure looks like this:

┊
├ 2010-08-10-test.post
╰ 2010-08-10-test/
  ├ frontpage.png
  ├ Some more pictures for the post…
  ╰ comments/
    ├ 2010-08-10-10-31-04-marc.comment
    ┊

The post is a single file and the directory with the same name contains all additional data of that post.

A comment file then looks like this:

Name: Nobody
Website: http://example.com/
Processor: comment, smilies
Created: 2010-08-10 11:33:57

Comment content

I've written a small PHP class to easily read and write these kind of files. It's used for blog posts, comments and projects, so it was worth extracting the common behavior.

$file_name = '2010-08-10-test/comments/2010-08-10-11-33-57-nobody.comment';
Entry::save($file_name, array('Name' => 'Nobody', …), 'Comment content');

Reading the comments is equally simple:

$comments = Entry::find('2010-08-10-test/comments/*.comments');
$comments[0]->name;
$comments[0]->content;
…

All headers of the file are accessible as properties. This is done by overwriting the __get() function for entry objects (this works similar to Rubys method_missing() method). The content property however is a bit special. It's the raw content of the entry processed by the functions listed in the "Processor" header. In case of comments these are the "comment" processor responsible for the simple comment markup as well as the "simlies" processor that wraps some span tags around smilies which get styled later on. Markdown and Textile are also available as processors (it's just one small anonymous function per processor) but I only use them for posts and projects.

I've written the comment processor myself, but somewhere I read about this "simple" markup like I used. However I couldn't find the original source and so I've created my own markup.

The Entry class is a bit more powerful than what is shown here (custom sorting, limit, etc.) but all of these features are very small thanks to PHPs variable functions. The functions of this class are a bit inspired by ActiveRecord and this makes working with it quite easy, but it's still kept simple. It doesn't provide validations nor error messages. Since there's only one page that you can create comment this stuff is kept in the action.

I think that's about it for comments. If I missed some details, just ask. :)

Leave a new comment

Having thoughts on your mind about this stuff here? Want to tell me and the rest of the world your opinion? Write and post it right here. Be sure to check out the format help (focus the large text field) and give the preview button a try.

Format help

Please us the following stuff to spice up your comment.

An empty line starts a new paragraph. ---- print "---- lines start/end code" ---- * List items start with a * or -

or