About molk.ch

This site provides me with a feel for when something is "done" - "done" is when I feel OK about publishing stuff here.

It motivates me to finalise things - there is nothing so frustrating as an 80% complete pet project which has been dormant for 5 years.

This is as much for my own reference as anything else. Some questions you just do not want to figure out the answer to more than once.

Why "molk"?

Fairly obviously, "mo" are the first two letters of my given name, and "lk" are the first letters of my family names. Yes, "mlk" would have been more obvious, but "molk" is pronouncable, with fairly obvious spelling, which makes it easier to remember than "mlk".

Less obviously, my son, who is growing up with english and danish as his parent languages, has amalgamated the words "milk" and "mælk" into "molk", which for a couple of years was how he refered to that white stuff he likes to drink out of a bottle. ;-)

Why light?

One day, while looking for info on lisp - idly browsing, really - I stumbled on Paul Graham's site. It was a revelation - the pages rendered so quickly, i found myself wondering if i had stumbled on some new super-fast version of the web. Which of course I hadn't, it was just a single, parsimoniously designed website in a sea of big, bloated, slow sites.

This site is intended to scale to both very small and very large areas. My old Nokia 8310 displayed web pages in something like 4x20 chars, which was perfectly decipherable for well-designed pages like Google, but regrettably, completely useless for the majority of the web.

JavaScript

Dynamically constructing documents in the browser which could be served statically is a waste. Most pages ought to display just fine without JavaScript. A plethora of frameworks make it easy to construct stuff on-the-fly, but doing that means the browser is doing unnecessarily heavy lifting, and if JavaScript is not available, the user sees nothing useful!

That being said, JavaScript is great for enhancing sites with interactivity and improved usability. And it's a cool language, great way to learn about the prototyping paradigm!

Various Javascript libraries are used on the site.

Standards

One of the things that I find fascinating about the web is that it is all based on very simple standards and technologies.

I have tried very hard to know what I'm doing and adhere to all the standards I could find:

XHTML: Content without style (with classification). Pages are validated against the XHTML 1.0 (Strict) XML Schema, and served with MIME Type application/xhtml+xml, but suffixed .html since this is an implementation detail visitors do not need to know about. XHTML is subtly different from HTML, which means that serving XHTML as text/html is "wrong" and confuses browsers. For example, self-closing tags ( <div id="myId" />) are interpreted differently depending on the document MIME type. Each browser makes up it's own mind about what it should mean.
CSS: Provides layout and formatting for the content, based on classification.
ATOM: A simple but effective "temporal layout" of content.
WAI/UAAG: Accessibility is very important. With a relatively small effort, content can be provided in a form which makes it available in ways and media which did not exist when the content was created. Pages are checked for accessibility issues with HTML tidy.
JSLint: JavaScript is very cool, but has some really ugly features (global variables...), this tool helps avoid some of the pitfalls of the language.

As I learn more about web design, a set of personal "best practices" have evolved (see the site build sources). It was a priority to keep the source "clean", which meant writing everything by hand. No WYSIWYG code generators here.

Style and design

The main purpose of molk.ch is to provide information, mainly in the form of text. Inspired by the principle of parsimony and Occam's Razor, I chose to keep the style and design as simple as possible. I also wanted to learn about separating content from presentation using HTML and CSS. This resulted in the following styles:

Normal/Firefox Style: This is the default style, which I figure means 99% of visitors will only ever see the site like this. I only tested it in Firefox, but it is simple enough that it should be usable in most browsers. This style uses a couple of tiny images, which are embedded in the final stylesheet as data urls. This will not work in all browsers, but it will work in Firefox.
Light Style: The absolute minimum of style necessary to read the text and navigate the site. This style will work well on tiny screens or with a very limited browser. I spot-checked with Lynx that the content looks good without styling.
Print Style: This is what pages look like when you print them. I decided to also make this style available onscreen. This is handy for debugging, and doesn't get in the way, so why not?

Images

For all style images, I use the PNG image format, appropriately crushed. Meta-data edited using ExifTool ( options).

I try to keep images to a minimum, particularly for pure style.

External images (logos etc.) are served as is, but hosted locally to make performance and availability uniform.

My profile picture is a jpeg, optimized using jpegtrans.

Fonts

I don't feel strongly about exactly which font is being used to display molk.ch. Hence, I decided to leave the specifics up to the platform/browser/user, and just give the font-family as a vague indication of what the font should look like:

Sans-serif: This is the family used for the vast majority of content on the site. Since I have tried to keep the design simple, I figured a simple font would fit right in.
Serif: To make the separation between paragraphs clear, the first letter is in serif. I goofed around with the css first-letter pseudo-element, and needed a nail to use that hammer on. In the end, If I ever see molk.ch with a serif/sans-serif font combo that does not work, it is very easily remedied.
Monospace: Used for code samples, which are preformatted and thus depend heavily on all characters being the same width.

Language

The site is only available in (british) english. I would love to also have it in other languages, but I don't have time to translate everything, and english is the language that will exclude the least people from understanding. I would rather put up more content in one language than less content in more languages.

Links

I try to err on the side of abundance - I do not mind putting the same link several times in the same page, or having pages include links to themselves. I also try to include as many outside links as I can reasonably fit in. One of the objectives of this site is to help me find stuff again.

Links are a different colour from normal text to distinguish them, and sometimes underlined:

In text, links are underlined and another colour. When being hovered over or gaining keyboard focus, the link colour changes.
In the page navigation, links are not underlined - I tried it, but most of the text is links, and big chunks of underlined text just does not read nice. When being hovered over or gaining keyboard focus, the link becomes underlined.

Colours

Part of keeping the design as simple as possible is to keep the required colour-rendering abilities of browsers and devices to an absolute minimum. This means as few colours as possible, from as limited a palette as possible.

Colours were selected from the 16x16x16 palette which can be represented as #abc, (no rgb(x, y, z) nor #abcdef).

Contrast was checked using the WebAIM Colour Contrast Checker- I have seen too many sites with impossible colour-combinations to trust my own eyes.

Content background

The large majority of the site is displayed on the "content" background. The exception is the content which is used to provide navigational clues.

The standard background is white (#fff), combined with the following foreground colours:

Inline code samples and hovered links are black (#000): Aenean est sem, ornare eget malesuada sed, ornare at justo.
Normal text is red (#700): Aliquam vitae est nunc, eget faucibus odio. Sed fringilla imperdiet.
Links are yellow (#550): Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Inactive elements in the first level navigation (as well as block code samples in the content) are displayed on a grey (#ccc) background:

All text is black (#000): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet.

The first level navigation, and the active tab, are displayed on a red (#900) background:

Normal text is white (#fff): Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.
Links are yellow (#ee0): Phasellus congue congue semper. Vivamus hendrerit ipsum nec tellus rhoncus.

Browser compatibility

The site is designed to display nicely in Firefox. I try to keep it working in other browsers as well, but I have a limited amount of time available - and limited patience with browsers that do not respect standards.

It will also display well in Lynx, since that is a good indicator of the quality of the "pure" content.

The site should work well with any combination of the following not available (unsupported or disabled):

CSS
JavaScript
Images
Colors
Alpha transparency (in images)
Flash/Embedded video
Audio
Java (and other obscure browser features)

The basic content is accessible from any browser, and becomes progressively enhanced as more of the above features become available.

Content structure

A couple of remarks about the HTML markup:

The core content is in the element with id content.
Multi-line code fragments are within a <code> element, and look like this:
```
several() {
  lines();
  of();
  code();
}
```
Inline code fragments are within elements having the class code: short().code().sample();. These fragments are protected against line-wrapping, and thus kept short to avoid breaking the flow of the text.
Following the suggestions of Emphasis in context versus overall highlighting:
- Local emphasis (significant when reading the text) is done using <em>, like this!
- Global emphasis (significant when looking at all content) is done using <strong>, like this!

Non-content

The site is served directly as static pages from a web server. Hence, all pages have a lot in common: Header, Footer, Navigation, logo, about-links, breadcrumbs etc. I needed a way to avoid copy-pasting all this "non-content" stuff. I did this by writing a bunch of scripts which take the basic content of a page and wraps it in all the non-content bits.

As an example of what the non-content stuff looks like, here's a page without content.

Licence

Everything here, including the site sources and the site build, is licenced under the GPL v3. For more information, see Why GPL?.