Site Query back online

Site Query is back online. I spent a little time resurrecting it, which mostly involved fixing a few minor bugs and removing the old build process (remember Grunt?). Since the code was already in a GitHub repository it made sense to host a working version on GitHub Pages, keeping it all nice and self-contained.

It was tempting to fix some of the poor design decisions and badly-written code, but I also liked the act of faithfully restoring something like this and just letting it do it’s thing.

Here’s some sample queries:

Moving RSS

I’ve decided to incorporate this blog into my main site, moving it from the subdomain where it previously lived. I think I’ve correctly redirected the old feed URL, but in case it doesn’t work please point your RSS readers to:

Thank you!

Default stylesheets

I’ve needed to refer to browser’s default stylesheets several times and it always takes me longer to find them than it should. Making a note here for future reference and in case it’s a helpful resource for others.

I’ve excluded Microsoft Edge since it’s soon (January 2020) going to be built on Chromium.

Compare pubs closely

What do you like about your favourite things? Compare pubs closely. What makes a good pub? Location, publican, people who use it, decor, privacy, good beer, comfort? Also launderettes. What makes one better to be in than another? Lighting, surfaces, facilities, efficiency? How would you make one better?

— Norman Potter, “Questioning design” from What is a designer (pp.157)

Blog typography update

The body copy on this site is now set in Standard and code is set in Courier, replacing Atlas Grotesk and Atlas Typewriter respectively.

Standard was released by Bryce Wilner in 2017, as a “translation and modification of Berthold’s 1896 version of Standard” (Standard being the name that Akzidenz-Grotesk was distributed under in England and the US). Wilner’s initial release was limited to book and book italic styles, but bold and bold italic styles have since been added.

Read more…

True superscript and subscript figures with font-variant-position

Most good typefaces include OpenType alternates for superscript (superior) and subscript (inferior) figures. Web browsers don’t appear to use these by default, and instead mimic these characters by shrinking the font size and adjusting the vertical alignment. This presents a nice opportunity for some progressive enhancement.

The snippet below leverages a font’s true super-/subscript numerals by resetting the default browser styling and then setting the font-variant-position property with corresponding values for sup and sub elements. The whole thing is wrapped in an @supports ruleset, so we can display the original faux super-/subscript numerals for browsers that don’t support font-variant-position (looking at you, Chrome).

Read more…

Tools I use


Read more…

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…