Journal
My DevTools Cheatsheet
Here’s a (work in progress) list of useful (Mac) Browser DevTools tips, tricks and keyboard shortcuts for my reference and yours. This is a work in progress and I’ll update it as I go.
Console Panel
Return currently selected element to work with
$0
Then you can execute its methods or inspect its attribute values, for example:
$0.offsetParent
Debug event-based behaviour
In Chrome, right-click on the relevant element (e.g. a button) and select “Inspect Element”. By default, the Styles panel is selected but instead select the Event Listeners panel. In there you can see all events (e.g. click) currently being listened for on that element (and its parent elements so as to include instances of event delegation).
Each event can be expanded to show which element has the event listener attached – for example it might be the current element or might be document. From here you can get to the script containing the code. Click a line number within the code to add a breakpoint. This will pause code execution on that line until you click the play button to continue. You might also log the current value of a variable here.
Pause JavaScript execution
Cmd + backslash
Firefox
Get responsive img element’s currentSrc
Inspect the element, right click and select Show DOM Properties from the context menu.
Google Chrome
Open the Command Menu
Command+Shift+P
Disable JavaScript
Open the Command Menu then type “disable” and you’ll see the option.
Get responsive img element’s currentSrc
Inspect the element, click the properties tab, toggle open the top item.
Throttle network/bandwidth
Go to tab Network then change Throttling to your desired setting, for example “Slow 3G”, or “offline”.
References
Words and phrases I always struggle with
I’m not sure if it‘s just me, but there are certain words and phrases which—no matter how many times I look up—just seem to be beyond me! So I’ve decided to note their meanings for future reference. Hopefully this might help make the meanings stick.
- Hubris
- excessive pride or self-confidence
- Pathos
- a quality (e.g. of a person) that evokes pity or sadness. For example an actor might inject pathos into a character.
- Single point of failure
- a part of a system that, if it fails, the whole system fails. It’s generally a bad thing.
- Non-zero-sum game
- in game theory, a situation where one player's gain is not necessarily another player's loss. There are actions from which everyone can benefit.
Browser Support Heuristics
In web development it’s useful when we can say “if the browser supports X, then we know it also supports Y”.
There was a small lightbulb moment at work earlier this year when we worked out that:
if the user’s browser supports CSS Grid, then you know you it also supports custom properties.
Knowing this means that if you wrap some CSS in an @supports(display:grid) then you can also safely use custom properties within that block.
I love this rule of thumb! It saves you looking up caniuse.com for each feature and comparing the browser support.
This weekend I did some unplanned rabbit-holing on the current state of (and best practices for using) ES modules in the browser, as-is and untranspiled. That revealed another interesting rule of thumb:
any browser that supports
<script type="module">also supportsletandconst,async/await, the spread operator, etc.
One implication of this is that if you currently build a large JavaScript bundle (due to being transpiled down to ES 3/5 and including lots of polyfills) and ship this to all browsers including the modern ones… you could instead improve performance for the majority of your visitors by configuring your bundler to generate two bundles from your code then doing:
// only one of these will be used.
<script type="module" src="lean-and-modern.js"></script>
<script nomodule src="bulky-alternative-for-old-browsers.js"></script>I might make a little page or microsite for these rules of thumb. They’re pretty handy!
A11y is not “extra effort for people with disabilities”
Strong agree with these sentiments regarding accessibility expressed by Max Böck and Andrey Okonetchnikov on Twitter.
From Andrey:
If you’re building UI, it’s your responsibility to make it work for everyone. Clients often tell me “we don’t care about accessibility” but in reality they do want keyboard support at the very least. So I just build my UI in a way it works without discussing it. It’s my job.
To which Max replies:
This. A11y is not “extra effort for people with disabilities”, it‘s just part of a well-crafted UI.
Our wee Border Terrier, Rudy, is six months old. It’s funny to think how far he’s come since needing carried everywhere just a short while ago. In this weirdest of years, the wee man has been a constant ray of sunshine. Love ye, Rood!
Small Axe - Series 1: Red, White and Blue (on BBC iPlayer)
One of several fantastic films from Oscar-winning director Steve McQueen (12 Years a Slave) described as “Love letters to black resilience and triumph in London's West Indian community. Vivid stories of hard-won victories in the face of racism.”
This one tells the story of Leroy Logan, a young black man who joins the police in an attempt to effect change “from the inside” as a consequence of seeing his father assaulted by police officers. He is faced with both his father’s disapproval and institutional racism within the police ranks.
A brilliant and powerful film which left its mark on me.
The others in the series – especially Education, Lovers Rock (don’t miss if you love reggae) and Mangrove are also highly recommended. Wonderful soundtracks, too.
via @mrtomchurchill
Creating websites with prefers-reduced-data (on polypane.app)
Even though more and more people get access to the internet every day, not all of them have fast gigabit connections or unlimited data. Using the media query prefers-reduced-data we can keep our sites accessible to everyone.
I’ve long wondered if there could be a way to tailor content to a user based on the speed of their internet connection, especially when considering features like responsive images. This looks like it might be the way to do that (although browser support is currently non-existent). It also allows us to respect the user’s wishes on how much data / battery life etc they’re willing to spare for your website.
(via @adactio)
My Screen Reader Cheatsheet
Here’s a list of useful Screen Reader commands and tips for my reference and yours. This is a work in progress and I’ll update it as I go.
VoiceOver (Mac)
Initial setup:
- Open Safari > Preferences > Advanced; then
- check the checkbox “Press tab to highlight each item on a webpage”.
Usage
- Open the page you want to test in your web browser (you might favour Safari for VoiceOver).
- Cmd-F5 to turn VoiceOver on.
- Cmd-F5 (again) to turn VoiceOver off.
Get Cmd-F5 for “toggling on and off” into your muscle memory!
Then:
- Ctrl-Option-A to have VoiceOver read the entire page.
- Ctrl to pause VoiceOver, and Ctrl again to resume.
- Find any unexpected issues by
Tabbing
Tab through items on the page using the tab key. This will move to the next focusable item (button, link, input). You can verify all interactive elements have a focus style, all interactive elements are reachable by keyboard, all off-screen or hidden elements don’t get focused when they shouldn’t and that the spoken label for each interactive element has sufficient context to understand it (“click here” and “menu” isn’t sufficient).
Navigating with the right-pointing arrow key
Navigate through all the content using Ctrl-Option-→. While this is not how most screen reader users will read the page, it doesn’t take long and lets you confirm that everything VoiceOver announces makes sense.
Using Rotor to scan and jump to specific elements
- Ctrl-Option-U to open Rotor
- Browse categories using left and right arrows. This includes the Landmarks menu.
- Down arrow to browse within the categories
- press Return to select an item
This is a great way to check if your content structure makes sense to a screen reader. Checking the headings illustrates the outline of the page. Viewing the links helps ensure they all have a name that makes sense without visual context. Checking landmarks helps ensure that the proper ARIA roles have been applied. You might find that a list of articles is not titled appropriately or that headings are not properly nested.
Tables
- Navigate to a table using Ctrl-Option-Cmd-T
- It should read a caption and give you info about the size of the table
- Ctrl-Cmd-{arrowkey} to navigate inside the table.
References
I’ve started reading The Left Hand of Darkness by Ursula K. Le Guin.
Autumn 2020 Records Round-up
As the leaves fell and the nights drew in, I chose to fall forward by blowing all my hard-earned on a lovely mixed bag of dub, ambient, soul, house and electro records. Now, if I could just find some puppy-free time to actually listen to them…
One wee thought before we dig in: I’m finding that I’m buying from Bandcamp more and more now that many (most?) of the records I want seem to appear there first. That’s great for the artists (they get most of the profit minus Bandcamp’s cut) so it’s a positive thing, but what about physical record shops? This got me thinking: now that we have Bookshop supporting independent, bricks and mortar book shops by spreading profits among them, could a similar online enterprise maybe exist for record shops?
OK, enough pontificating – here’s the music.
Nat Birchall meets Al Breadwinner - Upright Living
Real nice roots reggae and dub instrumentals from sunny Manchester. Mr Birchall is, by all accounts, an amazing musician, and in Al Breadwinner on drums and Vin Gordon on trumpet he’s assembled a stellar band. When I first heard this I thought it was some vintage Augustus Pablo so it was funny to find out that it was in fact made in 2020 in Stockport.
Favourite track(s): African Village Dance / Village Dub.
Om Unit meets Seekers International – Secret Location
As a big fan of Om Unit’s ouput around 2011 and Seekers’ 2017 RunComeTest EP I was pretty excited to hear about this collab… and it doesn’t disappoint. 7 dollops of deep, digi-dub bass, grainy atmospheres and dancehall samples, on a lovely pressing which sounds amazing.
Favourite Track: Nu Killa
Linkwood & Other Lands – Face the Facts
Lovely gatefold double-vinyl LP that sees two of Auld Reekie’s finest join forces on the excellent Athens of the North label. Breezy laid-back jams with smooth keys lead into rougher, Theo Parrish -esque joints then spacey textures, making for a really well-rounded listen.
Favourite Track: Shapes
Satoshi & Makoto - CZ-5000 Sounds & Sequences Vol. II
Beautiful ambient textures and downtempo electronics with that typically quirky Japanese flavour. If you like Ryuichi Sakamoto or Apogee & Perigee, you’ll love this.
Favourite track: Correndor.
Various - Buena Onda Balearic Beats
Lovely four-tracker of slow and atmospheric late-night grooves from Italy and elsewhere, first heard on Denise’s radio show.
Favourite track: Lucas Croon – Japon.
STR4TA - Aspects
A nice surprise from Gilles Peterson’s label, this is a brand new, authentic jazz-funk / disco hybrid with immaculate live playing and production, and drum fills that tip a hat to Atmosfear’s 1979 staple Dancing in Outer Space.
Favourite track: Aspects
Midnight Tenderness - Digi Modes
Another beauty from Melbourne-based Ryan Hunter whose previous releases – whether under this alias for the Refresco EP, or as Turner Street Sound for 2018’s amazing Bunsens – have been much appreciated ‘round these parts. This one, on lovely transparent golden 7″, offers a speedy, skanking and soulful update to the traditional dub techno blueprint.
Sansibar - Targeted Individuals
No-messin’, pacey, but cinematic electro which sounds like it’s from Detroit but is actually from the hand of one Sunny Seppa of Helsinki. Nothing ground-breaking on display here but what it does, it does really well. If you dig ERP or classic Dopplereffekt you’ll love this.
Favourite track: Technology
Art Crime - Distanced
Limited edition moody drone/ambient 7″ from Russia, with accompanying drone movie.
Favourite track: Blocks
Jon Hassell - Seeing Through Sound (Pentimento Volume Two)
Fairly amazing leftfield ambient sounds, and even moreso given that the producer is 83 (yes, 83) years old. This is a real trip and deserves the kind of attention which I’ve not generally been able to give it just yet, but the first track alone is worth the admission. The vinyl also sounds amazing. Stunning!
Favourite track: Fearless
Rance Allen Group - Reason To Survive
Shout out to Gav who played this wonderful 1977 Mizell Brothers production (amongst other great music) on his Other Lands radio show, as an ode to Mr Allen who recently passed away. Perhaps embarassingly I didn’t know of his music until hearing this, but after grabbing this lovely 2018 reissue on Expansions with its soaring strings and stirring vocals, I’m definitely a convert.
Favourite track: Name
Deenamic - Out Of My Mind
Another cracker heard on Gav’s show, this is new from Italian label Neroli who’ve always ploughed a nice furrow in soulful electronic sounds. This one features a tasty combination of house, broken beat and downtempo flavours.
Favourite track: Sambu
Tasha Larae & Jihad Muhammad - Till You Get There
Proper New Jersey style garage from Baltimore’s DJ Spen (ably assisted on remix duties by Bristol’s Sean McCabe) that I could imagine raising the roof at Shelter in NYC or even closer to home at Glasgow’s Melting Pot. It just has that magic formula of slamming beats, gospel chords and a soaring, life-affirming vocal which will never fail to push my buttons. One that if you hear at the right time will make your night, and which makes me long for clubs to reopen.
Favourite track: Till You Get There (DJ Spen and Sean McCabe remix)
Buy (digital-only) from Bandcamp
Das Ding - Your Content Will Arrive Shortly
My first encounter with Das Ding was his track H.S.T.A. on the excellent 2012 Stones Throw comp The Minimal Wave Tapes Volume Two. That comp was focused on tracks from the eighties so it’s cool to see that Mr Ding is still releasing music today. These four tracks are electro-based and retain that eighties character with New Beat and EBM influences, but updated with 2020 sounds and production.
Favourite track: Category Collapse (Heap Remix)
Sad City - images-nov-20
Two long, atmospheric ambient tracks, self-released (digital-only) by Gary Caruth who I believe resides in Edinburgh (or Glasow; I’m not quite sure). I remember really enjoying his release You Will Soon Find That Life Is Wonderful in 2013. Anyway – these are very nice, so much so that I listened to them as I feel asleep the other night and I can report that it was quite pleasant!
Favourite track: image1
Ando Laj - Dog Insight
A quirky long-player from a Toronto-based artist who is new to me but seems to have been around since at least 2014. This veers from the grungy ‘n’ glitchy to the ethereal and beautiful and if I’m honest, quality-wise it’s a bit of a mixed bag. However in its best moments, it calls to mind classic IDM from FUSE, The Aphex Twin and The Black Dog… which is never a bad thing.
Favourite track: Yukon
Linton Kwesi Johnson - Bass Culture / LKJ In Dub
Killer reggae reissue: beaut packaging, lovely red and green vinyl, and sounds tremendous.
Favourite track: Inglan is a Bitch
Sedgwick - Rhythm And Isolation
Big up Jamie who brought this one to my attention via a great episode of his Saturday Manatee show. There’s a lot of electro around at the moment, and perhaps also a few opportunistic producers and labels jumping on the bandwagon, but this is a good one.
Favourite track: Exit