HybridConf, 2014

I’m just back from attending HybridConf, a 2-day web design/development conference in Stockholm. It was my first time in the city, and I found it strangely underwhelming. I don’t know whether spending so much time in Amsterdam has spoiled me when it comes to stunning architecture, but Stockholm just felt like it could be any of a dozen anonymous British cities, albeit with a lot more umlauts and street corner beggars.

The conference itself, in its second year and transplanted from Bath by organisers Laura Sanders and Zach Inglis, was excellent. The relatively small attendee count gave it an intimate feel, and the venue – the historic Rigoletto cinema – made this probably the most comfortable conference I’ve ever attended. Perhaps half of the audience were Swedish, with the rest travelling from all around Europe. There were even a few Americans present, and they in particular must have felt at home, as almost three-quarters of the speakers were from the US.

I and co-worker Erin Weigel managed to catch just about every talk; I particularly enjoyed Dan Rubin‘s opening talk about team communication (and it closely matched how we run our teams at Booking.com), and Scott Hanselman managed to be both funny and informative despite having to fit in a second unplanned appearance on stage to stand in for the missing Sara Chipps. But the highlights of the two days were both delivered by people building actual real things. Tom Soderstrom, CTA of NASA’s Jet Propulsion Laboratory, gave us an insight into the sort of work going on there, and how they apply startup culture and thinking within one of the world’s most expensive projects.

Then on Friday, GitHub’s Andrew Nesbitt tempted the live demo gods by wiring together an Arduino-powered, joystick-controlled ball live on stage. I was only slightly disappointed that he didn’t attempt to feed his rabbit live over the internet.

We were of course there as sponsors in our ongoing quest to hire the entire world, and it’s good to hear during the many conversations I had with other attendees that A/B testing and experimentation is becoming a lot more of a mainstream aspect of modern web design and development. We’ve become something of a fixture at web conferences now, and people are much more aware of what we’re doing and how we work. We had sponsored Experience Design Stockholm‘s event the previous evening, where Erin had delivered a great talk on experimentation that was also well-received; I think it’s strange that more large companies aren’t using this route to directly mingle with our industry’s top talent and promote themselves as maybe being that potential next job.

Ten years

On this day, ten years ago, I published the very first post on The Watchmaker Project. At the time, I wasn’t even using the URL, just a temporary Blogger address, but I wanted to join my voice with those discussing and guiding the web design community via blog articles and comment threads in every corner of the virtual world.

The internet, and web design and development, looked very different back then. There were very few content farms, churning out articles at the rate of several per hour. There was no Mashable, no TechCrunch, and no Smashing Magazine. A List Apart documented groundbreaking new techniques and thoughtful articles, and 9rules was the first blog network that had arisen as the acceptable face of the 90s ‘webring’, but other than that, everything was being generated by individuals writing on their own blogs, and commenting on each others’ sites.

It was great.

Within the first week of blogging, I was thrilled to receive comments from luminaries like Jon Hicks and Andrei Herasimchuk, and I soon felt as if I was part of an important community: those who cared about the web and wanted to take an active part in its future. I eventually got involved in initiatives like the biannual CSS Reboot, and later became a volunteer editor at Digital Web Magazine, eventually becoming its Editor In Chief in 2008.

These days, blogging seems so much less important than it did back then. One doesn’t need to share advice on how to achieve a particular effect or work around a nasty bug, because there are a thousand answers on Stack Overflow (or CodePen.io, or GitHub) already. Long gone are the days when everyone had specific Position Is Everything pages bookmarked. Now Google has all the answers.

Still, this will be the 426th post on this site. That’s an average of almost one per week, for ten years; a (theoretically) permanent reminder of a quarter of my life. And you know what? I don’t even care if nobody is reading any more. As Zeldman said:

Envious habits

In a propitious piece of timing, considering last week’s post on forming new habits, I read an article on Medium tonight about ‘The Myth of Creative Inspiration‘, written by habit-transformation guru James Clear. In it, he says:

The work of top creatives isn’t dependent upon motivation or inspiration, but rather it follows a consistent pattern and routine. It’s the mastering of daily habits that leads to creative success, not some mythical spark of genius.

So perhaps I’ve been going about this writing habit all wrong — it’s not enough to tell yourself you will find time to do something, you need to incorporate it into your daily routine. Clear uses an excellent metaphor to make his point:

Creative work is no different than training in the gym. You can’t selectively choose your best moments and only work on the days when you have great ideas. The only way to unveil the great ideas inside of you is to go through a volume of workput in your repetitions, and show up over and over again.

He’s got a point. I’m finding it much easier to stick to a workout schedule when it is the first thing I do when I get up; if I deviate from that schedule, it’s much harder to find the time to fit it in later in the day.

Another interesting article, also on Medium: ‘How to Feel Successful and Not at All Inadequate in One Easy Step‘ is about the deleterious effect that envy can have on your ambitions. I suspect it is something that is particularly rife within the web design community, a combination of our need to over-share everything we do and the ‘rockstar’ culture that grew up around some of the pioneers and early adopters in the industry during the early 2000s. At one point, it seemed that all you needed to do to achieve book deals and worldwide acclaim (and, later, tens of thousands of Twitter followers) was to come up with some new way of floating elements, or build a simple yet beautiful web app and charge people for something they already had for free. Everyone else was trying to emulate the success of the chosen few. I was guilty of it myself, publishing at least a couple of attempts at sparking a new development trend, and announcing then quietly canning a web app or three.

I think perhaps it’s harder to let go of what seems an achievable dream. Once you leave your early twenties, only the most deluded still harbour dreams of becoming a rock star; but having that one great idea for an app, or discovering a new and more efficient way to do your job, is possible at any age. But, like anything worth doing, you have to work at it – again, the advice of James Clear is, well, clear:

…if you’re serious about creating something compelling, you need to stop waiting for motivation and inspiration to strike you and simply set a schedule for doing work on a consistent basis.

The Habit Trigger

The concept of a habit ‘trigger’ is not a new one. It is mentioned in the Wikipedia definition, as “the cue [...] that causes your habit to come about”, and discussed in articles about how to break or change habits. By identifying those situations that “trigger” our bad habits, the theory goes, we can consciously avoid them.

When it comes to engendering new habits, triggers can also be incredibly useful ways to alter behaviour. I’ve found that making sure to  identify or place a clear trigger right in your own path is the best way to trick your brain into remembering to perform the new actions you want to eventually become habit.

In my own attempts to introduce two new regular parts of my day — exercise and writing — I am making use of both physical and locational triggers. To remind myself to exercise every morning, I’ve placed a calendar next to my desk, so that it is one of the first things I see in the morning. Combining this with the Seinfeld “Don’t Break The Chain” method provides a visual trigger that prompts me to do my morning exercise.

To encourage a daily writing habit, I rely more on a location-based trigger. I get into work early and write over that first cup of coffee while the office is empty, or if I’m away in a hotel room I will setup my laptop so that Scrivener is ready and waiting when I wake up. Of course, this method has its drawbacks — at weekends or if working from home, it’s easy to get swept up in work or play and forget to find time to write. At times like those, a trusted to-do list that supports recurring tasks is invaluable.

Ultimately forming a new habit relies mostly on self-discipline, but anything you can do to hack your brain to make it a little easier to keep going can only be a good thing.

Jag Reehal: Responsive Workflow with Grunt, at Refresh Cambridge

Grunt logo

At last night’s Refresh Cambridge meetup, the first of 2014, we were lucky enough to have Jag Reehal come to speak about his experiences with using Grunt — the JavaScript Task Runner — to facilitate easier development of responsive websites.

After some introductory slides to define responsive design (fluid grids, flexible images, media queries) Jag jumped straight into some live coding demos. Here’s a summary of what he demonstrated, with links to the relevant Grunt plugins in the NPM archive where I could find them:

  • A basic Gruntfile is a series of tasks that you want to run, written in fairly basic JavaScript. You can output text, warnings, and cause a task to fail.
  • The time-grunt plugin lets you see how long tasks took to run.
  • The grunt-concurrent plugin allows you to run two or more tasks in parallel instead of in series.
  • It’s easy to create your own Grunt plugin; use the grunt-init-gruntplugin as a template. It includes tests, which is a important part of any plugin.
  • Since we want to build a responsive page, we’ll need to access it on a variety of devices while developing. The grunt-contrib-connect plugin starts a basic server on a local address, so you can load your work-in-progress on your phone or tablet as you work. It also includes a livereload feature, so you don’t have to refresh each device after making changes to the source files.
  • We’ll be using media queries for responsiveness; in order to avoid repetition of values or breakpoints in our CSS, we should use a preprocessor like LESS or SASS.
  • The autoprefixer plugin is especially clever; just tell it what browsers you want to support (or even how far back it should go to support) and it will automatically fill-in browser prefixes for any CSS properties that need it. And the best thing is that you don’t have to worry about going back to change support when new browsers come out!
  • By using CSS compilers, we can easily split out the various parts of our code into logical areas, and import them into one single stylesheet.
  • The grunt-browser-sync plugin is almost like magic; it synchronises form values (and presumably UI state as well) across browsers/devices — update something on your desktop and the same change will appear instantly on your mobile! It also cleverly doesn’t force a full page reload if you update a source file; it simply injects only the updated file into the page, preserving any changes you have made. And it even lets you scroll in sync across devices too!
  • Images are the biggest web performance killer. Responsive images is a confusing topic; you must consider compression, spriting, and retina images. Spriting images in particular has always been a lot of work.
  • The grunt-spritesmith plugin lets you simply maintain a source file full of images; when run, the plugin converts all the images into a single sprite, together with the accompanying CSS. Adding a new sprite is now just a case of dropping the new image into a folder; no more re-calculating background positions!
  • Alternatively, you might want to use base64 encoded images. The grunt-image-embed plugin handles this for you (although obviously you need to balance the multiple files vs CSS size performance issues).
  • The ultimate icon solution is provided by the grunt-grunticon plugin, which takes SVG icons as its default type, while also creating a sprited PNG fallback and individual images, and uses JavaScript to decide which is the best format to use.
  • When it comes to larger images, no standard solution has been decided upon yet, but in the meantime the grunt-responsive-images plugin does most of the work for you. Simply provide it the large image and it will automatically create resized versions that are interpreted by the <figure> markup to serve different images depending on screen size. Only the images needed are downloaded.
  • An alternative is the BBC’s Imager.js library, which allows you to specify the breakpoints in a simpler JSON format rather than writing out a full set of srcsets.
  • For creating production-ready resources — concatenated and minified — there are plenty of plugins such a cssmin (for CSS), uglify (for JavaScript), smushit (for images), etc.

Unfortunately I had to leave before the end of Jag’s talk, but I’ll add any additional notes I receive from other attendees. It was a great demonstration of the power of Grunt’s plugin architecture (and I’m sure that a lot of these plugins work exactly the same within new-kid-on-the-block, gulp.js too), and reminded me of the recent blog post complaining that too often programmers don’t bother to automate repetitive tasks. Armed with the power of the relatively easy-to-install Node and Grunt, designers finally have a way to automate away the most time-consuming parts of their job, and concentrate on building great user experiences.

If you’ve never given Grunt a try, I highly recommend it; it’s not as scary as it looks, and you’ll be amazed at how much easier it can make your life!

Resolutions, 2014

For the last two years, my New Year’s resolutions have been pretty similar. Make more stuff. Write more stuff. Something about fitness. It’s tempting to come up with something completely off the wall for 2014, and declare that I will learn to speak Russian or take up water-skiing. I think the fact that I will be turning forty towards the end of the year is another pressing factor; these arbitrary lines in the sand have such psychological meaning to us, despite the knowledge that there really is no significance to this age or that.

My 2013

Looking back at 2013, I think I did reasonably well with my resolutions for the year. I wanted to finish building my own GTD application, and I think I’m 80% of the way there. Ruck is a PHP-based system built on CodeIgniter; it’s missing a few pieces of functionality and needs a bit of polish, but it’s working well for what I want from a project/task management system. I haven’t done much work on it recently, as I think tackling the latency by converting it into a JavaScript-powered app is the next logical step, and that’s a little outside of my comfort zone at the moment.

Despite reading fewer actual books than I did in 2012, I still feel I did alright in terms of trying to “read more”. And “write more” was definitely a success, to the tune of 75,000 words plus over the course of the year in various places, including a couple of experimental articles on my new favourite place on the web, Medium.com.

My final resolution, “more varied fitness”, unfortunately didn’t really go anywhere. I went on a couple of bike rides and took the kids swimming most weekends, but I still mostly confined myself to running. I even had a couple of half-marathons planned until foot issues laid me up for the last couple of months of the year.

For 2014

  1. Take more photos. To start with I’m going to resurrect a resolution from 2012 which I never made much progress with. I’d like to take more photos, but carrying around a heavy SLR all the time is not really an option. However, this year I have a new favourite toy — my shiny new iPhone 5s — and with that high-quality camera constantly in my pocket, I have hopes that I can manage to take more photos than the odd Instagram of my dinner.
  2. Be a good role model. There are a bunch of different things I could put here — keeping myself fit and healthy, making the CodeClub I’m starting next week successful, being a better manager and leader at work — but I think this covers all of those plus a bit more besides.
  3. Do something different. Aside from the photos, all I ever seem to do is web-based. This year I should really try something else occasionally. I have no idea what that might be, though.

So, more conscious self-improvement? Or just another arbitrary list against which to judge myself in another year’s time? Time will tell.

Oh, and I think I might get a tattoo; it seems a more sensible way to act out a mid-life crisis than buying a motorbike.

Reading List 2013

After skipping a couple of years, in 2012 I once again started to record a summary of the books I had read over the previous twelve months, using my handy Goodreads account (not that I ever use the site for anything else).

Looking back, this year seems a paltry amount compared to last, although I suppose the fact that I undertook a literature history course in 2012 skewed the results somewhat. I’m not going to bother splitting the fiction list up into fiction/fantasy this time due to the shortness of the list; any links are to my reviews blog.

Fiction

  • Ed the Happy Clown (Chester Brown)
  • The Old Man and the Sea (Ernest Hemingway)
  • Apocalypse Nerd (Peter Bagge)
  • Player One (Douglas Coupland)
  • The Dispossessed (Ursula Le Guin)
  • Tigana (Guy Gavriel Kay)
  • The Great Gatsby (F Scott Fitzgerald)
  • Ender’s Game (Orson Scott Card)
  • Speaker for the Dead (Orson Scott Card)
  • The Shambling Guide to New York City (Mur Lafferty)
  • A Farewell to Arms (Ernest Hemingway)
  • The Fellowship of the Ring (JRR Tolkien)
  • Sweet Tooth (Ian McEwan)
  • The Bloody Red Baron (Kim Newman)
  • Mentor (Tom Grimes)
  • Wolf Hall (Hilary Mantel)
  • Stoner (John Williams)
  • Redshirts (John Scalzi)
  • Bring Up The Bodies (Hilary Mantel)

As per usual the start of the year was dominated by Christmas presents, including a set of three Hemingway novels; I greatly enjoyed A Farewell To Arms, and still have For Whom The Bell Tolls to read next year. I also finally read Ender’s Game, just in time to not bother going to see the movie, and finished the year with Hilary Mantel’s pair of Booker prize-winning novels about Thomas Cromwell.

Non-fiction

  • Don’t Forget To Write (Pam Hobbs)
  • Getting Things Done (David Allen)
  • The Stranger’s Long Neck (Gerry McGovern)
  • The Naked Jape (Jimmy Carr, Lucy Greeves)

This list is a bit of a fib to be honest, since I finally finished the first two books which had been in a partially-read state for years. The one book I read for work, The Stranger’s Long Neck, was thought-provoking for anyone involved in UX.

Highlights

Out of the 23 books I managed to read, I think I’d have to put the pair of Mantel novels near the top of the pile. Despite their provocatively misleading style, they are beautifully written. Stoner is the other book I would recommend anyone pick up if they haven’t read it (and it seems to be one of those “best book you’ve never read” kind of hidden gems).

What I Listened To In 2013

I’ve been writing this yearly overview of what I’ve been listening to for several years. And yet, despite feeling that I am discovering new music every year, the top few bands somehow remain the same. This year seems particularly bland and uninspired, with hardly anything new in the list. Maybe Spotify has made me complacent about listening to new music; despite feeling that I’m experiencing more different music than ever before, it’s all an illusion.

Top 10 Artists listened to in 2013

  1. Metric
  2. Ginger Wildheart
  3. The Wildhearts
  4. Hey! Hello!
  5. Pearl Jam
  6. Young The Giant
  7. The Joy Formidable
  8. Guns N’ Roses
  9. The New Pornographers
  10. David Bowie

Comparing this year’s top ten artists to last year’s list, the top three remain the same, albeit in a different order, and two more entries from 2012 are still in my top ten. I don’t even remember listening to that much GN’R or New Pornos over the last twelve months, yet somehow they still manage to wind up near the top of the list year after year.

Top 10 Albums listened to in 2013

  1.  Synthetica – Metric
  2. Young The Giant – Young The Giant
  3. Hey! Hello! - Hey! Hello!
  4. The Big Roar – The Joy Formidable
  5. The Very Best of Ella Fitzgerald
  6. Tricks for Dawn – Mary Lorson
  7. 555% – Ginger Wildheart
  8. Copper Blue – Sugar
  9. Black Pudding – Mark Lanegan & Duke Garwood
  10. Fantasies – Metric / Spilling Blood – Oceanographer

Now this list of the top albums I listened to is at least a little more interesting and varied than the artists list.

I discovered Metric towards the end of last year, and I’ve spent a lot of time listening to their back catalogue, particularly 2012′s Synthetica. This year I also finally listened to Sugar’s excellent debut, Copper Blue, 20 years after everyone else in my generation. A single album that was actually released in 2013 sneaks in, in the form of ex-Screaming Tree Mark Lanegan’s collaboration with Duke Garwood. And I spent quite a while listening to the various excellent projects produced by ex-Madder Rose singer, Mary Lorson.

Track of the Year

According to Last.fm the track I listened to the most over the last year was actually Massive Attack’s Teardrop. But a close second was this standout track from my #1 album – Breathing Underwater by Metric:

Getting ThinkUp installed on MediaTemple (gs)

Via Meri Williams on Twitter I heard about Gina Trapani and Anil Dash’s new app, ThinkUp, a couple of days ago. It calls itself “a social data insights engine” which, as far as I can tell, translates as: “Klout, but useful.” They are currently soliciting donations in the form of yearly subscriptions to the service, in an App.net, users-should-pay-for-stuff-they-find-useful kind of a way.

However, the system itself is actually open source and available to fork on GitHub so you can host your own install. That’s what I did on my MediaTemple (gs) shared server; here are some of the issues I ran into and how I fixed them.

Install this and this and this

Forking the GitHub repo and then cloning it on my server was easy enough, but the installation process immediately complained about a couple of missing components. Firstly the session.save_path wasn’t set; this MediaTemple Knowledge Base article explains how to fix the problem (and this one tells you how to edit your php.ini file if you haven’t done so before).

The second issue was a little trickier. ThinkUp requires that PHP has the ZipArchive class installed; okay, no problem, this Knowledge Base article explains how to install PECL modules on (gs), and this blog post includes some more pointers. The ZipArchive class is actually named “zip“, by the way. However, when I downloaded and tried to install the module, it threw a bunch of parsing errors during the make step. Bugger. Eventually I figured out that 1.12.1 is a beta version of the module, so all I had to do was delete what I’d downloaded and try again with the stable version number (1.10.2 as of this writing):

wget http://pecl.php.net/get/zip-1.10.2

With that it compiled correctly, the ThinkUp install process was happy, and I was able to get it all up and running.

Cronplaining

One more issue cropped up when I tried manually running the data import tool from the command line:

Warning: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in <redacted>/ThinkUp/webapp/plugins/expandurls/model/class.URLExpander.php on line 113

That cURL option tells the cURL request to follow any ‘Location:’ headers returned by the request. I’m not sure whether it has any effect on the quality of the data it gathers, since I don’t know whether any API calls would return a redirect (and it seems unlikely), but maybe someone will come along who knows more about this sort of thing than I do and can explain.

So, ThinkUp

Once I got it all going and the “insight generation” script had done it’s thing, you’re left with a ton of imported data from the various services it supports out of the box (and they plan to add more), plus some interesting ‘insights’ into what you’ve been doing on social media.

Screen shot of ThinkUp insights

I kind of suspect that it will be of most use to people who 1. have a lot more followers than I do, and 2. are a lot more active on social media than me; but it’s still an interesting alternative view of the loosely joined pieces of yourself online.

Coursera – Online Games: Literature, New Media and Narrative

Continuing my ongoing adventures in free online education, this month I embarked on my fifth Coursera course. Online Games: Literature, New Media and Narrative is a six week course run by Nashville’s Vanderbilt University that aims to explore “remediation” — the transplanting of one form of media into another — via the book-to-film-to-game transition of the ‘world’s greatest work of literature’, JRR Tolkien’s The Lord Of The Rings.

Students (more than 40,000 of them according to this Penny Arcade piece) are assigned both reading and in-game assignments in addition to the pre-recorded video lectures delivered by enthusiastic nerd-in-chief, Jay Clayton. It is fascinating watching experienced gamers and those totally new to any kind of computer game, let alone the complexity of an MMORPG, working and learning alongside each other in the course forums and online. Many established LOTRO players are incredibly generous with their time and resources, supplying new classmates with enhanced items and organising special sessions to achieve in-game rewards.

So far we’re only on Week 1. I’ve re-read The Fellowship Of The Ring, and re-watched Peter Jackson’s film of the same name (and bored my wife by pointing out all the discrepancies between the two); Discelas the Elf has reached level 16 and met Tom Bombadil, and I’m all set for another five weeks of relaxed study.

Lapsed Gamer

After such a long break from my semi-serious Warcraft days, it’s strange to be back playing an MMO again. The seductively easy gameplay and progression in LOTRO is not quite as seamless as WoW, but the addition of the background mythos and characters from Lord Of The Rings provides an added depth and impetus to carry on playing through the main questline, a key aspect of the game that WoW conspicuously lacks.

It has reminded me of the reasons I gave up playing WoW, though (and subsequently EVE Online, Warhammer, Defiance, and one or two others). The constant “live”-ness of the game world, and lack of a Pause button, elevates the action in the game to the importance of real life; you can’t turn away from the game for a second to speak to a child or kiss a partner, and the further you progress in the game, the more this anti-social monkey on your back demands attention, and for longer and longer periods of time.

Add to that the lack of any real-world output after countless hours of effort, and you have a recipe for a wasted life. I gave it up to concentrate on making something tangible, and I think I’m happier for it.