Zsh (default on macOS) and Oh My Zsh are among the tools I set up first on every machine. Yesterday I took a look at Antigen, a plugin manager for Zsh, and I was impressed with how well it simplified my previous configuration.

Today I updated an article that is about automatically switching Node.js version with nvm. In the course of this I wanted to delete two old articles and bring them to the current article via an HTTP redirect.

As I host my blog on Netlify, all I need is a _redirects file with the redirects:

/old-url/    /new-url/
/old-url-2/    /new-url/

At first I wanted to create this by hand, but then I came across an article by Aleksandr and now I generate the file automatically. The great thing is: I can specify in my articles, which pages should link to the respective article.

The _redirects file is generated out of my template file redirects.njk:

---
permalink: /_redirects
eleventyExcludeFromCollections: true
---
{%- for page in collections.all -%}
    {%- if page.url and page.data.redirectFrom -%}
        {%- for oldUrl in page.data.redirectFrom %}
{{ oldUrl }}    {{ page.url }}
        {%- endfor -%}
    {%- endif -%}
{%- endfor -%}

To get the _redirects file mentioned above I define redirectFrom in the front matter of my new article

redirectFrom:
  - /old-url/
  - /old-url-2/

I enjoy using 11ty and it is great how far you can get with it.

Prerequisites

Before we dive in, you'll need to have the following installed on your machine:

• zsh
• nvm (Node Version Manager)

If you don't have nvm installed, you can find instructions on the nvm GitHub page.

Setting up auto-switching

Assuming you have nvm and Zsh installed, here's how to set up auto-switching:

1. In the root directory of your project, create a .nvmrc file and add the version of Node.js you want to use. For example, if your project requires Node.js version 18.15.0, add 18.15.0 to the .nvmrc file.

2. Open your .zshrc file in your favorite text editor (e.g. vim ~/.zshrc).

3. Add the following lines at the end of the .zshrc file:

autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

4. Save and close the .zshrc file.

5. Restart your terminal or run source ~/.zshrc for the changes to take effect.

That's it! Now, whenever you enter your project's directory, the zsh-hook we defined in your ~/.zshrc file will automatically switch to the Node.js version specified in the project's .nvmrc file. This ensures that you are always using the correct version of Node.js for your project without needing to manually switch versions every time you enter the directory. In every other directory this will switch to your default Node.js version.

I hope this post has been helpful. If you know a better alternative, please reach out to me on Mastodon. Happy coding!

In one of my previous articles I described the difference between strategy and tactics in software development. In this post I want to describe, what can go wrong, if you focus on tactics and ignore the overall strategy. Lets take a situation I have seen at many companies: a new project is born and some people can create something from scratch. Most of the times this means that technology decisions that have been made before, can be questioned and the new scope maybe allows to try out something new. Maybe something that is easier to use or faster to setup. This can have both positive and negative consequences:

Cole Peters (@colepeters@mastodon.online) on begin.com:

For years now, the most popular JS frameworks have carried out intense marketing initiatives based on the premise of improving DX

The whole thing goes, however, as in other ecosystems that developers categorically exclude other frameworks as "bad" and some now and then only see the next nail they can hammer.

My toolchain consisted of HTML (version 4), CSS (version 2), and a sprinkling of jQuery on those rare occasions when I could understand how to use it.

Those were the days. I still fondly remember one of my first jobs, where we uploaded our .jars (built by Jenkins, after all) to the production server via FTP. Don't worry, I'm not suggesting that now as the better alternative to a CI/CD pipeline. However, I did learn a few things about Java and application servers there that still help me today.

As a member of a developer experience team, I often get asked what I do, and why it is important for a company. The truth is that developer experience (DX) is a critical aspect of software development that impacts the productivity, efficiency, and satisfaction of developers. In this blog post, I want to shed some light on what DX is, why it matters, and some of the benefits as well as negative aspects of having a DX team in place.

I'm working on the migration of a monorepo from Vue.js 2 to Vue.js 3 right now. As we are in a monorepo we can migrate our applications stepwise but got into a situation where suddenly our Vue.js 2 tests failed with the following error:

Vue packages version mismatch:

- vue@3.2.40 (...)
- vue-template-compiler@2.7.8 (...)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump `vue-template-compiler` to the latest.

This didn't make sense to me at first because we don't have any project that uses vue-template-compiler and Vue.js in version 3. So, why do we see this conflict?

Software development teams often face the challenge of making decisions on what tools, technologies, and approaches to use when building software products. To make these decisions, it's crucial to understand the difference between strategy and tactics, as they have distinct meanings and implications.

There are some dependencies that I automatically add as devDependency if they are needed. This includes tslib, since it obviously belongs to TypeScript and therefore should not play a role at runtime.

In my Eleventy tutorial I already showed how to set up a blog with Eleventy and also how to integrate CSS into an Eleventy website.

Since I like to work with Tailwind CSS, I naturally want to use it in my private projects as well and have tried a few setups here. Most of them use PostCSS and TailwindCSS "classically" and then adjust the scripts in the package.json so that the Eleventy page is built first and then the appropriate CSS is generated. You can do it that way, but in my eyes it made the setup in package.json more complicated.

My alternative uses Eleventy on-board resources to generate the CSS and fits into the existing configuration with just a few lines of code.