Journal

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

Stimulus JS is great but doesn’t provide any documentation for testing controllers, so here’s some of my own that I’ve picked up.

Required 3rd-party libraries

• jest
• jest-dom

Basic Test

// hello_controller.test.js
import { Application as StimulusApp } from "stimulus";
import HelloController from "path/to/js/hello_controller";

describe("HelloController", () => {
  beforeEach(() => {
    // Insert the HTML and register the controller
    document.body.innerHTML = `
      <div data-controller="hello">
        <input data-target="hello.name" type="text">
        <button data-action="click->hello#greet">
          Greet
        </button>
        <span data-target="hello.output">
        </span>
      </div>
    `;
    StimulusApp.start().register('hello', HelloController);
  })

  it("inserts a greeting using the name given", () => {
    const helloOutput =  document.querySelector("[data-target='hello.output']");
    const nameInput = document.querySelector("[data-target='hello.name']");
    const greetButton = document.querySelector("button");
    // Change the input value and click the greet button
    nameInput.value = "Laurence";
    greetButton.click();
    // Check we have the correct greeting
    expect(helloOutput).toHaveTextContent("Hello, Laurence!");
  })
})

I wanted to see if it was possible to create SVG charts that would work without JS. Well, it is. I've also created an experimental Svelte component library called Pancake to make these techniques easier to use.

A lovely modern, progressively-enhanced approach to data visualisation that uses primarily SVG, HTML and CSS but can be enhanced with JavaScript for Node-based generation or client-side interactivity, if required. (via @jamesmockett)

A great tutorial video on Eleventy by Jason Lengstorf with guest Zach Leatherman, creator of Eleventy.

I already know Eleventy pretty well – in fact this site is built with Eleventy. But you always pick up lots of great tips by watching the people who really know their way around the software.

(via @jlengstorf)

RegExr is an online tool to learn, build, & test Regular Expressions.

This handy, interactive tool is a bit like Postman but for RegEx. You can create RegEx patterns and save them for easy retrieval later.

I also like the way you can start by making a list of example text strings you want your pattern to i) match and ii) not match before starting work on your RegEx pattern, adopting a sort-of “Test Driven RegEx” approach.

Clair and I just watched The Farewell, a comedy-drama film written and directed by Lulu Wang starring Awkwafina and Zhao Shuzhen, and really enjoyed it. Interesting/difficult subject matter and really nicely done. If you need a break from grisly murder cases etc then I can heartily recommend it.

The sessions recorded by the band in Memphis with the legendary record producer Tom Dowd, along with the Muscle Shoals Rhythm Section musicians Roger Hawkins, drums, and David Hood, bass, did not make the light of day, because some of the mixes were not suitable in the musical climate at the time.

A great watch telling an unlikely, touching and at times hilarious story of how the Glasgow band temporarily escaped the madness of the early 90’s scene for Memphis to record an album which was out of step with the time and only revealed its true quality with the benefit of hindsight and maturity.

The production on The Memphis Sessions sounded absolutely amazing and there are some great vinyl mastering scenes for those – like myself – who are into that kind of thing!

On the strength of this, I think Clair and I will grab a copy of the record.

As I got on my usual bus from Stockwell St to Vic Rd this eve, I noticed it was the same driver whose bus I’d taken twice last week and both times it had broken down – that’s two days in a row – leaving me to walk home in the usual January post-apocalyptic shitstorm. I got on his bus today and no sooner was it 200 yards down the road than it crashed into a taxi, across from Marks and Sparks. Everybody out – again. That’s 3 times I’ve been on his bus, and three times it’s broken down for one reason or another. The shittest hat-trick ever 😂. I need to find out this guy’s name so I can never get on a plane with him.