Filipe Fortes

2026 Personal Tech Stack

Sat, 31 Jan 2026 00:00:00 +0000

At the end of 2024, I documented my personal tech stack for the first time. I meant to do a 2025 update, but due to supply-chain issues we’re exactly a month past due here. I’ve made sure to post this update after market hours so I don’t disrupt the financial markets too much.

So Many Agents

Multiple coding agents inside a nested tmux session, more agents hiding in local tmux windows. Got agents coming out my ears here

It’s a bit surreal that Claude Code is less than a year old. A year ago, I was playing around with aider and was ecstatic when (once in a while) I was able to get an initial rough draft of a code change. OpenAI’s o1-preview was expensive, but with a steady hand you could get some stuff done with it.

When I first started playing with Claude Code in early February, it was a slightly nicer experience than aider. Less futzing with manually including files, but nothing revolutionary. But new, better models kept on getting released, and everything changed so quickly.

Once Claude Code started picking up steam, codex, gemini, and a deluge of other coding agents joined the party. At the end of 2024, I was genuinely worried I’d have to abandon my terminal setup and give in to a GUI IDE. Instead, the opposite happened: suddenly being fluent in tmux and git worktree is a huge advantage! I’m routinely running three or four agents in parallel across different tmux panes with more running on a home server via SSH.

Currently, I mostly rely on Claude for the main planning (Opus) and execution (Sonnet), then loop in Codex and Gemini for code reviews. It’s easy to hit limits when multi-Clauding with Opus, which forces me to switch to Codex/Gemini. It’s important to try driving with other models once in a while, which is how I discovered that Gemini’s Flash family can be an absolute beast if you give it a clearly defined task. It’s my go-to for straightforward, easily verified tasks.

My model choices in 2025 changed at least monthly based on the latest release, and I have no doubt 2026 will be similar. Frankly, if you’re not constantly trying the latest you’re falling behind.

I also used web agents a fair amount, specifically Jules (Google) and Codex (OpenAI). Takes a bit of investment to get your environment set up, but it’s absolutely worthwhile to be able to kick off a bunch of tasks on your phone. Claude released an agent in late 2025, but the environment setup involves hooks which I haven’t invested time into figuring out yet. This is mostly since Jules and Codex have been good enough for the simpler tasks, and the more complex ones I typically go local.

I also keep trying the IDE-based agents - VS Code, Cursor, and the new-ish Antigravity. Aside from the traditional code-editing-centric view, they’ve all added an agent-centric mode that is functionally identical to Jules or Codex Web.

But I kept dropping back to the terminal. Old habits, yes, but it’s really hard to beat the ergonomics of tmux, bash, and vim once you git gud.

Hardware Consolidation

Not pictured: Vitamin D deficiency

Last year I was juggling an M3 MacBook, a Windows desktop, a Framework laptop, a Chromebook, and a headless Linux server. I’ve collapsed this down to almost entirely Mac (one for work, one personal) with a little bit of Chromebook use when traveling. The Linux server persists, now running Debian Trixie with persistent tmux sessions for agent minions.

I still mourn the loss of a good tiling window manager. i3/Sway on Linux was nearly perfect, and nothing on macOS comes close despite valiant efforts from Rectangle (the best of the options I’ve tried). I’ve persevered through this untold hardship, but I want it on record that I’m suffering an absolutely inhumane amount here.

I bought some cheap Anker Soundcore noise-cancelling headphones after going without for over a decade. Turns out the technology has gotten dramatically better and I was an idiot for waiting. Still walking on the treadmill desk during meetings (typically four or five miles a day).

Other Terminal Tools

Yazi displaying images within a tmux pane while writing this post

I’ve fully moved from WezTerm to Ghostty. It’s made a ton of progress, and it definitely helps to have a billionaire primary developer. The image viewing in Ghostty + yazi + tmux is genuinely nice.

Speaking of which, yazi has replaced vifm exactly as I predicted last year. Worthwhile for the image display alone.

Other changes:

pnpm: Replaced npm. Faster, more disk-efficient, build steps must be manually approved.
uv: Replaced pip for Python. Much faster.
gh: Coding agents love it, so I’m trying to use it more. Best use is gh pr create, but otherwise I often forget.
tsgo: Microsoft’s new TypeScript language server in Go is so much faster. I’m writing a lot less code by hand these days, so it doesn’t make as much of a difference in my day-to-day.

Non-Terminal Tools

Visualizing personal data in Obsidian

Obsidian: Moved my personal and work journals from Coda to the filesystem using a combination of Neovim and Obsidian for editing. It’s really nice to have all this data sitting in Markdown and letting the LLMs party on top. I’m really enjoying this system, so I’ll break it out into a separate post … some day.
Spotify: cmus kept crashing on Mac, so I tried ncspot which also had issues. Then I gave up and just went to the full Spotify app, but I need to find a better solution here.
Video playback: I used to use yt-dlp to download videos and mpv to watch things at 2.5x+ speed. I still do sometimes, but now I usually open DevTools and type document.querySelector('video').playbackRate = 2.5 which works great.

Everything else is unchanged: Signal, 1Password, Firefox for personal, Chrome for work. Some of the new Gemini integrations in Chrome look pretty nice, so I may move back to Chrome once vertical tabs come out of beta.

What’s Next in 2026?

Honestly: No clue. I mean, I can try to predict some things but given how 2025 went I’d likely just make myself embarrassed next year.

At risk of embarrassment, I think it’s pretty safe to say I’ll still be terminal-heavy in a year. That old habit dies hard. Regardless of habit, there are pretty nice advantages to working within a local terminal for agents, so I’d be surprised if everything moved to the cloud with a nice GUI in front.

Moving my personal journal/logging systems to use formats that agents can work with worked out very well, so I can imagine doing that for a few systems. I worry that platform providers will increasingly start locking down their data, so I’ve been proactively archiving just in case.

Regardless of whatever new models come out, it’s still a safe bet my computer skills will remain superior to my social skills.

Pointless Aside: Screenshot Workflow

I got a few million complaints that my 2024 post didn’t have screenshots, so this year I tried to sprinkle a few in. Took me a little to find a reasonable capture flow (I really miss Linux for this type of thing), so I’m documenting it here for my future self.

First, resize the terminal to 1600px by 900px:

osascript -e 'tell application "System Events" to tell process "Ghostty" to set size of window 1 to {1600, 900}'

Now use the native Mac window capture mode via Cmd+Shift+4, then Spacebar, then click the window. This captures the window without the desktop background, but annoyingly includes a window shadow which I’m too much of a control freak to live with. (Well-adjusted individuals can skip this next part and move on with their lives)

Open the screenshot in Preview, use the Markup Toolbar and the magic wand tool, click and drag on the area outside of the window until you’ve selected everything outside of the window. Delete the selection, then reselect the area outside again (sadly, no saved selection in Preview), then invert the selection and crop.

Thanks to DJ Starr a far simpler method is available: Cmd+Shift+4 then press space, hold option before clicking the window to capture without shadow

Finally, save out the file, touch the f key of your keyboard exactly 3 times with your left ring finger, close both eyes for 1.5 seconds, and then lift your right foot at a 14.3 degree angle. Now simply go and touch all the doorknobs in your house exactly seven times and you’re all set!

Custom Kids’ Podcasts With NotebookLM

Sun, 02 Feb 2025 00:00:00 +0000

A few years back, I took the family on a road trip from Florida up to Charleston, SC. My original plan to rely on audiobooks failed spectacularly, and in a desperate play for some sanity we introduced the children to a few kid-friendly podcasts. It took some searching, but we found some options that made the drive tolerable, at the cost of introducing a few I never knew existed. Even though that road trip was years back, the cursed podcasts have lingered; there’s one specific podcast that covers niche content my son loves, but it’s intolerable for adults.

In my desperation, I started looking into creating a podcast that could serve as a substitute. I found Google’s NotebookLM, an AI-powered tool with a neat feature that can generate a podcast-style overview of the sources saved into the notebook.

Imagine explaining this screen to someone 30 years ago

The AI-generated content and voices aren’t going to win an award any time soon, but they’re surprisingly decent and of higher quality than the majority of kid-friendly podcasts out there.

The tool is currently free, and creating a podcast tailored to your interests only takes a few minutes, here are the steps:

Creating a New Notebook

Once you've created a notebook, add sources for the topic

To get started, head over to NotebookLM and sign in with your Google account. Once you’re in, click on the “Create a notebook” button and you’ll be prompted to begin adding some sources.

Adding Sources

This is the most important step in the process. You need to pick a compelling topic and feed information into the notebook for it to synthesize.

Adding sources

Here are some things I’ve found work well:

I recommend starting with the Wikipedia page for the topic you’ve chosen. NotebookLM has very good support for Wikipedia, and it serves as a good general overview of the topic. Depending on the topic, I often add a few more Wikipedia pages to provide more depth and related content.
I’ll then do a quick search on the topic, sometimes adding “for kids” to the search query. Results here will vary, but as long as something looks fairly reasonable, I’ll dump it in as a source. I’ll admit I don’t always invest a lot of time vetting each source, so there’s a slight risk of including something less than factual about the diet of a Parasaurolophus. It’s a risk I’m willing to take.
For certain links, you might get an error saying it is unable to be imported. Usually, this isn’t a big deal since you likely have a lot of sources with overlapping information. If it’s something really important for your topic, you can add it manually by copying the text and pasting it in as a source.
YouTube videos can be a great option as well, I assume that’s a huge advantage of this tool being created by Google.
As a last resort if I’m having issues finding good sources, I’ll have ChatGPT or Claude generate a summary of the topic and copy-paste that in as a source.

Once you’ve added a bunch of sources, you’ll see them all listed and you can use the chat interface to ask questions about the topic.

A notebook populated with sources

Generating the Podcast

Now that you’ve got your sources, we can work on generating the actual podcast.

Customize the podcast with your own prompt

Without custom instructions, you’ll get a generic podcast, which will likely be tailored for adults and may not capture your kids’ attention. It’s way more fun to hit the “Customize” button in order to add your own prompt here.

The custom instructions are limited to around 500 characters, so you can’t go too crazy here. I like to do a mix of the following:

Include the kids’ names and ages. This helps the AI tailor the content to their level of understanding, also with the ability for their names to be mentioned once in a while.
Add some facts about them, or the family in general, to help keep things personal. For example, I might mention specific interests or experiences with the topic that can be woven into the podcast.
If there’s a specific aspect of the topic that I want to make sure gets covered (e.g. the temperament of Hinoxes in Zelda), I’ll add that into the prompt as well.
For some of the podcasts, I’ll include instructions to have a short quiz at the end, where the hosts will prompt the kids with questions and pause for a few seconds to give them time to answer.
You can also just have ChatGPT / Claude generate the prompt for you, they’re usually pretty good at keeping within the character limit.

Once you’ve got your prompt set, hit the “Create podcast” button and wait a few minutes for it to generate.

Generating the Episode Listing

While you’re waiting for the audio to generate, you can use this time to generate a title and description for the episode. I like to use the chat interface to ask for a title and description, for later use when uploading the episode.

Use the Chat interface to generate a text intro

I also use this time to create a cover image for the episode using ChatGPT. I’ll either prompt directly or use a custom GPT like Cartoonize Yourself GPT. Generally, I ask for a cartoon image of the kids with the topic in the background, it usually takes a couple of revisions to get something decent.

Once the audio has generated, download it locally to your computer.

Publishing

Now that you’ve got the audio, text intro, and image you’re ready to publish the podcast. There are a ton of solutions out there, but I found the quickest and easiest way to get this done was via Spotify for Creators, which is free if you’re already a Spotify user.

Generate episodes in bulk and leave them scheduled

This part is even easier than the rest, so figure it out on your own. One recommendation I do have is to generate episodes in bulk, and then schedule them out. Given your (likely) advanced age, you’ll probably forget what you created so it’ll be a fun surprise for the whole family.

Listening

C’mon, you don’t really need help with this, do you?

PS: If you’re looking for non-AI-generated podcasts for kids, Strange Animals and Extinct Zoo are the best of the ones that resonated with my children.

2024 Personal Tech Stack

Tue, 31 Dec 2024 00:00:00 +0000

As a neckbeard who started coding in the 1900s, I’ve steadfastly held on to my terminal-centered workflow. You might think that using tools that are decades old would mean things are nice and stable, but due to childhood brain trauma I keep on tweaking and adjusting my setup.

So, in order to help the thousands of future historians dedicated to studying my life in the future, here’s a snapshot of my personal tech stack as of the end of 2024.

Too many machines, too many platforms

A very reasonable number of computers (not visible: desktop that is a deskbelow and home server)

After over five years of not using macOS, I’m now on an M3 for my day-to-day development at Coda due to reasons beyond my control. This means I currently use:

M3 MacBook Pro: My primary work driver. It’s hefty for a laptop, but is mostly plugged in, driving three monitors with ease.
Desktop: A six-year-old random Dell with 64GB of RAM and plenty of drive space. Dual-boots Windows 11 and Debian Bookworm, but stays in Debian except for some occasional Windows gaming.
Framework laptop: Runs Windows 11, with heavy use of WSL2 for CLI for testing and some personal use.
Chromebook Pixel: For personal use and travel, it’s lightweight and has great battery life. Crostini Linux support is pretty great, so I keep my terminal.
Headless server: For my home lab, runs Debian Bookworm. Gets ssh’d into and has a few long-running tmux sessions.

Swapping between these mostly works fine since I’ve invested a ton of time in order to normalize as much as possible (see below), but there are plenty of paper cuts especially with macOS since it’s the only BSD and doesn’t use apt.

In 2025, I’m hoping to simplify this a bit. I’d love to return to desktop Linux as my primary work environment.

Dotfiles

Neovim and tmux in action

Over a decade ago, inspired by a coworker, I moved all my configuration files into a git repository and created some simple installation scripts.

Years later, I’ve changed pretty much everything about the setup. It started off as macOS only, then added Linux, followed by Chromebook via Crouton (IYKYK) and later Crostini, then added Windows via WSL2, removed macOS, and now macOS has returned again.

The core pieces are mostly unchanged throughout the years:

bash + tmux: I’ve done zsh for a while, but came back to bash due to incompatibilities. I’ve debated trying zsh again but haven’t felt the need. Originally I started on screen, since I learned that in the 1900s, but tmux is actively developed and has been great.
Neovim: Moved from Vim a while back, and the ecosystem continues to mature very quickly. I try to use IDEs every once in a while, but thankfully the combination of LSP and Copilot being available in Neovim means I’m not missing out on much.
fzf, fd, ripgrep, eza, bat, zoxide: These next gen CLI tools are awesome and you should use them as well.
cmus: Terminal-based music player that uses minimal resources and can be scripted. I love it.

My installation scripts set up all these tools and their configuration, so I can hop through different machines and keep a consistent experience.

Window management ends up being the biggest difference, with i3/Sway tiling window managers on Linux being far and away my favorite. Chromebook and Windows both have some decent built-in shortcuts, but macOS absolutely requires installing Rectangle in order to maintain any kind of efficiency.

I’ve tried switching to VS Code / Cursor, but it never sticks for more than a few days. There are still too many things that I do that are just much faster in a terminal.

LLM Tools

Although I’ve been working on an AI-powered product, only recently have I started to integrate LLMs into my terminal workflow (other than code completion via Copilot in Neovim).

My two favorites are:

llm: Fantastic CLI utility that connects to pretty much every LLM provider out there. I find myself using this all the time, some examples:
- Quick questions where I don’t want to open a browser
- Piping files / command output into it for summarization or transformation
- Drafting commit messages based on git diffs
I’ve done some experimenting with local models via ollama, it’s pretty neat to be able to run models locally, but it’s significantly slower than the cloud models and my use cases aren’t crazy so the monthly price is trivial anyway.
aider: This is a nice terminal-based AI coding assistant that can read your codebase, understand git history, and work iteratively on changes. It can use various models based on your API keys, and they have a very cool benchmark for new models as they come out. The pace of improvement here has been fast, and I’ve been able to partially outsource some small fixes.

Additionally, codecompanion.nvim is a nice Neovim plugin that also supports the major providers and lets you chat within Neovim. Very useful to be able to quickly move text between the editor and the chat (obviously, also possible via tmux, but vim registers are far more powerful).

Other 2024 Changes

I kept on getting nerd sniped into trying out some new tools or fixing things. Some examples:

I pulled the trigger and switched my Linux desktop from X11/i3 to Wayland/Sway. This took a ton of work and in the end it’s maybe 5% better and a few things are worse.
I moved from Alacritty to Foot and then finally to WezTerm. Looking back, this was mostly a distraction, as they’re all pretty similar these days. Ghostty looks promising but isn’t quite there yet.

There are probably other examples, but my brain is likely blocking them as a self-defense mechanism.

Non-Terminal Tools

Signal Desktop: About half of my messaging is via Signal, maybe a third is WhatsApp, and the remainder are SMS (not including automated alerts, of course). Would love to have everyone on Signal, but it’s not realistic.
1Password: Moved over from LastPass many years ago and no regrets.
Firefox & Chrome: I switched to Firefox as my primary browser for personal use, but have kept Chrome as my primary for work. Firefox on Android is awesome because you can run an ad blocker on it, which just makes the web actually somewhat usable.
Coda: Unsurprisingly, I run a fair amount of my life via Coda docs, including a personal tracker / journal that probably deserves its own post.
Spotify: Not perfect, but it works fine for me.

Misc Tools / Devices

They don’t live on my computer, but a few related things that I use (and enjoy) regularly:

Treadmill desk: I’ve had a sit-stand desk for years, but this year I finally added a treadmill. I try to do most of my meetings while walking, and can comfortably do about 2.5 mph (4 km/h). For light coding, I can pull off around 1.5 mph (2.5 km/h), but generally for tougher things I sit down.
Kindle: I’ve had a Kindle since the first one came out in 2007, and cannot imagine going back to paper books for reading. The portability (and built-in lighting) is too difficult to give up.
Beryl AX Travel Router: Spent a fair amount of time on the road with family this year, and having a consistent private WiFi network at each location saves a ton of time. You only need to authenticate once per location, then all devices just connect automatically after that. This lets me also travel with a Chromecast and have it work everywhere. WireGuard is supported on the router, making it easy to access my network back home.
Google Pixel 7: I moved over to Android some years ago when the cameras were (briefly) better than iOS and have stayed mostly due to inertia. The Pixel 7 is getting a bit old, so I’ll likely switch next year.

What’s next in 2025?

Everything’s changing so quickly, I won’t pretend to know. My biggest concern is that the Neovim ecosystem may not be able to keep up with the polish and integration of AI tools in VS Code and friends. The vim bindings aren’t bad, but I’ve optimized so much in tmux / Neovim that I always feel slower in VS Code.

Or maybe I’ll finally realize that tweaking my vim setup for the hundredth time is squandering the precious little time I have left on this earth and if I just spent a fraction of that effort into my mental and physical health I could be so much happier.

Oh, and also yazi looks like a potential replacement for vifm!

Hierarchical Tags in Hugo

Thu, 13 Jul 2023 00:00:00 +0000

Once again, if you’re not using Hugo to build a static site, your time is better spent elsewhere. Or maybe it’s not? I won’t pretend to know what’s going on with your life.

Hugo has a taxonomy system that is quite flexible. By default, the tag field is already enabled, so you can quickly organize posts by adding tag values into the post frontmatter like:

---
title: "Edan - Beauty and the Beat"
tags:
 - experimental-hip-hop
 - psychedelic-rock
---

Now that post will show up in both /tags/experimental-hip-hop and /tags/psychedelic-rock. But what if we want it to also appear in tags/hip-hop? One option is to create the following directory structure:

content/
├── tags/
 ├── hip-hop/
 ├── experimental-hip-hop/
 ├── _index.md
 ├── rock/
 ├── psychedelic-rock/
 ├── _index.md

But then, instead of tagging with just experimental-hip-hop, you’ll have to use hip-hop/experimental-hip-hop which is wordy and error-prone. Also, each tag will only be able to have a single parent.

Instead, we’ll try something different: we’ll add tags to the tag pages themselves. For example, create a file at content/tags/experimental-hip-hop/_index.md and add the following frontmatter:

---
title: "Experimental Hip-Hop"
tags:
 - hip-hop
---

This by itself won’t do much, we still won’t see Beauty and the Beat when visiting /tags/hip-hop. The next step is to change the layout of our tag pages in order to also pull all pages from any child tags. Typically, the template for a tag page will look something like:

{{ range .Pages }}
 <h2>{{ .Title }}</h2>
 {{/* Post rendering logic goes here... */}}
{{ end }}

The .Pages collection will only grab pages with the specific tag (e.g. hip-hop), it does not include any child tags. We can adjust the code to include child tags by first adding a new partial:

{{/*
 Returns a slice of pages matching the given tag, including all pages from child tags.

 Usage:
 {{ $pages := partial "partials/get_descendant_tag_pages" (dict "Page" .) }}
*/}}
{{ define "partials/get_descendant_tag_pages" }}
 {{ $matches := or .Matches slice }}
 {{ $all_tag_pages := (where (where site.Pages ".Kind" "eq" "term") ".Type" "eq" "tags") }}
 {{ range where $all_tag_pages ".Params.Tags" "intersect" (slice .Page.Data.Term) }}
 {{ if not (in $matches .) }}
 {{ $matches = $matches | append . }}
 {{ $child_tag_pages := partial "partials/get_descendant_tag_pages" (dict "Page" . "Matches" $matches) }}
 {{ $matches = $matches | union $child_tag_pages }}
 {{ end }}
 {{ end }}
 {{ return $matches }}
{{ end }}

Now, update the template for the tag page to use the result of this partial instead of .Pages:

{{ $pages := partial "partials/get_descendant_tag_pages" (dict "Page" .) }}
{{ range $pages }}
 <h2>{{ .Title }}</h2>
 {{/* Post rendering logic goes here... */}}
{{ end }}

Now, when you visit /tags/hip-hop you’ll see Beauty and the Beat listed along with any other pages tagged with experimental-hip-hop. One nice thing about this technique is that you can add multiple parent tags to a single tag page, so you can make nursery-rhymes a child of both children and death-metal in order to confuse your headbanging friends.

Using FZF in a Deno Script

Tue, 23 May 2023 00:00:00 +0000

At some point, all of my Bash scripts become incomprehensible enough that I’m forced to re-write them in another language. Usually, I’d switch into Python (which I’m also terrible at) since it’s broadly available or trivial to install. Lately, I’ve started using Deno instead, since it means I can use TypeScript which I actually (kinda) know. Deno is a little more work to install, but otherwise has some nice ergonomics for CLI tools for a few reasons:

Deno supports TypeScript natively, so you get type safety without needing to compile the code
No need to install or run a package manager like pip or npm to install dependencies, deno takes care of it automatically when running the script
The Standard Library has a solid command line argument parser
Startup time is faster than Node, so it’s not a huge pain to run a script for a one-off task

As you know, I’m a big fan of FZF, and I use it in my bash scripts all the time. There’s a library that mimics the fuzzy-find algorithm, but it’s mostly meant for the browser so it doesn’t handle terminal input and display (especially nice touches like honoring readline keyboard shortcuts).

Fortunately, Deno has some nice APIs for spawning external commands, so we can just use the real fzf binary instead. Here’s some code I’ve used in a few places in order to spawn FZF in order to do some interactive selection:

export interface FzfSelection {
 /** Value displayed to the user, must not contain newlines */
 display: string;
 /** Unique identifier for this selection, must not contain spaces */
 id: string;
}

interface FzfOptions {
 /** Allow multiple selections */
 allowMultiple?: boolean;
 /** Automatically select if only one item */
 autoSelectSingle?: boolean;
}

const BASE_FZF_ARGUMENTS = [
 "--cycle",
 "--no-sort",
 "--bind",
 "ctrl-a:select-all,ctrl-d:deselect-all",
 "--with-nth",
 "2..",
];

/**
 * Let the user make selections interactively via FZF
 */
export async function getUserSelections<T extends FzfSelection>(
 items: T[],
 { allowMultiple = false, autoSelectSingle = false }: FzfOptions = {},
): Promise<T[]> {
 if (!items.length || (items.length === 1 && autoSelectSingle)) {
 return items;
 }

 const fzf = new Deno.Command(`fzf`, {
 args: [...BASE_FZF_ARGUMENTS, allowMultiple ? "--multi" : ""].filter(
 Boolean,
 ),
 stdin: "piped",
 stdout: "piped",
 stderr: "inherit",
 });

 const process = fzf.spawn();

 const choiceList = items
 .map((line) => `${line.id} ${line.display}`)
 .join("\n");

 // Write the choices to stdin
 const encoder = new TextEncoder();
 const writer = process.stdin.getWriter();
 // Must use trailing newline, otherwise last item won't appear
 writer.write(encoder.encode(choiceList + "\n"));

 // User can now interact with fzf to filter and select

 // This will now wait until the process exits
 const { code, success, stdout } = await process.output();
 if (!success) {
 switch (code) {
 case 1: // No match
 case 130: // Command terminated by user
 return [];
 default:
 throw new Error(`fzf exited with status ${code}`);
 }
 }

 const lines = new TextDecoder().decode(stdout).trim();

 const selectedIds = lines
 .split("\n")
 .map((line) => line.split(" ")[0]);

 return items.filter((item) => selectedIds.includes(item.id));
}

Here’s an example of how you’d use it:

const KombuchaFlavors = [
 {id: '1', display: 'Gingerade ($3.99)'},
 {id: '2', display: 'Multi-Green ($3.49)'},
 {id: '3', display: 'Guava Goddess ($3.99)'},
 {id: '4', display: 'Island Bliss ($2.99)'},
 {id: '5', display: 'Strawberry Serenity ($4.99)'},
];

const flavorsToOrder = await getUserSelections(KombuchaFlavors, {allowMultiple: true});

console.log("You ordered: ", flavorsToOrder.map((flavor) => flavor.display).join(", "));

And here it is in action:

Deno script using FZF interactively

Note that there are a few edge cases that aren’t handled here: specifically, you need to make sure the id does not have any spaces, and there cannot be any newlines in the display value. If you want to get fancy, you could stream the options into FZF as they’re generated, but that will be left as an exercise to the reader.

Debugging Hugo via meta tags

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

If you don’t use Hugo to build a website, then you’re gonna be real bored here. Go ahead and skip this page, take advantage of your time savings and do a quick stretch or maybe a few push-ups.

It can be tricky to understand Hugo’s template lookup order, as well as the properties available on the Page object. After a bunch of frustration and semi-permanent hair loss, I came up with the following helper partial:

{{/*
 Output a bunch of `<meta>` tags for the given page

 Expects a Page object
*/}}
{{ define "partials/debug_meta_tags.html" -}}
 <meta name="hugo-bundle-type" content="{{ .BundleType }}" />
 <meta name="hugo-categories" content="{{ .Params.categories }}" />
 <meta name="hugo-fuzzy-word-count" content="{{ .FuzzyWordCount }}" />
 <meta name="hugo-is-home" content="{{ .IsHome }}" />
 <meta name="hugo-is-node" content="{{ .IsNode }}" />
 <meta name="hugo-is-page" content="{{ .IsPage }}" />
 <meta name="hugo-keywords" content="{{ .Keywords }}" />
 <meta name="hugo-kind" content="{{ .Kind }}" />
 <meta name="hugo-lastmod" content="{{ .Lastmod }}" />
 {{ with .PrevInSection -}}
 <meta name="hugo-prev-in-section" content="{{ .RelPermalink }}" />
 {{ end -}}
 {{ with .NextInSection -}}
 <meta name="hugo-next-in-section" content="{{ .RelPermalink }}" />
 {{ end -}}

 {{ with .File -}}
 <meta name="hugo-file-path" content="{{ .Path }}" />
 {{ end -}}

 {{ range .Aliases -}}
 <meta name="hugo-alias" content="{{ . }}" />
 {{ end }}

 <meta name="hugo-section" content="{{ .Section }}" />
 <meta name="hugo-type" content="{{ .Type }}" />

 {{ range .Params.tags -}}
 <meta name="hugo-tag" content="{{ . }}" />
 {{ end }}

 {{ range .Ancestors -}}
 <meta name="hugo-ancestor" content="{{ .RelPermalink }}" />
 {{ end }}

 {{ if .Parent -}}
 <meta name="hugo-parent" content="{{ .Parent.RelPermalink }}" />
 <meta name="hugo-parent-kind" content="{{ .Parent.Kind }}" />
 <meta name="hugo-parent-type" content="{{ .Parent.Type }}" />
 {{- end }}

 {{ range .Pages -}}
 <meta name="hugo-child-page-path" content="{{ .RelPermalink }}" />
 {{ end }}
{{- end }}

Take that code and put it in a file called debug_meta_tags.tmpl in your layouts/partials directory. Now in your baseof.html layout (or wherever you’re defining your <head>) add the following within the <head>:

{{ if site.IsServer -}}
 {{ print "<!-- Debug info only available when running a local server -->" | safeHTML }}
 {{ partial "debug_meta_tags" .Page }}
 {{ print "<!-- End debug info -->" | safeHTML -}}
{{- end }}

The nice thing about using <meta> tags is that they’re not displayed in the browser, so it doesn’t affect the design of your site. Also, the site.IsServer conditional means these tags will only be output when you’re running your local development server (i.e. hugo server), so they won’t be part of your deployed site. Here’s an example of what the output looks like for this post:

<!-- Debug info only available when running a local server -->
<meta name="hugo-bundle-type" content="leaf" />
<meta name="hugo-categories" content="" />
<meta name="hugo-fuzzy-word-count" content="400" />
<meta name="hugo-is-home" content="false" />
<meta name="hugo-is-node" content="false" />
<meta name="hugo-is-page" content="true" />
<meta name="hugo-keywords" content="[]" />
<meta name="hugo-kind" content="page" />
<meta name="hugo-lastmod" content="2023-01-10 00:00:00 &#43;0000 UTC" />
<meta name="hugo-prev-in-section" content="/2022/make-git-better-with-fzf/" />
<meta name="hugo-file-path" content="posts/2023-hugo-debug-meta-tags/index.md" />
<meta name="hugo-section" content="posts" />
<meta name="hugo-type" content="posts" />
<meta name="hugo-ancestor" content="/posts/" />
<meta name="hugo-ancestor" content="/" />
<meta name="hugo-parent" content="/posts/" />
<meta name="hugo-parent-kind" content="section" />
<meta name="hugo-parent-type" content="posts" />
<!-- End debug info -->

These are also easily viewed from the browser’s developer tools in the element inspector, so you don’t even need to view source.

Of course, for this stupid site over half these fields are not of much interest. But maybe it’s useful for your erotic, yet tasteful, Paw Patrol fanfic site!

Unlock SSH keys with the 1Password CLI

Wed, 28 Sep 2022 00:00:00 +0000

Like any self-respecting, somewhat security conscious nerd I make sure my SSH keys have a stupidly-long passphrase. Obviously, I use a password manager to store my passwords. But instead of copying and pasting the passphrase from 1Password into the terminal like some kind of 12th-century peasant, let’s walk through how to grab the passphrase out of 1Password automatically.

Note: If you’re running the desktop application, 1Password can actually serve as an SSH Agent. If that setup works for you, then I recommend going that direction instead and stop reading immediately. I spent precious time I’ll never get back figuring out how to do this because I can’t run the desktop application as an SSH agent due to reasons so unimportant you’d instantly die of boredom if I told you.

How `SSH_ASKPASS` works

Normally ssh-add reads your passphrase straight from the terminal. But pipe something into it and it thinks there’s no terminal, and if DISPLAY and SSH_ASKPASS are set it’ll run whatever program SSH_ASKPASS points to, using the output as the passphrase. This was designed for GUI password dialogs, but nothing stops us from abusing it in the terminal.

The trick is an empty pipe:

echo | SSH_ASKPASS=op_ask_pass ssh-add

ssh-add calls op_ask_pass, reads its output as the passphrase, and we never have to touch the clipboard.

I use two helper scripts for the workflow. op_ask_pass calls op_get_pass with --categories "SSH Key":

#!/usr/bin/env bash
#
# Use 1Password to unlock SSH keys
#
# Usage:
#
# echo | SSH_ASKPASS=op_ask_pass ssh-add

set -euo pipefail
IFS=$'\n\t'

main() {
 op_get_pass --categories "SSH Key"
}

main "${@}"

op_get_pass handles signing in to 1Password, uses fzf so you can fuzzy-search through your items, then outputs the password:

#!/usr/bin/env bash
#
# Fuzzy find a password from 1Password and output to stdout

set -euo pipefail
IFS=$'\n\t'

main() {
 local -r user_id="$(op account list --format json | jq -r '.[].user_uuid')"
 local -r variable_name="OP_SESSION_${user_id}"
 local op_session

 op_session="$(tmux show-environment -g "${variable_name}" | cut -d= -f2-)"

 if ! op whoami --session "${op_session}" &> /dev/null; then
 echo "Sign in to 1Password first"
 op_session="$(op signin --raw)"
 tmux set-environment -g "${variable_name}" "${op_session}"
 fi

 # Select item via FZF and output password
 # shellcheck disable=SC2068
 op item list --session "${op_session}" ${@} \
 | fzf --no-multi --header-lines=1 --nth=1.. --with-nth=2.. --exit-0 \
 | cut -d' ' -f1 \
 | xargs --no-run-if-empty \
 op item get --fields=password --session "${op_session}"
}

main "${@}"

The 1password session token gets added to the tmux global environment, so you only have to sign in once per tmux session.

Copy any password within tmux

op_get_pass isn’t just for SSH keys, I have <prefix> . open a popup to put a password into the tmux paste buffer:

# Copy password from 1Password to tmux paste buffer
if-shell 'command -v op' {
 bind-key -N "Copy password to paste buffer" . {
 display-popup -T "#[fg=cyan] 1Password" -w 80% -h 80% -E -E \
 'bash -c "set -o pipefail; \
 op_get_pass | tmux load-buffer - \
 && tmux display-message -N \"Copied to paste buffer\""'
 }
}

Yet another super-brittle hacky workflow with obvious security risks all just to avoid using a GUI, success!

Make Git better with FZF

Mon, 13 Jun 2022 00:00:00 +0000

Like any nerd who spends way too much time in the command-line, I absolutely love FZF, a fantastic fuzzy finder that’s been an essential part of my workflow for years now.

By default, FZF doesn’t do much but it really shines when you use it in conjunction with other tools. I use it on a near-daily basis with Git, here’s the relevant section of my .gitconfig file, the full file is available in my dotfiles repo:

# Place in `~/.gitconfig` or `~/.config/git/config`
[alias]
 addm = "!git ls-files --deleted --modified --other --exclude-standard | fzf -0 -m --preview 'git diff --color=always {-1}' | xargs -r git add"
 addmp = "!git ls-files --deleted --modified --exclude-standard | fzf -0 -m --preview 'git diff --color=always {-1}' | xargs -r -o git add -p"
 cb = "!git branch --all | grep -v '^[*+]' | awk '{print $1}' | fzf -0 --preview 'git show --color=always {-1}' | sed 's/remotes\\/origin\\///g' | xargs -r git checkout"
 cs = "!git stash list | fzf -0 --preview 'git show --pretty=oneline --color=always --patch \"$(echo {} | cut -d: -f1)\"' | cut -d: -f1 | xargs -r git stash pop"
 db = "!git branch | grep -v '^[*+]' | awk '{print $1}' | fzf -0 --multi --preview 'git show --color=always {-1}' | xargs -r git branch --delete"
 Db = "!git branch | grep -v '^[*+]' | awk '{print $1}' | fzf -0 --multi --preview 'git show --color=always {-1}' | xargs -r git branch --delete --force"
 ds = "!git stash list | fzf -0 --preview 'git show --pretty=oneline --color=always --patch \"$(echo {} | cut -d: -f1)\"' | cut -d: -f1 | xargs -r git stash drop"
 edit = "!git ls-files --modified --other --exclude-standard | sort -u | fzf -0 --multi --preview 'git diff --color {}' | xargs -r $EDITOR -p"
 fixup = "!git log --oneline --no-decorate --no-merges | fzf -0 --preview 'git show --color=always --format=oneline {1}' | awk '{print $1}' | xargs -r git commit --fixup"
 resetm = "!git diff --name-only --cached | fzf -0 -m --preview 'git diff --color=always {-1}' | xargs -r git reset"

Here’s what each command does, along with a demo for a few of them:

addm: Add new or modified files, use <tab> to select multiple, patch mode via addmp. Preview shows the file diff.
cb: Select branch to switch to, preview shows last commit

Using FZF to switch git branches
cs: Choose stash to apply, preview shows diff
db: Delete branches, use <tab> to select multiple, force delete via Db. Preview shows last commit

Using FZF to delete git branches
ds: Delete a stash, preview shows diff
edit: Choose modified files to edit, use <tab> to select multiple (one tab per file). Preview shows diff

Using FZF to edit modified files
fixup: Commit staged files as a fixup, fuzzy-finding the original commit. Preview shows commit
resetm: Choose staged files to reset, use <tab> to select multiple. Preview shows cached diff

The FZF wiki has a few more examples if you’re looking for further inspiration. Hopefully, this will change your life as much as it did mine. Just make sure you don’t scream out “I love you, FZF!” during an intimate moment just like … a friend of mine did. He lives in Canada, you wouldn’t know him.

Extracting FitBit Weight Data

Fri, 18 Feb 2022 00:00:00 +0000

Being just barely off the spectrum, I’m inexorably drawn to measuring and recording all sorts of things. Without going into the (boring) details, I’ve been weighing myself on a near-daily basis since my mid-twenties. In 2013, I gave into temptation and got an internet-connected scale that automatically uploads to FitBit, depriving me of the joy of manual data entry every morning.

Like any normal, well-adjusted person, I want to run esoteric multivariate analysis on my weight data. FitBit provides basic export functionality, but it’s not made for my serious business™:

Only weight is provided, no body fat percentage
If there is no measurement in a given day, the weight value is silently interpolated between the nearest measurements

Though I can be a bit obsessive about data, I’m fine living without the body fat percentage, since these cheap scales aren’t particularly accurate anyway. However, interpolating weight data across days is simply unacceptable, and I’m not the only one incredibly offended.

After waiting a few years for FitBit developers to fix this, today I decided to take matters into my own hands and get the data myself. I’ve documented the steps here for my future self along with other weight-conscious obsessives.

If you go to the FitBit Weight Page, there’s a nice little chart you can use to see all your historical measurements without any interpolated values. Poking around in the browser developer tools, you’ll see that this chart is generated on the browser-side which means that at some point in time the raw data is downloaded by the browser. This is fantastic news.

Fire up the Network Panel in the browser web tools and keep an eye out for a request to the following URL:

https://web-api.fitbit.com/1.1/user/-/body/log/weight/graph/all.json?durationType=all

If you take a look at the server response, you’ll see something like:

{
 "graphValues": [
 {
 "bmi": 23.9,
 "dateTime": "2013-09-05T12:00:00",
 "fat": 19.358999252319336,
 "weight": 80900
 },
 {
 "bmi": 23.83,
 "dateTime": "2013-09-06T12:00:00",
 "fat": 19.68600082397461,
 "weight": 80670
 },
 // <thousands of entries omitted>
 ],
}

That’s a bingo! The weight value is provided in grams, and it even includes the body fat percentage, which is missing from FitBit’s export.

Save this huge JSON blob to its own file called all.json. Now you’re gonna have to open up the command line and use jq to convert this JSON into something easier to use. We’ll start by running:

jq '.graphValues[] | [ .dateTime, .weight, .fat ]' all.json

Note that I don’t bother grabbing the BMI data here because it’s easily derived later. That jq command above will output thousands of lines that look something like:

[
 "2013-09-05T12:00:00",
 80900,
 19.358999252319336
]
[
 "2013-09-06T12:00:00",
 80670,
 19.68600082397461
]

This isn’t quite usable yet, so let’s ask jq to convert it to CSV:

jq -r '.graphValues[] | [ .dateTime, .weight, .fat ] | @csv' all.json > all.csv

Hooray, now you have everything in a CSV file which you can use to import into Excel, Sheets, or (my biased choice) Coda. Don’t forget to convert grams into your preferred unit, which is either dram, mercantile stone, or pennyweight, depending on which 19th century British village you hail from. Now it’s time for you to touch grass and burn some calories, nerd.

Letterbox Blur with ImageMagick

Mon, 13 Dec 2021 00:00:00 +0000

Web designers (and pre-2015 Instagram users) have all experienced tyrannical enforcement of square crops for images. If you’ve got an image with a non-square aspect ratio, you have two reasonable choices:

Crop the image to a 1:1 aspect ratio: Fairly easy to do manually. When doing this automatically, the naïve technique is to crop from the center, but there are some clever heuristics out there to get better results.
Letterbox/Pillarbox: Keep the entire image visible, filling the excess space by surrounding the image with (typically) black bars.

(Of course, you could stretch the image to force a new aspect ratio, but it’s pretty much guaranteed to look bad)

The terms “Letterbox” and “Pillarbox” come from the film world, as they’ve been dealing with the issue forever. With the increased frequency of vertical video, a recent technique has been to replace the traditional black bars with a stretched and blurred version of the video, which creates a neat effect. There doesn’t seem to be a standard name for the blurred letterbox effect, though some people call it “blanking fill” since that’s the name used in DaVinci Resolve.

It’s possible to do this effect purely with CSS (an exercise left to the reader), but due to reasons beyond my control, I recently had a situation where using CSS wasn’t an option so once again ImageMagick comes to the rescue. Here’s the command I used:

convert image.jpg \
 \( \
 -clone 0 \
 -blur 0x20 \
 -resize 800x800\! \
 -modulate 80,50,100 \
 \) \
 +swap \
 -gravity center -compose over -composite \
 output.jpg

There’s no good way to put comments into a multi-line bash command, so here’s what the command does:

Make a copy of the original image
Blur by 20 pixels
Stretch to force a square aspect ratio
80% brightness, 50% saturation
Center the original image on top of the blurred copy

Here’s the output for a landscape and a portrait image

Pillarbox blur on a portrait image

Letterbox blur on a landscape image

To convert a bunch of images in bulk, feel free to use this bash script which is, as always, of questionable quality:

#!/usr/bin/env bash
#
# Create a square image, letter/pillarbox blur effect if aspect ratio not already square

get_largest_dimension() {
 local dimensions
 dimensions=$(identify -format "%w\n%h" "$@" | sort --numeric-sort --reverse --unique)

 if [[ $(echo "${dimensions}" | wc -l) == "1" ]]; then
 echo 'square'
 else
 echo "$dimensions" | head -n 1
 fi
}

main() {
 for filepath in "$@"; do
 if [[ ! -r "${filepath}" ]]; then
 >&2 echo "Can't read file ${filepath}, skipping"
 continue
 fi

 local dim
 dim=$(get_largest_dimension "${filepath}")

 local dest
 local ext
 local filename
 filename=$(basename "${filepath}")
 ext=${filename##*.}

 dest="$(dirname "${filepath}")/$(basename -s ".${ext}" "${filename}")-square.${ext}"

 if [[ "$dim" == "square" ]]; then
 echo "$(basename "${filepath}") already square, linking to $(basename "${dest}")"
 # Link file so we don't take up excess disk space
 ln "${filepath}" "${dest}"
 continue
 fi

 echo "Converting $filepath into ${dim}x${dim} square"

 convert "${filepath}" \
 \( -clone 0 -blur 0x20 -resize "${dim}x${dim}"\! -modulate 80,50,100 \) \
 +swap -gravity center -compose over -composite "$dest"
 echo "Saved $dest"
 done
}

main "$@"

Scripting Photo Collages with ImageMagick

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

Back before everyone was working from home, I wrote about my Green Screen setup and shared a selection of daily screenshots from meetings. Now that everyone works from home, the joke is a bit tired (and I got lazy) so I no longer bother with the green screen. My co-workers can now see my office filled with three crates of pandemic-panic-purchased toilet paper that I’m still working my way through.

I never got around to automating the collection of action shots from that post. Zoom has an API but my feeble attention span didn’t last long enough to find a good way to programmatically capture a daily image. Manual screenshots were simple enough, though I did often forget due to the fact that I was born in the 1900s and it’s probably already past my bedtime.

I did, however, have a simple script for generating the 3x3 images from screenshots using ImageMagick. Much like exiftool, which I use extensively for photo management, ImageMagick is one of those programs that have been around forever and can be coaxed to do just about anything via arcane command-line flags.

Though it’s been years, I still don’t know what I’m doing when writing these things so I’ll share here in case I ever need it again:

#!/bin/bash
#
# Creates 3x3 montages of given images, saved to current directory
#
# Usage:
# $ ./create_montage.sh [files...]

main() {
 local resized_dir
 resized_dir=$(mktemp -d)

 local iter
 iter=0
 for filename in "$@"; do
 iter=$(expr $iter + 1)

 echo "Resizing $filename"
 convert "$filename" -resize x400 -gravity center -crop 600x400+0+0 +repage \
 "$resized_dir/$iter.png"

 if [[ $(expr $iter % 9) == 0 ]]; then
 echo "Creating montage $(expr $iter / 9)"
 montage "$resized_dir"/*.png -mode Concatenate \
 "montage-$(expr $iter / 9).jpg"
 rm "$resized_dir"/*.png
 echo "It's time $iter"
 fi
 done

 echo "Processed $iter collages"
 rm -rf "$resized_dir"
}

main "$@"

It’s not the prettiest, but it did the job. Or at least it used to. Maybe it still does? I guess we’ll never know.

Getting Debian to send emails that actually get delivered

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

As I’ve warned you before I barely know how to turn on a computer, let alone operate it securely. Given enough time, I do occasionally manage to get things working after spending an unreasonable amount of time (and often losing data). Sometimes, only sometimes, I’m smart enough to write down a few steps so my future forgetful self can blindly repeat them in the future.

In today’s episode, we’ll get a Debian machine to be able to send out emails. This should be simple, and probably is if you know what you’re doing, but took me a while to get right and actually ensure that emails arrived.

Get an SMTP Provider

Back in ye olde golden era of the Internet, just about any computer could send an email. Thanks to a bunch of jackasses who spammed the entire Internet over the past few decades, sending email that actually gets delivered is best left to the professionals these days.

So the first step is to find some service that provides an SMTP gateway for your machine to send emails through. In theory, you could use any old GMail account here, but I’m slightly paranoid and don’t want Google account credentials sitting on whatever old computer I have laying around.

Fortunately, SendGrid has a free tier that lets you send 100 emails a day for free. This is more than enough for my needs, and probably yours unless you’re trying to help some foreign prince transfer funds, in which case I suggest you jump off a cliff.

Once you’ve set up a SendGrid account, go and create a dedicated API key for your computer. You should only need the “Mail Send” access details. I’d recommend a unique key per machine you’re using, but you do you.

SSMTP

Next we’ll install SSMTP in order to send emails. Why SSMTP? Because it’s the first one I found, so obviously it’s the best.

sudo apt install ssmtp

Now edit the /etc/ssmtp/ssmtp.conf file in order to have the SendGrid credentials (obviously, you should replace example.com, the AuthPass, etc with your own values). If you’re using some other SMTP provider, then you gotta figure out what to put here on your own:

# The person who gets all mail for userids < 1000
root=postmaster

# SMTP info
mailhub=smtp.sendgrid.net:587
AuthUser=apikey
AuthPass=INSERT_GENERATED_PASSWORD_HERE
UseSTARTTLS=Yes

# Where will the mail seem to come from?
rewriteDomain=example.com
hostname=my-computer.example.com

# Don't let users specify their own `From:` address
FromLineOverride=NO

You can now test if this works locally via:

echo 'To: Lovely Human <you@example.com>
From: Your Computer <you@example.com>
Subject: Hello, from your computer

Greetings from your computer, hopefully you see this!' | sudo ssmtp you@example.com

Assuming you’ve done everything correctly, this email should arrive in your inbox. If not, check the SendGrid Activity Feed and see if there is an error message. If you still can’t figure it out, you should reconsider your life choices and think about writing that novel you’ve been putting off.

Sending Mail Externally

There are a bunch of programs that run on your machine that will try to send email from a local user, so we need to make sure those don’t get lost due to being invalid. We do that by editing the /etc/ssmtp/revaliases (create it if it doesn’t exist):

# location_account:delivery_address:smtp_server:smtp_port
root:you@example.com:smtp.sendgrid.net:587
postmaster:you@example.com:smtp.sendgrid.net:587
you:you@example.com:smtp.sendgrid.net:587

This creates a mapping such that mail from the given user is rewritten to be from an external address instead of something like you@your-machine which will probably get rejected by most email providers.

Now test by sending an email to yourself via the command line:

echo 'Hello Sysadmin!

This message was sent via the command line' | mail -s "Message From the Command Line" you@example.com

Once again, check the SendGrid Activity Feed if you don’t see the email and consider painting or some other more productive hobby if things still aren’t working.

Loose ends

In theory, you should be all set to receive emails. That didn’t seem to be the case for me though, so there are a few places I had to go through and make more changes that I don’t really understand.

Unattended Upgrades

If you’re running unattended upgrades to automatically update your machine, you’ll probably want to change how those emails get sent. Edit /etc/apt/apt.conf.d/50unattended-upgrades with the following:

// Replace the line with `Unattended-Upgrade::Mail "";`
Unattended-Upgrade::Mail "you@example.com";
Unattended-Upgrade::Sender "Machine Upgrades <you@example.com>";

Assuming things worked, you’ll now get an email whenever any automatic updates are installed.

`Sudo` Authentication Failures

By default, sudo will try to email when someone attempts to call sudo but doesn’t enter the correct password. In order to get those emails delivered, I had to add the following into /etc/sudoers:

Defaults mailto="you@example.com"
Defaults mailfrom="you@example.com"

To test, try to run any command via sudo without entering the correct password.

Cron

If you’re using Cron to run some periodic tasks, you might not know that your system emails you the output of each command. At least on my machine, this was going into some dark place never to be seen again. To fix this, run crontab -e and add the following at the top:

MAILFROM=you@example.com
MAILTO=you@example.com

# Cron jobs go below
0 5 * * * echo "It's 5am, did you know your computer is on?"

By this point, you’re old enough to test this on your own.

Other Places

I’m pretty certain I’ve missed others, I’ll add those whenever I discover them.

Wrapping Up

Hopefully your life is slightly better now that your computer can send emails. Mine isn’t, but I like to pretend.

Linux disk encryption with LUKS and LVM

Fri, 28 Feb 2020 00:00:00 +0000

I don’t let lack of knowledge stop me from trying to run and maintain a few Linux machines. Just like writing bash scripts, I’m always forgetting how I did things previously so I’m writing it all down this time so I can copy and paste it again later in a few years.

I don’t reach tinfoil hat level paranoia, but I do like having some level of data security so thieves can’t read my journal and figure out which BTS member I’m currently crushing on (Jungkook). Full disk encryption is pretty easy on Windows or Mac, and it seems easy on Linux, but you always have to be on your toes in the land of the penguin. Specifically, the following two requirements are typically at odds:

Full disk encryption
Ability to boot without being physically present

I’ve only ever used LUKS for disk encryption because it’s the default with Debian and I’m too lazy to research alternatives. The default setup has a tiny unencrypted boot partition that prompts you to unlock the main disk so you can actually use the computer. This is fine for a desktop or laptop, but not really tenable for situations where you can’t physically type in the password on the machine.

Fortunately, there’s a nifty package called dropbear-initramfs which adds a barebones SSH server to that tiny boot partition which allows you to unlock the machine remotely. Installation is pretty straightforward, you’ll need to set up your SSH key by creating a /etc/dropbear-initramfs/authorized_keys file and adding your public key:

no-port-forwarding,no-agent-forwarding,no-X11-forwarding,command="/bin/cryptroot-unlock" ssh-rsa <SSH public key goes here>

The command=/bin/cryptroot-unlock part is optional, but very convenient since it means you’ll automatically be prompted to unlock the drive whenever you connect to the server. It’s also a way to lock down the machine a bit more. Once you’ve added your key, make sure to set the correct permissions and make another offering to the boot gods:

# File is ignored if permissions aren't strict
chmod 400 /etc/dropbear-initramfs/authorized_keys
# Changes don't take effect if you don't update!
sudo update-initramfs -u

You can now reboot your machine and (assuming it can get network access) it will open up an SSH server so you can connect and input the encryption passphrase. Note that the server key for this miniserver is gonna be different than your server once booted. So I recommend doing the following in your ~/.ssh/config file:

Host *_unlock
 UserKnownHostsFile /home/fortes/.ssh/known_hosts_unlock

This will make sure SSH doesn’t freak out and worry that your server is being hijacked all the time.

So now the machine can boot without a sweet human caress, congratulations you might be done!

Adding encrypted drives

If you have more than one drive, you still have a little more work left. This will set up what is apparently called LVM on LUKS, a popular alternative is called LUKS on LVM and it might be better for you? The Arch Wiki has a lot of information that I definitely did not read.

Make sure your drive is connected, and then you’ll need to figure out what device it’s been assigned. This is typically something like /dev/sdb or whatever. The best way to find out which disk you want is via lsblk (or possibly sudo blkid, I can never remember). If the drive was previously formatted, you may need wipe out the existing partitions via fdisk /dev/sdb. The interface is (of course) a bit cryptic, you’ll need to keep on hitting d at the prompt to delete all the partitions. I highly recommend double and triple checking which drive you’re operating on, since recovering from deleting all those partitions is not very fun. Or you can just YOLO, whatever I’m not your dad.

Now that the drive is wiped, it’s time to set up encryption. You should generate a nice long passphrase and save it in your password manager. The partition can also be unlocked with the contents of a static file, and we’ll use that for the automatic unlocking:

# You should be _very_ confident about this choice
export DRIVE_TO_ADD="/dev/sdc"

# Create a file full of random noise used
sudo dd if=/dev/random bs=32 count=1 of=/root/.data-keyfile
# Unless you trust everyone/everything with access to your machine, you should
# lock down permissions for the keyfile
sudo chmod 400 /root/.data-keyfile

# This will prompt you for a passphrase, pick a secure one and store it in
# your password manager (you should rarely, if ever, need to type it in)
sudo cryptsetup luksFormat ${DRIVE_TO_ADD}
# Add the generated file as a second encryption key (will prompt you for the
# passphrase you just generated)
sudo cryptsetup luksAddKey ${DRIVE_TO_ADD} /root/.data-keyfile

The disk is now encrypted. We still need to do a few things to get it mounted automatically though. First, add an entry to /etc/crypttab in order to make the disk decrypt on boot:

# Append to /etc/crypttab

# Find the disk UUID via `sudo blkid`, which will output something like:
# /dev/sdc: UUID="YOUR-DISK-UUID" TYPE="crypto_LUKS"
sdc_crypt UUID=YOUR-DISK-UUID /root/.data-keyfile luks,discard

This file gets used by the system to automatically decrypt drives at boot. Although the decryption key is a file on the system, it’s sitting the main (encrypted) drive that’s only accessible after unlocking the entire machine at boot.

Now test to make sure it gets automatically decrypted via:

sudo cryptdisks_start sdc_crypt

Assuming no errors, you should have the unencrypted disk available at /dev/mapper/sdc_crypt. In theory, you should now be able to format this directly via mkfs.ext4 or your favorite disk format.

On my machines, I still go ahead and set up my partitions via LVM since that’s what Debian does by default and I’m just cargo culting my way through this whole thing. In theory there is a bunch of flexibility to be gained via LVM, but I’ve never actually learned how it all works.

# You might need to do this, LVM will complain about device filter
sudo wipefs -a ${DRIVE_TO_ADD}

# Create a bunch of LVM stuff that I don't understand
sudo pvcreate /dev/mapper/sdc_crypt # confirm with `pvdisplay /dev/mapper/sdc_crypt`
sudo vgcreate data-vg /dev/mapper/sdc_crypt # confirm with `vgdisplay data-vg`
sudo lvcreate -n data -l100%FREE data-vg # confirm with `lvdisplay /dev/data-vg/data`

Now we’re ready to actually format the drive:

sudo mkfs.ext4 -m 0 /dev/data-vg/data

In order to automatically mount the drive, we need to edit /etc/fstab:

# Add into /etc/fstab
/dev/mapper/data--vg-data /mnt/data ext4 defaults,user,noatime,nofail 0 2

Test that the /etc/fstab setup worked:

sudo mount -a

Voilà, you should now see your disk mounted at /mnt/data, and all it took was a crazy number of error-prone steps written by a total stranger with, at best, a passing understanding of how it all works.

Working From Everywhere

Wed, 17 Jul 2019 00:00:00 +0000

For the past year and a half, I’ve been working remotely for Coda. Fortunately, this has worked well since the company was already distributed with offices in California and Washington State.

Coda relies heavily on video conferencing, we use Zoom which has a virtual background feature that lets you choose a custom image as your backdrop, absolutely fooling all your co-workers into thinking that you’re not actually working from home (assuming your co-workers are as gullible as mine).

Zoom uses chroma key compositing to add a virtual background, which works best with a green backdrop since it doesn’t match non-Martian skin tones. I don’t like doing things halfway, so I decided to go all out and spend about $70 to buy a green screen and stand in order to make the most realistic virtual scene possible.

The set up is relatively painless and can be done in a couple of minutes, as shown here by a handsome anonymous model:

Every once in a while, I remember to take screen captures of the backgrounds I’ve used. I’ve collected a few here (I’ll try to update these, but no promises):

Dogs and Cats live together at the US Open before the Benfica match in a Black Hole within the White House Sauna which arrived via NYC subway to the Indy 500

English countryside in Bellevue / West Village with Winterfell's armies supporting Wreck-It Ralph in the Spider-Verse in Bliss on Mars in King's Landing.

King's Landing gets Hamilton with source code in a doctor's office on the NYSE candle-lit floor inside an airplane hosting the Democratic debates with E.T. in the background.

Tennis and Cricket in the Matrix, Paw Patrol goes for graffiti while Coda's band eats sushi in the everglades before floods.

Greenlandic Hong Kong protestors visit the Sahara via TWA after a stop at the NYSE maze, followed by the G7 meeting before returning to a Floridian hurricane.

Hurricane Dorian goes to Vermont with a lion cub at the Paris Fashion Week with Democratic candidates in a submarine on a Tel Aviv rooftop party full of bugs from Dinoco.

The Coda team together in Lisbon via ancient boat that got upgraded in the SF Bay before the launch party on Halloween which also happened to be voting day for revolutionary war veterans.

Abbey road intersects with Penny Lane in the Antarctic glaciers during Thanksgiving aftermath in a library near the airport with the royal family and Jumanji.

Have suggestions for an upcoming background? Let me know on Twitter!

Merging piped stdin with command-line arguments within Bash

Tue, 02 Apr 2019 00:00:00 +0000

I am computer nerd who is easily seduced by automation, which means I end up writing a fair number of shell scripts. Even though I’ve written my fair share of Bash, my small primate brain never quite grasps the language and I always copy-paste my way through the task at hand, absorb nothing, and then pat myself on the back for being such a 1337 h4x0r.

Typically my needs are quite pedestrian, and I can immediately find an answer to plagiarize. My latest script, however, wasn’t solved within seconds so I’ve written up the solution for my very handsome future self.

The “Problem”

My script takes one or more command-line parameters, which is straightforward to invoke when you know the values:

# Called via command-line arguments
my_script item_one item_two

In other cases, the values I’m passing in are the output of some other command. As a godly Unix user, my instinct is to pipe the output (printf just for illustration):

# Called with piped input, one argument per line
printf "item_one\nitem_two" | my_script

The argument-handling Bash code I copy-paste every time only handles command-line arguments, and completely ignores any piped input. Here’s code that will read in the piped input and convert to command-line arguments, one per line:

# Copy command-line arguments over to new array
ARGS=( "$@" )

# Read in from piped input, if present, and append to newly-created array
if [ ! -t 0 ]; then
 readarray STDIN_ARGS < /dev/stdin
 ARGS=( "$@" "${STDIN_ARGS[@]}" )
fi

# Single loop to process all arguments
for ARG in "${ARGS[@]}"; do
 echo "$ARG"
done

I’ve already forgotten I wrote this code, so don’t ask me what it does. I’m just gonna copy-paste it again in a few months, leave me alone!

Note that you can get around supporting piped input if you’re just willing to use xargs (which I also make sure to regularly forget how to use):

# This is way easier than what I just showed you
printf "item_one\nitem_two" | xargs my_script

Farewell, future self. Be glad that your tiny brain retains the vital lyrics to Ice Ice Baby instead of something as useless as xargs and Bash arrays.

Mixing React and DOM events

Thu, 07 Jun 2018 00:00:00 +0000

When possible, avoid mixing React event handlers with the native DOM event handlers. Using React’s event handling is unequivocally the way to go (less code, better for performance, avoids memory leaks, etc). Unfortunately, since you’re reading this, you’re probably in some situation where you can’t just use a React listener. This typically happens when using a non-React component within the React tree. Another scenario is when a component needs to listen to events that fire outside of the scope of the DOM owned by that component, for example listening mousemove event when the mouse leaves the element’s bounds (Pointer Capture solves this scenario, but it’s not universally available yet).

Code nerds should read on, but all others can get by with the following TL;DR:

Avoid using addEventListener and rely on React event handlers
Listen on document (or window) if you want to receive events after all React handlers. Listen anywhere else in order to receive before React handlers
React event handlers will always execute after native capture handlers

Let’s work with the following (simplified) structure:

<html>
 <body>
 <!-- Container element for the React tree, target of ReactDOM.render() -->
 <div id="container">
 <!-- Root React component -->
 <App onClick={onAppClick}>
 <Button onClick={onButtonClick} />
 </App>
 </div>
 </body>
</html>

As you likely know, if you call event.stopPropagation() in your onButtonClick handler, then the onAppClick handler will never be called. Now let’s add a DOM event listener on <body> with the following code:

document.body.addEventListener('click', e => e.stopPropagation());

Now which event handlers will be called after clicking the <Button>? You might (quite reasonably!) assume that, since <body> is an ancestor of <Button>, the onButtonClick and onAppClick handlers get called first. Unfortunately, in this case neither React handler is called! Only the DOM handler on <body> gets called, so what gives?

React has its own event system. The Event argument received by DOM event handler is not the same as the Event argument the React handler receives. This isn’t a problem in most cases, but if your code depends on specific handler order, or any of the handlers calls event.stopPropagation() then we run into situations like the contrived scenario above.

React’s event system works by attaching native event listeners on the document object. Once an event bubbles up to document, React dispatches its own SyntheticEvent that bubbles through the React component tree. If you’re using Portals, React is smart enough to route the event through the Portal for you (unlike the DOM event, which can only follow the DOM tree).

Note: React 17 changed how event listeners are set up. Listeners are now attached at the root of the React tree, instead of the document object. This post was written years before React 17 release, but the general concept here is still applicable.

This means that any native event handler that calls stopPropagation() before the event reaches document will cause React to never see that event at all. In (most?) scenarios this is probably the desired result, since the native event handlers are probably there in order to completely override default behavior.

What if you only want to let React handlers get called before your native handler? Since event handlers are called in order of registration, the answer is to listen on the document object (or window, depending on the event). Note that this will not work if you add the handler before the React tree mounts (i.e. before calling ReactDOM.render())! In that case, it’s best to listen on window (or wait until React has mounted before adding the handler).

Things get a bit trickier during the capture phase. Since React is listening to the bubble phase on document, any handler that calls stopPropagation() during the capture phase will prevent React from ever seeing the event (this issue is what inspired me to write this post). I hacked up a simple test to visualize scenarios (feel free to play around at home).

Stopping propagation during capture phase prevents React from firing events

This behavior is fairly understandable once you dig into the details, but it’s completely counterintuitive to anyone unfamiliar with the difference between the React and native event systems. Unless you’re paid per bug fixed, I highly recommend avoiding mixing the two systems. I learned this lesson too late. My penance was to write this post, yours to read it, and now we’re both done.

Using Rclone and MergerFS together across drives

Tue, 20 Feb 2018 00:00:00 +0000

Due to a combination of hoarding (digital and physical), frugality, and laziness I have a large number of external hard drives and cloud services that I use for general storage and backup. I also have an annoying tendency to physically misplace things (adds to the backup paranoia), so I like having some level of basic encryption for removable devices for privacy reasons (my threat model is identity theft, not government agencies).

My (grossly over-engineered) solution involves two fantastic pieces of userland software:

MergerFS: FUSE filesystem that pools drives into a single mount
Rclone: Versatile cloud backup and sync tool, also supports local files

The workflow here is roughly as follows:

Plug in one or more external drives and mount locally
(optional) Use rclone to mount a readonly cloud drive (i.e. Dropbox, Google Drive, etc)
Pool the drives into a unified folder using mergerfs
Decrypt and mount the pooled content using rclone

After jumping through these hoops, I now have a single folder structure with my files across local and cloud storage. Once mounted, MergerFS tools provides some nice scripts for duplicating (or de-duplicating) content across your drive pools.

This type of thing isn’t useful for many people, but if you’re interested in replicating this arcane setup, here’s how to go about it (instructions assume Linux, ~~should work with minor modifications on MacOS~~):

Choose one or more external drives you’d like to use. There’s no need to clean format the drive (other files can live on the drive as well). Create a folder called encrypted in the root of each drive.

(Optional) If you’d like to use Cloud Storage as well, setup one or more providers by following the rclone config instructions. Once setup, use rclone to mount it locally:

# Replace `cloud` with whatever you named the remote
# NOTE: Must create `/media/cloud` folder beforehand
# NOTE: Must create `cloud:/encrypted` folder beforehand via `rclone mkdir`
# `allow-other` and `read-only` flags are optional
rclone mount cloud:/encrypted /media/cloud --allow-other --read-only

Use mergerfs to mount the drives together in a pool:

# NOTE: Must create `/media/encrypted_pool` if it doesn't exist
# Replace `/media/driveX` with paths to the removable/cloud drives
# `allow_other` setting is optional
mergerfs /media/drive1/encrypted:/media/drive2/encrypted:/media/cloud /media/encrypted_pool \
 -o defaults,fsname=encrypted_pool,allow_other \
 -o moveonenospc=true,category.create=epmfs,func.getattr=newest

Use rclone to setup the encrypted storage. Use /media/encrypted_pool as the remote path.

Mount the decrypted drive:

# NOTE: Must create `/media/decrypted_pool` if it doesn't exist
# Replace `pool` with whatever you named the encrypted storage in step 4
# `allow-other` setting is optional
rclone mount pool:/ /media/decrypted_pool --no-modtime --allow-other

You now have a pooled view of your encrypted folders, congratulations! Of course, they’re completely empty so it is kinda useless.

At this point, you can start copying data into this merged view but I wouldn’t recommend it for a few reasons:

It won’t be obvious what data is stored on each pooled drive. If you’re always using the same drives (or never disconnect), then maybe this isn’t a concern for you.
Filesystem tools like cp and rsync are going to have to go through two FUSE layers, which isn’t great for performance.
For cloud storage, the rclone documentation explains that using rclone sync is the best practice for copying into the cloud (if you mounted your cloud drive with --read-only, this isn’t an issue since you’ll never upload anything).

In order to workaround these issues, I manually add data to individual drives via rclone sync. In order to do this, you need to setup rclone storage for each drive you’re using. You can do this manually via rclone config (use the same passwords you used for the merged drive). Alternatively, it’s easier to manually edit the rclone.conf file and copy the config over per drive.

At this point, your rclone.conf file looks something like:

[cloud]
# `type` varies depending on storage provider
type = s3
client_id =
client_secret =
token = ...

[pool]
type = crypt
remote = /media/encrypted_pool
filename_encryption = standard
password = ...
password2 = ...

Instead of running rclone config a bunch of times, you can copy the [pool] section and just change the remote path, for example:

# Create one of these per drive
[drive1]
type = crypt
remote = /media/drive1/encrypted
filename_encryption = standard
password = ...
password2 = ...

Since the encryption parameters are identical, anything you store in this rclone remote can be read by the pooled mount. To add data to the pool, you can now rclone sync stable_genius_files drive1:/. Do the same setup for your cloud remotes as well.

Running these commands manually is a pain, so if you’re running Linux ~~(and maybe MacOS, I haven’t tested)~~, I’ve created a helper script that automatically takes care of mounting and pooling the drives (also posted as a gist):

#!/usr/bin/env bash
set -euf -o pipefail

# Removable drive names go here, separated by spaces
DRIVE_NAMES=(drive1 drive2 drive3)

# Removable and cloud drives are mounted in this local directory
DRIVE_MOUNT_ROOT="/media"
# Name of folder for root of encrypted storage on drives
ENCRYPTED_DIR_NAME="encrypted"
# Rclone remote name for pooled drives
RCLONE_POOL_NAME="encrypted_pool"
# Local path for mounting decrypted drive pool
DECRYPTED_MOUNT_PATH="/media/decrypted_pool"

# Helper for joining array items with `:`
function colon_join { local IFS=':'; echo "$*"; }

# Helper for unmounting on exit
function finish {
 echo "Cleaning up and unmounting ..."

 if mount | grep -q "$DECRYPTED_MOUNT_PATH"; then
 echo "Unmounting merged rclone at $DECRYPTED_MOUNT_PATH"
 fusermount -u "$DECRYPTED_MOUNT_PATH" > /dev/null 2>&1
 fi

 if mount | grep -q "$DRIVE_MOUNT_ROOT/merged"; then
 echo "Unmounting mergerfs at $DRIVE_MOUNT_ROOT/merged"
 fusermount -u "$DRIVE_MOUNT_ROOT/merged" > /dev/null 2>&1
 fi

 for name in "${CLOUD_DRIVE_NAMES[@]}"; do
 mount_path="$DRIVE_MOUNT_ROOT/$name"
 if mount | grep -q "$mount_path"; then
 echo "Unmounting cloud remote $name"
 fusermount -u "$mount_path" > /dev/null 2>&1
 fi
 done
}

trap finish EXIT

VALID_MOUNTS=()
echo "Checking removable drives"
for name in "${DRIVE_NAMES[@]}"; do
 mount_path="$DRIVE_MOUNT_ROOT/$name/$ENCRYPTED_DIR_NAME"
 if [ -d "$mount_path" ]; then
 VALID_MOUNTS+=("$mount_path")
 fi
done

# Mount cloud drives, if any
CLOUD_DRIVE_NAMES=(gdrive)
echo "Checking cloud drives"
for name in "${CLOUD_DRIVE_NAMES[@]}"; do
 mount_path="$DRIVE_MOUNT_ROOT/$name"
 if ! mount | grep -q "rclone_$name"; then
 echo "Mounting rclone remote $name ..."
 rclone mount "$name:/$ENCRYPTED_DIR_NAME" "$mount_path" \
 --allow-other --read-only &
 fi

 VALID_MOUNTS+=("$mount_path")
done
echo "Found drives: ${VALID_MOUNTS[*]}"

echo "Mounting pool via mergerfs"
mergerfs "$(colon_join "${VALID_MOUNTS[@]}")" "$DRIVE_MOUNT_ROOT/merged" \
 -o defaults,allow_other,moveonenospc=true \
 -o fsname=encrypted_merged,category.create=epmfs,func.getattr=newest

echo "Mounting decrypted pool"
rclone mount "$RCLONE_POOL_NAME:/" "$DECRYPTED_MOUNT_PATH" \
 --allow-other --no-modtime &

echo "Mounting complete, hit Control-C to unmount and exit"
wait

If you’ve made it this far, congratulations for creating a brittle, complex storage system instead of just buying a bigger drive! Now I assume you can get back to growing your own vegetables, sewing your own clothing, and other inefficient uses of the precious little time you have left before dying alone.

One Good Tweet

Wed, 08 Nov 2017 00:00:00 +0000

My road to being a huge Twitter celebrity (almost 2,000 followers!) started on a typical fall day in 2013. My wife was watching some rainy crime drama, while I was trying to fix a tricky bug that was due to some terrible code I had written while drunk. The same creative juices that conceived my indecipherable code gave birth to what are, without a doubt, the most important 87 characters in modern history:

Debugging is like being the detective in a crime movie where you are also the murderer.
— Filipe Fortes (@fortes) November 10, 2013

Within a few hours, my timeline (previously solely populated by Nigerian royalty and local singles) started to blow up. Hollywood messaged me non-stop, hoping to purchase the movie rights to my incredibly-popular tweets. I started dreaming of leaving the code mines and entering the star-studded world of mediocre comedy.

Unfortunately, lightning only struck once, and none of those lucrative contracts panned out. But, even years later, my timeline is still completely dominated by a tweet that is over four years old.

Given the unprecedented popularity, it’s worth sharing the statistics Twitter reports for my absolutely brilliant tweet:

Twitter's statistics for the greatest tweet of all time, as of November 2017

Despite over 700 thousand impressions, and almost 20 thousand “engagements” (whatever that means), my super-popular tweet generated a measly 57 new followers. Twitter’s offer to “Reach a bigger audience” isn’t very compelling given a 0.008% conversion rate.

Despite the lack of life-changing fame, it’s been interesting to see how my (astoundingly insightful) creative work has taken a life of its own:

Tweets without attribution are very common, but joke stealing on Twitter is old news and shouldn’t come as a shock. What I found interesting is how commonly a joke is stolen with half-hearted attribution:

"Debugging is like being the detective in a crime movie where you are also the murderer." - Filipe Fortes
— Programming Wisdom (@CodeWisdom) August 16, 2017

An account with 100 thousand followers made sure to strip out the username and quotes me by name instead (alongside Dijkstra and Engelbart, who lack my universal name recognition). Here’s another example, this time with over 200 thousand followers.

Someone decided that 87 characters read better as an image, and managed to get over two thousand likes as well.
The brain trust over at 9gag mashed it into an unrelated joke, where I guess it went over well? I can’t bear to keep the tab open long enough to find out.
Someone aggregated it into a list of programmer quotes, which later had a good showing on Hacker News. Once more, I feel sorry for nobodies like Linus Torvalds who get overshadowed by my celebrity.
Someone made a T-shirt based on my tweet as well. (Thanks to @peajai for sending me a pointer!). Update: Mike Barron found another T-shirt.
A couple of days after I wrote this post, someone posted a screenshot of the tweet to /r/ProgrammerHumor where it got to the number one spot and wasted a few cumulative years of programmer productivity.

Hopefully my example serves as a cautionary tale. Think twice before composing that super-popular tweet!

Using Language Servers in Neovim

Tue, 24 Oct 2017 00:00:00 +0000

Note: A lot has changed since the writing of this post, and I’ve changed my config to use coc.nvim. I’ve preserved the instructions as written in 2017, but you should find the latest instructions for one of the many LSP options for vim.

It’s been fascinating to watch how Microsoft has changed its outlook on open source now that they’re no longer the crushingly dominant force they used to be (I caught the tail end of that phase while I worked there in the early 2000s). Last summer, the team behind Visual Studio Code introduced the Language Server Protocol, which is used to power syntax highlighting, code completion, and other advanced editing features in Visual Studio. What’s exciting about the Language Server Protocol (LSP) is that it is editor neutral, so it’s not limited to a single editor.

As an ancient neckbeard, this is exciting since I use an offshoot of an editor that is older than I am. Although Neovim does many things well, IDE-like features such as code completion have always been kludgey hacks that compare poorly to GUI environments like Visual Studio. There is an effort to add support to mainline Neovim, but integrating LSP into Neovim today is still a bit tricky, so I decided to document the process so others don’t have to go through the same pain I did.

First, some caveats:

I’m using Neovim. If you use plain Vim, these instructions may or may not work for you.
You should use a plugin manager for Neovim, I use vim-plug, but the syntax is similar across the alternatives (the LanguageClient-neovim installation instructions may be of use for you).
I’m assuming basic knowledge of Neovim and the command line. If you’re comfortable in the terminal, you’re probably pretty bored by now anyway.

Let’s begin with a minimal configuration that loads the LanguageClient-neovim plugin and enables it for JavaScript files.

First, we need to install a Language Server for JavaScript, we’ll use javascript-typescript-langserver which you can install via Yarn by running yarn global add javascript-typescript-langserver (or npm install -g javascript-typescript-langserver if you’re still on npm).

Now we create a minimal configuration file, which you should save to $HOME/.config/nvim/init.vim:

call plug#begin()
" LanguageClient plugin
Plug 'autozimu/LanguageClient-neovim', { 'do': ':UpdateRemotePlugins' }
call plug#end()

" Automatically start language servers.
let g:LanguageClient_autoStart = 1

" Minimal LSP configuration for JavaScript
let g:LanguageClient_serverCommands = {}
if executable('javascript-typescript-stdio')
 let g:LanguageClient_serverCommands.javascript = ['javascript-typescript-stdio']
 " Use LanguageServer for omnifunc completion
 autocmd FileType javascript setlocal omnifunc=LanguageClient#complete
else
 echo "javascript-typescript-stdio not installed!\n"
 :cq
endif

If you load up a JavaScript file in vim now (make sure you ran :PlugInstall to install the plugins) you’ll see … nothing special. However, if you invoke omni completion (via <C-x><C-u>), you’ll see the completion is much more intelligent than the default:

Smart omni completion in vim via language server

Other than smarter omni completion, this minimal setup also provides an error marker in the gutter indicating invalid syntax. These are both pretty nice, but really only scratch the surface of what we can do here. There is almost nothing enabled by default, so let’s setup a few convenience mappings by adding the following to the end of init.vim:

" <leader>ld to go to definition
autocmd FileType javascript nnoremap <buffer>
 \ <leader>ld :call LanguageClient_textDocument_definition()<cr>
" <leader>lh for type info under cursor
autocmd FileType javascript nnoremap <buffer>
 \ <leader>lh :call LanguageClient_textDocument_hover()<cr>
" <leader>lr to rename variable under cursor
autocmd FileType javascript nnoremap <buffer>
 \ <leader>lr :call LanguageClient_textDocument_rename()<cr>

Now we can use the Language Server to find object definitions, types, and intelligently rename things. The rename is my personal favorite, since it is smarter than a normal find and replace, and respects variable scope:

Renaming a variable in vim via language server

This is pretty awesome, but so far it’s not much different than what was possible with other plugins like Tern for Vim. One of the exciting things about the Language Server Protocol is that it’s language agnostic. There are already implementations for several programming languages, and we get to leverage the same configuration once we’ve got our initial setup.

If I get tricked into coding python again, I can add support into Neovim by installing the Python Language Server (via pip install python-language-server), and adding the following to init.vim:

let g:LanguageClient_serverCommands.python = ['pyls']

" Map renaming in python
autocmd FileType python nnoremap <buffer>
 \ <leader>lr :call LanguageClient_textDocument_rename()<cr>

Now Neovim will load up the language server when opening python files, so I have access to the same features as when I edit JavaScript. Feature support varies by Language Server, but most support syntax checking, autocompletion, and renaming. A few even support code formatting as well.

LanguageClient-neovim is a pretty awesome plugin, there are two integrations that are worth setting up:

Fuzzy finding symbols via FZF
IDE-like completion via nvim-completion-manager

Adding this to your init.vim is pretty easy:

" Put this in your plugin section:
" Fuzzy selection
Plug 'junegunn/fzf'
" IDE-like autocompletion without
Plug 'roxma/nvim-completion-manager'

" Put this outside of the plugin section
" <leader>lf to fuzzy find the symbols in the current document
autocmd FileType javascript nnoremap <buffer>
 \ <leader>lf :call LanguageClient_textDocument_documentSymbol()<cr>

Using fuzzy find to search through symbols is especially nice when some idiot decides it’s a good idea to have thousands of lines of code in a single file:

Fuzzy-finding a symbol in vim via language server

If you’re curious, I keep all my configuration files on GitHub. Let me know if you come up with any improvements!

Coda

Thu, 19 Oct 2017 00:00:00 +0000

A little over three years ago, I decided to join up with some friends and go on a crazy mission to re-think design decisions made almost 40 years ago.

Today, I’m happy to finally be able to talk about what I’ve been doing all this time! With Coda, we’re building a new type of doc that blends the power of spreadsheets and the flexibility of documents into a single new canvas. Here’s a sneak peek:

If you’re curious, here are some places you can learn a bit more:

Shishir wrote about the motivation behind Coda.
The Verge has a detailed article about the Coda launch.
Our lead investors, Reid Hoffman at Greylock and Hemant Taneja at General Catalyst wrote a bit about their investments.

Although we’ve started to talk about things publicly, Coda isn’t quite ready for everyone just yet. If you’re willing to put up with a few rough edges and give us feedback, add yourself to our invite list. For now, we’re mostly focused on Product / Project Managers, but we’re excited to help all sorts of people build their own tools to get their work done.

Filipe Fortes

2026 Personal Tech Stack

So Many Agents

Hardware Consolidation

Other Terminal Tools

Non-Terminal Tools

What’s Next in 2026?

Pointless Aside: Screenshot Workflow

Custom Kids’ Podcasts With NotebookLM

Creating a New Notebook

Adding Sources

Generating the Podcast

Generating the Episode Listing

Publishing

Listening

2024 Personal Tech Stack

Too many machines, too many platforms

Dotfiles

LLM Tools

Other 2024 Changes

Non-Terminal Tools

Misc Tools / Devices

What’s next in 2025?

Hierarchical Tags in Hugo

Using FZF in a Deno Script

Debugging Hugo via meta tags

Unlock SSH keys with the 1Password CLI

How SSH_ASKPASS works

Copy any password within tmux

Make Git better with FZF

Extracting FitBit Weight Data

Letterbox Blur with ImageMagick

Scripting Photo Collages with ImageMagick

Getting Debian to send emails that actually get delivered

Get an SMTP Provider

SSMTP

Sending Mail Externally

Loose ends

Unattended Upgrades

Sudo Authentication Failures

Cron

Other Places

Wrapping Up

Linux disk encryption with LUKS and LVM

Adding encrypted drives

Working From Everywhere

Merging piped stdin with command-line arguments within Bash

The “Problem”

Mixing React and DOM events

Using Rclone and MergerFS together across drives

One Good Tweet

Using Language Servers in Neovim

Coda

How `SSH_ASKPASS` works

`Sudo` Authentication Failures