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. The same goes for users with JavaScript and/or CSS disabled — this site should still work. Media queries are used to make sure the ‘design’ fits on any screen, on any device.
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… :-)
Krijn Hoetmer wrote on :
Yeah, where can I download this QMS thingy?!
Welcome back btw! Keep up the blogging exercise, just like Anne! :)
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.
Frederik wrote on :
We had to wait for it for quite some time, but it has been worth waiting for! Congrats Mathias!
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! =)
Mathias wrote on :
Hey markku, of course I remember you! How are things? Still developing iPAP? Ah, the memories :`)
David Collantes wrote on :
Hey Mathias, what’s the ‘trick’ to highlight the entry referred by the link, like this one? I like it!
Mathias wrote on :
David Collantes: That’s just the CSS3
:targetpseudo-class doing its magic.Kroc Camen wrote on :
Extremely nice code! Your HTML is superb.