Journal

Beautiful ambient textures and downtempo electronics with that typically quirky Japanese flavour. if you like Ryuichi Sakamoto or Apogee & Perigee, you’ll love this. Favourite track: Correndor. https://bit.ly/2Hpu8ol

Very clever responsive <article> layout (with gutters and breakout images) achieved using CSS Grid, minmax(), the ch unit and a minimum of fuss. It scales automatically from narrow to wide viewports with no auto margins, max-width or media query manual overrides in sight.

For the blog post page (the page you're looking at right now) I wanted a mobile-friendly layout where the text was centered and readable, where the images/code examples are wide.

The gist of it is this:

.post {
  display: grid;
  grid-template-columns:
    minmax(1.2rem, 1fr)
    minmax(auto, 57ch)
    minmax(1.2rem, 1fr);
}

Simple and deadly.

I can potentially see this as a pattern, or layout primitive, rather than just as something you might use at the top-level of the page for overall layout. I’m looking forward to trying it out!

(via Ahmad Shadeed)

I just watched “Larry’s Garage” – a film by Corrada Rizza about the visionary New York DJ, Larry Levan and the legendary nightclub he called home.

Unfortunately there’s generally precious little footage of the infamous New York club and what they included I’d seen before, but there was some nice previously unseen interview footage with Larry Levan and overall, although I wasn’t blown away, I enjoyed it.

Lovely radio show including an interview with @firecracker_rec and mix from @WeeDjs.

Bookshop was dreamed up by the writer and co-founder of Literary Hub, Andy Hunter. It allows independent bookshops to create their own virtual shopfront on the site, with the stores receiving the full profit margin – 30% of the cover price – from each sale. All customer service and shipping are handled by Bookshop and its distributor partners, with titles offered at a small discount and delivered within two to three days.

(via @RyanSoulbhoy)

Lovely house mix from my friend Jamie.

Lots of good stuff in here, with plenty I don’t know plus a few classics from Crustation (Mood 11 Swing’s mix of Flame) and Chez ’n’ Trent.

Genius!

Just finished my 6K run for FreeAgent’s “Big Strides for Tiny Changes” charity campaign.

Scott Jehl’s experimental take on a container/element query aimed at letting us set responsive styles for our elements based on their immediate context rather than that of the viewport.

I made a quick and minimal take on approximating Container/Element Queries using a web component and basic CSS selectors.

The idea is that for any given instance of the <c-q> custom element / web component you would define a scoped custom property which sets the pixel min-widths you’re interested in, like so:

c-q {
  --breakpoints: "400 600 800";
  background: black;
}

Zero to many of those numeric min-width values will appear in the element’s data-min-width HTML attribute based on which (if any) of them the element’s width is equal to or greater than.

You can style the element based on their presence using the ~= attribute selector, like this:

c-q[data-min-width~="400"] { 
  background: green; 
}
c-q[data-min-width~="600"] {
  background: blue;
}

See also Scott’s tweet announcing this which contains some interesting contributions including Heydon’s watched-box.

All of the various JavaScript approaches/experiments are summarised in CSS-Tricks’s article Minimal Takes on Faking Container Queries.

(via @scottjehl)

Here are five bite-sized and practical chunks of advice for creating accessible forms.

1. Always label your inputs.
2. Highlight input elements on focus.
3. Break long forms into smaller sections/pages.
4. Provide error messages (rather than just colour-based indicators)
5. Avoid horizontal layout forms unless necessary.

I already apply some of these principles, but even within those I found some interesting takeaways. For example, the article advises that when labelling your inputs it’s better not to nest the input within a <label> because some assistive technologies (such as Dragon NaturallySpeaking) don’t support it.

I particularly like the idea of using CSS to make the input which has focus more obvious than it would be by relying solely on the text cursor (or caret).

input:focus {
  outline: 2px solid royalblue;
  box-shadow: 1px 1px 8px 1px royalblue;
}

(via @adactio)