Journal

Colour contrast and the use of colour is extremely important for certain groups of people with varying levels of visional impairment. Building upon the excellent Colorable, I wanted more context around the result. When you share the outcome with your colleagues, all the results, rules and what you’re aiming for, is easily understandable for when you have those awkward conversations with designers and marketers. Accessibility doesn’t have to be ugly.

An excellent, easy to use tool for checking text-against-background contrast for accessibility and sharing your results with others.

(via @paddyduke)

Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call "The Contrast Triangle". Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. By not using underlines, a design has to rely on contrast alone to achieve this.

It’s interesting that Chip says that this level of contrast is needed “when we don’t use underlines on links”.

By not using underlines, a design has to rely on contrast alone to achieve this.

So this seems to be yet another good reason to include underlines in links, i.e. if you underline your links then you don’t need to worry quite as much about a third level of contrast.

Indeed, when you toggle on the “Show underlines” option on this tool, it then removes the requirement to ensure additional contrast between hyperlinks and standard body text.

However, even if your links in flowing prose are underlined, there’s always likely to be places (Navigation, Footer, CTAs etc) where you’ve probably disabled underlines on links for design effect, so I reckon this is useful for most websites.

(via https://twitter.com/jamesmockett)

The BBC Global Experience Language (GEL) Technical Guides are a series of framework-agnostic, code-centric recommendations and examples for building GEL design patterns in websites. They illustrate how to create websites that comply with all BBC guidelines and industry best practice, giving special emphasis to accessibility.

Heydon Pickering (author of Inclusive Components and co-creator of Every Layout) has implemented and documented over 25 of the BBC's design patterns. These are sure to be loaded with best practices and clever tricks for making resilient, accessible modern UI components. (via @heydonworks)

I’m finding Codepen to be more and more valuable not only for testing out new code and ideas, but also – when working on large applications – as a time-saving rapid prototyping environment which sidesteps the overhead of back-end set-up. Here are some tips which I’ve found useful, for future reference.

Control the Editor View layout

Append /left/, /right/, or /top/ to the URL to set the editor layout.

Append ?editors=1111 (change numbers as appropriate) to the URL to set which panels are maximised (in order of HTML, CSS, JavaScript, and console).

For example:

https://codepen.io/fuzzylogicx/pen/BEEYQL/left/?editors=1100

References

• https://blog.codepen.io/documentation/url-extensions/
• Adding external resources to a pen
• ES Modules on codepen
• https://www.hongkiat.com/blog/codepen-tips-beginners/

Here’s a list of useful (Mac-based) VS Code tips for my reference and yours.

Use the Command Palette

Command-Shift-P

Then type your search term, for example “settings”.

Settings

My preferences (in settings.json or via Preferences→Settings):

{
    "workbench.editor.showTabs": true,
    "editor.formatOnSave": true,
    "explorer.confirmDragAndDrop": false,
    "editor.minimap.enabled": false,
    "extensions.ignoreRecommendations": false,
    "explorer.compactFolders": false,
    "explorer.autoReveal": false,
    "editor.accessibilitySupport": "off",
    "ruby.codeCompletion": "rcodetools",
    "emmet.includeLanguages": {
        "nunjucks": "html",
        "erb": "html"
    },
    "emmet.triggerExpansionOnTab": true
}

Note: the Emmet ones are really useful for code autocompletion.

Additional Emmet Settings

To add a keyboard shortcut for adding an arbitrary wrapper element (say, div.wrap) around some selected code:

Open the Command Palette then search “emmet wrap”. When you see the option “Emmet: wrap with abbreviation”, click the settings icon beside it. Enter your preferred keyboard shortcut. I currently use:

Command-Shift-A

Open current terminal directory in VS Code

code .

Toggle Terminal

Ctrl-`

Toggle sidebar visibility

Command-B

Edit multiple rows simultaneously

Select one instance of the text that appears in multiple locations. Use Command-D to select all, then edit.

Open file to side (for side-by-side editing)

Option–click on a file in the Explorer.

I think of him as a true bohemian; he made etchings, he wrote, he read a lot. Andrew always had a book on the go, maybe two. I remember he gave me his copy of Hunger by Knut Hamsun when I told him I hadn’t read it. There was this other side to him that was deep, curious, well-read. I guess he was a classic autodidact, hungry for knowledge.

Over the last week, the UK music scene has been remembering Andrew Weatherall who sadly died aged only 56.

Bobby Gillespie’s tribute recalls how Weatherall was a fan of some of Primal Scream’s unfashionable songs before he transformed their fortunes with his production on Loaded and Screamadelica, and provides an insight into an outsider with a big heart. (via @SoundClashVic)

A nice list of tips and tools on how to use simpler browser standards and APIs to avoid the added weight of unnecessary JavaScript and libraries.

Lodash, Moment and other similar libraries are expensive and we don’t always need them. This Github repo contains a host of nice tips, snippets and code–analysing tools.

One cautionary note regarding the idea of replacing JS with CSS: although the idea of using CSS rather than JavaScript for components like tabs and modals seems nice at first, it doesn’t properly consider that we often need JS for reasons of accessibility, in order to apply the correct aria attributes when the state of a UI component is modified.

Via Will Matthewson at work (FreeAgent) during our group conversation on JavaScript strategy.

The situation we have now is the worst of both worlds: server-side rendering followed by a tsunami of hydration. It has a whiff of progressive enhancement to it (because there’s a cosmetic separation of concerns) but it has none of the user benefits.

Jeremy Keith notes that these days JavaScript frameworks like React can be used in different ways: not solely for creating an SPA or for complex client-site state management, but perhaps for JavaScript that is run on the server. A developer might choose React because they like the way it encourages modularity and componentisation. This could be a good thing if frameworks like Gatsby and Next.js were to use progressive enhancement properly.

In reality, the system of server-side rendering of non-interactive HTML that is reliant on a further payload of JavaScript for hydration leads to an initial loading experience that is “jagged and frustrating”.

Jeremy argues that this represents a worst-of-both-worlds situation and that its alleged “progressive enhancement via improved separation of concerns” is missing the point.

Hope is on the horizon for React in the form of partial hydration. I sincerely hope that it will become the default way of balancing server-side rendering with just-in-time client-side interaction.

(via @adactio)

I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. Here’s a history of CSS and web design, as I remember it.

A fantastic and amusing account of how we progressed from no CSS (the early days of font tags, inline styles and tables for layout), through bad browsers, untold hacks and browser prefixes, to the relative luxury of today’s tools such as Flexbox and CSS Grid.

Last month’s vinyl haul included brand new music, a couple of great releases I’d missed in 2019, and some killer reissues.

Let’s dive in.

Sleep D – Rebel Force

I’ve noticed that a lot of my recent favourites are from Australia: artists like Ewan Jansen, Rings Around Saturn and Turner Street Sound; labels like Ken Oath Records. This LP from Sleep D – who contributed Connexion Dub on the excellent Sweet Echoes Vol 1 – was produced in Melbourne but released on Anthony Naples’ NY-based Incensio label toward the end of 2019. It’s on the deep, heady techno and electro tip (but also features a lush house remix from Kuniyuki) and has been getting some plays from Hessle Audio luminaries Ben UFO and Joe.

Current Favourite Track: Twin Turbo

Grab a copy on Discogs

Bella Vista – Mister Wong

Originally released in 1982, this electronic pop oddity has been reissued by Adelaide-based label Isle of Jura. The original with its quirky vocals, synths and guitars is a bit like a French Genius of Love, while there’s also a lovely stripped-back and effects-laden dub version.

Current Favourite Track: Disco Dub (Jura Soundsystem Extended Edit)

Grab a copy on Bandcamp

Roy Ayers – Searching / One Sweet Love To Remember

Vibes legend Roy Ayers’ 1976 rare groove classic Searching gets a welcome 7″ reissue from UK label Dynamite Cuts. One Sweet Love on the flip – also from the Vibrations LP – sees Roy in more upbeat mode with great swinging, syncopated drums.

Current Favourite Track: Searching

Grab a copy on Bandcamp

Oscar Weathers – We're Running Out Of Time / Countdown

A stellar slice of reissued eighties electrofunk which I heard while tuned in to 6Music. The original is a much-sought after rarity but fortunately it’s now available once again thanks to Fantasy Love Records. It features a cool vocal accompanied by Funkadelic-style synths, live bass and horns, resulting in something pretty unique.

Current Favourite Track: We're Running Out Of Time

Grab a copy on Bandcamp

Skinshape ‎– I Didn't Know

A lovely 7″ slab of dubbed out, psychedelic soul from Will Dorey aka Skinshape, whose work I first encountered on the Riddim Box Dub / Soul Groove release on Horus back in 2013. The version of I Didn’t Know I heard first (on Gilles Peterson’s radio show) is the dub, however I’m warming to the vocal too. I’ve also noticed that he’s released a few albums which I plan to check out.

Current Favourite Track: IDK Dub

Grab a copy on Discogs

Benoit B – Caution 9′6″ High

Another excellent release from Edinburgh’s Unthank (sister label of Firecracker) featuring four tracks ranging in style from oddball electronics to more dancefloor-oriented electro.

Current Favourite Track: Coconut Groove

Grab a copy at Boomkat

Various ‎– DB12 002

Obscure and limited various artists release from Rimini-based label Duca Bianco, featuring a variety of electronic sounds; some poppier than others. The track Sequence Fiction I bought it for is a 100 BPM chugging John Carpenter-esque instrumental that came to my attention via Joe’s excellent mix for Crack Magazine (appearing at 7:05).

Current Favourite Track: Guillaume De Bois – Sequence Fiction

Grab a copy on Juno

Joy O – Slipping

I’m really enjoying Joy Orbison’s journey as a producer and loved the 2018 7″ Diamonds under his Sin Falta pseudonym. This occupies a similar glitchy and heady space and showcases some really interesting sounds and ideas while still having enough oomph for DJs and dancefloors of taste.

Grab a copy on Discogs