Archive: March, 2015

188

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am              
4am        
8am                      
12pm                                  
4pm                                              
8pm                                            

Tuesday, March 31st, 2015

100 words 009

Last year at An Event Apart in Seattle I was giving a talk about long-term thinking on the web, using The Session as a case study. As a cheap gimmick, I played a tune on my mandolin during the talk.

Chris Coyier was also speaking. He plays mandolin too. Barry—one of the conference attendees—also plays mandolin. So we sat outside, passing my mandolin around.

Barry is back this year and he brought his mandolin with him. I showed him an Irish jig. He showed me a bluegrass tune. Together we played a reel that crossed the Atlantic ocean.

Had a lovely time swapping tunes with @TheBarryTone, fellow mandolin player at @AnEventApart Seattle.

Checking out of the lovely Edgewater hotel.

Checking out of the lovely Edgewater hotel.

Jen walks like an Egyptian.

Jen walks like an Egyptian.

Thoroughly enjoyed being the warm-up act for @JenSimmons at @AnEventApart Seattle.

I am but a John The Baptist to her Jesus Christ.

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

About to open up day two of @AnEventApart Seattle where I will be reiterating everything in http://alistapart.com/article/let-links-be-links

Hey @Jina, look who I’m hanging out with!

Hey @Jina, look who I’m hanging out with!

Getting worried that L. Ron @Monteiro is going to have the whole audience go Clear by the time he finishes his spiel at An Event Apart.

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Monday, March 30th, 2015

 @zeldman, tap-dancing on stage at An Event Apart Seattle.

@zeldman, tap-dancing on stage at An Event Apart Seattle.

Jeremy Keith @ The Digital Pond - Responsive Design - YouTube

Here’s a talk give at a community event in London last summer.

100 words 008

Some sea lions bellow,
Some sleep,
Some crawl on top of others
As they crowd onto a raft
At the Astoria, Oregon
Municipal mooring docks.

What a beautiful poem! I found it captioning an image on the front page of The Seattle Times newspaper which was left outside my hotel room. The image illustrates a story about sea lions; how the sea lion population is doing great, and how that might spell trouble for the salmon population.

On a March morning,
Federal, state and university biologists
Clear space at the Astoria dock
For a day of research.

Animal news poetry.

Cross-stitch.

Cross-stitch.

Nerd party!

Nerd party!

Jessica.

Jessica.

Seattle.

Seattle.

Want to help prevent online bullying? Comment on Facebook

Proving something that Derek Powazek told us 15 years ago:

When we clearly show what is and is not acceptable, the tone does change. People who want to share thoughtful comments start to feel that theirs are welcome, and people who want to spew hatred start to realize theirs are not.

D’hear that, Reddit?

Sunday, March 29th, 2015

Codebar Brighton from Matchbox HQ - Matchbox Mobile

Jo writes about hosting Codebar Brighton. I share her enthusiasm—it feels like a great honour to be able to host such a great community event.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

100 words 007

I’m staying at the Edgewater hotel in Seattle, an unusual structure that is literally on the water, giving it a nautical atmosphere. The views out on the Puget Sound are quite lovely.

Inside, the hotel has more of a Twin Peaks vibe. It feels less like a hotel and more like a lodge.

The hotel is clearly proud of the many rock stars it has hosted over the years. As you settle into your cosy room, you can imagine what it was like when the Beatles were fishing from their balcony, or Led Zeppelin were doing unspeakable things with mudsharks.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Native Scrolling by Anselm Hannemann

This gets nothing but agreement from me:

For altering the default scroll speed I honestly couldn’t come up with a valid use-case.

My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.

Wheel on stone.

Wheel on stone.

Obligatory space needle picture.

Obligatory space needle picture.

I squish your rockety head.

I squish your rockety head.

Saturday, March 28th, 2015

100 words 006

We spent the day yesterday wandering around the Fremont neighbourhood of Seattle. Fremont is home to many sculptural landmarks. There’s a statue of Vladimir Ilyich Lenin, a rocket ship, an apatosaur topiary, and of course, the Fremont troll.

Now that I’ve seen the Fremont troll, I can confirm that it is real. Which is a bit of shame. Just think about it: how awesome would it be if it didn’t actually exist but everyone in Seattle played along, encouraging tourists to check out the Fremont troll? Then when you got there, you found out that you had, yes, been trolled.

When trolls attack!

When trolls attack!

Friday, March 27th, 2015

Bucky golf ball repurposed as a Bucky golf dome.

Bucky golf ball repurposed as a Bucky golf dome.

100 words 005

I enjoy a good time travel yarn. Two of the most enjoyable temporal tales of recent years have been Rian Johnson’s film Looper and William Gibson’s book The Peripheral.

Mind you, the internal time travel rules of Looper are all over the place, whereas The Peripheral is wonderfully consistent.

Both share an interesting commonality in their settings. They are set in the future and …the future: two different time periods but neither of them are the present. Both works also share the premise that the more technologically advanced future would inevitably exploit the time period further down the light cone.

Natasha Lampard, Friday, 27 March 2015

A long-zoom look at life, work, and success.

I’m not usually a fan of portmanteau neologisms, but I really like Tash’s coining of the word longtrepreneur.

Fried chicken and pickled okra.

Fried chicken and pickled okra.

Oyster.

Oyster.

isolani - Web Standards: Flash’s slide into irrelevance

Mike runs through the history of Flash. Those who forget the history of the web are doomed to repeat it:

The struggle now seems to be turning to native apps versus non-native apps on the mobile platform. It is similar to Flash’s original battle ground: the argument that the Web technology stack is not suitable for building applications with a polished user-experience.

Tweets out of Context

Primer, but Twitter.

Thursday, March 26th, 2015

Diner combo.

Diner combo.

On the ferry to Bainbridge Island.

On the ferry to Bainbridge Island.

Seattle.

Seattle.

Jessica in Seattle.

Jessica in Seattle.

Waiting for the ferry to Bainbridge Island.

Waiting for the ferry to Bainbridge Island.

Placid.

Placid.

100 words 004

I’m staying with my brother-in-law Jeb in Seattle’s Green Lake neighbourhood. Right around the corner from his house, there’s a great little sandwich place called The Butcher & The Baker.

Yes, the mandatory ampersand is there setting off all the hipster alarm bells but, y’know, I’ve been thinking… if the label “hipster” means good food, good coffee, good beer, good music, or good bicycles, well I’m okay with that.

In the case of The Butcher & The Baker, the food is very good indeed. They could probably slap adjectives like “hand-crafted” or “artisinal” on everything they produce.

They make delicious sandwiches.

Hipsters.

Rothkode

Mark Rothko paintings recreated with CSS gradients.

Wednesday, March 25th, 2015

Make web pages.

Not too much.

Mostly HTML.

Sass, jQuery, Grunt, Yeoman …all tools to help you write HTML, CSS, and JavaScript.

Tools change. The HTML, CSS, and JavaScript endures.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

The Brighton Makerlab - where technology meets awesome! by Simon Riley — Kickstarter

Still a few days left to back this great project for Brighton:

Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.

100 words 003

I measure transatlantic flights in movies watched. Yesterday’s journey from London to Seattle was four movies long.

  1. The Imitation Game: a necessarily fictionalised account of Turing’s life (one of the gotchas about top-secret work is that it’s, well, secret). But couldn’t Tommy Flowers have been given at least a walk-on part?
  2. Fury: Brad Pitt plays Lee Marvin in a war story told through the eyes of the naive rookie as seen in The Big Red One and Saving Private Ryan.
  3. Hunger Games: Mockingjay: Part One: The Hungering.
  4. Paddington: just right for the end of a flight.

Gridset · Responsive Report 2014

Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.

What Should I Design? - the design prompt generator

Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.

Lola’s awake now.

Lola’s awake now.

Sleepy Lola.

Sleepy Lola.

Tuesday, March 24th, 2015

Airport.

Airport.

100 words 002

I want to know how it feels to write every day. But it’s not really just about writing. It’s about writing within constraints.

Design requires constraints. It’s a tired old cliché, but there’s something to it. Without constraints, is design even possible? Or is it then art? (not there’s anything wrong with art; I’m just trying to differentiate it from design: notice I didn’t say “just” art.)

The 140 characters of a tweet. The column inches of a newspaper story. The width of a button on an interface. These are all constraints.

It’s not just about writing. It’s about editing.

Travelling.

Travelling.

Heading off to Seattle for a week.

Seattleites, let me know of any fun events going on.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Culture Ship Randomizer · A gravitas free zone.

For when you just have to name something after a Culture General Systems Vehicle …or maybe a General Contact Unit.

Someone tell Elon.

» Responsive Field Day Portland! Cloud Four Blog

Aw, this is so sweet! Jason describes getting inspired by Responsive Day Out to create Responsive Field Day:

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton.

I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.

Responsive Field Day

Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.

Monday, March 23rd, 2015

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

100 days: Archive

You might want to keep an eye on what the Clearlefties are doing here for the next hundred days.

One down, 99 to go.

Responsive News — We’ve made it.

The responsive BBC News site is live! Hurrah!

Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.

Blinky says sprint!

Blinky says sprint!

100 words 001

When it comes to writing, there are no shortcuts. Either you’re moving your fingers and putting words onto a screen (or page), or you’re not. Sure, you can lay the groundwork, do your research, and read about what it takes to write, but ultimately you’ve got to make your hands tap those keys (or move that pen).

Hunter S. Thompson wanted to know how it felt to write the great American novel. So he sat in front of his typewriter and typed out The Great Gatsby, word for word.

I want to know how it feels to write every day.

Admiring @lottejackson’s awesome nail art.

Admiring @lottejackson’s awesome nail art.

Sunday, March 22nd, 2015

Chicken and morcilla.

Chicken and morcilla.

Codebar Brighton

There’s been a whole series of events going on in Brighton this month under the banner of Spring Forward:

Spring Forward is a month-long celebration of the role of women in digital culture and runs throughout March in parallel with Women’s History Month.

Luckily for me, a lot of the events have been happening at 68 Middle Street—home of Clearleft—so I’ve been taking full advantage of as many as I can (also, if I go to an event that means that Tessa doesn’t have to stick around every night of the week to lock up afterwards). Charlotte has been going to even more.

I managed to get to Tech In Ten—run by She Codes Brighton—which was great, but I missed out on Pixels and Prosecco by Press Fire To Win which sounded like it was a lot of fun. And there are more events still to come, like She Says and Ladies That UX.

What’s great about Spring Forward events like She Codes, 300 Seconds, She Says, and Ladies That UX is that they aren’t one-offs; they’re happening all-year round, along with other great regular Brighton events like Async and UX Brighton.

And then there’s Codebar. I had heard about Codebar before, but Spring Forward was the first chance I had to get stuck in—it was being hosted at 68 Middle Street, so I said I’d stick around to lock up afterwards. I’m so glad I did. It was great!

In a nutshell, Codebar offers a chance for people who are under-represented in the world of programming and technology to get some free training by pairing them with tutors who volunteer their time. I offered to help out anyone who was learning HTML and CSS (after tamping down the inevitable inner voice of imposter syndrome that was asking “who are you to be teaching anyone anything?”).

I really, really enjoyed it. It was so nice to meet people from outside the world of web design and development. It was also a terrific reminder that the act of making websites is something that everybody should be able to participate in. This is for everyone.

Codebar Brighton takes place once a week, changing up the venue on rotation. As you can imagine, it takes a lot of work to maintain that momentum. It’s thanks to the tireless efforts of the seemingl indefatigable Ruby programmers Rosa and Dot that it’s such a great success. I am in their debt.

Moules.

Moules.

Saturday, March 21st, 2015

Greek sausages.

Greek sausages.

Flickr: Official SpaceX Photos’ Photostream

SpaceX has a Flickr account, and you have permission to use these photos.

Zen and the Art of Wearable Markup

Jeffrey muses on progressive enhancement and future-friendliness.

Friday, March 20th, 2015

Rack of lamb.

Rack of lamb.

“The young in one another’s arms, birds in the trees—those dying generations—at their song, the salmon‐falls, the tempura-crowded seas…”

Today I had to set @PaulRobertLloyd straight: “tempura” is not a species of fish.

To be fair, it does sound like a kind of fish.

My other head—my website—is full of stuff that is valueless to others, but valuable to me …far too valuable to entrust to a 3rd party.

My website is my other head. It’s where I store some memories, fragments and half-formed notes-to-self.

Ribs’n’chips.

Ribs’n’chips.

James, Andy, Paul.

James, Andy, Paul.

Having a bacon sarnie for breakfast.

Having a bacon sarnie for breakfast.

Flat white.

Flat white.

Thursday, March 19th, 2015

Listening.

Listening.

Having a curry for lunch.

Having a curry for lunch.

Showing people around @Clearleft Towers.

Showing people around @Clearleft Towers.

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Wednesday, March 18th, 2015

Only now, on the 50th anniversary of his spacewalk, do I realise that that’s Alexey Leonov on the cover of the Afghan Whigs’ album 1965.

Tasting wines.

Tasting wines.

Just got a notification that I could look at my first picture on https://ohyeah.spum.org and my first thought was literally “oh yeah, that!”

Tuesday, March 17th, 2015

Share podcast episodes from iOS podcatchers directly to Huffduffer by Jan Beck

A walkthrough on using the iOS app Workflow to huffduff audio files from just about any app.

Saint Patrick sauce.

Saint Patrick sauce.

Loch trout.

Loch trout.

Discussion.

Discussion.

Playback.

Playback.

Research.

Research.

Lá fhéile pádraig sona daoibh, a chairde!

Listening.

Listening.

Filling up the whiteboard.

Filling up the whiteboard.

JavaScript and Archives | inkdroid

Thoughts on the long-term viability of sites that use JavaScript to render their content.

Monday, March 16th, 2015

Submarine Cable Map 2015

This year’s map from TeleGeography is looking lovely.

A nice bowl of stew.

A nice bowl of stew.

Manning the doors at @SheCodesBtn Tech in Ten.

Manning the doors at @SheCodesBtn Tech in Ten.

Better able to react to unknown futures.

Better able to react to unknown futures.

Cross-functional teams FTW.

Cross-functional teams FTW.

Sunday, March 15th, 2015

Wondering what @Heilemann will make of my latest blog post.

Star wheels

This list has been making the rounds lately. It’s the list of (probably apocryphal) rules underlying the world of Road Runner and Wile E. Coyote. Design principles if you will. Like “The Road Runner cannot harm the Coyote except by going ‘meep, meep’” and “All tools, weapons, or mechanical conveniences must be obtained from the Acme Corporation.”

These are patterns that we are all subconsciously aware of anyway, but there’s something about seeing them enumerated that makes us go “oh, yeah” in recognition.

This reminds me of a silly idea I had when I was younger. It’s about Star Wars (of course). Specifically it’s about a possible rule—or design principle—underlying the kitbashed used-universe design of that galaxy far, far away.

Now I know this is going to sound crazy, but hear me out…

What if the wheel has never been invented in the world of Star Wars?

It’s probably not a deliberate omission, but we never actually see a single wheel in the original trilogy (the prequels, as always, are another matter entirely). Sure, there are wheels implied under the imperial mouse droid or under R2-D2’s legs but you never actually see them. Even the sandcrawler, which uses tracks, hides its internal workings.

Instead, this is a universe where everything travels via some kind of maglev antigravity even when it seems completely unnecessary—couldn’t you just slap a carbonite Han Solo on a gurney? Whenever a spaceship extends its landing gear we see …skids. Always skids. Never wheels. And what kind of mechanical engineer would actually design something like an AT-AT if it weren’t for a prohibition on wheels?

I know you’re probably thinking “this is so stupid”, but I bet you’re also trying to think of an explicit instance of a wheel in the original trilogy. You may also be feeling a growing urge to watch the films again. And whenever you do end up watching the trilogy again, and you find yourself looking at the undercarriage of every vehicle, you’ll realise that I’ve planted this idea Inception-like in your head.

Anyway, like I said, the prequels put paid to my little theory. I was genuinely disappointed when those droidekas rolled down that corridor. Remember that feeling of “oh, please!” when R2-D2 used his thrusters to fly in Attack Of The Clones? You felt cheated, right? The film was breaking the rules of its own universe. Well, a little part of me felt that way when my silly theory was squashed.

But just go with it here for a minute. Suppose the wheel had never been invented. Would it be possible for a space-faring civilisation to evolve? It’s generally assumed that you’d need to at least invent fire to achieve any kind of mechanical advances, but what about the wheel?

Imagine if George Lucas had actually been playing a design fiction long con. My younger self liked to imagine that lists of instructions were passed around ILM, along the same lines as those Road Runner rules. And one of those instructions would’ve been the cryptic injunction against showing wheels in any vehicle designs. Then imagine what it would have been like if, decades later, Lucas casually dropped the bombshell that the wheel was never invented in this galaxy far, far away. It would’ve blown. Our. Minds.

Ah, but it was just a dream. A crazy, apopheniac dream.

Adding @RobGiampietro to my collective on @Huffduffer—he’s on a magnificent huffduffing spree.

https://huffduffer.com/robgiampietro

Sunday roast.

Sunday roast.

Saturday, March 14th, 2015

Bœuf Bourguignonne.

Bœuf Bourguignonne.

Friday, March 13th, 2015

Watching “How We Got To Now.”

There’s something about @StevenBJohnson that always reminds me of @Veen.

I think it’s the enthusiasm.

Cumin lamb with yogurt and pomegranate.

Cumin lamb with yogurt and pomegranate.

Golden beets, lentils, pomegranate, onion and mint.

Golden beets, lentils, pomegranate, onion and mint.

Da spring is sprung, da grass is riz, I wonder where da boidies is?

Da boid is on da wing.

Ain’t dat absoid? Da wing is on de boid!

“Google’s mission is to organize the world’s information and make it universally accessible and useful.”*

*Until we shut the service down

The Smithsonian’s design museum just got some high-tech upgrades

A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

Writing for everyone.

Slides of really great practical advice on writing clearly.

A double whammy of brain food from @Lara_Hogan and @ScottJehl.

A double whammy of brain food from @Lara_Hogan and @ScottJehl.

Anna making coffee.

Anna making coffee.

James making coffee.

James making coffee.

Learning from the Small Batch pros.

Learning from the Small Batch pros.

Ben practicing his coffee skillz.

Ben practicing his coffee skillz.

Denim day at @Clearleft Towers.

Denim day at @Clearleft Towers.

Double decker bacon sandwich.

Double decker bacon sandwich.

Thursday, March 12th, 2015

Fish head.

Fish head.

Learning about taxidermy.

Learning about taxidermy.

Listening to the tale of The Fiji Mermaid. (The Decemberists would kill for this material)

Listening to the tale of The Fiji Mermaid.

(The Decemberists would kill for this material)

Future Friendly Fruition | Brad Frost

The launch of the Apple watch prompts Brad to remind us of the benefits of being future-friendly.

Once again, responsive design is not about “mobile”, “tablet”, and “desktop”. It’s about creating experiences meant to look and function beautifully on anything that can access the Web. We don’t know what gizmos will be sitting underneath Christmas trees two years from now, but there’s a damn good chance those gadgets will be able to access the Web.

What Does My Site Cost?

A terrific little tool from Tim that puts performance into perspective by measuring how much money users are spending just to view your website on a mobile device.

A JS framework on every table - Allen Pike

The Tower of JavaScript Babel.

The Path to Performance // Speaker Deck

The slides from Katie’s recent talk.

Performance is a rising requirement for building successful websites, but successful performance begins far earlier than development. So how do you get your entire team excited by it, specifically aesthetic-heavy designers?

Buying a copy of @Lara_Hogan’s “Designing For Performance” for the @Clearleft office.

I recommend you do likewise for your workplace.

Wednesday, March 11th, 2015

Sea bream.

Sea bream.

Frying up some sea bream from the open market.

Frying up some sea bream from the open market.

Tuesday, March 10th, 2015

js;dr = JavaScript required; Didn’t Read.

Because in 10 years nothing you built today that depends on JS for the content will be available, visible, or archived anywhere on the web.

These are my chopsticks. There are many like them but these ones are mine.

These are my chopsticks. There are many like them but these ones are mine.

Sichuan feast.

Sichuan feast.

Inlining critical CSS for first-time visits

After listening to Scott rave on about how much of a perceived-performance benefit he got from inlining critical CSS on first load, I thought I’d give it a shot over at The Session. On the chance that this might be useful for others, I figured I’d document what I did.

The idea here is that you can give a massive boost to the perceived performance of the first page load on a site by putting the most important CSS in the head of the page. Then you cache the full stylesheet. For subsequent visits you only ever use the external stylesheet. So if you’re squeamish at the thought of munging your CSS into your HTML (and that’s a perfectly reasonable reaction), don’t worry—this is a temporary workaround just for initial visits.

My particular technology stack here is using Grunt, Apache, and PHP with Twig templates. But I’m sure you can adapt this for other technology stacks: what’s important here isn’t the technology, it’s the thinking behind it. And anyway, the end user never sees any of those technologies: the end user gets HTML, CSS, and JavaScript. As long as that’s what you’re outputting, the specifics of the technology stack really don’t matter.

Generating the critical CSS

Okay. First question: how do you figure out which CSS is critical and which CSS can be deferred?

To help answer that, and automate the task of generating the critical CSS, Filament Group have made a Grunt task called grunt-criticalcss. I added that to my project and updated my Gruntfile accordingly:

grunt.initConfig({
    // All my existing Grunt configuration goes here.
    criticalcss: {
        dist: {
            options: {
                url: 'http://thesession.dev',
                width: 1024,
                height: 800,
                filename: '/path/to/main.css',
                outputfile: '/path/to/critical.css'
            }
        }
    }
});

I’m giving it the name of my locally-hosted version of the site and some parameters to judge which CSS to prioritise. Those parameters are viewport width and height. Now, that’s not a perfect way of judging which CSS matters most, but it’ll do.

Then I add it to the list of Grunt tasks:

// All my existing Grunt tasks go here.
grunt.loadNpmTasks('grunt-criticalcss');

grunt.registerTask('default', ['sass', etc., 'criticalcss']);

The end result is that I’ve got two CSS files: the full stylesheet (called something like main.css) and a stylesheet that only contains the critical styles (called critical.css).

Cache-busting CSS

Okay, this is a bit of a tangent but trust me, it’s going to be relevant…

Most of the time it’s a very good thing that browsers cache external CSS files. But if you’ve made a change to that CSS file, then that feature becomes a bug: you need some way of telling the browser that the CSS file has been updated. The simplest way to do this is to change the name of the file so that the browser sees it as a whole new asset to be cached.

You could use query strings to do this cache-busting but that has some issues. I use a little bit of Apache rewriting to get a similar effect. I point browsers to CSS files like this:

<link rel="stylesheet" href="/css/main.20150310.css">

Now, there isn’t actually a file named main.20150310.css, it’s just called main.css. To tell the server where the actual file is, I use this rewrite rule:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+).(d+).(js|css)$ $1.$3 [L]

That tells the server to ignore those numbers in JavaScript and CSS file names, but the browser will still interpret it as a new file whenever I update that number. You can do that in a .htaccess file or directly in the Apache configuration.

Right. With that little detour out of the way, let’s get back to the issue of inlining critical CSS.

Differentiating repeat visits

That number that I’m putting into the filenames of my CSS is something I update in my Twig template, like this (although this is really something that a Grunt task could do, I guess):

{% set cssupdate = '20150310' %}

Then I can use it like this:

<link rel="stylesheet" href="/css/main.{{ cssupdate }}.css">

I can also use JavaScript to store that number in a cookie called csscached so I’ll know if the user has a cached version of this revision of the stylesheet:

<script>
document.cookie = 'csscached={{ cssupdate }};expires="Tue, 19 Jan 2038 03:14:07 GMT";path=/';
</script>

The absence or presence of that cookie is going to be what determines whether the user gets inlined critical CSS (a first-time visitor, or a visitor with an out-of-date cached stylesheet) or whether the user gets a good ol’ fashioned external stylesheet (a repeat visitor with an up-to-date version of the stylesheet in their cache).

Here are the steps I’m going through:

First of all, set the Twig cssupdate variable to the last revision of the CSS:

{% set cssupdate = '20150310' %}

Next, check to see if there’s a cookie called csscached that matches the value of the latest revision. If there is, great! This is a repeat visitor with an up-to-date cache. Give ‘em the external stylesheet:

{% if _cookie.csscached == cssupdate %}
<link rel="stylesheet" href="/css/main.{{ cssupdate }}.css">

If not, then dump the critical CSS straight into the head of the document:

{% else %}
<style>
{% include '/css/critical.css' %}
</style>

Now I still want to load the full stylesheet but I don’t want it to be a blocking request. I can do this using JavaScript. Once again it’s Filament Group to the rescue with their loadCSS script:

 <script>
    // include loadCSS here...
    loadCSS('/css/main.{{ cssupdate }}.css');

While I’m at it, I store the value of cssupdate in the csscached cookie:

    document.cookie = 'csscached={{ cssupdate }};expires="Tue, 19 Jan 2038 03:14:07 GMT";path=/';
</script>

Finally, consider the possibility that JavaScript isn’t available and link to the full CSS file inside a noscript element:

<noscript>
<link rel="stylesheet" href="/css/main.{{ cssupdate }}.css">
</noscript>
{% endif %}

And we’re done. Phew!

Here’s how it looks all together in my Twig template:

{% set cssupdate = '20150310' %}
{% if _cookie.csscached == cssupdate %}
<link rel="stylesheet" href="/css/main.{{ cssupdate }}.css">
{% else %}
<style>
{% include '/css/critical.css' %}
</style>
<script>
// include loadCSS here...
loadCSS('/css/main.{{ cssupdate }}.css');
document.cookie = 'csscached={{ cssupdate }};expires="Tue, 19 Jan 2038 03:14:07 GMT";path=/';
</script>
<noscript>
<link rel="stylesheet" href="/css/main.{{ cssupdate }}.css">
</noscript>
{% endif %}

You can see the production code from The Session in this gist. I’ve tweaked the loadCSS script slightly to match my preferred JavaScript style but otherwise, it’s doing exactly what I’ve outlined here.

The result

According to Google’s PageSpeed Insights, I done good.

Optimising https://thesession.org/

Monday, March 9th, 2015

The German word for that moment of pleasant realisation that there’s an unwatched episode of University Challenge on iPlayer.

In the Hop Poles, having a sneaky pint of Hophead and a bowl of cheesy chips ahead of this evening’s Tech In Ten rehearsals.

Rolling @schnarfed’s brilliant video-to-audio tool into the @Huffduffer bookmarklet.

https://adactio.com/journal/8500

Huffduffing video

You know what would be awesome? If you could huffduff the audio from videos on YouTube, Vimeo, and other video hosting sites.

To give you an example, A List Apart recently started running online events and once the events are over, they pop ‘em onto YouTube. Now, I’m not saying I don’t want to look at those lovely faces for an hour, but if truth be told, it’s the audio that I’m really interested in.

In the past, my only recourse would’ve been to pester the good people at A List Apart to export audio as well as video, in much the same way as I’ve pestered conference organisers in the past:

I wish conference organisers would export the audio of any talks that they’re publishing as video. Creating the sound file at that point is a simple one-click step. But once the videos are up online—be it on YouTube or Vimeo—it’s a lot, lot harder to get just the audio.

Not everyone wants to watch video. In fact, I bet there are plenty of people who listen to conference talks by opening the video in a separate tab so they can listen to it while they do something else.

Some people have come up with clever workarounds to get the audio track from videos into Huffduffer but they’re fairly convoluted.

Until now!

The brilliant Ryan Barrett has just launched huffduff-video:

He has created a bookmarklet you can use whenever you’re on a YouTube or Vimeo page that you want to huffduff. It works a treat—I’ve already used to huffduff that A List Apart event and a talk by Matt Jones.

It takes a little while to do the initial conversion but you can just leave the pop-up window open while it works its magic. I’ve incorporated it into the Huffduffer bookmarklet now too. So if you’re on a YouTube or Vimeo page, you can hit the usual bookmarklet and it’ll route you through Ryan’s clever creation.

That’s makes two fantastic pieces of software from Ryan that have improved my online life immeasurably: first Bridgy and now huffduff-video. So nifty!

Sunday, March 8th, 2015

Did some truly world-class procrastinating today.

Steak’n’onions.

Steak’n’onions.

Saturday, March 7th, 2015

Chicken cooking in shallots.

Chicken cooking in shallots.

Peelings lotsa shallotsa.

Peelings lotsa shallotsa.

Having delicious Greek food for lunch at Kouzina in The Open Market.

Having delicious Greek food for lunch at Kouzina in The Open Market.

Friday, March 6th, 2015

Having a lovely Valentina’s Day meal with @wordridden.

Having a lovely Valentina’s Day meal with @wordridden.

Garlic steak.

Garlic steak.

Save the date.

Save the date.

IndieHosters

Sorting out hosting is a big stumbling block for people who want to go down the Indie Web route. Frankly it’s much easier to just use a third-party silo like Facebook or Twitter. I’ve been saying for a while now that I’d really like to see “concierge” services for hosting—”here, you take care of all this hassle!”

Well, this initiative looks like exactly that.

You should come to IndieWebCamp Germany in May. It’s going to be fun.

https://indiewebcamp.com/2015/Germany/Guest_List

The astrological conjunction of beer o’clock with brownie o’clock.

The astrological conjunction of beer o’clock with brownie o’clock.

Dev.Opera — The State of Web Type

If you don’t have time to poke around StateOfWebType.com here’s the short version.

Sea bream.

Sea bream.

Cuttlefish stew.

Cuttlefish stew.

Having lunch with the @Clearleft crew.

Having lunch with the @Clearleft crew.

Thursday, March 5th, 2015

Gatecrashing the @Clearleft UX Laundromat. With beer.

Gatecrashing the @Clearleft UX Laundromat. With beer.

INTERNETARCHIVE.BAK - Archiveteam

The most ambitious project from Archive Team yet: backing up the Internet Archive.

We can do this, people! Moore’s Law and all that.

Home is anywhere I plug in my USB-powered mug warmer.

Wednesday, March 4th, 2015

yurivictor/typebetter

A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

The Web’s Grain by Frank Chimero

Superb. Absolutely superb.

A magnificent tour-de-force by Frank on the web’s edgelessness.

Read. Absorb. Read again. This is the essence of responsive web design, distilled.

Sea bream.

Sea bream.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

Tuesday, March 3rd, 2015

Had a blast at this evening’s @CodebarBrighton in @68MiddleStreet.

@WeSpringForward has commenced!

Outside.

Outside.

Quantity Queries for CSS · An A List Apart Article

A terrific bit of smart CSS thinking from Heydon Pickering.

You know he’s speaking at Responsive Day Out, right?

Are You Living in a Simulation?

Always worth bearing in mind when some perspective is needed.

If it is possible that our future species will go on to create simulations of our civilisation forerunners (us), then it is far more likely that we are currently in such a simulation than not.

Troika - a new music podcast | The Hickensian

Jon has started a new little music podcast—and he’s using Huffduffer to generate the RSS feed—three thematically-linked pieces of music.

Have a listen to the first episode.

Sometimes I consider the explosive growth of computation and think that strong AI is a near-term inevitability.

Then I remember printers.

Roll up! Roll up! Getcha Responsive Day Out tickets here:

https://ti.to/clearleft/responsiveconf3

localFont - A localStorage solution for web font loading

A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.

T minus two hours until http://responsiveconf.com/ tickets go on sale.

Monday, March 2nd, 2015

Thinly-sliced courgette.

Thinly-sliced courgette.

Dawn arrives at Ceres on Friday.

I am excite!

http://www.ustream.tv/NASAJPL2

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Futures of text by Jonathan Libov

This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.

(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)

Password Masking

A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.

Major caveat: make sure you still offer the ability to mask passwords too.

Google’s experimental new “slow” label could revolutionize how we tackle web performance - Web Performance Today

It looks like Google is going to start explicitly labelling slow sites as such in their search results (much like they recently started explicitly labelling mobile-friendly sites). So far it’s limited to Google’s own properties but it could be expanded.

Personally, I think this is a fair move. If the speed of a site were used to rank sites differently, I think that might be going too far. But giving the user advanced knowledge and leaving the final decision up to them …that feels good.

Well, well, well …look who else is going to be speaking at http://responsiveconf.com/

It’s @Grigs!

https://adactio.com/journal/8458

Responsive Day Out tickets tomorrow

Tickets for the third and final Responsive Day Out go on sale at 11am tomorrow, Tuesday, March 3rd. Here’s the direct link to the ticket page.

I recommend getting in there pretty sharpish. Tickets are less than a hundred quid, which is a steal considering the amazing line-up of speakers who will be bursting your brain with their knowledge of design, process, CSS, JavaScript, user experience, performance, accessibility, and everything else associated with responsive web design (which, let’s face it, is pretty much everything).

Oh, and that line-up just got even better. The one and only Jason Grigsby will be speaking! If you’ve seen Jason speak before, then you know how fantastic his talks are. If you haven’t seen Jason speak before, you’re in for a real treat. I’m guessing he’ll be dropping knowledge bombs on responsive images. He’s the Jedi master when it comes to that stuff. He’s got a real knack for taking a complex subject and making it understandable …something that could be said of all the other fantastic speakers too.

So set your calendar alarm now. Get your ticket tomorrow morning. And I’ll see you here in Brighton on Friday, June 19th for Responsive Day Out 3: The Final Breakpoint!

Sunday, March 1st, 2015

Lamb shoulder.

Lamb shoulder.

Playing a rake of reels on the banjo.

https://thesession.org/members/1/tunebook/reels

Space Probes Art Print by Ariel Waldman

Now you can get a 7” x 10” print of the cast of Ariel’s fantastic spaceprob.es site.

I think this would look quite fetching in the Clearleft office.

Avocado toast.

Avocado toast.