The Ownership Problem

Great article on a really issue in the software development space.

When I was starting out as a designer, I had a pretty big chip on my shoulder about how my job was perceived. At that point in time, the design community was, seemingly as a whole, pushing back on the idea that designers just make things look good. Every other day there’d be a blog post or a podcast about explaining to clients or coworkers that we have more to contribute, and that we should own the user experience as well as the visual design, and as a young designer I of course bought into that in the extreme. I took that chip on my shoulder through my first few jobs. I’d find myself constantly referring to myself as the “design owner” to combat terms like “product owner” or to push back against engineers simply building whatever they thought was right.


My Current Preferred Web Toolkit

Its been a very very long time since I posted anything to my website. In a (probably ill-advised) attept to kick things off again I thought I might post about the basic components of my current preferred web tool set. 

I also just published a public git repo of a work in progress quick start build system that uses most of these tools if you want to play.


Sublime Text 3
Text Editor – I love this text editor; if nothign else it has saved me months of my life in the endless serach for a good text edtor. Its multiple cursors and crazy fast load times make it a joy to use. It has so many fantastic features that I just can’t begin to list them.

Source control and cloud hosting – GitHub is crazy easy to use (mostly) and is certainly my preferred source control tool.


JavaScript runtime environment – Node has become a major tool for my workflow environment. From building quick API mock-up servers to running my build systems node is a swiss army knife of a platform.

Task runner – Running on top of node Gulp has replaced Grunt as my go to task runner. Mostly because of its procedural approach and flexibility.


DRY HTML templating – Jade has its issue, but since I started with Jade I have barely written a single line of normal HTML. Its faery flexible and lovely write in.


CSS pre-proceser – I am always surprised that this isn’t more popular over LESS and SASS (SCSS). Stylus allows for mixed syntax and is both DRY and feature rich. Just like with Jade and HTML, I just don’t write normal CSS any more.

Jeet, Stylus grid system – Jeet is great, clean and simple. Exactly what you want from a grid system. I doesn’t add anything it doesn’t need to; its just a great flexible grid system. Thats it. Perfect.

Simple media queries for stylus. – Rupture is a great tool for shot hand media queries.

2014-02-27 at 16.28

GitHub Officially Launches Atom

After talking yesterday about the leaked screenshots of GitHub‘s new text editor, it seems that GitHub has launched it . The new text editor named Atom has been in development for over six years and looks a lot like Sublime Text; however they suggest they see Atom as superior to Sublime Text by offering greater extensibility. As the launch announcement says: –

“Sublime and TextMate offer convenience but only limited extensibility. On the other end of the spectrum, Emacs and Vim offer extreme flexibility, but they aren’t very approachable and can only be customized with special-purpose scripting languages.

We think we can do better. Our goal is a zero-compromise combination of hackability and usability: an editor that will be welcoming to an elementary school student on their first day learning to code, but also a tool they won’t outgrow as they develop into seasoned hackers.”

Atom certainly has web development at its heart, quite literally; it’s built on Chromium and Node.js.

” …we didn’t build Atom as a traditional web application. Instead, Atom is a specialized variant of Chromium designed to be a text editor rather than a web browser. Every Atom window is essentially a locally-rendered web page.

All the APIs available to a typical Node.js application are also available to the code running in each window’s JavaScript context. This hybrid provides a really unique client-side development experience.”

At the moment Atom is operating under an invitations only beta for Mac OSX with Windows and Linux builds coming soon. I have requested an invite and will let you know when I get to take a look at Atom.

No more grunting, getting started with Gulp.js

I love Grunt and over the last year it’s become an integral part of my development workflow. It has allowed me to get rid of a lot of tools that weren’t updated nearly often enough, and gave me much more control over how I managed and developed my code.

Early on however I realised that due to the slightly odd way that Grunt tasks were ‘configured’, I sometimes had to work around it more than I wanted to. This would involve occasionally needing to run other tools or have multi-step Grunt tasks that created intermediary temporary files. I couldn’t quite configure it to behave the way I wanted. All this was a side effect of wanting to do more with the tool than it was really made to do, and that was frustrating because the power was there. What I really wanted was a Grunt like tool that I could actually program to behave the way I wanted… enter gulp (all lowercase according to their FAQ).

My first Gulp

Early on I must say that I didn’t appreciate what gulp was trying to do. I saw it as just someone else’s version of Grunt and I couldn’t see the value in the difference. Recently however I took the time to read more about it, and I was able to listen to an interview with its developer Eric Schoffstall on the JavaScript Jabber podcast. As a result I started to take gulp more seriously and realised that it was actually addressing the problems I had found with Grunt in a really neat way.

Code vs Configure

Rather than have a set of task configurations, gulp allows you to programmatically define each of your tasks. You can farm out your work to plug-ins, but you have complete control over how the logic of your task flows. As it says on the gulp website: –

“By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable. … By harnessing the power of node’s streams you get fast builds that don’t write intermediary files to disk.”

Making the move to gulp

I have started to move my projects over to gulp and so far I have had no problems replicating the behaviour of my grunt tasks and have already started to see the benefit.

Its still early days but I think I its possible that my grunting days are over.


Atom, the new Sublime Text? … as in literally.

All web developers love there text editing weapon of choice, and for many of us for some years now that weapon has been the mighty Sublime Text. Sublime Text is a fantastic, well thought through, extensible and incredibly fast text editor that looks as good as it performs. As a result its been adopted and loved by pretty much everyone.

One of the things that has helped make Sublime Text become such a trusted and loved text editor has been the dedication of its developer Jon Skinner. During the development of each iteration Jon has delivered a regular barrage of updates, tweaks and improvements to an audience of early adopters; ensuring features are tested in the field and that progress is always being made.

Gone dark

In January, 2013 Jon announce Sublime Text 3 was to begin development. But the pace of updates slowed a few months in and the usual pattern of iteration stopped altogether 5 months later. Since then there has been a single update in December and then again nothing.

The age of the Atom

Recent threads on HackerNews and Readit have suggested that Sublime Text could have been bought by GitHub to form their new text editor, Atom. Along with the story are a bunch of screenshots that certainly look like Sublime Text.


All this is just rumor at this point, and nothing has been confirmed. Lets just hope that if Jon Skinner is now working for GitHub, or even if he has just sold the application on; that GitHub don’t destroy the best text editor we have.

It would certainly seem possible that we might be leaving the sublime and entering the Atomic age of text editors.


2014-02-26 at 16.46

Join the world’s largest professional network… or else.

I recently came to the conclusion that I didn’t much care for having a LinkedIn account. LinkedIn seemed obsessed with endlessly sending me emails about messages, updates, invitations, connections, suggested connections, recommendations, recommendation requests and even suggesting I started an account – which I already had.

No matter what I set my notification preferences to I still seemed to get spam messages from agencies and recruiters offering me irrelevant roles. Things along the lines of “Hey! I see on your CV you have a pulse so I thought I would contact you about this exciting opportunity to be a Finance Administrator for an industrial engineering and constructions company in Latvia”.

I automatically filtered out the messages, but then found I didn’t see messages from friends and colleagues who were legitimately trying to contact me and so would miss opportunities.

On top of all that I’m not huge fan of social platforms in general. I never really kept my profile updated as it just felt like I was handing over a tremendous amount of information about myself for very little gain.

And so I deleted my account. …and now; I am trying to get it back again.

Too good to be true

I recently started to look about for contract work and contacted a few agencies. I had a lot of interest early on and there was the usual flurry of activity. However oddly I started to get less feedback than usual and opportunities just kept going cold with no explanation. So today I asked an agent I know quite well what he thought the problem might be. The result was quite unexpected. He said that my CV looked “too good to be true”; and that many agents will assume I was a rival agency trying to steal clients.

The absence of proof

So now I understand the motivation behind a lot of the stranger calls and questions I have been getting recently. The follow up calls from “colleagues” and “associates” of agents I had spoken to moments before, asking the same questions and wanting me to talk about my experience “in more detail”.

So what can I do about this. Well I can show examples of my work… or can I? No, not really; for the last few years I have been working on in-house projects or ‘walled-garden’ sites that are not visible to the public. I have built prototypes and build systems and created lots of fun and interesting things; none-of which I could offer a single URL for.

I can show I have an up-to-date blog …well, to be fair its not been updated regularly at all.

I can show my GitHub account information. Well I can do that, but didn’t think it was nearly as relevant as it apparently is and can’t say I was shouting about it on my CV.

I can show an active LinkedIn profile … oh wait.

Not the proof of absence

It turns out that my LinkedIn profile was a necessary evil. It was adding validity to my existence and giving the agencies confidence I was legitimate.

So I have contacted LinkedIn about reactivating my account. Despite not really wanting to. If they can’t do that I will have to create and new one and spend a week or so getting people to give me references again. Still … I guess I could always give that Financial Administration role in Latvia a go.

2014-02-23 at 12.24

WhatFont is that? Find out with a neat little Chrome extention

The best tools are often the simplest and a great example of this is the WhatFont plugin for Google Chrome.

Whilst its true that you can also use the Chrome’s Webkit Inspector to identify the fonts being used on a web page this extension identifies the exact font you are looking at with no-fuss, simply click the extension and hover over the text. It also detects the services used for serving the web fonts including Adobe Typekit and Google Font API.

If you happen to be looking at typography that is part of an image, you can always use a service like WhatTheFont. WhatTheFont allows you to upload an image of the text in question and will give you its best guess as to what font is being used.

Debugging Angular with AngularJS Batarang

After yesterday’s post regarding the Grunt-devtools extension for Chrome, I thought I would also share another great extension that I’ve been finding incredibly useful.

AngularJS Batarang extends the Chrome Developer Tools, much like Grunt-Devtools but this time it adds tools for debugging and profiling AngularJS applications. This is incredibly useful especially as AngularJS is still tricky to debug, and often gives an helpful error messages.

Getting the AngularJS Batarang working is super easy; you simply just install the chrome extension and when it is running a site that is using AngularJS the extension will kick in and give you a view of all the scope objects within the current application.

AngularJS Batarang can be downloaded downloaded here

2013-09-17 at 13.37

Grunt-devtools Chrome Extention

For the last year or so all the work I’ve been doing as a front-end web developer has involved Grunt. Grunt is a fantastic JavaScript task runner that runs inside NodeJS. It runs myriad fantastic tools (tasks) that allow me to develop more quickly and efficiently.

I recently came across this great Chrome extension, Grunt-devtools, that allows you to run and monitor the Grunt processes from right within your Chrome browser.

All you need to do is install the Grunt-devtools Chrome Extension and then intsall the grunt-devtools server using npm.

npm install -g grunt-devtools

Then simply run:


From any directory containing a gruntfile. Switching to your Chrome browser you should see a new tab under the Developer Tools that will show you all the tasks configured in your grunt fill. You can simply click a task to execute it. The output will then be shown in the panel next to the tasks.

Moving away from the terminal window might not seem all that useful but it can sometimes really streamline your workflow to be able to quickly check on the status of your Grunt tasks without moving away from the browser.

Trying not to hate Regular Expressions

I hate regular expressions. The thing I hate most about them is that they are quite amazingly powerful and useful. If there weren’t powerful and useful their crazy non-sensical, mysterious and seemingly deliberately obscure syntax could be cast aside with gay abandon.

Part of the problem is that I don’t use them everyday. If I did, I probably would have bitten the metaphorical bullet and gotten to grips with them long ago. I always have to look them up, and frequently copy and paste complex strings that I don’t really understand and hope that the magic works. I find myself doing laborious search and replace operations that I know would have been simple search and replace operations if I had just known Regular Expressions. Now with the new HTML5 pattern attribute regular expressions can even be baked into forms for neat modern validation.

So as part of my attempt to get to grips with Regular Expressions I am posting this wonderful talk that I saw retweeted today from Fluent 2012 given by Lea Verou entitled “/Reg(exp){2}lained/: Demystifying Regular Expressions”. Its a great introduction (or re-introduction) to Regular Expressions.

Web design, development stuff for those who are interested