Setting up Storybook on an Astro project
7 min read
I really, really thought this was gonna be easy.
If you're like me, you're constantly jumping between projects, and often those projects need different versions of NodeJS. Ideally, all of them would be using (or compatible with) the latest version, but in reality a lot of those projects are old and you just don't have the time to update them and make sure all dependencies play nice.
When jumping between them, it's usually a pain to remember which Node version to use and have to switch to that version. Tools like nvm make it easy to switch, but it's still a manual task that we often forget to do.
Turns out, you can use nvm to automatically switch the NodeJS version when you cd into a folder! All you need is a file in your project and a few lines of magic in your bash/zsh profile.
The first step is to edit your shell profile file, so that every time you cd into a folder, it checks if there's a .nvmrc file and if so, it switches to that Node version.
If you're using zsh, you can add the following to your .zshrc file:
# Automatically use Node version specified via .nvmrc file # place this after nvm initialization! 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
With bash, you can add the following to your .bash_profile file:
# Automatically use Node version specified via .nvmrc file # place this after nvm initialization! 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 } if [ -n "$BASH_VERSION" ]; then PROMPT_COMMAND="load_nvmrc; $PROMPT_COMMAND" fi
Inside your project folder, create a file called .nvmrc and add the Node version you want to use. For example, if you want to use Node 14.18.0, you'd add the following to the file:
v14.18.0
You need to do this for every project that needs a specific NodeJS version. If you don't add a .nvmrc file, nvm will use the default.
Setting up Storybook on an Astro project
7 min read
I really, really thought this was gonna be easy.
Separating my website's content from its code
4 min read
Having an open source website is great, but having the content stored in the same spot as the code has some issues. On this post I walk through what I did to keep them separated.
Automating Social Media Preview Images
6 min read
Social media preview images are very useful if you want to attract people to your website. They're sometimes a pain to create, though. Let's automate it!
Progressive Enhancement (and why it matters)
8 min read
Progressive Enhancement isn't just another web jargon; it's a guiding principle shaping modern web development.