DEV Community

Vero O
Vero O

Posted on

Tips for better programming in distributed teams πŸš€

I've been working remote and freelance for the last 18 years, and my experience told me that working remotely with a distributed team is easier if you set a standard, using some basic and simple rules. πŸ€“ Remember that you have to work with different people that have different ways of coding.

Code can always work, but can you maintain it across the years?

This is the important part for me: maintain the development and release new features without rewriting it.

Those are simple tips, for best practices, in long term developments with distributed teams:

1. Comments πŸ’¬

Always comment on your code, even if you think that you understand it. Because tomorrow you're not available and some colleague has to continue it.

2. Variables πŸ“›

Try to set a standard for variable names, don't let your team use any names. Please, I beg you, don't use variables that do not refer to your entity.
Ex: let's suppose you've a list of books
don't declare:

let list = [] 
Enter fullscreen mode Exit fullscreen mode

instead, refer to your entity first and the variable:

let book_list = [] 
Enter fullscreen mode Exit fullscreen mode

3. Use absolute paths βš“

To avoid mistakes, don't use relative paths! use absolute paths for better understanding of the code. It's cleaner to read and easy to follow.

Example for Frontend dev / Next.js

In next.js > 9.4 you can use absolute path like this:

import { MyComponent } from '@/components/elements' 
Enter fullscreen mode Exit fullscreen mode

instead of doing this:

import { MyComponent } from '../../components/elements' 
Enter fullscreen mode Exit fullscreen mode

You've to add the paths to your tsconfig.json:

{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
         "@/components/*": ["components/*"],
         "@/classes/*": ["classes/*"],
         "@/styles/*": ["styles/*"]
      }
    }
}
Enter fullscreen mode Exit fullscreen mode

+info: Next.js official docs

VS CODE tip:

If you see and error about module location not found, try:

a. add to .vscode/settings.json

"path-intellisense.mappings": {
    "src": "${workspaceRoot}/src"
  }
Enter fullscreen mode Exit fullscreen mode

b. Reload Visual Studio Code with Cmd/Ctrl + Shift + P and type "reload window".

Example for Backend dev

Also if you're a backend developer, you can set up constants to the absolute path and use them inside your code.

const PATH_TEMPLATES = '/var/www/public_html/templates/'; 
Enter fullscreen mode Exit fullscreen mode

Did you find these tips helpful? follow me for more.
I would πŸ’œ to πŸ‘€ and πŸ€“ from your tips, write me!

Top comments (0)