This is the first draft of my website. I have been thinking of creating a website for about two years now, but never got to the point where I actually created it. I always lost interest as soon as I had finished yet another design.

Recently many people and companies started contacting me because of my open source projects which motivated me to start working on a real online presence.

In this first post, I’ll briefly talk about how I built the website.

Edit: A lot of time has passed since I wrote this post (more than two years) and I wanted to point out that, although I still love working with Jekyll, Dart and I still use Disqus wherever needed, I wouldn’t use Stylus anymore. Compared with Sass, Stylus simply doesn’t have the same user base, and I like to choose the technology that is more common when the feature set is nearly identical. I also am writing more and more vanilla CSS (or use very limited preprocessors) since CSS prefixes are becoming a thing of the past, and the browser support for most features I use is pretty solid.

Technology

I had a few goals for this website, that kind of dictated the technologies I was going to use:

I didn’t want to be in charge of the hosting of the website. I have hosted many websites in my lifetime, and I know that, sooner or later, it’s not fun anymore.
I didn’t want any server side language on the website. The few things that actually require server side computing (newsletter, guestbook, etc…) can easily be outsourced to other services and be included with JavaScript.
I wanted to be able to focus on the writing, and not be distracted by the design or layout of my articles while writing, or having to modify my article because it didn’t suit my styling visions.
I wanted to have fun doing it! Having built endless sites that had to be optimized for IE6+ and other legacy browsers, I really felt the urge to simply use the latest technology available, and don’t look back. If people want to read my posts on deprecated browsers, they can. But they won’t see any layout.

This is why I went with Jekyll, Stylus, Dart and Disqus.

Jekyll

I think that there's no need to introduce Jekyll, since it's the static site generator integrated into GitHub. I have looked at many blogging solutions over the year and Jekyll always seemed like the right solution.

The fact that GitHub actually has Jekyll support (meaning that you don't need to compile your source files before you deploy them) seals the deal. GitHub's CDN is very fast and now serves GitHub pages as well.

Stylus

I started using Myth (in combination with styl, which is the spiritual successor of stylus), but converted back to Stylus after too many hickups.

I actually wanted to use another CSS preprocessor but stylus gives me everything I need, and more.

main-color = blue
html
  body
    > div
      color main-color
      transition color 1s linear

becomes

html body > div {
  color: blue;
  -webkit-transition: color 1s linear;
  -moz-transition: color 1s linear;
  -op-transition: color 1s linear;
  transition: color 1s linear;
}

For those of you who don't know what stylus is: It's a CSS preprocessor that transforms simplified markup into CSS, taking care of vendor prefixes, allowing nested blocks and providing lots of other useful stuff like variables, mixins, functions, etc...

Other very popular CSS preprocessors are SASS and LessCSS, but I initially wanted to go with Myth because I really like their «future safe» approach.
Myth is basically just a «polyfill» for the CSS specs that are in the works right now. It enables you to use following future features right now:

Variables with the var-main-color: red; and var(main-color) syntax
Math with the calc() function. Many browsers already support this.
Color Manipulation like color(#aa0 tint(20%))
No Prefixes like -webkit-transition. All major browser vendors have agreed that prefixes should be a thing of the past.

Head on to their website for more information.

The really great part about this is that you won't be needing any preprocessor at all anymore, as soon as the browsers support them themselves.

Unfortunately I am really hooked on nested CSS blocks, and they are not part of a CSS draft yet. So I had to use another preprocessor to combine with Myth, and I finally decided that it's not worth the trouble since stylus provides a lot more features that might come in handy, and the variable syntax of stylus is actually more natural than the CSS spec.

Dart

Unless you've been living under a rock, you have probably heard of Dart already. It's a new language, developed by Google (and my brother I might add), that has recently released the stable 1.0 SDK.

The most difficult part was getting the dart editor to play nice with the default jekyll file layout.

Using dart for the simple scripts on this website is really not necessary, since, at the moment, there aren’t more than 30 lines of code, but I wanted to start using Dart in production and enjoy working with it, so I thought: why not?

If you are completely unfamiliar with dart, I highly encourage you to check it out. While it most definitely is not a huge benefit for small scripts as in this site, the language really starts to shine the bigger your project gets.

Thoughts on browsers

This website will only support evergreen browsers (browsers that automatically update themselves). For all other browsers I will be serving a pure HTML site without CSS. Why? Because:

I despise outdated browsers

In my line of work I'm constantly excited about new features the web has to offer me, and crushed by the sad realisation that I can't use the feature because it will exclude 10%-20% of the user base.

For any commercial product, this is relevant. Fortunately, my website is not commercial. So, I'm sorry if you're surfing like it's the year 2000, but in that case you'll have to get by with simple, unformatted HTML.

COLORGLARE

Going public