Generating _redirects in 11ty
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 fileredirects.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 defineredirectFrom
in the front matter of my new articleredirectFrom: - /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:
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.Open your
.zshrc
file in your favorite text editor (e.g.vim ~/.zshrc
).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-nvmrcSave and close the
.zshrc
file.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.
Today I learned: tslib is not a devDependency
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.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.