macOS Tools and Apps for Development in 2022
Tags: webdev, javascript, productivity, programming
Published: 2022-02-10 15:43:13

For along of my dev career I tried to ease my every day routine. I tried lots of tools and apps, different approaches that I found in numerous articles and sources. Not all of them were really useful. Some of them made my routine even more time consuming. 

So, today I want to share those tools whitch was really effective to me. Let’s begin.

---

## Terminal Tools
### [Homebrew](https://brew.sh)
The Package Manager for macOS. Homebrew installs  [the stuff you need](https://formulae.brew.sh/formula/) that Apple (or your Linux system) didn’t. It’s similar to [apt-get](https://help.ubuntu.com/community/AptGet/Howto) for Ubuntu (any Debian based) Linux.

---

### [iTerm2](https://iterm2.com)
iTerm2 is a replacement for default macOS’s Terminal.app. iTerm2 brings the terminal into the modern age with [features](https://iterm2.com/features.html) you never knew you always wanted. I like that the app has a lot of customization inside. And also check this awesome smooth show/hide effect.
![iTerm2 interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci79yj4t6v5z1bpgut6s.gif)
<figcaption>
not so smooth on 10fps GIF, yeah? 😂
</figcaption>

---

### [ZSH](https://zsh.sourceforge.io)
The Z shell (also known as `zsh`) is a Unix shell that is built on top of bash (the default shell for macOS) with additional features. ZSH designed for interactive use, although it is also a powerful scripting language.

---

### [Oh My ZSH!](https://ohmyz.sh)
Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout.. It has an impressive [list](https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins) of plugins, and nice look [themes](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes). As for me, I use the [powerlevel10k](https://github.com/romkatv/powerlevel10k) theme.
![powerlevel10k theme look ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttbd24js2detkr8q0tlg.png)
<figcaption>
powerlevel10k theme look
</figcaption>
 

---

### [Fig](http://fig.io)
Fig adds VSCode-style autocomplete to your existing terminal.  Just look at the gif bellow.

![Fig in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8phrhw4ff3udtknpljvh.gif)
<figcaption>
image source <a href="https://fig.io">Fig.io</a>
</figcaption>

It has common shortcusts (for git, etc). It’s possible to create [project shortcuts](https://fig.io/docs/guides/project-shortcuts) (To create them, all you need to do is init a `.fig` folder in your project and then create a `_shortcuts.ts` completion spec).

![Fig autocompete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxejtoeuhwejv6wppnue.png)
 <figcaption>
image source <a href="https://fig.io">Fig.io</a>
</figcaption>


 Also fig can catch your project’s `npm scripts`  up automatically. Or you’re able to create a separated list of autocompletes by adding fig object to `package.json` file. 
Dropdown with commands may look as fancy as bellow.

![Fig npm scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s03au6b1vruoxtax7p0.png)
 <figcaption>
image source <a href="https://fig.io">Fig.io</a>
</figcaption>

---

### [Volta](https://volta.sh)
Volta is a hassle-free way to manage your JavaScript command-line tools. Think about it like “A better NVM”. For example.
Volta's command `volta pin node@12` will save the exact version of the Node engine in your `package.json` so you can commit your selection to git. From that point on, every time you run Node inside your project directory, Volta automatically switches to that same version of Node you chose. Similarly, all your collaborators can do the same by installing Volta on their development machine.

---

### [Ngrok](https://ngrok.com)
Ngrok allows you to expose a web server running on your local machine to the internet. It’s good for situations when your project is still under development (wasn’t deployed yet):
* Demo your web project without deploying
* Build webhook consumers on your dev machine
* Test mobile apps connected to your locally running backend

The ngrok console UI looks like this.
![ngrok console UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6f1jtsd2jk1jvwd0pe4.png)
 <figcaption>
image source <a href="https://ngrok.com">ngrok.com</a>
</figcaption>
 

---

## Desktop Apps

### VS Code + plugins
VS Code is the most popular editor based on latest (2020) [State of JS](https://2020.stateofjs.com/en-US/other-tools/#text_editors) 
![state of js chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81eq3ohcyg7jfat11jyr.png)
 <figcaption>
image source <a href="https://2020.stateofjs.com/en-US/other-tools/#text_editors">2020.stateofjs.com</a>
</figcaption>

My list of VS Code plugins (not all, just most helpful):
* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
* [Bracket Peek](https://marketplace.visualstudio.com/items?itemName=jomeinaster.bracket-peek) - This extensions helps you to view the line of code containing an opening bracket when inspecting the matching closing bracket.
* [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - It supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
* [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) - This extension will display inline in the editor the size of the imported package.
* [Indent-Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) - A simple extension to make indentation more readable.
* [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) - A plugin that autocompletes filenames.
* [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) - It helps you to easily access your projects, no matter where they are located.
* [Shortcut Menu Bar](https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar) - Add 35+ handy buttons like beautify, show opened files, save, toggle terminal, activity bar, Find replace etc to the editor menu bar in VSCode. You can also create your own buttons with custom commands.
* [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) - It’s a lightweight Rest API Client Extension
* [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) - An extension that allows you to highlight trailing spaces and delete them in a flash!
* [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) - This extension make debugging much easier by automating the operation of writing meaningful log message.


---

### [GitKraken](https://www.gitkraken.com)
GitKraken is a git GUI tool like Atlassian’s [Sourcetree](https://www.sourcetreeapp.com), but more powerful and fancy. I like this tool for:
* easy to use drag-n-drop in my routine operations like merging branches.
* It has awesome Soloing mode, where you can see history of certain branch. 
* It has an integrated search by branch name, issues panel, PR creation and managing, etc. Everything in one tool.

![GitKraken interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgdjunpyed8s72ob9wuh.png)
<figcaption>
image source <a href="https://www.gitkraken.com">gitkraken.com</a>
</figcaption>

*  And the killer feature for me is integrated Merge Conflict Resolution (like in WebStorm IDE). No more ugly or expensive separated tools for conflict resolving, everything is out of the box. 😎

![GitKraken resolve conflict tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scswbc8j14nixc1pqquv.png)
<figcaption>
image source <a href="https://www.gitkraken.com">gitkraken.com</a>
</figcaption>

* And, of course, 1 click undo for checkout, commit, discard, delete branch, remove remote and reset branch to a commit.

![GitKraken undo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynv13m85yk9mj9jg80pa.png)
<figcaption>
image source <a href="https://www.gitkraken.com">gitkraken.com</a>
</figcaption>


---

### [ResponsivelyApp](https://responsively.app)
ResponsivelyApp is a very helpful application to check how your web app looks in different dimensions. It’s easy to develop you app with this tool, because you’re able to see how your code changes affects view on different screens.
![ResponsivelyApp interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shn2yb06vq6ftoktib3x.png)
 <figcaption>
image source <a href="https://responsively.app">responsively.app</a>
</figcaption>


---

### [RunJS](https://runjs.app)
RunJS is a JavaScript playground for your desktop. You can explore and experiment with JavaScript and TypeScript, visualise your ideas and get instant feedback as you type. It’s a very helpful tool for testing some JavaScript code which is longer than 1 line, or creating code snippet, etc. It’s more comfortable to do such operations in this tool than in browser’s DevTools.
![runJS interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqdyzxe5drpmswchjf07.gif)
<figcaption>
image source <a href="https://runjs.app">runjs.app</a>
</figcaption>

---

### [Altair GraphQL Client](https://altair.sirmuel.design)
Altair helps you debug GraphQL queries and implementations - taking care of the hard part so you can focus on actually getting things done.
![Altair interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73p98jxq96msyp41yddf.png)
<figcaption>
image source <a href="https://altair.sirmuel.design">altair.sirmuel.design</a>
</figcaption>

---

## Extra Tools
### [Moom](https://manytricks.com/moom/)
Moom makes window management as easy as clicking a mouse button—or using a keyboard shortcut, if you’re one of those types of people.
With Moom, you can easily move and zoom windows to half screen, quarter screen, or fill the screen; set custom sizes and locations, and save layouts of opened windows for one-click positioning. Once you’ve tried Moom, you’ll wonder how you used your Mac without it.
![Moom interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fsugwh8pjo8nqxzrtjw.png)
<figcaption>
image source <a href="https://manytricks.com/moom/">manytricks.com/moom</a>
</figcaption>

---
### [CleanShot X](https://cleanshot.com)
CleanShot X provides over [50 features](https://cleanshot.com/features)  making it the ultimate screen capturing tool. It feels like 7 apps in one.
![CleanShot X interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aro95laqcv7vzq2sbuzi.png)
<figcaption>
image source <a href="https://cleanshot.com">cleanshot.com</a>
</figcaption>

---
### [Sli.dev](https://sli.dev)
Sli.dev is a tool for creating presentations. Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with. It’s not a desktop app like [PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint), or [Keynote](https://www.apple.com/keynote/). You need to write the [markdown](https://www.markdownguide.org), or html + css code by yourself (or even [Vue.js](https://vuejs.org) components if you want). With such frameworks you’re able to control almost every aspect of your presentation like transitions, styles, views, texts, etc. Also it’s a fun to work with this tool for me as a developer. I tried a lot of similar to Sli.dev tools, like [spectacle](https://formidable.com/open-source/spectacle/), [revealJS](https://revealjs.com), [ImpressJS](https://impress.js.org/#/bored), but I like [Windi CSS](https://windicss.org) and want to create stuff with this framework (actually I love the [TailwindCSS](https://tailwindcss.com), but Windi gives me the same experience).
![Sli.dev example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v0dofx0obgr8bqdeblv.png)
<figcaption>
image source <a href="https://sli.dev">sli.dev</a>
</figcaption>

---
### [Notion](https://notion.so)
Notion is a multi database for your everything, that can be notated. It’s more than a doc, or a table. You’re able to customize Notion to work the way you do. It has a lot of templates for every need, supports Kanban, or Timeline View, tables with relations and calculated fields, team collaborations and much more.
![Notion interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2u7qjnevcl5p5vcvtk8.gif)
<figcaption>
image source <a href="https://notion.so">notion.so</a>
</figcaption>

---

That’s it. Thanks for reading. Let me know in comments what tools do you use in your daily dev routine. 👇