Intro

This article will go through some helpful tools that are used in web development. The tools/software in this section are what we will be using in this tutorial.

Command Line

We will be using the operating system Ubuntu 18.04 to create the project. You can open up the command line by pressing ctrl + alt + t. This is where you issue commands to the computer to do things. You can search online for interactive linux tutorials to learn more about using the command line.

Virtual Machines

Virtual machines can help you run the different operating systems if you do not want to buy a new machine or reformat your computer. It is also good to test out server related functions in an isolated environment later on in the tutorial. If something happens to go wrong and it breaks, your actual machine should still be fine and you can just create another virtual machine to start over.

These two virtual machines below are ones that I have used to develop on:

VMware: Pretty straightforward to use and the free version includes all the basic functions needed to start web development.

VirtualBox: The free version has the ability to create snapshots/backups of the state of the machine, incase anything were to go wrong.

Browser developer tools

For Chrome, you can access this by pressing F12 or going into … > More Tools > Developer Tools

The tabs you will likely use the most for troubleshooting will be Console and Network. The console tab shows errors or important messages when the page is loaded. You can also run JavaScript on it to interact with the page. The network tab can also show some errors and check responses from the server.

Integrated Development Environment (IDE) and text editors

IDEs can help check the syntax for programming languages. They can also auto-complete certain keywords and generate commonly used functions. Most IDEs out there are very powerful and can help speed up the development process by a lot. However, in this tutorial we will be using normal text editors to build the program. Being too reliant on IDEs for checking errors or auto-generating code might build some bad habbits, so I tend to use text editors where possible. They are usually more light-weight so you can start programming on any old machine pretty fast. It’s also helpful to know how to use editors like Vim when editing on a server without a graphic interface.

Here are some good text editors to use (there are a lot of them out there, but these are the one’s I have used and liked so far):

– Sublime Text

– Atom

– Vim

– Nano

Note:

Vim and Nano are text editors used in the command line. You can install it by typing in the terminal

sudo apt install vim

Then open up a new file by typing

vim yourfile.txt

Once you are in text editing mode, press esc, then a to start inserting words. If you want to quit without saving, press esc then type :q! and press enter. If you want to exit and save, press esc then type :wq

If you get trapped in Vim and can’t figure out how to exit, you can restart your machine and start with using Nano instead. The commands are right on the screen so it’s more straightforward for beginners.

Version Control: Git

You can install Git by typing in sudo apt install git

Git is a tool that helps keep track of changes you make to your code. It essentially helps you save drafts of your code, so that if you mess up, you can revert back to an old working version of the code. Before learning about Git, I used to copy my entire source code folder to make a backup, and name it something like code_backup_20180910 to keep track of the different version of my program. This can take a while and get pretty messy. With Git, whenever you get to a checkpoint in the project where you are happy with saving (maybe you finished a feature), you can just type git add . then git commit -m “Enter here a short description of the draft or changes that you made” then git push

Those three commands above will be the majority of commands that you will use in the beginning. After that, you will eventually learn how to put code into different branches and organize your progress/features for team development. I will leave it up to you to Google what each of those commands actually do.

Other Tools

Here are some other useful tools that you may want to look into:

Fiddler is similar to the Network tab for the browser developer tools, but can show things in more detail.

Postman helps test out RESTful functions. More on RESTful topics later.

Jing is a great free program for capturing screenshots. Screenshots can help a lot when clarifying things over the internet.

PGAdmin can help view Postgresql databases in a graphical interface. Most databases have a program that can help view things in a GUI.

You may not need the below tools for personal development, but most tech companies nowadays seem to use these so it is good to know they exist so you can read up on them:

JIRA and Redmine – Helps keep track of tasks, bugs, and improvement requests. People can easily log bug reports or see what they need to do for the day. (Redmine is open source and free).

Splunk – Indexes your data and provides search utilities for it. When indexing log files, it can help troubleshoot server issues. (Free)

Jenkins and Travis CI – For continuous integration. Essentially makes sure your application passes its tests whenever someone pushes a changes. (Travis CI is free, Jenkins is free, but need your own server).

Codecov – Helps keep track of how much of the code is covered by tests. (Free)

BitBucket – Version control like Git, but allows for free private repositories. (Free)

Navigation

The next article can be found here. Previous article is here.