Timur Brachkow

Mise solved my tool version management fatigue

Sat, 14 Feb 2026 00:00:00 GMT

Tool version management seemed like an unresolved issue to me.

My use case is simple — I need to ensure that for each project Node and pnpm versions are always the same on my and other developers' machines.

There are a lot of tools to do so: nvm, volta, asdf. Also, there is corepack, which is both deprecated and not.

All of them can do the job, but with a lot of asterisks: some use strange formats, some can't install pnpm, some are just hard to set up.

Finally, we have a good one — mise

Mise is a tool version manager done right:

It isn't tied to one language ecosystem, e.g., it can handle pnpm, Node and Ruby
It has its own version format, and supports standard version formats — chances are you can add it to an existing project, without bothering your colleagues with migrating
It enables the needed tool version as you navigate the filesystem without doing any bash-gymnastics

Apart from managing versions on your computer, it's helpful in a few other use cases:

You can use it to install tools in GitHub Actions. It is way simpler than googling a setup action for each tool, and then thinking how to pass version numbers from repo to action
You can use it to install tools in Docker images. I don't think it gives the best build times, but you will have a single source of truth and a simple way to install all build tools you need
It has prebuilt binaries that may not be available via your system package managers. For example, I was able to install an up-to-date Neovim version on Ubuntu 24, which I would otherwise need to build myself. You can check all the tools you can manage with mise here

P.S. The Mise author also has quite a nice secrets manager — fnox. So you don't store your API keys as plaintext in $HOME, you know…

P.P.S. When writing this post, I found that mise can also do environment variable management and can act as a task runner. Haven't tried any of these features yet.

Use Zod to validate and document your environment variables

Sun, 08 Feb 2026 00:00:00 GMT

One of the most annoying errors in TypeScript is when your app crashes because you asserted the type of an environment variable, but forgot to set it.

This is an especially frequent issue with various serverless tools, which tend to have a lot of environments. Each of these environments comes with its own secrets that need to be typed manually into the UI, which is easy to forget.

Tired of such crashes, I decided to always validate environment variables, and found Zod to be a great solution, not only to this, but also to many other validation problems:

Types are inferred from the validation result, not asserted by hand. Forgetting to set variable will result in error being thrown.
This validation serves as documentation for environment variable usage. This type of documentation is much more useful than what's written in .env.example or readme.md. Since you rely on the zod.parse output, you won't forget to update it.
Zod can perform transforms, which is useful because environment variables are always strings. For example, transform '1' to 1, or one,two to ['one','two'].

Here is an example of how to use Zod to validate environment variables:

import 'dotenv/config';
import { z } from 'zod';

const envSchema = z.object({
  BOT_TOKEN: z.string().min(1, 'BOT_TOKEN is not set'),
  OPENROUTER_API_KEY: z.string().min(1, 'OPENROUTER_API_KEY is not set'),
  WEBHOOK_URL: z.string().optional(),
});

export type EnvConfig = z.infer<typeof envSchema>;

export const env = envSchema.parse(process.env);

I describe the shape of process.env as a Zod schema, and then use this Zod schema to parse, and then export valid and typed env values, or throw if something is wrong.

Run this code as early as possible inside your app, or execute it as part of your CI or build script.

Why I use Vue

Wed, 29 Oct 2025 19:03:45 GMT

I use Vue as my main framework since 2019. While Vue is one of the "big three" by adoption just alongside React and Angular people are still usually surprised when I tell it to them. In this post I will explain the reasons behind my choice.

To put it short, I like Vue because it has an emphasis on DX, doesn't overcomplicate stuff and has everything you need included (and yes, it is still very fast)!

Let's see some examples:

You write js in `<script>`, css in `<style>` and html in `<template>`

Vue components are written as Single File Components. You write CSS in <style>, html with template engine in <template> and javascript in <script>. It feels like writing a simple html file — a cornerstone of the web. Almost anyone in your team will understand how to make edits in such files.

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

<style scoped>
button { color: blue; }
</style>

Non JSX templates

Templates are written as html with attributes like v-for, v-if, v-else. You don't mess JS with HTML, and in result get more readable code than JSX (ask non-js people!).

<template>
  <div v-if="user">
    <h1>Hello, {{ user.name }}!</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
  <p v-else>Please log in</p>
</template>

You write CSS as CSS

You can write regular CSS and just add scoped attribute to <style> to encapsulate it. No need for CSS modules, CSS-in-JS and other stuff. Just write CSS and everything works.

<style scoped>
.card { 
  padding: 1rem;
  border-radius: 8px;
}
/* Won't affect other components */
</style>

Reactivity tools are reasonably named and framework has performance optimizations built-in

So you mark values as reactive with ref, compute values with computed and watch values with watch. Usually you don't need to think about optimizing these.

// `ref` is the way to mark value as reactive, like useState
const count = ref(0)

// `computed` is value that was computed. It won't be recomputed if all dependent values are the same. Same as useMemo in react
const doubled = computed(() => count.value * 2) 

// `watch` watches value, just like useEffect in react
watch(count, (newValue) => {
  console.log(`Count changed to ${newValue}`)
})

Components communicate via events

Components communicate with each other via events that go up. This results in much cleaner code without a need of callback prop drilling / overreliance on stores or resolving shadowing issues.

<!-- Child.vue -->
<button @click="$emit('update', newValue)">Update</button>

<!-- Parent.vue -->
<Child @update="handleUpdate" />

Vue ecosystem is great

For most cases you can find exactly one great solution made by someone close to Vue or Nuxt teams. Few examples:

You may know vite and vitest that started as part of the Vue ecosystem, and now they are integral (and the least annoying) parts of the frontend toolchain.
In Vue's default state manager pinia you can update state like store.count++. In redux you would need to have at least a PhD in computer science to do that.

Attributes passed to component

Anything that is not a declared prop is passed to component as an attribute. Same works for classes which will be joined in the expected way. Why this is not default behaviour in other frameworks is a mystery for me.

<!-- MyButton.vue - only declares 'label' prop -->
<template>
  <button class="btn">{{ label }}</button>
</template>

<!-- Using the component -->
<MyButton label="Click" class="primary large" data-test="btn" />
<!-- Renders: <button class="btn primary large" data-test="btn">Click</button> -->
<!-- Classes are automatically joined! -->

And what I dislike…

I also have a lot of experience with other frameworks (mostly React and Svelte), so I can highlight some downsides.

Occasional quirks with lifecycle and reactivity

In comparison with modern React where component lifecycle is just a function lifecycle, Vue lifecycle and reactivity are more complicated. This usually doesn't cause any problems, but sometimes I don't clearly understand how it executes stuff in the correct order.

Tests require special tooling

You must rely on vue-test-utils to write unit tests, which has a learning curve.

Nuxt

You can easily build SPA's of any size or complexity with just Vue, but for SSR you will need to rely on a framework.

Unlike React which has plenty of SSR frameworks, or Svelte which has first-party SSR framework, Vue has only Nuxt (and few obscure DIY solutions).

Nuxt is a third-party framework, which had its own business model but recently it was acquired by Vercel.

Nuxt is the most widespread and straightforward way to do SSR in Vue. But apart from SSR, the framework comes with all kinds of very opinionated magic. Unlike magic in Vue, this magic in Nuxt breaks every time you walk away from examples.

Another problem is Nuxt's overreliance on community-maintained modules. These modules usually quickly become unmaintained, while being promoted by all Nuxt resources as the official solution. With almost everything you will find yourself in a loop that looks like this:

— I want to integrate X library into Nuxt. How can I do it?

— Just run nuxi module add everything-is-done-for-you

{trying module}

{Module doesn't work. Installation guide is wrong. Repo has three commits and the last one was made two years ago by dependabot}

That said, making SSR apps is quite a frustrating process.

I think Vue should have a first-party, non-commercial framework to do SSR, like Svelte does.

To sum up

I think even with its high adoption Vue is still a very undervalued framework.

It has great DX and it's accessible for programmers of all backgrounds
It has great performance, without a need to constantly optimize it
It's widely adopted so even quite a big company can find enough people who have hands-on experience with Vue

So, don't be afraid to try Vue!

Selfhost privacy-friendly website analytics in one click

Sat, 01 Feb 2025 19:31:57 GMT

You can set up selfhosted instance of Umami Analytics on Railway with one click.

Umami is GDPR friendly, not limited by sites when selfhosted and has a pretty much any feature you may want from analytics.

Free tier on Railway includes 5$ of free usage (which is more than enough for Umami), and pay-as-you-go after that.

Interesting benefit — because your instance of Umami not hosted on Umami servers it is not cut by adblock.

Guessing user location with Cloudflare Workers

Sun, 26 Jan 2025 13:47:51 GMT

Recently I was building a landing page that needs some information relevant to user location displayed.

Using browser's Geolocation API is obvious solution, but who wants to give precise geolocation to a random website on the internet. Also I believe only the fact of such ask will make customers uncomfortable.

Then I found out that cloudflare has access to unprecise location of any request going to the cloudflare worker and it's accessible to read.

// this code lives in your cloudflare page worker function
// for example functions/api/location.ts
// which is your example.com/api/location

import type { PagesFunction } from '@cloudflare/workers-types';

export const onRequest: PagesFunction = async (context) => {
  const { latitude, longitude, city, country } = context.request.cf || {};

  const coordinates = {
    latitude,
    longitude,
    city,
    country,
  };

  return new Response(JSON.stringify(coordinates), {
    headers: { 'Content-Type': 'application/json' },
  });
};

If you are not using Cloudflare Workers, there are services that matching ip's with locations.

Using typescript in page worker functions

Sharing JavaScript code without headache

Mon, 07 Oct 2024 16:36:20 GMT

Sometimes you have multiple apps that share a lot of common code.

For example, you have an SPA written in Vue and a Blog running on Eleventy, and you want to reuse your Tailwind design system between them.

The obvious solution is to create a package with common code and publish it as a private NPM package. This usually leads to frustration: publishing packages is not a very straightforward or failure-tolerant process, which is completely reasonable for public packages, but mostly a waste of time for private packages and small-to-medium teams.

I see this approach as overkill for most projects — there are much simpler alternatives:

Use Monorepo

The first one is to store code in a monorepo. Using the workspace feature, you will be able to install any package inside the monorepo.

.
├── .git
├── apps/
│   ├── spa/
│   │   ├── …
│   │   └── package.json
│   └── blog/
│       ├── …
│       └── package.json
├── packages/
│   └── some-package/
│       ├── …
│       └── package.json
├── pnpm-workspace.yaml
└── package.json

Then you add a special file called pnpm-workspace.yaml that allows you to install folders as packages.

packages:
  - 'packages/*'
  - 'apps/*'

And then you can use them like this:

{
  "name": "spa",
  "dependencies": {
    "some-package": "workspace:*"
  }
}

Due to the fact that code is stored in one repo, you don't need to think about versioning — code revisions are coupled via commits.

Installing Packages from GitHub URLs

If you don't want to use a monorepo, you can install packages via package GitHub repo URLs.

This way is almost the same as working with standard npm packages, but with one twist — you use a git repo as a package. That means you have a very forgiving publishing flow where you can revert any of your actions.

pnpm i https://github.com/someorg/some-package#1.2.3

As you see — tags can be used to achieve reproducible builds.

"some-package": "github:someorg/some-package#1.2.3"

If you need to build some files — you can hook up a build script to the postinstall script in package.json.

{
  "name": "some-package",
  "main": "dist/main.css",
  "scripts": {
    "postinstall": "pnpm i; postcss -i src/main.css -o dist/main.css"
  },
  "dependencies": {
    "postcss": "8.4.38" // PostCSS is declared in dependencies, not devDependencies because we need it to be accessible from the postinstall script
  }
}

Just keep in mind that you must move build dependencies to dependencies instead of devDependencies. As this is a private package, this is not an issue, especially when you are using pnpm.

As your project grows, you might hit the ceiling with this approach and you might need to switch to standard private packages, but your project needs to grow to this point and before that, you can save a lot of time!

Monorepo, on the other hand, is future-proof. But you need to have a monorepo.

Usually, I use a monorepo on all code I write by myself. When I fork someone's code, I install it via URL to keep the same project structure as the original repo.

CORS proxy for Cloudflare Pages

Mon, 20 May 2024 16:36:20 GMT

Recently I moved all my projects from Vercel to Cloudflare Pages, because Cloudflare offers the same, but without bizarre per-seat pricing.

Some of my projects have frontend and backend on different endpoints, and usually, this causes CORS errors that can be easily resolved via proxying using rewrites defined in the rewrites field of the platform config file.

Cloudflare has such a file, but to my surprise — it doesn't allow to proxy between different domains.

Happily, Cloudflare allows us to do it in kinda backend-ish way by adding custom middleware to our frontend repo. For example — the code below proxies will proxy our request to https://our-frontend.com/foo to https://external-api.com/foo and we will have no CORS error.

// ~/functions/_middleware.ts

// Fun fact:
// If you place it at ~/functions/api/_middleware.ts
// this will proxy only https://our-frontend.com/api/* requests

import { PagesFunction } from '@cloudflare/workers-types';

const API_URL = 'https://external-api.com';

export const onRequestOptions: PagesFunction = async () => {
  return new Response(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*',
      'Access-Control-Allow-Methods': 'GET, OPTIONS',
      'Access-Control-Max-Age': '86400',
    },
  });
};

export const onRequest: PagesFunction = async (context) => {
  const targetUrl = API_URL + new URL(context.request.url).pathname;

  const immutableResponse = await fetch(
    new Request(targetUrl, context.request),
  );

  const response = new Response(immutableResponse.body, immutableResponse);

  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Max-Age', '86400');
  return response;
};

How to preview files in browser

Wed, 10 Apr 2024 16:36:20 GMT

Recently I was building an in-browser document preview. It turned out to be a quirky task because browsers usually assume that users handle opening files on their own machine.

This is what I found out:

Images

That one is obvious — just use the <img/> tag

CSV

It's trivial to parse CSV in the browser — you just split the file into rows by \n and then split them into columns by a separator (which can be ,, ;, space, etc.).

Since separators introduce some caveats, I recommend using readymade solutions like papaparse's Papa.parse(csvAsString).

PDF

Browsers can preview PDFs with <embed src="example.pdf"/>.

Sadly, mobile Safari can't, so if this is crucial for you, you might need to use one of the many libraries for that. In my experience, such libraries have tons of glitches — keep that in mind.

Office documents

For office documents like ppt, pptx, doc, docx, xls, and xlsx, there are two types of solutions:

You can use some quirky library made by unknown geniuses (example), but since proprietary formats are complicated, results may vary
You can use an iframe from "format owners" like Microsoft and Google. There is a nice gist about these on GitHub. In my experience, Google's iframe is very unreliable, so don't be tempted to use it because of the huge variety of formats — just go with Microsoft's one. Of course, if you go with this option, you must keep in mind the privacy implications of sending documents to someone's API.

Caveats of using macOS with an external monitor

Thu, 04 Jan 2024 16:36:20 GMT

Fixing LG Monitors

LG produces good monitors, but they pack them with "Smart Features" that make picture quality worse.

Go to the monitor menu and:

Disable «Super Resolution» to prevent everything from becoming blurry.
Disable «Smart Energy Saving» to prevent the screen from self-managing brightness.

Controlling Monitor from macOS

By default, you can't control the monitor from your Mac; you will need to reach your monitor by hand. This is especially annoying with sound. There are apps for controlling monitors from the OS instead of the menu.

There is a free app called MonitorControl that allows you to control brightness and sound the same way you do it on a MacBook.

Waking up Mac

If you ever used Windows you know: if your cat jumps on computer's keyboard — it will wake up.

On macOS — forget about that! To wake Macbook when using external monitor you need to swipe on Magic Trackpad or shake mouse.

How to make Firefox sane and private

Fri, 06 Oct 2023 16:36:20 GMT

Nowadays Firefox is the only good browser.

Apple ruined Safari by moving extensions into AppStore's walled garden, the company behind Brave has a reputation for questionable decisions, and all other browsers are just Chrome (spyware).

Being non-chrome and non-apple comes with a price — Firefox is kinda quirky, and you still have some work to do for more privacy.

Here are my instructions for sane and private Firefox.

Flags

Enter about:config in the search bar. Through the search, find the necessary settings and set the desired values. Here's what needs to be changed and why:

extensions.pocket.enabled = false — removes Pocket integration.
dom.private-attribution.submission.enabled — removes ad activity reports
network.captive-portal-service.enabled = false and browser.selfsupport.url = false — disables browser usage data sending.
apz.allow_zooming = true — enables "pinch to zoom" (like in Chrome or Safari).
general.smoothScroll.mouseWheel.durationMaxMS = 200 — sets scrolling speed as in Chrome.

Extensions for better privacy

Disable WebRTC — disables WebRTC by default, allowing it to be enabled when needed (like where audio-video communication is present). WebRTC can reveal your IP address even through VPN.
User-Agent Switcher — automatically switches the User-Agent. Turn on random mode to prevent fingerprinting.
Clear URLs — clears URL of trackers.
uBlock Origin — internet era antivirus.
Privacy Badger — cleans up trackers that uBlock missed.
HTTPS Everywhere — forces websites to use encrypted HTTPS instead of unencrypted HTTP.
Decentraleyes — protects against tracking via CDNs.
Facebook Container — isolates Meta products from other browser tabs.

Separate bookmarks and passwords from the browser

Switching from one browser to another is a good time to realize that storing passwords and bookmarks in a browser is a bad idea. Upon logging in, Firefox will try to offer its synchronization service — I recommend refusing it.

Next, you need to turn off password saving. To do this, go to Preferences → Privacy and Security → Logins and Passwords.

For bookmark synchronization, I recommend Raindrop.io, and for passwords, Bitwarden. Both are decent, free of charge, and work on all devices and browsers.

Using Sublime Text as IDE

Wed, 06 Sep 2023 16:36:20 GMT

I have been using Sublime Text as my primary IDE for all my development needs for more than 2 years now.

Why?

it is sustainable (just like Vim)
it is very fast (just like Vim)
it is energy efficient (just like Vim)
it is easy to use (just like VS Code)
it is easy to configure (just like VS Code)
it has an active community so finding plugins is not a problem (but sadly, it's more like Vim than VS Code)
it can be used for free if you can't pay for it (just like WinRAR)

If it is so good why do so many people prefer VS Code / WebStorm?

Because Sublime Text is a text editor, not an IDE.

Sublime Text comes from the time when you could build your cool website from any text editor (like NotePad), but time has changed since then. Some modern technologies, like TypeScript, are hard to use without IDE features.

With time VSCode which started as a text editor incorporated all important IDE features (at the cost of becoming a performance blackhole and battery killer).

But Sublime Text chose another way — it remained as a text editor that users could tailor to their needs. Unlike Vim or Emacs Sublime Text isn't a cult, so tweaking settings is not considered cool by anyone. Because of this, most people don't even think about Sublime Text as an option.

But Sublime Text is an option.

In the following guide, I will tell you how to turn Sublime Text into a modern IDE — with LSP, linting, and even Copilot, while retaining the same performance and energy efficiency. And unlike Vim, it won't take forever.

Before we start

The easiest way to navigate around the editor is the command palette. There are actually two of them: one for files can be summoned via command + P and one for actions is summoned via command + shift + P. Use the least one to find the settings of your editor and plugins.
You can find editor preferences at Sublime Text / Settings / Settings, and plugin preferences at Sublime Text / Settings / Package Settings
There is no package manager or plugin store preinstalled. To install plugins you need to install Package Control. Search for plugins at Package Control website and install them via command + shift + P then Package Control: Install then enter the plugin name.

Bringing IDE features with LSP

To bring IDE-like features to your text editor you need to use LSP.

You will need to add support for languages you need separately. Here is the list of languages with installation instructions.

Apart from autocomplete and type features. LSP also brings you a lot of other IDE features like code actions, go to definition, find all references, rename symbol, etc. You can find them in right click menu.

Annoying window with errors can be disabled by adding "log_server": false to LSP settings.

Linting

All linting works via SublimeLinter plugin. By itself it does nothing — you need to add plugins for linters to use. Just search their names in package control like SublimeLinter-eslint.

For prettier that runs on save use jsPrettier. To enable add auto_format_on_save: true to jsPrettier Preferences.

Other plugins you will need

A File Icon — file icons for everything
Sidebar Enhancements — useful actions for file explorer
Emmet

Git

Sublime Text shows inline diffs but has no integrated Git GUI. I recommend using Sublime Merge for that. You will be also able to access it's features via Sublime Text's right-click menu.

Integrated Terminal

Sublime Text has no integrated terminal — you should use a dedicated terminal app for that. If you can't live without an integrated terminal, you can use Terminus.

GitHub Copilot

There is an LSP for Copilot that allows you to use AI autocomplete and code suggestions.

Painless Vim

To use Vim (or fight Vim FOMO) you can use Vintage Mode that ships with the editor. It has a lot of Vim stuff included.

I especially like that with Vintage Mode enabled your initial editing mode is still INSERT MODE, so if you are not in the mood for Vim you will be not annoyed by pressing i each time you open the editor.

Tips

control + shift + P to view scope name. Useful when configuring plugin scopes or building your own color schemes.
There is an «Arithmetics» tool in the command palette that allows you to use mathematical expressions on selected text.
Use command + K then command + B to toggle the sidebar and make more room for an editor. Most of the time you don't need it as command + P is a way much faster to open files.
options + command + S to save all opened files.
Click editor tabs or files with shift to temporary split window between them. Very useful to keep reference info in front of your eyes.
In menu bar go to Selection and check selection shortcuts.