Rocco Sangellino

Setting up a web development machine

Rocco Sangellino's photo
Rocco Sangellino
·

15 min read

When beginning to code, sometimes it can feel overwhelming to create your ideal setup. When starting your web development journey in HTML, CSS, and JavaScript, it is helpful to have a starting point for getting set up. With so many different languages, programs, and free resources, you often find yourself wondering where is best to start. I've created a list of applications to help you get started in your journey to becoming a programmer. There are many ways to get yourself going, and I encourage you to do your own research to see what works best for you. Here are some great applications to help you get setup and on your way:

Homebrew (available on Mac)

Homebrew is a package manager (see definition below) that allows you to install applications (packages) via the command line. One of the benefits of using a package manager is it allows you to automate your system install. This is helpful when you upgrade to a new computer and aren't restoring from a backup. What might take you hours to setup your system could take minutes with a startup script using a package manager (be on the lookout for a future article breaking down what a startup script would look like). If you are familiar with Linux this is similar to the apt on Debian or pacman on Arch.

A package manager keeps track of what software is installed on your computer, and allows you to easily install new software, upgrade software to newer versions, or remove software that you previously installed. As the name suggests, package managers deal with packages: collections of files that are bundled together and can be installed and removed as a group. - debian.org

NOTE: You don't necessarily need this to be a developer or to get started but it could become beneficial and I recommend installing it.

Installing Homebrew

  • Homebrew
    • I recommend following the instructions in the above link. However, for a quick reference, the below command should install homebrew. Open a terminal and paste the following command - /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)". After running the previous command you may be prompted for further instructions.

Git

Git is a version-control system for tracking changes. Version control is the practice of tracking and managing file changes to your code or assets. Think about it as saving changes to a file in word or google docs, but keeping a record-of who changed the file, when it was changed, and what changes occurred at each save point.

NOTE: Version control is an important concept to understand. You will encounter this on your journey and I recommend installing.

Installing Git

  • git
    • There are a couple different ways to install git depending on your OS. The above link will have a breakdown of Link, Mac, or Windows. Here is a quick reference:
    • Mac
      • Open your terminal and paste git --version. If git isn't installed, it will prompt you with instructions to install.
      • Alternatively if you have homebrew installed you can paste the following command in a terminal brew install git
    • Linux (debian based)
      • First you need to update your packages and then install git. We can do this in one line sudo apt update && sudo apt install git
    • Git for windows

Browser

My browser of choice for development is Google Chrome. I use chrome because I prefer the dev tools over firefox. In my opinion chrome's dev tools are easy to use, has a variety of extensions, and I like the built in feature that allows you to simulate mobile screen sizes. However, firefox is great and I use multiple browsers while developing to test my code and ensure it is working in all browsers.

Installing a browser

Text Editor

There are many editors you can choose from. It will come down to personal preference in which one you choose. My editor of choice is VS Code. It integrates well with many programming languages and has a plethora of extensions to choose from. Below is the link to VS Code along with some alternatives you may like.

NOTE: You can use any text editor to develop. Even a plain editor like notepad. I recommend installing one of the below editors as it will provide additional tooling that will help you develop. Such as syntax highlight, code formatting, debugging tools, and more.

Installing a text editor

VS Code Extensions

NOTE: You don't necessarily need any of the below extensions to develop. For each of the below extensions I explain why I use them and what they are used for. I encourage you to try them and see which ones you prefer.

  • DotENV - This is a nice extension to have because it adds syntax highlighting for .env files rather them appearing as plain text files.
  • ESLint - I use this extension to integrated ESLint into VS Code. This provides immediate feedback into linting errors or warnings as you are coding. If you are unsure what ESLint is below is a description from the ESLint website:

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

  • GitLens - I like this extension because it adds git integration into VS Code. This allows me to quickly see when, why, and who changed a line of code without having to use the command line or another tool.
  • Git History - While GitLens provides me a quick look into changes, Git history allows me to view and search history right form VS Code. This saves me time without having to switch applications to view prior changes.
  • Path Intellisense - I use this extension all the time when importing files. It provides intellisense and autocompletion for filenames.
  • Prettier - Code formatter - I like Prettier because it allows you to define a set of rules for how you want your code formatted. For example, tabs vs paces, semi-colons vs no semi-colons, trailing commas, and a lot more rules. The reason this is valuable is because it keeps your code style consistent and it integrated with ESLint.
  • Vetur - In my opinion this is a must for Vue.js developers. Vetur adds additional tooling like syntax highlighting, linting, snippets, intelliSense, and more to your vue files. You can also enable support for Typescript in your html templates. This is useful for immediate feedback if you have any errors or warnings within your template.
  • Auto Rename Tag - I find this extension useful because I don't have to worry if my HTML tags are mismatched. Once I start to change the HTML tag this extension will automatically rename the closing tag ensuring no mismatches take place.
  • Babel ES6/ES7 - This extension is useful because it adds JS Babel es6/es7 syntax coloring to your JavaScript files.

Terminal

There are a variety of terminal emulators to choose from. I develop on a Mac and my go to terminal is iTerm2. It offers a split pane feature that I like and use all the time. On windows I use cmder and on linux I use terminator.

NOTE: Most computers come with a built in terminal and you don't need to install a different one. I recommend becoming familiar with one as you will be interacting with a terminal when developing.

Installing a terminal

NodeJS

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. If you are on Mac or Linux you may want to install nvm which is a version manager. This allows you to switch between node versions.

NOTE: To be a web developer you don't need node.js. However, when you install node it comes with npm (node package manager, definition below from npmjs). I recommend installing this as you will encounter node.js and npm when learning from tutorials or classes you may take.

npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things.

Installing node.js without nvm

  • node.js - download the LTS version

Installing node.js with nvm

  • node version manager
  • Once you have installed nvm, open a terminal and enter nvm install node "node" is an alias for the latest version
    • If you want to install a specific version of node you can replace node with the version you prefer.

HTTP and REST Client

A HTTP and REST client allows you to send requests, view responses, and debug APIs. Postman and Insomnia both provide nice user interfaces to interact with APIs. I use these daily to ensure the APIs I am using are working as intended.

NOTE: You don't necessarily need to install a HTTP and Rest client to be a web developer. However, as I mentioned this will be beneficial to test APIs you are working with. I recommend installing at least one of the follow.

Installing a HTTP and REST Client

Docker (Optional)

The term docker has become synonymous with the term container. From the Docker website:

A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.

In simplest terms, a container allows you to run your application code segregated from other code on your system. This eliminates the need to install all of the necessary dependencies on your local machine. For example, I use docker to run WordPress without having to install all the dependencies WordPress requires such as apache, php, and MySQL.

NOTE: Docker is not a requirement and not needed to be a web developer. I included docker because it is something I use daily and is popular within the dev community.

Installing docker

Conclusion

There are a lot more tools out there that you will run into. I hope my list gets you started on your development journey. I encourage you to try them out and see what's right for you. I personally use each of these daily and have enjoyed working with them.

Check back soon for more posts where I outline how to break down a project, how to use project management tools, and keeping yourself on task and on target.

Most importantly, I would love to hear feedback on what you found helpful and if there are resources that you think would be helpful and/or could be added. You can leave comments down below or find me on twitter.

JavaScriptHTMLProgramming TipsCSSDeveloper Tools