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
The Package Manager for macOS. Homebrew installs the stuff you need that Apple (or your Linux system) didn’t. It’s similar to apt-get for Ubuntu (any Debian based) Linux.
iTerm2
iTerm2 is a replacement for default macOS’s Terminal.app. iTerm2 brings the terminal into the modern age with features 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.
ZSH
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!
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 of plugins, and nice look themes. As for me, I use the powerlevel10k theme.
Fig
Fig adds VSCode-style autocomplete to your existing terminal. Just look at the gif bellow.
It has common shortcusts (for git, etc). It’s possible to create 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).
image source Fig.io
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.
image source Fig.io
Volta
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
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.
image source ngrok.com
Desktop Apps
VS Code + plugins
VS Code is the most popular editor based on latest (2020) State of JS
image source 2020.stateofjs.com
My list of VS Code plugins (not all, just most helpful):
- Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
- Auto Rename Tag - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
- Bracket Peek - This extensions helps you to view the line of code containing an opening bracket when inspecting the matching closing bracket.
- 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 - This extension will display inline in the editor the size of the imported package.
- Indent-Rainbow - A simple extension to make indentation more readable.
- Path Intellisense - A plugin that autocompletes filenames.
- Project Manager - It helps you to easily access your projects, no matter where they are located.
- 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 - It’s a lightweight Rest API Client Extension
- Trailing Spaces - An extension that allows you to highlight trailing spaces and delete them in a flash!
- Turbo Console Log - This extension make debugging much easier by automating the operation of writing meaningful log message.
GitKraken
GitKraken is a git GUI tool like Atlassian’s Sourcetree, 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.
- 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. 😎
- And, of course, 1 click undo for checkout, commit, discard, delete branch, remove remote and reset branch to a commit.
ResponsivelyApp
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.
image source responsively.app
RunJS
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.
Altair GraphQL Client
Altair helps you debug GraphQL queries and implementations - taking care of the hard part so you can focus on actually getting things done.
Extra Tools
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.
CleanShot X
CleanShot X provides over 50 features making it the ultimate screen capturing tool. It feels like 7 apps in one.
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, or Keynote. You need to write the markdown, or html + css code by yourself (or even Vue.js 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, revealJS, ImpressJS, but I like Windi CSS and want to create stuff with this framework (actually I love the TailwindCSS, but Windi gives me the same experience).
Notion
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.
That’s it. Thanks for reading. Let me know in comments what tools do you use in your daily dev routine. 👇
Top comments (0)