Journal

Here’s a useful reference from MDN to use when compiling your site’s favicon and other icons (apple touch etc) at the right sizes for your <head>.

Here’s the first track I had released, Ice 2 Go under my alias Elijah from the 2002 various artists EP Better by Design on Iridite Recordings. When I get the chance I’ll add more of my released tracks, some old sessions that never saw the light of day, and any new works-in-progress.

On reflection this one was pretty naive and raw but I can live with that! I was 25 when I made it and listening to a lot of John Tejada, and you can definitely hear that influence alongside other typical Detroit Techno stylings.

I made it in Cubase with a combination of software and hardware. The main bassline sound came from NI Mercury, with an additional bassline from my Walforf Pulse. The drums were programmed in Attack and the main riff with its panning effects was also software-based. The pad and portamento/gliding lead part came from my Juno 106 and Nord Lead 2 respectively.

Fun fact: the name Ice 2 Go came from a night out in Amsterdam with label-boss Jason and the lovely Lydia during which we asked a bar for a bag of ice to take away to make caipirinhas. A mildly merry Jason first heard then signed the track that very night.

I remember that DJs like DJ 3000 and Nomadico/Dex from Underground Resistance played it. Closer to home I heard that Hudson Mohawke was a fan and played it at the Sub Club, while Jackmaster was good enough to showcase it in a “lesser-known gems” feature on Radio 1. And nice people who I respect like Mark still rate it, so that’s good enough for me.

In all my years of spinning up “HTML Typographic Elements” lists or pages as a reference for designers, I didn’t realise that the W3C provide the very thing I needed in their HTML Element Sampler. These pages provide comprehensive dummy content covering all the main typographic elements which is really handy when designing a website’s typographic styles and pattern library.

My latest lab experiment is a little Lunch Picker coded in vanilla JavaScript. The idea was to create a simple, lightweight app which accepts user input and implements a State Based UI pattern. It re-renders the UI every time the data changes state, similar to the way React.js and Vue.js would but without the weight of any frameworks.

I was inspired by a great tutorial from Chris Ferdinandi which I implemented with my own twist.

Give it a whirl, view source if you’re interested, and get some help making that all-important call on what to have for lunch today!

Loved this BBC documentary which traces jazz’s roots back to Congo Square in New Orleans, explores the origins of the word jazz, and explains the music’s cultural importance as a language – spoken first by slaves – for self-expression and representing community.

My favourite section was the interview with pianist Marcus Roberts in which he explained how jazz came from the blues and described blues music in terms of “dissonance that resolves” and “tension and release… just like life”.

Testing Codepen’s new feature for progressively enhancing code hosted on your own site from a basic pre element into an interactive, editable pen. To demo this I’m using a great code snippet from Chris Ferdinandi for CSS-only smooth-scrolling.

<p id="top">
	<a href="#bazinga">Go to the middle</a><br>
	<a href="#1@#%^-bottom">Go to the bottom</a>
</p>

<p>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="bazinga"><a href="#1@#%^-bottom">Go to the bottom</a></p>

<p>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="1@#%^-bottom"><a href="#">Go back to the top</a></p>

html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

Great serving from Craig Bryant. Includes a nice description of the infamous kicker and I also love his no-look Waldner-style long, fast, down-the-line serve too.

Nice Vanilla JS approach to array manipulation with map() and filter() in this live coding walkthrough by Chris Ferdinandi.

A handy tool for resizing your image to the standard sizes for all manner of social media and other applications.

Alana Brajdic of SafetyCulture provides a checklist to help create useful error pages.