Getting Started with Web Development Tools

So I hear you want to be a web developer. You’ve come to the right place to get a head start. In this post I will outline what you need to learn to kick start your journey for the next BIG thing. This by no means is exhaustive of all you need to develop a web app. I will not cover any frameworks or technologies used for the app. This is strictly developer tools.

One quick thing before I get to the details. Everything I’m covering here is free to use & I derive no income from the links I post. There are paid tiers for hosting, but you don’t need to pay for a host until you’re ready to go public with your idea.

Now, as my infamous Intro to Algorithm Design professor said, “Let’s get start.”

Here are what we’re going to cover:

  • Integrated Development Environment (Text Editor)
  • Version Control System
  • Continuous Integration / Continuous Delivery
  • Hosting

Integrated Development Environment (IDE)

Since you will be working with text the first thing you will need is a text editor. My favorite is Visual Studio Code (VS Code). This tool is free, open source, has git integrated, many many plugins are available, a built in debugger, and it is easy to use.

Other editors exist but I stick to VS Code. I have heard goo things about Atom. I do not have any experience with Atom, but I do know that git is baked in.

Version Control System (VCS)

A VCS is a system used to store and backup your code. It tracks changes and allows you to easily revert any breaking code changes you made. Changes are stored as commits. A commit is simply a group of changes in any number of files. Say you find a bug in your code that you accidentally introduced a couple days ago. Working with a VCS you will be able to identify when you broke it and easily fix it.

The most popular VCS by far is git. From here on out when I say git I am referring to your VCS. There are two great options for hosted git repositories: GitHub and GitLab. Both of these offer CI/CD which I cover in the next section. To access your git repo you will need an application. Personally I like Fork because it makes following the git flow workflow easy. If you decide to use GitHub they have a desktop tool available that easily plugs into your GitHub repos.

Tip: Commit often and be descriptive without writing a book in the commit comments.

Resources:

Continuous Integration / Continuous Delivery

These are actually two separate categories, but I’m going to tie them into one section as they both go together like sugar & spice.

Continuous Integration (CI) is the process of a system automatically building and run unit tests for your application when new code is committed to your git repo. What’s good about this is that you and your team can make code changes and once committed will automatically know if there are any breaking changes or bugs. Of course, unit testing should be done locally before pushing to git, but it’s an easy step to skip when you’re pounding out code. CI processes can be used to automatically kick off a Continuous Deliver process.

Continuous Delivery (CD) is the process of a system automatically publishing your app when code changes are pushed to your git repo. As part of the CI/CD process, if the CI fails in any way, including unit tests, CD will not be performed. Including unit tests in your CI will help ensure there are no bugs in production given your unit tests are correct.

The combination of or even using only one of these takes the leg work out of the deployment workflow. I recommend integrating CI/CD wherever possible. GitHub has CI/CD baked in, but I have had great success with Circle CI. Circle CI hooks into GitHub so when you push a commit to GitHub a build will kick off in Circle CI.

Tip: the only way to ensure there are no bugs is to write no code. Don’t beat yourself up if a bug slips through.

Hosting

Hosting is how you make your app available to the world. Once you’ve got the app published to a host it is available for the world to use. There are literally thousands of web hosts available. One personal favorite for anything not .NET is Heroku. With a free account, you can get up to 1,100 dyno hours. Think of a dyno as an app. 1,100 / 24hrs = 45.8 days. This basically equates to one free hosted app forever, or at least until their pricing model changes.

Another option if you have a .NET app is GearHost. This is currently where I host this WordPress blog. On top of web hosting, they also offer database hosting. Like every other host, there are free tiers and paid tiers. The tier you need is determined by host popular your app is.

Note: Heroku has a number of getting started tutorials to introduce you to programming languages and Heroku hosting.

Pull it All Together

One app I have personally used all that is mentioned here was a trading bot written in Python. I used VS Code for programming, debugging, & unit test running, GitHub for git VCS, Circle CI for CI/CD, and Heroku for hosting. I made code changes in VS Code, committed the code to GitHub, Circle CI kicked off a build running the unit tests and if the unit tests pass the app is automatically published on Heroku.

Tip: you can use web hooks to integrate notifications into Discord from both GitHub and Heroku. You’ll notifications on new commits and the status of CI/CD.

Bonus: Unit Testing

I mentioned unit tests a few times in this post. I don’t want you to walk away from this with more questions than you when you got here. Here’s the Wiki article for Unit Testing.

Unit Testing is important because software developers sometimes try saving time doing minimal unit testing and this is myth because inappropriate unit testing leads to high cost Defect fixing during System TestingIntegration Testing and even Beta Testing after application is built. If proper unit testing is done in early development, then it saves time and money in the end.

Unit Testing Tutorial: What is, Types, Tools & Test EXAMPLE

I truly hope this helps you jump start into web development. There are countless tutorials that walk through different technologies and how to build an app. Perform an internet search and get to developing. Have a great day 😀.

Leave a comment

Your email address will not be published. Required fields are marked *