Journal

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)

I don’t often store things in a Set in JavaScript, but maybe I should. The fact it will only store unique values makes it pretty handy.

One place I do currently use a Set is for the TagList in my 11ty-based personal website. I start by defining TagList as a new, empty Set. I then need to assemble all possible tags so iterate blog posts and for each add its associated tags to TagList. This means I can be sure that all duplicates will be removed automatically.

As you would imagine, Set has built-in methods for adding, deleting and iterating items. But if you need to do something beyond that, you can easily turn it into an array, for example by:

const myArray = [...mySet];

Also, browser support is pretty good. So although to date I’ve been safely confining my use to Node scripts for building my static site, I could probably be using it client-side, too.

docsify generates your documentation website on the fly. Unlike GitBook, it does not generate static html files. Instead, it smartly loads and parses your Markdown files and displays them as a website.

I just completed a training workshop where the course notes were provided in a website created using this software (and hosted on Netlify), and was really impressed.

Braille Institute launch a new, free typeface promising greater legibility and readability for low vision readers.

What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability.

via @brucel

This is why, over years of building for the web, I have learned that I can significantly cut down on the entropy my future self will have to face by authoring web projects in vanilla HTML, CSS, and JS. I like to ask myself questions like:

• Could this be done with native ES modules instead of using a bundler?
• Could I do this with DOM scripting instead of using a JS framework?
• Could I author this in CSS instead of choosing a preprocessor?

Fantastic post from Jim Neilson about how your future self will thank you if you keep your technology stack simple now.

(via @adactio)