Log in
Sebastiaan Andeweg
Seblog.nl

Seblog.nl

Adding a prefix to TailwindCSS classes with VIM

Today we needed to add a TailwindCSS prefix to a small project we are building, to prevent clashes with other TailwindCSS classes on the same page. The setting in the tailwind.config.js was straightforward, we added this:

module.exports = {
  prefix: 'sf-',

... and now TailwindCSS will generate classes like .font-bold and .border-none as .sf-font-bold and .sf-border-none. Next up, we needed to replace all the classes in the project with their prefixed counterpart.

There were some plugins available to do this automagically in Webpack, but we decided we wanted to add them manually. A few of the classnames are dynamically set, and we doubted the plugins would find all those cases. Also: the plugins seemed to be old.

My co-worker started writing a regex for a search-and-replace, but soon stranded. You need to find the proper locations, and then within those locations, add the prefix. The prefix, however, is sometimes more of an infix, since there are other prefixes that are added before the prefix itself. See the class with md: for example:

<div className="bg-gray-100 px-4 md:px-0">
// Becomes:
<div className="sf-bg-gray-100 sf-px-4 md:sf-px-0">

While he worked on the regex and subsequently went to get coffee, I thought: I should be able to solve this in VIM in some way. I know I can make a visual selection and then type :! to get the selection as input into some shell command. If I pipe the lines to some script, I can then just split strings all I want.

One problem I ran into was that, if I make a visual selection within quotes (vi") and I then use the colon-exclamation to pipe it to some script (:'<,'>! php transform.php), I will receive the full line, as if I was using the line-wise V selection.

While searching the internet I thought: can I use a register here? And the internet had a solution for that. I ended up running the following command:

:vmap m "ay:call setreg('a', system('php transform.php', getreg('a')))<cr>gv"ap

This sets up a mapping for visual mode, and binds the m to do a series of things. It first selects the 'a' register and yanks ("ay). Since we are already in visual mode here, y is a direct yank of that selection. We are now in normal mode, so we continue to type out a command that calls a function to set register 'a' again with the output of a system call to php transform, taking in the current contents of register 'a'. We execute this command by pressing enter (<cr>). Register 'a' now contains the scripts output. We then re-select the last visual selection (gv in normal mode) and then paste from register 'a' ("ap). This effectively runs the script over the visually selected area.

I then just opened the alphabetically first file of the project and manually made visual selections that selected all the classnames. For this, I also temporary mapped m to vi", so I could just do mm once my cursor was in a className="..." (for which mouse mode is nice too: click + mm, very fast). Then, to get to each next file, just press ]f.

The project was small enough to do this last part so manually, but this at least saved me a lot of stops in between all the classnames, and also saved me the headache to scan for md: prefixes and pick the right spot. Even when the classnames were actually in a backtick-string it was no problem: as long as I defined a correct visual selection, m would replace things.

For completeness, here is transform.php:

<?php

$input = file_get_contents('php://stdin');

$classes = array_filter(explode(' ', $input));

$classes = array_map(function ($class) {
    $parts = explode(':', $class);
    $parts[count($parts)-1] = 'sf-'.$parts[count($parts)-1];
    return implode(':', $parts);
}, $classes);

echo implode(' ', $classes);

Ik blijf hiervan schrikken... Een raar rommelend geluid, eigenlijk best wel dichtbij, ergens op je bureau zelfs. Zijn het je boxjes? Die staan uit. Komt het uit je monitor? Onwaarschijnlijk. Regent het ergens naar binnen? Geen raam hier. Zit er soms een beest binnen?

Nee, het is je externe harde schijf, zoals elke keer als je een backup maakt.

Zojuist ging opeens het licht uit. Dus ik denk: huis, wat is dit? Het ging namelijk met een kleine fade-out, niet direct, dus ik wist dat het niet aan de elektriciteit lag.

Toen bedacht ik me: ik had net even verbindingsproblemen op mijn iPhone, dus ik had wifi even uitgezet om te zorgen dat hij via 4G verbonden was.

En inderdaad, ik zet op mijn iPhone de wifi weer aan en direct gaat het licht aan. Welkom in 2022.

Toetsenborden: 34 toetsen, hoe dan?

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Ik wilde ze serie afsluiten met een stuk over hoe ik de 34 toetsen van mijn nieuwe toetsenbord heb ingedeeld. Want inderdaad, dat is best wel weinig. De Apple Magic Keyboard heeft er 79, de Moonlander heeft er 72, de eerder gelinkte video eindigt met een minimalistisch toetsenbord met maar 36 toetsen en dan nóg heeft de Ferris twee toetsen minder.

Zoals de video uitlegt: één van de strategieën om hiermee om te gaan, is het concept van layers. Zodra je de Shift-knop indrukt wordt de betekenis van vrijwel alle toetsen anders: alle letters veranderen in hoofdletters, maar cijfers en tekens veranderen in andere tekens. Door naast Shift een aparte ‘Symbol’-knop toe te voegen kan je in een kleiner aantal toetsen nog steeds heel veel tekens kwijt.

q w e r t   y u i o p
a s d f g   h j k l ;
z x c v b   n m , . /

1 2 3 4 5   6 7 8 9 0
! @ # $ %   ^ & * ( )
[ ] ` ~ '   " _ = + -

Toch kreeg ik het niet helemaal passend. In het bovenstaand voorbeeld mis ik toetsen voor {, }, \ en |, en eventueel § en ± – al gebruik ik die niet zo vaak. Een oplossing was om ook een ‘Num’-layer toe te voegen, maar die kreeg ik dan vervolgens niet helemaal vol. Daarnaast wilde ik een navigatie-layer, met pijltjes en volume, en voor je het weet heb je met Shift, Symb, Num en Nav al vier toetsen bezet, terwijl er dus maar vier zijn voor de duimen en ik één daarvan spatie wil houden en nog iets met Cmd en Ctrl wil.

Ik heb het nog even gezocht in het prachtige concept van de tri-layer. Hierbij heb je dus een knop voor Lower en een knop voor Raise, die dus elk een eigen layer activeren, maar dus ook tegelijk kunnen worden gebruikt voor weer een hele nieuwe layer. Helaas had ik dan nog steeds één layer teveel en vooral duimknoppen te weinig. (Andere helaas is dat je dit niet kan instellen met de Configurator en echt de code in moet duiken, maar daar voel ik me gelukkig best thuis.)

Je zou ook kunnen werken met een meer bladerend principe, waarbij je van Layer 1 naar Layer 2 komt door éénmaal op een knop te drukken en dan los te laten. Van Layer 2 kan je dan naar Layer 3 komen via een andere knop, en als je zorgt dat je vanaf elke andere layer steeds weer naar Layer 1 kan via dezelfde knop ben je in principe nooit de weg kwijt, zegt deze video, maar ik durfde het toch niet helemaal aan.

De standaardconfiguratie van de Ferris lost het probleem op door ‘Mod-Taps’ te gebruiken. Het idee hierbij is dat je een toets iets anders kan laten doen voor het indrukken en loslaten dan voor het indrukken en vasthouden. Wie de linkerknop met het bultje indrukt en loslaat krijgt een F, maar wie diezelfde knop vasthoudt komt in een Symbol-layer terecht, waardoor andere knoppen daarna symbolen geven. Het is vrij ingenieus en behoorlijk efficiënt, maar ik vind het persoonlijk erg irritant dat bepaalde letters niet direct op mijn scherm verschijnen.

Momenteel gebruik ik Combo’s om al mijn toetsen kwijt te kunnen. Ik sluit niet uit dat het nog eens gaat wijzigen in de toekomst, maar momenteel ben ik er tevreden mee. Het idee is als volgt: wie op de Q drukt krijgt een Q en wie op de A drukt krijgt een A, maar QA samen ingedrukt geeft een 1 (de toetsen sluiten op elkaar aan, dus heel lastig is het niet). Op die manier is de hele bovenste + middelste rij vol met getallen, en de middelste + onderste rij bevatten alle tekens, plus de Tab (T). Op de standaardlayer heb ik een Backspace (B) en Enter (E).

q w e r t   y u i o p
a s d f g   h j k l B
z x c v b   n m , . E

1 2 3 4 5   6 7 8 9 0
` - = T \   / ' ; [ ]

Merk op dat ik eigenlijk een andere layout gebruik dan Qwerty, maar ik wil deze post niet nog obscuurder maken dan het al is. Merk ook op dat er helemaal geen letters op mijn keycaps staan, dus daar hoef ik me niet door te laten afleiden. En merk op dat ik hier alleen vertikale combinaties gebruik: als ik netjes elke vinger voor de juiste kolom gebruik kan ik nooit per ongeluk een cijfer typen omdat ik de toetsen te snel achter elkaar indruk. (En mijn andere layout zorgt ervoor dat dergelijke combinaties op dezelfde vinger ook vrijwel nooit voorkomen.)

Wat ik hier ook fijn aan vind is dat ik hiermee geen enkele duimknop hoef op te geven voor layer-navigatie. Alle knoppen zijn gewoon vlak onder mijn vingers en los van de combinatie zelf heb ik er dus geen extra knop voor nodig: het aantal gelijktijdig ingedrukte knoppen blijft twee, maar slechts op één vinger. Voor sommige wordt dit drie: de twee knoppen voor 1 plus Shift erbij geeft een uitroepteken. Nog steeds erg overzichtelijk.

Dan voor de duimen op links zitten Shift en Command (Cmd) en op rechts zitten Ctrl/Escape en Spatie. Omdat ik veel programmeer in Vim heb ik Escape vaak nodig, maar hij combineert nooit echt met Ctrl, en hier is de vertraging net iets minder hinderlijk, dus hier heb ik de Mod-Tap techniek wel toegepast. Nergens op de duimen dus momenteel een Layer-switch.

Maar de pijltjestoetsen dan? Daarvoor heb ik op beide handen toch nog een layer weten te verstoppen: als je, als combo, je hele hand op de rechterzijde neerlegt, worden de middelste toetsen op de linkerhand een set aan pijltjestoetsen in WASD-style. Hetzelfde werkt ook andersom, maar dan besturen ze de muis-cursor, in HJKL-style. In beide layers zitten ook media-controls voor volume en play/pause.

- - ^ - -   - a l t !
- < v > -   - X X X X
- - - - -   - h y p r

a l t ! -   - - - - -
X X X X -   - < v ^ >
h y p r -   - - - - -

Als je dezelfde vier vingers één rij naar boven doet krijg je een Alt-toets. Dit werkt op beide zijden, zodat je het met je andere hand kan doen als je hem wil combineren met één van de toetsen in die rij. In de onderste rij is dit de Hyper-knop, wat weer een wereld op zich is. In kort: Hyper is Shift+Ctrl+Alt+Cmd, wat een idiote combinatie is die niemand kan indrukken en daarom altijd nog vrij is, ideaal voor je eigen globale shortcuts. Ik kan Hyper combineren met cijfers om snel naar bepaalde programma’s te springen dankzij Hammerspoon, en nog wat meer dingen.

En dat was het. Ik ben er vrij zeker van dat er nog bepaalde zaken gaan veranderen in mijn configuratie, maar vooralsnog ben ik hiermee tevreden. Het was nogal een konijnenhol, hopelijk heb ik jullie niet al te ver meegetrokken. Dan ga ik nu weer even verder oefenen op Monkeytype. Doei.

Toetsenborden: mijn persoonlijke Andeweg layout

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Laat ik beginnen met een disclaimer: ik ben nog heel erg bezig met het leren van deze layout, en erg hard gaat dat niet omdat alle toetsen op een andere plek zitten (behalve één, bij toeval). Toch denk ik dat ik er geen grote wijzigingen meer in aan wil brengen, dus hier is hij:

z l u w v   f p o d ,
h r e s g   b n a t i
k j / m x   q c ; y .

Veel plezier ermee, dank voor het lezen.

Nee, ik zal iets meer uitleg geven bij deze ogenschijnlijk willekeurige rangschikking van letters. Het is gebaseerd op de ISRT-layout, maar dan dus totaal anders, met ook een paar andere design-overwegingen.

Laat ik beginnen bij waar we waren gebleven: Colemak voor het Nederlands. Colemak is beter dan Qwerty in veel opzichten, maar heeft daarbij wel wat keuzes gemaakt die beter uitpakken voor Engels dan voor Nederlands. Door de nieuwe locatie van de J, K en L werd bijvoorbeeld het achtervoegsel -lijk heel erg lastig te typen, terwijl het op Qwerty best lekker gaat. Hoe dieper je optimaliseert voor een bepaalde taal, hoe minder lekker andere talen passen. Wat dat betreft is Dvorak een mooi compromis dat voor veel verschillende talen werkt.

Echter: de tijden zijn ook een beetje veranderd. Om een typemachine te maken heb je een productielijn nodig; daar is behoefte aan een layout die universeel is. Dankzij het wonder van software is het wijzigen van een layout tegenwoordig veel en veel simpeler. We kunnen het ons veroorloven om te optimaliseren voor kleinere eenheden, zoals het relatief kleinere taalgebied van Nederlands. Maar waarom daar stoppen? Het zijn mijn handen, ik kan een persoonlijke layout creëren die geoptimaliseerd is voor het schrijven van Nederlands én Engels, precies in de mix zoals ik het gebruik.

Dit is waar ik op het idee kwam om de teksten op dit weblog te gebruiken. Ik heb nogal wat tekst geschreven en gepubliceerd hier, in zowel Nederlands als Engels. Het corpus dat ik daaruit samenstelde bevat 248.220 woorden in 1.560.699 tekens (inclusief spaties, etc). Vervolgens heb ik scripts geschreven om daar frequenties van letters, lettercombinaties en woorden uit te kunnen halen, om zo een beter toetsenbord samen te stellen.

Gewapend met die data nog een andere overweging. Ik merk aan mijn handen dat in de overgang van Qwerty naar Colemak, mijn rechterhand veel meer is gaan doen dan mijn linkerhand, relatief gezien. Dit blijkt te kloppen: op basis van mijn weblog-teksten heeft Qwerty een handverdeling van 60%/40% en Colemak een verdeling van 39%/61%. Vooral het verplaatsen van de E is een grote: 16.2% van alle letters is een E.

Zoals ik net al zei is mijn layout gebaseerd op de ISRT-layout. Deze layout probeert ‘same finger bigrams’ te voorkomen: veelvoorkomende lettercombinaties die je met dezelfde vinger zou moeten typen. Die zijn kostbaar, omdat je niet alvast je andere vinger kan klaarzetten terwijl je een toets indrukt. Een layout die de E, T, N, A, I en O aan één wijsvinger toewijst is erg inefficiënt in dit opzicht.

Het nadeel van ISRT is dat het zwaar geoptimaliseerd is voor Engels. In het Nederlands zijn de frequenties van lettercombinaties gewoon niet hetzelfde. Maar gelukkig heeft de maker zijn scripts online gezet, en heb ik dus een bak tekst die ik het kan voeren. Omdat er een element van randomness in zit krijg je telkens nét andere layouts, maar hier is wat er uit kwam rollen nadat ik de iteraties lekker hoog had gezet:

0    1    2    3    4    5    6    7    8    9
u    d    l    f    b    g    k    w    .    o     27.4
e    t    r    n    p    m    h    s    i    a     63.7
'    y    j    q    c    v    z    x    ,    ;     08.9
18.0 13.2 10.6 09.0 04.9 06.9 06.5 07.0 09.6 14.4

Merk op dat deze layout verschrikkelijk is: het gooit 18% van alle aanslagen op de linkerpink. Maar het is een mooi overzicht met scores, dus dit heb ik in Number (Excel) gegooid, zodat ik makkelijker met kolommen kon schuiven en totalen berekenen.

Na wat schuiven kwam ik tot deze layout:

zluwvcfod,
hresmpnati
kj/xgbq;y.
6,510,61876,94,9914,413,29,6

Deze layout heeft een handverdeling van 49%/51%, wat ik erg acceptabel vind. Het lijkt alsof de wijsvingers weinig te doen hebben, maar bedenk dat ze verantwoordelijk zijn voor twee kolommen. Als je die bij elkaar op telt kom je voor beiden op 13,9% uit, wat juist een hele mooie verdeling geeft ten opzichte van de andere vingers.

Tot slot heb ik de letters op elke wijsvinger nog wat beter neergezet op basis van frequenties. De plaatsing is hier ontzettend beïnvloed door de layout van de Ferris Sweep waar ik dit nu op gebruik. Als je ‘m op een traditioneel toetsenbord wil gebruiken zou ik de indeling voor de wijsvingers anders hebben gedaan (de plek van de Qwerty Y is erg lastig – zet daar de Q neer – terwijl de Qwerty N juist erg simpel is – zet daar de F).

Dit alles brengt ons dus tot deze layouts:

z l u w v   f p o d ,
h r e s g   b n a t i
k j / m x   q c ; y .
z l u w v q p o d ,
 h r e s g b n a t i
  k j / m x f c ; y .

Ik ben er nog niet heel bedreven in, maar ik ben vrij zeker dat ik op het moment van schrijven de snelste persoon ter wereld ben op deze layout. Het is een goede gewoonte om een toetsenbord-layout naar de achternaam van de maker te noemen (Dvorak, Colemak, Norman), dus noem deze dan de Andeweg, maar Zluw kan natuurlijk ook.

Een laatste variatie nog. De Ferris Sweep heeft heel weinig toetsen en in de laatste aflevering van deze serie wil ik het nog hebben over hoe ik dat oplos. Twee hele toetsen voor / en ; is echter een beetje zonde, dus ik heb besloten dat / wordt vervangen door Enter en ; door Backspace. Die heb ik momenteel op de aangegeven plekken zitten, maar ik overweeg om die gekke middenplekken aan , en . te geven, zodat ik Backspace en Enter op de rechterpink heb. Dit verandert wel de bigram-scores, dus ik ben er nog niet helemaal uit, maar dit kan.

Morgen de laatste aflevering van deze serie, hopelijk, over de 34 toetsen van de Ferris.

Toetsenborden: hoe leer je een andere layout?

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Zoals ik deze week al liet doorschemeren ben ik bezig mezelf een nieuwe layout aan te leren op mijn nieuwe toetsenbord. De meeste mensen gebruiken Qwerty, eerder deze week introduceerde ik een versie van Colemak voor Nederlands en morgen omschrijf ik mijn nieuwe layout.

Voor mijn ‘Colemak Mod-NL’ heb ik ongeveer 60 woorden per minuut gehaald, dus wilde ik een blogpost schrijven over hoe je dat moet doen. Mijn nieuwe layout verplaatst echter alle toetsen, en daarvoor is nog weer iets meer moeite nodig. In deze post dus ook de geüpdatete strategie.

Maar voor ik wat tools deel: dit kost tijd en moeite. Veel tijd en moeite. Is het het waard, als je al 70+ woorden per minuut op Qwerty kan? Waarschijnlijk niet. Maar ik vind deze alternatieve layouts wel dusdanig ‘lekker’ aanvoelen dat ik wel gewoon doorga met – jawel – uren investeren.

Als je gewoon eens wat wil proberen raad ik aan om eens te kijken naar DitchQwerty.com. Het geeft je een hele lijst aan Qwerty-alternatieven, opgedeeld in levels die steeds een hand vol nieuwe toetsen introduceren. Ook kan je hem gewoon gebruiken met je standaard Qwerty-toetsenbord: de site vertaalt de toetsen naar de nieuwe layout. Als je zelf al een Qwerty-alternatief hebt ingesteld kan je deze vertaling uitzetten door in de instellingen (rechter bovenhoek) het vinkje ‘Key Mapping’ uit te zetten.

Mijn favoriete tool voor het leren van een nieuwe layout, of gewoon sneller Qwerty, is Keybr.com. Deze geeft je onzin-woorden gebaseerd op echte patronen (helaas wel Engels), voor de letters E, N, I, T, R en L. Zodra je een snelheid van 35 woorden per minuut hebt opgebouwd krijg je daar een letter bij.

Keybr kan net als DitchQwerty toetsenborden voor je vertalen, maar aangezien ik de keymapping tegenwoordig in mijn toetsenbord zelf programmeer laat ik hem meestal op Qwerty staan. Merk ook op dat de volgorde van de letters gebaseerd is op de frequentie van die letter in het Engels, waardoor je pas heel laat de J krijgt, terwijl die in het Nederlands veel belangrijker is.

Als je echt helemaal from scratch een nieuwe layout gaat leren, kom je bij Keybr op een bepaald punt wel in de knoop. In de beginfase verspringt de ‘focusletter’ steeds naar de letter waar je het slechtst in bent, maar zodra je de S erbij krijgt, blijft S de focusletter, tot je de A krijgt, die dan de focusletter is, etc.

Voor het herleren van Qwerty werkt dit prima, maar bij het overschrijven van Qwerty werkt het minder goed. Ik merk dat mijn vinger nog best vaak naar de oude locatie van een letter wil gaan. Helemaal als ik een nieuwe letter krijg die nu op die locatie staat, kan een letter die ik eerder al op 35wpm heb gekregen, opeens helemaal terugzakken. Maar omdat Keybr alleen de nieuwe letter blijft boosten, kom ik daar slecht op terug.

Mijn oplossing hiervoor is een tijdje geweest om steeds opnieuw te beginnen in een incognito-venster, en dat werkt heel goed, maar het nadeel daarvan is dat je dan heel goed wordt in het schrijven van woorden met de beginset (ill, elen, eline), maar in latere combinaties je als nog in de knoop komt met – in dit voorbeeld – de L.

De échte oplossing hiervoor is om op de ‘settings’ knop te klikken en het schuifje ‘Add letters to words’ omhoog te schuiven. Op die manier krijg je alvast toegang tot meer letters, maar blijf je in de initiële modus van de verspringende focusletter. Telkens als ik een nieuwe letter vrijspeel ga ik even naar settings, plus ik die letter erbij, en reset ik, zodat ik met de verspringende focus kan blijven oefenen. (Dit scheelt me veel uren in het programmeren van mijn eigen tool.)

Een andere usual suspect is Monkeytype. Hier kan je bestaande woorden schrijven (ook Nederlands beschikbaar) in diverse modussen. Achteraf krijg je een leuk grafiekje van hoe snel je was. Ook interessant is deze ngram tool, waarmee je tweeletter- en drielettercombinaties kan oefenen, de bouwblokken van woorden als het gaat om typen. Ook deze zijn weer op het Engels gebaseerd, maar desalniettemin fijn. Alleen al voor afwisseling met Keybr zijn het fijne tools.

Wie gewoon sneller wil typen moet vooral ook meer gebruik maken van Option + Backspace, om een woord in één keer te verwijderen, en überhaupt Option + pijltjes om sneller door je tekst heen te springen. (Option is Alt, maar verder weet ik niet precies hoe goed dit zich vertaalt naar Windows en Linux. Op Mac werkt dit fantastisch. Verder zou je natuurlijk eigenlijk overal Vim-bindings moeten hebben maar dat is een ander onderwerp.)

Morgen dus meer over mijn nieuwe layout!

Toetsenborden: De Ferris Sweep

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Deze post liet even op zich wachten, want ik wilde hier eigenlijk iets schrijven over goede manieren om een nieuwe layout te leren. Aangezien ik dat nu zelf aan het doen ben en een beetje struggle stel ik die post nog even uit. Daarom nu eerst: dit is mijn nieuwe toetsenbord!

Het is een Ferris Sweep, wat wil zeggen dat het een wat makkelijker in elkaar te zetten Ferris is. Het is een split keyboard met een best heftige column stagger: de toetsen verspringen per vinger en volgen daarmee heel erg de vorm van in elk geval mijn type hand.

De stagger lijkt ontzettend overeen te komen met die van de Kyria (gemaakt door een Nederlander). Die laatste heeft echter 40 tot 46 toetsen, terwijl de Ferris er maar 34 heeft. En oké, ik moet wel toegeven: dat is vrij weinig.

Ik wilde in deze blogpost nog wat info geven over de manier waarop ik een toetsenbord in 34 toetsen prop, maar aangezien ik de Ferris pas sinds dinsdag echt af heb, ben ik daar nog te veel mee aan het stoeien om te delen. De basis ervan werkt in elk geval al wel prima. Het is heerlijk om de tekens naar je vingers toe te laten komen, in plaats van je vingers de hele tijd naar de tekens te brengen.

Qua verslag over het bouwproces kan ik deze video aanraden, want dat zijn de stappen die ik zelf ook gevolgd heb. Het was best een avontuur en iets waarvan ik eerlijk gezegd niet had gedacht dat ik het kon, maar met gewoon beginnen kom je een heel eind.

Rest me niets anders dan nog een paar foto’s te delen. Binnenkort meer over de indeling. O en ik heb nog wat PCBs over, mocht je er ook een willen bouwen...

Toetsenborden: Colemak voor Nederlands

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Eergisteren vertelde ik over hoe ik overstapte van Qwerty op Colemak en weer terug en weer terug. Nou ja, terug. Momenteel gebruik ik dus Qwerty op mijn Apple toetsenborden (inclusief die in mijn MacBook) en Colemak op de Moonlander. Maar niet helemaal Colemak, daar ga ik het vandaag over hebben.

Het probleem met een efficiënte toetsenbordindeling met compromissen zoals Colemak, is dat er altijd andere compromissen te maken zijn. Vrij veel bronnen over Colemak vertellen je direct over het bestaan van ‘Colemak Mod-DH’. Voor het gemak, hier is Colemak, met wat ruimte om duidelijker te zien welke vinger wat moet doen:

Q W F P G   J L U Y ;
 A R S T D   H N E I O
  Z X C V B   K M , . /

Bij Colemak zie je dat de D en de H te verkrijgen zijn door de wijsvinger zijwaards te bewegen. Dit komt voort uit het principe dat de middelste rij het gemakkelijkste te bereiken is. Niet iedereen was het daar mee eens: de zijdelingse verplaatsing is wat onhandig. Mod-DH verplaatst de D en H naar de locatie van de V en de M, om zo net wat efficiënter te zijn, ten kostte van wat meer verschuivingen.

Nou ja, dacht ik toen ik het las: dat is optimaler voor Engels, maar dat hoeft niet per se waar te zijn voor Nederlands. En standaard Colemak is al beter dan Qwerty, dus laat ik dat gewoon doen. Maar dat is dus wel een punt: voor Engels, voor Nederlands…

Problemen voor het Nederlands

Eén van de problemen waar ik al snel tegenaan liep, is dat Colemak bepaalde letters enorm ‘straft’, die voor het Nederlands niet eens op zo’n heel gekke plek zaten op Qwerty. Het meest in het oog springend is de J, wat in het Engels gek genoeg de minst voorkomende letter van het alfabet is.

De J krijgt (zoals je hierboven zag) de linker bovenhoek van de rechterhand. Nou zit ik inmiddels op een columnar layout met de Moonlander (zoals gister uitgelegd), dus daarmee is het effect iets minder erg, maar het is nog steeds best wel een enorme uithoek van het toetsenbord. Daarnaast krijgt de Y (in het Nederlands de twee-na-zeldzaamste) een toppositie.

Zie Colemak bovenin en zoek het in het Nederlands toch behoorlijk veelvoorkomende achtervoegsel ‘-lijk’. Drie van de letters moet je typen met dezelde wijsvinger, en geen van die drie zit op de middelste ‘home-row’ rij. Ik kreeg hier gewoon echt een beetje pijn van in mijn hand. (Zoek ‘m ook even op op Qwerty: zie? Daar zit '-lijk' eigenlijk heel lekker in een driehoekje.)

Aanpassingen voor Nederlands

In stijl van Colemak heb ik dus een paar aanpassingen gedaan toen ik opnieuw begon met het gebruiken van de Moonlander. Ik wilde heel graag de R en S weer terug omdraaien, want ik vind dat een heel gekke aanpassing in Colemak, maar ik merkte dat dit al best diep in mijn muscle memory zat, dus ik heb die zo gelaten.

q w d p f   y h u l ;
 a r s t g   k n e i o
  z x c v b   j m , . /

De ‘-lijk’ is nog steeds niet optimaal, maar in elk geval al een stuk beter. Ik was over het algemeen best tevreden met deze layout en ben tot ongeveer 72 woorden per minuut gekomen, wat ik acceptabel en ook werkbaar voor werk vindt.

Full disclosure is wel dat ik veel met Vim werk en dus de maffe designoverweging heb meegenomen dat HJKL pijltjestoetsen kunnen zijn. In deze layout staat H netjes links van L en K netjes boven J.

Als je dit zelf wil proberen is het goed om te bedenken dat ik dit allemaal niet in software op mijn Mac oplos. De Moonlander is een ‘programmable keyboard’, wat wil zeggen dat je elke knop iets anders kan laten doen als je dat wil. Ze hebben daar een heel makkelijke website voor, waar je zelf die toetsen kan instellen en op je toetsenbord kan zetten.

Dit maakt dus dat mijn Mac gewoon denkt dat ik op Qwerty typ, terwijl stiekem alle toetsen op een andere plek zitten. Dit betekent ook dat ik mijn Moonlander in elke laptop of tablet kan pluggen en dan gewoon mijn eigen layout heb. Dat maakt zo’n persoonlijke layout ook bruikbaar: ik neem mijn eigen handen en eigen toetsenbord mee.

Maar goed, ik moet dus bekennen dat ik dit alweer niet meer gebruik. Inmiddels ben ik bezig een andere knotsgekke zelfgemaakte layout te leren, maar meer daarover later deze week in een eigen blogpost. Als je geïnspireerd bent om af te stappen van Qwerty, kijk ook naar die post, maar Colemak is wel veel makkelijker om mee te beginnen vanuit Qwerty, of kijk naar Minimak voor zelfs nog minder wijzigingen.

Toetsenborden: over split, staggered en columnar

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Kijk, ‘staggered’ verwijst naar een eigenschap van het toetsenbord dat je waarschijnlijk al kent. Als je naar een standaard toetsenbord kijkt, zie je dat elke rij net een beetje schuin staat ten opzichte van de rijen erboven en eronder. Sterker nog: geen enkele rij staat precies gelijk aan een ander (meestal). Dit is nuttig, omdat er onder elke toets een balkje zit, die beweegt zodra je erop drukt. Deze balkjes duwen dan vervolgens een hamertje op het papier, zodat letters verschijnen – wacht, dit klopt al een tijdje niet meer.

Deze erfenis van typemachines noemen ze een ‘row staggered layout’ of dus gewoon ’staggered’. Het hoeft technisch gezien helemaal niet meer, maar onze handen zijn eraan gewend en iedereen leert het zo, omdat het nu eenmaal zo is zoals het is.

q w e r t y u i o p
 a s d f g h j k l ;
  z x c v b n m , . /

Het idee van tien-vingerig typen – een techniek die ik zelf niet altijd helemaal goed toepas – is dat je elke vinger een eigen rij aan letters geeft. Zet je wijsvingers op de F en de J (daar zitten ook kleine bobbeltjes op) en vanuit daar vallen je vingers precies juist. Zoals gister besproken heeft Colemak net wat nuttigere letters direct onder je vingers hier, maar ook voor Qwerty is dit de way to go.

Maar als je toch elke vinger een aparte rij toewijst, waarom die rijen dan niet gewoon recht onder elkaar zetten? In het diagrammetje hieronder heb ik maar gelijk even een split toegepast, voor het overzicht.

q w e r t   y u i o p
a s d f g   h j k l ;
z x c v b   n m , . /

Dit was voor mij het moment waarop erachter kwam dat ik de B al jaren met de verkeerde hand typ (en nu waarschijnlijk nog steeds wel eens op mijn normale toetsenbord).

Deze rangschikking van toetsen in een grid heet ortholiniair en hoewel het even wennen is, denk ik wel dat dit een betere rangschikking is, omdat het meer de correcte tienvingerigheid van het typen onderstreept. De split in de diagram is trouwens optioneel: je hebt deze dingen ook in één groot blok.

Zoals gezegd heb ik dus de Moonlander gekocht, en als je goed kijkt zie je dat de toetsen op dat ding niet in een perfecte grid staan, maar juist steeds een beetje opschuiven per kolom (in plaats van per rij) zodat ze meer gelijk lopen met de manier waarop je vingers ook niet allemaal even lang zijn. Dit heet ‘column stagger’ of ‘columnar’, want alle toetsen schuiven op per kolom, niet per rij.

Na wat wennen en verfijning van mijn smaak vind ik de column stagger van de Moonlander niet sterk genoeg. Gelukkig is er zoiets als een ‘aggressive column stagger’, maar daar kom ik later deze week nog op terug.

O, ik zou ook nog iets zeggen over split. Nou ja: het geeft je vooral je een betere positie in je schouders. Ik merk het niet enorm, maar het is wel lekker, en ik ben natuurlijk ook vaak weer op mijn oude toetsenbord te vinden. Een kop koffie tussen je toetsenbord hebben staan is een beloning op zichzelf.

Dank voor het lezen van deze spreekbeurt. Misschien is deze video ook leuk, met voorproefje van wat er nog komt (minder toetsen). Morgen gaan we verder met Colemak voor het Nederlands.

Toetsenborden: dag Qwerty, hoi Colemak

Dit is onderdeel van een serie over toetsenborden, zie het eerste deel voor een overzicht.

Toen ik destijds de Moonlander bestelde was er een wachttijd van ongeveer vier weken. Het is een columnar split toetsenbord, en zo’n beetje elk Youtubefilmpje en blogpost die ik erover zag of las zei dat je ‘helemaal opnieuw moest leren typen’ op dit toestenbord, omdat de toetsen allemaal net een beetje zijn verschoven. (Morgen meer over columnar en split.)

Wat ik ook zag is dat veel mensen die herstart aangrijpen om daarwerkelijk een ander toetsenbordlayout te leren. Columnar is efficiënter, waarom dan niet ook gelijk iets efficiënters pakken dan het aloude Qwerty? Hoewel ik al jaren op de hoogte was van het bestaan van Dvorak, koos ik voor Colemak, om redenen.

Over Qwerty

Er gaat een mythe rond over Qwerty dat het ontworpen is om mensen slomer te laten typen, zodat de hamertjes in de typemachines niet vast kwamen te zitten. Ik zou zeggen dat dat meer waar is voor het niet-columnar aspect van het toetsenbord, maar daarover dus morgen meer. Qwerty is ontstaan uit een piano-toetsenbord met twee rijden, ABC tot en met LMN en daaronder M tot en met YXZ. Weet je, ik praat gewoon dit filmpje na, en een ander die ik nu niet meer terug kan vinden.

A B C D E F G H I J L M N
 . Z Y X W V U T S R Q P O

Je kunt stiekem nog best veel heen-en-weer alfabet terugvinden in Qwerty als je goed kijkt:

Q W E R T Y U I O P
 A S D F G H J K L ;
  Z X C V B N M . , /

Wat het filmpje ons vooral leert, is dat typen destijds een vak was, dat geleerd moest worden via een cursus. Het ontwerp van het toetsenbord ging dus vooral in eerste instantie over wat het beste was, maar daarna slechts over wat het meest gebruikt wordt. (Hallo Whatsapp.) Inmiddels hebben we Qwerty omdat we Qwerty hebben.

Een beter alternatief als Dvorak (niet de componist Dvořák) bestaat al sinds 1932, maar toch is Qwerty de standaard gebleven. Ik koos echter voor mijn nieuwe layout voor Colemak, die Qwerty als basis neemt en slechts enkele verbeteringen daarop doorvoert.

Q W F P G J L U Y ;
 A R S T D H N E I O
  Z X C V B K M , . /

De hele onderste rij blijft vrijwel hetzelfde, maar verder probeert het veelgebruikte letters, zoals klinkers en N, T, R en S, in het midden te plaatsen. Het idee is dat je daardoor niet de hele tijd je vingers hoeft te verplaatsen: als je je handen in het midden legt zijn de letters die je zoekt waarschijnlijk al direct onder één van je vingers te vinden.

Lessen van het overstappen

Eén van mijn eigen fouten bij het leren van dit nieuwe layout: ik dacht dat ik gelijk overal moest overstappen op Colemak. Ik ging dus nog voor mijn Moonlander binnen was (als voorbereiding) aan de slag met overstappen op al mijn toetsenborden, dus het Apple toetsenbord en ook de iPad. Het ging wel, maar ik was van de een op de andere dag een héél slome typer.

Wat ik mezelf met terugwerkende kracht meer zou aanraden, is om even te wachten tot de Moonlander er is. De mechanische switches van de Moonlander, maar vooral ook de split en de positie van de toetsen maken dat het ding heel anders aanvoelt dan mijn Apple toetsenbord. En gek genoeg onthouden mijn vingers dat.

Na een tijdje ging het namelijk gewoon niet meer. Ik moet voor werk gewoon veel dingen typen, en opeens maar 35 woorden per minuut kunnen produceren is dan best onhandig op sommige momenten. Mijn collega was ook eens overgestapt, en weer teruggegaan, dus interessant doen ging me ook niet redden. Uiteindelijk heb ik mijn Apple Magic Keyboard weer gepakt en ben ik net zo lang typing tests gaan doen tot ik Qwerty weer terug had (spoiler alert: dat gaat best snel, maar ook al mijn slechte gewoontes waren terug).

Toen ik maanden later weer eens de Moonlander aanraakte merkte ik dat Colemak nog steeds best wel enorm in mijn vingers zat, zelfs al was ik alweer maanden aan het typen (met de slechte gewoonten) op Qwerty. De moraal van dat verhaal is dus dat een toetsenbord met een andere feel best een andere layout kan hebben en dat je muscle memory dat prima bijhoudt. Ik typ nu Qwerty op mijn MacBook zelf en Colemak op de Moonlander, en dat is veel beter vol te houden als je af en toe een lap tekst moet produceren (zoals deze).

Bij het terugkeren naar Colemak heb ik wel een paar wijzigingen doorgevoerd, waarover overmorgen meer, want ik moet jullie morgen al over columnar en splits vertellen.

Seb doet toetsenborden

Het begon allemaal bij een foto die ik zag op een Discord-server. Ik ben al jaren (tien, ongeveer) een trouw gebruiker van de ingebouwde MacBook toetsenborden en de Magic losse varianten die Apple daarvan verkoopt. Daarmee dus ook Qwerty, de rechtopstaande Enter, en de §/±-knop, die ideaal is voor je eigen sneltoetsen, omdat er geen enkele standaard toetsencombinatie is die die knop gebruikt.

Maar het begon dus bij die foto, met daarop de Moonlander van ZSA. (Had ik al gezegd? Klikken en/of deze serie lezen is op eigen risico.) Het was het begin van een lang konijnenhol naar beneden (?) waar ik, met tussenpauzes, steeds dieper in terecht ben gekomen. Ik ga er de komende week over bloggen, want het is gewoon te veel om in één blog te beschrijven.

Wat ik hier in elk geval alvast kan verklappen, is dat ik de Moonlander heb aangeschaft, in gebruik heb genomen, weggelegd heb, weer in gebruik heb genomen en op het punt sta om hem weer weg te leggen. Dit is hoe je zo’n konijnenhol induikt: in stapjes.

Meer info over deze reis dus komende week. Hier een overzicht van de delen:

Meer laden