This one goes to eleven. This article is intended for those who are interested in becoming a web developer.
I am a generalist, which means I know a little bit about many different things. Being a generalist is helpful in my role at Topcoder, where I atomize my customers' projects into individual contests, then piece those challenges back together as an app. I have compiled this list based on my 15 years as a network engineer and later as a developer. These are the things that I wished someone had told me when I started.
1. Learn some shell basics
This is one tip you should use on day 1 and never give up. Shells are the command line syntax and utilities that Unix, Linux, and now Mac use. Shells come in many flavors but the most common one is Bash (default on Ubuntu (Linux) and Osx.
You may be able to do a couple of language tutorials without knowing much about shell commands but sooner or later it will catch up with you: you will be following a tutorial and it will assume you know how to use shell commands. Here is a short list of things you should know:
1. file basics ls, mkdir, mv, rm and their basic options.
2. pipes ( | ) and redirects ( > ); these are utilities that allow you to feed the output of one command into another (command chaining) and write the output of a command into a file.
3. grep is the file seach utility. Also you will need to learn the basics of regular expression (regex) which allow you to articulate what you are looking for.
4. sed is the streaming editor. Allows you to replace regex in a file.
5. awk is like the command line version of Excel. It allows you to act upon formatted data like CSV and modify it at your will.
You may get by without sed and awk, especially if you choose a good editor, but sooner or later they will become invaluable.
2. Learn Git
Git is the de facto standard for source control and version control for all modern open-source projects. All (yes, I said All) open-source projects are hosted on a cloud Git platform called Github.
You can learn the basics of Git in about a day if you have someone to explain the concepts. If you are on your own, expect to learn the mechanics in a few days but don't get discouraged if it takes weeks or even months for the concepts to sink in. Enterprises (companies) may still use its predecessors like Subversion, or Concurrent Version System (cvs) or even some proprietary systems like StarTeam; however, Git has emerged as the clear victor and will be around for many years to come.
3. Choose both Backend and Frontend languages
This is probably the most important tip in this entire article but maybe we should add the word "primary" to both selections. A backend language is a language that runs on the server typically in the cloud and it contains logic that you don't want to expose to your user, like authentification.
If I were starting now I would consider Angular and React to be the front runners. Each good language has its own package manager that helps you get all the dependencies and you should take some time to learn them.
It is important to point out that whatever frontend or backend language you choose you will also need to learn some of their basic libraries (aka packages). You will use these packages as much as you use the language itself. For example: whatever you choose for your backend you will also need to have some code that reads the URL in the address bar and displays the correct page. This is called a router. If you use NodeJS you will most likely use a package called Express as your router. Express is a package that is written in Node but it has a specific job to route URLs to parts on a page. Sometimes we refere to these as "views" or "partials".
5. Learn how to use Browser Development tools (Chrome)
Firefox was the first browser to release a very comprehensive debugger called Firebug which allowed developers to really understand what the front code was doing. All modern browsers now have pretty decent debuggers that can be added as an extension but Chrome's developer tools seem to be the most widely used. Investing time in learning these tools will save you from pulling out all your hair.
6. Learn the basics of both SQL and NoSQL queries
If you are building a web app, most likely your data will be stored in a database and your backend code will call that database to get what the user needs. The good news is you don't have to be an expert in these databases anymore to use them because you will most likely use a package that will do all the heavy lifting but you will still need to understand the basics of how your data was stored.
Prior to the early 2000s when someone said "database" they meant a relational database. RDBMS (relational database management systems) store their data in structured tables with column names just like an Excel worksheet. In the last decade, a new type of unstructured database has emerged called NoSQL.
The information a key represents is called a value. Unlike RDMS, key value pairs can be nested infinitely deep. The table equivalent in NoSQL is called a collection NoSQL databases store their data in a format (JSON) that can be easily digestible by the web. For this reason I would recommend that a new developer learn the basics of NoSQL first and if they need to learn RDMS, then so be it.
Any modern web app uses several technologies of which each does its own specific job. We have already talked about frontend and backend languages and when we talk about all the technologies used for an app we call it a "stack". One very popular stack these days is called MEAN which stands for Mongodb (a NoSQL database) Express (the router for NodeJs we mentioned earlier) AngularJs and NodeJs. If you read this article 10 years ago we would talk about the LAMP stack - Linux, Apache, MySQL, and PHP.
There are many types of NoSQL databases and some are very good at specialized tasks. For example, Redis is very good at caching data and retrieving it quickly. However, Mongodb or Couchdb are very popular general-purpose NoSQL databases that would be a good choice to start with.
7. Pick an IDE
An IDE (Integrated Development Environment) is simply a text editor that is designed for developers. It typically allows you to group your code together and display all the files in a left tree panel. But it also comes equipped with a rich ecosystem of plugins that are frankly game changers.
For example, one common plugin is called code complete.
If you write a function in one part of your code and then you need to call in a popup, all the functions will appear and it will show you all of the parameters you need to use that function. Some old-school hardcore programmers will tell you they still use a commmand line editor called vi, but the modern plugins for all the IDEs make them a better choice than vi. Save vi for quick edits.
Eclipse was one of the most popular editors in the last 10 years but it is quickly being replaced by Sublime Text3, Atom, and Webstorm. This author has switched from Sublime Text to Atom in the last year and is very happy. You should invest some serious time in learning as many of the features of your IDE as you can. It will only make your coding more efficent.
8. Learn to use a jslinter (jshint)
9. Learn jQuery
For example, if you had an address form in your app and the user picked 'United States' as their country then they were presented with a dropdown list of all the States in the US. The logic to show or hide the state dropdown list would be handled by jQuery. It should be noted that some frontend languages like AngularJS can abstract jQuery for you and allow you to use it at a higher level, but behind the scenes it is using jQuery. It important to understand all that you can and cannot do with jQuery. Set aside a day to go through the api doc.
10. Learn how to use cURL and HTTP calls
Modern web apps use a technique called REST (Representational State Transfer) to obtain and place data from the server to the client. REST is architecture that uses GET / PUT / POST / UPDATE and DELETE which map to the CRUD (Create, Read, Update and Delete) convention. It uses a simple URL address to create a comprehensive app. For example, if you had a simple blog app you might have a server call
http://myapp.com/articles which would return a list of all articles. When a user clicks on the one they want to view, which is stored in the database with id 123, they might click a link
http://myapp.com/articles/123 and the detail of that article will be returned.
Prior to REST's popularity, SOAP (Simple Object Access Protocol) was used. SOAP required the client to send a XML payload to the server which had a specific set of instructions based on that payload. It returned another XML payload which the client had to convert and display. SOAP was popular with enterprise Java apps but has seen a heavy decline and is being replaced by REST due to its ease of use, and the rise of the web app over the thin client. Curl is a simple command line tool (see tip 1) that allows you to make an HTTP call and display the results straight to the terminal without using a browser.
11. Write tests first
Almost all languages, if not all, have test libraries that complement the language itself. The most competent developers I have met tend to write test before they code. They write a test which will fail at first and as they write their code the test will pass. This may seem like a lot of work up front, but it helps you learn to be a better coder and also prevents you from breaking code that has already worked.
Runner up: Cloud First
You probably want to code on your local machine and I don't blame you. However, once you get to a point in your app that you want to demonstrate what you have done, you should find a home for it in the cloud. Amazon's AWS, Heroku, Google Cloud Compute, Cloud Foundry, Salesforce.com, Microsoft Azure are just a few of the great cloud PaaS (Platform as a Service) offerings available. Most of these will allow you to deploy a developer version of your app for free. There are also code playgrounds that can host a small chunk of code like Plunker, github.io, CodePen. This is most usefull for sharing small snippets of code when you are looking to get help with debugging.
Often when people get stuck on some code they post the question on stackoverflow.com and typically give a link to a Plunker so people can see the code running in context. If you want to save just a snippet of code for posterity, gist.github.com is a great place for that. Of course you should store all your code in the cloud. Either Github, Gitlab, or Bitbucket all have varying degrees of free hosted code. Github only allows you to have public repos for free; however, bitbucket allows you to have unlimited free private repos but only share with five users, and Gitlab is totally free.
Runner up: Learn Docker
If I wrote this a month ago I would not have included Docker, and I would definitely leave this for last, but simply put, Docker is awesome. It took a while to fully grok the use case but now I am in love with Docker.
If you are familiar with virtual machines like VMware, Fusion, or Virtual Box, then the concept will not be new but Docker has a little twist. The mentioned virtual machines all work on the same premise: find an image, then start using that image and the state will be stored. What most people do is take a snapshot of the image before they start using it. Docker bakes that concept into its DNA and keeps an image and the running instance of an image, called a container, separate.
Instead of finding an image that has everything you want (which you can still do) you can build an image for a recipe called a Dockerfile. A Dockerfile starts with a base image from a repo like Ubuntu 14.04LTS then you specify what packages you want to add. When you have the image built to your liking, you install that image as a container.
It is very slick but plan to spend several days to fully understand the concepts. Docker has a registry of images you can use called Dockerhub or you can commit (yup, Git concept here) a new image to the Dockerhub associated with your free account.
Runner up: Learn Bootstrap
I wrote this article keeping in mind what I wish I had been told when I started programming. Granted, most of those technologies have since changed, but the concepts are still the same. To master these eleven items will take some time, but once you accomplish this you will be on your way to becoming a master nerd and true geek.