Damian Nicholson

Designing form validation the right way

2018-01-27T00:00:00+00:00

Last week I had the privilege of speaking at FrontEndNorth in Sheffield. The talk I gave was heavily based on the one I gave at JavaScript North East in November(with some obvious refinements) about the challenges posed to end users and developers when working with inline validation. I was able to share my experiences on both ends of the spectrum and how we can alleviate these challenges by using React along with some smart design decisions to prevent alienating users of the applications we build. Finally I shared some best practices about how to better design forms so attendees can use this knowledge when building out web forms in the future.

A lot of the concepts behind this talk are the basis of ConferizeForm* which is the library we’re using to build out our web forms in the next iteration of Conferize. This library will be Open Source in the near future, so stay tuned for an announcement about that!

I would like to take this opportunity to thank Kimb and the organisers behind FrontEndNorth for having me, and putting on a great conference. Secondly I would like to thank Conferize for permitting me to share some of our learnings and how we’ve been able to get around them.

I’ve posted a copy of my slides below for anyone interested.

2017 in review

2017-12-22T00:00:00+00:00

At the beginning of 2017 I wrote down this list of goals for the year. Unlike prior years I tried to be more realistic about what I’d like to achieve versus what’s actually possible. Upon reflection I don’t think I did too bad since I managed three out of four.

Run a marathon

I ran the Great North Run in 2016 and really enjoyed it. The event itself was a blast and I felt within myself when I completed it(I was out running the very next day). I figured this is as good as time as any to enter for a marathon as I may never get back to this sort of form and level of running fitness.

After a few months of training I completed the Edinburgh marathon in May which was a huge achievement for me and one item checked off the bucket list.

Write a blog post a month

This will be my twelfth post of the year so I managed to nail this one too. Writing is a skill and something that I find I have to work at, but once it’s done I feel a sense of catharis and relief. Blogging here is something that I plan to continue with in 2018.

Release two new open source projects

Perhaps I was a little ambitious on this one as I only managed to release js-routes-rails as I outlined early last year. Still contributing one Open source project is better than none at all!

Read one book a month

I failed miserably at reading this year and feel guilty for it. I read one book in December and managed to get about 50% of the way through three others throughout the year before putting them down. I plan to knuckle down and read at least a book every two month in 2018.

Some other cool things happened for me both personally and professionally in 2017, which include:

Being at Nasdaq for the Conferize IPO was a once in a lifetime opportunity and I’m thrilled to be along for the ride
Speaking at FrontendNE on Chrome DevTools and JavaScript North East about Making sure your forms don’t suck
Learning how to solve a Rubik’s cube
Doing a fair bit of travelling to places like Disneyland Paris with my family, Sorrento for my cousins wedding, catching a bit of sun in Portugal, enjoying some Guiness for a weekend in Dublin and finally Copenhagen a few times to get together at Conferize HQ

Making sure your forms don't suck

2017-11-02T00:00:00+00:00

Last Tuesday I had the privilege of sharing my experiences and thoughts on how to handle clientside validation at this months JavaScript North East meetup. It’s a non trivial problem and there are a number of things you have to be aware of before diving in. Most of the open source solutions I’ve worked with in the past I’ve found lacking, the main one being how to complement and reconcile validations performed on the server with those on the client.

Finally I shared how at Conferize, we’ve made use of React to build our own clientside validation library. React makes light work of handling internal state and provides a consistent event lifecycle across browsers to overcome these challenges. It’s something which we’ll hopefully be open sourcing sometime in the near future.

Reduce all the things

2017-10-19T00:00:00+00:00

I have long believed Ruby’s inject to be under appreciated as it’s super flexible. It’s great for things like:

String concatenation for example composing snippets of HTML
building a new Array(potentially shorter length than the one being enumerated over)
building a new Hash(based on it’s keys)

Fortunately, we have this same utility available to us now in ES6 JavaScript too just with a different name - reduce and I’m finding myself using it more than ever for the same reasons. The fact it’s a pure function, meaning it has no side effects ties in nicely with the React and Redux approach to UI development. Below are a few examples of how I’ve used this recently.

Example 1 - building HTML classnames

// Function to generate a string separated class names
const classNames = () => {
  const classes = [...arguments];
  return classes.reduce((classString, val) => {
    if (typeof val === 'string' && val.length > 0) {
      return `${classString} ${val.trim()}`;
    }
    return classString;
  }, '');
}

const Avatar = ({ src, alt, ...props }) => {
  const { className, ...other } = props;

  return (
    <img
      src={src}
      alt={alt}
      className={classNames('avatar', className)}
      {...other}
    />
  );
};

<Avatar
  src="https://avatars1.githubusercontent.com/u/34645?v=2&s=100"
  alt="Damian Nicholson avatar"
  className="rounded"
/>
// <img
//   src="https://avatars1.githubusercontent.com/u/34645?v=2&s=100"
//   alt="Damian Nicholson avatar"
//   class="avatar rounded"
// />

Example 2 - removing an item from a normalized collection

Note how in the example below we’re only having to do one loop in order to remove ‘Damian’ from both collections.

const myFamily = {
  members: {
    'abc': { id: 'abc', name: "Damian" },
    'def': { id: 'def', name: "Olivia" },
    'ghi': { id: 'ghi', name: "Amanda" },
  },
  order: ['ghi', 'def', 'abc'],
};

// Suppose I want to remove Damian from this object
const newFamily = myFamily.order.reduce((accum, id) => {
  if (id !== 'abc') {
    accum.members[id] = myFamily.members[id];
    accum.order = [...accum.order, id];
  }

  return accum;
}, { members: {}, order: [] });

Example 3 - reduce reducers

Taken directly from Andrew Clark’s(@acdlite) reduce-reducers repository to chain your Redux reducers from left to right.

const reduceReducers = (...reducers) {
  return (previous, current) =>
    reducers.reduce((p, r) => {
      return r(p, current);
    }, previous);
}

Git stash workflow

2017-08-22T00:00:00+00:00

One of the main reasons I believe Git to be so well adopted is its flexibility. It has utilities to suit the workflow of a sole developer working on their own project and can easily scale up to meet the needs of thousands of developers contributing across multiple repositories like in Open-source.

A lesser known utility of Git that I find fits my workflow well is Git stash, and I’m going to share my rationale as to why I eschew working on a feature branch with frequent commits which is ingrained in to most standard Git based workflows(like Git flow) and use git stash a lot. In order to do that it’s probably best that I share my current workflow first.

Workflow

Checkout master branch and do a git pull
Start my work on master branch
Add files periodically to the stage when I believe them to be in good shape(this includes any files being removed)
Get to a point where there are no more working files left and everything is added to the stage
Review all the files on the stage and fix up any issues that I notice
Make a new feature branch and commit
Pull with rebase from master in to feature branch then push to GitHub and make a pull request

You’ll notice that git stash was not run at any point in the above workflow. That’s because quite frequently I’ll be interuppted between steps 2-5 whether that means working on something that’s higher priority or checking out a colleagues branch to help debug a problem. This is where git stash save really comes in to its own, versus doing a ‘WIP commit’ on the feature branch and coming back to it later for the following reasons.

Never forget which branch you were working on

This is subjective, but recalling the feature branch previously worked on was a constant problem for me. Command line magic like git checkout - to move to the previous branch only worked some of the time. With git stash it’s impossible to forget because the branch is always master!

Two git commands are all that’s needed

With the git stash workflow, you’ll only ever have to recall two commands, namely git stash save -u. The -u is very important as this ensures that any untracked files are also added to the stash contents. The second command being git stash apply which reverts back to the exact same state prior to running git stash save -u. Untracked files remain untracked as you’d expect it.

Note: Never ever use git stash pop.

Contrast this to the feature branch / WIP commit approach there’s far more git interaction and cognitive load required because you’re effectively left with a clean slate at this point. You either have to:

Start digging through git logs to understand where you left off and try to push on though no doubt you’ll forget something
Undo the commit using git reset and hope that you remembered the correct flags to pass to it. If you do you can carry on that way.

Less need for squashing or amending commits

Because your crafting the commits as you go and using the git stash for your working changes, squashing or amending commits is rarely needed.

Keep your working tree as a todo list

Commits aren’t final but they don’t give you good feedback of where you left things. A good commit message or TODOs written in can alleviate this, but those are overkill in my opinion. Showing the working tree status with git status has been all I’ve ever needed alongside git diff and git diff --staged.

Chrome DevTools

2017-07-07T00:00:00+00:00

On Thursday I had the pleasure of speaking at this months Frontend NE about Chromme DevTools. I shared a bunch of tips and tricks that I think are both cool and useful that help me be more productive when prototyping or working in the browser. My slides are below.

On programmers and empathy

2017-06-30T00:00:00+00:00

Programmers do their best to write prose in the same way that they write code - clearly and concisely. Being able to communicate effectively is a valuable skill to have on any high functioning team, and something that I think is especially important for remote teams. Nonetheless, this approach is missing a key ingredient that most developers overlook when communicating with others, and that’s empathy. They’re forgetting that there is a living person on the end of their ‘terse’ emails, chats in Slack and reviews on GitHub pull requests who has real feelings and emotions. They’re no longer writing instructions for a machine to carry out, so why do it?

“You’re wrong” is an example statement that I’ve witnessed written often by programmers(generally by someone more senior or with specialist knowledge) to another individual that I believe is entirely lacking in empathy, and as such I stay away from using it.

The reason why I’m not fond of this statement is because at it’s core “you’re wrong” is a binary statement(computer code) though reality is nuanced. Any conclusion we derive and base our decisions from is based on the information we have at hand, and most of us who endeavour to do a good job don’t deliberality make poor decisions. As a result there’s no reason to make someone else feel stupid(potentially publicly humiliated in the case of open-source) just because they’re not informed. I’d imagine it would cause some level of animosity over time and most certainly a lack of respect in the short term which most certainly isn’t useful for a high functioning team. Not to mention that it makes the individual who said it in the first place a hypocrite since they’re speaking in absolute terms and not open to having their stance changed by another.

Hopefully the takeaway you get from this is to consider how you’re going to be received next time you’re about to send off a message to your coworker or peer. And obviously try to refrain from saying “you’re wrong”.

CSS animations with hidden elements

2017-05-13T00:00:00+00:00

Today I learned that a CSS animation applied to an element hidden through visibility: hidden; occurs straight away. This behaviour is different to an element hidden through display: none as the animation doesn’t fire till it’s set back to display: block.

The demo below shows this in action - note how the square on the right appears part of the way through it’s animation sequence.

See the Pen Hidden versus none CSS animations by Damian Nicholson (@damian-1478604314) on CodePen.

Working from home misconceptions

2017-04-22T00:00:00+00:00

When I tell people that I work from home as a remote employee, most say one of two things:

That would never work for me!

Certain lines of work simply cannot be done working from home, I understand that. Large-scale construction is one example which comes to mind.

For some who’ve said that, they mean it in a different way. In the hypothetical scenario that their job could be done from home and their company permitted it, they’d still go about their day the same as what they do now. These people prefer to leave the house, endure the commute, work from 9-5pm, and then come home in the early evening. The act of leaving the house and commuting enables them to make the context switch from home to work mode and they prefer that there is a physical separation between the two. It also plays to people’s desire to have a purpose in life, their place of work is where they’re needed so that’s where they’re headed. The social side of work life is important too and they wouldn’t want to forego that.

With the exception of the social aspect of work life, the rest are things that people have been conditioned to believe and do just because that’s what everyone does. The narrative that these workers like to tell themselves is “I’m at work so I must be working” simply isn’t true. If you’ve ever worked on a project that required time tracking down to the minute(awful I know) you’ll know this is the case.

Being able to work from home effectively is something that must be learnt over time. It’s no different to your first few days in school(though you probably can’t remember it). The regimented 9am start and 3:30pm finish is a shock to the system for most kids here in the UK. They simply aren’t used to concentrating for long periods of time so they end up leaving looking like zombies and just want to crash out on the sofa as soon as they arrive home. Though they soon get used to it and working from home is no different.

Funnily enough, some people say the following:

It must be piss easy to work from home all the time

Well, I’ve got a newsflash for you, it isn’t! In fact it’s harder than working in an office because you constantly push yourself harder!

To be able to succeed working from home you need the confidence to be able to do your job, and with that confidence comes self-imposed pressure you put on yourself. Things you once found challenging become trivial and mundane, as a result, you feel guilty for not working as hard as you once did, so you try to push yourself even harder. This is a vicious cycle that can potentially lead to overwork and burnout which isn’t good for you or your company. If you want to have a healthy work life balance the key is to know when to push and when to back off, and only you can know that.

Batch file renaming in Bash

2017-03-26T00:00:00+00:00

Batch file renaming is a common job for a developer. In the past, I’ve used a Mac application called NameMangler or Finder itself to do the heavy lifting for me. Those tools work well when the files being transformed live within the same directory, but it quickly becomes more difficult when you want to be able to work across multiple, potentially nested directory structures.

On the past few occasions, I’ve used Bash to great effect, though for some reason I NEVER REMEMBER how to correctly pipe the file transformation on to the find command, so I’m documenting it here for future reference.

Below is an example of a task that I had to carry out just the other day – renaming all files with the .textile extension to .md. It really is trivial.

find . -type f -name '*.textile' | while read f; do mv "$f" "${f/.textile/.md}"; done

Tips on writing a frontend developer CV

2017-03-03T00:00:00+00:00

This past couple weeks I’ve been sifting through CVs for the frontend developer we’re looking to hire at Conferize. So far it’s been a mixed bag, but I’ve noticed a few recurring themes across those that are being progressed on to an interview. Based on this experience I’ve jotted down some tips that I believe would help potential candidates in assembling a more well rounded application.

Write a custom cover letter

We don’t expect War and Peace, but something that makes it clear you’ve spent some time looking in to the company and what you can bring to the table by joining. A two liner indicating that this application is in response to the job advertisement you came across isn’t a cover letter.

Read the job description carefully

Before applying ensure that your skill set overlaps those listed in the job description. The more recent experience the better for a mid to senior level frontend role as the landscape has changed a lot in the last five years. Just having jQuery experience isn’t going to cut it anymore. Obviously there is some flexibility in the extent of the overlap, but you ought to be confident in your abilities in the things that do.

Ensure links are still active

Otherwise they shouldn’t be listed on your CV. Any active links ought to be representative of you and your craft. Having a personal website that looks and performs well across viewports leaves a good impression when applying for a frontend position. Obviously an active GitHub profile would be ideal.

Spelling and grammar matters

Syntax plays a large part in programming, and if it isn’t correct your application simply won’t compile. The writing on your CV is no different. This is especially true if your applying for a remote role where communicating effectively is of paramount importance.

Keep it short and concise

Try to keep your CV to two pages - anything longer is waffling. Cull any information that’s not relevant to the role except your hobbies or interests. Examples of this I see frequently are office addresses of past positions held, driving license status and work experience not in the technology sector. If your really struggling I suggest dropping any qualifications except the most prestigious.

Don’t lie!

If you claim that you possess 6 years React experience then your obviously lying. If you claim to have contributed to Angular and it’s not on GitHub then if you come in for an interview I’ll ask you about this. I don’t mind if your PR was rejected, the fact you tried to contribute indicates your passion and understanding of the subject.

Finally

These are just my opinions based on my experiences screening job applications for frontend roles, and your mileage may vary. Happy job hunting!

Exposing Rails routes in JavaScript

2017-02-02T00:00:00+00:00

When building any REST based applications in Rails, it’s common to create a routes.js or paths.js file containing URL helpers so your client side JavaScript components can render links or construct AJAX requests for the correct endpoint. For example:

// routes.js
routes.buildUserProfileUrl("damian")
=> "/u/damian"

routes.buildConferenceAboutUrl("over-the-air")
=> "/over-the-air/about"

routes.buildBookmarkSessionUrl("over-the-air", "keynote")
=> "/over-the-air/speaker_sessions/keynote/bookmarks.json"

I’ve never been too fond of this approach for a few reasons:

It’s a cheap imitation of the logic that currently resides on the server
It’s easy for it to get out of synch with server side route changes
It impacts your end users page performance as your application grows and you add more routes

Of course these URLs could be passed down in the JSON that used to populate the component, but that’s always seemed pointless and wasteful to me as it means you end up duplicating data which ought to be only declared once. For example when exposing a collection of resources your having to send more data over the wire:

{
  "speakers":[
    {
      "name": "Damian Nicholson",
      "profile": "https://www.conferize.com/u/damian"
    },
    {
      "name": "DHH",
      "profile": "https://www.conferize.com/u/dhh"
    }
  ]
}

JSRoutesRails

Late last year, I spent a couple of hours writing a new gem called js-routes-rails which solves the first two problems I outlined above - poor duplication and synchronisation with the server.

It achieves this by declaring which of your routes you wanted exposed in your config/routes.rb with an export: true property:

# config/routes.rb
resources :articles, export: true
resources :comments
resources :publishers, export: true do
  resources :magazines do
    resources :photos
  end
end
match "/about", to: "static#index", via: :get, export: true

Note how this API works with both single routes and those declared as a block. Any child routes declared within the block syntax will also be exported.

At this point all you have to do is run the Rake task provided to generate a JavaScript library containing all of the routes you declared to be exported so they can be consumed in your client side code.

$ bundle exec rake js_routes_rails:export

JsRoutesRails.new_articles_path()
=> '/articles/new'

JsRoutesRails.edit_articles_path({ id: 23 })
=> '/articles/23/edit'

JsRoutesRails.edit_magazines_path({ publishers_id: 5, id: 9 })
=> '/publishers/5/magazines/9/edit'

More documentation and configuration options can be found on GitHub.

The books I read in 2016

2017-01-01T00:00:00+00:00

I read seven books in 2016, and of those, I’d recommend only the first three that I’ve listed here.

Ready Player One

Being a nerd there’s a strong likelihood that I’m going to like anything that blends computer games, 80s nostalgia(I was born in 86’), virtual reality and science fiction into a good story line, and this book certainly doesn’t disappoint!

Set in the dystopian future, the divide between rich and poor is greater than ever. Most find solace by spending their time in a virtual world called OASIS. It’s within OASIS that poor Wade is on a mission to find a series of hidden easter eggs left behind by the world’s creator within the game. The first person to find all of these will win a jackpot making them become the richest person in the world.

Recommended.

Quiet: The Power of Introverts in a World That Can’t Stop Talking

We’ve become conditioned to perceive that those who talk are smarter and therefore seen to be in charge. The flipside of this view is that those who don’t talk, who hold back to contemplate and make a reasoned decision later are seen as weak or lacking which is unfortunate for those of us who identify as introverts. I believe I lie on the introverted side of the spectrum which is why this book really resonated with me as I was able to learn a bit about myself whilst reading it. Nonetheless, the author makes a number of great arguments about how introverts are able to progress despite this tendancy.

Strongly recommended.

Elon Musk: Inventing the Future

There’s no doubt that Elon Musk is a visionary. After selling his first company PayPal to eBay, he invested all the proceeds into SpaceX and Tesla, both of which are flourishing despite the odds being heavily stacked against him. It’s truly inspiring to read about this man’s life so far and how he’s absolutely determined to colonise Mars and I for one am rooting for him!

Recommended.

The World of Cycling According to G

This past year I’ve taken up cycling as a hobby. Much to the dismay of my wife I’ve even started watching it on TV. Naturally, I gravitated toward Team Sky as they have a good track record and most of their squad are British. Geraint Thomas is a double Olympic gold medallist and a long standing member of Sky. So far he’s helped the team win the Tour de France four times in five years, and won many races himself along the way. This book offers a good insight into what it takes to be a world-class cyclist at the top of their game, along with a few cheeky anecdotes about G and his teammates which I found enjoyable.

Racing Through the Dark: The Fall and Rise of David Millar

Quite the contrast to Geraint’s book, David Millar was a talented British cyclist who started his career when doping in the pro teams was rife i.e. the Lance Armstrong era. Despite his efforts to stay on the straight and narrow, David caved and started doping himself after the pressure to perform became too much. Like Lance, David got caught and received a ban along with a hefty fine.

The Racer: Life on the Road as a Pro Cyclist

After making short work of Racing Through the Dark, I felt compelled to check out another David Millar book. In contrast to that, this is a little ‘less real’ as doping has huge consequences both on and off the bike for a professional cyclist, however, I enjoyed it nonetheless. The book is focussed entirely on the art of racing and the tactics used when riding for a World Tour team. If you’re a keen cyclist then this book won’t disappoint.

Swim, Bike, Run: Our Triathlon Story

Over the past five years two brothers from Bradford, namely Jonny and Alistair Brownlee have dominated the world triathlon scene. This book details their path in to the sport and provides excellent insight in to just how much work, dedication and training is needed to reach this level.

The only downside to this book is that it’s devoid of many personal tales except any which outline a healthy sibling rivalry between Jonny and Alistair.

The best books I read in 2015

2015-12-31T00:00:00+00:00

The Martian - Andy Weir

I don’t tend to read fiction but I bought this on impulse as it was recommended by friends and also name dropped on the Tim Ferriss podcast. I’m so glad I did as read this cover to cover in two days.

It’s about a botanist called Mark Watney who becomes stranded on Mars after a storm nearly kills him while his team are evacuating the planet. He figures that he might be able to survive until the next scheduled mission to Mars and this book takes us through his endeavours in trying to do that. It can be a bit heavy on the science and math at times, but I found those to enhance the story. I wholeheartedly recommend reading this!

Zero to One - Peter Thiel

Peter’s premise is that entrepreneurs should be intent on building and maintaining a monopoly, and to achieve that their focus ought to be on creating something new and original. Not something that is a variant of an existing product or service. That way you avoid competition, and are able to scale up in to becoming a monopoly by being the first business to dominate that niche. He also provides some guidance on maintaining a monopoly and some insight in to the PayPal mafia.

Work Rules: Insights from Inside Google That Will Transform How You Live and Lead - Laszlo Bock

Overall I really liked this book. Laszlo is head of Google’s People Operations, and details how Google takes an unconventional approach to recruitment, hiring and managerial processes, and how these things have came to be(hint: it’s data driven). Some of the advice given probably isn’t practical for all businesses, but it’s a worthwhile read and there’s a lot to take away from it.

Stubbing AngularJS $window

2015-07-21T00:00:00+00:00

It’s sometimes useful to be able to perform a page redirect using AngularJS low-level $window API.

What’s not ideal is when this behaviour needs testing and the sucker actually performs a redirect half way through your suite leaving you in limbo – not cool!

This is where AngularJS liberal use of Dependency Injection(DI) really helps as we can utilise its inbuilt $provide service to stub out $window and overcome the issue.

Below is an example of how I achieved this in Jasmine / CoffeeScript:

ctrl = scope = $window = null

beforeEach ->
  module 'my_module', ($provide) ->
    $provide.constant '$window', { location: { href: "dummy" } }

  inject ($rootScope, $controller, _$window_) ->
    scope = $rootScope.$new()
    $window = _$window_
    ctrl  = $controller 'MyController', $scope: scope

it "should redirect to '/some-other-url'", ->
  expect($window.location.href).toEqual("dummy")
  scope.myMethodWhichRedirects()
  expect($window.location.href).toEqual("some-other-url")

Why am I going to that conference again?

2014-11-03T00:00:00+00:00

In order of priority I’ve outlined my main reasons for attending a technical conference.

To learn from the experiences of others
To be introduced to new topics
To learn about new tooling, products, libraries or approaches
To be inspired

Networking is also a big reason I’m there but I just want to keep this strictly about the talks.

After attending a number of conferences in the past five years, its become clear to me that this is not the order in which conference organisers curate their list of speakers and talks around. In fact I’d go so far to say that organisers heavily lean toward choosing inspirational or self promotional talks.

I understand this to a degree. Conferences are a risky business and lining up big speakers helps fill up the seats. But I’m concerned that this bias has become acceptable and ‘the norm’ in the conference scene. Unfortunately its having the opposite effect on me, and on others who I’ve spoken to.

I don’t think I’m alone in reiterating that delegates are there to learn first and foremost. Its the very reason why most employers are happy to foot the bill and pay for the associated travel costs for their workers. Attendees want to leave feeling inspired, but mostly they want to leave having learnt something new.

CoffeeScript round two

2014-03-17T00:00:00+00:00

Photo credit

My original take on CoffeeScript wasn’t exactly favourable. For those who aren’t interested in reading that article the crux of my argument is this:

CoffeeScript doesn’t solve enough of a problem to warrant it’s use

Well I’m happy to say that my opinion on this matter has changed. I now firmly believe CoffeeScript does solve a number of important problems to warrant its use. The rationale for my change of heart is outlined below.

Brevity and clarity

I like most developers value and enjoy working with code which is both clear and concise. CoffeeScript facilitates in achieving these goals by enabling us to focus in on the logic, not the superfluous syntax.

Abstractions are good

Especially those that help you get around the nuances of the compiled language. Personally the transition to writing fluent CoffeeScript felt swift, as the features and benefits of the language became apparent as I struggled. This is akin to what happens when you test drive, things become hard when your approaching the problem incorrectly. A quick trip to the CoffeeScript homepage and I was away again.

Confidence

Checking for type and equivalence all the time cuts down on random runtime errors. I have more confidence in my code and test suite as a result of this.

Consolidation

I like knowing that there is one way of doing things. Think of all the different approaches to inheritance in JavaScript or ensuring your in the correct context(named function, that / this confusion, call, $.proxy). This is all taken care of in the core library, so I like to make use of it wherever I can.

Great support

We’re now at a point where compilation is so quick and easy that it’s became transparent. It’s been baked in to Rails since version 3.1 and CoffeeScript is supported in every other decent build / asset management tool including both Grunt and gulp.

Conclusion

Although the subject of CoffeeScript polarises people, I do think some level of abstraction is natural and required as more complex applications are being built on the client. So while CoffeeScript might not be the perfect solution, I do feel it has some merits(far more than my originally thought) and so is worth taking another look at. If not just to try to and prove me wrong. Any takers?

Scotland.js

2013-05-23T00:00:00+00:00

Photo credit - STV Edinburgh

A little over a week ago I had the pleasure of speaking at Scotland.js, a two day JavaScript conference hosted in the centre of Edinburgh.

My talk

Being my first proper speaking engagement, I was very nervous in the run up to the event. Its no secret that public speaking is one of man’s top phobias, and I guess I’m no different in that respect.

Anyhow I’m happy to report that my talk went down well, and I received some great comments afterwards from a handful of attendees which was very much appreciated. It managed to provoke some interesting discussion in the Q&A session and later on in the pub too!

My talk, entitled “Writing testable, scalable, maintainable rock solid JavaScript” was geared around how to unit test your client side code, and explained some of the lesser well known benefits of unit testing. I also shared some tips and techniques that we use at Sage in order to make our code more decoupled. You can see my slides on SpeakerDeck or check them out in the embed below.

The video will be released sometime in the next few weeks so make sure to follow me or Scotland.js on Twitter to ensure you don’t miss it.

Scotland.js

The conference itself was a blast! I learnt a lot of cool stuff about Node.js, client side databases like IndexedDB and leveldb, and to how to work around heavily nested asynchronous calls with bacon!

The networking and social side of the conference was top notch! There was somewhere in the region of one hundred attendees, and because of this the atmosphere was very welcoming and friendly. Consequently I got to meet and chat with a load of other software developers from all over the globe in the breaks and afterward in the pub. I remember having great conversations with Coby, Colin, Igor, Stefan, Peter, Jan and Dominic to name a few.

I really wish more conferences were this intimate, as I find that larger crowds invite cliquish behaviour. Something which make it pretty intimidating if you want to approach and chat.

I’d like to thank Peter Aiken for having me and Neo for putting on such a great event!

Also for the support that my friends and colleagues in Sage have given me in gearing up for the conference(you know who you are), it’s very much appreciated!

Talk

Moving to Android

2013-05-18T00:00:00+00:00

Photo credit

If the title if this post isn’t enough of a giveaway, I’ve retired my iPhone 4S and purchased a Nexus 4.

To say that I’ve invested a lot of time and money into the Apple ecosystem over the past five years is an understatement. So this is somewhat of a big deal for me.

Why the change?

Quite simply I think I’ve outgrown iOS and all that it has to offer. I’ve longed for more power user features and configurability over the past six months than ever before. And sadly iOS just isn’t able to provide that for me at this moment in time.

Perhaps it’s a premature move on my part, since we can only speculate as to what iOS7 has in store. But knowing Apple as a company, they aren’t going to make a change, for changing sake. Looking back at their previous releases is evidence of this. Think about how long it took them to implement a simple feature like copy and paste.

Android first impressions

Android is pretty darn sweet now. The clunkiness of the interface has gone and the responsiveness is excellent! Added to the fact that I have been able to see dramatic software improvements take place over the past few years made this a no brainer for me. Yes there’s room for improvement, but I’m confident that these are going to get addressed in the near future.

That said I’m thoroughly enjoying my Nexus 4 and all that it has to offer! In fact I’m busy writing this very blog post using the gesture enabled keyboard. Something I’d never dream of using my old iPhone.

Pros and cons

For those of you who are considering making the move to Android, here’s a quick rundown on a few of the things that I’ve noticed since jumping ship. Some of these might be phone specific, rather than applicable to Android, but I’m going to list them here anyways.

Pros

Hardware

Larger screen
Increased battery life
Standard charging adapter

Software

Google integration is fantastic
Itemised breakdown of mobile data and battery usage is killer. You can even set a cap on each.
Notifications HUD is interactive i.e. you can action things within it on the fly like archiving an email
Gesture keyboard entry has completely changed the way I type on a touch screen device. I never want to touch type again
Better customisation using Apps launchers and widgets
Android updates come directly from Google. No waiting around for mobile carriers to add their guff before receiving the official Google update.

Cons

Hardware

Position of the power button is annoying
Camera isn’t as good

Software

Sometimes the back button is a little inconsistent
No ability to press and hold down the full stop key to insert .com or .co.uk
No ability to touch the top of the screen and scroll to the top of the page
When you remove an icon from the home screen, it isn’t uninstalled. Perhaps this is a failure in my mental model as I’ve been so used to using iOS
Gestures aren’t used half as much as in iOS apps e.g. nice mechanisms like pull to refresh aren’t as popular
A few apps which I use almost daily don’t have an Android counterpart. DayOne, Omnifocus and Fantastical being the main ones

JavaScript North East

2012-04-21T00:00:00+00:00

Last week I had the pleasure of giving a talk on Jasmine at JavaScript North East(JSNE). Despite being nervous as hell(public speaking), the talk went ok and it managed to provide some stimulating conversation around testing.

Slides

I’ve posted up the slides on SpeakerDeck, or you can see them embedded below.

Motivation for the talk

It’s clear we’re seeing a trend toward business logic living on the client. This is because we as users enjoy using rich and responsive web applications like Twitter and GMail. Now that internet speeds across the world have increased, coupled with the fact that browser vendors have worked hard to optimize their JavaScript engines and increase parallel downloads, developing applications like these is no longer restricted to companies who have their own server farms.

Because of this trend, front-end developers have to grow up and start embracing software development best practices when building non-trivial web applications.

One way we can achieve this is by testing our code using a tool like Jasmine. This ensures any JavaScript we write is maintainable, correct and modular.

In my talk, I outlined why and how Jasmine is highly capable of testing any JavaScript of any platform using a few examples along the way.

jQuery UK conference

2012-02-25T00:00:00+00:00

Two weeks ago I had the pleasure of going to jQuery UK in Oxford. I finally managed to write up my notes from the event, so without further ado, here they are.

Ralph Whitbeck - The State of the jQuery Project

I enjoyed Ralph’s talk, as much of what we know and love about jQuery is often taken for granted. In addition to development work and performance enhancements, it’s astounding how much goes on behind the scenes in the jQuery project. Examples include maintainence of jQuery.com, the API and the CDN. I use these resources daily, and they never ever seem to experience any downtime.

Ralph also outlined what’s to come in jQuery 1.8

No new API’s
Some refactoring to bring down the file size
Exploring ways to break IE7/8 functionality out in to a compatibility plugin
Infrastructure overhaul
Site refresh
New plugin site

Todd Parker - jQuery Mobile

This was the talk I was least looking forward to, and it turned out to be one of my favourite talks of the day. In a nutshell jQuery Mobile has came on leaps and bounds since it was first released, it’s a million times more reliable and it boasts plenty of mobile / tablet optimised features out of the box. I look forward to working with this some time in the near future.

A few things which I found interesting:

Touch optimized
Hijacks links for performance reasons automatically transitions to the new page being accessed with an animation
Testing is perfomed on actual devices rather than emulators as this yields the best results
Utilises the HTML5 history API and gracefully degrades to to hashchange if this isn’t supported by the phones browser

Dion Almaer and Ben Galbraith - Web vs Apps

It took me a little time to get into this talk, though I wouldn’t say this is a reflection on the speakers as once I caught up, I found Dion and Ben had some good stuff to say. Their underlying message is to make people realise that both of these platforms need to be leveraged appropriately depending on what’s mission critical. For example mobile apps look and respond great, but it’ easier to A/B test and deploy to the web frequently(no resubmission to the App Store). Whichever approach is taken, it needs to be revisited frequently to move with technical developments e.g better phones, better browsers. In doing this for Walmart Dion and Ben released a Node.js framework called Thorax which looks interesting.

Jorn Zaefferer - Pitfalls and opportunities of Single Page Web Applications

Jorn’s talk was packed with useful techniques, recommended libraries and nuggets of information. Definitely the talk that I felt I got the most out of in terms of knowledge I can take away and use immediately.

Jorn managed to delve in to the topics:

Leveraging the HTML5 history API. Notably why and how it should be used. In the event that the history API isn’t supported by a users browser it should fallback gracefully to hashchange.
Client-side error tracking. Similar to the techniques outlined in Nicholas Zakas talk on Enterprise Error Handling except at a lower level with code examples. Jorn outlined why catching JS errors in production is helpful(it pisses off users without you knowing these errors are being thrown) and how it should be done using window.onerror and logging this back to the server via AJAX.

Christian Heilmann - Embracing and celebrating redundancy

I found Christian’s talk highly entertaining and informative. The fact that Christian had the balls to go to Europe’s first jQuery conference and advise people not to use jQuery I find hilarious. Humour aside, Christian supported his argument with many examples of why jQuery is simply not needed anymore. Browser vendors have fixed their weird inconsistencies over the past 5 years(IE9 & 10 aren’t too bad at all) and implemented native API’s that are very concise. He advocated that we should really determine the use case before jumping straight in to a new project and bootstrapping it with jQuery purely out of habit.

Haymo Meran - Aloha Editor

This isn’t a dig at Haymo, but I felt as an attendee that his entire talk was geared to market his product - Aloha Editor. My advice to Haymo would be to tone down on the marketing, and explain the nitty gritty of some of the cool stuff that’s going on under the hood of Aloha Editor as it seems to be a well built product.

Paul Irish - Webapp development stack & tooling

Like Christian, I found Paul’s speaking style to be informative but hilarious at the same time. Paul presented a smorgasbord of high quality tools and techniques that we shold certainly keep in our toolbox when starting a new project, building a new feature or debugging code. Paul mentioned stuff like:

JSHint
Jade, SASS, Less, Stylus and Compass
HAML, Markdown, Jade, Handlebars
HTML5 boilerplate, Email boilerplate
CoffeeScript, Dart
Firebug, Webkit Developer Tools

As a big SASS user, it was news to my ears to find that Paul was working on trying to get it integrated in to Google Chrome natively. Paul also showed off some awesome features in the Chrome Canary builds that are going to make my life a hell of a lot easier like JS directives.

Addy Osmani - Large scale applications using JavaScript and jQuery

I’ve watched a couple of Addy’s presentations online before so I found I didn’t didn’t get much out of this talk. It was very good don’t get wrong, except I found it heavy on the theory(show me the code), much in the same vein as the basis for his talk by Nicolas Zakas on Scalable JavaScript Architecture.

Doug Neiner - Contextual jQuery

Doug’s knowledge of jQuery comes through in his talks as he speaks with clearly with authority. Doug outlined why certain code styles are slow(with examples) and why it’s more performant to leverage DOM traversal over ID’s and classes in the right context. It’s fine to keep markup clean and use complex sectors. Doug also presented that we shouldn’t have all selectors running on Document Ready which I found interesting. He prefers just in time intialzation of events and selectors, as there’s a chance some parts of the page won’t be used that often, so why set it all up ahead of time?

To summarise, I had a fantastic time at jQuery UK (thanks @sageuk), met some cool people, learnt a bit and would love to go again next year. Hats off to the folks from White October as they done a great job putting this together.

Speed up writing CSS backgrounds in Bash

2011-12-26T00:00:00+00:00

I should point out that both the original idea and implementation came from Richard Bradshaw. I highly recommend reading his blog post as it’s a good primer as to why this script is so useful for people who write CSS often.

TLDR: Getting the dimensions for background images in CSS is a common task for front end developers which requires application switching and memory work. Richard has scripted up this process which copies the resulting CSS with correct image dimensions directly to his clipboard. Schweet!

So why am I banging on about a blog post someone else has written? I thought it would be a good learning experience to port it over to Bash as the original was Python(no flame wars please). I also knew that retrieving image dimensions is trivial using imagemagick(the only pre-requisite).

#!/bin/bash

# Retrieve image dimensions using imagemagick
# We're only concerned with the first image(gifs have multiple) hence the array notation
width=`identify -format '%w' $1[0]`
height=`identify -format '%h' $1[0]`

# Build CSS string
str="background: transparent url($1) no-repeat 0 0;\n"
str+="width: ${width}px;\n"
str+="height: ${height}px;"

echo -e $str;

# Pipe out string retaining line-breaks to macosx clipboard
`echo -e $str | pbcopy`

Throw the above snippet in to /usr/bin/css-background, make it executable and reload your terminal.

Next time you’ve outputted an image in Photoshop and plonked it in your images directory, give this a shot at the command line and hit paste in your editor.

$ css-background path/to/your-image.jpg

Something like the following will be outputted in to your CSS file.

/* Copies the following to your clipboard */
background: transparent url(path/to/your-image.jpg) no-repeat 0 0;
width: 16px;
height: 16px;

Oh and Merry Christmas!

jQuery inconsistencies

2011-12-05T00:00:00+00:00

Yesterday I discovered what I thought to be a bug in jQuery. See the snippet below which highlights the issue I ran in to.

var textInputs = $('input:text'); // OK

var submitInputs = $('input:submit'); // OK

var checkboxInputs = $('input:checkbox'); // OK

var searchInputs = $('input:search'); // Syntax error, unrecognized expression: search

This error is also thrown when trying to select any of the newer inputs introduced in HTML5 in a similar pseudo selector fashion.

Naturally I started looking through the docs but couldn’t find a mention anywhere regarding the new HTML5 inputs. Something which I found suprising considering how prevalent the use of HTML5 is now.

After some digging on Google, I unearthed an old ticket on jQuery’s bug tracker asking to support the above pseudo selector notation in order to maintain consistency across its API. However the idea was shot down due to the way older browsers handle inputs they can’t interpret(they fallback to text fields) which is a fair argument.

What I don’t understand is how the same selector wrote in a slightly different way is supported.

var searchInputs= $('input[type=search]'); // OK

There are three things I want out of an API:

Well tested
Well documented
Consistent

Now come on guys get onboard with the latter, either make this happen or deprecate pseudo selector support entirely.

DISCLAIMER: I still love jQuery.

HTML5 Validator Gem

2011-09-10T00:00:00+00:00

We all know the benefits of adhering to web standards, but I’m sure you’ll agree it’s a laborious process manually checking the validity of each page within a site or web app using the online W3C validation service or a browser extension.

In an effort to scratch my own itch, I built a gem called html5_validator. It’s geared to run as part of an RSpec test suite, so if your serious about being standards compliant, you shouldn’t mind your tests failing if you’ve got some grubby HTML kicking about.

It can be installed using the following command.

gem install html5_validator

What’s cool is that if your page isn’t compliant resulting in a failing spec, the offending HTML is printed out as part of the failing test. See below an example of how this can be used in a controller test:

describe PostsController do
  render_views

  it "should be valid html5" do
    get :new
    response.body.should be_valid_html5
  end

end

How does this work?

I wrote a wrapper around an online HTML5 validation service called validator.nu. When run as part of an RSpec suite, the rendered HTML is posted to their web service which responds with some JSON containing the results of the validation check.

I opted to use validator.nu over the official W3C validator because it supports JSON (the W3C only supports SOAP), so it’s easy to work with in Ruby.

More info

You can find the code on my Github repository along with a few more examples.

As always questions and comments are very welcome. Forks and pull requests even more so.

iPhone style checkbox using only CSS3

2011-07-25T00:00:00+00:00

I’m not normally one for CSS experiments, but after reading a few chapters of Hardboiled Webdesign on the plane journey back from Mexico, I had the urge to try out some CSS transitions.

I didn’t want to go AT-AT Walker overboard(even though it’s pure awesome), so I decided to create an iPhone checkbox using only CSS. It turned out to be pretty easy, check out the demo and code below.

Check out the demo here!

HTML

I’ve tried to keep the markup pretty lean. Similar to what’s generated via Formtastic or SimpleForm.

<div class="checkbox">
  <input id="check" name="1" type="checkbox" value="1" />
  <label for="check">Check-me</label>
</div>

CSS

This is where the magic happens! The main thing to note is that we’re not really using the checkbox at all. We’re leveraging the fact that it’s toggled when we click it’s label(which has the necessary for attribute). That way the iOS checkbox image can be applied to the label, which in turn is wrapped in a div with a specific height, width and an overflow of hidden. Using the :checked pseudo selector, we transition the position of the background image on the label, just like on an iPhone!

body {
  font-family: "Lucida Grande", Verdana, Arial, sans-serif, Helvetica;
}

.checkbox {
  display: block;
  width: 94px;
  height: 27px;
  overflow: hidden;
  border-radius: 3px;
}	

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  text-indent: -9999px;
  display: block;
  width: 150px;
  height: 27px;
  line-height: 27px;
  background: transparent url(sprite2.png) no-repeat -56px 0;
  -webkit-transition: background-position 0.3s ease-in-out;
  -moz-transition: background-position 0.3s ease-in-out;
}

input[type=checkbox]:checked + label {
  -webkit-transition: background-position 0.3s ease-in-out;
  -moz-transition: background-position 0.3s ease-in-out;
  background-position: -3px 0;
}

My take on CoffeeScript

2011-07-24T00:00:00+00:00

So CoffeeScript has been on my radar for some time now, and unfortunately it hasn’t piqued my interest as much as other Ruby developers I know. Only recently did I eventually realise as to why this was the case - it doesn’t solve a problem.

I’ll rephrase that last bit. In my opinion it doesn’t solve enough of a problem to warrant learning a new language and the resulting loss in productivity that will ensue from that transition. An issue which is compounded the more developers there are on a project(most will not know CoffeeScript).

As far as I’m concerned CoffeeScript is syntactic sugar, plain and simple. Sure the JavaScript that it compiles down to is of a higher quality than most of us can write, resulting in more performant code. But I figure this gain in negligable. If it were ever to boil down to this being an issue, then I’m almost certain there are other parts of the codebase which could be given a little more care and attention(making less HTTP requests is an example) that could make up for this.

There’s also the fact that debugging will be more difficult - as any errors in the browser will correspond to the compiled version, not the CoffeeScript.

To conclude, I’m not sold on CoffeeScript just yet as I don’t think the benefits outweigh the drawbacks of introducing a new language on the stack.

Ruby Gem: Cineworld

2011-04-29T00:00:00+00:00

I released my first ruby gem, cineworld in to the wild a couple weeks ago. I’ll be honest most of the heavy lifting was done by httparty, but it was a learning experience nonetheless. Hat tip to jeweler also.

Unsurprisingly it’s a simple wrapper around the Cineworld API, which is able to pull back cinema listings, film showings and performances from Cineworld venues around the country. Check it out on github or start using it now by following the instructions below.

Installation

gem install cineworld

Examples

# Initialise with your API key
cineworld = Cineworld::API.new('API_KEY')

# Get all cinemas that have programmed performances
puts cineworld.cinemas

# Get all films that have programmed performances
puts cineworld.films

# Get all dates that have programmed performances
puts cineworld.dates

# Get all performances that are programmed for a particular cinema, film and date
puts cineworld.performances

Let me know in the comments if you find it useful, or if you want to contribute a patch, please do so on GitHub.

Why I Use Haml

2011-04-19T00:00:00+00:00

If you’d asked me six months ago my stance on alternative templating engines, you would have heard me say something along the lines of ‘I can’t see the point in them. Why do I need to learn another DSL when I’m perfectly comfortable writing ERB.’ To be fair, I bet a lot of developers still feel the same way.

If you were to ask me that question now however, my answer would be completely different. That’s right, I’m a convert. My off the cuff views on templating frameworks have turned full circle.

How did this happen? Let me explain.

About a month ago I was scanning through my feeds when I came cross yet another blog post outlining the benefits of Haml. For a long time I couldn’t quite understand why so many luminaries I admired in the Rails world were opting to only use Haml on their projects.

I decided enough was enough, and I had to give Haml a try. Though rather than starting a fresh project, I decided I wanted to give it a try out on this here blog(my test bed for most new stuff I want to try out). I thought this was an ideal approach as it’s a real world Rails app in production, so I had a benchmark of what the finished product should be like. It also meant that I could merge my Haml feature branch in to master, should I prefer it in the long run(which is what I ended up doing).

Converting Erb to Haml

Fortunately, the task of converting my ERB views to Haml was straight forward as I found a handy rake script to take care of this. I honestly thought this step would have taken longer, but I was up an running with Haml in a couple of minutes.

Erb vs Haml

Once I started digging in the code, it immediately became apparent to me as to why Haml has received so much attention over the past year or two. Simply because HAML RAWKS and here’s my attempt to explain why.

Haml is very lean and concise

So lean that most of my template files were reduced by at least a third in size. In some cases more like 50 − 60%. And the original markup was already lean to begin with. Check out my main layout file - it used to be 70 lines long, now it’s half that(I’ve taken out the includes for brevity).

%body#body{:class => body_classes}
  .container_12
    %header
      %h1
        %a{:href => root_path }><
          damiannicholson
          %span.strapline web developer // diet coke drinker // master mitigator
    #main.grid_7.alpha
      = yield
    %aside#right.grid_4.push_1.omega
      = render :partial => 'other/bio'
      = yield :sidebar_right
  %footer
    = render :partial => "streams/stream", :collection => @stream, :as => :stream
    #footer-bottom
      .container_12
        %p
          Site built and designed by Damian Nicholson. Powered by Ruby on Rails. //
          %a#scrollto{:href => "#body"} Top

Expressive and easy to digest

This is a byproduct of Haml being so lean in my opinion - it’s easy to get a good overview of a template in a glance, even if your not familiar with the project. Far easier to absorb than its ERB counterpart which can quite easily become tag soup, especially in larger files like layouts.

Less typing

Which means that you can spend more time building stuff that matters - my only niggle is that it I’m always shifting for the percentage key(would be nice if this could be mapped to something else like Slim.

Easy to spot code smell

Because Haml is concise, it’s easy to spot code that’s doing too much. Therefore moving this logic in to helpers seems to be a natural side effect of the framework itself. I can only see this as a good thing, as it makes refactoring easier.

Works even better in a team environment

Personal HTML style and formatting practices become obsolete as everyone has to adhere to the same standard. That way everyone writes code which is maintainable.

Performant

Production mode is all about performance as the outputted HTML is stripped of formatting or indenting by default. I like this.

Conclusion

Stop using the slow, repetitive, and annoying templates that you don’t even know how much you hate yet.

This was taken directly from the Haml homepage, and I can certainly relate to the message that’s being conveyed. If anything I hope this post encourages a few readers to take a look at Haml, and how it’s been a great addition to my development toolkit.

Nearest Cineworld is now on GitHub

2011-04-12T00:00:00+00:00

As promised, the codebase that powers the Nearest Cineworld is now on GitHub.

It’s a noddy little app, since most of the heavy lifting is done through a bunch of Rake tasks that are triggered via Cron to pull in new films, and performance details for each cinema.

Obviously it uses the Cineworld gem I built. In addition to that it’s the first project I’ve used HAML from the start and also the 960gs. Both are worth follow up blog posts, so I won’t go in to any more detail here. Suffice to say, if you’ve got half an hour to spare, it’s certainly worth looking in to HAML or Slim. Going back to ERB is just painful to me now.

Project: Nearest Cineworld

2011-04-07T00:00:00+00:00

As an avid cinema goer, I’m always checking the Cineworld website to see whats showing at my local venue. Because I tend not to bookmark anything locally, I get sick of having to go to their site, clicking the Cinemas tab, finding Boldon Tyne & Wear in the dropdown and so on.

Fortunately they have a nice API, around which I created a wrapper, in the form of the cineworld gem. It also turns out I like making things for the web(kind of fitting being my day job and all). So I thought this would be an ideal opportunity to throw together a quick mashup leveraging the html5 geolocation API (which is a bit flakey btw), and some CSS3 webkit transforms to build the Nearest Cineworld.

To get a feel for what is going on behind the scenes(massive props to TMDb btw), I’m going to be open-sourcing the app, so make sure to friend me on Github and keep an eye out.

Give it a try, and let me know in the comments what you think, and more importantly if it doesn’t work(which is quite likely).

Note: I haven’t done any browser testing / graceful degredation on it, and to be fair I’m not going to.

My top 10 most useful Ruby Gems

2011-03-29T11:45:55+00:00

In no particular order, here are my top 10 most useful Ruby Gems as of March 2011.

Devise

Devise is a fully featured authentication solution that works perfect straight out of the box. With it comes a whole host of niceties like password recovery, token authentication etc. Tweaking Devise isn’t a problem, as it’s a Rails engine, so everything can be overriden. If your looking to authenticate via OAuth or LDAP, there’s a good chance an extension has already been written ontop of Devise for this as well. Two thumbs up!

CanCan

If your app needs authorization(who can do what) then look no further. CanCan is both simple and flexible to work with. The fact that all permissions logic is defined in a single ability class means managing who can do what is easy. Comes with a bunch of handy helper methods for views, controllers etc so you can get really fine grained access control with little effort.

Kaminari

What’s shaping up to be the successor of Will Paginate, Kaminari is a clean solution to handle pagination. Like Devise, it’s one of those new fangled Rails 3 engines so it can be fully customised if you don’t like the markup it provides out of the box.

HAML/Slim

I’ve been working more with HAML lately, but my partner in crime Paul, picked up on Slim and it seems to have more going for it than the rest. Better performance, lean syntax so no percentage signs all over the place, string interpolation etc. If your used to ERB, it’s worth a punt giving either of these gems a try, I promise you won’t look back. Want to try it out in a project already coded up in ERB, convert your views to HAML to with this Rake task.

Carrierwave

Digging this bad boy at the moment – Carrierwave is a versatile file upload solution which keeps all of that mess logic away from your models. Support for Amazon S3 and other cloud based services is provided through a gem called Fog, so setting this up is painless.

Metasearch

Stumbled across this lil beauty when upgrading a Rails app from 2.3.10 to 3.0.5 as a replacement for Searchlogic. Bar some tweaks here and there to the views, Metasearch has been a fine stand-in. So much so I regard it as the successor to Searchlogic.

Formtastic

Building semantic forms is a doddle with Formtastic and its simple DSL. Can’t think of any projects where I don’t want to use this. Staple.

Friendly ID

If your after pretty URLs, then this is should be the gem your using. Friendly ID Provides integration with legacy Rails projects as there’s a rake task built in to bulk generate slugs. You can also roll your own slug creation method into it if you want more control.

Thinking Sphinx

We use Thinking Sphinx at CEF to index and search a catalogue of over 1,300,000 products, and it’s lightning fast. That numbers not a typo.

Settingslogic

I’ve only warmed to Settingslogic recently, but having a central place to store credentials, API keys and constants across multiple environments(development, staging, production etc) is very handy. Make sure to add this file to your .gitignore if your doing open-source work on Github and don’t want to commit your sensitive info.

Honorable Mentions

Obviously Rails is on this list too!

Are there any must have gems in your toolbox that aren’t in this list? I want to hear about them!

Current git branch in bash prompt

2011-03-22T12:59:17+00:00

Git users - do this happen to you?

An error comes in via Hoptoad and it needs to be fixed asap. I manage to track down the source, and commit a fix. I go make a coffee while Capistrano does its thing. Crisis averted.

I come back to find my Inbox full of Hoptoad exceptions. As usual I find out I broke the build and rollback to the previous, less broken version. It dawns on me that I was working in the wrong branch and pushed with it some unfinished stuff. I spend a minute or so sorting it out and redeploy.

The reason I posed my original question, is because this has happened to me on more than one occasion. Only recently have I found a quick solution that seems to be working well for me - showing the current git branch in your bash prompt.

Throw the following snippet in your bash_profile (alter the colours to suit), load up a new terminal session and change into the root of one of your projects that you manage in git.

  # Bash prompt

  function parse_git_branch {
    git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
  }

  RED="\[\033[0;31m\]"
  YELLOW="\[\033[0;33m\]"
  NO_COLOUR="\[\033[0m\]"

  PS1="$RED\$(date +%H:%M) \w$YELLOW\$(parse_git_branch)\$ $NO_COLOUR"

This tweak also means that I don’t have to keep typing git branch all over the place.

Ruby Date format gotcha

2010-12-12T22:54:59+00:00

Here’s a little gotcha that I came across when parsing Date strings for insertion into a mysql date field.

puts Date.parse('12/10/2010')
puts Date.parse('12/1/2010')

In Ruby 1.8.7 you’ll get the following output:

2010-12-10
2010-12-01

Though in Ruby 1.9.2 you’ll get this:

2010-10-12
2010-01-12

A little Ruby date format gotcha to look out for, as it took me a little time to hunt this sucker down.

Gowalla - where's my ROI?

2010-11-08T20:31:42+00:00

I first signed up to Gowalla early this year, but left my account untouched, just to see whether any of location based services would catch on.

Fast forward to August, and for some reason I felt the urge to give Gowalla a try, in the hopes that it would compliment my other social media outlets.

I opted for Gowalla over the other one out of my respect for Tim Van Damme's work. I've been a follower of Tim's work for some time now and his freelance stuff on Gowalla's website is very nice. Because of this I figured Gowalla would at least be aesthetically pleasing. A few minutes later I downloaded the iPhone app and away I went.

Over the past few months, I've checked in a whole bunch of times, added friends, earned a few badges and even added some new spots. However there's one question that I seem to be asking myself lately, now that I've used Gowalla for a considerable amount of time.

What value is Gowalla providing?

It turns out, absolutely nothing!

As far as I'm concerned, Gowalla is a one-way broadcast, with no interaction between users. There's nothing new to discover and the game mechanics are quite pathetic.

I'm close to deleting the app and leaving my account to expire, but before I do, I wanted to get a feel for other peoples opinions of Gowalla, and location based services in general. Are you finding they have any utility?

Google map api with ym4r

2010-11-02T00:00:00+00:00

In development, the application was working fine. And because the ym4r plugin has yet to implement the Google maps api version 3, I made sure to include the appropriate api key for the domain in the config.

In production however, the page was failing. Fortunately Hoptoad alerted me of the following error - Ym4r::GmPlugin::AmbiguousGMapsAPIKeyException.

It turns out that ym4r was having difficulty choosing a specific host in my gmaps_api_key.yml file, as I had multiple set up for the various domains the site is hosted on. To rectify this I ended up changing the declaration at the top of my layout file, which loads the google maps api into the page, from

<%= GMap.header %>

<%= GMap.header(:with_vml => false, :host => request.host) %>

Nginx rewrite rule

2010-11-01T00:00:00+00:00

A snippet of my nginx config file showing how to rewrite all urls from www.yourdomain.com to yourdomain.com.

Very simple, but worth knowing if opting for nginx over Apache.

server {
  listen 80;
  server_name www.damiannicholson.com;
  rewrite ^(.*) http://damiannicholson.com$1 permanent;
}


server {
  listen 80;
  server_name damiannicholson.com;
  ...
}

jQuery Ajax Queue

2010-07-07T00:00:00+00:00

The need to perform synchronous AJAX calls sometimes arises, for example if your passing tokens back and forth for security reasons. jQuery makes such calls dead easy, all you have to do is set the ‘async’ option to false when setting up the AJAX handler.

$('.click-me').bind('click', function(e){
  e.preventDefault();
  $.ajax({
    url: 'someurl',
    async: false,
    success: function(data) {
      console.log('blocking');
    }
  });
});

The problem of this approach is that the browser locks up if the server takes a long time to respond. Because this is quite likely(heavy load during peak times etc) this would be damaging to the user experience. The ideal solution would be queue up AJAX requests without the browser locking up at all.

Because Google can’t answer everything, I managed to come up with the following non blocking solution using queue, a function that’s part of jQuery core.

$('.click-me').bind('click', function(e){
  e.preventDefault();
  $(document).queue(function() {
    $.ajax({
      url: 'someurl',
      success: function(data) {
        console.log('non blocking');
        $(document).dequeue();
      }
    });
  });
});

New fangled technologies

2010-04-29T00:00:00+00:00

A rule of thumb that has worked well for me is that if I’m excited to play around with something, it probably doesn’t belong in production.

Maciej Ceglowski

Crafting Appropriate URLs with the Token API

2010-04-14T17:50:47+00:00

So Pathauto does most of the heavy lifting when it comes to making pretty URLs. There’s no questioning that this module is must for all Drupal projects. However I came across a situation recently where the out of the box functionality that Pathauto provides, just wasn’t enough.

I wanted to produce a different URL based on what taxonomy term was selected for a content type. I couldn’t find any way of achieving this in the automated alias settings, and after a brief chat about this with my colleagues at Orange Bus, I was pointed in the direction of the Token API.

A little digging later I managed to find a solution.

/**
 * Implementation of hook_token_list().
 */
function MODULENAME_token_list($type = 'all'){
  $tokens['node']['my_token'] = t('DVD or TV Series');
  return $tokens;
}

/**
 * Implementation of hook_token_values().
 */
function MODULENAME_token_values($type, $object = NULL, $options = array()) {
  $values = array();

  if ($type == 'node' && $object->type == 'CONTENT_TYPE_NAME') {
    // Do some conditional checking here
    $values['my_token'] = $node->taxonomy[1] == 2 ? 'apple' : 'orange';
  }
  return $values;
}

The first function, creates a new token. We know this because as soon as this code is inserted in our site module, the token is visible in the ‘Replacement patterns’ fieldset on the Automated Alias Settings page. I then entered this token [my_token]/[title-raw] into the URL pattern field of the content type I wanted to name. The logic behind what this token is being set as happens in the second function, hook_token_values().

What we’re doing here is checking for the presence of a particular content type before setting the token value to the result of some conditional logic. In this case we’re seeing whether the content type has a particular taxonomy term associated with it. Ultimately though this check could be based on anything, and the logic behind it could be as complex or as simple as needs be.

Pretty simple stuff ey! Anywho if you’re aware of any other ways to go about achieving this, I would love to hear it.

Drupal Clear Cache Bookmarklet

2010-04-11T00:00:00+00:00

Because I haven’t got round to playing with Drush yet, I decided to throw together a bookmarklet to clear Drupal’s cache.

You can check it out on gist or alternatively you can click and drag the following link to your toolbar.

Clear cache

Note: The snippet is dependent on using Admin Menu.

Why listen to audiobooks?

2010-03-29T00:00:00+00:00

One of my goals for 2010 is to read more books. This became a realisation when I noticed the few that lay on my nightstand had formed a nice coating of dust. The problem was that setting aside time to sit down and read had become a chore. I liken it to going to the gym. Once your there it’s great and afterward your happy you made the effort to go, but getting there really takes some motivation.

So I went on the lookout for an alternative, and it didn’t take much digging before I unearthed Audible.

Audible is the largest seller of audiobooks on the web. Unsurprisingly they’re Amazon owned, and at the time I managed to partake in a trial which entitled me to one free download.

This was ideal, because I was somewhat skeptical at the outset. The thought of some boring bloke talking for hours on end seemed too much like University.

How wrong I was.

I recommend giving audiobooks a try to anyone who travels, commutes to work or has a dog. Here’s a few reasons why:

Multitasking - Its time you’d be wasting anyway doing a menial task. Put that time to better use by enjoying a good book.
More lucrative - Studies show that information retention is higher through auditory stimulus.
No eyestrain - If you’re reading this, I assume you spend a hefty amount of time in front of a screen. Audiobooks give your eyes a chance to rest.
Relaxing - Reading a book requires active concentration. Audiobooks are passive.
Faster - On holiday I managed to listen to 3 books in 7 days. I doubts I could have read this many in such a short period of time.
Less weight - You don’t have to carry a shed load of books around with you. This is the last thing you want if you’re travelling somewhere. The Kindles form factor is one of the reasons why it has made such an impact on the market.
More engaging - In certain cases, the original author dictates the audiobook. I find that their passion and tone really shines through. If you don’t understand what I mean, I implore you to check out Gary Vaynerchuks Crush it in audiobook format. You don’t get this dynamic when reading a book in a conventional sense.

The pricing scheme behind Audible is dead simple. You pay a low monthly subscription, which entitles you to download one new audiobook a month, and you can opt out at any time. Alternatively you can pay per book, if you don’t want to go with the subscription model. Prices range between £6-10 this way.

Do you listen to any audiobooks? Can you recommend any I should be adding to my Wishlist?

Why aren't you Huffduffing yet?

2010-01-11T00:00:00+00:00

Lets face it - finding interesting and information rich podcasts in a certain niche is hard work. The web is filled with podcast directories with no easy way to sift through the noise.

Enter Huffduffer

A service built by Clearleft’s Jeremy Keith, Huffduffer is a social tagging tool for audio files. Think of it as a Delicious for MP3s, but better.

Because the service is home to audio files that interest mostly web folk(but not restricted to), it makes discovering new content in my industry a lot easier.

The icing on the cake is how Huffduffer deals with any content that gets my attention. By Huffduffing an MP3, it aggregates this into a single podcast which can be subscribed to in iTunes. Any audio file found on the web can be Huffduff’d and added to this podcast.

There’s no shortage of support either, as both the handy bookmarklet and Firefox plugin allow you to Huffduff any MP3s you may stumble across while browsing the web.

So why aren’t you Huffduffing yet?

Goals for 2010

2009-12-31T00:00:00+00:00

Because I’m feeling very optimistic about what next year has to bring, I’ve put together a list of things I want to achieve. In no particular order, they are:

Release a jQuery plugin

I started making a very basic jQuery colour swatch earlier in the year, but it went on the back-burner before I managed to perfect it. I’ll definitely be releasing this as a jQuery plugin and hopefully some other cool stuff in 2010

Do a bungee jump

This has been a life goal of mine for some time now

Complete the Great North Run

My main reason for this is to get fit and start jogging again. Every year I feel guilty that people travel from all over the globe to participate in the Great North Run, though I haven’t took part once and its on my front doorstep

Learn GWT

There’s no denying that Google make the best web applications. Since all of their products are leveraged by the Google Web Toolkit(GWT), I want to try my hand at it

Start eating fruit

This may seem surprising but before mid-2008 I ate no fruit and maybe two vegetables. In 2009 I made a conscious attempt to start eating veg and now I can’t get enough of it. Here’s to hoping my efforts in 2010 won’t be fruitless ;)

Read a new book every 2 weeks

There’s a plethora of stuff I find interesting and want to read

Blog more often

If your running a blog and not publishing at least 2 quality articles a week this is a given

Go to a web conference

Now I’ve been in the industry a year, I’d really like to attend a tech conference as I think I would benefit from the experience in many ways. Nothing as ostentatious as SXSW but maybe something like DIBI or Thinking Digital

Visit Berlin

Stooped in history and a place I don’t think you’d ever get bored of, Berlin will be a fantastic holiday destination

Pickup golf

I went to the driving range for the first time in about 5 years the other day and thoroughly enjoyed myself.

In his retirement my grandfather has really started to take golf seriously, so I reckon I’ll always have someone to play against and be able to pick up a few tips from along the way. Maybe even some old clubs if I’m lucky

Release a web application as a side-project

I know I can, I just wanna see if I can Crush It! like Gary. If all goes to plan it will probably be made using GWT

Start learning Spanish

Because no goals are ever complete without learning a new language

In true Tim Ferriss fashion, a few of these are a bit *out there, but I don’t think any are unachievable.

However small or grand, what’s your ambitions for 2010? I’d really like to hear about them :)

Internet Explorer Stylesheet Limit

2009-12-21T00:00:00+00:00

Did you know that IE ignores all style tags after the first 30 requests?

This had me scratching my head last week as I couldn’t fathom out why certain styles weren’t being applied to a lightbox in Internet Explorer, but were working just fine in all other browsers.

I figure IE inconsistencies like the double margin bug, png fix and z-index issue all to be common knowledge amongst web developers and designers. But why not this one? Surely the repercussions of this have more of a profound effect on a website?

TextMate CSS Colour Picker

2009-12-13T17:33:08+00:00

Being a heavy mac user, I’m always in my favourite text editor - TextMate. Here’s a tip for when working with colour in a CSS file. This shortcut brings up a real handy colour picker.

⌘ + ⇧ + c

Once a colour has been selected, the corresponding hex code is placed at the current cursor position. Definately one worth knowing in my opinion!

Abusing JavaScript Frameworks

2009-12-03T00:00:00+00:00

Tools like jQuery and MooTools make traversing and manipulating the DOM incredibly easy. So easy that you can get carried away with it sometimes. I have fallen down this trap more than once in my career as a web developer.

Here’s an excerpt from an article I stumbled across entitled Add Icons to External Links with Mootools and CSS.

window.addEvent('domready',function() {
 $$('a').each(function(link) {
  if(link.hostname != window.location.host) {
   link.addClass('external');
  }
 });
});

Pretty basic stuff - iterating through all the anchors on the page and adding a class if the current link goes to an external site.

Whether this is apparent to the author I don’t know, but the same effect can be achieved using only CSS.

a[href^='http://'] { /* styling */ }

Note: the solution I pointed out here isn’t anything new. CSS attribute selectors have been around since CSS2.1, and so are are supported in all major browsers bar one(no prizes for those who get this right).

Whilst this example is low impact, I’ve come to the conclusion that the underlying principle is one which creeps up on a lot designers and developers who get the JS fever.

JavaScript libraries are an easy fall back for front-end problems which can’t be solved quickly.

My personal opinion to problems I can’t solve is that the use of JavaScript libraries should be a last resort.

Sometimes people are too lazy to tackle front-end problems head on. In my experience it’s worth the effort researching a possible solution, as it makes you think about the problem and define it more clearly. Most of the time you find yourself in one of the following situations, none of which are bad.

You’ve thought about it a bit and realise it’s very similar to a problem you’ve faced in the past.
You find an alternative, in which case you’ve learnt something new.
There isn’t an alternative, in which case you’ve picked up some new knowledge along the way and realised that your solution was optimal. Pat yourself on the back.

Moving to Linode

2009-09-25T00:00:00+00:00

As part of my move back over to WordPress, I also switched hosting companies. Being a developer I wanted some hands on experience running my own server, and since the pricing for a VPS is now quite reasonable(only £5 more a month than what I was currently paying), I decided to take the plunge.

It was a toss-up between Slicehost and Linode, though I finally decided to go with the latter. I’m glad I did because it really has been a breath of fresh air! Setup was suprisingly simple, as I managed to get a LAMP stack running this instance of WordPress is under an hour.

Their prices are competitive, offering lots of storage, bandwidth and a plethora of distributions to choose from. In addition to this their administrative interface is a joy to use and any support tickets I’ve created have been answered in minutes. No regrets on my part.

So if my post has persuaded you in any way to opt for Linode and signup using my referral code, I’ll buy you a beer :)