DEV Community: Dmytro Maslov

macOS Tools and Apps for Development in 2022

Dmytro Maslov — Thu, 10 Feb 2022 15:43:13 +0000

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.

not so smooth on 10fps GIF, yeah? 😂

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.

powerlevel10k theme look

Fig

Fig adds VSCode-style autocomplete to your existing terminal. Just look at the gif bellow.

image source Fig.io

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.

image source gitkraken.com

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. 😎

image source gitkraken.com

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

image source gitkraken.com

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.

image source runjs.app

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.

image source altair.sirmuel.design

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.

image source manytricks.com/moom

CleanShot X

CleanShot X provides over 50 features making it the ultimate screen capturing tool. It feels like 7 apps in one.

image source cleanshot.com

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).

image source sli.dev

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.

image source notion.so

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

Monorepos. 2022

Dmytro Maslov — Wed, 26 Jan 2022 16:00:57 +0000

When was the last time when you were thinking about “What’s going on with monorepos now”? Is Lerna still the best choice or just Yarn Workspaces could be enough?

I did it a couple days ago and I have something to share with you.

So let’s get started.

First of all, what does the Monorepo mean?
Wikipedia says

In version control systems, a monorepo (“mono” meaning ‘single’ and “repo” being short for ‘repository’) is a software development strategy where code for many projects is stored in the same repository

When you may need monorepos in your dev life?

Imagine the situation:

You have several libraries, projects, etc.
All of them are stored in a separated git repos.
Some of these packages should be as dependencies in your other packages.
And you are still continue to develop your packages (some of them may not work correctly in integration with other, etc.)

So the ordinary dev’s reality :)

What could you do in such a case?

The worst scenario 👎

You can publish your “medium rare” packages. Include them in the package.json of your main project as dependencies. Then, when you fix something, you republish them, up the version in package.json, yarn install again… Repeat as many times as you will find bugs.

If you ever thought about this workflow, keep reading, please 👉

Good scenario 👋

You can use yarn link. In that case, you can test your packages working in integration, without publishing packages every time after you fixed bugs.
What is the main issue here? If you have a lot of packages you can simply miss something. You also need to remember to do yarn unlink after you are done with fixes and published your stuff. Also, you need to pay attention to what version do you use right now, published or linked one.. Yes, your editor may show you which package is linked right now in node_modules , but still, it could be risky to miss something. It’s hard to manage everything when you have many packages and cross dependencies

The Best scenario (for my opinion) 👍

You can use the monorepos. All your packages will be stored in one git repository, with their own package.json’s, linked with each other, etc. It’s easy to develop, easy to manage. When your development is done, all your stuff could be published at once or package-by-package. No need yarn link/unlink, etc

So in short. We may want to use monorepos when:

We want a bit simplest code base management
We have a huge codebase with cross dependiences in packages
We have several applications and the packages used inside every application
We don’t want to deal with yarn link, etc if we need to fix something inside our package
We want flexible versioning, publishing, and changelog generation
Just We can :)

Let’s see in short what projects we can use for monorepos in 2022

yarn/npm Workspaces.

yarn workspaces npm workspaces
It’s Low-level primitive used by other tools. Actually, if you just need to link and install dependencies, it will be enough.

Link dependencies +
Run commands across the packages +
Automated packages publishing (we can run publish command one-by-one in each package, or write jour own automation) —
Automated version managing —

Lerna (⭐️ 31.4k)

More info

Link dependencies +
Run commands across the packages +
Automated packages publishing +
Automated version managing +
Caching —

Turborepo (⭐️ 5.3k)

More info

Link dependencies +
Run commands across the packages +
Automated packages publishing (can be done via complimentary tools) —
Automated version managing (can be done via complimentary tools) —
Caching +++

NX (⭐️ 10.3k)

More info

More than just monorepo tool +
Automated packages publishing —
Automated version managing —
Caching +++
Not as easy as wanted —

BIT (⭐️ 14.6k)

More info

More than just monorepo tool +
Good for micro frontends +

Before we go further I want you to give a try to NX.

The project has a great codegen tool and provides consistent dev experience for any framework
When you want to add a package to monorepo NX will ask you what should it be. For example, React application, React library, or React component. Based on choices NX will generate a proper config for each package inside your monorepo
It works extremely fast

I have a feeling that NX is something great! Maybe I just didn’t find use cases for such a multitool in my project and stopped to dive deeper. Also, it was a little hard to make my project work with NX.
But it’s only my experience ;)

So, for me (and my project), the best tool is TURBOREPO

Here is the list of benefits which are important for me (you may find the whole list in official documentation)

Incremental builds
Building once is painful enough, Turborepo will remember what you’ve built and skip the stuff that’s already been computed.

Content-aware hashing
Turborepo looks at the contents of your files, not timestamps to figure out what needs to be built.

Remote Caching
Share a remote build cache with your teammates and CI/CD for even faster builds.

Parallel execution
Execute builds using every core at maximum parallelism without wasting idle CPUs.

Task pipelines
Define the relationships between your tasks and then let Turborepo optimize what to build and when.

Profile in your browser
Generate build profiles and import them in Chrome or Edge to understand which tasks are taking the longest.

Finally, lets see the digits.

Previously I used Lerna as a monorepo engine. So I will compare Lerna speed vs Turborepo
My monorepo contains one React application and 13 packages. One of the packages is the UI Library Kit which contains 102 React components

build-packages — build all packages except the main application
build-app — build all packages and the main application

Okay. It was a small description of what’s going on with monorepos in 2022 from my point of view. Hope the information was helpful for someone.
Let me know what you guys think in the comments :)