Karl Tarvas

Google Calendar: sync shared calendar subscriptions to other devices

Thu, 20 Aug 2026 00:00:00 +0000

For some reason, Google Calendar doesn’t make your shared calendar subscriptions available on other devices out of the box. To make them sync, use this unlinked legacy page:

https://calendar.google.com/calendar/syncselect

Discord bot text to speech with Piper

Sat, 29 Nov 2025 00:00:00 +0000

Piper is a fast TTS engine that’s performant enough to run on the cheapest Hetzner VPS. It comes with a wide array of available voices offering a good selection of size and speed tradeoffs.

Conveniently, it also ships with a web server, so you can load the model once and then get TTS responses with low latency. This makes it perfect for using it as a TTS server for Discord bots.

macOS: Hide users list when the screen is locked

Wed, 16 Apr 2025 00:00:00 +0000

By default, macOS shows a list of local users when you lock the screen, even if the boot login screen is set to name and password only (System Preferences → Lock Screen → Login window shows: Name and password). To hide the list of users and only show the currently logged in user, you can:

sudo defaults write /Library/Preferences/com.apple.loginwindow HideLocalUsers -bool TRUE

To revert, you can defaults delete the same value.

macOS: Remap a key

Wed, 27 Nov 2024 00:00:00 +0000

You can use hidutil to remap keys in macOS without using a third party application.

List current mappings, will return (null) if no mappings are present:

$ hidutil property --get "UserKeyMapping"
(null)

Set a mapping, in this case, make Caps Lock (0x39) work as F24 (0x73) instead:

$ hidutil property --set '{"UserKeyMapping":
  [{"HIDKeyboardModifierMappingSrc":0x700000039, "HIDKeyboardModifierMappingDst":0x700000073}]
}'

To set multiple mappings, add corresponding objects to the array.

See this table for a full list of keys and their IDs. Some common ones include:

Typescript: Convert snake_case string type to PascalCase string type

Fri, 01 Mar 2024 00:00:00 +0000

Even though the string type manipulation utilities you get out of the box with Typescript are rather limited, using Typescript’s most confusing feature, the infer keyword, you can push conversions between string types quite a lot further.

The below snippet converts string_case string types to PascalCase string types.

type InputType = "foo_bar_tea";

type SnakeToPascal<T extends string> = T extends `${infer A}_${infer B}`
    ? `${Capitalize<Lowercase<SnakeToPascal<A>>>}${SnakeToPascal<B>}`
    : Capitalize<Lowercase<T>>;

type OutputType = SnakeToPascal<InputType>; // equals "FooBarTea"

How to call a C/C++ function from Node

Fri, 04 Aug 2023 00:00:00 +0000

A straightforward way to call C/C++ code from Node is to use node-gyp to build a Node addon. Node kindly provides a hello world addon demo which we’ll roughly follow below.

Firstly you’ll need to install node-gyp. When doing the initial setup, make sure you have a compatible version of Python configured. Next you’ll need to provide a binding.gyp, this file tells node-gyp how to build your project. A simple binding.gyp might look like this:

{
  "targets": [
    {
      "target_name": "binding",
      "sources": [ "src/binding.cc" ]
    }
  ]
}

A barebones binding might look like the following. While it is written in C++, you can integrate your C code in much the same way. See this article for some examples on how to mix C and C++.

Git: Be very verbose about cloning

Thu, 25 May 2023 00:00:00 +0000

If you’re ever struggling to figure out why cloning a repository fails beyond the usual suspects, the following setup may be handy for you. GIT_TRACE turns general tracing on, GIT_TRACE_PACKET enables packet-level tracing for network operations, GIT_CURL_VERBOSE is equivalent to doing curl -v, and GIT_SSH_COMMAND with -vvv is pretty self explanatory.

export GIT_TRACE=1
export GIT_TRACE_PACKET=1
export GIT_CURL_VERBOSE=1
export GIT_SSH_COMMAND="ssh -vvv"
git clone <repository>

Protecting your iPhone against shoulder surfing password theft

Sat, 25 Feb 2023 00:00:00 +0000

Edited {{ “2023-04-19” | date_to_long_string: “ordinal” }}: There is currently no known way to defend against this attack.

The Wall Street Journal recently covered a low-tech theft scheme for stealing money from iPhone users that’s quickly gaining popularity.

The basic premise of the theft works like this:

The victim’s iPhone passcode is observed, either by shoulder surfing or social engineering.
The iPhone is stolen.
The iPhone passcode is used to reset the Apple ID password.
The victim is then remotely logged out of their other devices to prevent remote wiping the device.
The credentials are then used to steal money via banking accounts logged in on the device, Apple Pay, etc. Since the passcode can be used as a fallback for Face ID and Touch ID, every app that doesn’t use a separate passcode or similar is susceptible.

Update: There is currently no way to defend against this attack. Previously, using Screen Time restrictions was recommended as a possible remedy, however it turns out Screen Time suffers from a similar vulnerability!.

Git: Get local branches with no remote

Wed, 08 Feb 2023 00:00:00 +0000

If you often jump between branches and sometimes lose track of which you have and haven’t pushed to the remote yet, it might be handy to get all local branches with no remote:

git branch --format "%(refname:short) %(upstream)" | awk '{if (!$2) print $1;}'

To sort the whole shebang recently modified branches first, you can add --sort=-committerdate

git branch --format "%(refname:short) %(upstream)" --sort=-committerdate | awk '{if (!$2) print $1;}'

If you use this often, adding an alias might be handy:

Allen Pike: Humans Need Play

Sun, 05 Feb 2023 00:00:00 +0000

Recommended reading: “Humans Need Play” by Allen Pike

Cipollino salad

Tue, 17 Jan 2023 00:00:00 +0000

This is a salad my mom used to make when I was young and to date I still love it to bits. I’d wager it isn’t widely known by that name, but the name is pretty self explanatory.

For roughly four people, you’ll need:

three large onions, the sharper the better
500g of Chinese cabbage
400g of mayo
200g of sour cream, watery varieties work better
ample salt and pepper
a big bowl

Optionally:

Formik custom input not submitting on enter

Fri, 16 Sep 2022 00:00:00 +0000

When using custom components with Formik, a common problem to run into is some native form events breaking. One obvious symptom is the form not triggering a submit when you press enter in an input field, but there are others.

The problem will arise if you incorrectly pass all props straight through to the custom component. As demonstrated in the docs above, you must remove the form props before passing the rest on to the custom component.

`react-router`: Persist location state

Wed, 24 Aug 2022 00:00:00 +0000

Out of the box, single-page applications built with react-router don’t persist data when navigating back and forward in the browser history. While this may be desirable at times, most of the time it greatly hurts the usability of the application and makes it feel clunky compared to regular web pages.

To make your application persists its state when navigating back and forward, you can store the relevant state in the history state.

macOS: Disable charger plug in sound

Tue, 05 Jul 2022 00:00:00 +0000

By default, macOS does a small chiming sound whenever you plug the charger in. If you often have to use your laptop in environments that call for silence, you may want to turn it off.

defaults write com.apple.PowerChime ChimeOnNoHardware -bool true && killall PowerChime

To reenable it, you can flip the boolean value and run the same snippet.

Git: Get a patch between two branches

Mon, 16 May 2022 00:00:00 +0000

Get a patch from the diff between master and foo:

git diff --no-color --binary master foo > /tmp/patch

--no-color ensures the diff is valid to apply if you have automatic coloring on, --binary ensures binary files are handled correctly as well.

To later apply the patch:

git apply /tmp/patch

What is Babel?

Sat, 16 Oct 2021 00:00:00 +0000

Note: This is a response to this blog post by Julia Evans.

Babel is a common part of many frontend build pipelines. But what is it, and what would you use it for? To answer that question, let’s first take a step back and talk about web browsers and Javascript.

Modern Javascript has learned many tricks in the recent years (such as nullish coalescing, template literals, default parameters, and many more). These new language features often allow the developer to write code that’s either more robust, or shorter, or easier to reason about, or all of the above. Alas, many of your users may be using an older browser that was released before these features made it into the language spec. What’s a developer to do?

Git: Use `--color-words` for diff by default

Tue, 03 Aug 2021 00:00:00 +0000

Git supports showing colored diffs inline by the --color-words flag:

$ git diff --color-words

This is often easier to follow than the standard plus-minus format. To make this the default you can:

$ git config --global color.diff always

Which will result in the following in your gitconfig:

[color]
	diff = always

AppleScript: Get connected VPN names from Tunnelblick

Fri, 21 May 2021 00:00:00 +0000

Tunnelblick is the de facto OpenVPN client for macOS. Amongst other things, it conveniently supports AppleScript which means you can easily use it with Xbar:

#!/usr/bin/env osascript

tell application "Tunnelblick"
    get name of configurations where state = "CONNECTED"
end tell

Bash: Using `flock` to ensure parallel scripts perform an action only once

Mon, 17 May 2021 00:00:00 +0000

Consider two or more shell scripts that may be run either by themselves or in parallel, but all rely on a specific setup step that isn’t parallelizable. This may be a network request, a non-idempotent database write, or something else similar.

One easy way to ensure that this action is performed only once in the above setup is to use flock, a simple lock management utility for shell scripts. In the below example we use it to open a lock in /tmp/shared.lock with the file descriptor 200.

`browserslist` default values

Thu, 13 May 2021 00:00:00 +0000

If you use @babel/preset-env or simply browserslist by itself without configuration it falls back to the default configuration:

> 0.5%, last 2 versions, Firefox ESR, not dead

To see what this evaluates to you can run npx browserslist defaults, as of writing it evaluates to the following list:

and_chr 78
and_ff 68
and_qq 1.2
and_uc 12.12
android 76
baidu 7.12
chrome 78
chrome 77
chrome 76
chrome 49
edge 18
edge 17
firefox 70
firefox 69
firefox 68
ie 11
ie_mob 11
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 64
opera 63
safari 13
safari 12.1
safari 5.1
samsung 10.1
samsung 9.2

Japt: Playing with primes

Wed, 17 Mar 2021 00:00:00 +0000

Unlike some golfing languages, Japt doesn’t have too many tools to play around with prime numbers. The below patterns come up fairly frequently and may be of help.

Get the first A prime numbers:

Èj}jA 
   jA // Get the first A positive integers that return true
È }   // when run through a function that
 j    // checks whether the number is prime.

Similarly, get the A-th prime number:

Èj}iA
   iA // Get the A-th positive integer
Èj}   // that is prime.

Get all prime number up to A, inclusive:

Typescript `Array.filter(Boolean)`

Thu, 11 Mar 2021 00:00:00 +0000

Out of the box, Typescript doesn’t play well with Array.filter(Boolean). There’s a lot of history to this issue and it hasn’t fully been fixed yet. In the below snippet, the returned type from the filter should be string[], but instead it’s (string | null | undefined)[].

const foo: (string | null | undefined)[] = [];
const bar: string[] = foo.filter(Boolean);
//    ^^^
// Type '(string | null | undefined)[]' is not assignable to type 'string[]'.

To fix the issue, you can add an overload to Array.prototype.filter() for the special case of using the boolean constructor as the predicate. Save the below snippet as lib.es5.d.ts:

`eslint-plugin-flowtype-errors` keeps spawning and killing `flow` processes

Wed, 10 Mar 2021 00:00:00 +0000

Running into this problem, you may notice one of two possible symptoms when running lint: either numerous flow processes are spawned and killed constantly, or the lint fails with the below error.

Flow returned an error: Out of retries, exiting! (code: 7)

To debug the issue you may run flow check by itself, but the same problem appears: the server is spawned, then killed and respawn over and over again.

`@testing-library/user-event`'s `type()` is slow

Mon, 08 Mar 2021 00:00:00 +0000

Testing Library is the current recommended way to unit test React code. By itself it works great and does a lot of the heavy lifting for you. Its sibling library @testing-library/user-event which can be used to trigger click events, typing etc is still a bit green though.

The type() command is great for simulating user input letter-by-letter, however it has some issues: without a delay, it is non-deterministic, meaning you’ll need to manually wait for the UI to update in certain cases. On the flip side, even if you use Number.MIN_VALUE (smallest non-zero positive number in Javascript) for the delay, it takes a huge performance hit.

Typescript: Allow any type except specific values

Mon, 22 Feb 2021 00:00:00 +0000

Typescript doesn’t have a simple type to describe the relation “allow any type except the string literals "foo" and "bar"”. However, a small generic interjeciton type will enable Typescript to understand what you mean:

type Disallowed = "foo" | "bar";
type Input<T> = T & (T extends Disallowed ? never : T);

// Any input is valid except for the string literals "foo" and "bar"
function snafucate<T>(input: Input<T>) {...}

Japt: Count overlapping substrings

Tue, 16 Feb 2021 00:00:00 +0000

Finding the number of overlapping needles in a haystack in Japt is slightly verbose, clocking in at 12 bytes, but still a fun fiddling exercise for a change.

ðV      // Get all indices of needle in the input.
äÏ-X<Vl
ä       // For every consecutive pair of indices
 Ï-X    // check whether their distance
    <Vl // is smaller than the needle length, e.g. whether they overlap.
è       // Return the number of items that were true.

Annotating legacy jQuery plugins with Typescript

Wed, 27 Jan 2021 00:00:00 +0000

Annotating legacy jQuery with Typescript can be a pain. Many old plugins don’t have type definitions available, and the official types only get you so far on their own.

Instead of littering your code base with separate .d.ts definition files, it can be very convenient to annotate the types inline in the component file itself.
The following examples cover most common use cases:

type PluginInstance = JQuery & {
  // Any methods or properties the plugin adds, e.g. `jQuery(selector).plugin().instanceMethod()`
  instanceMethod: () => any;
};
type StaticProperties = {
  // Any static methods or properties the plugin adds, e.g. `jQuery.fn.plugin.staticProperty`
  staticProperty: any;
};
type Plugin = ((...args: any[]) => PluginInstance) & StaticProperties;

declare global {
  interface JQuery {
      plugin: Plugin;
  }
}

The following code snippets will then make sense for Typescript:

Typescript generics in JSX

Mon, 25 Jan 2021 00:00:00 +0000

Passing type variables to Typescript generics is somewhat clunky in JSX, but still handy in certain cases.

Given a generic component:

export default function GenericComponent<T>() { ... }

You can annotate the type in JSX as follows:

<GenericComponent<Type> ...props/>

Typescript 4.1: Template literal types, computed property names, and more

Sun, 24 Jan 2021 00:00:00 +0000

Typescript 4.1 adds support for template literal types. This, along with the new utility types, unlocks computed property names, simple getter-setter interfaces and more.

type Foo = 'a' | 'b' | 'c';
// Bar = 'a-template' | 'b-template' | 'c-template'
type Bar = `${Foo}-template`;

In addition, a number of new utility types have been introduced:

type A = Uppercase<'MixedCase'>; // 'MIXEDCASE'
type B = Lowercase<'MixedCase'>; // 'mixedcase'
type C = Capitalize<'MixedCase'>; // 'MixedCase'
type D = Uncapitalize<'MixedCase'>; // 'mixedCase'

Combining the above with the as keyword makes creating Redux-like functionality with strict types a breeze.

type State = {
    foo: string;
    bar: number;
}

/**
 * Actions = {
 *   setFoo: (state: State, value: string) => void;
 *   setBar: (state: State, value: number) => void;
 * }
 */
type Actions = {
  [K in keyof State & string as `set${Capitalize<K>}`]: (state: State, value: State[K]) => void;
}

Javascript: case sensitive string compare

Fri, 22 Jan 2021 00:00:00 +0000

Getting case sensitive string compare in Javascript isn’t as trivial as it may seem at first:

// Returns ["Action", "activity", "alpha"],
// although ["activity", "alpha", "Action"] is expected instead
["alpha", "Action", "activity"].sort((a, b) => {
    return a.localeCompare(b, { sensitivity: 'case' });
});

The jury is still out on wheter this is an oversight in the spec or the common vendor implementations, in the meanwhile, a manual comparer does the trick:

function caseSensitiveCompare(a, b) {
  // Sort character by character, return early if possible
  for (let ii = 0; ii < Math.max(a.length, b.length); ii++) {
    const aChar = a.charAt(ii);
    const bChar = b.charAt(ii);

    // If inputs match up to here, but lengths don't match, sort by length
    if (!(aChar && bChar)) {
      return a.length - b.length;
    }

    // If we meet a differing character, return early
    const comp = aChar.localeCompare(bChar);
    if (comp !== 0) {
      return comp;
    }
  }
  // If we found nothing to do, the strings are equal
  return 0;
};

The above snippet covers full string sensitivity while still relying on localeCompare() for the grunt work.

React & Typescript: Using `React.Children.toArray()` with `React.cloneElement()`

Wed, 13 Jan 2021 00:00:00 +0000

Trying to clone props children when using React with Typescript, you may run into the following type error: Type 'string' is not assignable to type ReactElement....

React.Children.toArray(props.children)
  .map(child => React.cloneElement(child));

The problem is that ReactChild includes string | number, which is not a valid clone target.

To solve the issue, add a type guard that checks whether the child is a valid element to clone, passing non-cloneable children through as-is:

React.Children.toArray(props.children)
  .map(child => React.isValidElement(child) ? React.cloneElement(child) : child);

Bash: Using a default value with `$*`

Tue, 12 Jan 2021 00:00:00 +0000

In Bash, $* gives you the IFS expansion of all positional parameters, such as $1 $2 $3 etc. This can be super handy when dealing with inline helper functions, but the use cases are too many to count.

Assigning a fallback default value uses the same syntax as regular variables do, but the syntax would make you look twice the first time you saw it:

# Use $1 $2 $3 etc, or "foo" if no parameters are specified
${*:-foo}

Javascript `Boolean.compare()`

Sat, 19 Dec 2020 00:00:00 +0000

Javascript doesn’t have a builtin that’s comparable to Java’s Boolean.compare(). In fact, the Boolean class has nearly nothing in it, save the constructor, toString() and valueOf().

The functionality can be replicated using the Number constructor.

function booleanCompare(a: boolean, b: boolean) {
    return Number(a) - Number(b);
}

Github Actions: cache `yarn install`

Wed, 09 Dec 2020 00:00:00 +0000

Edited 2021-03-04: Upgraded actions/setup-node to version 2.

Caching dependencies installed by Yarn in Github Actions is fairly straightforward, but there are a few small gotchas to get right:

Caching node_modules directly isn’t efficient, using Yarn’s built-in cache system is both faster and takes up less space.
Using --prefer-offline ensures your cache is used if it is available, but the install will still pass with no errors if anything needs to be downloaded from the network.

Combining the above with the examples from the documentation, below is a functional example of a Github Action with dependency caching.

`osc` cheatsheet for OBS

Mon, 16 Nov 2020 00:00:00 +0000

Open Build Service, OBS for short, uses osc as its CLI interface. osc is an SVN-like version control system with a good overview and a starter configuration guide on the openSUSE wiki.
On macOS you can install it via Homebrew.

$ brew install osc

To create a branch of a package, similar to a feature branch in Git:

$ osc branch <source project> <package>

Check out your local branch:

$ osc co <branched project>

To pull changes from the remote, aka update local to the remote state:

Using AMD modules in Stack Overflow snippets

Mon, 09 Nov 2020 00:00:00 +0000

If you’re answering a question on Stack Overflow and want to use a library in the code snippet that only supports AMD, the following small jig may be useful. Exports are added to the global scope so you can use them directly in the sample code.

<script>
  const define = (_, module) => module();
  define.amd = true;
</script>
<script src="example.com/amd-only.js" crossorigin="anonymous"></script>

VirtualBox network modes

Tue, 03 Nov 2020 00:00:00 +0000

As covered in the VirtualBox networking docs, the quickest overview into different networking modes is the following table:

	VM ↔ VM	VM → Host	Host → VM	VM → Net/LAN	Net/LAN → VM
Not attached	-	-	-	-	-
Internal Network	+	-	-	-	-
Host-only	+	+	+	-	-
NAT	-	+	forwarded ports	+	forwarded ports
NAT Network	+	+	forwarded ports	+	forwarded ports
Bridged	+	+	+	+	+

In short, bridged networking happily allows everything, while other less permissive modes give you granular control over your network security.

macOS: App sandboxing via `sandbox-exec`

Sun, 25 Oct 2020 00:00:00 +0000

It isn’t widely advertised, but macOS ships with a standalone sandboxing utility out of the box: sandbox-exec. While the very short manpage says the utility has been marked deprecated, and for quite a few major releases now, it’s used heavily by internal systems so it’s unlikely go away anytime soon.

Sandbox configurations are writen in a subset of Scheme. A minimal useful starter example for wrapping a modern application might look something like this:

Cypress: `cy.readFile()` vs `cy.fixture()`

Sun, 25 Oct 2020 00:00:00 +0000

At first glance, cy.readFile() and cy.fixture() seem fairly similar, both read files asynchronously and wrap them as Cypress usually does.
The main difference is conceptual, but there are some practical considerations as well.

Fixtures are meant for files that are used only for your tests, e.g. placeholder test data, sample responses and so forth. In other terms, fixtures are files that would not be a part of your project if you didn’t have tests.

macOS: Safely installing Microsoft Intune

Sat, 24 Oct 2020 00:00:00 +0000

Microsoft Intune is a remote device management and supervision solution employed by some corporations.
The below instructions are written assuming macOS Catalina and APFS, the process is fairly similar for other setups.

If your daily driver disk isn’t encrypted, go to System Preferences → Security & Privacy → FileVault and turn it on
Boot into Recovery Mode by holding down ⌘R during the boot
Open Disk Utility and create a new APFS encrypted volume
Exit Disk Utility and choose Reinstall macOS

NB! Be sure to install on the new volume you just created, or you risk losing all of your data
Do not connect with iCloud because Intune reads your keychain

Once the installation is done, reboot and log in to your blank macOS installation

Upon boot, do not unlock your daily driver volume when prompted

Install Intune as usual, perform enrolment and any other required actions
Boot back into Recovery Mode, open Disk Utility, and delete the volume you created earlier
Reboot into your daily driver and forget Intune

macOS: pip install M2Crypto

Tue, 06 Oct 2020 00:00:00 +0000

Out of the box, trying to install M2Crypto on macOS will fail with one of two common scenarios on building.
Either you’ll get OpenSSL errors, in case you haven’t set up a newer version than the system one:

Error: Unable to find 'openssl/opensslv.h'

Or you’ll get a bunch of clang errors:

Error: invalid argument type 'void' to unary expression

All of this is addressed in the project installation page, which is however easy to miss since it isn’t mentioned anywhere in the PyPI readme, the first point of contact when a package doesn’t install correctly.

macOS: `bsdcpio` vs GNU `cpio`

Tue, 06 Oct 2020 00:00:00 +0000

MacOS ships with cpio out of the box, however it’s worth noting it’s bsdcpio, not the GNU cpio.
While most of the functionality is identical, the set of available flags is inconsistent between the two.

If you need GNU cpio on macOS, you can install it via Homebrew:

$ brew install cpio

You’ll need to add it to your $PATH in .bashrc or similar to use it:

export PATH="/usr/local/opt/cpio/bin:$PATH"

Since this shadows a system binary, Homebrew won’t let you simply brew link it.

Bash: Pipe command output to stdout and file

Tue, 06 Oct 2020 00:00:00 +0000

If you need both stdout and stderr in a file for logging or debugging purposes, while also wanting to monitor the output of a command, you can use a pipe control operator along with tee:

$ foo |& tee out.log

VBoxManage: Start and stop headless VMs

Wed, 30 Sep 2020 00:00:00 +0000

Start a virtual machine in headless mode:

$ VBoxManage startvm <VM name or GUID> --type headless

Save the machine state and then stop it:

VBoxManage controlvm <VM name or GUID> savestate

See the VBoxManage manual for more examples.

Echo into a file with root permissions

Wed, 30 Sep 2020 00:00:00 +0000

Simply prepending sudo to echo will fail since the redirection is executed by the shell, not the command you run.

$ sudo echo "foo" >> /etc/bar
bash: /etc/bar: Permission denied

Shortly, the above is running echo as root, but >> will be run by the surrounding shell.
To overcome this, you can use tee:

$ echo "foo" | sudo tee -a /etc/bar/

To overwrite the file, rather than append to it, omit -a.

macOS Catalina: VirtualBox crashes on Linux VM boot

Thu, 24 Sep 2020 00:00:00 +0000

Whether you’re setting up a fresh Linux VM in VirtualBox on macOS Catalina (10.15.6), or migrating a VM over from an older macOS version, you can be in for a nasty surprise — once the VM boots, VirtualBox crashes with a mere stack trace.
Personally I tested this with openSUSE, but since there’s similar reports from Ubuntu, this seems a fairly common problem.

The error and the stack trace will look something along these lines:

Git: Revert file to master

Fri, 18 Sep 2020 00:00:00 +0000

The same approach applies to any branch, but reverting a file to its state in master seems to come up most often.
Firstly, in case you need to list which files have changed between your active branch and master:

git diff --name-status master

Then to revert the file to its state in master:

git checkout master path/to/file

At this point, the file will already be staged, so if you need to unstage it:

macOS: Run script on startup

Fri, 11 Sep 2020 00:00:00 +0000

MacOS uses launchd as the daemon for running services and other daemons.

To run a script or a few on startup, you can interface with launchd by writing a corresponding plist file. In my case, I want to run networksetup to connect to a specific VPN on startup, but to only run it once so that I can switch to other ones later.

Essentially, whenever my computer starts up, I want to run

Git: Autosign commits

Wed, 09 Sep 2020 00:00:00 +0000

After generating a GPG key and adding it to your Github account, automatically signing your commits is very straightforward.

First, find your key ID via

gpg --list-secret-keys --keyid-format LONG

Then, configure Git use the said key globally

git config --global user.signingkey KEY_ID

Check that user.email matches the one in your GPG key, and to be nice, user.name matches your Github username in git config --global --list.
Finally, tell Git to sign all commits with the above credentials

git config --global commit.gpgsign true

Following the above, all of your commits should show a nice Verified badge next to them.

macOS: Switching between OpenVPN and NextDNS automatically

Tue, 08 Sep 2020 00:00:00 +0000

Since macOS doesn’t support OpenVPN out of the box, the easiest solution is to use Tunnelblick as your client. Alternatively, there’s CLI builds for OpenVPN available on Homebrew as well.

Regardless of your client of choice though, OpenVPN and NextDNS don’t play well together without a little help. A generic setup that supports both is as follows:

Install the NextDNS client as usual. This will add a DNS configuration called NextDNS under System Preferences → Network.
After the initial setup is done, quit the NextDNS application, as it will try to automatically reconnect otherwise.
Install Tunnelblick as usual, along with any VPN configurations you need.
Navigate to ~/Library/Application\ Support/Tunnelblick/Configurations/CONFIGURATION_NAME.tblk/Contents/Resources/ where CONFIGURATION_NAME is the VPN configuration you want to use.
Create pre-connect.sh which will be called before your OpenVPN connection is established:

#!/usr/bin/env bash

# Disconnect from NextDNS before connecting to OpenVPN
networksetup -disconnectpppoeservice NextDNS

Create post-disconnect.sh which will be called after you disconnect from OpenVPN:

#!/usr/bin/env bash

# Reconnect to NextDNS after disconnecting from OpenVPN
networksetup -connectpppoeservice NextDNS

With this setup, whenever you connect to a VPN using Tunnelblick, NextDNS will automatically be turned off. When you disconnect, NextDNS will be turned on again, allowing you to easily switch between the two.

App recommendation: Next Meeting

Thu, 30 Jul 2020 00:00:00 +0000

Next Meeting is a handy macOS utilty that puts your next calendar event in the menubar.

It uses native calendar integration so whatever you’ve already set up in the Calendar app will be available out of the box.

For those looking for more customization, BitBar is a good alternative, but for ease-of-use out of the box, Next Meeting is hard to beat.

Git: Keep file but ignore changes

Thu, 02 Jul 2020 00:00:00 +0000

Many repositories come with files that serve as templates, but shouldn’t actively be checked for changes. A good example of these is environment setup files, local config files etc.

To conveniently keep this base file in the repository, add and commit its template state as you would with any other file. Once this is done, tell Git to not track any further changes in this file:

git update-index --assume-unchanged local.env

To revert the configuration and track changes again:

CentOS 7: redirect port 80 to port 8080

Thu, 02 Jul 2020 00:00:00 +0000

CentOS 7 uses firewalld to manage ports, firewall rules and more. To quickly get up and running, firstly list all currently existing rules:

firewall-cmd --list-all

The output will be something similar to this, depending on what services you have running.

public (active)
  target: default
  icmp-block-inversion: no
  interfaces: ens160
  sources:
  services: ssh dhcpv6-client
  ports:
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:

If you simply want to open a port, use --add-port (and later --remove-port to revert the change if need be).

Vue CLI: Debugging Jest unit tests with Chrome Node devtools

Tue, 16 Jun 2020 00:00:00 +0000

Jest documentation has a great guide on debugging failing tests. With minor modifications, the same approach can be used to debug tests that are wrapped by Vue CLI.

Given you already have the standard test scripts in your package.json, we can add a separate script to run the same task in debugging mode:

{
  "scripts": {
    "test:unit": "vue-cli-service test:unit",
    "test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --runInBand --watchAll"
  }
}

Since this is a fair mouthful, let’s cover the steps in isolation:

Vetur: Using workspace snippets

Tue, 09 Jun 2020 00:00:00 +0000

Vetur is a Visual Studio Code extension that adds support for .vue files as well as many other tools for working with Vue.

One of those is additional built-in snippets, where CTRL``SPACE brings up suggestions for file scaffolding with different kinds of templates.

To add project-specific templates, create the folder .vscode/vetur/snippets in your project root.

Adding the file default.vue in that folder will allow you to create a default template that’s suggested for .vue files:

`ts-node-dev` binds to stdin via readline by default

Sun, 31 May 2020 00:00:00 +0000

Update, {{ “2020-06-15” | date_to_long_string: “ordinal” }}
This issue has been fixed in fbe1eaf and should reach NPM fairly soon as well. The original post is preserved below for historical context.

ts-node-dev is a handy drop in replacement for node-dev that adds Typescript support.
However, somewhat unexpectedly it binds to stdin by default out of the box:

// Read for "rs" from command line  
if (opts.rs !== false) {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    terminal: false
  })
  rl.on('line', ...);
}

The binding is used to restart the server on demand, as opposed to restarting automatically on changes. While this can be handy, the behavior is currently undocumented and not an intuitive default.

Typescript: Async user-defined typeguards

Tue, 19 May 2020 00:00:00 +0000

User-defined typeguards are a handy tool for covering any shortcomings in automatic type inferring in Typescript. Sadly, async typeguards are currently not supported out of the box.

Until it gets added to the engine, a straightforward workaround is to return unchanged input data with manually annotated types from the typeguard function.

For example, when validating unknown input against a Yup schema:

export async function validateWithSchema<T, K>(data: T, schema: yup.Schema<K>) {
  // `schema.validate()` will throw on invalid input
  await schema.validate(data);
  return (data as unknown) as K;
}

const typedData = await validateWithSchema(unknownInput, schema);

From there on, typedData will have full type coverage from the schema definition, no manual interface writing necessary.

Adding Vuepress to a Vue CLI project with Typescript

Tue, 12 May 2020 00:00:00 +0000

Vuepress is one of the most commonly used documentation frameworks in the Vue ecosystem. Adding it to an already existing Vue CLI based project that uses Typescript isn’t entirely trivial though.

The 7 steps below will get you up and running.

If you don’t have a project yet, create a new project with Vue CLI. Be sure to pick Typescript in the setup steps.
Install Vuepress, its Typescript plugin and the related type definitions:

Typescript optional chaining and ESLint `no-unused-expressions`

Tue, 07 Apr 2020 00:00:00 +0000

Typescript 3.7 introduced the long awaited optional chaining syntax.

The short gist is that this

const foo = bar && bar.tea && bar.tea.cup;

can now simply be

const foo = bar?.tea?.cup;

When using the commonly enabled ESLint rule no-unused-expressions, however, this can lead to false positives:

   foo?.bar();
// ^^^^^^^^^^
// Expected an assignment or function call and instead saw an expression. eslint(no-unused-expressions)

Luckily, Typescript releases enhanced ESLint rules under @typescript-eslint. To use the TS version of the same rule, turn the original one off, and enable the extended one in your .eslintrc:

Jest: TypeError: Cannot read property 'default' of undefined

Thu, 19 Mar 2020 00:00:00 +0000

Vue CLI bundles Jest as its default test runner. All is fine and good until one day, running your unit tests you get the following trace:

TypeError: Cannot read property 'default' of undefined

    at Object.get [as TextInput] (src/components/IO/index.ts)
    at src/components/dataTable/Editor.vue
    at [lots of omitted frames]
    at Object.<anonymous> (src/store/index.spec.ts)

Even though the project builds just fine in both development and production mode.

This usually stems from cyclic dependencies. At my best guess, it seems Jest has some arbitrary memory limit and it runs out at some point, because the breaking code isn’t directly related to any recent changes in the codebase. Adding one import in one barrel will cause another one somewhere down the line to run out of Jest’s manageable size and you’ll get a fun afternoon of debugging.

Yup: Type 'StringSchema<string>' is not assignable to type 'Ref | Schema<Sample>'.

Fri, 10 Jan 2020 00:00:00 +0000

In Yup, using Typescript string literals in a shape definition will currently give a generic error message:

Type 'StringSchema<string>' is not assignable to type 'Ref | Schema<Sample>'.

For example, trying to use the following interface will produce the above error:

interface Sample {
  allowed: 'foo' | 'bar';
};

const shape = yup.object().shape<Sample>({
  allowed: yup.string().required(),
});

Yup’s typing doesn’t currently support this, until then, a conditional utility type can solve the issue:

type YupShape<T> = {
  [K in keyof T]: T[K] extends string ? string : T[K];
}

const shape = yup.object().shape<YupShape<Sample>>(...);

You will lose type checking for the literal values, but keep your sanity until it gets fixed upstream.

Jekyll: escape HTML in titles

Mon, 23 Dec 2019 00:00:00 +0000

At times, you’ll have posts which don’t have pure text titles. Luckily, Jekyll supports a handy selection of custom filters along with all Liquid filters.

The strip_html filter is great for Jekyll layouts:

{% raw %}{{ page.title | strip_html }}{% endraw %}

As an additional note, if you need to escape Jekyll snippets in code blocks as above, you can use {% raw %}{% raw %}{% {% endraw %}endraw %} to embed your content.

To be a good software engineer, become a French skeptic

Wed, 18 Dec 2019 00:00:00 +0000

Either that, or a skeptical Frenchie — allow me to explain.

The French have long learned that saying “no” is great. You can always say “non” upon “non”, and then, after further discussion, finally settle on a “yes” if you’re happy with the outcome. However, if you start with “yes”, the discussion is essentially over and you’re on the hook, regardless of whether you amend minor details. A reasonable default, both in development and in life in general, is to lead with a “no” and then see where you can go from there.

There is no open source social contract

Thu, 21 Nov 2019 00:00:00 +0000

As someone who maintains and tends to a number of OSS projects, there’s a misconception I’d like to address: the open source social contract. The sometimes implied agreement that once you put something out there, you’re responsible for it: maintaining it, supporting it, whatever.

This is false.

There is no social contract.

There are many people who will ask you to do free work for them — implement features, review PRs, discuss tickets — and asking is fine. But there is no implicit expectation that it would be the Right Thing for you to do work for them, free of charge.

`@aspnet/signalr` vs `@microsoft/signalr`

Tue, 05 Nov 2019 00:00:00 +0000

The @aspnet/signalr NPM package was recently moved to the more widely recognizable @microsoft/signalr.

For those who missed it, the version history of the packages sheds light on the situation. Here’s a few recent releases for @microsoft/signalr:

3.0.0 - a month ago
3.0.0-rc1.19457.4 - 2 months ago
3.0.0-preview7.19365.7 - 3 months ago

And here’s @aspnet/signalr:

3.0.0-preview6.19307.2 - 5 months ago
3.0.0-preview5-19227-01 - 6 months ago
3.0.0-preview4-19216-03 - 7 months ago

Looking at the timeline makes the switch easy to see, but it’s easy to miss given the official announcement was just a Github issue ticket.

Git LFS fetch stuck on 0B

Tue, 29 Oct 2019 00:00:00 +0000

When you’re running git lfs fetch –all you may be greeted with the following output:

Fetching target
Git LFS: (0 of 256 files) 0 B / 512.00 MB

Naively you get a coffee and wait for it to finish, only to soon realize it’s just stuck.
Debug flags to the rescue:

export GIT_TRACE=1

Enabling git trace will allow you to see verbose debugging information which should soon reveal the issue.
In my case the LFS wrapper wasn’t propmting for authentication correctly and was just stuck waiting for input.
Running a regular fetch first and logging in resolved the issue:

Visual Studio Mac: manage user secrets

Mon, 28 Oct 2019 00:00:00 +0000

Somewhat surprisingly and inconveniently, Visual Studio for Mac does not have the handy command Manage User Secrets. It’s not hidden in a different menu, it’s simply not there.

If you need to add a single secret to your project, you can use a one-liner in the project folder:

cd repo/project
dotnet user-secrets set "ConnectionStrings:Project" "Server=127.0.0.1"

To add a number of secrets, save your secrets in a temporary .json file:

{
  "ConnectionStrings": {
    "Project": "Server=127.0.0.1"
  }
}

Then navigate to the project folder in a terminal and use dotnet to import the file:

macOS: GSSAPI operation failed on Nuget restore

Mon, 28 Oct 2019 00:00:00 +0000

When restoring packages from a remote on-prem Nuget repository on macOS, you may run into either one of the following error messages:

GSSAPI operation failed with error - An unsupported mechanism was requested

Unable to load the service index for source https://tfs.partner.com/DefaultCollection/_packaging/Nuget/nuget/v3/index.json

As covered in [this old, but unresolved ticket](https://github.com/Microsoft/artifacts-credprovider/issues/45), the problem usually stems from incorrect auth handling when downgrading the mode of authentication (e.g from Kerberos to Basic).

To work around the issue you need to:

Japt: Approximating arccosine

Tue, 10 Apr 2018 00:00:00 +0000

In most languages, trigonometric functions are a module shipped with the default language. In Japt, the Javascript-based code golfing language, that’s sadly not the case. There is no built-in for arcsine nor for arccosine.

While you can embed Javascript in Japt, that would be what ever the opposite of Feng Shui is:

$M.acos($U
$       $  // Evaluating as regular Javascript,
 M         // get the Japt built-in `M` which maps to Javascript's `Math`
  .acos( U // and call `acos()` on it with the default input `U`.

It works, but it’s definitely not pretty.

Bootstrap: Change dropdown item background on hover

Wed, 14 Feb 2018 00:00:00 +0000

When trying to override the background color of a hovered submenu in Bootstrap you may be surprised to find that simply setting background-color on the element doesn’t suffice.

Bootstrap defines a background image for the elements to overcome some clashes in their media queries.
To set a solid background color, remove the image and set a color as usual:

.dropdown-menu > li > a:hover {
    background-image: none;
    background-color: red;
}

D3.js: Remove leading zero from time format

Fri, 22 Sep 2017 00:00:00 +0000

In D3.js, all time format directives are zero-padded by default (except for %e which explicitly uses space-padding).

For example, using d3.timeFormat("%I:%M") will output 09:34.

To change the padding type, append a modifier to the directive’s %:

0 to use zero-padding
_ to use space-padding
- to disable padding altogether

Following the above example, using d3.timeFormat("%-I:%M") will yield 9:34.

Vuex: Passing multiple parameters to an action

Thu, 07 Sep 2017 00:00:00 +0000

Vuex mutations take up to two arguments: state and payload. The current state of the store is passed in by Vuex automatically as the first argument and the second argument holds any parameters you pass in.

The easiest way to pass a number of parameters is to destruct them:

mutations: {
  authenticate(state, { token, expiration }) {
    localStorage.setItem('token', token);
    localStorage.setItem('expiration', expiration);
  }
}

Which allows you to commit your changes in actions in an identical manner:

store.commit('authenticate', {
  token,
  expiration,
});

React Native: Error: watch EMFILE

Mon, 10 Oct 2016 00:00:00 +0000

After updating macOS, you may run into the following problem when trying to run a React Native project:

ERROR  watch EMFILE
{"code":"EMFILE","errno":"EMFILE","syscall":"watch"}
Error: watch EMFILE
    at exports._errnoException (util.js:746:11)
    at FSWatcher.start (fs.js:1172:11)
    at Object.fs.watch (fs.js:1198:11)
    at NodeWatcher.watchdir (/node_modules/react-native/node_modules/sane/src/node_watcher.js:144:20)
    at Walker.<anonymous>

The issue stems from incorrect folder permissions being set for watchman after the update.

As covered in this ticket, fully reinstalling the file watching utility solves the problem:

rm -rf /usr/local/var/run/watchman/
brew uninstall watchman
brew install watchman

Order of resolved values in `Promise.all()`

Wed, 21 Jan 2015 00:00:00 +0000

Shortly, Promise.all() preserves the order between its input and output.

Following the spec, Promise.all(iterable) takes an iterable as a parameter and internally calls PerformPromiseAll(iterator, constructor, resultCapability) with it, where the latter loops over the iterable using IteratorStep(iterator).

Resolving is implemented via Promise.all() Resolve where each resolved promise has an internal [[Index]] slot, which marks the index of the promise in the original input.

All this means the output is strictly ordered given the iterable you pass to Promise.all() is strictly ordered (for example, an array):

Karl Tarvas

Google Calendar: sync shared calendar subscriptions to other devices

Discord bot text to speech with Piper

macOS: Hide users list when the screen is locked

macOS: Remap a key

Typescript: Convert snake_case string type to PascalCase string type

How to call a C/C++ function from Node

Git: Be very verbose about cloning

Protecting your iPhone against shoulder surfing password theft

Git: Get local branches with no remote

Allen Pike: Humans Need Play

Cipollino salad

Formik custom input not submitting on enter

react-router: Persist location state

macOS: Disable charger plug in sound

Git: Get a patch between two branches

What is Babel?

Git: Use --color-words for diff by default

AppleScript: Get connected VPN names from Tunnelblick

Bash: Using flock to ensure parallel scripts perform an action only once

browserslist default values

Japt: Playing with primes

Typescript Array.filter(Boolean)

eslint-plugin-flowtype-errors keeps spawning and killing flow processes

@testing-library/user-event's type() is slow

Typescript: Allow any type except specific values

Japt: Count overlapping substrings

Annotating legacy jQuery plugins with Typescript

Typescript generics in JSX

Typescript 4.1: Template literal types, computed property names, and more

Javascript: case sensitive string compare

React & Typescript: Using React.Children.toArray() with React.cloneElement()

Bash: Using a default value with $*

Javascript Boolean.compare()

Github Actions: cache yarn install

osc cheatsheet for OBS

Using AMD modules in Stack Overflow snippets

VirtualBox network modes

macOS: App sandboxing via sandbox-exec

Cypress: cy.readFile() vs cy.fixture()

macOS: Safely installing Microsoft Intune

macOS: pip install M2Crypto

macOS: bsdcpio vs GNU cpio

Bash: Pipe command output to stdout and file

VBoxManage: Start and stop headless VMs

Echo into a file with root permissions

macOS Catalina: VirtualBox crashes on Linux VM boot

Git: Revert file to master

macOS: Run script on startup

Git: Autosign commits

macOS: Switching between OpenVPN and NextDNS automatically

App recommendation: Next Meeting

Git: Keep file but ignore changes

CentOS 7: redirect port 80 to port 8080

Vue CLI: Debugging Jest unit tests with Chrome Node devtools

Vetur: Using workspace snippets

ts-node-dev binds to stdin via readline by default

Typescript: Async user-defined typeguards

Adding Vuepress to a Vue CLI project with Typescript

Typescript optional chaining and ESLint `no-unused-expressions`

Jest: TypeError: Cannot read property 'default' of undefined

Yup: Type 'StringSchema<string>' is not assignable to type 'Ref | Schema<Sample>'.

Jekyll: escape HTML in titles

To be a good software engineer, become a French skeptic

There is no open source social contract

@aspnet/signalr vs @microsoft/signalr

Git LFS fetch stuck on 0B

Visual Studio Mac: manage user secrets

macOS: GSSAPI operation failed on Nuget restore

Japt: Approximating arccosine

Bootstrap: Change dropdown item background on hover

D3.js: Remove leading zero from time format

Vuex: Passing multiple parameters to an action

React Native: Error: watch EMFILE

Order of resolved values in Promise.all()

`react-router`: Persist location state

Git: Use `--color-words` for diff by default

Bash: Using `flock` to ensure parallel scripts perform an action only once

`browserslist` default values

Typescript `Array.filter(Boolean)`

`eslint-plugin-flowtype-errors` keeps spawning and killing `flow` processes

`@testing-library/user-event`'s `type()` is slow

React & Typescript: Using `React.Children.toArray()` with `React.cloneElement()`

Bash: Using a default value with `$*`

Javascript `Boolean.compare()`

Github Actions: cache `yarn install`

`osc` cheatsheet for OBS

macOS: App sandboxing via `sandbox-exec`

Cypress: `cy.readFile()` vs `cy.fixture()`

macOS: `bsdcpio` vs GNU `cpio`

`ts-node-dev` binds to stdin via readline by default

`@aspnet/signalr` vs `@microsoft/signalr`

Order of resolved values in `Promise.all()`