I’m Paul Hayes

I design and build websites. I work at Last.fm and live by the sea in Brighton. I love to experiment with CSS, HTML and JavaScript. The best place to find me is on Twitter.

A light, progressive framework

At Last.fm we’ve been gradually upgrading our front-end. In this blog post I’ll outline the fundamentals of our new JavaScript framework, although the full code isn’t open sourced yet. Progressive enhancement is important, and Last.fm remains a traditional HTML website with full page reloads. Using layers of unobtrusive JavaScript we build up functionality, not because […]

Last.fm Webteam

I work at Last.fm as part of the Webteam. We’re a small team — five developers, a designer, a QA and a scrum master, and there’s always a lot to do. This is a little bit about how we get things done. We’re not perfect, and we know that, and we’re always looking to improve, but there’s a lot of things we do well, things worth sharing.

Face detection using webcams and canvas

With the getUserMedia API, a video element, a canvas element and LiuLiu’s excellent face detection algorithm, we can easily play around with webcam video data in the browser, plug-in free. To this end, I’ve created two experiments, one that places a mask over your face as you move and another that attempts to scale content based on your distance from the screen.

Use CSS transitions to link Media Queries and JavaScript

A common problem in responsive design is the linking of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be useful to use JavaScript and pull in different content at the same time, e.g. higher quality images. With CSS transitions, specifically their transitionEnd events, we can marry up our media queries and JavaScript perfectly, without resorting to window resize events.

Improving the CSS only modal

In my original post I explained how to create a CSS only modal pop-up using :target, pseudo-elements and pointer events. This had a number of caveats, any browser that didn’t support pointer events would see a non-clickable page and the forward/back controls would navigate through dialogues, which is usually undesirable. This follow-up addresses those concerns and creates a more production-ready version.