Journal

Rubadub have a new mobile app that delivers the RaD crew’s top vinyl recommendations (the best around) direct to your phone.

At a time when lots of vinyl releases are highly limited, this gets you early access to the latest heat before it disappears. It should also generally save untold hours browsing/searching since in their recommendations Rubadub have already done the job of separating the wheat from the chaff.

The app was developed by me and the team at Greenhill.

It was quite tricky, because aside from developing the mobile app itself there was a lot of API work needed to integrate it with Rubadub’s stock and e-commerce systems. We also built middleware specifically for machine-learning customer tastes.

The current v1 app handles the core feature of letting people listen to, save and buy records but there’s a lot of cool stuff vis-a-vis personalised messaging and taste-based recommendations on the roadmap. I’ve written about this in more detail over on Greenhill’s site.

The long-term idea is that it becomes the app equivalent of the actual record shop experience...i.e. going into Rubadub on Howard St and one of the guys/gals handing you a pile of tunes with a side of witty repartee.

If you’re a vinyl junkie like me or into electronic music in general, I recommend checking it out.

I've just finished reading Stasiland by Anna Funder, having received the recommendation from a friend.

It tells a series of extraordinary and often heart-wrenching stories from the underbelly of the former East Germany. I thought it was fantastic and highly recommend it.

My name is Laurence Hughes and I’m a perfectionist. But I’m working on it.

I’ve suffered from the painful affliction of perfectionism for as long as I can remember (I blame the mother…) and although I’m much better than I used to be, I don’t think it ever fully leaves you.

Good things undoubtedly come from sweating the details, but a perfectionist streak left unchecked can cause creative endeavours to take longer than they otherwise would, sucking out the initial spark and motivation.

A related affliction – and this particularly applies to coding – is spending so long considering the many different ways to tackle a problem that you end up at a temporary standstill… i.e. paralysis by analysis.

At work, developing software for Greenhill, the perfectionist streak is kept in check because we follow the release early, release often philosophy and our development sprints just don’t allow time for it.

Release early, release often works well when we’re building applications for clients because it leads to a tighter feedback loop between the customers, the client and ourselves; and also leads to new features being released more regularly.

On this, my own website, I’m going to take that principle further and hopefully release even earlier and more often.

So – things may look rough and ready or even broken (temporarily) when you visit this site now or in the future. And in this case I’m OK with that. This isn’t a client’s site – it’s mine. The Minimum Viable Product (or baseline before progressive enhancement) is that visitors can read and navigate the content. Right now, at re-launch, it’s as simple as that. There’s no stylesheet as yet. It was more important for me to get the ball rolling than anything else. Hopefully as you read this, if the site in a state of flux (read: looks like a riot) you’ll still be able to enjoy the content! I have plenty of nice features in the pipeline but they’ll happen bit-by-bit, one step at a time.

This site is a work in progress – a bit like myself!

I’m just back from a fantastic couple of days in Brighton attending Ampersand – The Web Typography Conference – and also a Responsive Web Typography workshop with Richard Rutter at Clearleft.

Today I and my brother Martin and two nieces Sophie and Mia, made a first visit to the Mackintosh Church in Maryhill, Glasgow.

We were there to visit Museum of the Moon, a new touring artwork by UK artist Luke Jerram. I’d first heard about this exhibition when watching the BBC documentary Wonders of the Moon.

The installation is a fusion of lunar imagery, moonlight and surround sound composition created by BAFTA and Ivor Novello award winning composer Dan Jones. Measuring seven metres in diameter, the sculpture features 120dpi detailed NASA imagery of the lunar surface. At an approximate scale of 1:500,000, each centimetre represents 5km of the moon’s surface.

We all really enjoyed seeing this striking artwork in such a beautiful setting and learning a little more about the moon, too.

John Allsopp’s classic article in which he looks at the medium of web design through the prism of the Tao Te Ching, and encourages us to embrace the web’s inherent flexibility and fluidity.

It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

It’s choc-full of quotable lines, but here are a few of my favourites:

We must “accept the ebb and flow of things.”

Everything I’ve said so far could be summarized as: make pages which are adaptable.

…and…

The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.

Great resource from CSS Grid expert Rachel Andrew, with the Patterns and Examples sections which provide quick-start grid layouts being particularly handy.

Introducing dialog: a new, easier, standards-based means of rendering a popup or modal dialogue.

The new element can be styled via CSS and comes with Javascript methods to show and close a dialog. We can also listen for and react to the show and close events.

Although currently only supported in Chrome, the Google Chrome dev team have provided a polyfill which patches support in all modern browsers and back to IE9.

Léonie Watson explains how the HTML tabindex attribute is used to manage keyboard focus. Of particular interest to me was a clarification of what tabindex="-1" does (because I always forget).

tabindex="-1"

The element becomes programmatically focusable but isn’t included in the tab order. It can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting via the focus() method.

We might use this because we want to be able to set focus to a particular element via a script. Léonie offers the example of a list of form errors.

Alternatively we might use this because we want to prevent a normally tabbable element from being tabbable. Sara Souidean uses this technique (in combination with aria-hidden=true) on e-commerce product teaser “media objects” in order to limit the number of duplicate links that keyboard users must tab through.

Tabindex on page targets to assist with keyboard focus

I’ve often seen tabindex="-1" used as a companion to the id attribute on elements of a page intended to be directly accessible via links. Examples include a main element that should be directly accessible from a “Skip to content” link, or the headings in a blog article to support sharing direct links to page sections.

Before HTML5, creating an internal “link target” required creating an anchor element that used the name attribute. In HTML5 this use of anchor was deprecated with authors instead encouraged to add the id attribute to any element they wish. The reason why developers added tabindex="-1" to their main and h2 (etc) “targets” is because some older browsers, when responding to a link to such a resource, would move visual focus to the target element (i.e. scroll to it) but not programatically set focus to it if the target element was not focusable. Including tabindex="-1" solved that problem.

Modern browsers move the focus correctly and so using tabindex for this purpose is no longer necessary.

tabindex="0"

Applying tabindex="0" to an element inserts it into the tabbing order based on its position in the source. It is not necessary to apply this to an interactive element such as a button or checkbox since they are focusable by default. You should use it sparingly (because it requires care to ensure accessibility) but you might use it on a custom element which needs to be interactive under certain circumstances such as the horizontally scrollable container in a Data Table.

tabindex="1+"

This imposes a tab order on the content that bears no resemblance to the expected tab order. It’s an antipattern. Don’t do it.

In modern front-end development, we tend to use a number of JavaScript-based build tools (such as task runners like Gulp) which have been created using Node.js and which we install using NPM. Here’s the best way I’ve found for installing and maintaining Node and NPM on a Mac.

To install and use NPM packages, we first need to install Node.js and NPM on our computer (in my case a Mac).

I’ve found that although the Node.js website includes an installer, using Homebrew is a better way to install Node and NPM on a Mac. Choosing the Homebrew route means you don’t have to install using sudo (or non-sudo but with complicated workarounds) which is great because it presents less risk of things going wrong later down the line. It also means you don’t need to mess around with your system $PATH.

Most importantly, it makes removing or updating Node really easy.

Installation

The whole process (after you have XCode and Homebrew installed) should only take you a few minutes.

Just open your Terminal app and type brew install node.

Updating Node and NPM

First, check whether or not Homebrew has the latest version of Node. In your Terminal type brew update.

Then, to Upgrade Node type: brew upgrade node.

Uninstalling Node and NPM

Uninstalling is as easy as running brew uninstall node.

Credits

This post was based on information from an excellent article on Treehouse.