Things I Wish Someone Had Told Me When I Started Coding (Web Development)

Lukas Sorensen
Aug 31, 2018 · 7 min read

This article is written for people just starting out learning to code. Some of it might be obvious to some.

I am not a Comp Sci major, I don’t have a degree, I just enjoy coding. More specifically, Web Development.

Here is some things I learned after 5 years of learning how to make websites and making mistakes.

1. Javascript is all you need

As far as programming languages go (HTML & CSS are not programming languages), Javascript is the only thing you need to learn for web development. Before things like Nodejs and ExpressJS came along PHP and Ruby were the most popular backend languages. Javascript could not communicate with a server, it was meant only for the browser until Nodejs changed the game allowing you to write JS on the backend! Amazing!

I’m not discounting other languages. Javascript is terrible at dealing with numbers and arithmetic. Python is probably your go to language if you want to try to write a program that analyzes statistics or anything math heavy.

2. Learn the Command Line

Yes, that terminal you open up in MacOSX does more than just play ASCII star wars!

This is something that I didn’t realize how much developers used the command line until I got my first real job as a developer.

First Commands

cd = change directory, ls = list, mkdir = make directory

$ cd Desktop
$ mkdir new-folder
$ ls

The above commands switches to the Desktop folder, creates a new directory called “new-folder” and then lists all the files and directories in the directory, ~/Desktop

What do I use the Command line for?

Mainly NPM and Git, but once you start to dive deep into what the command line can do you will soon realize it’s potential.

NPM

NPM stands for Node Package Manager. What is it? Simply put, It downloads and installs bits of javascript code you can then use in your projects. It’s similar to using JQuery libraries, but instead of having to put the link to the CDN in the header like

<link href=”https://vjs.zencdn.net/7.1.0/video-js.css" rel=”stylesheet”>

NPM defines a file calledpackage.json which tells NPM which packages to install. An example package.json looks like this:

{
"name": "example-package-json",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.3",
"http": "0.0.0",
"mongoose": "^5.1.6",
"path": "^0.12.7",
"socket.io": "^2.1.1",
"socket.io-p2p-server": "^1.2.0"
}
}

NPM will create a package.json file for you, but first will will have to install NodeJS. If you’re on mac you can download Homebrew which manages packages for MacOS, like NPM does for Javascript. Homebrew makes things like uninstalling and updating much easier.

To install Homebrew copy and paste the command below into your command line.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

After Homebrew is finished installing, you can install NodeJS by typing

brew install node

If you’re not on mac you can alternatively go to https://www.nodejs.org/, click the download button and follow the installation instructions.

Once NodeJS is installed you can test that it was installed properly by typing node -v into the command line, and if you get a version back and not “command not recognized” it’s working!

There are many more tutorials on NodeJS and NPM, so I won’t go any further in detail on the topic.

Here is a great article on how to create a simple ‘hello world’ app with nodejs and express that goes into more detail on how to use nodejs — https://medium.com/@adnanrahic/hello-world-app-with-node-js-and-express-c1eb7cfa8a30

NOTE: npm packages are extremely useful, but should be used with caution. Anytime you install an npm package to your project you are putting SOMEONE ELSE’S code into your own, and just because it seems legit doesn’t mean it is. Try to stick to packages you can trust and many other people trust. here is a great scare story about npm packages that is worth a read: https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5

GIT

Git is a command line interface for the ever popular, now owned by Microsoft, code collaborating platform, GitHub. With Github you can manage the state of your project by ‘committing’ your code when you make changes to it, and Github records exactly what was added and what was deleted. Accidentally remove something you thought was useless, but turns out to be vital to your project? No problem, just revert your project back to the commit you removed it in, and you’ve gotten it back.

Another great feature of GitHub is “branches”. With branches you can create a copy of the project (which is a ‘branch’), and work on a new feature until you are confident the code works, at which point you ‘merge’ it back into the project’s master branch.

If someone else happened to work on the same bit of code you had, GitHub will notify you of ‘merge conflicts’ in which you then decide who’s code to keep and finish the merge. This is especially useful when working on open source projects because it allows for the project’s Leader to review code that is requested to be merged into the master branch and decide whether the code is ready or needs revisions.

Git flow — dealing with version control in collaborative projects
example of callback HELL

4. Asynchronous Calls

When Javascript runs its code it runs each event one after another. Once it completes an event, it moves to the next. So, what happens you have to wait an undetermined amount of time for a function to return data, such as a call to the backend server api? This is were Asynchronous callbacks come in handy.

Before Async operations programmers typically used callback functions. A callback function is simply a function that runs after a another function finishes. The problem was is that functions would just have to nested inside one another creating very messy code. It wasn’t until Asynchronous calls swooped in and saved us all from the ‘callback hell’ (see example photo above).

One of the most popular Javascript Async library would be Bluebird’s Promise. here is an example of how a Promise works.

var promise1 = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve('foo');
}, 100);
});
promise1.then(result => {
console.log(result); // expected result: 'foo'
});

In the above code you create the promise first called ‘promise1’ then you execute the promise1 with the .then() function that runs when promise1 is resolved. In the above case, promise1 would take exactly 100 ms and then console the result, ‘foo’.

here is a longer article on the subject if you are interested in learning more about promises: https://medium.com/quick-code/javascript-promises-in-twenty-minutes-3aac5b65b887

5. A longer name is better than one you won’t remember or won’t know what is for

Be careful on what you name your classes, functions, variables etc. It might save you hours in the future. For example, let’s say you are writing a function that gets all payment receipts of a particular user. You could just say getReceipts(id) , but it doesn’t say what the receipts are for. Are we getting all the receipts in the database or just some? a better alternative would be getPaymentReceiptsForUser(userId) . Now I know which receipts I am getting and that I am only getting receipts for a particular user. I also know that userId is what I need to pass into the function to get the receipts.

6. Don’t Repeat Yourself, but also don’t waste too much time

You’ve probably heard before that less code is better and to not repeat yourself (DRY) which is true. Some people might disagree with me here, but if refactoring your code to be less code is taking longer than it took to write the working code in the first place its okay to move on. If copy pasting some code a editing a few values takes 10x less than trying to create a reusable module, just copy and paste, and move on. I’m sure your boss will be happy you finished the feature and are working something else and not care that it wasn’t as DRY as it could possibly be. The same goes for naming, try to come up with a good name if you can, but at some point it’s better to just decide and move on. (fight me)

7. Know what you don’t know

This is my last tip for you up and coming web developers. Be ready for things to break. Be ready for your security to be duped. Expect the unexpected. Just because something is popular doesn’t mean it is good. Don’t take StackOverflow as the word of the lord. Make your own decisions, there will always be people telling you what you are doing is wrong, and they may be right; figure that out for yourself and learn from your mistakes.

Thanks, hope you learned something useful. Have fun Coding!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade