The 7 best tools for beginner Software Engineers/Developers going into 2022

Total Views:14

23 min read

The 7 best tools for beginner Software Engineers going into 2022

When you are a beginner Software Engineer, the abundance of tools at your disposal can be a bit overwhelming at first. There is so much to choose from, and although that is a privilege, it can be hard to know which tools will actually help you in becoming a better programmer.

To make things easier for you, I put together a list of the 7 best tools for Software Engineers. These have not only helped me improve my skills, but have also made life easier in numerous aspects! Although the list is numbered, there is really no order as to which one of them is the best, they are all equally helpful in their own way.

• Tailwind CSS

  Tailwind CSS describe themselves as a utility-first CSS framework. What does that mean? Instead of focusing on the functionality of the item you style, Tailwind has its focus on how it should be displayed. With this technique developers can easily test out new styles or change the layout. Tailwind CSS is packed with classes like flex, pt-4, text-center and rotate-90, to build any design you like directly in your markup.

  It is really easy to use and has flex and grid models right out of the box. This really helps limit the amount of CSS Utilities required for your project. For example the following HTML + TailwindCSS:

  <div class="bg-gray-800 w-full p-32">
  	<div class="flex flex-col md:flex-row justify-center items-center">
  		<div class="p-16 m-2 flex bg-purple-500 text-white">Box 1</div>
  		<div class="p-16 m-2 flex bg-blue-500 text-white">Box 2</div>
  		<div class="p-16 m-2 flex bg-indigo-500 text-white">Box 3</div>
  	</div>
  </div>

  Renders the following responsive content - test it out by resizing your browser! To learn more about responsive design with Tailwind CSS - read the Official Documentation

  Box 1

  Box 2

  Box 3

• Visual Studio Code

  Visual Studio Code is a great IDE application to use for your code workflow. It has amazing out of the box features like the Git/Source/Terminal integrations, it's hard to not be impressed. There are four main VS Code Extensions that really improved my coding while using this application.

  • Live Server

    The Live Server of Visual Studio Code allows you to launch a development local Server with a live reload feature for static and dynamic pages. This will make working on a project so much easier, as you get an instant, up-to-date view of your changes. This is especially useful for plain HTML/CSS rendering or when youre not explicitly working with a framework that supports hot-reloads out of the box i.e: React, Next, Vue, Svelte, Angular, etc..

    Launch a local development server with live reload feature for static & dynamic pages.

    

  • Prettier Code Formatter

    Prettier will parse your code and re-print it with its own rules to enforce a consistent style. This code formatter will wrap your code if necessary.

    More information can be found here:

    https://github.com/prettier/prettier-vscode

    https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

  • TODO Highlight

    The TODO Highlight is an extension that allows you to highlight TODO, FIXME and other similar annotations within your code. You might wonder why this is useful. It will happen at times that you will publish your code to production without reviewing the TODOs that you’ve added while coding, simply because you forgot. By automatically highlighting them, these TODOs are more likely to catch your attention and remind you of things not yet done.

    

  • Remote-SSH

    The Visual Studio Code Remote - SSH extension allows you to open a remote folder on any remote machine, virtual machine, or container with a running SSH server and take full advantage of VS Code's feature set. Once connected to a server, you can interact with files and folders anywhere on the remote filesystem.

    No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine.

    Learn More about Remote-SSH with Visual Studio Code.

    

• iTerm

  iTerm is one of the most popular terminal emulators in the world. It is very frequently used by developers because it processes untrusted data.

  The most recent version is iTerm 2. It works on Macs with macOS 10.14 and newer. A few of the most popular features are Split Panes, Search, Autocomplete, Copy Mode and Paste History; but there are many more. See a list of features here.

  

  Here is my personal Iterm Configuration file in JSON which you can load directly into the iTerm configuration

  {
    "Working Directory" : "~\/",
    "Prompt Before Closing 2" : false,
    "Selected Text Color" : {
      "Red Component" : 0,
      "Color Space" : "sRGB",
      "Blue Component" : 0,
      "Alpha Component" : 1,
      "Green Component" : 0
    },
    "Rows" : 25,
    "Ansi 11 Color" : {
      "Red Component" : 0.9259033203125,
      "Color Space" : "sRGB",
      "Blue Component" : 0,
      "Alpha Component" : 1,
      "Green Component" : 0.8833775520324707
    },
    "Use Italic Font" : true,
    "Foreground Color" : {
      "Red Component" : 0.86197912693023682,
      "Color Space" : "sRGB",
      "Blue Component" : 0.86198854446411133,
      "Alpha Component" : 1,
      "Green Component" : 0.86199951171875
    },
    "Right Option Key Sends" : 0,
    "Show Status Bar" : true,
    "Character Encoding" : 4,
    "Selection Color" : {
      "Red Component" : 0.70196080207824707,
      "Color Space" : "sRGB",
      "Blue Component" : 1,
      "Alpha Component" : 1,
      "Green Component" : 0.84313726425170898
    },
    "Mouse Reporting" : true,
    "Cursor Boost" : 0,
    "Ansi 4 Color" : {
      "Red Component" : 0.15404300391674042,
      "Color Space" : "sRGB",
      "Blue Component" : 0.78216177225112915,
      "Alpha Component" : 1,
      "Green Component" : 0.26474356651306152
    },
    "Non-ASCII Anti Aliased" : true,
    "Sync Title" : false,
    "Disable Window Resizing" : true,
    "Description" : "Default",
    "Close Sessions On End" : true,
    "Jobs to Ignore" : [
      "rlogin",
      "ssh",
      "slogin",
      "telnet"
    ],
    "Non-ASCII Ligatures" : true,
    "Scrollback Lines" : 1000,
    "Draw Powerline Glyphs" : true,
    "Status Bar Layout" : {
      "components" : [
        {
          "class" : "iTermStatusBarGitComponent",
          "configuration" : {
            "knobs" : {
              "maxwidth" : 1.7976931348623157e+308,
              "iTermStatusBarGitComponentPollingIntervalKey" : 2,
              "base: priority" : 5,
              "base: compression resistance" : 1,
              "shared text color" : {
                "Red Component" : 0.90000000000000002,
                "Color Space" : "sRGB",
                "Blue Component" : 0.63,
                "Alpha Component" : 1,
                "Green Component" : 0.63
              },
              "minwidth" : 0
            },
            "layout advanced configuration dictionary value" : {
              "font" : ".AppleSystemUIFont 12",
              "algorithm" : 0,
              "auto-rainbow style" : 3
            }
          }
        },
        {
          "class" : "iTermStatusBarSearchFieldComponent",
          "configuration" : {
            "knobs" : {
              "base: priority" : 5,
              "base: compression resistance" : 1,
              "shared text color" : {
                "Red Component" : 0.87515999999999994,
                "Color Space" : "sRGB",
                "Blue Component" : 0.63,
                "Alpha Component" : 1,
                "Green Component" : 0.90000000000000002
              }
            },
            "layout advanced configuration dictionary value" : {
              "font" : ".AppleSystemUIFont 12",
              "algorithm" : 0,
              "auto-rainbow style" : 3
            }
          }
        },
        {
          "class" : "iTermStatusBarClockComponent",
          "configuration" : {
            "knobs" : {
              "base: priority" : 5,
              "shared text color" : {
                "Red Component" : 0.63,
                "Color Space" : "sRGB",
                "Blue Component" : 0.67968000000000006,
                "Alpha Component" : 1,
                "Green Component" : 0.90000000000000002
              },
              "base: compression resistance" : 1,
              "format" : "M\/dd h:mm"
            },
            "layout advanced configuration dictionary value" : {
              "font" : ".AppleSystemUIFont 12",
              "algorithm" : 0,
              "auto-rainbow style" : 3
            }
          }
        },
        {
          "class" : "iTermStatusBarBatteryComponent",
          "configuration" : {
            "knobs" : {
              "base: priority" : 5,
              "base: compression resistance" : 1,
              "shared text color" : {
                "Red Component" : 0.63,
                "Color Space" : "sRGB",
                "Blue Component" : 0.90000000000000002,
                "Alpha Component" : 1,
                "Green Component" : 0.82547999999999988
              }
            },
            "layout advanced configuration dictionary value" : {
              "font" : ".AppleSystemUIFont 12",
              "algorithm" : 0,
              "auto-rainbow style" : 3
            }
          }
        },
        {
          "class" : "iTermStatusBarMemoryUtilizationComponent",
          "configuration" : {
            "knobs" : {
              "base: priority" : 5,
              "shared text color" : {
                "Red Component" : 0.72936000000000012,
                "Color Space" : "sRGB",
                "Blue Component" : 0.90000000000000002,
                "Alpha Component" : 1,
                "Green Component" : 0.63
              }
            },
            "layout advanced configuration dictionary value" : {
              "font" : ".AppleSystemUIFont 12",
              "algorithm" : 0,
              "auto-rainbow style" : 3
            }
          }
        },
        {
          "class" : "iTermStatusBarWorkingDirectoryComponent",
          "configuration" : {
            "knobs" : {
              "maxwidth" : 1.7976931348623157e+308,
              "base: priority" : 5,
              "minwidth" : 0,
              "base: compression resistance" : 1,
              "shared text color" : {
                "Red Component" : 0.90000000000000002,
                "Color Space" : "sRGB",
                "Blue Component" : 0.77580000000000027,
                "Alpha Component" : 1,
                "Green Component" : 0.63
              }
            },
            "layout advanced configuration dictionary value" : {
              "font" : ".AppleSystemUIFont 12",
              "algorithm" : 0,
              "auto-rainbow style" : 3
            }
          }
        }
      ],
      "advanced configuration" : {
        "font" : ".AppleSystemUIFont 12",
        "algorithm" : 0,
        "auto-rainbow style" : 3
      }
    },
    "Brighten Bold Text" : true,
    "Flashing Bell" : false,
    "Cursor Guide Color" : {
      "Red Component" : 0.70213186740875244,
      "Color Space" : "sRGB",
      "Blue Component" : 1,
      "Alpha Component" : 0.25,
      "Green Component" : 0.9268307089805603
    },
    "BM Growl" : true,
    "Ansi 3 Color" : {
      "Red Component" : 0.78058648109436035,
      "Color Space" : "sRGB",
      "Blue Component" : 0,
      "Alpha Component" : 1,
      "Green Component" : 0.76959484815597534
    },
    "Icon" : 0,
    "Use Non-ASCII Font" : true,
    "Link Color" : {
      "Red Component" : 0.19802422821521759,
      "Color Space" : "sRGB",
      "Blue Component" : 0.9337158203125,
      "Alpha Component" : 1,
      "Green Component" : 0.55789834260940552
    },
    "Shortcut" : "",
    "Background Image Location" : "",
    "Bold Color" : {
      "Red Component" : 0.99999600648880005,
      "Color Space" : "sRGB",
      "Blue Component" : 1,
      "Alpha Component" : 1,
      "Green Component" : 1
    },
    "Use Cursor Guide" : false,
    "Unlimited Scrollback" : false,
    "Allow Title Setting" : true,
    "Custom Command" : "No",
    "Title Components" : 1,
    "Keyboard Map" : {
      "0xf700-0x260000" : {
        "Text" : "[1;6A",
        "Action" : 10
      },
      "0x37-0x40000" : {
        "Text" : "0x1f",
        "Action" : 11
      },
      "0x32-0x40000" : {
        "Text" : "0x00",
        "Action" : 11
      },
      "0xf709-0x20000" : {
        "Text" : "[17;2~",
        "Action" : 10
      },
      "0xf70c-0x20000" : {
        "Text" : "[20;2~",
        "Action" : 10
      },
      "0xf729-0x20000" : {
        "Text" : "[1;2H",
        "Action" : 10
      },
      "0xf72b-0x40000" : {
        "Text" : "[1;5F",
        "Action" : 10
      },
      "0xf705-0x20000" : {
        "Text" : "[1;2Q",
        "Action" : 10
      },
      "0xf703-0x260000" : {
        "Text" : "[1;6C",
        "Action" : 10
      },
      "0xf700-0x220000" : {
        "Text" : "[1;2A",
        "Action" : 10
      },
      "0xf701-0x280000" : {
        "Text" : "0x1b 0x1b 0x5b 0x42",
        "Action" : 11
      },
      "0x38-0x40000" : {
        "Text" : "0x7f",
        "Action" : 11
      },
      "0x33-0x40000" : {
        "Text" : "0x1b",
        "Action" : 11
      },
      "0xf703-0x220000" : {
        "Text" : "[1;2C",
        "Action" : 10
      },
      "0xf701-0x240000" : {
        "Text" : "[1;5B",
        "Action" : 10
      },
      "0xf70d-0x20000" : {
        "Text" : "[21;2~",
        "Action" : 10
      },
      "0xf702-0x260000" : {
        "Text" : "[1;6D",
        "Action" : 10
      },
      "0xf729-0x40000" : {
        "Text" : "[1;5H",
        "Action" : 10
      },
      "0xf706-0x20000" : {
        "Text" : "[1;2R",
        "Action" : 10
      },
      "0x34-0x40000" : {
        "Text" : "0x1c",
        "Action" : 11
      },
      "0xf700-0x280000" : {
        "Text" : "0x1b 0x1b 0x5b 0x41",
        "Action" : 11
      },
      "0x2d-0x40000" : {
        "Text" : "0x1f",
        "Action" : 11
      },
      "0xf70e-0x20000" : {
        "Text" : "[23;2~",
        "Action" : 10
      },
      "0xf702-0x220000" : {
        "Text" : "[1;2D",
        "Action" : 10
      },
      "0xf703-0x280000" : {
        "Text" : "0x1b 0x1b 0x5b 0x43",
        "Action" : 11
      },
      "0xf700-0x240000" : {
        "Text" : "[1;5A",
        "Action" : 10
      },
      "0xf707-0x20000" : {
        "Text" : "[1;2S",
        "Action" : 10
      },
      "0xf70a-0x20000" : {
        "Text" : "[18;2~",
        "Action" : 10
      },
      "0x35-0x40000" : {
        "Text" : "0x1d",
        "Action" : 11
      },
      "0xf70f-0x20000" : {
        "Text" : "[24;2~",
        "Action" : 10
      },
      "0xf703-0x240000" : {
        "Text" : "[1;5C",
        "Action" : 10
      },
      "0xf701-0x260000" : {
        "Text" : "[1;6B",
        "Action" : 10
      },
      "0xf702-0x280000" : {
        "Text" : "0x1b 0x1b 0x5b 0x44",
        "Action" : 11
      },
      "0xf72b-0x20000" : {
        "Text" : "[1;2F",
        "Action" : 10
      },
      "0x36-0x40000" : {
        "Text" : "0x1e",
        "Action" : 11
      },
      "0xf708-0x20000" : {
        "Text" : "[15;2~",
        "Action" : 10
      },
      "0xf701-0x220000" : {
        "Text" : "[1;2B",
        "Action" : 10
      },
      "0xf70b-0x20000" : {
        "Text" : "[19;2~",
        "Action" : 10
      },
      "0xf702-0x240000" : {
        "Text" : "[1;5D",
        "Action" : 10
      },
      "0xf704-0x20000" : {
        "Text" : "[1;2P",
        "Action" : 10
      }
    },
    "Ansi 14 Color" : {
      "Red Component" : 0.37597531080245972,
      "Color Space" : "sRGB",
      "Blue Component" : 1,
      "Alpha Component" : 1,
      "Green Component" : 0.99263292551040649
    },
    "Ansi 2 Color" : {
      "Red Component" : 0,
      "Color Space" : "sRGB",
      "Blue Component" : 0,
      "Alpha Component" : 1,
      "Green Component" : 0.7607843279838562
    },
    "Send Code When Idle" : false,
    "ASCII Anti Aliased" : true,
    "Tags" : [
  
    ],
    "Ansi 9 Color" : {
      "Red Component" : 0.8659515380859375,
      "Color Space" : "sRGB",
      "Blue Component" : 0.45833224058151245,
      "Alpha Component" : 1,
      "Green Component" : 0.47524076700210571
    },
    "Use Bold Font" : true,
    "Silence Bell" : true,
    "Ansi 12 Color" : {
      "Red Component" : 0.65349078178405762,
      "Color Space" : "sRGB",
      "Blue Component" : 0.9485321044921875,
      "Alpha Component" : 1,
      "Green Component" : 0.67044717073440552
    },
    "Window Type" : 0,
    "Use Bright Bold" : false,
    "Cursor Text Color" : {
      "Red Component" : 0,
      "Color Space" : "sRGB",
      "Blue Component" : 0,
      "Alpha Component" : 1,
      "Green Component" : 0
    },
    "Default Bookmark" : "No",
    "Cursor Color" : {
      "Red Component" : 0.99997633695602417,
      "Color Space" : "sRGB",
      "Blue Component" : 0.99998724460601807,
      "Alpha Component" : 1,
      "Green Component" : 1
    },
    "Ansi 1 Color" : {
      "Red Component" : 0.7074432373046875,
      "Color Space" : "sRGB",
      "Blue Component" : 0.16300037503242493,
      "Alpha Component" : 1,
      "Green Component" : 0.23660069704055786
    },
    "Name" : "Dark Theme",
    "Blinking Cursor" : false,
    "Idle Code" : 0,
    "Ansi 10 Color" : {
      "Red Component" : 0.3450070321559906,
      "Color Space" : "sRGB",
      "Blue Component" : 0.56541937589645386,
      "Alpha Component" : 1,
      "Green Component" : 0.9042816162109375
    },
    "Ansi 8 Color" : {
      "Red Component" : 0.40781760215759277,
      "Color Space" : "sRGB",
      "Blue Component" : 0.4078223705291748,
      "Alpha Component" : 1,
      "Green Component" : 0.40782788395881653
    },
    "Badge Color" : {
      "Red Component" : 1,
      "Color Space" : "sRGB",
      "Blue Component" : 1,
      "Alpha Component" : 0.5,
      "Green Component" : 1
    },
    "Smart Cursor Color" : true,
    "Ambiguous Double Width" : false,
    "Ansi 0 Color" : {
      "Red Component" : 0.078431375324726105,
      "Color Space" : "sRGB",
      "Blue Component" : 0.11764705926179886,
      "Alpha Component" : 1,
      "Green Component" : 0.098039217293262482
    },
    "Blur" : false,
    "Vertical Spacing" : 1.02,
    "Normal Font" : "Monaco 13",
    "Use Underline Color" : false,
    "Ansi 7 Color" : {
      "Red Component" : 0.7810397744178772,
      "Color Space" : "sRGB",
      "Blue Component" : 0.78104829788208008,
      "Alpha Component" : 1,
      "Green Component" : 0.78105825185775757
    },
    "Command" : "exportPS1=\"\\W\\$\";clear;",
    "Terminal Type" : "xterm-256color",
    "Horizontal Spacing" : 1,
    "Reduce Flicker" : true,
    "Option Key Sends" : 0,
    "Only The Default BG Color Uses Transparency" : true,
    "Blink Allowed" : true,
    "Minimum Contrast" : 0.38586231738845739,
    "Ansi 15 Color" : {
      "Red Component" : 0.99999600648880005,
      "Color Space" : "sRGB",
      "Blue Component" : 1,
      "Alpha Component" : 1,
      "Green Component" : 1
    },
    "Ansi 6 Color" : {
      "Red Component" : 0,
      "Color Space" : "sRGB",
      "Blue Component" : 0.78166204690933228,
      "Alpha Component" : 1,
      "Green Component" : 0.77425903081893921
    },
    "Transparency" : 0.1495785742690883,
    "Initial Text" : "",
    "Background Color" : {
      "Red Component" : 0.0806884765625,
      "Color Space" : "sRGB",
      "Blue Component" : 0.12103271484375,
      "Alpha Component" : 1,
      "Green Component" : 0.099111050367355347
    },
    "Screen" : -1,
    "Initial Use Transparency" : true,
    "Bound Hosts" : [
  
    ],
    "Non Ascii Font" : "Menlo-Regular 11",
    "Ansi 13 Color" : {
      "Red Component" : 0.8821563720703125,
      "Color Space" : "sRGB",
      "Blue Component" : 0.8821563720703125,
      "Alpha Component" : 1,
      "Green Component" : 0.4927266538143158
    },
    "Use Tab Color" : false,
    "Columns" : 100,
    "Visual Bell" : true,
    "Custom Directory" : "Yes",
    "Ansi 5 Color" : {
      "Red Component" : 0.752197265625,
      "Color Space" : "sRGB",
      "Blue Component" : 0.74494361877441406,
      "Alpha Component" : 1,
      "Green Component" : 0.24931684136390686
    }
  }
  
  

• Postman

  Postman is a collaboration platform for API development that will make it very easy for you as a developer to create, test, share and document APIs. The Users are able to create and save simple and complex HTTP/s requests and read their responses. The steps of the API lifecycle get simplified by Postman and it allows you to create better APIs faster.

  Postman provides you with API tools, an API Repository, Workspaces and Intelligence.

  

• Firefox

  You have likely heard of this Browser before, but you may not know why it is very useful for developers.

  Firefox offers a very reliable performance, even with many tabs open.

  It is opensource and is the best-secured browser to date by looking for Data breaches and blocking trackers automatically.

  This browser also offers a variety of tools for developers. To open the Core Tools, you select Tools > Web Developer > Web Developer Tools from the menu. You can also use the Shortcut CTRL + Shift + I or F12 on Windows and Linux, and Cmd + Opt + I on macOS.

  You will find tools like the Page Inspector, Web Console, JavaScript Debugger, Network Monitor, Performance Tools and many more.

  I especially like the CSS inspection in Firefox when working with svg and polygon elements. It makes the experience a lot easier and much more intuitive.

  Page Inspector

  

  Web Console

  

  Javascript Debugger

  

• Onetab

  Whether you’ve been a developer for years or you’re just starting out, you likely know the problem of having 500 different tabs open with things you might need in the future.

  Onetab is a great option to save up to 95% of memory and reduce tab clutter. Once installed, you simply click the OneTab Icon to convert all of your tabs into a list.

  Before: 1981 MB memory used

  After: only 99 MB memory used

  95%

  memory reduction

  Add OneTab now

  No signup or registration required

• ES Lint

  This is a static code analysis tool to identify problematic patterns in your JavaScript Code. The rules in ESLint are configurable and you can define and load your customized rules. The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally, do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

  On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.

  

  You can find more information by following this excellent guide here

• Bonus - Framework

  • Oh-My-Zsh

    Oh My Zsh is an open source, community-driven framework for managing your Zsh configuration.

    

    My macbook installation came with Zsh out of the box and I gave this a shot. Since then,I've grown accustomed to this set up. It works super well for me and I recommend this example configuration at your root directory. Feel free to choose a theme that works best for you and further customize it!

    # If you come from bash you might have to change your $PATH.
    # export PATH=$HOME/bin:/usr/local/bin:$PATH
    
    # Path to your oh-my-zsh installation.
    export ZSH="/Users/your-user-goes-here/.oh-my-zsh"
    
    # Disabled permission error
    ZSH_DISABLE_COMPFIX=true
    
    # Set name of the theme to load --- if set to "random", it will
    # load a random theme each time oh-my-zsh is loaded, in which case,
    # to know which specific one was loaded, run: echo $RANDOM_THEME
    # See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
    ZSH_THEME="cloud"
    
    # Set list of themes to pick from when loading at random
    # Setting this variable when ZSH_THEME=random will cause zsh to load
    # a theme from this variable instead of looking in $ZSH/themes/
    # If set to an empty array, this variable will have no effect.
    # ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )
    
    # Uncomment the following line to use case-sensitive completion.
    # CASE_SENSITIVE="true"

Conclusion

In conclusion.. there are many aspects of being a developer and having a great workflow is one of them. However you decide to configure your editor or your shell integration, there is always room for creativity! Be sure to check out any articles below on other topics that might interest you.