Category is: Interwebs

my first backbone.js

Interwebs Photography

Cross-posted from

I’ve worked with a few javascript MVC frameworks before, but I’ve never used one to build something from the ground up. It’s been really interesting not only because of that but because I was working on something that had already been fleshed out in the proof of concept stage, so I figured it would be fairly straightforward to lift the bits that we wanted to keep from the old code.


the journey

Normally with the scripting I do it mainly involved finding out how to do something, doing it, and fixing the edges. But with setting the foundations for a larger piece of work it’s important that things are done the right way, just working isn’t enough. Naming conventions and coding standards are assumed.

A good place to start is splitting all the JS into separate files, one each for models and collections and all the various kinds of views but even that’s not mentioned in most Introduction to Backbone tutorials for more thorough reading is a great resource but hardly a breezy read at 30,000 words. But it doesn’t talk about how to organise your code either, nor the difference between a panelView and a PanelView, and the documentation for Handlebars is similarly fuzzy in places.

That seems to be an inescapable problem with these frameworks, the thing itself can be as lightweight as a feather but their documentation is never as fun to keep up to date as they evolve organically from many contributors, leaving redundant third-party guides littering the interwebs like Ozymandias’ discarded sandals.

But where was I. Ah yes, standards. So basically to gain The Knowledge in a decent amount of time and be sure that the foundations I was laying would remain mostly useful I had to pester the resident Backbone savant Luke into nodding sagely or cursing with scorn when I did… Well most anything really.


I don’t really like it. There’s no neat little functions to comment and then build into something larger, everything has to be wired into the the wider framework, data bouncing back and forth between views (explicitly thrown and explicitly caught), there’s repetition of code as you write similar functions in different views, you need to have 3+ files open to see what any given thing is doing, and at the end of the day you have to call in a litany of javascript files into the html; nails down a chalkboard for any self-respecting frontender.

Maybe this is just counter to my dev philosophies of going with the grain, maybe there’s another MVC that’s better suited to how I’d like to work, maybe I’m just doing it wrong. But in spite of that we got something working according to the right standards and conventions and that’s a testament to the power of communication. And Luke’s patience.

over to you

So what’s your favourite framework? I’ve worked with Angular and Ember as well as Backbone and they each feel very different, enough to make me think that there might be one out there that I’d get on with just famously. (Though from what I hear on the twitters, React doesn’t count.)

‘just’ html


Cross-posted from

As a front end developer I’ve always operated in the weird no man’s land between web design and software development, doing work that can mostly be described as tinkering and jury-rigging. Years ago it was mostly making the app look like the design, making the design fit the copy and wiring the copy into the app. These days it’s more making sites work at every width with varying content while still being in line with the designs, or putting together a prototype app that brings new functionality in an intuitive manner.

The field’s been expanding in all directions since I started out, but people outside the bubble still think the work is as simple as an image tag. I can think of a few reasons why: it’s mostly human-readable, what it produces is entirely relatable (everyone has opinions on design), and it’s also gotten more involved since a lot of people last tinkered with it.

But the more interesting angle is that dabblers and tangential technologists only see the problems once they’ve already been solved, so I had an idea to introduce a shorthand analogue to the most common technologies used to make websites and find a new way of looking at some dear old friends.

design == decoration information architecture

On top of looking cohesive and presentable your page has maybe 1 second to load, and then about 3 seconds to communicate that it’s both authoritative and informative. When people are sniffing for data they’re super impatient. Javascript on the other hand…

javascript == programming decoration

In terms of the front end, the core functionality should always be there without JavaScript. It’s the single largest point of failure in delivering a web page by a long way. So hopefully it’s mostly DOM manipulation, progressive enhancement and micro interactions to make the UX smoother and more intuitive. Of course if you’re using a bunch of frameworks it’s a different story.

html == markdown semantics

It’s not enough to just transcribe the content inside angle brackets. On top of fitting the design we also need to think about how it linearises when accessed via a screen reader or if CSS fails, and how it’s going to be broken down by google spiders for some SEO goodness. But at its core it’s ‘just’ naming, which everyone simultaneously agrees is easy and very hard.

css == pretty colours mechanics

Every web page is a mechanical system, where you nudge things one way or the other by floating, positioning, transforms, margins or paddings and then stack it all up like reverse tetris, in spite of the fact you don’t know the lengths of the contents or the width of the browser window. As a nice illustration, the units I’ve used recently are px, %, ems, rems, vmin/vmax, and vh/vw and there are plenty more. It’s all about understanding what is built relative to what, how those change in relation to each other. Having studied mechanics at uni they feel very similar. Just with much less maths!

Hopefully this has given a bit of alternative non-technical insight into what these much-used words can mean in different situations in modern webdev. It’s not just front end of course; “just” is a word that should probably be excised from the workplace altogether!

Getting up early for a conference in another city is always an unwelcome jolt, though a train ride through a crisp early morning can be a nice novelty. Besides Oxford was lovely once I got there; the jQuery UK Conference I was there for hidden down a pretty canal. It’s got to be one of the largest I’ve been to too, with two tracks to choose between, and far from centring on the specifics of jQ the talks ran the gamut from ES6 to CSS, and those were just the first two!

Dave Methvin: ES6 is the answer! What was the problem?

I saw a very similar talk at jQuery 2013 by Brendan Eich and couldn’t follow any of it so it was very encouraging that I not only followed this time, but got pretty excited about ES6′s forthcoming features. The main take home was swap out all VARs for LETs and CONSTs, use a transpiler to let you use lots of nifty shorthand, and stroke your beard and talk about the Temporal Dead Zone because it’s an actual thing. I’d reccomend watching the video!

Mark Otto: Modular css

It’s really interesting seeing the high-flying careers of CSS specialists; Mark works at github, used to work at twitter and doesn’t know any JS or jQ! He had a lot of tips for architecting the front end of large systems, and though most of it wasn’t new as I’d seen a couple of talks by Harry Roberts lately, it was still a good refresher. Some examples included keep a simple class structure (no ids!), use a block-element-modifier naming convention, don’t chain and my personal favourite: Don’t mimic the html structure in classes.

I didn’t agree with all of it but he had some very interesting things to say about reporting on CSS with Parker or CSS Stats, and has some great front end resources like Code Guide, WTFHTMLCSS and others.

Bodil Stokke: Reactive game development

Bodil pretty much just live-coded Robot Unicorn Attack right in front of us, except with a My Little Pony collecting coins and avoiding haters. It was using ready made assets and some frameworks but still very cool!

Rosie Campbell: Designing for displays that don’t exist yet

From the BBC’s R&D department Rosie gave some great insights into their work on a more connected world, the web of things we’re always hearing so much about. She took us from where we’ve been to where we are, and to what’s next, screens so huge they cover the wall; smart wallpaper! The ultimate embodiment of the connected home. Her tips on this kind of blue sky thinking: design for UX rather than technology, use constraints, stay device-agnostic, and watch a lot of sci-fi.

Alice Bartlet: Bin your <select>

I love the work of with accessibility, pragmatism and having a real-world impact so it was a treat to see Alice take us through some of their processes and user research. Long story short a surprisingly large minority can’t use select boxes at all simply because there’s no analogue on paper forms. It’s a great study on challenging a pointless anti-pattern, as simple text fields hooked up to a date parser are much more usable to every level of computer literacy. Talk recommended!

Andy Hume: Resilient front ends

We put a lot of time and effort into the known qualities of 404′s, but there’s another outage that happens just as much, one due to an unreliable connection, particularly on mobile. Andy’s solution is a resilient web. Nobody has JS when it’s loading, so does it catastrophically break or fall back gracefully? The classic real-word example is when an escalator breaks, it automagically becomes stairs!

Philip Roberts: What the heck is the event loop anyway?

My favourite talk of the day, on the mechanics of what’s actually happening in the JavaScript underneath all that pesky code. A bunch of points that had come up at work recently were all explained and I was so transfixed I didn’t even take notes. Talk recommended!

Rich Harris: Dismantling the barriers to entry

Very interesting talk about how coding can affect the world, from a journalist that learnt to code in order to do his job better. Rich spoke about how the web isn’t democratic because everything is too hard, so he’s building a framework called Ractive that’s incredibly easy to use, and might put us all out of a job. Hurrah! Seriously though a humbling and thought-provoking talk.

Alex Sexton: Hacking front end apps

This was the second talk in a month I’ve seen about how horrifically insecure everything is. It makes me want to give up banking online all together. Alex basically blamed web developers, because we should be secure, but it’s hard. Eesh. From content injection to ridiculously simple css-based timing attacks it’s pretty scary. The solution, apparently, is to black-list everything and work from there? Be closed by default instead of open. Sad times.

Ben Foxall: Real world jQuery

The talk title was totally inappropriate as this was all about the standard Foxall live-demo magic, achieved via a webpage that the audience were invited to visit on their phones. Basically Ben performed a bunch of tricks using the collective phone APIs which was totally neato! …But you might have had to be there.

The videos are online!

I’ve already linked to my favourite talks but the rest of them are online too, including the seven more from the other track that I didn’t see, and will be catching up on soon. Many thanks to the people at White October for putting on such a show, this one’s going in the calender for next year!

web conferences for 2015

Interwebs Photography

Cross-posted from

In 2014, unshackled from the time constraints and employer oversight of full-time employment, I was able to attend a few conferences and workshops(*), including 2 and 3 day affairs where I had to book a hotel and everything. It was quite fancy but I’m not sure I got the full experience; listening to loads of interesting speakers is great but it puts me in a pretty thoughtful and introspective mood, which isn’t great for chatting to strangers at after parties. It’s great getting all the ideas and taking photos but as I’m paying for it all myself now I should look for a decent ROI…

So this year I’m trying to cut down a bit, but there’s still some I’ve been to before, know are good, and given the option, just can’t resist!

reasons: london

The spiritual successor to Flash On The Beach, reasonsto felt a bit stretched out over 3 days, so I’m hoping the 1-day version might be a better fit. It also helps that it’s 20 minutes walk from where I live.

jquery uk

A 1 day 2-track conf out in Oxford, last time I went there was an impressive breadth of scripty web nift, from performance to sockets to promises to ECMA scripts 6 to (obviously) the pros and cons of jQ itself.

responsive day out

I loved the first Responsive Day Out; at the time I was neck deep in the theory and practice of those disciplines, but also the fast-paced format was relentlessly interesting, plus it was one of the cheapest confs I’ve ever been to! Bless Clearleft. I wasn’t able to go to the second one because it clashed with Glastonbury but this year’s doesn’t! Hope I can get a ticket.


This was another surprise hit for me in 2013. I wasn’t expecting too much even though typography is adjacent to most everything I build I was worried it might tangent off into print and physical media too much but I needn’t have worried. The speakers just blew me away.

The dates are already starting to pile up! Though I still plan to steer clear of multi-day conferences I will keep an an eye out for Full Frontal and dConstruct, two brighton conferences I’ve enjoyed before. I hope there are none I’m missing, the tickets for these things can sell like hot cakes!

(*)Confs & workshops I attended 2014

  • MK Geek Night All Dayer
  • London JS Conf
  • CSS Architecture For Big Front-Ends with Harry Roberts
  • Mobile Photography with Dan Rubin
  • Reasons to be Creative
  • dConstruct
  • BIRDIE Conference
  • The Web Is

self-taught front-enders


Cross-posted from

Back when I was at uni the web was relatively young, so while there were a load of courses for software development or graphic design there was nothing at all for web development. Unsurprising then that myself and and every front-ender of the time were self taught.

What is surprising is that that’s still mostly the case. While both the roles of software developer and web designer have changed at a manageable place (insofar as the latter is analogous to graphic designer), the in between that is front-end development moves so quickly that by the time a university curriculum on the subject can be approved it’s already time to re-write it.

So even now most front end developers (…creative technologists, front end engineers…) are self taught, and there’s a lot more to learn now as the number of technologies and tools has exploded. Thankfully so has the number of online resources to help: On top of the hundreds of blogs and youtube tutorials there are specialist sites like Code School, Codecademy, TutsPlus, Tree House, I’ve never been great at learning from books, so this interactive approach is awesome and much of it is free!

pros and cons:

There are upsides to being self-taught; it implies being something of a curious self-starter with a passion for Making It Work, and it starts a lifetime of learning habits and self-improvement that’s vital in the fast-paced world of front-end.

However I’ve found there can be downsides too: having learned a lot through trial and error I often lack the vocabulary and jargon to discuss programming, even when it’s just describing what I’m doing. Similarly when talking about design I learned some of what works, but rarely why, which is unfortunate as much of the design workflow in this industry is back-and-forths with clients.

Asking around at MetaBroadcast I’ve found a few fans of Coursera and khanacademy both for independent self-teaching and for supplementing traditional methods so it’s certainly not just front enders tap into this growing industry of remote learning!

(Cross posted from the company blog at MetaBroadcast)

For a decade now we’ve been told that “pixel-perfect” is an indicator of great finesse in front end dev, and it’s a phrase that still crops up on job descriptions and CVs all over the place. Hell it’s probably on my CV, having done more sites and emails like that than I care to remember.

While it’s lauded as a good thing in reality it’s indicative of an outdated mindset; of brittle and short-sighted web design where creatives lovingly craft amazing comps in photoshop with little consideration for how it’s going to be built. And why should they? Their job is selling great looking sites, implementation is someone else’s problem.

On the dev side it’s so tempting to treat PSDs like a pixel-perfect blueprint (spoilers: they’re not), lift the heights and widths of all divs straight into the CSS and make it a literal copy. That’s how you get an avalanche of websites that break dramatically if things are knocked slightly out of alignment due to a link changing, or an image is swapped out, more copy added, or everything is translated into German.

And this is long before you even think of viewing on a mobile device! Responsive has made things squishy, but the dangers of over-constraining content-managed or multi-lingual websites is not new. Liquid websites are not new. It’s humbling to remember that ugly and basic as it is the first web page works on any browser on any device over the last 25 years. We’ve retrofitted incompatibility into the internet; the responsive revolution was only necessary because we’d made everything so rigid.


JS-based sites can be controversial because not everyone has JavaScript, the idea being that there are people with feature phones (particularly in the the unbelievably huge emerging economies), but even closer to home JavaScript is often a single point of catastrophic failure: some CDN’d thing might be missing, some third party script throws an error and you’re left with nothing at all. Even assuming you have the most robust system possible, nobody has JavaScript while they’re loading your JavaScript. HTML on the other hand is a crazily forgiving language.

So what can be done?

Avoid layouts that rely on conflicting horizontal alignments, avoid vertical alignments altogether. Test them with double and half the copy to make sure everything flows as you’d expect. Avoid using explicit heights and let the elements take the height of their contents. Avoid using explicit widths and let elements take the widths of their container divs where you can, using percentage widths where you must. Only build JS links to enhance existing HTML links. Keep css specificity low. Don’t introduce needless complexity when what you really want is just POSH, simple CSS, a squishy robust layout.

Take a step back and let the markup breathe.

TheWebIs in Cardiff


The Web Is was a 2 day web conference in Cardiff, the successor to “Handheld” from the year before, that everyone raved about for what seemed like months, so there was no way I was going to miss it. Especially as part of my effort to go to more multi-day conferences.

When the day actually came though, I have to admit to being super reluctant to start. It had already been a long week and when I missed the last off-peak train and had to shell out an extra 100 quid, I almost didn’t go. (Side note: really beginning to hate trains.) But I’ve been won over, these talks were just great.

Chris Murphy started us off and was one of the highlights for me. Excellent guy, knowledgeable about the web and a great speaker, but in these waters that doesn’t really set you apart. Rather it’s his insights into education that really interest me as Higher education for the web is such a rarity still, talking about all the parts that “normal” education misses and how the whole paradigm needs to change.

Nathan Ford gave a nice talk on the web being constantly unconstant, the ground ever shifting under our feet, which struck a chord with me having worked on so many translatable, CMS-able and responsive projects that mean the designers and developers actually have almost no control over the site!

Anna Debenham gave her “people browse the web on consoles” talk which is always interesting and backed up with stats and examples. Surprise take-home that browsing on a Wii U is pretty powerful and the web might be moving in unexpected directions.

Seb Lee Delisle was notsomuch about the practical discussions but gave a very engaging talk on doing random real-world stuff with lasers. Sounded very fun.

Emma Mulqueeny gave an insight into what she calls the “97ers”; those born after 1997 who have grown up with social media, the peer-to-peer generation, forming a web community about storytelling and identity, to police this will mess with the fragile identity structure.

Keir Whitaker spoke about a life audit in these crazy, noisy times: looking for some focus: what do we want to be known as or for? But then the more you output, better you’ll feel, and the more of your voice you’ll find so maybe the point is just to get stuff out there. Certainly something I try to do a lot: Love what you do, share it, be good at a lot, be great at less.

Phil Hawksworth gave a rallying cry to stop messing with links, the lynchpin of all websites. The line that stuck most was no one has javascript while they’re downloading your javascript

The day finished up with some panel-type chats on mental health in the industry lead by Andy Clark.

“Sometimes depression is being sad but sometimes it’s being angry and sometimes it’s pulling it together and going out with all your friends an having a great time and then not being able to speak to anyone for three days because you’ve used up everything you had.”

I think on the second day I was still digesting much of what was said on the first: much less of the second day stuck with me. My favourite talk was probably Robin Christopherson who spoke about the opportunities that computers can afford for those with with disabilities. It was interesting seeing how simple phone apps like a light-detector can have unexpectedly life-changing uses for a blind user. One funny and insightful thing he revealed was how people with impairments refer to the abled-bodied: “TABs”: Temporarily Abled-Bodied (because everyone ages!).

So I’m super privileged to be able to take so much time off and afford these trips away but I’ve seen many of these people speak before, and though they’re great, there’s probably diminishing returns. There’s so much other stuff I should probably be learning: disparate and obvious stuff like command-line git, Illustrator, Angular / Ember, portraiture, maybe even Yoga!? Basically I enjoyed the couple of days and would recommend them, I’d like to go again but I don’t know if I should.

socialdata vs datasocial


(Cross posted from the company blog at MetaBroadcast)

There’s been a lot of chatter lately about social recommendations at MetaBroadcast Towers, particularly at the recent #MetaBeerTalks. I remember back in 2005 when I joined Flickr and it seemed that open APIs were everywhere, we couldn’t wait to give our data away and The Internet would do some magic and everything would be solved soon. But nearly a decade’s past and while social media has gone mainstream it’s now all about walled gardens where everyone guards their data jealously. The panacea of social recommendations just never came to pass.

data first

Perhaps there was another difference at work here too…, Flickr, OKCupid, as well as being from the wild fronteer of the internet were also social sites built around data instead of the other way around: Flickr was the pre-eminent site for uploading, tagging and sharing photos, people went to great lengths to make sure we could scrobble all our tracks to which gave us back nifty charts and graphs for our trouble, OKCupid had endless questionnaires that offered better and better matches the more questions you answered, and they also do some really interesting analysis on that wealth of data. In each case providing data was a means of self expression, you got tangible results back, and the data came first, the social later.

social first

Compare that to facebook or twitter; you can get interesting stats on your twitter account or your facebook page but it’s set up specifically for advertisers and pretty wishy washy at anything but the macro scale. Far from users getting something for their data these companies try and pretend there’s no data at all, meanwhile we get the uncomfortable feeling that the system is against us as we’re interrupted by promoted tweets or thrown again and again back to the dubious algorithms of “top stories”. Far from being keen to deliver our data and see what fun stuff the system does with it we’re advised to “unlike” everything to stop your feed being a wall of irrelevant adverts.

where now?

These current behemoths of online were social first and foremost. Data was reluctantly and surreptitiously tacked-on afterwards and it’s never really been a great fit. The sad thing is they’re probably poisoning the well for others too; were it not for the privacy-based paranoia they foster, streaming companies like Netflix or iPlayer might be free to do great things by adding some old-school data-first social magic to the mix. In the current social atmosphere I’m not sure I’ve seen the system that’s going to solve social recommendation for video, but if you’re already using something that gives you decent recommendations, drop us a tweet or a comment!

“never meet your heroes”, and other lies.


(Cross posted from the company blog at MetaBroadcast)

One of my biggest bugbears are those nonsensical, glib pearls of received wisdom that are so commonplace that they’re rarely questioned. A quick shout on the twitters brought up a few examples; lies like “Cream always rises to the top” (which implies that everyone deserves their station), or “What doesn’t kill you makes you stronger” (or permanently maimed, crippled, disfigured), also redundant statements like “It’s always in the last place you look” (obviously) or “Cheap at half the price” (…obviously).

Another saying that I’ve found to be painfully wrong is “never meet your heroes”, the idea being that they could never live up to the pedestal you’ve put them on and so can only ever disappoint. That’s probably true if your only interest in them is distant worship, but if you hope to emulate any aspect of them then humanising their achievements can be a transformative epiphany.

A few years ago I was feeling pretty disheartened about learning Javascript, spending 90% of the time hunting broken syntax. I’ll never forget watching Paul Irish — whose site was my bible of CSS hacks for years — live-demoing a JS framework when 2 minutes in he misses a semicolon, it all breaks and someone from the audience has to tell him where to fix it. Realising that it was just par for the course was a game changer for me.

A month ago I was worried that I wasn’t using a string of conferences to network properly, instead spending the time in between speakers quietly practicing photography and enjoying the fact I could edit on the move with my MBP. Again it was encouraging to see Remy Sharp — who must have known dozens of people at the conf — just sitting alone at the back, focussed fully on the speakers and not partaking of the bantz.

This has wider applications than professional too: earlier this month a couple of friends had me take photos backstage at their cabaret show at the London Wonderground and there was some overlap with another show that I’ve seen twice and loooove. I was too nervous to actually chat with them but just seeing firsthand that people you look up to are lovely in person can inspire you to be nice to people, and generally reinforces those values.

What’s the worst that could happen? You might find out they’re not all that, and by comparison you’re better than you thought. Or they could be horrible and you decide you’re better off directing your attention to more effective exemplars.

Of course idioms and sayings are terrible sources of advice; contradictory axioms everywhere.

All good things come to those who wait. // Time and tide wait for no man.
Out of sight, out of mind // Absence makes the heart grow fonder.
The pen is mightier than the sword // Actions speak louder than words.
The best things in life are free. // There’s no such thing as a free lunch.
What you see is what you get // Don’t judge a book by its cover.
Many hands make light work. // Too many cooks spoil the broth.
Familiarity breeds contempt // Home is where the heart is.
Birds of a feather flock together // Opposites attract.
Never meet your heroes // Bloody do it, it’ll be great.

Conference Retreat


As I wrote a few weeks ago I’d never been to a multi-day conference, never mind a whole-week double, so I was quite excited about my trip to Brighton to attend ReasonsTo Be Creative and dConstruct.

My fears about not actually talking to anyone were pretty much realised but to be honest that turned out fine. Listening to talks puts in a more pensive than chatty mood so I just went with it; just taking it all in, enjoying the hotel, taking a lot of pictures, experimenting with my camera, and fixing bits of this site. It made all the difference having my Macbook with me, being able to take it out and edit photos in situ was glorious.


ReasonsTo Be Creative is a long-running conference that used to be all about flash, so I never had reason to go back in it its “Flash On The Beach” heyday. It was pretty spread out, with loads of talks happening over three days, most of which being people showing their work, but when they moved beyond the portfolio to the processes involved it gave some great insights into other parts of the industry. While a couple of talks were hilarious, a few inspiring and most interesting, I got the sense that there was a lot of padding; I’m sure many of them could have been cut to 40 minutes with no loss of content. The quick fire round was much more my speed, 20 people in an hour! It reminded me a bit of the great format of last years Responsive Day Out.

Over all it was really good but a couple of times I was thrown by talks being super un-PC; one otherwise excellent speaker miming a mentally ill person hanging themselves, another had slides peppered with nudity and subjected the audience to a clockwork wanking monkey for way longer than was funny or even comfortable. I might live in a SJW bubble because I was looking around in confusion but people seemed fine with it.


dConstruct was only a couple of days later and in the same venue but immediately had a very different feel, for one there were way more women among the attendees. (Someone even tweeted with delight that they were having to queue for the ladies loo!) It was my 5th dConstruct and the 10th in total, and though it can be a bit hit and miss for me keep coming back! happily, because this year’s was most definitely a hit; perhaps the best I’ve been to. It felt heavy, important, and real, but Jeremy Keith said it much better than I could. ClearLeft always put their audio online after the events and I’d definitely recommend checking out Mandy Brown’s talk in particular.

So yeah, a great week where I learned a lot and I got a lot done, but without all the networking that’s supposedly supposed to go on, so while I’m happy with how it went I still feel I’m missing a big part of the big whup and I’m not sure I made the most of it. Perhaps I should be checking out workshops or classes instead?

That said at the last talk I spotted a local luminary sitting at the back of the auditorium just listening alone, and thought it was pretty ok.