Tweaks

src/site/notes/my-personalised-keyboard/index.html

@@ -13,19 +13,19 @@
     <!-- textlint-enable -->
     <!-- prettier-ignore -->
     <markdown>
-      I’ve been using my [**Lily58 split keyboard**](https://github.com/kata0510/Lily58) for more than a year now. It’s a compact 58-key split keyboard with column-staggered keys. It’s 55% the size of a standard 104-key keyboard.
+      I’ve been using my [**Lily58 split keyboard**](https://github.com/kata0510/Lily58) for more than a year now. It’s a compact 58-key split keyboard with column-staggered keys, 55% the size of a standard 104-key keyboard.
 
-      Thanks to the open-source firmware/framework [QMK](https://qmk.fm/), I was able to customise it and program it to my satisfaction. My keyboard layout is ever-evolving, but I figured now’s a good time to post about the layout so far.
+      Thanks to the open-source firmware/framework [QMK](https://qmk.fm/), I customised it and programmed it to my satisfaction. I figured now’s a good time to post about my layout so far.
 
       <blog-media
         :src="url('photo.jpg')"
         caption="The keyboard in question" />
 
       ## Quick rundown
 
-      **Hardware:** The Lily58 keyboard is a split keyboard with 58 keys in total. There are two 32×128 pixel OLED screens on both halves. Both halves are connected by wire, and the whole thing is wired USB-C to the computer.
+      **Hardware:** Split keyboard with 58 keys in total. A 32×128 pixel OLED screen on each half. Both halves are connected by wire, and the whole thing is wired USB-C to the computer.
 
-      **Software:** It runs the QMK firmware, which I used to implement 8 layers and several custom functions. Being a programmer and tinkerer, I enjoyed customising the heck out of my keyboard’s firmware.
+      **Software:** It runs the QMK firmware, which I used to implement 7-8 layers and several custom functions. I customised the heck out of my keyboard’s firmware.
 
       ## The basics
 
@@ -36,24 +36,24 @@
 
       This is the _base layer_ of my keyboard, where all the typing happens primarily.
 
-      In the middle section lies the alphabet. But instead of the usual QWERTY layout, it’s in a variant of the Colemak layout called [**Colemak Mod-DH**](https://colemakmods.github.io/mod-dh/). It took some time to get used to but I appreciate how easier it was for typing (in English). The most common letters are in the home row.
+      Largely in the middle lies the alphabet. Instead of the usual QWERTY layout, it’s in a layout called [**Colemak-DH**](https://colemakmods.github.io/mod-dh/). It took some time to get used to but I appreciate how easier it was for typing (in English), as the most common letters are in the home row.
 
       <lily58 :keys="BASE_LAYER_JSON" focus-rects="[1,1,5,3],[0,6,5,3]"/>
       <div class="caption">Alphabetic input</div>
 
-      A sprinkle of common punctuations gather around the periphery, flanked by the familiar <kbd>Esc</kbd>, <kbd>⌫</kbd>, <kbd>↵</kbd>, and <kbd>Tab</kbd> keys.
+      The alphabet is flanked by the familiar <kbd>Esc</kbd>, <kbd>⌫</kbd>, <kbd>↵</kbd>, and <kbd>Tab</kbd> keys, only to be punctuated by some of the common _punctuations_.
 
       The bottom row gives access to hidden _layers_ which can be activated by holding down the layer <kbd>L(*)</kbd> keys. More on layers later.
 
       <lily58 :keys="BASE_LAYER_JSON" focus-rects="[0,4,4,1],[1,9,4,1]"/>
       <div class="caption">Layer keys, <em>Space</em> <kbd class="kbd">␣</kbd> bar, and primary modifiers <code>Control</code>/<code>Command</code></div>
 
-      The top row is a bit more interesting. Here we have _single-key shortcuts_.
+      The top row is where it gets interesting. Here we have _single-key shortcuts_.
 
       <lily58 :keys="BASE_LAYER_JSON" focus-rects="[1,0,4,1],[1,5,4,1]"/>
       <div class="caption">Top row: shortcuts</div>
 
-      On the left hand top row are “universal” shortcuts for navigating within an application: Back, Forward, Previous tab, and Next tab.
+      On the left hand top row we have “universal” shortcuts for navigating within an application: Back, Forward, Previous tab, and Next tab.
 
       <blog-media
         :src="url('appnav.mp4')"
@@ -85,7 +85,7 @@
 
       Home row modifiers make keyboard shortcuts much more comfortable, in contrast to the awkward contortions you have to perform on regular keyboards.
 
-      The feature is called [**Mod-Tap**](https://docs.qmk.fm/#/mod_tap) within the QMK framework, a.k.a. Tap/Hold keys.
+      This makes use of the [**Mod-Tap**](https://docs.qmk.fm/#/mod_tap) feature from the QMK framework, a.k.a. Tap/Hold keys.
 
       <box-note>The home row mods, among other things, were inspired by the famous [**Miryoku**](https://github.com/manna-harbour/miryoku) layout. Credits to Manna Harbour for designing the Miryoku layout.</box-note>
 
@@ -107,6 +107,8 @@
       7. <img alt="" class="layer-icon" :src="url('emoji_layer_oled.png')" /> Emojis
 
       <box-note>Btw, the OLED screen is programmed to show the current layer’s icon.</box-note>
+
+      Let’s dive into each layer in the following sections. 🤿
 
       ## Shift layer <img alt="" class="layer-icon-large" :src="url('shift_layer_oled.png')" />
 
@@ -115,7 +117,7 @@
 
       The **Shift layer** is just a shifted or uppercase version of the base layer. You know, like when you hold _Shift_ on a regular keyboard! Though, this layer is activated by holding down the left _Space_ key <kbd>␣</kbd> instead of the _Shift_ key.
 
-      Some of the shifted counterparts differ from those of a regular keyboard. For example, the dot <kbd>.</kbd> shifts into a colon <kbd>:</kbd>, not an angle bracket. The comma <kbd>,</kbd> shifts into a semicolon <kbd>;</kbd>. I opted for a more logical pattern for the shifted punctuations. <kbd>?</kbd> shifts into <kbd>!</kbd>, and so on&hellip;
+      Some of my shifted punctuations differ from their counterparts in a regular QWERTY keyboard. Like how <kbd>?</kbd> shifts into <kbd>!</kbd>, <kbd>.</kbd> to <kbd>:</kbd>, <kbd>,</kbd> to <kbd>;</kbd>,  etc&hellip;
 
       <box-note>I used this great [**Custom Shift Keys** library](https://getreuer.info/posts/keyboards/custom-shift-keys/index.html) from Pascal Getreuer to customise the shifted values.</box-note>
 
@@ -128,20 +130,20 @@
         layer-button="4,1"
         focus-rects="[0,0,6,4],[1,4,1,1],[1,7,4,1]" />
 
-      The **Symbol layer** is activated by holding the dedicated _Symbol layer key_ <kbd>L(s)</kbd> with the left thumb. The symbols are laid out for the left hand only. The right-hand side defaults to home row mods.
+      The **Symbol layer** is activated by holding the dedicated _Symbol layer key_ <kbd>L(s)</kbd> with the left thumb. Matching the thumb, the symbols are laid out on the left-hand side only. The right-hand side defaults to home row mods.
 
       There is a bit of special programming that I added for this layer. The parentheses, brackets, braces, and angle brackets &mdash; the "enclosure" keys &mdash; have a nifty little shortcut in them for a smoother coding experience.
 
       <blog-media
         :src="url('closing-bracket-reposition.mp4')"
         caption="Caret repositioning in brackets"/>
 
-      What it does exactly is it lets me automatically reposition the caret or cursor inside the brackets without the need for arrow keys. The arrow keys are on a separate layer, you see.
+      What it does exactly is it lets me automatically reposition the caret or cursor inside the brackets without the need for arrow keys. The arrow keys are on a separate layer, and layer-switching has an overhead.
 
-      The trigger for it is simple: if I still have the opening symbol’s key held down as I release the closing symbol’s key, it repositions. Otherwise, it types normally. I can control whether I want to quickly reposition or not, depending on the situation.
+      The trigger for it is simple: if I still have the opening symbol’s key held down as I release the closing symbol’s key, it repositions. Otherwise, it types normally. This way I can control whether I want to quickly reposition or not.
 
       <bracket-key-demo />
-      <div class="caption center">Demo! You’ll need a keyboard for this.<br/>To trigger caret repositioning, hold <kbd class="kbd">1</kbd>, press <kbd class="kbd">2</kbd>, release <kbd class="kbd">2</kbd>, before releasing <kbd class="kbd">1</kbd>.</div>
+      <div class="caption center">Demo! You’ll need a keyboard for this.<br/>To trigger caret repositioning, hold <kbd class="kbd">1</kbd>, press <kbd class="kbd">2</kbd>, release <kbd class="kbd">2</kbd>, before releasing <kbd class="kbd">1</kbd>. It’s a reversing motion, mirroring the cursor’s movements.</div>
 
       ## Navigation <img alt="" class="layer-icon-large" :src="url('navigation_layer_oled.png')" />
 
@@ -152,7 +154,7 @@
         layer-button="9,2"
         focus-rects="[0,5,6,4],[2,9,1,1],[1,2,4,1]" />
 
-      The **Navigation / manipulation layer** provides the arrow keys, page navigation keys, and word navigation, all on the right side. Some text manipulation functions are here as well. This layer is especially useful when coding or when editing text.
+      The **Navigation / manipulation layer** provides the arrow keys, page navigation keys, and word navigation, all on the right side. Some text manipulation functions are here as well. This layer is especially useful when editing text.
 
       On the home row sit the most used keys, the arrow keys.
 
@@ -206,7 +208,7 @@
 
       <lily58 :keys="NUMBER_LAYER_JSON" :oled-right="url('number_layer_oled.png')" :layer="BASE_LAYER_JSON" layer-button="9,3" />
 
-      This layer contains numbers and some arithmetic operators laid out like a numpad on the right hand side. Convenient when doing calculations. Nothing much to see here, move along.
+      This layer contains numbers and some arithmetic operators laid out like a numpad on the right hand side. Convenient when doing calculations. Nothing special here.
 
       ## Functions <img alt="" class="layer-icon-large" :src="url('function_layer_oled.png')" />
 
@@ -245,49 +247,51 @@
 
       Yep, an **Emoji layer**! 😃 <span style="opacity:0.5">⬅ I typed that with my keyboard!</span> And other useful Unicode symbols.
 
-      This layer works a bit differently. It’s a [one-shot layer](https://docs.qmk.fm/#/one_shot_keys) in QMK terms. That is, you don’t have to hold down the layer key <kbd>L(e)</kbd> to keep the layer active. It stays active until you select an emoji or you cancel. This allows the Emoji layer key to be tucked in the top corner without sacrificing comfort.
+      I mapped the emojis so they line up with the base layer. For instance, 🎉 is on the same position as <kbd>p</kbd>, which can stand for “party”. 👋 on <kbd>w</kbd>ave. 🤔 on <kbd>t</kbd>hink. `✔` on `Enter`, and so on. Meanwhile, the arrow symbols correspond to the arrow keys in the Navigation layer.
 
-      I mapped the emojis so they line up against the base layer. For example, 🎉 is on the same position as <kbd>p</kbd>, which can stand for “party”. 👋 on <kbd>w</kbd>ave. 🤔 on <kbd>t</kbd>hink. `✔` on `Enter`, and so on. Meanwhile, the arrow symbols correspond to the arrow keys in the Navigation layer.
+      The Emoji layer works a bit differently. It’s a [one-shot layer](https://docs.qmk.fm/#/one_shot_keys) in QMK terms. That is, you don’t have to hold down the layer key <kbd>L(e)</kbd> to keep the layer active. It stays active until you select an emoji or you cancel. This allows the Emoji layer key to be tucked in the top corner without sacrificing comfort.
 
-      I’m a heavy user of the arrow symbols. I guess that should be obvious due to the fact that there are three sets of directional symbols here☝. For instance, I use the right arrow to indicate a change when writing pull request descriptions.
+      Being a one-shot layer also opens up the possibility of a new gesture, _double tap_. I’ve set it so that double tapping the Emoji key launches the desktop-level **emoji picker** for all of my other emoji needs.
 
-      As for the the left side emojis, I don’t actually use them that much.
+      <blog-media
+        :src="url('emoji-picker.png')"
+        caption="macOS Character Viewer (left) and Linux-based emoji-picker (right)" />
 
-      ## Other features
-      
-      ### OLED
+      On macOS, it’s `Command+Control+Space` to bring up Character Viewer. On Windows (hypothetically), that’d be `Super+.` for the “emoji keyboard”. On Linux there is no standard emoji picker, so I installed one and bound it to some arbitrary shortcut. I’m not liking how the Linux one looks, but it’s what it is.
+
+      ## OLED 📺
 
       <blog-media
         :src="url('oled.jpg')" 
         alt="close-up photo of the OLED screen" />
 
-      I drew and implemented my own graphics for the keyboard’s built-in OLED. You must have already seen them in the examples above. The OLED shows the current active layer, the current OS mode, and any active modifiers.
+      I drew and implemented my own graphics for the keyboard’s built-in OLED. You’ve seen some of them from the examples above. The OLED shows the current active layer, the current OS mode, and any active modifiers.
 
       <blog-media
         :src="url('legend.png')" 
         alt="OLED icons legend" />
 
-      The OLED is a tiny 32×128 pixel screen, and QMK works in tiles of size 6×8 pixels. It has been a struggle making legible tile graphics for this, but I think they turned out fine (for my purposes).
+      It has been a struggle to make legible tile graphics at a very low resolution, but I think they turned out fine for my purposes.
 
-      ### Layer lock
+      ## Layer lock 🔒
 
       Sometimes it gets tiring to hold down a layer key for long. Like when browsing a web page, I would want to have Page Down and Page Up readily accessible.
 
       _Layer Lock_ to the rescue. I used another of Getreuer’s modular QMK libraries, the [**Layer Lock library**](https://getreuer.info/posts/keyboards/layer-lock/index.html), which was really easy to plug in.
 
-      ### Gaming mode / QWERTY
+      ## Gaming mode / QWERTY 🎮
 
       <lily58 :keys="QWERTY_LAYER_JSON" :oled-left="url('qwerty_mode_oled.png')" :oled-right="url('qwerty_mode_oled.png')" />
 
       I play video games on my computer. Games almost always default to a QWERTY layout, and I couldn’t be bothered to remap the keybindings to my own keyboard layout.
 
-      Thus, **QWERTY mode**. It’s technically a layer, but it doesn’t really overlay with the base layer, so I call it a _mode_.
+      Thus, **QWERTY mode**.
 
-      The interesting bit here is the <kbd>Chat</kbd> key. It’s a function to temporarily activate the original layers for the purpose of chatting in-game. I’m not used to typing on QWERTY on this particular keyboard. Upon sending a message (on `Enter`), it reverts back to QWERTY mode so I can get back to the action in no time.
+      The interesting bit here is the <kbd>Chat</kbd> key, which temporarily activates the base layer for the purpose of chatting in-game. Upon sending a message (on `Enter`), it reverts back to QWERTY mode so I can get back to the action in no time.
 
       It’s not perfect. When gaming with a mouse, I don’t have access to the right half of the keyboard, as it becomes either too far or inconvenient to reach. It’s a problem if, say, I needed to press the number <kbd>6</kbd> to activate the 6th item in my inventory.
 
-      Often I end up remapping keybindings anyway, just to fit within a split QWERTY layout.
+      Often I end up remapping keybindings anyway, just to fit them within the left half.
 
       ## Conclusion