Working in the open

Over the past couple of months, the Money Advice Service has taken the approach of coding in the open, by using public github repositories.

As a reasonably large organisation using open source software, I think opening up the code has big benefits. People get to poke around under the hood, and might even be able to get something from it. All the projects are licensed under MIT, so are free for everyone to use & abuse. They may even get some pull requests from anyone feeling particularly generous. Who knows.

It’s particularly pleasing to see this attitude coming from another government organisation, and well worth a look.

Saying “the geek stuff is your job” is no way to launch a startup

As developers in a time where everyone wants their own side project/startup/the next <insert latest cool company here>, this is surely our time to shine. It’s hard not to notice that developers, designers and general ‘web experts’ are becoming increasingly in demand for these sort of things.

So this is a good thing?!

As a web developer in London, frequently I will meet someone who wants their own NextBigThing startup, and a healthy chunk of geek time along with it.

As people who provide a service (make once, sell once) rather than a product (make once, sell many), the only asset we really have is our time. How we use it, charge for it, or give it away pro-bono is up to us.

This is the way of things, and I guess how things will stay. My issue though, especially after reading this ‘using words like blogsite is unacceptable journalism’ rant, is this scenario:

In a pub:

Them: Hey, so I’ve got this great idea for a music startup.
Me: Cool, I love music. Tell me about it.
Them: Ok so it’s a bit like Spotify, but does x, y and z differently. I also have these great contacts that will help it get ‘out there.’
Me: Sounds cool, let’s chat about it.

At the first meeting (…probably in a pub):

Them: So yeah, the reason I asked you is because I only want to do this with someone who’s really into music.
Me: Definitely. Any thoughts on how we should put this thing together?
Them: Ha! No idea, that’s your job. I know nothing about this sort of stuff.

…right.

Firstly, the hypocrisy of this whole scenario is a little frustrating. Mandating that you’ll only work with someone who’s into your stuff, when you’re not interested in even dipping a toe into how your potential business partner might work is… suboptimal.

Ambition, aspiration and hard work are (so I’m told) essential when it comes to building a company, but shoulder-shrugging about the very platform you’re building it on seems naive. I understand that most partnerships have complementary skillsets, but surely some overlap is important.

If you genuinely want to launch a startup that is predominantly on-the-web, then wouldn’t it be wise to know a little bit about it?

[This was cross-posted on Medium]

Animate on Arrival

A week or so ago I tweeted about a trend I’ve been referring to as ‘animate on arrival.’ Since then I’ve been seeing more and more of them, and a) wanted to write about it because I haven’t written in a while, and b) compile a list of them.

The reason it caught my attention is that without realising, it really made me focus on the content and actually read the thing. To demonstrate, I’ve listed a few decent examples below and I’m also keeping the others I find tagged on Delicious.

Apart from all being beautifully designed ― the top 3 particularly ― they were all launched within a few weeks of each other, got quite a bit of attention and of course all featured this technique.

Anyway, I really like it, and if you’re using jQuery just drop in jQuery Waypoint, add a class to trigger your CSS animations, SVG fills or whatever and everyone’s laughing.

And that’s that.

Taking the scenic route

When I was 12, I took up the drums. Like any instrument, or indeed any new skill, there’s an endless amount of seemingly boring stuff to muddle through after the initial excitement has waned. I’m talking about the vocab of learning a language, the admin of starting a business, the theory of a driving test.

In the case of the drums, amongst them were the rudiments. “You’ve got to learn your diddles, paradiddles, drags and flams to be a good drummer,” I’m told. Apart from being fun to say, these are repetitive exercises designed to improve technique. Perhaps typically of my often short-sighted ways, I saw no immediate benefit to learning them… “yeah right, as if the Metallica drummer does this rubbish.”

I took this attitude, put the headphones on and just played along to the music I wanted… the fun stuff. That’s why I took up drums in the first place. This was an ongoing theme until I discovered that the more experience I had, the more I could appreciate what other drummers were doing. I remember vividly how blown away I was by the speed and fluidity of these guys, something I hadn’t really noticed or respected before, and wanted to spend every shred of time I had learning to imitate. A few awe-inspired discussions after an impressive gig revealed their secret.

Taking a slightly more indirect route to my original goal, ‘just playing along to music,’ made it all the more achievable. Pushing myself to learn these unnecessary things only made the necessary things easier, smoother and more natural. It became addictive; the more I did the boring stuff, the more liberated playing for fun became. The flipside is that the more I understood, the more crushing revelations of how much more there was to learn showed their ugly heads. All the more to get going with, then.

Of course, hindsight makes all this seem hideously obvious now.

Back to today, in the world of the web and this experience is more relevant than ever. I write this now because Twitter’s recent changes to their API policy has resulted in three months of evening side project work being flushed down the toilet. As frustrating as this was, I tried a new approach to the way I tackled this project and just like it was with the drums, learning these new techniques only deepened my understanding of the ones I already knew. I’ll call that progress, and I’ll take it.

(Thank you, Twitter.)

Cf: paradiddles are important.

My Dad is Missing

I don’t usually use this space for personal musings, but this is an important one to me. My Dad has been missing for a month now, leaving his house in Surrey on April 2nd, and his car was found in Cornwall one week later, although it could’ve been there since the day he left.

John Barnett: Missing

Realistically, he could be anywhere by now and we know nothing of his whereabouts or intentions. Please help us spread the word and get his face known to as many people as possible by sharing the link below on your social networks of choice.

http://johnbarnettmissing.tumblr.com

Your support is greatly appreciated.

Loving the Web Inspector & Saving its Work

The past couple of months have been pretty intense and fast paced: a project that consisted of two interaction designers, two visual designers and three developers. A small and easy to overlook feature in the Web Inspector has actually had a noticeable impact in the way we’ve worked.

Saving out the CSS straight from the browser; its a bit like using a WYSIWYG editor that isn’t awful.

Its as quick as editing the styles in the Elements tab as I’m sure you do a hundred times a day already, jumping over to the Resources, selecting that stylesheet and hitting Save As in the contextual menu.

Editing styles

Saving out the styles

Its not that I don’t care about fonts and things…

We all want our work to look its best.

If you work in an agency, you probably work with designers and people who are passionate about typography, layout, colours, and so on. Really, this means you work with people who care about CSS (albeit sometimes indirectly).

I’ve worked on many projects where I’ve seen two people, typically the person in charge of typography, and a front-end developer spending hours in the Web Inspector nudging up and down the line-height values.

My experience is that any web designer worth their salt doesn’t mind taking a few hours to learn the basics of CSS. I’m not suggesting we ask everyone to know about zoom:1, but if the people who make the typography styles can actually adjust the leading, kerning and sizing styles as they will be seen, then this is a good thing.

Teaching your design team the whole ‘Right click, Inspect Element’ thing and perhaps some of the styles below, and then asking them to save out their changes and send them straight to you for merging in can save impressive amounts of time.

  • font-size
  • font-family
  • font-weight
  • letter-spacing
  • line-height
  • margin/padding
  • text-transform
  • color
  • -webkit-font-smoothing ??

Not only does it let you get on with what you’ve got to do, but it allows the people who are in charge of the typography to work on it as and when they want. And thanks to this little feature, they can send you the actual code rather than an updated PSD document.

I’ve considered separating typography styles into its own stylesheet to make the merge process a cleaner one, but I’m sure the basics are there.

I like.

Using HTML5 Canvas for Image Masks

Recently I’ve found myself referring to Jake‘s (the bastard legend that is) HTML5 Video with alpha transparency demo for reference into some pixel manipulation techniques with Canvas. Used in a slightly different context, but largely the same technique, we can use Canvas to apply a full alpha mask to any image element.

For Webkit browsers, a similar effect can be used with CSS Masks, but perhaps you need slightly wider browser support, or you want to use the masked image in Canvas somewhere else.

This function is just a base and should really be tailored to your use case, but it shows how easy it is to read the alpha data from one image, and apply it to another. Using getImageData, a 4-chunk CanvasPixelArray is returned with each pixels’ R, G, B, and A values. The result is achieved reading and ‘merging’ the RGB values from the base image, and the A values from the mask.

That’s all it does, but having it wrapped up into a single function is sometimes easier to work with (again, depending on your use case). The function creates a couple of Canvas elements on the DOM and uses them to mash the pixels together. You just pass in the base and mask images, and get back the single masked image either as a CanvasPixelArray, or as a Base-64 encoded data URL.

To give you an idea of what the images can be, here are the raw images I’m using for the utterly useless demo.

Feel free to head over to the Github repo for further docs.

Adding Selector Support to jQuery.get() to get page fragments

Just wrote a little plugin whilst working on a project because I keep finding myself using this functionality and having to write a handler in my application code. This plugin can be dropped in, just like jQuery Animate Enhanced and weighs in at less than 1KB, and it will enable you to quickly grab a partial or fragment of the AJAX endpoint.

Here’s some dummy code:

There’s not really much more I can say about this. Its unobtrusive, light weight and will simply hand over to the native jQuery.get() method if no selector is supplied.

Further Resources

Skinning the YouTube Player with HTML5 Video Support

Where we are now

So it seems that the YouTube Player API doesn’t offer any support for the HTML5 video player, while the standard Embed code does. It kinds of makes sense with the way they’ve implemented their player API as ultimately it’s just embedding a SWF with a few paramaters, but its still annoying. Its clear that the major players are working towards something, but for now we’re left with finding our own way through.

The reason its annoying is that the only way to truly skin the YouTube player (without its hideous & pointless background colour customization) is to use the Chromeless player and then overlay your own controls. This is relatively easy to do, and a there’s a reasonable demonstration on the YouTube Player Demo page.

What’s the point?

The point is so that you can have a custom YouTube player, and have it work on mobile devices without Flash. It also means that you get the benefits of YouTube’s encoding lair and that the number of ‘Views’ will be counted both on YouTube and from your site.

Making it work

As we need SWFObject on the page in order to embed the Chromeless player for our custom skin, we can use a handy method in its API:

swfobject.hasFlashPlayerVersion(versionStr) // e.g. "8.0.0"

With that, we can do a simple if statement, and hand the logic back to the standard YouTube embed code should that function return false. We do this because the basic embed code will use the HTML5 player where it can, giving us native iPad/iPhone/iWhatever support. You can grab this simply by going to YouTube, clicking Embed, and copying the code it gives you.

Either way, we palm off to YouTube at this point, allowing them to make the correct decision in a non-Flash environment, the logic behind which will probably change quite regularly.

Note: it’s not possible to skin the HTML5 Video Player on Mobile Safari, because it uses the native video player. Not a biggie though, it looks awesome.

Here’s a basic code example:

Demo

This is ugly, rudimentary and not for production. But it demonstrates the technique. Try the link below out on any browser, and on an iPad/iPhone:

http://clients.brushfiredesign.net/playground/youtube/youtube.html

You’ll see that with some basic styling, you can fairly easily create a completely custom player design using the elements on that page, which also works on your iPad.

CSS3 Text Effects with Webkit Masking

Dead easy but cute little technique this one. I’m working with a design that had an overlay effect over some of the text based headings.

The way I’ve seen it done before (and I have in fact done it myself) is to simply stick a PNG with alpha transparency on top of the text in question. Granted, this technique does work but it felt like a bit of a cludge. It also means you can’t highlight the text underneath it. Annoying and bad for usability.

I then cast my mind back to the stunning Kaleidoscope App website. Using a Webkit browser, look closely at the colour wheel triangle thingy and you’ll notice it’s spinning. Dig deeper in the CSS and you’ll see they’re using a really nice masking technique to achieve that.

Simple enough, but I wanted this effect to appear on all browsers rather than just Webkit.

Detecting Webkit Masking Support

Feature detection is the best way to implement this technique. Rather than just seeing if “browser = Chrome or Webkit”, you can either use the Modernizr library to do this for you, or simply grab the following line of Javascript and insert it above your CSS.

document.documentElement.className = document.documentElement.style.WebkitMask!==undefined?"masking":"nomasking";

That will add a class of ‘masking’ to your HTML tag should the feature be supported. And, by including this pre-CSS, you’ll get no flickering of content. You can then just add the .masking prefix to styles that use it.

Creating the Mask

Basic Photoshop skills should be enough to create pretty much any type of mask. The key point to remember is that they’re unlike Photoshop masks in that they rely on Alpha transparency rather than black or white.

Webkit masks require a PNG with an alpha channel, i.e. a 24 or 32 bit PNG.

Areas of the mask with 0% opacity will hide that section of the element the mask is being applied to. Areas with 100% will render as usual. Then, as you’d expect, you can use anything in-between for partial transparency.

Here’s the mask I’m using. I’ve dropped it in a green container so you can see where the transparency lies.

Sample Webkit Mask with PNG-24

The CSS

This is the easy bit. For non ‘.masking’ browsers, implement the same ‘overlay’ technique as you’ve no doubt done before.

For browsers that do support Webkit Masking, just override the element (for example, an h1 tag) to set it.

.masking h1 { -webkit-mask-image: url(../img/bg/text-effect-mask.png); }

You can then play with the positioning and things should you need to;

  • -webkit-mask-position-y
  • -webkit-mask-position-x
  • -webkit-mask-repeat

Here’s a screenshot of the output.

A nice, selectable, accessible, progressively enhanced text overlay effect.

Simple right?

This is a rudimentary use of the Webkit mask. As you can see from the Made by Sofa guys (creators of Kaleidoscope App), you can create some amazing effects and choose either to implement a technique for non-supporting browsers, or just degrade gracefully to a static version, as they’ve done.

You can also use them on pretty much any DOM element there is, as the comments on the Surfin’ Safari docs explain.

Web Developer