Recent articles in web development (page 1 of 5)
-
Jan 21, 2023
Fix System Beep on Move Editor into Next Group in VS Code
In Visual Studio Code, I frequently want to split the window into two panes to view one file alongside another. The quickest way to do this without my hands leaving the keyboard is to use View: Move Editor into Next Group with the keyboard shortcut ^⌘→ (ctrl-cmd-right arrow).
You can find the command in the Command Palette "noop"
). Simply having these declared as valid keystrokes at the OS level eliminates the system beep that occurs even when a Chromium app accepts and handles the keystroke. In order to establish this, you need to create a ~/Library/KeyBindings/DefaultKeyBinding.dict file. Note that you’ll probably need to create the directory as well, and that the directory name is plural (Bindings), but the file name is singular (Binding). This should be in your user Library folder, not the /Library folder or the /System/Library folder. This should be a text file with these contents:{ "^@\UF701" = "noop"; "^@\UF702" = "noop"; "^@\UF703" = "noop"; }
^
means Ctrl,@
means Command, and\UF701
,\UF702
, and\UF703
are the codes for the three arrow keys. There’s a nice reference Gist for this file’s syntax here. You can download a copy of this file if that’s easier (but you’ll need to extract it from the ZIP archive): DefaultKeyBinding.dict.zip Once you have created this file, restart VS Code (or any other applications where you want to use these keystrokes), or just reboot your system. After that, you should find that the system beeps are gone. I have successfully applied this tweak since macOS Catalina (10.15.2) all the way up to the current macOS Ventura (13.1) to use the default keyboard shortcuts for the View: Move Editor into Next Group and View: Move Editor into Previous Group commands without hearing system beeps each time. -
Jan 11, 2023
Horizontal Scrolling
My new site design makes heavy use of horizontal scrolling on the home page, with scrollbars hidden. Horizontal scrolling can be accessible, but it takes some work to make it so. This article covers accessibility for keyboard and screen reader users, and users whose pointing devices simply don't support horizontal scrolling! It also breaks down several usability features I added to create a better experience than the native scrollbars they replace.
-
May 10, 2022
Web Directions Hover 2022 Day 2 notes
These are the live notes I took from Day 2 of the Web Directions Hover 2022 conference for our team internally at Culture Amp.
-
May 2, 2022
Web Directions Hover 2022 Day 1 notes
These are the live notes I took from Day 1 of the Web Directions Hover 2022 conference for our team internally at Culture Amp.
-
Apr 26, 2022
How to test for screen reader accessibility with VoiceOver on your Mac
Every Mac has a screen reader built in, called VoiceOver. This article describes how you can use it to test the web application user interfaces you build!