Slate: Javascript Configs

Slate, the fantastic window manager for OSX has recently added really cool JavaScript configuration files letting you do some crazy conditional magic with your windows.

Things That Made 2012 Fun

Whether we're working, playing or relaxing, there's always a bunch of things that make our days fun. Here's a few that I enjoyed during 2012.

Games

Fez
A platformer with so much mystery behind its beautiful pixel art that I ended up with pages of cryptic notes on solving its devious hidden anticube puzzles by the time I'd finished my first run-through.

The Walking Dead
By far some of the most well executed story-telling in a game. You become so attached to these characters that the decisions the story throws at you are often genuinely difficult. You shouldn't miss this one.

Borderlands 2
Sometimes you just need some dumb fun - Borderlands 2 has plenty of it - especially when you have the chance to play it co-op.

XCOM: Enemy Unknown
Firaxis somehow managed to modernise turn-based combat and strategy in a way that stays true to its roots while making it both accessible and incredibly addictive.

Books

Slightly behind on my reading at the moment - mainly because I seem to be getting through the A Song of Ice and Fire books at a rate of about one a year…

At Home (Bill Bryson)
I consider Bill Bryson's books to be gateways rather than in-depth explorations of a topic (in particular A Short History Of Nearly Everything). At Home is no exception - he never delves too deeply in to a single area but his broad, engaging approach to covering 'the way we live' opens so many doors that I now have a strange need to read more about 18th century brickwork, amongst many other things.

Getting Things Done (David Allen)
Although this book has been around for a while, I've always dismissed it as self-help nonsense. Earlier in the year I found myself spending my evenings worrying about what I needed to do rather than relaxing, reading this was step one to sorting that out. While the book is about 90% longer than it needs to be it has some genuinely useful advice that has helped me relieve stress more than I thought it could.

The First Law series (Joe Abercrombie)
I can't make it through the year without getting engrossed in a new fantasy world - The First Law did that for me this year.

Board Games

Lords of Waterdeep
Wizards of the Coast have been putting out some great board games recently, but this is the one I've played the most. Read my full impressions.

Summoner Wars
We picked up the Summoner Wars Master Set at this year's UK Games Expo after hearing a lot of good things about it. It's essentially a 1v1 card game where each player has a deck of cards representing their team, each with a different speciality, which can make for some interesting games and combinations.

Star Trek: Fleet Captains
Fleet Captains has you manning a fleet of ships in a battle against an opposing faction (Federation and Klingon in the initial release) with Star Trek ship miniatures, cards bearing the faces of various series crew members and the stories told by missions, exploration and encounters (getting stuck in a temporal loop, for example), this is the ultimate Star Trek nerd experience.

Galaxy Trucker
Not a particularly new game, but one I've only recently picked up. Galaxy Trucker has you building a spaceship out of a big pile of components before you pilot it through space against a series of strange encounters to see who can earn the most money. It's simple enough, but it can treat you to stories like that time your entire left wing got shot off by space bandits because your ship built in a hurry (there's a time limit) was a bit more rickety than you had planned…

Sites

Giant Bomb
If you're at all interested in video games, the content the Giant Bomb team put out shouldn't be missed. Unlike many other game-related sites, their style puts the personalities and styles of the editors up-front, making their content relatable and fun. I particularly enjoy their Quick Look video features which give you a more accurate impression of whether you're likely to enjoy a game than any review can.

Tested
Once a sister-site to Giant Bomb, Tested was recently acquired by new corporate overlords with the intention of turning the site in to the home of Adam & Jamie (from the Mythbusters) on the web. Initially a scary transition considering how much you get to know the eccentric personalities of Will & Norm that started the site a couple of years ago. Luckily, things haven't changed much except with an increased budget and exposure to the obsessive mind of Adam Savage, we get treated to such things as a 30 minute video of Adam's Blade Runner Blaster collection, or an interview with The Paper Airplane Guy.

Events

Over the Air
A two day mobile development event held at Bletchley Park (UK) - this year's event had some interesting talks, a fun hackathon and a great atmosphere. The organisers absolutely nail the organisation here - there's nothing quite like sitting in the Bletchley Park mansion all night working on a mobile app surrounded by people doing the same. Can't wait for next year's event.

UK Games Expo
A celebration of geekery at its greatest, the UK Games Expo fills its venue with gaming tables for RPGs, wargames and board games (and the odd bit of LARPing). It's moving to a bigger venue in 2013, so I'm excited to see how it turns out.

Tech

Raspberry Pi
Although mine is being used as a rather uncreative media center, the potential and flexibility of this cool little device is endless and exciting.

Fitbit One
It's a little difficult to argue that this is much more than a toy for stats nerds, but I find it fantastic. It's a wonderfully designed device and I'm surprised at how much I'm driven to meet my step goal for the day.

A Kettlebell
Although not exactly technology, a friend recommended one to me for good all-round excercise. It's a great excuse to get moving and strengthen my back when I spend most of the day sitting down.

Software

Slate
A powerful window management tool for OSX. Configured in a text file, this tool fits in perfectly with the rest of my OSX workflow tools.

Ledger
I tried a whole bunch of GUI-based accounting/budgeting tools before I found Ledger - each of which were frustratingly lacking in some way or another. Ledger does everything I need it to and as an added bonus, is entirely CLI-oriented, with the option to extend and add functionality in Python. Brilliant.

Lords of Waterdeep: First Impressions

Lords of Waterdeep Cover Art

We've been playing quite a bit of Lords of Waterdeep (the latest D&D board game from Wizards of the Coast) recently - it's quickly becoming one of my favourite games in my collection so I thought I'd share a few impressions and thoughts.

I own almost every board game that Wizards have released (Castle Ravenloft being the only exception) - one thing I've noted is that they're consistently of extremely high quality - from the well-structured instructions, to high quality components, even the boxes are so well-designed it's almost as fun to put the bits away as it is to play the game...

Lords of Waterdeep Box Inside

Lords of Waterdeep is no exception; it feels like the thought that has gone in to refining and perfecting the components parallels the planning the actual gameplay must have gone through. This is probably no surprise considering the investment Wizards can probably afford to put in to their games, but it's nice to have nonetheless.

The main gameplay mechanic is worker placement - the player assigns their set of agents to various buildings around the board, each building offering a different benefit to the player. The variation here comes from the Builder's Hall, a location on the board which allows the player to build and own a new building from a set of building tiles which can then be used by either player on future turns. In our games, we usually build around 6 new buildings, so each game has a completely different set of options which have quite an effect on how it plays out.

Lords of Waterdeep Board

Quests are where the game gets really interesting - the Cliffwatch Inn building allows the player to draw a new quest in to their hand, each of which has a set of requirements and a reward for completion. The requirements are always some combination of the 5 resources available in the game: Clerics, Fighters, Rogues, Wizards and Gold. For example, you might obtain a quest that requires 2 Fighters, a Wizard and 4 Gold which on completion will reward you with victory points, more resources or in the case of special 'Plot Quests', a permanent bonus for the rest of the game.

Player interaction (aside from being able to block your opposition by using a building before they do) comes in the form of Intrigue cards, a set of events which can help you or hinder an opposing player. Some events will force others to discard resources, some will force a mandatory quest (with poor rewards) on them which requires completion before they can finsh any other quests. With two players it's not particularly cutthroat, but there's still plenty of opportunity to really mess with your opponent.

The victor is the player with the most victory points at the end of 8 rounds which we found takes about 60 minutes for two payers. Each player reveals the Lord they were dealt and saw at the start of the game, each of which has a different secret bonus which influenced the players' actions throughout the game. One players' Lord might provide bonus points for each building they built during the game, another might give a bonus for all quests of a certain category that the player completed. These points are tallied with the victory points earned during the game by completing quests (tracked on a track around the game board) and the player with the most points wins.

There's something extremely satisfying about playing Waterdeep - whether it's the constant micro-achievements (through quests), the fun of plotting out a clever series of moves and watching them unfold, or some other culmination of the games excellently executed set of mechanics. Either way, you should grab a copy of this game - it's well worth it.

Adobe & HTML

Adobe's doing some really great stuff to advance HTML/CSS as a standard and as a tool.

CSS Regions and Exclusions seem very important for the future of digital design, not to mention the potential for digital magazines - the output of Adobe's current Digital Publishing Suite has never particularly impressed me.

Why You Should Play Board Games

Quinns of Shut Up & Sit Down argues why as a video game player, you should play board games.

You walk into a board game shop (not your Cranium or Cluedo, I’m talking proper nerd board games) and every one of the games on the shelves is a human being’s shrinkwrapped idea. There are still disasterpieces, licensed cash-ins and cynical sequels, but for the most part you can walk to any part of the shop, stare dead ahead and find yourself staring at the five lovingly playtested dreams of five human beings.

His follow up post, Hard Copy pt. 2 has some great suggestions for getting started.

SASS: Don't be scared of loops

SASS' loops are one of the most controversial features in the popular CSS pre-processor - some argue that if you have to use control statements your CSS is probably too complicated.

While there are plenty of ways to build deeply convoluted styles using the tools it provides, as with the rest of SASS (mixins, functions & variables) the use of loops is in refactoring, simplifying and easing maintenance of existing CSS by making it as DRY as possible.

Consider the icons I use on this blog. They're all part of a single SVG sprite map reused in a few modules around the site, each of which has a slightly different requirement for their presentation (size, border style, hover effect). We'll start by writing some nice modular CSS to structure these:

.icon {
    background: $dark-color url("../img/icons.svg") 0 0;
    @include background-size(288px 32px);
    @include border-radius(20px);
    width: 32px;
    height: 32px;
    border: 4px solid #fff;
}
.icon-all {
    background-position: 0;
            background-color: #777;
}
.icon-videogames {
    background-position: -32px;
            background-color: #AD0000;
}
.icon-boardgames {
            background-position: -64px;
            background-color: #108C03;
    }

/* And so on */

Great, now we'll create our CSS for the smaller versions of the icons. Note that changing the background size on the icon class means we need to update all our offsets too.

.icon-small {
    @include background-size(144px 16px);
    width: 16px;
    height: 16px;

    &.icon-all {
        background-position: 0;
    }
    &.icon-videogames {
        background-position: -16px;
    }
    &.icon-boardgames {
                background-position: -32px;
        }

    /* And so on */
}

It's quite easy to see that our stylesheet gets harder to maintain as we add more variation. What if (for whatever reason) we wanted to change the order of the sprites in the sprite map? Or if we wanted to increase the size of a whole set of icons by 4px?

This is where I'd start to consider a useful SASS pattern involving a loop, and a list.

My icons only have a couple of varying attributes: their position in the sprite map, and their colour. So we need some nice way to include the correct attributes in each iteration of the loop.

Whenever we set values in a CSS declaration or pass arguments to a mixin or function SASS uses a list - we hardly know they're there because their syntax so closely resembles CSS.

Conveniently we can also specify our own variables to be lists - and even more conveniently, they can be multi-dimensional. This means we can combine them with loops and have different attributes available in each iteration.

$category_icons: 0 all #777, 1 videogames #AD0000, 2 boardgames #108C03, 3 dev #AF049B;

That's a basic nested/two-dimensional list in SASS. It works because both comma and space are considered list delimiters. We could also use parentheses to separate each list if we want to use the same delimiters:

$category_icons: (0 all #777) (1 videogames #AD0000) (2 boardgames #108C03) (3 dev #AF049B);

Now we have all our varying attributes in a nice simple structure, we can refactor all that CSS in to a couple of nice maintanable loops:

.icon {
    /* Existing .icon styles /*
}

@each $icon in $category_icons {
    .icon-#{nth($icon,2)} {
        background-position: - nth($icon,1)*32px 0;
        background-color: nth($icon,3);
    }
}

.icon-small {
    @include background-size(144px 16px);
    width: 16px;
    height: 16px;

    @each $icon in $category_icons {
        .icon-#{nth($icon,2)} {
            background-position: - nth($icon,1)*32px 0;
        }
    }
}

Here, our @each loop iterates through the first index of the array, within which we output our CSS for our icon class.

The nth() function used here just gets the nth item in the list: nth($icon, 1) will return the 1st item in the $icon list. (SASS lists are 1-indexed: the first item in the list is at index 1, rather than 0).

The class name is set using #{variable} interpolation syntax with the second value of the 'inner list', creating class names such as .icon-dev

The rest is relatively straightforward - the position of the icon in the sprite is the icon index (the first value from the inner list) multiplied by the icon size, and the background colour is the third value.

Now, when we want to add a whole set of icons which are a different size, or re-arrange the sprites, we can just add a new loop or restructure our original list and everything will update.

In summary; don't be scared of loops. Keep thinking in CSS and refactoring in to SASS and your styles will stay as beautifully structured as ever, except you'll have a much easier time maintaining them.

Shut Up & Sit Down

Shut Up & Sit Down is well worth watching - a fun mix of humour and board game reviews.

We believe that boardgame journalism should be as surprising and heartfelt as the hobby itself. As anyone who’s ever played a tense hand of poker will know, there’s a tender, emotional core to this hobby. A core we would like to expose like a couple of amateur surgeons performing open heart surgery.

But with more jokes.

See All Posts