Enter The Matrix — Browse The Complete SitePoint Library

Matthew Magain

One common request we receive from our customers is for more information about where each of our books fits with regard to every other book.

When we first started out, we only had a handful of titles, so listing them all in (approximately) chronological order wasn’t really an issue. However now that we have nearly 30 titles, a matrix depicting the position of each book and a difficulty level is well overdue.

Well, better late than never — we now have available a matrix of every single SitePoint book, kit or PDF title. If you already own a SitePoint book, you can now chart your progression with regard to the rest of the SitePoint library.

The page itself is a technological wonder, making use of some hairy CSS in order to display information in a useful manner while retaining some form of semantic sense. I’ll let Brothercake elaborate on the details in a later post.

Go on! Enter the matrix!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.mikehealy.com.au cranial-bore

    The page itself is a technological wonder, making use of some hairy CSS in order to display information in a useful manner while retaining some form of semantic sense.

    This is somewhat concerning, not because Brothercake has done a bad job, but because it means doing simple stuff on the web can be really complex. The matrix is good, certainly useful, but it doesn’t look like a technological wonder, or something that should require ultra-advanced CSS. If the degree of difficulty to produce this slightly rich visual representation while remaining semantic is so high then doing things the right way is going to be well out of reach for most web publishers.

  • Paul Annesley

    Very nice indeed!

  • http://boyohazard.net Octal

    cranial-bore has a good point, I’d be interested in knowing what the challenges were with that and why the choice of “hairy css” was taken.

    On a positive note it is a very useful addition to the site!

  • http://www.sitepoint.com/ Kevin Yank

    Wow! Very nicely done – and sneakily too! This was a semi-secret project internally (or maybe I’ve just been going to the wrong meetings).

    As for the concern over the difficulty of implementing something like this, Cake may disagree with me on this, but I’d say what he’s achieved goes well beyond the level of semantic expressiveness that HTML was designed to provide. For the less ambitious, more pragmatic developer, I would have simply recommended providing a text alternative to the matrix, which could have been done with an image, SVG, or Flash.

    Of course, pushing the boundaries of web technology is what we’re about.

  • http://www.domedia.org/ junjun

    Very nice indeed. A great example of what you can do with CSS while still use the right semantic markup for the information displayed. As for the Nay-sayers: When was pushing the envelope not a good thing? Did you have the same attitude back when we started talking about web standards, image replacement techniques, microformats etc? Imagine being stuck in the pre-2000 web… yikes.

  • http://www.mikehealy.com.au cranial-bore

    For the less ambitious, more pragmatic developer, I would have simply recommended providing a text alternative to the matrix, which could have been done with an image, SVG, or Flash.

    Yep, that is exactly what I was thinking when writing my first comment. If this were a client project the choice may have been either quoting for ~1 hour to do an image + text alternative or 1 day (or more) to come up with the current solution. The cost difference could be substantial, and hard to justify.

  • http://www.caseyburk.com Wolf_22

    Now that’s what I call content!

  • http://www.sitepoint.com AlexW

    @ cranial-bore: Yep, on a pure client-bang-for-buck measurement gauge, you probably wouldn’t pick this solution. For us there are probably two motivators.

    Firstly, if we can’t justify doing it — as a web publisher/educator/direction setter — then probably no-one could justify it.

    Secondly, your first ever CSS layout was probably a temporary backward step in terms of bang-for-client-buck over a traditional table layout.

    But in the same way that you pay to attend courses and conferences without being able to directly attribute income to them (usually anyway), experimental stuff like this feeds back into how you approach a similar problem next time, and possibly how you approach more mundane daily problems. I learned really useful things about background-position percentages playing around with that ostensibly useless little limousine toy.

    Of course, if you need to deliver a site yesterday afternoon, it’s maybe not a time to crack out the lab coat, but by the same token it is hard to expand your skill-set if you use the same solutions every time.

  • Andy

    im gonna start a flame war with this, but…
    Isn’t this one of those things where a table is perfectly acceptable.

    although it does look very nice, and the only place your gonna see something done that well is on a webdesign site.