Tangent's Blog

CharaChorder and Forge related articles and notes

Introduction

TanChord Code Library (TCCL) language is a language used to describe a chord library in TanChord Code (TC Code) editor. This reference will explain the language’s syntax.

It’s recommended to read the chords page in the official CharaChorder document and know about “chord”, “chord input”, “chord output”, and “chord notation” before reading this language reference.

Key Notation

The fundamental element of chord input and chord output is a key. In this section, I will explain how to describe keys in TCCL.

For English letters (upper and lowercase), numbers, and a few supported symbols, you can directly use the character itself to specify the corresponding key on the QWERTY OS layout (or corresponding CCOS action code). For example, b is the b key, 2 is the 2 key, and / is the / key.

In the chord output, the space character is the right space key, but you cannot use this character at chord input.

For other keys or actions, you can use the CCOS action code number enclosed in angle brackets to specify any of them. For example, <558> is the action that activates a dynamic library, and <559> is the action that returns to the base library.

Below is a table of these keys for reference.

TypeSyntaxExampleRemark
Letter Key[a-zA-Z]a, A , b
Number key[0-9]1, 2, 3
Symbol key[, ], ., /, -[, -
(Right) Space key It can only be used in chord output.
Action code<ACTION_CODE_NUMBER><558>, <559>

Chord Notation

Next, we will learn how to describe a chord.

First, let’s look at a simple example. Here is a chord whose input keys are b and c, and its output is because.

1
b + c = because

Similar to the chord notation defined in the official CharaChorder document, we use + to separate the input keys and use = to separate the input and output. The spaces around + and = are necessary to make it more readable and easier to be parsed. The chord output is just a series of keys without any separator.

So the general syntax of a chord can be described as:

1
K + K + ... = KK...

, where you can replace any K with any key notation defined above.

Chord Library

A TCCL file describes a whole chord library. Each non-empty line is a chord notation that represents a chord. An empty line is required at the end of the file.

Let’s take sample 1 from the TC Code editor as an example.

1
2
3
4
5
6
b + c = because
y + o + u = you
b + a + k = back
d + o + w + n = down
i + m + p = important

It is a chord library with five chords.

Compound Chord and Dynamic Chord Library

ℹ️ Dynamic chord library activation chord is a special kind of compound parent chord that will hold its input in the background, so you can access its children chord after it is activated. TCCL uses the same way to describe them.

In the official CharaChorder document, the pipe symbol (|) is used to separate sequential chord inputs in a compound chord. For example, w + b + s + t | c + h + a + r = www.charachorder.com means you need to chord w+b+s+t and then chord c+h+a+r, to get the output “www.charachorder.com”.

That format is good when you only describe a compound chord. But for a chord library, there may be many redundancies when multiple compound chords share the same ancestor(s), or many chords under a dynamic chord library. For example,

1
2
3
4
5
6
7
// PAY ATTENTION! This is NOT the syntax of TCCL!
s + m = some
s + m | t + g = something
s + m | b + o = somebody
s + m | o + n = someone
s + v = several

So in TCCL, inspired by languages such as Python and YAML, indentation is used to specify the parent-child relationships between chords. For example, the TCCL file describing the chord library above would be:

1
2
3
4
5
6
s + m = some
t + g = something
b + o = somebody
o + n = someone
s + v = several

And here is another example, the sample 3 of TC Code. It has a dynamic chord library, lib1, a chord for returning to the base library, and a chord a + r = arm under the lib1.

1
2
3
4
i + l = <559>base
l + r = <558>lib1
a + r = arm

Regarding indentation size, using two spaces is recommended, and it’s also the default setting in TC Code.

Conclusion

That’s all you need to know to code your chord library in TCCL language. TCCL language aims to be a convenient and straightforward way to describe chord libraries. Thanks for your reading!

ℹ️ Disclaimer: These extensions are not affiliated, associated, authorized, endorsed by, or in any way officially connected with CharaChorder, Keybr or Monkeytype.

Keybr CC Extension

Monkeytype CC Extension

Feature

  • Display the device layout of CharaChorder 3D input device on Keybr or Monkeytype
  • Allow uploading a custom device layout
  • Support changing the position, size and transparency of the device layout
  • Support setting for difference OS keyboard layout

Side topic

Reason for making these extensions

There are already a few practice tools that show the visual guide of CharaChorder 3D input devices, such as dot i/o and Alnitak. These tools provide different strategies for learning the device layout. However, Keybr’s unique learning strategy stands out, which is why many CharaChorder users prefer it. However, there are some users who favor Monkeytype over Keybr.

To better meet the needs of CharaChorder users, I decided to enable Keybr and Monkeytype to display the layout of CharaChorder 3D input devices.

Reason for choosing to make a browser extension

There are many ways to modify an existing open-sourced website like Keybr and Monkeytype, including:

  1. Directly contributing to its repo
  2. Forking it and hosting the modified website on our own
  3. Using extension like Tampermonkey to inject JavaScript to it
  4. Making a browser extension to modify and extend its functionality

About the first way, I’ve looked into the source code of Keybr. The keyboard geometry logic in it is for 1D keyboards, as you can see in its layouts page. It takes lots of work and review efforts to make it support the CharaChorder 3D keyboard directly. Not to mention the handling of the CharaChorder action codes to support a custom device layout JSON file. On the Monkeytype side, there’s not even basic support for displaying keyboard layouts.

About the second way, besides the efforts to modify the source code, hosting and updating the website is a non-stop work, especially for websites that store users’ information on the server. It’s also bad for users to have two similar websites with different data.

About the third way, the amount of code to show a dynamic device layout is not small. Also, we need to have a way to teach users from installing Tampermonkey to running the script. It’s not a good choice for both the developer side and the user side.

The last one, making a browser extension, is the way I chose. On the developer’s side, this prevents me from studying tons of the source code of Keybr and Monkeytype. I just need to figure out how to get the current character, hide the original layout, and show my component on their websites, and I can write other things in this extension. Also, I can freely decide the tech stack and work individually. On the users’ side, users only need to go to the web store page, add this extension to their browser, and everything gets done. It is a win-win solution.

Logo and icon design

Unlike a website, a browser extension requires additional images, such as an icon for the extension section in the browser and a logo for the extension market.

Since Keybr CC Extension is for Keybr, I was inspired by the simple design of Keybr’s own logo, which features a section of tilted keyboard layout. The first logo I created for this extension was simply a screenshot of the tilted device layout as shown by this extenion.

image

However, when displayed on the browser toolbar, this logo becomes quite small and difficult to recognize, especially using the browser’s dark theme.

To address this, I designed a second logo (and now current). This new logo features just a switch, with the north, west and south keys highlighted. The design forms a “C” shape, representing the CharaChorder, and it is recognizable at small sizes.

icon-128

For the Monkeytype CC Extension, I created a similar one with Monkeytype’s theme.

icon-128

Layout design

When developing the layout component, my initial approach was to copy the SVG from the layout on Alnitak, a practice tool I built for CC 3D input devices, to create a proof-of-concept version. Below is a screenshot from that stage. At this point, the extension could detect the current character in Keybr and highlight the corresponding key in the layout.

image

As shown, the layout style did not match Keybr’s aesthetic. After researching Keybr’s theme and styling, I found that the website uses CSS variables for its theme colors and fonts. I decided to adopt these CSS variables and apply them to the layout component. This approach allows the layout to adapt to Keybr’s theme settings and ensures visual consistency with the rest of Keybr’s elements.

screenshot-dark-cc1

screenshot-m4g-light

For Monkeytype, since it also uses CSS variables for theme colors and fonts, I applied the same approach in the Monkeytype CC Extension.

screenshot-dark-cc1

screenshot-light-m4g

Reason for choosing React

If you look at the tech stack I use in my other projects, you’ll see that I primarily use Angular as my frontend framework. Angular is the framework I’m most familiar with, and I use it in my full stack engineer role. However, I am still able to work with other options like React and Vue.

For this extension, I chose to use React instead and rewrote the layout component from Alnitak for two main reasons.

First, Keybr itself is built with React, so using the same library helps avoid unexpected issues that could arise from introducing a different frontend framework or UI library. (Monkeytype is built without any frontend frameworks or UI libraries.)

The second reason is performance. While Angular is well-suited for building complex websites like Alnitak, it is too heavy for simply displaying a device layout component. Therefore, I prefer a lightweight option like React for this extension.

Tech stack