Reading List

Reading List

Reading List

Reading List

bluegreenkiss (remix)

Here’s a remix of my song bluegreenkiss (rough mix) by Tony “Shez” Sherrard of the band Silverlake (also my old school friend and bassist with my old band, The Lucies).

He’s added bass, replaced my guide drums with something similarly simple but less plodding, and done post-production.

What do you think? Next, we’ll be working on a 3-chord noisy song called “Imprecise and Infrared” that I wrote for The Lucies but we never played it.

Look at the way she
kisses me gently.
Look how this simple act brings
my brain ease;
She’ll never try to please;
She needs the world to see she is free.
I’m proud but I’m sad for this too.

Look at the way she
walks through the forest.
Look how the leaf-light
glows her old white blouse green.
She aways dances and dreams;
she sometimes says what she means;
I hope I can do this too.

Look at the way she
swims in the ocean.
Look how the rivers’ swell
flows into her.
For all her wrecks and her tides
She’s in love with her life
I hope she can love me too.

But look at the way she’s
kissing me gently
now.

Words and music © Bruce Lawson 2015

Reading List

Well, spank me with a pilchard, dress me up as an otter and call me “Madam Sugartits” – here’s this week’s reading list!

I’m off for a holiday in Cambodia (it’s tough, kid, but it’s life) for 2 weeks. I won’t be taking nude photos, don’t worry. See you afterwards. xxx

bluegreenkiss (song)

Here’s my oldest newly-recorded song. I sat on it for two decades because for years I wasn’t sure if I’d accidentally stolen the melody – the previous song I’d presented to the band turned out to be mostly The Beatles’ “All My Loving”, so I was pretty paranoid about anything I wrote outside my usual “one two three four!” punky genre. For ages I played it on my acoustic guitar to girlfriends, other musicians and the postman (once) to ask them if they recognised it.

The phrase “Look at the way she..” was what I found myself singing when I first wrote it, but the lyrics were written much later in Turkey (where I lived in a fisherman’s cottage near the sea) and Nepal (where I went horse-riding up a mountain, which had trees though it wasn’t a forest). Hence the hippie/huggy lyrics. The line “She sometimes says what she means / I hope I can do this too” is because I tweaked the words to make absolutely sure that the person they’re written for never realises it’s about her. Self-expression’s one thing, but actually telling someone what you think of them is ludicrously risky.

Anyone who knows how to mix songs and wants to have a go would be doing me a massive favour. I can send you the Audacity project.

Anyway, proper punk rock service will be resumed as soon as possible.

Look at the way she
kisses me gently.
Look how this simple act brings
my brain ease;
She’ll never try to please;
She needs the world to see she is free.
I’m proud but I’m sad for this too.

Look at the way she
walks through the forest.
Look how the leaf-light
glows her old white blouse green.
She aways dances and dreams;
she sometimes says what she means;
I hope I can do this too.

Look at the way she
swims in the ocean.
Look how the rivers’ swell
flows into her.
For all her wrecks and her tides
She’s in love with her life
I hope she can love me too.

But look at the way she’s
kissing me gently
now.

Words and music © Bruce Lawson 2015

Reading List

Why we can’t do real responsive images with CSS or JavaScript

I’m writing a talk on <picture>, srcset and friends for Awwwards Conference in Barcelona next month (yes, I know this is unparalleled early preparation; I’m heading for the sunshine for 2 weeks soon). I decided that, before I get on to the main subject, I should address the question “why all this complex new markup? Why not just use CSS or JavaScript?” because it’s invariably asked.

But you might not be able to see me in Catalonia to find out, because tickets are nearly sold out. So here’s the answer.

All browsers have what’s called a preloader. As the browser is munching through the HTML – before it’s even started to construct a DOM – the preloader sees “<img>” and rushes off to fetch the resource before it’s even thought about speculating about considering doing anything about the CSS or JavaScript.

It does this to get images as fast as it can – after all, they can often be pretty big and are one of the things that boosts the perceived performance of a page dramatically. Steve Souders, head honcho of Velocity Conference, bloke who knows loads about site speed, and renowned poet called the preloader “the single biggest performance improvement browsers have ever made” in his sonnet “Shall I compare thee to a summer’s preloader, bae?”

So, by the time the browser gets around to dealing with CSS or script, it may very well have already grabbed an image – or at least downloaded a fair bit. If you try

<img id=thingy src=picture.png alt="a mankini">
…
@media all and (max-width:600px) {
 #thingy {content: url(medium-res.png);}
 }

@media all and (max-width:320px) {
 #thingy {content: url(low-res.png);}
 }

you’ll find the correct image is selected by the media query (assuming your browser supports content on simple selectors without :before or :after pseudo-elements) but you’ll find that the preloader has downloaded the resource pointed to by the <img src> and then the one that the CSS replaces it with is downloaded, too. So you get a double download which is not what you want at all.

Alternatively, you could have an <img> with no src attribute, and then add it in with JavaScript – but then you’re fetching the resource until much later, delaying the loading of the page. Because your browser won’t know the width and height of the image that the JS will select, it can’t leave room for it when laying out the page so you may find that your page gets reflowed and, if the user was reading some textual content, she might find the stuff she’s reading scrolls off the page.

So the only way to beat the preloader is to put all the potential image sources in the HTML and give the browser all the information it needs to make the selection there, too. That’s what the w and x descriptors in srcset are for, and the sizes attribute.

Of course, I’ll explain it with far more panache and mohawk in Barcelona. So why not come along? Go on, you know you want to and I really want to see you again. Because I love you.

Reading List