https://github.com/vasll/keyboardheatmap
Frequency-based heatmaps for keyboard layouts
https://github.com/vasll/keyboardheatmap
Last synced: 3 months ago
JSON representation
Frequency-based heatmaps for keyboard layouts
- Host: GitHub
- URL: https://github.com/vasll/keyboardheatmap
- Owner: vasll
- Created: 2023-03-14T09:26:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-22T08:57:01.000Z (about 2 years ago)
- Last Synced: 2025-01-06T07:49:18.558Z (5 months ago)
- Language: Svelte
- Homepage:
- Size: 749 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# KeyboardHeatmap
Draw a keyboard heatmap based on a keyboard layout and a language to show the most frequently typed keys
## Why?
### The issue with modern keyboards
Carpal tunnel and RSI are pretty common injuries amongst programmers who type all day on a keyboard, there are many factors that contribute to these types of injuries like bad posture and the ergonomy of your setup, one of these factors is also the layout of your keyboard.
### The QWERTY layout
You are most likely using the good ol' QWERTY layout on your keyboard which was born around the year 1870 and originally created exclusively for typewriters, but in the end it got adopted to keyboards. The issues with this layout are many but the biggest ones are:
- The keys are staggered and not placed in an [ortholinear position](https://tech-fairy.com/wp-content/uploads/2020/09/60-Keyboard-Staggered-VS-Ortholinear-Layout.jpg)
- Since it was intended for typewriters which can jam when typing fast, the letters have been placed so that they are distributed in the most homogenous way possible, this makes the wrists and fingers move a ton.
Modern keyboard layouts like [Colemak](https://colemakmods.github.io/mod-dh/) place all the most commonly used in the middle row, making the typing experience better for your fingers and wrists. I created this tool to visualize the heatmap of letter frequencies on different layouts. _Keep in mind that basing a layout on the frequency is not enough, many layouts use other techniques and each one has its perks._
## Example visualization
There are some predefined layouts and languages already loaded into `/src/stores/` that you can use
Layout: `colemak-dh-ansi` Language: `english`
