Mathias Bynens

A fresh start

This site got rebuilt from scratch. What used to be an abandoned WordPress-powered blog with a lot of dull entries and a heavily outdated design, is now a customized QMS website.

This implies I now have full control over the HTML output — including that of user-generated content, such as comments. Of course, I’m going all the way with this, up to the point of correct code indentation. :)

Other than that, I’m using sweet, sweet HTML5 goodness: some of the new sectioning elements — header, section, article, aside, footer; new input types such as type="email" and type="url"; the details and time elements, etc. However, developing this new site was the perfect opportunity to play around with some cutting-edge techniques that I hadn’t used for client work before. For example, if you’re using a browser that supports the Geolocation API, you might want to visit the About page.

As you can see, Markdown formatting is allowed in comments. I spent some time writing JavaScript code to pimp the comment textarea, by adding keyboard shortcuts for commonly used markup. Try entering some text, then select it, and play around with the key combos you’d expect to work.

Even though a lot of relatively new techniques are used, such as certain CSS3 properties and data: URLs, this site degrades gracefully in older browsers, up to IE6. (Geek fun fact: this is my first site ever to use only one CSS file containing hacks to target crappy browsers, as opposed to using conditional comments to serve up several browser-specific stylesheets.) The same goes for users with JavaScript and/or CSS disabled — this site should still work. The ‘design’ fits inside 1024⨉768, but those with a bigger screen and a browser that understands @media queries properly will experience a slightly wider version.

As for the content — I’ll be using the Notes section to post clever code snippets and blog about interesting web development stuff. The idea is that every entry is like a note-to-self kind of thing — but of course, I hope it’s of interest to you as well.

I hope you like the new site!

P.S. There are a few easter eggs hidden throughout the site. Kudos to those who find them all!

Comments

David Collantes wrote on :

Looking very spiffy, I love it! Is the QMS software running it available somewhere? Keep it simple, Mathias! It looks so clean, I feel like crying… :-)

Mathias wrote on :

David: I could spend hours elaborating on the uniqueness and awesomeness of QMS, but alas, it’s closed-source. You’ll have to take my word for it :) I guess I’m one of the lucky few who get to use it.

Ad wrote on :

Congrats on the new site! I’m looking forward to reading more notes! Btw, I’ve only found 1 easter egg so far (the real easy one :) )

markku wrote on :

Hi Mathias! It is nice to see you blogging again. Not sure if you still remember me, but we used to visit each other’s blog a few years ago.

I’m loving the HTML5 goodness, I hope to learn from this and implement it on my site soon, too! =)

Leave a comment

Comment on “A fresh start”

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Select some text and press ⌘ + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use ⌘ + B or Ctrl + B.

To create links:

Here’s an inline link to [Google](http://www.google.com/).

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

Here’s a [poorly-named link](http://www.google.com/ "Google").

Use backticks (`) to create an inline <code> span:

In HTML, the `p` element represents a paragraph.

Select some inline text and press ⌘ + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

    printf("goodbye world!");  /* his suicide note
                                  was in C */

Select a block of text (more than one line) and press ⌘ + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.

Select a block of text and press ⌘ + E on Mac or Ctrl + E on Windows to make it a <blockquote>.