• Generating _redirects in 11ty

    Today I updated an article that is about [automatically switching Node.js version with nvm]("Permalink: Article How to automate switching Node.js versions with nvm and zsh"). 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.

  • How to automate switching Node.js versions with nvm and zsh

    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
    1. Save and close the .zshrc file.

    2. 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!

  • Choosing your next framework

    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:

  • Redefining Developer Experience

    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.

  • Unlocking Productivity: Understanding the Importance of Developer Experience

    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.

  • Today I learned: Utilizing pnpm packageExtensions to fix broken dependencies

    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?

  • Strategy vs Tactics in Software Development

    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.

  • Eleventy: Integrate PostCSS and Tailwind CSS

    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.

  • Twitter (2007-2022)

    Twitter has been a great tool for me and has also brought me a lot in the last 15 years: I've been able to meet many wonderful people, exchange ideas with them and have learned an enormous amount that has helped me a lot in my career so far.

    I'm sure that without Twitter I wouldn't have written a book, and I'm sure that my career and, of course, my private life would have looked completely different. Even though I became more and more passive there in the last years, Twitter was something I opened several times a day and enjoyed using.

    Unfortunately, Twitter has changed so much in recent weeks and months that I no longer want to support and use it. So now you can only find me on Mastodon. At the moment I'm much more active there, which is surely due to the mood. Feel free to come over! I would be happy if we would network there.