It’s quiet… Too quiet!

I’d like to say that I’ve just been too darn busy to post since December, and while that’s not entirely untrue, the reality is my host disappeared in a puff of smoke, and I’ve lost a few posts. But we are back, and normal service is resumed. Don’t mind the gap…

Unfortunately this does mean that we’ve lost syntax highlighting temporarily, which is a touch annoying. A little busy just now (as per) but I’ll get round to sorting that soon.

[EDIT] Syntax highlighting has been restored! Some of the older posts that were never updated to the previous highlighter are still out of whack, and a few are mangled for formatting, but I’m trying to work through those too.[/EDIT]

Multi-step CSS transitions

Every so often I come across something that genuinely surprises me, that seems like the kind of thing I really ought to be familiar with. This is one such thing.

Adding stops or keyframes to CSS transitions dramatically increases the power and flexibility of your animation. There may not be a million use cases for it, but when your designers start requesting complex visual behaviours, knowing we can do so much more of this in pure CSS is a fantastic addition to the toolbox.

W.H.O. says processed red meat bad. Conscientious devs told you ages ago…

Burgers are bad for you mmkay?

Specifically, the over-production and enforced consumption of burger menus on mobile and responsive sites.
Some sites even use them on desktop!

This is news to you?
Google: UI UX Burger Menus Are Bad

Who am I to talk of UX/UI? Have you seen my site? It’s HIDEOUS!

Yeah, I’ll deal with that some other time. This is just a scratchpad really, no one reads it anyway.

Back to the topic at hand – it has been posited that providing access to a top tier of priority links is a major improvement on the burger menu, even if you have to resort to the cheap cuts for deeper navigation.

Here’s a nice implementation of that:

Fixed backgrounds fixed

Deliberately confusing title of the day goes to…


Original article:


Fixed position backgrounds cause performance issues with the content being scrolled causing constant repaints.

This can be improved by using the CSS property will-change

The secret is to put your background in it’s own element (a pseudo-element will do fine) and give that element will-change:transform;|
Note the examples are SASS syntax

You can see that our background image uses two GPU-intensive features of CSS: background-size: cover and background-attachment: fixed. Once we fix this painting issue neither will be a problem, since they will only be calculated once to render the initial page. Scrolling will no longer cause repainting once the image sits in its own layer.

It’s the simple things…. OSX Git branch autocompletion.




Get the script:

Add to ~/.bash_profile:

Changes will be picked up in new terminal tabs.