Quick Metro CSS Toolkit

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

http://stegriff.co.uk/content/metro/

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! :)

Advertisements

Understanding protocols by designing one

This is an article I originally added to our tutor group wiki to help one mature student understand network protocols. This guide does not include any programming.

***

A protocol is an agreed way of communicating, but it is less like a translation service and more like a language. I think the best way to learn this may be imagining that you have to invent a protocol.

Imagine you’re making a social game where players can move left or right on a 2D landscape, and also chat to each other.

As we know, there is a client part and a server part to networking (usually). In computer networking, protocols are defined in terms of packets; their IDs, and their payloads. When developing the protocol specification, you decide that there are the following data that need to be transmitted:

  • Move
    • Left
    • Right
  • Chat
  • Login
  • Logout

So you want to define a language that transmits this data efficiently. Notice that all of these basic activities require some parameters:

  • Login: Username? Password? Spawn location?
  • Logout: Quit/error?
  • Move: Left/right?
  • Chat: Message?

Now, when you want to do one of these things, the client need not transmit the name of the action to the server, because it would be overkill. There are only a limited number of options for what it is possible to do.

Transmitting “Move” or “Logout” requires n bytes where n is the string length, and the length is unpredictable for the recipient (“Move” is 4 letters, “Logout” is 6) unless you “Length-prefix” it (send a byte straight before to tell the server the length).

So, we create a protocol for shorthand sending and receiving of these messages. Let’s look at an example client protocol:

PacketID Meaning Parameters
00 Login Username (length prefixed string); Password (length prefixed string); Spawn location (byte)
255* Logout Quitting? (boolean)
01 Chat Message (length prefixed string)
02 Move Left? (boolean)**

*It’s convention for 255 (hexadecimal ‘ff’) to be logout – this is the highest value a byte can hold.

**This is the smallest way of transmitting this data. Your direction can be one of two values, so why transmit it as anything larger than 0/1? In this example, 1 = left, 0 = right.

Example client data transmission:

(N.b. I’ve put the numbers in binary to give an accurate representation of space savings and wasted length; an empty byte is 00000000 – spaces are added here for readability and would not be transmitted)

00000000 00000111SteGriff00001000password00000001
00000001 00001000Hi guys!
00000010 1
11111111 0

Above: A player logs in, says “Hi guys!” to the other players, moves left one step, and then his game client crashes without him quitting properly via the ingame menu.

The protocol refers to the fact that the server is developed to “understand” all of these signals, they are a pre-agreed format of communication.

How does one side know that a packet has finished?

Because it’s contents and their length are regulated. This is the one of the reasons for a protocol. When the server gets an 02 it says, “Look, it’s a chat packet! That means now I know what to expect: a number, then I read that number of bytes for the guy’s message. Then I’m done with this chat packet, and I can wait for the next packet from my other clients :)”

Let’s look at the server

One problem might be apparent, and that is that if the server just re-transmits all these “move” signals, every client is going to be VERY BUSY trying to keep track of where things are on the screen, and if a move packet is lost, players will appear in different places on different screens and none of them may be accurate.

Therefore, the server has a different transmission protocol, which the clients are programmed to process. Example:

PacketID Meaning Parameters
00 Login response Accepted? (boolean)
255 Kick Reason (length prefixed string)
01 Chat User (lps) Message (lps)
02 Location User (lps) Location (byte)

When a user attempts to log in, the server validates their password, and throws back 1 if they may proceed, or if they may not, a 0 and a severed connection.

The counterpart to quit is kick. The server owner might decide that a player is being inappropriate and send them a packet like:

11111111 00010100No swearing, please.

This is purely informational, the client doesn’t accept its fate and close itself down – the server subsequently drops the connection to that client.

When the server receives a chat packet, it sends a packet to every player with the speaker’s name* and a message.

00000001 00000111SteGriff00001000Hi guys!

*This is a bad way of doing it. Ideally, when a new user logs in, the server should tell everyone to add a player to their register, with a UserID associated to a PlayerName. You’d reserve a packet ID for this. This means that instead of broadcasting the name “SteGriff” everytime, you can just send binary 244 (assuming I’m the 244th player). This optimises repeated 8 byte transmissions to just 1 byte. Then every client says “oh yeah, player 244 is SteGriff; he must be talking.”

The solution to our move problem

So what about the player ‘ghosts’ in higgledy-piggledy places?

The server should’t pass on the change in location – rather, the players’ actual, absolute locations in the game world. So, if user ‘Tommy’ moved to space 131 in our game world — the last thing he sent was a packet meaning “move right” — the server updates the location it has on record for him, and tells everyone:

00000010 00000101Tommy10000011

…”Tommy is now at location 131″. Every client receives this, and draws him in that position. Because they were updated on his previous positional moves as well, hopefully they just see him making smooth progress. However, if they lost a packet, he will seemingly ‘jump’ across the screen, but at least he’s in the right place!

Wrapping up

Other protocols for more serious applications work very similarly. HTTP has a series of codes like 200 (OK), 403 (You’re not authorised to look at this), and 501 (It’s not you, it’s me). You might like to check out http://httpstatus.es/.

If you’ve started working with VB or C#, check out the packet libraries built into the .Net framework; they make it easy, like this method which automatically prefixes your strings with their length before writing them to the stream: BinaryWriter.Write()

Conclusion and sources

Hope this was useful and maybe even exciting. If you want to go ahead and write your own networking program now then I’ve done more than enough, but at the very least I hope it answered some of your questions.

I’m currently a professional web and software developer, but most of this information and the way it was presented was based on my experience with the Minecraft Classic protocol, which you may be interested to peruse.

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.

Graphs

I just love graphs. Today I decided to graph the first year of my mobile phone contract. I used chartle.net which is a frontend to the Google Charts API.
Here are the results:

Phone usage graph

Graph of all services

 

Phone usage graph

Again, with a clearer axis for just minutes and data

“Data” is what my phone bill calls “Mobile Internet”. I think that it is data requests made by third party applications. The set marked as “BB” in the legend is Blackberry Internet Services, which incorporates web browsing, BBM, and email.

Graphs are good for you!* Make a graph today.

*No study was completed to establish the health benefits of graph creation.

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.

Conclusion

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.

Quickpressin’ some Linux thoughts

The Linux news scene is currently littered with glimmering objects, and for a magpie such as myself (to continue that allegory) this represents far too much, far too bewildering, stimuli.GNOME Logo

I took a look at Fedora 15 recently, and my experience with GNOME 3 was embittered by the whole furore surrounding Ubuntu and GNOME’s somewhat inamicable divorce. The dissonance in GNU/Linux as a is unsettling. So are the boastful major version increments evident in both GNOME and KDE.

Also, I’m sat there using it, and while the user experience was really quite good, the whole time I’m thinking “Is this bloatware? Is it really lighter than Windows 7?”

As the required system specs for Linux approach those of their proprietary rivals, they have to do more and more with the interface to make it worth using; that’s how it seems. The idea that Linux should not be considered a second-rate free alternative has led to Linux being as fat as everything else to accommodate an easy-to-use experience.

Contrastingly, Tiny Core Linux 3.6 is really great. I’ve tried out a lot of lightweight distros on my aged laptop, but TCL is the keeper. It’s an inspired paradigm, very slick, and keeps strictly to good old UNIX design values: each element should do one thing, and do it well.

So there it is. TCL on the laptop, and for now, my main machine keeps Windows. It’s not quite risk-free enough to switch wholeheartedly to Linux, but hopefully soon that will be completely viable.

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. :)

Settlers of Catan

Settlers of Catan is a popular German breed of board game. It has a few simple and attractive concepts which somehow make it into an incredibly fun game. Incredible, as I can literally not quite credit just how it is so much fun.

The game has you collecting resources from the land you own, correspondent to the throw of the die. By spending these resources, you can essentially choose to claim more land, add value to the land you own, or progress your overall operation. Similarly to other games I’ve played (such as the Age of Mythology board game), you collect Victory Points by achieving things. Accumulating 10 of these, openly or secretly, results in a win for you.

Catan board

Much like in Monopoly, trading is very open and player-defined, except for a few rules which streamline proceedings by making it impossible to tribute another player in an imbalanced fashion.

The roll of the die tends to benefit all players the same as long as they’ve spent their very first turn wisely. As a result, the game relies more on skill than on chance, and there is an overflow of things to be found within its mysterious depths; far too many strategies to comprehend on the first or second play. Players of Catan gain a web of understanding, and must gradually soak it in the game’s very ichor.

As there is only one moving board piece, the game can be played effectively on paper. This is something I am currently documenting, but a thorough reference to the Catan box contents has been posted on boardgamegeek by one droberts441.

Since this game has been called the board game of our time, you would do well to check it out if you’re not already a fan, it really is very good.

New Programming Regime

I’m currently in the frame of mind where I want to program games. Often, I flit in and out of this mindset, but this time there’s a genuine plan.

Inspired by Petri Purho, other Indie developers like Cactus and Increpare, and – strangely – Intel, I have decided:

  • Games will be produced on a tick-tock basis.
  • On a tick, a new game will be made.
  • On a tock, an old game will be improved.
  • The cycle will take some regulated length of time.

Currently, I’m working on Slimetanks, which has recently suffered a few huge setbacks which are making me sad. I had to move the number of Slimes you have from a simple counter into an inventory entity, which means re-writing a lot of subs.

The next game will be me bringing up to grade something I started a long time ago. Teaser to the right.

In blog news, I had over 40 views per day just after my post on BASS. This is strange, and I’m trying to scope out why that happened. My most popular post is the Pokémon cards one.

See you soon, tubes.

craftscii

OK, so I’m working quite hard with the newly named ‘slimetanks’, getting it polished and making it fun in some way. In the interim, like I promised, here is the full version of WorldGen, now called:

 

Craftscii

A game where colourful ascii blocks lie between you and some zombies.

  • Tutorial
  • Never-ending game mode
  • Sandbox mode

For pictures, see the linked trackback.

For download: craftscii version 0.11

Slimes soon!