My 2023 Minimalistic Web Dev Setup

My 2023 Minimalistic Web Dev Setup

At the end of 2022 I changed job. This meant that I had a new computer to set up.

For quite sometimes now, I have kept a list of commands and software that I have and need to set up to ease each installation. I used Linux in the past (Fedora to be precise) and I even created a git repo with my Ansible config that would set everything for me.

I now switched to macOS and I want to have my workspace ready in about an hour. I have quite a few applications that aren't installed by default and that needs some configuration.

Hardware stuff

I'm fortunate enough to have a job where I can choose the device I want to use. There is a set of laptops that are recommended, but there is always room for discussion.

My current laptop is a M1 MacBook Pro. I have one for my personal stuff and it's an amazing device. I'm not looking at M2 MacBook Pro since I don't see how they can make my life easier.

Other details include a 24-inch monitor (I'm looking at upgrading it to a 32-inch 4k monitor) and a custom mechanical keyboard (Mode 65).

Mode 65 keyboard (not mine) from Mode Instagram

Software stuff

I will go through some of the software I used. Most of my configs (quite a few) are store on a public GitHub. You can access it here:

GitHub - flavienbonvin/fish_functions
Contribute to flavienbonvin/fish_functions development by creating an account on GitHub.

Web browsers

I primarily use Firefox since I'm not fond of Chrome monopoly. Firefox is amazing, fast and open source which is all I'm looking for.

It would be silly of me to ignore Chrome, since that's where most of the users are. So I use Chrome as development browser.

I also use Min as a nice looking and minimal browser for presentations or screenshots.

Terminal and shell

I'm not a huge fan of the default macOS terminal. That's why I switched (like many) to iTerm 2 which have been an excellent terminal emulator.

Admittedly, I use a fraction of it's feature, but I can customise it as I want and make it look nice.

When it comes to my shell, I don't use ZSH since I don't really like and find it needs too much configuration to be at a decent state.

Installing Oh-My-ZSH, some plugins and theme is time-consuming, and I find that it still lacks some features. Again, I could spend the time to make it work since I know it's very powerful.

Or, instead, I can switch my shell to fish and have an amazing experience. Here are a few advantages regarding fish and that are working by default:

  • Autosuggestion: pressing tab will autocomplete the current command with the one from the history. It will also show options or arguments that can be passed and show the documentation.
  • Git branch autocomplete: similar to auto-suggestions but for git. Fish will show you the branches available and will help you switch faster from one branch to another.
  • Easy to maintain aliases: I find that it becomes quite hard to have a bunch of aliases in a config file. Sure, you can split it to have more clarity. Fish however do this out of the box. Each alias is a function that has its own file. It's easy to share, easy to maintain and won't spoil your config file
  • Performances: I remember spending a significant amount of time reducing the launch time of ZSH. I went as far as using Sheldon and removing OMZ. This is all gone with fish. Performances are amazing and don't change overtime.

I use Starship on top of fish to have a nice looking prompt. Everything can be customized and I went with a pretty light customisation.

Current fish + starship setup

Fish Terminal commands

As said before, I really like how fish manages aliases (they are called functions). Simple create a file in the ./config/fish/functions and you're set to go.

The files must follow this syntax:

function ll
    ls -l $argv

In the above example, you'll be able to write ll instead of ls -l. Do you see the $argv? This means that any parameter you'll add after ll will be passed there. Quite easy right?

I won't go into too many details in this article but here are my must used commands with a link to the GitHub, so you can copy them.

  • gc: this will commit the files that I have stashed. It's a small shortcut to the git commit -m command.
  • gcp: same as gc but it will also push.
  • gp: simple git push shortcut.
  • gcan: commit and amend without edit. This is particularly useful when I work on a larger feature and want to make iteration to review things as they progress without pushing them (it avoids running the CI when not needed). Once I'm done, I can push to the remote.
  • pas: use to run the package I'm working at work. We're using mono repos, and it's quite a pain to use yarn workspace to run the project. This short command helps me move to the correct folder and run the Account application.
  • update: commands that will update my Homebrew packages, the fisher plugins I might have, and will install any macOS updates. I try to run this command once a week.

You can find all my functions with the below link

fish_functions/.config/fish/functions at main · flavienbonvin/fish_functions
Contribute to flavienbonvin/fish_functions development by creating an account on GitHub.

Development environment

I used WebStorm in the past, but I wanted to give VS Code a try. Everybody was using it, and I was working on projects that are simpler to what I saw people using VS Code in.

I never looked back, and I'm quite happy with my current development setup. The battery life of my computer saw a significant increase, and it's not rare that I see a 5% decrease during my 1h train commute to the office.

I try to keep things at a minimal to avoid loosing performances and having conflicts. All my settings are synced using VS Code built-in tool, making my setup consistent across devices.

There are some extensions that I use that makes my life easier.

  • Auto Rename Tag: simply rename the closing tag in JSX. This is only useful for JSX, since there is a setting to automatically change closing tags with HTML, the setting is called editor.linkedEditing. An issue is opened since 2019 regarding adding support for JSX and cursor mirroring. Finger cross, this will be fixed in 2023!
  • Code Spell Checker: I tend to leave some spelling mistakes on my code. This extension highlight them and ensures that I write a bug-free typo-free code.
  • ESLint: I use ESLint in my projects, so this extension is not really required. However, it catches errors that aren't by the configuration at work, which is fine.
  • Git Lens: must have extension when working with multiple people in one repo. The extension makes working around git a bit easier. You can compare file, cherry-pick commits, restore files, ... Everything is possible with the command line, butt I cannot be bothered to try to learn all of them.
  • Import Cost: as discussed in a previous article, importing components can be costly. This extension will show how much an import costs and can be used to track what is weighting your bundle down.
  • Prettier: default formatter for all my projects. Simply change your default editor to prettier "editor.defaultFormatter": "esbenp.prettier-vscode", and never think about it again. Your project-specific config will be picked and respected, so no worries about that.
  • Tailwind CSS IntelliSense: a must-have for anyone that works with tailwind. This extension will auto-suggest tailwind default classes and the one you define on your config. It will be dead easy to find your primary color this way!
  • Todo Tree: I tend to leave some to-do when working on a feature. This way I can keep a track on what to do and what's left. It can become hard to find your to-do back (of course you can make a search) and this extension will add a new icon on the left panel and group all your to-do's.
  • Turbo Console Log: Printing stuff is a quick and easy way to make sure that the data you're working with is present and in a good format. This extension make this process even faster. Select the variable you want to print, hit ctrl + option + L and it will be printed with the file name and the line number. It also works with multiple cursors and can be customized.

That all I have to help me develop. I spend quite sometimes on finding the perfect theme and font for my setup. I frequently switch theme and font, but I'm not at a state where I'm quite happy with how VS Code is looking.

  • Rosé Pine: I discovered this theme at the beginning of this year. Before that, I used Tokyo Light and poimandres, but Rosé Pine instantly replace them. I don't feel the urge (as it was in the past) to always look at a new theme.
  • Cartograph: this is also something new. I discovered the Cartograph font the first day after the holidays. I hesitated for about 10 seconds before deciding that it was a worth investment. This was my first "work-related" purchase of the year and the first font I ever bought. Very happy with how it looks, even if my friends call it the "Comic Sans" of monospaced fonts.
Current VS Code setup

Subscribe to the newsletter to get new articles right in your inbox!

Subscribe to the newsletter

Productivity / Work

There are several applications I use for productivity in my day-to-day job and for my personal use. I'll quickly go through them:

  • Raycast: simply a better and more powerful alternative to Alfred or Raycast. I wrote several articles about it already. Here is one where I show the 10 best extensions you can install.
  • Things: my to-do application of choice since I use a mac. The UI is nice, and the application is simple yet does things really well. I'm quite intrigue to what they are working on and how the next version will look like (if it ever comes out).
  • Excalidraw: pretty useful when I need to discuss architecture with a coworker or need to create charts for an article. Theo made me discover it and I instantly loved it. You can see how I use it in this article
What does CSR, SSR, SSG and ISR means and why should you care?
NextJS offers many ways to generate pages on the server to ensure fast page load. Let’s see what CSR, SSR, SSG and IRS means!
  • CleanShot X: simply the best screenshot tool I ever used. It can make scrolling screenshots, annotate, record videos and GIFs, ... I tried some alternative, but I ultimately came back to it since it's so nice.
  • Obsidian: quite a new addition to my toolbox. I used Bear in the past, but I recently decided to give Obsidian a try. I have to admit that I write more noted, and I feel more organised. This could be a novelty factor, and we'll see how it goes.
  • Antidote: killer spell checker for English and French. It helped me quite a lot during my studies and I still use it when writing articles and long mails / Slack messages. It can correct many things (like its competitors) but goes even further with analysis, tone coherence, repetitions, ... The integration with apps is not that great and UI is getting old, but it works really good which is the most important thing.
  • LanguageTool: another excellent spell-checker that works great in tandem with Antidote. They are both great and don't correct the same mistakes. I prefer Language Tools over Grammarly since it feel less like a keylogger. Besides that, they are based in Germany and not in the US. I currently use the free tier, but I might try the premium to see how they perform against Antidote.
Obsidian window with Catppuccino theme and Cartograph

Small tools / utilities

Last category, here are some small tools that are nice to have, even if they aren't used very often.

  • Hidden bar: replacement of Bartender. Helps hide some status icon on the menu bar to avoid clutter. Open-source and free.
  • KeyboardCleanTool: disable the keyboard, so you can... clean it. Very simple and dead easy to use.
  • IINA: nice looking video playback application. Great replacement of VLC.
  • Batteries: small utility that display the battery percentage of connected Bluetooth devices. It's better than looking into the settings and will send a notification if a given level is reached.
Battery showing levels of Bluetooth tools right from the menu with Raycast Spotify player

Cloud storage

I don't have many files stored on the Cloud. I use Apple iCloud to store everything, ranging from some tax files to my photo library. I'm quite happy with it and the 50 Gigabyte plan is plenty sufficient for my needs.

However, I plan to switch to Proton Drive once when the macOS client will be available. I don't trust much Apple with my data, and I feel like Proton better respects my privacy. I also have 500 gigabytes of storage on Proton, it would be a shame not to use it!

The whole Proton ecosystem - Proton Mail, Proton Calendar, Proton Drive and Proton VPN

Final words

Here is my complete setup with all the tools, extensions and utilities I use.

I realised, while writing this article, that I need quite a lot of tools to work. I thought for sometimes that I have a minimalistic approach when it comes to my digital life, butt I'm wrong.

I don't have many duplicates, one cloud provider, one text editor, one note-taking application. However, I need a lot of different specialised tools to make everything work together.

Raycast is however a killer application that was able to replace many others.

I used to have an application to manage the position of my windows (Rectangle) that was replaced by Raycast.

I used to have a clipboard manager (Paste) that was replaced by Raycast.

I used to have an application to keep my computer activated (Caffeinated) that was replaced by Raycast.

You get the gist, Raycast is amazing and can replace many applications. You can find the extensions I used.

Quit Spotlight and Alfred, 10+ Best Raycast Extensions for Web Developers
Raycast extensions are a great way to improve productivity. Here is a list of 10+ extensions carefully curated for web developers

I still have some friction that I want to eliminate (specially with task management) but this is a story for another time. I'm quite happy at the current state of my tool chain, and I'm looking forward to the future changes.

I hope that you enjoyed this article. Feel free to subscribe to my newsletter to get all new articles right into your inbox (no other emails are sent).