Top 11 Things Every Beginning Web Developer Should Know, Part 2

April 8, 2015 Kyle Bowerman

developer

In Part 1 we covered 6 things that beginning web developer should know, in this post we will cover 7 – 11 and a few runners-up.

7. Pick an IDE

An IDE (Integrated Development Environment) is simply a text editor that is designed for developers. They typically allow you to group your code together and display all the files in a left tree panel. But they also come 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 command 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)

Unlike languages like C++ which compile source code into machine language, Javascript is an interrupted language. This means that you can write whatever you want and it might still run. It will only throw an error if it makes a call to the block of code that contains a syntax error.

To solve this, we turn to a tool called a linter. A linter is a piece of code that will check all the syntactical rules of a language and show all the errors or warnings. The lint library for Javascript is called jshint and with Atom and Sublime IDEs you can install it as a plugin. As you are writing code in your IDE you may forget to close a bracket and the line will go red and it will tell you that you forgot to close the bracket.

{<1>}

top11

9. Learn jQuery

If you were stranded on a desert island and could only take one Javascript library you would have to pick jQuery. HTML is broken up nto a hierarchy on the page called the DOM (Dockument Object Model) and jQuery allows you to modify it without having to make a call back to the server. 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 front end 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 Bootstrap

After reading this I determined that I missed one very important tip. As developers we should pride ourselves on laziness. Yes that is right, you should shop for a component before you try to build one. Bootstrap is the defacto standard for web development framework (lower on the stack than Angular). Many of the directives built into AngularJS directly use or are modeled after Bootstrap. You should look for a component here before you attempt to build your own. Of course it has it’s own ecosystems of sub components that are based on its core. Bootstrap comes with a JS lib and it complimentary CSS. You should spend several days on learning as much as you can about Bootstrap.   It will save you vast hours in development time.

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.

Conclusion

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 conepts 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.

Previous Article
Salesforce Admin Hack Series: Activities Object
Salesforce Admin Hack Series: Activities Object

Activities may be the most commonly used object in Salesforce but had yet to be “hacked” up as a part of th...

Next Article
Top 11 things every beginning Web Developer Should Know, Part 1
Top 11 things every beginning Web Developer Should Know, Part 1

This one goes to eleven. This article is intended for those who are interested in becoming a developer. I a...