Quick Metro CSS Toolkit

I thought it would be fun to make a Metro — sorry, WINDOWS 8 MODERN STYLE — user interface in HTML+CSS.


It’s just a rough thing. Inaccurate but unmistakable. Take a look at the source (press Ctrl+U on the page), I think it’s nice to work with. There is no support for icons on tiles yet, but it should be easy to add if you want to. Press F11 to go fullscreen for Metro immersion.

Tell me if this is of use to you! :)


Specialised services and the ambient workspace

Screenshot of a Windows Live Space

Somebody’s Windows Live Space (not mine)

Abstract: I think that our contemporary web services are doing fewer things, and doing them better, and our platforms are consolidating more information, more usefully.

The rise of the central service

Years ago I had a Windows Live Space. This was a weird blogging service slash Myspace clone, and an all-round fumbled gambit into the hastily developing world of social networking, by the ever-lovable Microsoft. Thing is, not all of my friends were on Windows Live, despite it being their first choice for email and chatting. This bugged me. Some kids had LJ, some had Xanga, and the lion’s share were on Myspace, of course. I thought, “I don’t want to sign up for all these different things and manage a million accounts, there should be some way that they can all be consolidated.”

Or, more accurately, “Everyone should decide to use the service I’m using.”

Then there was Facebook. It had photos that were taggable and statuses and chat and these new app things and games and best of all, everyone you knew was on it, something that happened practically overnight.

The fall of the central service

Now I’m going to make the bold claim that this utopian vision of togetherness is backwards, and that we are abandoning it without realising. Facebook has the world’s largest collection of photogtraphs, but more and more of the photos posted in timelines are coming from other services such as Instagram. Facebook has recently tweaked interface prompts to increase engagement, and — anecdotally — I have seen a lot of friends joining and engaging with twitter, and hearing that they log into Facebook but don’t create as much content as before. That’s interesting, and that’s bad for Facebook.

I’d posit two reasons for this:

  1. Specialised services are better at what they do (see Unix Principle)
  2. The devices we’re running these things on are getting better at giving us information ambiently.

Ambient workspaces

Let’s leave point 1 for the moment, and look at point 2, because I made a graphic. Click to enlarge.

Diagram showing traditional dekstop versus ambient workspace

Even if we’re not all using KDE or Windows 8 (yet), maybe you have a sidebar application for Twitter. Maybe eBay integrates into your mobile phone’s messaging system so you can see new bids alongside your SMSs and emails at a glance.

I strongly believe that this is a paradigm we are working towards, because the fewer clicks or keypresses you need to get to your subject of interest, the better. Why should we waste screen estate on wallpaper and icons, when the icon itself tell you what you need to know?

I’ve overlooked and glazed over a lot of points, but start a discussion in the comments if the fancy takes you.

Slabs dot TV

Slabs.tv logo

Slabs.tv logo: The square is a slab, and it's tilted because we're tilted.

My friend Ben and I had been musing on making a comedy site for a while; videos are to Ben what code and… sonnets… are to myself. So, naturally, I was conscripted into hours of unpaid web design and admin duties, and we have emerged — I, scalded from working over a hot DNS — with Slabs.tv.

I could probably do a whole post on the branding and the tribulations of trying to procure an occupied dot-com domain, and that is outside the scope of this discussion. So, take a look at the website; it is herein appraised!:

Site design and accessibility

The first thing you notice if you’re a design-y sort of person is League Gothic. Try and escape this typeface. You cannot! It is not possible to evade the clutches of it and its bold, tall, gothic brethren, unless you entirely sequester yourself from the graphical web. If you highlight the text of the logo, imagining for a second that it is not an image, you will notice that it works! This is a trick I learned from Erica Greco’s website, and it aids accessibility for people with screen readers or text-based browsers like eLinks.

Blue is the easiest colour for which to design. Well known fact, that. I set it off against a sandy background and used a Photoshop tutorial on torn-paper edges to get the horizon at the top and the tabs. Ben said from day one that we should have a torn paper design, and I agreed. Rightly? You decide!

The site is much tidier than I had planned, quite sober, but I don’t think it loses out for that reason. An advantage is that if you zoom your browser in or out 5 steps (CTRL + Mouse scroll wheel, then CTRL + zero to return to normal) all of the content panels stay in proportion, so the site shows well on very big – or very small – displays. This is key to web design.

Financial and technical

As for the hosting, the whole shebang is on the same server as SteGriff.co.uk (which you might have used to get here today), and Ben pays 40% of my hosting costs. This is “reselling”, and does not contravene my host’s term and conditions (which is strange, I thought, but I’m not complaining). The Slabs.tv domain would cost £30/year from my host, so I got it from a different provider (123-reg.co.uk) for £10/year and messed with the nameservers until it pointed in the right direction.


Things like this are what I do. I am nowhere near pro at web design, but I have experience and problem solving skill. If you want to pay me to make you a website, that would be great! I design sites with accessibility and low-download size in mind, without compromising aesthetics (I hope).

Here are some other sites which I want to talk about in the near future:

Le Game – IP Shortening

Cloud Tools

In closing, I make no apology for the length of time between blog posts. You do however, get this nice lampshade.

Pokémon League Badges

In celebration of the new Pokémon games, I have set about recreating all 40 of the Pokémon League badges, from Kanto to Unova.

There are a few which are not as good as the rest, and for me, the Sinnoh row stands out as the best. I am releasing them under a non-commercial share-alike license, so if you want  a T-shirt of them, feel free to buy yourself one from Vistaprint or similar. The first one is free. I’m not publishing the SVGs yet, but they will follow. Here, have a look at the quality of the PNG coal badge. Here is the zephyr badge, and the original artwork.

My sister and I are really enjoying Pokémon Black and White! A blog post about that will follow soon.

Have a nice day. :)


Scenario: My friend Ben and I need to exchange links to web resources on a regular basis.

Problem: I do not have Facebook. Ben does not have Twitter. Ben does not use email. Lastly, Ben does not have a rich-web capable phone with which to receive links via SMS. As you can see, this is mostly his fault.

Solution: Ben And Ste’s Social, or BASS.

While it now has 3 users — and should more accurately be called BLASS — my latest PHP experiment remains a minimalist text-and-links sharing site. It has hardcoded user data, meaning you only need to enter a password in order to post. That is obviously ‘fail’ in several ways, but it is also super secure. It has its problems, but at the moment it does the job perfectly under the load expected.

I learnt to use flock() instead of the time consuming process of restoring from backups, and a major revision is underway which will queue and batch-manage messages rather than allowing each client to modify the master log.

The tagline, and even the name of the service (“Bass”) can be changed by any of the priveleged users in their Config options at any time, which adds fun. Messages stack in a way which I am beginning to realise is what is generally acknowledged as “backwards”. I will fix that.

Bass will also have support for an embedded HTML document for each user which gives them tabbed access to their favourite websites search facilities. It automagically recognises links, even those which lack protocol prefix.

BASS is private and has no signup system.

OK. Good. I’m glad we had this chat.


…I haven’t got much of it any more.


I am truly sorry that that page is not better designed; my CSS falls down on many occassions. I’d like to thank the people who sponsored and helped. The money will be with World Vision as soon as it has been totalised and the gift aid sorted out, etc.

The event was videoed, and the refined example will be released as soon as my video drone is finished in the lab.

See you soon internets.

More PHP Fun

2 PHP-solvable problems presented themselves to me this week, both, as it happens, on Minecraft Forums. I imagine that just happens to correlate to the amount of time I spend there.

In the first case, I wanted to be pretentious about making a tally chart. This was because in just ONE topic (albeit a very controversial one) it had been necessary for the mods to ban a total of 6 people. That needed tallying. There was a sense of urgency to getting my post out, and as such I ended up just making an ASCII rendition. The problem remained, and eventually, tally chart generator happened.

I want to make very, very simple web apps which take minimal input (not a whole form) and give minimum output (not a glossy translucent .png) because I think that kind of thing is cool. The novelty of this sort of programming hasn’t worn off.

As such, the next thing to emerge was an image resizer. Despite the wealth of code snippets out there to do this, I decided to write from scratch using the PHP docs. The problem came around when, in a Pixel Art thread, a contributor excused his tiny image because the ImageShack variety had failed him. It works with all .pngs but I plan adding non-animated .gif support.

The image resizer doesn’t have a nice introduction text like the tally, but is documented in the thread to which I linked above.


That is all of my PHP productivity for this week.

Embedding Google Web Search

I was building a new personal home page portal today. I keep one at http://my.stegriff.co.uk and set it to my home page everywhere. I wanted to incorporate a Google web search, for those places (college) where some units have IE6 (and therefore no search bar in the top right on which I rely).

I went through many complex possibilities, many of which were not appropriate. Examples are Google Site Search, its free derivative, Google Custom Search (after I realised that ‘site search’ was premium), and Google Search AJAX API. The API was really neat, but not deep enough for what I wanted. Preferably, I wanted to actually be directed to a Google search results page, rather than just have the API panel expand to show results. It also gave you very little design versatility.

Later, I searched for embeddable Wikipedia search code. The simplicity of the form was what I wanted with my Google search. I used my Firefox bar to search Google, and realised that the resulting URL was in a similar format, etc…

I decided on the following:

<form action="http://www.google.co.uk/search" method="get">
<input type="text" name="q" size="28" />
<input type="submit" value="Search" />

Which works nicely, as you’ll see if you follow my top link.

The right hand panel serves the same purpose as the whole page used to; my frequently visited sites.

People and Playlists

Ha. So I’m a mood which I have designated “infatuated”, and wanted some music to match.

I tried Last.fm, with tag “Love songs” which sucked. Also, some soppy artists’ stations, which transpired also not to be my thing. Then I decided I had enough music to put a good playlist together from my collection, ranging from Depeche Mode to Britney Spears, to Avantasia, Yellowcard, Greenday, and Franz Ferdinand. So pretty much all of my favourite artists.

It is much better than the procedurally generated offerings.

I spent the middle part of yesterday with my good friend Edward. My teaching him guitar is merely an excuse for our meetings, which are far more widespread in topical coverage. Oh, also he bought Minecraft by the time I left. That’s 4 sales I am directly responsible for now; if only spreading the good news of Christ was as easy as spreading sales of a game where you can beat a sheep to death with bacon and set fire to skeletons from the windows of your hand-built fortress.

Speaking of which, I spent an hour talking with some Jehovah’s witnesses in my porch yesterday. It was good, and there was mutual understanding all around.

Right now, I am developing a guide to the latest paid version of Minecraft, which we call “infdev”, partly inspired by the fact that most new buyers (like Eds) would find it hard to set out. It’ll be out in a few days I suppose.

Dan and Melissa’s wedding tommorrow, which will bring a satisfying closure to all of the stress (other people’s) that I have been made aware of during preparations. I am super-happy for them, too, because they’re a very sweet couple, and awesome people in isolation, for example, I was under the impression for a long time that Dan was the last word in cool. Perhaps he still is.



Quitting Facebook

I’m not addicted, I’m just sick of it.

Admittedly, the initial idea buzzed into my head straight from this xkcd strip. I think Randall is a bit skeptical about Diaspora from the tone of the alt text, but I’m not bothered. I think it sounds like a beautiful thing, and a great alternative.

Anyway, I’m confusing you unless you’re very aware of this kind of thing, or you’ve already read the page where I discussed why I’m leaving Facebook at length.

I tried to make that page look quite good… sniffed out a cunning and perfectly legal way of using the Facebook logo font (Klavika) for my heading. Still, my writing style is super corny when I’m being righteous; that is a matter to be corrected later.

I’ve fixed the hub page of stegriff.co.uk to work in all browsers and resolutions, something I believe in fairly staunchly. I just need to make it XHTML strict compliant and then finish the evening with some /infdev/ minecraft. Ahhh.