Musique Strategies is a collection of quotes and snippets that have inspired and helped me in music production. It's a shameless mashup of the Oblique Strategies, created by Brian Eno and Peter Schmidt and first published in 1975, and selected interview quotes from original house music producers of the 1980s and 1990s.

BACK

How I built Musique Strategies

Design & Hosting
The site was designed with Carrd. I use it for pretty much everything these days, except large multi-page sites. It's incredibly quick to design a great looking page and comes with sensible defaults for typography, colors and layout.

The domain is registered with iwantmyname, like all my domains. Carrd makes it simple to hook up a custom domain and the Pro account gives you some cool features like redirects and custom meta tags.

Carrd Pro account also allows you to upload a custom Social Share Image. This is important for sites that use dynamic data, since the auto-generated share image won't wait for dynamic data to be loaded and populated before the screenshot is taken. This can leave you with an awkward empty space in the image when it's shared (first image). A custom share image easily solves this (second image).

Carrd accounts include solid hosting and automatic SSL certificates along with a slew of other handy features. This makes it the perfect one-stop shop for small sites. I highly recommend getting the Pro account 🚀

The site logo is Lust Regular font. It's part of Abode Fonts (was Typekit) but since I don't subscribe to Adobe Creative Cloud I had a designer friend (thanks Bram!) export a vector of the words. Carrd supports SVG files so it was cinch to use it as a full-quality vector logo. On smaller screen sizes the two words are stacked. This is achieved by having the regular and stacked logos show and hide based on the viewport width. Easy stuff. If I was using the actual web font I wouldn't have to do this but there's no standalone Typekit subscription anymore, and I'm not paying $50/month for that one time a year when I feel like fiddling around with After Effects.

Body text is Poppins, one of my favourite - and most often used - Google Fonts. Yes, it's a poor man's Avant Garde and yes, the lowercase 'e' is particularly horrid but it's good enough and it's FREE 👍

Data Storage
Airtable is my data store of choice for anything that has relational records. I could've gone with something 'simpler' like Google Sheets but that quickly gets out of hand when trying to make sense of related data. I like working with data visually so Airtable fits the bill nicely.

In this case I wanted to have separate tables for Quotes, People and Sources. Quotes is what was said and links to records for who said it (People) and where they said it (Sources). This gives me some flexibility for the future, to display things like all the quotes by a certain producer, or all the quotes from a particular interview.

Airtable has an excellent API but their rate limit (currently 5 reqs/sec) precludes it from being used as a direct data source. Some kind of caching was required so I used Integromat to create a simple 'scenario' (Integromat-speak for sequence or workflow) that runs every night at midnight. It queries the Airtable API for the full data and saves the returned JSON as a file on AWS S3.

This gives me the ability to add quotes to Airtable whenever I like and know that they'll show up on the site within the next 24 hours. If I spot a typo or other error in the existing data I can always trigger the Integromat scenario manually to update the data instantly.

Quote Widget
The quote widget is the only dynamic part of the site. I built it with Anymod - a service for creating HTML/CSS/JS widgets that can be used on any website. It's embedded into the page using a tiny piece of JavaScript.

I use VueJS to load the JSON data from S3 and shuffle it into random order. The quote block is inside a Vue <transition> element which does the fade in/out when the content changes. The 'Prev' and 'Next' buttons have @click handlers that just increment or decrement the index of the currently displayed quote. I prefer VueJS over jQuery for simple functionality like this because it comes with all the features I need baked in and keeps the HTML and JavaScript super clean.

Putting It All Together
This might sound like a lot of work for a simple one-pager website but I love building these things. From the initial idea to deploying the final site, it'a all a learning process. Discovering new technology and services along the way is a cool bonus.

After finding Integromat I've built dozens of scenarios for automating tasks related to my websites. Anymod's new pricing model (free for solo projects!) opens it up to a whole load of developers to write standalone widgets that can enrich any static website.

BACK