Martin Joiner's Blog

Confessions of a binge thinker
Posted on July 23, 2015

Preparations underway for Upfest ’15

Upfest-drill-540x303

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

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

FormInvalidBig

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)

<?php
// 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)

<script>
// 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 );
</script>

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.

 

 

wpid-wp-1436629797565.jpg

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

wpid-wp-1436630168761.jpg

Boom! More whitewashing than a political sex scandal!

Soka piece

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

wpid-wp-1436630320173.jpg

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

Eco_House_FrontEco_House_Back

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

Bedminster-Full-Sign

Bedmo-D-Face

 

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

jQuery-Redbull

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.

FITC-Dev-as-Artist

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

Fight-at-a-Funeral-800x600

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
Posted on October 27, 2014

Responsive re-design damages ad revenue

openmicfinder.co.uk started as a desktop-only site, then it gained a mobile version hosted on the "m." subdomain, recently I replaced both with 1 responsive version. Most interesting is the unexpected negative affect this has had on advertising revenue compared to the positive affect it has had on the Google ranking. Obviously the new responsive site scores massively higher when run through Google's PageSpeed Insight tool. I've minified all the right bits, leveraged browser caching and of course it is legible and delivers a great user experience across all screen sizes, including the tabletty ones in the middle which traditionally got left out by the mobile/desktop version split. As Google are clamping down on desktop-only sites by adding mobile-friendliness to the pagerank algorithm I had no choice but to move to a responsive redesign which, I am sad to announce, has cut my earnings by a very painful 50%!

So to summarise the key differences before and after the change:

  • Before: Most users saw a site with 3 MPU adverts. Apart from those on really small screens who got a pop-up suggestion to view the mobile site on the m. subdomain which had 1 mobile banner.
  • After the redesign: Only the biggest screens get the 3 MPUs, notebooks get a leaderboard and a banner, tablets get 2 banners, mobiles get 2 banners. On all screen sizes the ad units are now beautifully in-lined with the content and proportionately sized for the user's screen.

In essence I have followed all Google's "advice" (read pressure) and coincidentally happened to slightly increase the number of adverts that each user will see. Naturally I expected revenue to increase with usability but in fact it is much worse.

I have not discovered a definite reason why, so all my current thinking is theoretical, but it basically looks like MPUs are measured as performing better, even if the user's screen is too small to display the site and pinch-zooming is required to navigate (as would have been the case for about 50% of users before the redesign). This could be because Google Adsense charge more for showing an MPU (I have no way of looking up their prices), it could be because media agencies for some reason focus on producing the best performing artwork only for  MPUs and leaderboards and neglect the new sizes which I have introduced such as banners and mobile banners. It cannot be coincidence, the graph shows a distinct and sustaining drop immediately after the launch.

There is one other potential cause that is harder to measure. The redesign also involved me applying the latest standard of moving the Javascript to the bottom of the document, a method not supported in the Google Adsense integration documentation.  I felt this was appropriate because it enabled me to query the user's screen width to calculate which ad-units are being shown by the CSS media queries and do the responsible thing of only loading the ad units which will actually be seen by a human. A lazy developer would have stuck with Adsense's recommended method, which would have resulted in ad server requests hits for all ad units, regardless of visibility, a behavior which directly contravenes Google Adsense's terms of service.

It is sad to think that the only way I will be able to test this theory is to build a branch in my code repo that temporarily - but deliberately - breaks Adsense's rules and it's even more sad to think that the outcome might incentivise me to keep it that way permanently. Adding to my woe is the thought that an alternative outcome might be that I have to move the Adsense chunk of JS back up to the document head and block rendering until the ad server responds, a process which would feel very much like moving backwards, especially with the great adsense blackout of 2014 that brought down millions of websites.

The necessary evil of adverts just got uglier.