Rolling up the homepage, Katamari-style

Ever wanted to completely destroy the University homepage? Of course you haven't! But now you can if you like, just for fun, Katamari-style.

Tech blog Engadget has a story about a genius bookmarklet that transforms any web page into a rollable Katamari landscape. If you've never heard of Katamari Damacy, it's a Japanese video game with a plot too bonkers to describe but which involves rolling up ever larger objects in the manner of rolling a snowball (see youtube for visuals). This bookmarklet lets you do likewise to a web page, and even features the same jaunty music as the game.

How is this relevant to a Web Office blog? Hardly at all, but it's fun :) On the technical side, it's a very powerful demonstration of what can be done with Javascript and advanced CSS transforms in a modern browser.

Check out the video below of me having a go, or see the Engadget link for the code to try it yourself (you'll need a decent browser - Chrome or Firefox4 are recommended by the developers).

Zen coding for rapid HTML authoring

Writing HTML is fiddly. All those angle brackets, quotation marks, slashes and the rest have always tested my keyboard dexterity. Dreamweaver and other editors try to help, but none compare to a brilliant new(-ish) multi-editor plugin called Zen Coding.

Instead of writing HTML syntax, Zen Coding lets you write CSS selector-style abbreviations and hit a button to expand them to HTML. It’s lightening quick and lets you write HTML snippets in seconds. Simple additions to the CSS syntax allow for output of multiple tags (eg. li*2 becomes <li></li><li></li>
) and automatic numbering (eg. link-1, link-2). It’ll do even more clever stuff than that too, but I’m still a novice!

A really quick example:

blockquote#boxout>h2+p+ul>li*3>a[href="/link/"]

expands instantly to

<blockquote id="boxout">
<h2></h2>
<p></p>
<ul>
<li><a href="/link/"></a></li>
<li><a href="/link/"></a></li>
<li><a href="/link/"></a></li>
</ul>
</blockquote>

Filling the empty code with content is easy too because there’s a handy ‘next sensible spot’ keyboard shortcut to skip from the H2 to the P to the LI to the HREF etc.

The one gap for me is that I have to use a text editor to use the Zen Coding expansions. Most of my coding is done in Firebug or within our CMS so I can’t use the expansions directly where the code needs to be. I’ve always got a text editor open so it’s not a big deal, but a Firefox/Chrome extension or integration with a generic text expansion utility (as Paul blogged about previously) would be even more brilliant.

There’s a full tutorial on Smashing Magazine, including the rapid-fire demo video embedded below which shows just how fast it can be and what it’s capable of.

Quick CSS tip - alphabetise your properties

Since I first read about this technique about a year ago I've been using it without even thinking about, but I'm reminded how much of a time saver it is every time I work with CSS that isn't alphabetised.

Compare and contrast:

Unordered properties

.myclass {
    position:absolute;
    top:0;
    left:0;
    width:42%;
    margin:0 0 0 8px;
    padding:8px 10px 10px 10px;
    border:1px solid #e6e6e6;
    background:#f5f5f5;
    visibility:hidden;
    font-size:85%;
}

Properties in alphabetical order

.myclass {
    background:#f5f5f5;
    border:1px solid #e6e6e6;
    font-size:85%;   
    left:0;
    margin:0 0 0 8px;
    padding:8px 10px 10px 10px;
    position:absolute;
    top:0;
    visibility:hidden;
    width:42%;   
}


Image by Jan Tik

Updates to our CMS print style sheets

"Improve print style sheets" had been languishing near the bottom of my to-do list for what seems like eternity - they're not the most exiting topic after all. Today I decided that it was finally time to get on to it.

Here's what a typical page looked like:

It's not a complete disaster, but there's plenty of room for improvement - the logo looks messy, text is indented where it shouldn't be, and there's quite a bit of formatting missing, especially for styles that had been introduced via our CMS (the original page contains a styled quotation and some content in boxed regions).

So an hour of tinkering later, here's what the printed pages now look like:

Here's what I did:

• Added a print specific version of the logo, rather than using the one that appears on screen (using the :before pseudo-class).
  
• Added print styles to match the onscreen formatting of boxes, bullets, tables and quotations.
• Hid a few more links that aren't of use in printed form.
• Increased the line height to improve readability.

There are still a few more improvements that I'd like to make, such as automatically inserting the URLs of links (as described in the A List Apart article, Going to Print), but they can wait until next time.