Hi.

This record is amazing. And not just the linked track Shrubbery below, but all four. If you’re into Gifted & Blessed / The Abstract Eye and the like, you’ll love this. Hat tip to Gavin who I heard play it first, and Rubadub where I got my copy (and who still have some).

These days, whenever I’m about to use a webfont on a new site I generally find myself searching for the latest “definitive @font-face syntax” that covers all modern browser/device needs.

For a long time I headed straight for Paul Irish’s Bulletproof @font-face Syntax but I noted a few years back that he’d stopped updating it.

Now, when buying webfonts from type foundries such as Fontsmith, the foundries themselves do tend to provide guidelines. However, I’m not convinced that these are sufficiently cross-platform compatible.

Recently I’ve been reading Flexible Typesetting by Tim Brown and in it he recommends Webfont Handbook by Bram Stein. That’s now next on my reading list, however in the meantime I found on A List Apart an excerpt from Stein’s book which deals specifically with the best modern @font-face syntax.

Based on Stein’s advice, here’s what I’m now using.

@font-face { font-family: Elena; src: url(elena.woff2) format("woff2"), url(elena.woff) format("woff"), url(elena.otf) format("opentype"); }

Soon we’ll be able to reduce this to simply:

@font-face { font-family: Elena; src: url(elena.woff2) format("woff2"), url(elena.woff) format("woff"); }

Over the course of 2018 I’ve been trying to get the hang of CSS Grid.

I’d already become fairly adept at using Flexbox – a game-changing responsive layout technology which I love – but the prevailing wisdom suggested that I get with the program and learn this new system, too. At first I wondered whether I should even be using Flexbox at all any more; whether it was already old hat. After all, whereas Flexbox was essentially for laying out items in a single dimension, CSS Grid felt more important, being the web’s first ever purpose-built system for two-dimensional layout.

I have to admit that learning Grid did not come easy at first. Wrapped up in this new system is a whole load of new terminology, new units of measurement and new ways of thinking. Rachel Andrew’s book The New CSS Layout had been helpful but by autumn the concepts still weren’t fully clicking with me. Nor was I totally clear on the appropriate situations to use Grid. So I limited my first production forays to small components where I felt there was less risk of things going badly wrong.

A turning point came while attending Rachel Andrew’s talk Graduating to Grid in which she advised that when things start to feel complicated, remember that:

“It’s all just a grid of lines.”

For me, concentrating primarily on the grid-lines and not the stuff within and without helped simplify the overall concept and make all the supporting features click into place.

At the same conference, Eric Meyer acknowledged that a given layout challenge might be accomplished using either Flexbox or Grid, so in order to standardise your team’s approach it can be useful to set a rule such as:

“Grid for general layout; Flexbox for components.”

Jen Simmons also gave a presentation that included several code examples which used Grid at the layout level and Flexbox at the component level.

Now, I know that neither speaker was saying that it has to be split that way, however I personally liked the idea of applying this rule as a means of avoiding choice paralysis.

I was reminded that Flexbox makes developing responsive components such as navigation menus, fixed-height cards, lists of social icons etc much easier than they previously were with floats and absolute positioning. And for most of these components, because they are one-dimensional, CSS Grid would be overkill. So I realised: if it ain’t broke, don’t fix it. Don’t stop using Flexbox for things that it excels at.

I resolved to create a CSS Grid page layout on Fuzzy Logic, sticking to Flexbox for the components.

My basic idea was to start with a single-column layout for mobile phones then for wider screens break into a two-column layout… but with the logo sitting off “in space” to the left. Pretty simple, but complex enough to get me into:

• using the fr unit for columns of whitespace;
• using grid-template-areas for positioning my content, sidebar and footer sections; and
• realising how useful subgrid will be.

I started by knocking together a rough prototype, before fleshing things out and applying the layout to the main site. Depending on when you read this, you’ll see that layout in place now. If you want to check out the grid lines and areas I recommend using the Firefox (or Firefox Nightly) Grid Inspector.

Overall, it feels good to have taken the plunge into using CSS Grid for page layout, and it has given me confidence to explore further and try more interesting layouts. More to follow, I hope.

Linked resource: Push without notifications

Jeremy Keith suggests that it might be better if our websites ask people to grant permission for new content (e.g. blog posts or podcasts) to be silently cached, rather than asking permission to send intrusive notifications.

I’ve just implemented web push notifications on the Greenhill Journal so this is definitely food for thought.

Really looking forward to checking Objekt at the Sub Club on Friday night. I’ve enjoyed his productions since the first and although I don’t like everything, when he’s good he’s REALLY good. This one from 4 years ago on a split 12″ with Dopplereffekt blew my tiny mind when it came out and remains one of my favourite techno records this decade. DJing-wise he seems to be pretty unpredictable, which is fine by me!

A image optimisation and resizing tool with lots of different compression and format options.

Other Lands consistently plays amazing records. He’s also been cultivating a quirky but cuddly radio voice which, combined with the heartfelt electronic sounds, makes for a warm and fuzzy listen.

This two hour show is notable for featuring lots of amazing music from Glasgow and Edinburgh, including tracks by Being, Lord of the Isles, a cut from the Off-World Transmissions LP on Invisible Inc, and a preview of the forthcoming Mac-Talla Nan Creag sequel on Firecracker.

Gav also plays both sides of the new Nuclear Family EP and I'm chuffed for our record to feature in this company.

It’s taken a few years, but me and Tom are excited to be releasing a new record on our label, The Nuclear Family.

Check out the audio previews.

Titled Surface Noise, our third release will be available on both 12″ vinyl and digital, hitting all good record stores in early November ‘18.

You can pre-order it now from our Bandcamp page.

Here's what our press release says:

Artist: The Nuclear Family vs Other Lands
Title: Surface Noise
Label: The Nuclear Family
A: The Nuclear Family - Surface Noise
B: Other Lands - See Thru Time

Did you miss us? The Nuclear Family - Tom Churchill and Laurence Hughes - are back after a three-year hiatus, and this time we’ve roped in one of our good buddies, Other Lands, to help us deliver a double-header of deep delights for discerning DJs and dancers, cut nice and loud over a full side each.

Surface Noise, on side A, is the first of the Family’s recent studio jams to see the light of day, with its classic 808 drums and analogue bass underpinning warm pads, twinkling melodies and some subtle vocoder flourishes.

On the flipside, we’re honoured to present a killer track from Other Lands - aka Edinburgh’s veteran DJ/producer Gavin Sutherland, fresh from the success of his recent Pattern Transform 12” for Firecracker and all manner of other exciting studio and live projects. See Thru Time is a masterclass for the heads, with mellifluous chord progressions and a timeless groove.

TNF 003 will be available on vinyl via Rubadub in November, along with a digital version via Bandcamp.

Linking to a variety of test posts on webmention.rocks to see if my comment shows up on each of them.

The software/library I’m using is Perch.

• Test 1
• Test 2
• Test 3
• Test 4
• Test 5
• Test 6
• Test 7
• Test 8
• Test 9
• Test 10
• Test 11
• Test 12
• Test 13
• Test 14
• Test 15
• Test 16
• Test 17
• Test 18
• Test 19
• Test 20
• Test 21
• Test 22
• Test 23

Update: it worked! See the following screenshot for proof.

I’ve recently added webmention capability in my CMS. Webmention is one of the building blocks of the Indieweb movement. The idea is that if my article links to another person’s article then my website will notify theirs and if their site also supports webmention then they can show beside their article that I’ve linked to it.

Likewise, other sites can notify mine if they’ve linked to mine. In this way, I eventually hope to have likes, comments etc from sites such as Facebook and Twitter fed back to here so that I can display them beside the source article.

I’m now going to test webmentions by linking to this article on the topic by Aaron Parecki. Let’s see if something shows up on his site.