Site Query

Site Query was a simple tool for constructing combined site: Google Image searches. By storing the search string as parameters in the URL, the queries could be easily saved as bookmarks or shared with other people.

The project was created in a cold January afternoon back in 2015 in the studio with Piper Haywood, but is no longer online. Below, some screenshots for posterity.

The default landing page:

Site Query default landing page

Read more…

Scroll-linked Animations

Speaking of scrolling, an unofficial draft proposal has been authored for “scroll-linked animations”. The proposal defines an API for creating animations and effects that respond to scroll-based interactions. It covers several common patterns, such as a navigation bar shrinking effect, a navigation highlight effect, and – my favourite – a reading progress bar:

@keyframes progress {
  to { width: 100%; }
#progress {
  width: 0px;
  height: 30px;
  background: red;
  animation: progress 1s linear;
  animation-timeline: scroll(element(#body));

So simple!

Read more…

Intersection Observer

Support for the Intersection Observer API just landed in Safari in macOS 10.14.4 and iOS 12.2.

Scrolling is arguably the default user action on the web, so having a performant way to respond to this input is incredibly powerful from a design perspective. This complements several other recent features, such as native CSS Scroll Snapping, smooth scroll-behavior, sticky positioning – all of which can be utilised in a progressively-enhanced way with the powerful CSS @supports rule.

Read more…

Ethan Marcotte: It’s not about the device.

Ethan Marcotte:

Personally, the Apple Watch is interesting to me not because it’s a watch. Rather, it’s interesting to me because it’s a smaller-than-normal touchscreen attached to a cellular antenna, and one that’s not necessarily on the most reliable connection. It helps me look past the device, and to think about how someone will interact with my work under those conditions. Once I do that, I can start to design accordingly.

Read article

See also: Device Agnostic (2014) by Trent Walton.

Simple dark mode with CSS filters

As a big fan of macOS Mojave’s dark mode, I was excited to see a new media query for targetting this user preference land in a recent release of Safari Technology Preview.

I’ve seen others add support to their websites by redefining colour variables or properties – which is probably the way to go in most cases. But it occurred to me that since this blog (currently) contains no images or rich media, I can get a very cheap dark mode by inverting the whole document using the filter property, like so:

@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
filter: invert(100%);

To see for yourself, open up this page in the latest Safari Technology Preview.

For good measure, I’ve also included a rule set to invert the images, videos, and other replaced elements back to normal, so that these don’t get inadvertently affected should I include them in future. This idea is borrowed from’s stylesheet, where they scope their dark mode styles to an .is-inverted class (try it out on their site by using the keyboard shortcut Ctrl + Shift + i).

Recent reading III

Imagining a Solar-Powered Internet: Kris De Decker Low<–Tech Magazine

So you have to adapt your society or technology to a new type of energy source. We actually need a lot of innovation because all our technology is based on fossil fuels, and it doesn’t really work with intermittent power sources. Which could be done, for instance: in some developing countries, internet networks are not always on. They are indeed intermittent, because they work with solar panels. Every internet node has a solar panel, and the data only gets from one node to another if there is sun. Your email might take three days to arrive, depending on the weather. So you can adapt basically anything to an intermittent energy supply. It’d be a kind of cultural shift towards something more sustainable.

How do you use the internet mindfully?

This summer we got to watch a workshop created by a few friends that used colorful cardboard blocks to imagine the internet as a city. Together they built structures that represented different ways of organizing the infrastructure of the web. “If the Internet were a city,” they asked, “what would be its roads, buildings, and parks?”

Typography on the Web (2015)

What we gained with modern web technology is the ability to have the layout (and even fonts) automatically react to outside conditions like screen format, device capabilities, user preferences, or even reading distance. Design is no longer about tailoring invariable content to one specific embodiment; the web forces us to think about typography in terms of parameters and to get clear about content versus form.

Archiving Is The New Folk Art (2011)

Clearly, all of this is a far cry -- and a lot of extra busy work -- from the act of merely listening to music. In fact, I spend much more time acquiring, cataloging and archiving my artifacts these days than I do actually engaging with them. The ways in which culture is distributed and archived has become profoundly more intriguing than the cultural artifact itself. What we’ve experienced is a inversion of consumption, one in which we’ve come to engage in a more profound way with the acts of acquisition over that which we are acquiring; we’ve come to prefer the bottles to the wine.

The Utility of Fun

Having spent a significant amount of time in design classrooms critiquing work and cutting my teeth, I sympathize with students who feel the pressure to create work imbued with austerity. Students easily fall into the trap of thinking that if something doesn’t feel clean, and professional, that it isn’t good. If it isn’t good, they won’t get a job. If they don’t get a job, they can’t pay off their loans. Obviously, I disagree. This notion is dangerous, and can strip professionals of the joy that is vital for sustaining careers.

Sourdough Bread! The oldest (and probably best) loaf

Sourdough is fetishized like nobody’s business. It’s also the most bro-y of all foods (the only challenger is BBQ). YouTube is full of white dudes with beards and tattoos talking sincerely about hydration levels, scoring patterns and oven humidity. The root of it, I suppose, is the fascination with how a simple ingredients list (flour, water, salt) can produce such wildly different results. The magic is all in the process, and bros love a process.

The HTML Mark Text element

TIL about the <mark> element (HTML Mark Text element) – an inline tag used for highlighting a passage of text. Most browsers apply a fitting bright yellow background and black text by default. For example (via MDN):

When used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn’t think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.

Quoting a passage from another source and adding commentary is such a common post type on many popular blogs, that I’m kind of surprised this tag isn’t used more commonly. For designers I think it provides an interesting typographic opportunity, and for content authors a helpful alternative to bold and italic styling.


This is a RECORD COVER.  This writing is the DESIGN upon the
record cover.  The DESIGN is to help SELL the record.  We hope
to draw your attention to it and encourage you to pick it up.
When you have done that maybe you'll be persuaded to listen to
the music – in this case XTC's Go 2 album.  Then we want you
to BUY it.  The idea being that the more of you that buy this
record the more money Virgin Records, the manager Ian Reid and
XTC themselves will make.  To the aforementioned this is known
as PLEASURE.  A good cover DESIGN is one that attracts more
buyers and gives more pleasure.  This writing is trying to pull
you in much like an eye-catching picture.  It is designed to get
you to READ IT.  This is called luring the VICTIM, and you are
the VICTIM.  But if you have a free mind you should STOP READING
NOW! because all we are attempting to do is to get you to read
on.  Yet this is a DOUBLE BIND because if you indeed stop you'll
be doing what we tell you, and if you read on you'll be doing what
we've wanted all along.  And the more you read on the more you're
falling for this simple device of telling you exactly how a good
commercial design works.  They're TRICKS and this is the worst
TRICK of all since it's describing the TRICK whilst trying to
TRICK you, and if you've read this far then you're TRICKED but
you wouldn't have known this unless you'd read this far.  At
least we're telling you directly instead of seducing you with
a beautiful or haunting visual that may never tell you.  We're
letting you know that you ought to buy this record because in
essence it's a PRODUCT and PRODUCTS are to be consumed and you
are a consumer and this is a good PRODUCT.  We could have
written the band's name in special lettering so that it stood
out and you'd see it before you'd read any of this writing and
possibly have bought it anyway.  What we are really suggesting
is that you are FOOLISH to buy or not buy an album merely as a
consequence of the design on its cover.  This is a con because
if you agree then you'll probably like this writing – which is
the cover design – and hence the album inside.  But we've just
warned you against that.  The con is a con.  A good cover design
could be considered as one that gets you to buy the record, but
that never actually happens to YOU because YOU know it's just a
design for the cover.  And this is the RECORD COVER.

A plain-text reproduction of Hipgnosis’s album cover for Go 2 (1978), the second studio album by XTC. Rendered in <pre> tags to preserve whitespace.

Walking the Capital Ring

A good friend and I have started casually walking London’s Capital Ring, a 78-mile walk (split into 15 sections) which covers “open space, nature reserves, Sites of Specific Scientific Interest and more”.

Read more…