Een tijd terug kreeg ik tijdens een IndieWebCamp van Sven een set aan NFC-stickers. ‘Jij hebt er vast creatievere ideeën voor,’ zei hij toen. Ik moet bekennen dat het even op zich heeft laten wachten voor ik er een idee mee had.

Het idee van een NFC-sticker is dat je de tag draadloos kan scannen met je smartphone, die daar dan iets mee kan. Het is exact hetzelfde als je ov-chipkaart, alleen dan is de sticker de kaart en je telefoon het poortje. Als je mijn ov-chipkaart scant met mijn telefoon opent die de NS app op ‘actuele vertrektijden’.

Het is op iOS heel simpel in te stellen: open of installeer de Apple app ‘Opdrachten’ (Siri Shortcuts), ga naar het tabje ‘Automatisering’ en voeg een ‘Persoonlijke automatisering’ toe. Als trigger kies je NFC, scan je ov-chipkaart, en klik ‘volgende’. Daarna kan je een actie kiezen die moet worden uitgevoerd.

Een paar weken geleden ben ik weer begonnen met Getting Things Done te implementeren en daar ben ik momenteel best tevreden over. Voor wie het niet kent: schrijf al je taken op, zodat je kan doordenken wat ze voor je betekenen, en hou de eerstvolgende acties bij in een systeem dat je vertrouwt en vaak raadpleegt. (En dan nog wat reviews, een paar nuances en veel oefenen.)

Eén van de lijsten die ik nu bijhoudt is een lijst van dingen die momenteel thuis liggen maar ‘ergens’ naar toe moeten. Punt is: ik vertrek wel vaker van huis, maar steeds naar andere bestemmingen, en eenmaal op die bestemming denk je pas: o ja, dat moest mee! Vandaar de lijst.

Nu hangt er dus een NFC-sticker in de hal. Als ik die scan, opent mijn telefoon de Things-app op de ‘Anytime’ view, met daarin de ‘Mee naar...’ tag voorgeselecteerd. Het is een soort snelkoppeling, maar dan in de fysieke wereld. Heel erg blij mee.

Op de plek waar in ‘s nachts altijd mijn telefoon neerleg ligt er nu ook een. Als ik die scan gaat ‘Welterusten’ aan: alle lampen in mijn huis gaan uit, behalve heel zacht het licht in mijn slaapkamer. Na één minuut gaat die ook uit. Die is ook fijn, maar het zou kunnen dat ik in dit geval gewoon hardop ‘Welterusten’ tegen Siri blijf zeggen.

tl;dr: I just mapped Y to "+y and I am very pleased with it.

A coworker saw me copying some text out of Vim and humored me: everything seemed to happen like magic in my editor, but for a simple thing as copy and paste I needed a lot of keys.

It is true: in order to copy text within Vim, you can use the y command, combined with the motion of what you want to yank. So: yiw will yank inside a word, ggyG will go to the top of the file and then yank until the bottom (so, the whole file), yy will yank a full line. But these yanks are only pastable (with p) within Vim itself.

In order to get text out of Vim, you need to use a special register. Registers are a sort of named boxes, letters a to z, in which you can put snippets of text. To use it, you prefix your yank (or delete) with a quote: "ayi( will select register a and then yank the text within parentheses. To get to your system clipboard (the one all other programs use), you select the special register with "+.

Thus: my coworker saw me hunting for the "+y combination, probably. I almost always look at my keyboard when I do that, so awkward is the combination. But I just found a solution: Y.

nmap Y "+y
vmap Y "+y

By default, Y does a yy, which I never use, because it's inconsistent with other commands. D, for example is equivalent to d$, delete until the end of the line, same for C as c$. I guess it makes Y play along with V (line-wise visual select) and S (subsitute full line), but I always use yy anyway, so Y is free to use. When I now want to yank to my system clipboard, I just use Y instead of y and that's it.

You can also consider adding this as gy, which does not have a meaning, but g combines with various commands to activate variation of their meaning, so it's not a bad choice either. I mapped it to both and will see which one sticks.

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);