Journal

Here’s a list of useful terminal commands for my reference and yours.

Using iTerm2 (Terminal Emulator)

Composer

Make editing long lines easier by using Composer.

Open Composer: Shift-Cmd-.

Type your long command and enjoy using standard text editing controls:

git commit -am "A very long commit message"

Send Composer command to terminal: Shift-Return

Snippets

Toolbelt > Show Toolbelt

Then add, edit and delete commands.

Select a command then use Send to insert it on the terminal.

References

• Working the Command Line by Remy Sharp from A List Apart

Panorama tells the inside story of the development of the Oxford vaccine against Covid-19. For the past 11 months, the BBC's medical editor Fergus Walsh followed the team at Oxford University and AstraZeneca, as they designed, developed, manufactured and trialled the vaccine.

In the middle of a pretty depressing period, this is fantastic TV about an inspirational scientific effort.

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

• How to view and edit JavaScript in your browser's developer tools

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.

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 supports let and const, 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!

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!

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

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)

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:

1. Open Safari > Preferences > Advanced; then
2. 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

• Ethan Marcotte’s Introduction to Screen Readers Using VoiceOver
• Mac VoiceOver testing the simple way on Cloud Four’s blog
• Data Tables on Inclusive Components