Martin Joiner's Blog

Confessions of a binge thinker
Posted on August 29, 2015

HTML5 Autofocus attribute is sweet

Inspired by Steve Krug, I try to only use examples from websites that are generally very good, but could be improved in specific areas.


My preferred property search website — since Zoopla hid the View results on map feature god-knows-where — is RightMove (screenshot above). They have used a UX speed bump (not quite a roadblock) to make on-boarding a smooth and focused experience. Using contrasting size and a healthy dollop of whitespace, they draw the user's attention to 1 task and promote the main function of the site above all.

After landing on the homepage, all the user has to do is focus-in on the big input box by clicking (or tapping), enter some geographical keywords and finally hit the "For sale" or "To rent" button. I love this 3 step no-brainer process, great work RightMove!  But what if desktop users didn't even have to do the first click to set the text cursor flashing?

One of my favorite new HTML5 features is the autofocus attribute. It is an empty attribute which basically means it doesn't have to be something equals something (this="that"), it just has to exist as a single word on the tag as follows...

    <input type="text" autofocus>

If RightMove added the autofocus keyword to the big input box it would make it focused as soon as the page loads (at least on non-touch-screen devices). Furthermore, the non-intrusive animation of the flashing text cursor would be an enticing draw, subtly inviting the user to start typing and helping promote the theme. No functionality would be lost by adding this and backwards compatibility wouldn't be affected. It's win win!

We (web developers) regularly poke our heads through the HTML5 looking glass to experience a crazy whirlwind adventure of fantastical features. We spend an hour getting drunk on potential only to be violently spat back out into the cold lonely reality of backwards compatibility where HTML5 is not fully supported. But that doesn't mean we shouldn't start adding them as a form of progressive enhancement and earn some bonus brownie points for over-delivering!

Filed under: The Web Tagged as: No Comments
Posted on July 23, 2015

Preparations underway for Upfest ’15


Over 500 boards get setup by the volunteers for Upfest each year, ready to be painted. Right now, Bedminster has more battleship grey than the guts of a Ginsters pasty!

Filed under: Art Tagged as: No Comments
Posted on July 20, 2015

:invalid pseudo class works on form elements too!

Discovered this by accident and there seems to be very little coverage in the blogosphere so I thought I'd share.

You're adding HTML5 validation on your input boxes now, right? And you're using styling to give the user helpful visual feedback, yeah? But did you know that when an input box inside a form is invalid, the parent form also has the :invalid pseudo class? This means we can now style any elements that are a sibling of the invalid input, amazing!

Here's an example where we make the submit button look disabled when an input field is invalid...

<!DOCTYPE html>
    <style type="text/css">
            padding: 0.6em;
            cursor: pointer;
        form:invalid input[type=submit]{
            cursor: default;
            opacity: 0.5;
            border: 1px solid #666;
            border-color: red;
        <input type="text" name="username" pattern="[A-9a-z0-9 ]*" required>
        <input type="submit">

The result is conventional and familiar visual feedback that suggests the form is being disabled/enabled....


Obviously the button is not actually having it's disabled attribute changed, for that you would need some Javascript. But this is a pretty neat, low-level CSS option and remembering that the :invalid pseudo class operates at the parent form level might come in pretty handy.

Filed under: The Web Tagged as: No Comments
Posted on July 13, 2015

What is the skv prefix and when to use it

I came up with the skv prefix sometime during 2014 and it has been readily adopted by the team so I wanted to share it with you. Our team uses a rough approximation of Hungarian notation as our naming convention and adding skv was definitely our best mod to the popular standard.

skv stands for "Structure of Key-Pair Values" and is used for objects in Javascript, associative arrays in PHP and structs in ColdFusion that do not have any methods and can therefore be converted to a JSON string without losing anything. Distinctly different to objects (that we prefix with obj) which have methods which would be lost during serialisation/encoding to a string notation.

(Note: The skv prefix is not used for standard numeric arrays which are prefixed with arr)

Example time...

PHP (some server-side page that returns plain-text JSON)

// Set the content type for good practice
header('Content-Type: application/json');

// Create a variable with some information about a monkey
$skvMonkey = array(
    "strName" => "Martin",
    "numBananas" => 7

// This feels right! We're not destroying anything
echo json_encode( $skvMonkey, true );

Javascript (in browser)

// AJAX call to PHP page returns object
var skvMonkey = ajaxCallToPHP();

// Hazaar! This variable has everything it did when it was server-side and I know it has no (non-native) methods because it is not prefixed with obj!
console.log( skvMonkey.strName );

We tend to pass a lot of complicated datasets back and forth between Javascript and server-side pages (or caches). Serialising these bundles of information as JSON allows us to strongly bind the variable name and the variable value, making our code more robust and quicker to debug. However, I was frustrated by the lack of distinction between an object that could be safely JSONified and those that could not.

Objects (or components) are like high-tech vending machines full of colourful sweets. Their methods are the coin-operated interfaces that instruct mechanical arms to pick out exactly the right chocolate bar, deliver it to the easily accessible letterbox and sort the remaining products. Pushing something as beautiful as that into a JSON converter feels like bribing a thug to smash the glass with his fist, tip all the sweets into a sack and burn the machine. Using the skv prefix is basically a green light to a developer to say "this is just a box of sweets, you can be rough with it, I've packed it really well".

Filed under: The Web Tagged as: No Comments
Posted on July 11, 2015

Mulshing boards in prep for Upfest ’15

Mulshing - [present tense version of verb: mulsh] - Colloquialism used among the urban paint fraternity to describe the process of preparing a surface for painting by making it a single colour, usually with the use of household emulsion paint.




52 of the small 6x4 boards, still sporting the slightly ropey can skills of last year's kids section, laid out in the yard.


Boom! More whitewashing than a political sex scandal!

Soka piece

Soka's excellent hipster Spiderman piece has had it's time in the limelight.


Bosh! Gone, hidden behind a satisfying sea of grey.

The 93 boards that we did today takes us to a total of 400 meaning we only have about 150 left to do before the big day. I am just 1 in a whole team of volunteers, beavering away to make it happen, but we could always use an extra pair of hands if you are near Bristol and willing to lend an hour of your day.

Exactly 2 weeks 'til Upfest 2015!

Filed under: Art Tagged as: No Comments
Posted on July 10, 2015

Eco self-build somewhere near Bristol


My long-term plan of self-building my very own eco home will take a lot of time and planning. Using Google Sketchup I have made some 3D renders of the kind of structure I want to build based on my personally preferred aesthetic and building methods. These basic renders are in no way finalised plans but more to serve as a jumping off point when holding discussions with the many experts who I will have to consult on my journey.

Filed under: Eco Tagged as: No Comments
Posted on June 14, 2015

Helped paint the Bedminster sign




The "Make Sunday Special" treatment came to North Street in Bedminster today.  As their contribution, Upfest quickly built a BEDMINSTER sign in 7ft high letters and gethered a bunch of artists - me included.  I painted the letter D, the general consensus among the local kids was that my piece was "The Kissing Giant".

Filed under: Art Tagged as: No Comments
Posted on March 8, 2015

jQuery UK Oxford 2015


My colleagues at Carmen Data and I traveled to Oxford for the annual 1-day tech conference which is aimed mainly at front-end developer. Yes there were fridges full of free Redbull scattered around but other than that, here are some of my highlights from the talks.


Alice Bartlett

One of the highlights and certainly most profound - because of it's emotional impact - was Alice Bartlett's (@alicebarlett) talk during which she showed a video from a user testing session with an elderly chap who was struggling to use a select box during account registration. The video highlighted how foreign some of the behaviour of this classic element is to a non-web-native. Alice introduced the video by explaining that the people who really need (she emphasised that it is genuine need) Government Digital Services are the elderly people living on their own or care-workers whose only free time may be a bleary-eyed 2am session after a 14 hour shift. The heart-wrenching guilt that everyone in the audience must have shared when witnessing how shafted some users are by our use of a select elements was contrasted against the piece of video that immediately followed, whereby the same man had absolutely no trouble using a text input (because of it's familiarity to real-world paper forms). The conclusion was to embrace the combo box which gives the drop-down functionality that some people enjoy, but also the free-text input that others need. Of course this required more code and possible back-end validation but this is OK because we, as web developers, should do the hard work so the user doesn't have to.


Addy Osmani

Addy Osmani's presentation was a key-note speech covering the latest features added to Chrome Dev tools. I say new features but about half of them would be more accurately described as 'ported' features because they have already existed in previously available plugins or inside the dev tools of Chrome's competitor browsers. I personally was getting fired up by tiny little features like the "Preserve Log" checkbox that will be incredibly useful for measuring performance over a full user session, even though the crowd reacted with silence to this feature. A bizarre experience on the other hand, was hearing the crowd around me go wild when he demo'd the new interactive 3D DOM viewer, which is an exact copy of the one that has been built into FireFox since 2012. Hearing the audience react with awe to something that they could have discovered 36 months ago with just a little exploring gave me the same shudder that I get watching a blinkered fanboy, desperately trying to gain the approval of a stranger by showing off their shiny new Apple product, yet when questioned, failing to provide examples of how they may actually apply the new features in their everyday lives. But that was just one small moment that stuck with me, on the whole it was a slick professional talk full of useful tips that shows Google Chrome Dev tools continue to blaze the trail for the industry, even if they do (and they clearly do) use the "Most Downloaded Extensions" statistics as inspiration when cooking up features 🙂


Andy Hume

Andy made me understand something which I am angry at myself to have not worked out on my own. We don't provide non-Javascript fallbacks (graceful degradation) for users who might have a browser that doesn't support Javascript. Of course we don't, when was the last time you came across a browser that didn't?! We provide them because .js script files are downloaded as a separate asset and if your train goes under a tunnel at the wrong moment then you, with your box-fresh iPhone 6, are now using a non-Javascript browser. *slaps head* this makes so much sense, think about progressive enhancement at waterfall level, not just browser evolution level.  I feel inspired an angry at the same time, is there an emotion for that? There should be!


Mark Otto @mdo

Mark Otto is the bloke who wrote a lot of Bootstrap and hearing him speak about CSS was refreshing because he justified, in few words, things that I have felt at an instinctual level for a while but have struggled to explain why. For example, why I didn't share my colleagues enthusiasm for the use of pre-processors, despite all the tech-bullies at the hack nights menacingly waving their clenched fists at me when they discover I'm not using one. Why I like to put things in a certain order and how Mark has formalised the same preference to become a team standard. Why I make class names a little longer, despite the optimisation nazis forcing propaganda posters in my face with a sad illustration of a poor user, waiting for their dialup connection to fetch those extra 4 characters that make the difference between my colleagues immediately understanding my code, or having no frickin' clue what "bhvdi" might stand for!


All in all, my experience of jQuery UK can be summarised as making me feel senior.  I understood the vast majority of what was said, and I disagreed with a healthy number of points based on my experience. Hearing very important people in the tech industry speak to an audience of 800 and introduce concepts which I have conceived independently, through my own practice, was validating to say the least.

Filed under: The Web Tagged as: No Comments
Posted on February 28, 2015

FITC Amsterdam 2015

Topping the list when sorted by coolness, FITC in Amsterdam had a slick and calm feel with a high calibre of speakers from a huge variation of backgrounds.

The general mood was a welcome shift from the types of conferences I normally attend which tend to focus on the web and the tech that delivers it. FITC stands for Future, Innovation, Technology and Cool shit and as such I found myself talking less about Javascript and more of the philosophy and psychology surrounding what we do. Discussing areas like the product delivery process in a creative industry and the client-designer relationship. How our modern education system conditions some strange quirks in the human mind. How art can drive development and development can be art.


I returned from Amsterdam feeling inspired to dig out and dust off some of the little art projects that I had begun building on various late-night Saturday coding sessions, but had let slip into non use by a sense of priority for the client work. Seeing the fantastic reactions that digital projects which were done not to deliver a monetised product to users, but just because the idea behind them can only be done with that tech, is wonderful.

Standing with one foot in the hardcore tech camp, and the other firmly rooted in the art world, I can sometimes feel an outsider to both, but at FITC I felt among friends.

Filed under: The Web Tagged as: No Comments
Posted on January 31, 2015

Sketch: A fight at a funeral


In my happy place, with a pint and sketch book. Spent the afternoon in The Cornubia with Ashley. A bloke at the bar challenged us to draw a fight at a funeral and we happily obliged. We concluded the most likely justification for such a ruckus would be that a member of the procession has given the deceased a "flock of seagulls" hair style and that the most likely suspect would be the master of ceremonies himself.

Filed under: Art Tagged as: No Comments