Your missing technical knowledge to be a web developer in 2021
By: Reza Lavarian
Tags: Frontend Development, Web Development, Backend Development, Learning And Development, Web Development Roadmap

Your missing technical knowledge to be a web developer in 2021 Reza Lavarian Feb 22·58 min read

Web development refers to the works done to build web-based information systems, such as websites or web apps.

If you’re reading this guide, then, I assume you’re considering web development as a career, or you’re just curious what this complicated-looking term is all about.

In either case, this one-pager guide helps you decode it all.

The web is overflowing with educational materials, but which one is worth your time and your money?

The purpose of this guide is to help you see these unfamiliar bits and pieces the way a chess master sees the chessboard.

Then, you can make your move.

This guide is a very long post. If you wish to save your progress while reading through the article, I suggest you read it from my website 🔖 SkillUpp.

To boost your motivation, let’s start with a few reasons to be a web developer in 2021.

Demand is booming for web developers

Web development is quite 🔥 these days, and it seems it will be for a long time.

You can see the growing lists of open positions across various job boards, awaiting talented web professionals like the future you to take them.

At the same time, the gap between market demand and the availability of qualified candidates is widening.

That’s a big challenge for recruiters and hiring companies.

Based on the Bureau of Laber Statistics, the web developer job market is experiencing a 9% growth between 2019 and 2029.

If you’re curious about the average growth rate for other professions, it is 5%!

Decent salary

According to Glassdoor, the average base pay of a full-time backend developer in the United States is $101,619 a year; It can go up to $160k a year, depending on your role and experience.

Also, the average salary of a full-time front-end developer is $76,929 a year in the United States, which goes up to $131K a year.

Web developer salaries might differ based on specialty (e.g., front-end or back-end roles), responsibility, experience, and geographical location.

To get more information on salaries, you may have a look at Glassdoor’s Salary page.

You can work remotely

Technically, a web developer can work from anywhere 🏝️ — as long as she has access to the internet.

When Covid-19 hit the world at the beginning of 2020, many tech companies, including Twitter, Square, Facebook (and many more) announced their employees could work from home for as long as they want.

You can bring your own ideas to life

Even if you don’t want to be a full-time employee or a freelancer, you can always bring your own ideas to life.

Many people have interesting ideas but never got the chance to make them happen, because either they couldn’t do it themselves, or couldn’t find a partner to start with.

You don’t need a university degree

Having a Bachelor’s degree is becoming a “preferred” qualification by many reputable employers, and no longer a requirement.

The web industry is evolving outside of the academic space; It’s happening in startups, high-tech companies, and open-source communities.

Apart from that, universities aren’t technically able to update their subjects with cutting-edge technologies (probably owing to their internal bureaucracy).

That’s one of the reasons universities are becoming interested in offering courses online on educational platforms, such as Coursera.

When you apply for a web developer role, related experience or an online portfolio is an acceptable equivalent of a university degree.

That said, in an interview (especially if you’ve made it to the technical round), what you have to say prevails your paper qualifications.

How long does it take to become a web developer?

There’s no finish line in software development; it’s about using all you know smartly and staying up to date.

Nobody is expected to know everything, and nobody does anyway.

Plus, You don’t have to master every feature of a tool to use it. Things you don’t use, you’ll likely forget, so just invest time in learning what’s relevant right now.

If you learn the fundamental concepts of technology and you know where to look for details, you’ve learned it all.

Do you still need some numbers?

Well, you can make a simple but fully functional web-based software after a month.

The question is, how much you’re thirsty to learn.

How you should read this guide

This guide consist of 8 sections:

ON THIS SECTION

First Things First: Establish a foundation Pick a side: front end or back end? Front-end development Back-end development Things front-end & back-end Developers should know On job titles Wrapping up

Topics that I cover in this guide follow a similar structure. I start with an overview and gradually get technical to improve your tech vocabulary.

Some topics will have code samples to help you understand them better. However, you don’t have to worry if you don’t understand them. It’s not a coding tutorial after all 🙂

After explaining each topic, I suggest a learning path to study further on the subject.

First things first: establish a foundation

The first step in learning anything is to learn about the fundamental concepts around it.

Don’t feel uncomfortable asking even the most basic questions; even if you think it’s dumb, it counts.

Every question is an opportunity to learn something new, and if you take it, you’ll get yourself a solid foundation.

But if you ignore it, you’ll deprive yourself of a piece of knowledge that could be a game-changer at some point.

That said, it totally makes sense to ask questions like:

How does the Internet work?

What’s the web?

What is HTTP ?

? If that’s HTTP, then what’s HTTPS ?

? What’s the difference between a website and a web application?

If you think you need to know them, do hesitate to look them up.

The Mozilla Corporation is a wholly-owned subsidiary of the Mozilla Foundation that coordinates and integrates the development of Internet-related applications such as the Firefox web browser has a Web Glossary you can use as a reference to lookup tech jargon.

To get you warmed up, I’ll start with two important concepts you need to know as a web developer.

What is the client-server model?

Everything on Internet works based on a client-server model.

This means:

Any computer or device (the client) can use the services or resources offered by another computer (the server).

Technically, any computer can be a server as long as it is configured to be one (and it has something to offer).

However, servers are supposed to be more powerful and reliable than personal computers, in terms of computing power, storage capacity, and installed software stack.

What is a client application?

We (the clients) usually use the services of a server via special applications.

We call these applications client applications.

Client applications serve a specific purpose; from browsing the web, like Firefox or Chrome, to connecting communities via a messaging platform, like WhatsApp.

In the client-server model, the terms client and client application are used interchangeably.

Client applications and servers interact by using communication protocols. A protocol is a set of rules that describe how to systems should communicate with each other.

For example, a web browser uses HTTP (Hypertext Transfer Protocol) to request a web page from a web server (a server the hosts & serves a website).

Read our Beginner’s guide on the basics of computing, the Internet, and the Web to learn more about the fundamentals of the Web and the Internet.

Pick a side: front end or back end?

There are two main specialties in web development: front-end development and back-end development, and needless to say, people doing each, are called Front-end Developers and Back-end Developers respectively.

The front end and back end are the two essential elements of any web-based system (websites or web applications).

It’s an “it takes two to tango” situation; One can’t be useful without the other.

Front-end development is about building visual elements on a web page people can see and interact with, while the back end’s job is to store, process, and provide data that the front end needs.

On the other hand, The front end receives unformatted data provided by the back end and displays it in a formatted, structured, and intractable way.

Typically, you choose one specialty as your primary expertise. However, when you pick one, it’s good to know a bit about the other one too.

Which One To Choose?

It’s totally up to you!

It depends on whether you prefer to work on the user-facing end of a web-based system, or the data layer end.

Front-end development

Front-end development refers to building the user-facing end of a website or web app.

Headings, paragraphs, bullet lists, images, form fields, buttons, popups, navigations, animations, and every interactable element on a web page is the work of a front-end developer.

ON THIS SECTION

Your responsibilities as a front-end developer Skills you need, to get started Skills you need, to become a pro

The front end is also called the client-side because every asset that you create is first downloaded to the user’s computer (by the web browser), and rendered by the web browser’s layout engine.

The layout engine, a.k.a browser engine is a component embedded in every web browser, which is responsible for rendering the visual representation of a web page.

Your responsibilities as a front-end developer

As a front-end developer, you’ll be working with UIUIUser interface design is the design of graphical user interfaces for computer applications. and UXUXUser experience design is the process of supporting user behavior through usability, usefulness, and desirability provided in the interaction with a product. designers or directly with clients as a freelancer or agency.

You’ll be the one who turns the fresh designs of a UI designer into web pages (with HTML & CSS) and breathe life into them with your mind-blowing front-end development skills.

To give you a clear overview of the responsibilities of a front-end developer, I’ve taken out a piece of a real job description from LinkedIn:

Your Responsibilities

Collaborate closely with UI designers with a focus on new feature design and prototyping Be involved in the UX design process, from wireframes and mockups through implementation and release We have an emphasis on software quality and writing maintainable code, using TDD, and Continuous Integration and Delivery Our technology stack is based predominantly on JavaScript, using React and React Native

Don’t mind the technical jargon for now; we’ll get to those soon.

This list indicates:

Being a team player is important to them You need to work responsibly to deliver high quality and maintainable code You need to be familiar with their technology stack and adapted practices

And if we turn them into skills:

Teamwork Work quality Knowing their tech stack, or being able to pick them up real quick

Although not all job descriptions are the same, they follow a similar pattern; starting with soft skills, emphasizing the importance of quality, and their preferred technology stack.

Now, let’s see what technical skills you need to land such a job.

Front-end skills to get started

In the next few sections, I’ll cover the most essential technologies and concepts you need to know to introduce yourself as a front-end developer.

Let’s skill up!

HTML (HyperText Markup Language)

HTML is the base technology behind any web page; That’s why website pages are also called HTML pages.

HTML describes the content on a web page via a set of special annotations called HTML tags.

For every element on a web page (like headings, paragraphs, buttons, links, there’s) an HTML tag.

HTML gives meaning to the content on a web page, so the web browser, (which is responsible for rendering the HTML code into a web page) can understand what they mean.

For example, this is how you emphasize a word in HTML:

HTML

Hi, <em>Tim</em>

And this is how the web browser renders it:

Hi, Tim!

A front-end developer creates the elements of a web page by a combination of HTML tags.

Whether you’re a front-end developer or a back-end developer, HTML is a technology you should know.

The good news is, it can only take a day or two, to learn the basics and create your first web page with HTML.

Don’t miss any of these when learning HTML

Basic tags

HTML5 meta tags

Symantic HTML

CSS

You will use HTML to define web page elements for what they are, rather than how they should look. How they should look is the responsibility of HTML’s long-time partner, CSS.

CSS separates formatting from content.

With CSS, you can display the content with eye-catching colors and effects, positioned within perfectly aligned blocks.

With CSS you can:

Style your text (set a color, choose a font, etc) Style any element such as buttons, fields, containers, links, etc Make responsive layouts (known as grids) to make your web page look good on all devices Reset browser’s default styling

And a lot more.

You will write CSS code in units called rule-sets.

These rule-sets contain properties that define how an HTML element (such as a button or link) should look.

Each rule-set consists of a selector and a declaration block.

A Selector defines what elements on the web page should be affected by this ruleset.

As an example, let’s create a button with HTML:

HTML

<button>Click me</button>

So far it looks like this.

click me!

So basic, right?

Now, let’s add a bit of style to it with CSS:

CSS

.button {

font-size: 1rem;

border-radius: 4px;

border: blue 1px solid;

}

In the example above, .button is a selector.

To apply this CSS rule to an HTML element, you’ll just need to associate the selector (.button in this case) with the respective element, like so:

HTML

<button class=“button”>Click me</button>

And this is what you get:

CLICK ME!

A CSS file can contain hundreds of rule-sets.

You will save CSS files as plain-text files with .css extension.

CSS files are included in HTML pages with <link> tag.

You can take this free HTML & CSS learning path and start creating web pages with HTML & CSS in no time.

CSS frameworks

CSS frameworks are a collection of pre-made CSS styles (rule-sets) that you can use alongside your own styles.

Why?

To avoid writing everything from scratch.

The original purpose of CSS frameworks was to provide a grid system.

A grid system is a collection of CSS styles (rule-sets) for making complex layouts on a web page.

CSS frameworks also provide ready-to-use styles for other HTML elements.

Some CSS frameworks also provide JavaScript-based components, such as date pickers, accordion menus, and more.

The most well-known CSS frameworks in the market are Twitter Bootstrap and Zurb Foundation.

Should you use a CSS framework or not is up to you.

However, with the rise of CSS preprocessor (which we’ll cover in this guide) many developers prefer to create their styles without a framework.

Don’t miss any of these when learning CSS

Common CSS properties

Media Queries

Specificity

CSS Pseudo-elements

Box Model

Flexbox

CSS Grid

CSS transitions and animations

Responsive design

Responsive design is an approach to make a web page display and function correctly across all device sizes and orientations.

A Responsive web page should look on a mobile screen as perfectly as it does on a laptop.

Responsive design is crucial for online businesses; On average, around 65% of websites’ traffic is from mobile devices.

Now, imagine a web page, which is not usable for 65% of your visitors!

That is crucial, indeed.

You’ll achieve the responsiveness of a page via a core feature of CSS, called Media Queries.

Through Media Queries, you can define certain CSS rules specifically for certain screen sizes.

You can even define special rules for different media types, such as screens and printers.

JavaScript

JavaScript is a lightweight programming language known as the scripting language for web browsers.

You will use JavaScript to add interactivity to web pages.

JavaScript, alongside HTML and CSS, is the cornerstone technology of the web.

⚡ Note: JavaScript shouldn’t be mistaken with Java Programming Language, as they are entirely different in design; They have some syntax similarities, though.

You can hardly find a modern web-based system (a website or a web app) that’s not using JavaScript.

With JavaScript you can:

Manipulate elements of a web page on the fly as a response to users’ interactions, such as hiding elements, resizing them, repositioning them, removing them, etc Validate web forms data, after the user submits a form Create interactive components such as image sliders, accordion menus, date pickers, color pickers, etc Web-based calculators, like an income tax or personal loan calculators Create cool animations Create browser-based games Interact with a web API (more on this below)

And a lot more.

Just like CSS, you will write and save your JavaScript code in plain-text files with .js extension.

You’ll include JavaScript files in your HTML pages with the <script> tag.

What are JavaScript engines?

Web browsers have a JavaScript engine built into them that runs the JavaScript code included on an HTML page.

Each web browser vendor has its own implementation of a JavaScript engine.

For instance, Google Chrome and other chromium-based browsers call their JavaScript engine V8.

Firefox calls its JavaScript engine SpiderMonkey, which was originally developed at Netscape, but currently maintained by Mozilla.

Web browser vendors (such as Google or Mozilla) must implement their JavaScript engines based on a language standard called ECMAScript specification.

The ECMAScript specification is a standardized specification of a scripting language. — by ECMA International.

ECMAScript ensures different browsers run JavaScript code in a consistent manner.

Every once in a while, ECMA International publishes a new edition of ECMAScript.

Consequently, all web browser vendors have to update their JavaScript engine based on the new standards.

The current ECMAScript version is ES6, officially known as ECMAScript 2015.

Although JavaScript is known as a web browser scripting language, JavaScript engines can be used outside of web browsers as well.

For example, Node.js is an application (or precisely a runtime environment) that uses Google’s V8 engine to run JavaScript.

Node.js makes it possible to use JavaScript for a purpose other than a web page.

JavaScript libraries

Imagine you want to build a wooden table and you need some wood.

Would you go to the jungle and cut some trees, or you simply drive to the nearest home improvement shop to pick up what you need?

I believe most people (including myself), will choose the latter.

Think of JavaScript libraries as a home improvement shop where you get the material you need to build something.

A JavaScript library is a set of pre-made JavaScript reusable units of code you can use alongside your own JavaScript code, so you won’t have to write everything from scratch.

JavaScript libraries provide a variety of ready-to-use functionalities including but not limited to: convenient helper functions, DOM traversal, event management.

One of the most popular JavaScript libraries (and probably the most popular among beginners) is jQuery.

jQuery at its core is a DOM traversal library. Additionally, it provides features for event management and convenient abstractions for Ajax programming.

To give you an idea of how a JavaScript library makes a difference, let’s write a block of JavaScript code with and without a library.

The following snippet is supposed to hide every element on a page, which has .foo-bar class attribute.

First, let’s write it in pure JavaScript:

// JavaScript Code

let els = document.querySelectorAll(‘.foo-bar’)

if (els && Array.isArray(els)) {

els.forEach(el => {

el.style.display = ‘none’

})

}

Now, let’s use jQuery to achieve the same thing:

// JavaScript Code

$(‘.foo-bar’).hide()

Don’t worry if the syntax looks strange to you, it’s just to give you an idea of how libraries simplify everyday programming tasks through layers of abstraction.

Should you use a JavaScript library or not is up to you.

However, due to the rise of ES6, JavaScript transpilers, and reactive frameworks (such as React, Vue, or Angular), DOM traversal libraries like jQuery have lost their place in the hearts of many web developers.

This amazing JavaScript roadmap will give you everything you need to learn JavaScript and get good at it in no time.

Web APIs

Every complex system works via a set of interfaces.

For instance, a TV allows us to change the volume via the remote control — by pressing a pair of buttons.

An API (Application Programming Interface) does a similar job to a TV remote control; It helps us communicate with its complex underlying system.

In the web context, there are two types of APIs: Browser APIs and Third-party APIs.

What are browser APIs?

Browser APIs enable us to use advanced features of the browser.

Browser APIs Include:

Audio API

to manage audio DOM

to manipulate HTML elements on the fly Video API

to manage video Notifications API

to control browser notifications Geolocation API

to use users’ location data if they authorize you to do so Client-side storage APIs

to store data in the browser’s local or session storage Canvas API

used to draw graphics on a webpage

See the full list of browser APIs on MDM.

The only way to use the browser APIs is through JavaScript code.

However, Web APIs are not a part of JavaScript itself.

JavaScript will help you use them.

For example, here’s how you can use the Local Storage API to save a value in the browser’s local storage, in JavaScript:

// JavaScript code // Set the item

localStorage.setItem(‘keyName’, ‘Some Value’) // Or fetch it at a different point

localStorage.getItem(‘keyName’)

Third-party APIs

Third-party APIs are services located somewhere on the web (on a server) and are used to exchange information between systems.

For example, you can use the API of a weather forecast agency (if they provide one) to display weather information on your web page.

In this case, the weather API gives you access to the weather information stored within its underlying system.

Having third-party APIs isn’t limited to big organizations, though. Every team (of any size) can develop an API to exchange information between its back end and front end or even other websites.

Knowing how to use Web APIs (Browser-based or Third-party) is an essential skill for front-end developers.

To learn more about web APIs, check out our free roadmap on Web APIs.

Data-Interchange formats

Third-party APIs enable two systems (e.g. a website and a weather forecast agency) to communicate and exchange data.

However, the exchanged data should be in a format both parties can understand.

The two most common data-interchange formats are JSON (Javascript Object Notation) and XML (Extensible Markup Language).

Most programming languages have built-in support for JSON and XML data.

For instance, the weather information could be presented in JSON and XML like so:

JSON

{

“temp”: 282.55,

“feels_like”: 281.86,

“temp_min”: 280.37,

“temp_max”: 284.26,

“pressure”: 1023,

“humidity”: 100

}

XML

<forecast>

<Temp>282.55</Temp>

<FeelsLike>281.86</FeelsLike>

<TempMin>280.37</TempMin>

<TempMax>284.26</TempMax>

<Pressure>1023</Pressure>

<Humidity>100</Humidity>

</forecast>

Over the last few years, JSON has gained popularity among web developers, making it the most common data-exchange format among modern APIs.

However, XML still has its place in many use cases.

Front-end skills to become a pro

CSS preprocessors

A CSS preprocessor, also known as a CSS interpreter is a preprocessor scripting languagePreprocessorIn computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. used to write CSS code with the help of features that do not exist in standard CSS; These features include variables, mixins, nesting, control flow, and more.

One of the main benefits of using a CSS preprocessor is code reusability.

But what does it mean?

It’s easier to explain it with an example.

First, I write a couple of CSS rules without a preprocessor, then, I’ll rewrite it with a preprocessor:

CSS

.button {

background: #882bff;

color: #fff;

} .button–outlined {

border: #882bff;

color: #882bff;

}

In the above snippet, #882bff has been repeated three times.

This means if you decide to change the color, you’ll have to update every single instance of this color code.

Now, let’s rewrite it with a preprocessor:

$buttonColor: #882bff; .button {

background: $buttonColor;

color: #fff;

} .button–outlined {

border: $buttonColor;

color: $buttonColor;

}

As you can see, in the preprocessor approach, we reused a variable named $buttonColor .

By storing the color in a variable, we’ll just have to update this variable to change the color.

CSS pre-processors help us avoid ending up with super large CSS files -thanks to the reusability features they provide.

The CSS code written in a preprocessor language is slightly different than the standard CSS and has to be compiledCompileCompiling is the process of translating a computer code written in one programming language to another language. For example, C++ code to machine code, or Sass to CSS. to standard CSS.

The most popular CSS preprocessors are Sass, LESS, and Stylus.

This amazing Sass Roadmap will get you up and running with Sass and will help you write CSS the way you should.

BEM and ABEM

Choosing names for CSS selectors might become a hassle over time, as you’ll have plenty of rule-sets to name and remember.

CSS community has adapted some naming conventions to tackle this problem.

BEM (Block Element Modifier) or its enhanced version ABEM (Atomic BEM) are the two popular naming conventions that not only help you name your rule-sets more easily but also help you understand the relationship between your HTML elements and CSS rulesets with a look.

JavaScript frameworks

Just like JavaScript libraries, JavaScript frameworks are pre-made JavaScript code to ease the development of JavaScript-based applications.

JavaScript frameworks are different than JavaScript libraries, though.

JavaScript libraries are in the form of reusable units of code that you use alongside your own code.

However, a JavaScript framework defines the entire application architecture.

A framework becomes the core of your JavaScript application and whatever you write extends its functionality — shaping it to your application.

When you start using a JavaScript framework, you’ll have to play by its architectural rules; and in return, it’ll help you concentrate more on your product’s value than its implementation.

JavaScript frameworks usually provide:

Data interpolation (insert dynamic data in an HTML document)

Event management (like when users click on a button or submit a form)

State management (keep track of every piece of data your application uses during runtime)

Routing (showing different screens per URL)

Custom HTML elements

And more.

The most popular frameworks in the JavaScript ecosystem are React.js, Vue.js, and Angular.

Vanilla JavaScript

Vanilla JavaScript means pure JavaScript code without any libraries or frameworks.

Sometimes including a 100kb library on your page — just to call a couple of its functions — isn’t necessary.

In many cases, you can achieve the same results with minimal effort in vanilla JavaScript.

Why vanilla javaScript is important?

If you get too much dependent on using a framework (or library) and forget about the language itself, a major update of your favorite framework (or library) might pour your “knowledge” down the drain — just like what happened to Angular 1.

Having a deep understanding of pure (Vanilla) JavaScript will enable you to:

Pick up new JavaScript libraries and frameworks more quickly

Debug defected software more quickly — especially when you’re using a sophisticated framework

Know when to use a framework or library and when not to

Be more creative and come up with efficient alternatives, rather than just using pre-made code.

What is Node.js?

Node.js is a JavaScript runtime environment, equipped with a V8 JavaScript engine.

Node.js enables developers to use JavaScript for a purpose other than making websites or web apps.

What’s a runtime environment? you may ask.

A run-time environment is a program that executes other programs.

A web browser is a runtime environment, so is Node.js.

And needless to say, both have a JavaScript engine.

Node.js enables web developers to use JavaScript for back-end development.

Using the same language in the back end and front end will make your life a lot easier, especially if you’re doing both yourself.

Although Node.js is known as a back-end technology, we decided to keep it under the front-end development section owing to its popularity in front-end development workflows, such as bundling, dependency management, testings, etc.

What is asynchronous I/O

You might hear people say Node.js has an event-driven architecture with asynchronous I/O, but what does it mean?

Let’s decode it.

In a computing context, I/O (Input/Output) means data exchange between the computer and the outside world, such as humans or even other computers.

Devices used for this type of communication are called I/O devices such as screens, keyboards, hard disks, network cards.

For example, you communicate with a computer via a screen and a keyboard; to type the input and see the output.

Another example is when a program needs to store data on a hard disk. This time, the communication happens between the computing unit and the hard disk drive; This is called a disk I/O.

There’s a problem with I/O operations.

I/O operations are slower than computational processes. The reason is processors use electric current to operate, while I/O devices might involve mechanical movements, such as a hard disk drive’s head.

Also, there are times when the I/O has to be made over the network to communicate with another system (network I/O).

During I/O, the faster end (the computer) always has to wait for the slower end (the I/O device).

In a computer program, I/O operations can be done in two ways:

Synchronous I/OThe program starts the I/O and waits until it’s completed

Asynchronous I/OThe program starts the I/O and continues to the next instructions

In Synchronous I/O, the computing unit has to remain idle while the slow I/O is in progress i.e., waiting for the hard disk to store data, or awaiting a response from a remote computer.

The program has to wait until it can confirm the I/O operation was successful, or to perform a consequent operation (like sending a notification that the operation was successful).

In Asynchronous I/O, however, the program continues execution, while I/O is still in progress.

But how would it know if the I/O was successful to perform a post-IO action?

In Asynchronous I/O, the programmer associates a subroutine to each I/O operation called a callback.

Once a certain I/O operation is completed, the respective callback is called automatically.

I/O waiting solved.

This approach is significantly helpful when a program depends on many I/O operations, as it minimizes the CPU idle time.

JavaScript code in Node.js applications usually contains many I/O operations and callbacks.

NPM (Node Package Manager)

NPM is a package manager for JavaScript and is the default package manager for Node.js too.

A package manager is a program to install third-party packages.

Before getting onto the JavaScript packages, let’s define what a module is in programming.

In simple terms, a module is a reusable piece of code stored in a file.

You will import and use modules in your own code.

A JavaScript package is a directory of module files accompanied by a special file, named package.json.

A package.json file is a plain-text file that contains information about the package, such as the author, dependencies (if it depends on other modules), etc.

NPM automates the installation of JavaScript packages via its command-line program: npm.

These packages are hosted on NPM’s online database, known as the npm registry.

npm uses package.json to download and install a JavaScript package from the npm registry.

That said, all packages on the npm registry should have a package.json file.

⚡ Remember: No vetting process takes place when a package is published to the npm registry. This means packages on npm can be low in quality, unreliable, or even malicious. However, like any other open-source code, you can judge its credibility based on several factors, such as the number of installs, the recent update time, and the number of packages depending on it.

This free roadmap contains everything you need to know about NPM and NPM packages.

What is Babel?

Babel is an open-source JavaScript transcompiler used to convert modern JavaScript code (like ES6) to a backward-compatible equivalent.

What’s a transcompiler anyway?

A transcompiler, also known as transpiler or source-to-source translator, is a computer program that translates your code into an equivalent code, in the same or a different programming language.

For example from modern JavaScript syntax to older JavaScript syntax.

Why we do this?

We normally use transpilers to make a source code backward-compatible so older environments will be able to run it too.

For example, if you write a JavaScript code, based on ES6 specifications (ECMAScript 2015), older versions of web browsers that don’t support ES6 might not be able to run your code correctly.

With babel, you can fix that.

Babel changes your code automatically so you don’t have to worry about that.

Babel uses polyfills to do its job. A polyfill is a piece of code that makes up for a missing feature in a web browser.

You can configure Babel to use certain polyfills based on the features you want to support in older browsers, or you use a preset, which contains the most common polyfills for a certain use case.

The following code is from babel’s documentation, showing how code is transpiled from ES6 (modern JavaScript) back to ES5 specification:

// JavaScript code // Babel Input: ES2015 arrow function

[1, 2, 3].map((n) => n + 1); // Babel Output: ES5 equivalent

[1, 2, 3].map(function(n) {

return n + 1;

});

You can learn more about Babel by checking out our Modern Development Workflow roadmap.

TypeScript

TypeScript is a programming language developed by Microsoft. TypeScript is considered as the syntactical superset of JavaScript.

It’s called a syntactical superset of JavaScript because not only JavaScript code is valid TypeScript code, it also provides features that are not available in the standard JavaScript — such as static typing.

TypeScript has been designed to ease the development of large JavaScript-based applications.

You cannot use a TypeScript code directory on a webpage (like you do with JavaScript), though. Instead, you have to transpile it to JavaScript first.

The transpilation process can be done either by TypeScript’s default compiler, Checker, or with a more sophisticated JavaScript transcompiler, such as Babel.

Depending on your team’s preferred technology stack, you might have to learn and use TypeScript in your projects.

This amazing TypeScript roadmap helps you get started and get good at TypeScript in no time.

Task runners and module bundlers

Before the popularity of modern front-end technologies, most front-end developers used core web technologies to build their websites and web apps.

CSS and JavaScript files were saved as plain-text files, loaded into an HTML page, and that was it.

However, in modern workflows, due to the adaptation of new technologies, there are some steps to take before you have a working web page.

For example, if you use TypeScript, you’ll have to convert it to standard JavaScript first (as mentioned in the previous section).

Or if your JavaScript code is based on ES6, you’ll have to make sure it’ll run on older browsers as well.

An if you’re using multiple JavaScript packages from the NPM registry, you’ll have to combine them into a bundle (single file) along with their dependencies.

This preparation process is called a software build or the building process

The building process isn’t limited to runtime (such as transpiling), though; It can involve any type of operations, depending on the adapted practices such as:

Running tests

Linting

a linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

a linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. Minification

minification is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality — to make the source code smaller.

minification is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality — to make the source code smaller. Tree shaking

tree shaking is a dead code elimination technique. Tree shaking starts from the entry point and includes only the code that is guaranteed to be executed

tree shaking is a dead code elimination technique. Tree shaking starts from the entry point and includes only the code that is guaranteed to be executed Environment setup

the server on which your application will run

the server on which your application will run Generating config files

Everything else that’s required to run your software

The burden associated with these operations inspired the creation of build automation systems, such as task runners and module bundlers.

Imagine you run the following command in the command-line:

$ npm run build

And those complicated operations are taken care of in a jiffy.

Task runners

Task runners are automation tools to run daily tasks automatically so you won’t have to do them manually.

The tasks don’t have to be necessarily related to the app’s run-time (such as transpilation); they can be anything you would have to do manually while making software, such as running tests, generating config files, linting scripts, etc.

The most prominent task runners in the market are Grunt and Gulp.

Follow our Modern front-end development roadmap to learn how you can get more productive with the help of task runners.

Module bundlers

In simple terms, a bundle is a single file made by combining multiple files.

A module bundler (a.k.a package bundler) is a tool that collects multiple JavaScript files, modules, libraries, runs them through certain transformations (that you define), and combines them into a single file — called a bundle.

Why would you need a bundler?

In modern front-end development that your code uses various third-party modules, you have to deal with multiple JavaScript files.

To make sure your code will work, you need to include all of them on your page, in the order that they are needed.

However, with a JavaScript bundle, you only have one JavaScript file to include in your HTML file — without having to load a dozen files in the right order.

An additional bonus is that your browser will have to make only one request to fetch your JavaScript file, rather than downloading a dozen JavaScript files.

The most popular module bundlers in the market are Webpack and Browserfiy.

Browserify and Webpack seem to be the solution for the same problem, while Webpack is more prevalent among front-end developers.

Follow our Modern front-end development roadmap to learn more about module bundling in JavaScript.

Backend development

Backend development is all about working with data in a programming language and communicate that data to the clients via HTTP protocol.

Well, that’s not the whole story, but this is where it begins…

The front end and back end are the two key elements of any web-based system (a website or a web app).

Simply put, the front end displays the data prepared by the backend in a structured, formatted, and intractable format.

ON THIS SECTION

Things Backend Developers Do Decoding a Backend Developer Job Description Your Legendary Sword: A Programming Language Databases Backend Web Frameworks CMS Knowledge Command-line Skills

What back-end developers do?

Backend developers do various tasks related to data and security, including but not limited to building admin panels, CRUD (Create, Read, Update, and Delete) interfaces, security mechanisms, APIs, and third-party integrations.

Building CRUD interfaces

CRUD stands for Create, Read, Update, and Delete.

These are the basic operations in every storage system, such as a file manager or a database.

However, CRUD is commonly used to refer to the functionality of an app with CRUD operations.

For example, your phone’s Contacts app provides CRUD operations via a set of interfaces to create, update, remove, and view contacts.

A more relevant example could be an online shop.

Every online shop needs CRUD interfaces to add new products, update prices, list products, or even delete legacy data.

Making web APIs

We’ve already covered third-party web APIs (remember the weather API?) in the front-end development section; In this section, we’ll look at it via the lens of a back-end developer.

When people talk about web APIs, they are usually talking about RESTful APIs.

REST (Representational State Transfer) is a set of standards for creating web APIs.

A web API made based on REST standards is called a RESTful API.

An API endpoint looks like a URL:

Yes, it’s a valid URL that you can open up in your browser, however, instead of showing you a web page, it returns some unformatted (but structured) data, normally in JSON format.

API users are computer programs, and computer programs only understand structured data-interchange formats, such as JSON and XML.

A RESTful API is a collection of URLs that enable you to communicate with its underlying data.

Imagine you’re working as a backend developer in an online retailer; One day, the front-end team is assigned a task to create a special page for seasonal clearance sales, where the goods on sale are listed to be purchased.

The front-end team creates the page with all the cool visuals and functionalities. However, to list the products on sale, they need to access the product information stored in a database.

How the front end gets access to the backend data in a modern app?

RESTful APIs.

If there’s already an API with an endpoint (a URL) to fetch the products on sale, then, they simply make an API request (with JavaScript) and get the lists of products.

However, if this isn’t implemented in the API yet, the backend team has to step in and create one.

Not all APIs should be available to the public, meaning the consumers of the API (the front-end code) need to be authenticated via a security layer; which is the subject I’m about to cover.

Building authentication & authorization systems

When you want to use an ATM, you have to authenticate with your PIN, or when you want to use your smartphone, you’ll have to unlock it first.

In every system, sensitive information and functions must be protected against unauthorized access.

Authentication verifies a user’s identity by validating an authentication factor, like a password, PIN, OTP (one-time-password), or an access token.

If the authentication is successful, and the user’s identity is verified but the user isn’t authorized to access the resource or function, they will still be denied access.

This process is called authorization.

Authentication and authorization aren’t limited to humans, but computer programs can also be authenticated to get access to the resources and functions of another program.

In the online retailer example, the front-end code (program A) needs to be authenticated to access the backend-end API (program B).

This system-to-system authentication is done through an access control model, known as delegated authentication & authorization or secured delegated access.

The most common delegated access model used today is oAuth2.0.

Have you signed up for a website with your Facebook or Google account? If yes, you have used oAuth.

When you use your Facebook account to sign up to website X, you’ll be redirected to Facebook’s website.

Then, you (as the resource owner) need to authorize website X to get access to your profile information, such as your name, email, and profile photo.

Once you authorize this operation, Facebook issues an access token (as the authorization server) and returns it to website X.

Next, website X sends another request to Facebook’s API along with the granted access token, to get your information and sign you up automatically.

To put it in a nutshell, in the oAuth model, an access token is issued to a third-party system (by an authorization server), with the resource owner’s approval. The third-party system then uses this access token to access the protected resources.

So next time when you want to login to website X, you can still use your Facebook account to log in. You’ll basically prove to website X that “you are who you say you are”, by using your Facebook account.

This is a delegated authentication, where you delegate the authentication to an authorization server, such as Facebook.

As a back-end developer, you might be assigned to implement such authentication/authorization workflows — Just like how the back-end developers of website X did.

If you’re using a web framework, you won’t have to do everything from scratch as most frameworks provide authentication mechanisms out of the box — or at least through their standard libraries.

Integration with External Systems

Now that you know about web APIs, and authenticating to private APIs, let’s talk about a common use case of system-to-system interactions: Integration with external systems.

Imagine your team uses an email marketing service like MailChimp to run email marketing campaigns, where you send bulk emails to your customers subscribed to the mailing list.

When users sign up to your website (confirming that they want to receive emails from you), you’ll need to add them to your MailChimp mailing list as well.

Adding the emails to your Mailchimp list will get difficult at some point due to the volume.

This means the entry process needs to be automated.

To do this, you’ll create an automated mechanism to add new users’ email to your MailChimp list via MailChimp’s API.

This is an integration between your website and MailChimp.

Every integration scenario has the same concept:

System A (like Mailchimp) provides an API (usually protected by a layer of authentication, such as oAuth2.0) System B (your website for example) sends an API request (with the access token) to send or receive data.

The first step in making an integration is to read the target’s system API documentation to learn about:

Available endpoints (URLs)

Supported parameters (to know how to compose a request)

Response formats (to know what to expect)

Available authentication methods, etc

There are also tools like Zappier that offer ready-to-use integration solutions for a variety of platforms — including MailChimp. It’s not free, though.

And that’s how independent systems exchange messages over the Internet.

Decoding a backend developer job description

To get an idea of how a job description of a back-end developer role looks like, let’s check out a real job description from LinkedIn:

Your Responsibilities

To be actively involved in all phases of the software development life cycle, e.g., requirement gathering, design (this isn’t graphic design), development, testing, and code reviews. Adherence to implementation and deployment schedules Be comfortable with stepping outside your domain area and learn other types of development Consistently improve maintainability & stability of the codebase Knowledge of best software engineering practices including OOP, TDD, test automation, etc Design and implement RESTful APIs

Don’t mind the technical jargon, for now, we’ll get to those in a bit.

Based on the above list:

You should be actively involved in the whole software development life cycle (SDLC), including requirement gathering, design, implementation, testing, deployment, documentation, and maintenance

in the whole software development life cycle (SDLC), including requirement gathering, design, implementation, testing, deployment, documentation, and maintenance You will be working with other teams such as front-end developers, QA, content, marketing, etc

The technology stack varies from project to project, meaning you should be open to learning a new tech stack that works best for a particular project

Adhering to the deployment schedule is an essential skill you need to acquire

is an essential skill you need to acquire Bring technical qualities to the team by using the best software engineering practices to develop robust, stable, and maintainable applications

Now, let’s see what skills you’ll need to land such a job.

Your master sword: a programming language

A programming language is a special language used to give instructions to a computer to execute.

These instructions can be simple mathematical operations to elaborate algorithms.

What is an algorithm?

A set of instructions to solve a problem, or perform a computation is called an algorithm.

It’s like a step-by-step clear-cut DIY recipe to solve a problem or to calculate a value.

Algorithms are described in a language-agnostic way to assure all programmers would understand them.

The most common way of describing algorithms is through pseudocodes.

Pseudocodes are usually a mix of the human language and known programming symbols to communicate the meaning more easily.

For example, the following pseudocode describes an algorithm to determine whether a number is odd or even:

input a “number”

divide “number” by 2

if the result equals to 0

print: It’s even

otherwise

print: It’s odd

You don’t have to write down a pseudocode every time you want to write a piece of code, though.

If it’s simple you can form it in your mind.

But if it’s complicated and you also want to discuss it with your teammates, then, pseudocode will help a lot

To learn how algorithms work in real-world scenarios, you may check out our Computers’ algorithm roadmap.

Programming paradigms

In reality, there’s usually more than one approach to do a job; However, depending on what you want to do, some approaches work better than the others.

A programming paradigm is a way of programming in a programming language.

Some programming languages allow you to program in one or multiple paradigms, while some only support one paradigm.

You normally choose a programming language based on what paradigm (approach or programming style) you want to go with for a certain job.

Programming paradigms are categorized into two broad categories: imperative and declarative.

ImperativeThe programmer defines how to achieve a result

DeclarativeThe programmer just defines what should be achieved and have no control over how it is achieved

In an imperative programming paradigm, the programmer explicitly defines how to achieve a result — through a set of instructions.

For example, the following Python code calculates the square root of a number in an imperative way:

PYTHON

sq = 10 ** (1 / 2)

As you can see, it is we who define how the square root should be calculated.

imperative programming paradigm can also be further categorized into sub-paradigms such as Procedural Programming and Object-Oriented Programming (OOP).

In the Procedural programming paradigm, programmers encapsulate repeated instructions into reusable units of code, known as subroutines a.k.a functions.

The programming language, allows you to use these subroutines as many times as needed.

In OOP, programmers encapsulate a group of subroutines (a.k.a methods) and the data they work with into a bigger unit called an object.

Let’s make the concept clear with an example.

Imagine you’re building a side-scroller game with a character, and you want to add a walking behavior to your character.

Here’s how it would be done in a procedural style (don’t worry about the syntax, it’s just to give an idea of how it would look like):

// JavaScript code // This is our subroutine, which is known as “function” in JavaScript function

walk (character, steps) {

character.position += steps

} // Character object, standing at position 0

let character_mario = {

position: 0

} // Take ten steps

walk(character_mario, 10)

As you can see, the walk function (or subroutine) takes character_mario and increase its position by the number of steps we define.

Now, let’s do this, in OOP style:

// JavaScript code // This is our character blueprint, which is called a class

function character () {

this.position = 0 this.walk = function (steps) {

this.position += steps

}

} // instantiating a character from class “character”

character_mario = new character() // Take ten steps

character_mario.walk(10)

In the OOP style, we have a blueprint of a game character, which has a property (his current position), and behavior (walking).

Thanks to this blueprint (that we call class), we can replicate as many characters as we want with the new keyword and each instance would have an independent property and behavior.

This is OOP, where data and functionality are encapsulated as reproducible units.

You might be wondering why so many styles exist while they can be used interchangeably.

Here’s the explanation:

Although programming paradigms can be used as a solution to the same problem, some paradigms work better (and neater) with certain problems.

For example, in THE side-scroller game example, OOP is a more manageable approach, if we want to have multiple characters in our game.

Programming languages such as C++, Java, Python, JavaScript, PHP, and Rust support imperative paradigms, although they can be used like declarative-paradigm language too, making them multi-paradigm programming languages.

In a declarative paradigm, however, the language only allows the programmer to declare what to achieve rather than how it should achieve it.

This means the programmer has no control over the details of an operation.

Here’s how you would calculate a square root of a number in the LISP language:

sqrt 9.0

As you can see, you can only say what you need.

SQL (Structured Query Language), Regular Expressions, HTML, XML, Prolog, Lisp support declarative paradigm.

The intended domain of use

Another way to classify programming languages is the Intended domain of use, which categorizes programming languages into two main categories:

General-Purpose

A programming language that applies to a broad range of domains

Domain-Specific

Designed for specific application domains

DSLs are languages designed for specific application domains.

A DSL provides high-level specialized features to solve problems of a particular field or industry.

An example of a DSL is Matlab Programming language, which is primarily intended for numerical computing.

In contrast to a DSL, a General-purpose language is a programming language that applies to a broad range of domains (use cases).

When people talk about a programming language, they usually refer to a general-purpose programming language.

Programming languages such as C++, Java, Python, Rust, PHP, JavaScript are considered general-purpose languages.

Which programming language should you learn?

This is probably the most ask question on social media. What programming language should I learn?

It’s a tricky question to answer because all programming languages perfectly do what they are designed to do.

However, it’s easier to say which one to start with.

I suggest you watch this short Youtube video on Top Programming Languages in 2020 by Mosh Hamedani to get some pointers.

As the video suggests, these are the most popular general-purpose programming languages that will likely land you a job in a tech company in 2021.

Popular Programming Language of 2020

JavaScript Java Python PHP Golang C#

Databases

A database is a collection of related and organized data, stored in a set of files.

Databases are like spreadsheets, where related data are stored in an organized manner, i.e., rows and columns.

However, databases are more sophisticated in design and provide advanced features to manage a large amount of data.

Almost every web-based system (a website or a web app) uses some kind of database solution to persist and manage its data.

For example, online newspapers keep their news and articles in a database.

An online retailer also keeps its product catalogs, customer details, and order information in a database, or a set of databases.

Schema management

Most databases define and enforce a fixed structure for the stored data.

This fixed structure is called Database Schema.

New data must match the structure defined by the schema, otherwise, the transaction will be rejected.

There are also schema-less databases, which we’ll cover shortly.

Database management systems

A Database Management System often referred to as DBMS is a program used to create and manage databases.

They manage how data is stored, retrieved, and protected.

When people refer to the term “database”, they refer to the database and the DBMS as one unit.

A DBMS allows us to manage a database, either via a user interface (visual and command-line) or right from our code.

However, we usually interact with a database from our code — to create, read, update, and delete data.

The visual or text-based interface is mostly used for setting up and administration tasks.

Remember your mobile’s Contact app? it keeps all your contact information in a database.

Types of DBMS

There is a variety of DBMS’s in the market, which are categorized based on the way they manage data.

These are the most popular ones:

Relational Databases

A Schema-based DBMS, which store data across several related collections called tables

No-SQL Databases

A schemaless database that normally stores data as documents or key/value pairs — as opposed to related tables

Query language

Every DBMS provides an API in the form of a query language that allows us to query and update its underlying data.

The most common query language is Structured Query Language (SQL), which is a DSL language used to perform various database operations, such as CRUD operations, data protection, optimizations, etc.

Relational database management systems (RDMBS):

A relational database is a database, which stores data in several “related” data collections called tables.

Think of a table as a spreadsheet in an Excel document, where data are organized in rows and columns.

For example, an online store keeps the customers’ data, products, and orders across separate tables.

Separating data in multiple tables helps us avoid data redundancy (which happens when we store everything in a single giant table).

Avoiding data redundancy in a database is called data normalization.

Related data stored in different tables are interconnected by a special value, called a key.

You can use these key-based interconnections to extract detailed information about one transaction stored across multiple tables.

In our online store example, we can extract the list of products (in products table) of a specific order (in orders table) of a customer (in customers table) by using the key that these tables share.

Common RDBMS brands in the market are PostgreSQL, MySQL, MariaDB, Oracle, and MSSQL.

No-SQL

Unlike relational databases, No-SQL (a.k.a non-relational) databases store data without having to adhere to a fixed and strict data schema.

Data in No-SQL databases are generally stored as key/value pairs, graphs, or documents — as opposed to relational databases, which resemble a spreadsheet.

One of the most common types of No-SQL databases is document-oriented databases, which store data as documents, such as JSON, XML, or BSON (Binary JSON) files.

Each document is an equivalent of a row in an RDMBS, but with a dynamic structure.

This means each document (or record) can contain more or fewer values than other documents within the same collection.

NoSQL and RDBMS can complement each other to fulfill various data storage needs; this architecture is called Polyglot persistence.

NoSQL databases are increasingly used in big data and real-time web applications, thanks to their dynamic nature and high performance.

Prominent players of the NoSQL world are MongoDB, CouchDB, Amazon DynamoDB, and Redis.

How backend developers use databases

As a backend developer, you often work with a database from your code.

Each programming language provides drivers to enable you to communicate with various databases right from your code.

A driver is a program that helps one program communicate with another program or hardware.

You install the database driver when installing the DBMS or the programming language.

Check out this amazing roadmap to databases to know more about the concepts of databases and how you can use them in a project.

You can also check out our NoSQL databases roadmap, to learn more about Non-relational databases.

Backend web frameworks

Server-side web frameworks a.k.a HTTP-based frameworks are software frameworks backend developers use to build back-end functionalities, such as CRUD interfaces, authentication systems, APIs, integrations, and more.

Frameworks come in the form of a pre-written codebase that you can customize and extend its functionality.

A web framework is like the first course of bricks in a wall, which gives direction to the back-end development process from implementation through deployment.

Inversion of control

A backend framework isn’t like a library that you use alongside your code to use its functions.

In fact, it is the core application, and your code extends its functionality.

On the other hand, you add code to the framework’s code and gradually shape it into an application. This phenomenon is called Inversion of Control or IoC.

How frameworks power your application

When a request (from a web browser or client-side code) reaches the webserver, if it’s meant for your application, the webserver forwards it to your framework’s entry file, known as Front Controller or FC.

This is where a request lifecycle begins.

The front controller (which is normally a file named index.php) bootstraps the framework (a.k.a your application) and makes it ready to serve requests.

Once the application is ready to serve, the request is dispatched to the right handler to populate a response and return it to the client.

A handler is a code you add to the framework to handle a certain request.

What frameworks to use

Web frameworks are written in different programming languages; sometimes, the popularity of a programming language can be tied to the number of successful software frameworks available in that language’s ecosystem.

The most popular web-based frameworks are:

Choosing a framework shouldn’t be a difficult decision to make, as you would normally choose the web frameworks available in your programming language of choice.

Full-featured frameworks provide essential components any server-side application needs, such as:

Frameworks’ Core Feature

Managing HTTP requests & responses Routing (for dispatching requested URLs to their respective handlers) Authentication & authorization mechanisms Database management Event management Session and Cache management Templating File storage Testing

For smaller projects, you can use a micro-framework.

You can even make a micro-framework yourself. For example, if you’re coding in PHP, you can create a micro-framework with Symfony Components (a set of reusable PHP libraries to build high-quality PHP applications).

Micro-frameworks are well-suited for rapid prototyping, making web APIs, web services, or even a complete project depending on its scale.

Here are three of the most popular micro-frameworks in the market:

CMS knowledge

A Content management system (a.k.a CMS) is a back-end application used to create a website and manage its content.

If you just need to create a personal or corporate website, a CMS gets the job done quite well, without having to deal with a fancy tech stack.

However, you still need some programming and database knowledge to customize a CMS-powered website.

A CMS consists of two major components, an admin panel, which is used to manage the content, and a theme, which is used to display the content.

Admin panel is where site admins (even without web development knowledge) can create and manage web content through a set of CRUD interfaces provided by the CMS.

You can add articles, news, products, portfolios, photos, and more.

A theme is a collection of templates your website visitors see.

You can either create your theme from scratch (which requires some development skills) or use a pre-made one suitable for your business.

Although you can still use advanced technologies to create and manage websites, a CMS can be a viable option for content-heavy websites, such as online newspapers, blogs, online magazines, or even medium-scale online shops — without too much coding.

WordPress and Drupal are two of the most popular Content Management Systems in the market, both written in PHP programming language.

If you’re wondering which one to start with, you may go with WordPress as it has 61% of the CMS market share.

Command-line skills

Command-line interface (a.k.a CLI) is a program with a text-based interface (where you need to type commands), which enables users to use services of an operating system through text commands.

Terminal app on Mac OS and Command Prompt on Windows are examples of command-line interfaces.

Here’s an example of a command in Linux to see the webserver (Nginx in this case) error logs:

tail -f /var/log/nginx/errors.log

As a backend developer you should be able to do these operations via a CLI:

Install, update, and uninstall a program

Basic file system operations, such as create, edit, copy, move, and delete files

Manage the ownership and permissions of files

Start, stop and restart services

Read and search through log files

Remote CLIs

In addition to using your local CLI, you might have to access a remote CLI (for example your remote server) as well.

Your local CLI can connect you to a remote CLI over a secured network protocol called Secure Shell (SSH).

SSH is a network protocol, which uses public-key cryptography to do secured network operations over an unsecured network like the Internet.

You would use a remote CLI to perform administrative tasks, such as file management, deployments, starting/terminating OS services, monitoring, and troubleshooting problems.

Things frontend & backend developers should know

ON THIS SECTION

How to learn a programming language Debugging Testing Test-driven development (TDD) Version control Continues Integration, Continues Delivery (CICD) Cloud computing SEO technical concepts Development environments

How to learn a programming language

Learning a programming language is an excellent thing to do these days, but do you know what’s even better than that?

Learning how to learn a programming language.

If have a good understanding of the concepts that programming languages share, you’ll be able to pick up any programming language in no time.

Let’s see what these concepts are.

Language syntax and semantics

Every programming language is described by two elements: Syntax and Semantic.

A computer program is made of a sequence of words, known as symbols.

The syntax describes the allowed symbols you can use in a programming language.

Syntax also defines how symbols should be combined together to form a correct statement in a program.

For example, this JavaScript statement consists of four symbols: let , x , = , and 12 :

// JavaScript code let x = 0 if (x === 0) {

x = x + 1

} else {

x = x + 2

}

When an invalid symbol is used, or a valid symbol is misused, the code cannot be compiled and consequently won’t run.

Now, what is Semantic?

Semantic defines the meaning of the symbols in a program; On the other hand, semantics describes the behavior that a computer follows when executing a set of valid symbols.

You need to start with syntax and semantics when learning a programming language.

Control flow

Control flow (a.k.a flow of control) is the order a computer executes the instructions of a program.

The program instructions are executed in a top-to-bottom order, starting from the first line to the last line.

In real-world programs, you often need to conditionally change the flow of execution.

For example, you might need to loop through a set of statements a certain number of times or run a statement only if a specific condition is met.

Programming languages provide a variety of features such as conditional statements (e.g. if blocks) and iteration statements (e.g. for and while loops) to enable programmers to change the flow of execution.

For example, the following JavaScript snippet runs two different statements based on certain conditions:

// JavaScript code let x = 0

if (x === 0) {

x = x + 1

} else {

x = x + 2

}

If the value of x equals zero, then x = x + 1 is executed, otherwise x= x + 2 will be executed.

This is controlling the flow.

After learning about syntax and semantics, control flow statements are the next concept you should learn.

Data types

Computer programs need to store and retrieve data to and from the memory during run time.

program’s data is stored in different locations of the memory, associated with a memory address.

Each piece of data in the memory is called a data object. The running program associates an attribute to each data object that it creates in the memory. This attribute determines the type of value it holds (a number, a character, etc) as well as its storage allocation in the memory.

This attribute is called a data type.

Most programming languages support basic primitive data types, such as numeric types (i.e., integers, floating-point numbers, doubles), booleans (true, false), and characters.

There are also Composite Types, which store a group of primitive data types as one data object in the memory, such as arrays.

Type system

A type system is a part of a programming language (built into its compiler or interpreter), responsible for checking and enforcing the constraints defined by a data type.

In general, the aim is to prevent performing irrelevant operations on values in the memory.

For example, two text values are not supposed to be divided in a mathematical operation — because it doesn’t make any sense.

The type checking process is either done at compile-time (when a program is being compiled to machine code), known as Static Typing, or at runtime (when the program is being run), known as Dynamic Typing.

Static TypingType checking at compile time — before the program is ready to run

Dynamic TypingType checking is done during run-time

Some programming languages use a combination of both.

When it comes to the type system, programming languages are either strongly typed or loosely typed (a.k.a weakly typed).

Strongly Typed

They are very strict about the data type rules

Loosley Typed

They are less strict and usually perform automatic adjustments.

Strongly typed languages have a strict type system to guarantee you’re not making a data-type-related mistake (which is mostly unintentional).

For instance, if a function is expected to return a value of type integer, but returns a string, the compiler or interpreter won’t compile it.

Unlike strongly typed languages, loosely typed languages aren’t very strict about the rules.

If a programmer performs an irrelevant operation on a particular value, a weakly-typed programming language might do an automatic adjustment, or return totally unexpected results.

Functions

In a computer program, a function is a sequence of instructions encapsulated as one reusable unit.

The terms functions and procedures can be used interchangeably. However, in some programming languages, they might be slightly different.

Just like in mathematics, a program function receives some arguments and returns a value.

Most programming languages are shipped with built-in functions as part of their standard library. However, they allow you to create your own functions too.

For example, if you find yourself repeating the same set of instructions to calculate a value or do an action, you can encapsulate these instructions into a function that you can call anytime.

This is an example of a JavaScript function, which checks if a number is even.

// JavaScript code // This is our reusable set of instructions

function isEven (number) {

return number % 2 === 0

} // Printing the results to the console

console.log(isEven(1))

console.log(isEven(2))

console.log(isEven(5))

Without a function, you would have to repeat the statement three times like so:

// JavaScript code // Printing the results to the console

console.log(1 % 2 === 0)

console.log(2 % 2 === 0)

console.log(5 % 2 === 0)

Debugging

Debugging is the process of examining a computer program to find and fix the issues (a.k.a bugs) that cause the program to deliver unexpected results.

Debugging can be done in two ways:

The first approach is to place temporary output statements at specific locations in the code to print the program’s state (calculated values) at those specific points.

The other option is to use a debugger. A debugger is a tool to make the former approach automated.

With a debugger you can define breakpoints in locations of your code that you suspect is causing the bug.

When you run the program, the program will stop at those points and displays the state of the values at the time program was stopped.

In most cases, smart usage of temporary print statements is enough to trace down a bug and is usually the preferred way of debugging by many programmers.

Web browser’s developer tools

When debugging a client-side code, you can use the developer tools built into the most popular web browsers, including Chrome and Firefox.

Developer tools (on Firefox) and Devtools (on Google Chrome) provide a set of convenient tools to help developers diagnose issues quickly.

You can use these tools to: debug JavaScript code, monitor network activities, and modify the DOM/CSS.

Developer tools can also help improve the website’s performance in terms of speed and accessibility.

I suggest you invest some time in mastering the developer tools of the browser you use for development; it’ll save you a good deal of time when trying to locate a bug.

If you use a JavaScript framework, like React or Vue.js, you can use their specialized Devtools to examine your program from your framework’s point of view; they are usually available as browser extensions.

Testing

Software testing is the process of verifying if a program or its building blocks deliver expected results.

This process is done before the first or a newer version of a program is released.

There are two main approaches to software testing:

Active Testing

Involves direct interaction with a program to verify it’s functioning properly

Passive Testing

The practice of extracting patterns from generated log files, to study the behavior of users or systems

Software testing is done on different levels during different phases of development.

Unit testing

Unit testing is a software testing method to test individual units (function, procedures, methods, etc) of a program source code in isolation, to ensure each small piece is doing its job properly.

Each unit can be tested several times with different inputs, to ensure it will behave as expected in different scenarios.

Unit tests are in the form of computer programs (they are not part of the program’s source code), written by developers (usually during development time), and run as a part of the build process.

Once the unit tests are executed, developers will know how many tests passed and how many failed.

Applications can have hundreds or even thousands of unit tests to ensure every bit in the code is doing its job as expected.

Code Coverage or test coverage is a metric (measured in percentage), which describes how much of the code was involved during a test run.

If a unit is left untouched during a test, it might carry a bug into the production. That’s the reason developers try to achieve the highest code coverage possible.

⚡ Note: Code coverage is sort of a quantitive metric and doesn’t mean you have high-quality tests, though. That said, having a high code coverage doesn’t necessarily guarantee your could will be bug-free.

Integration testing:

Unlike unit testing that examines program units in isolation, integration testing verifies if individual units still function correctly when combined.

That said, a group of functions or classes might be involved in integration testing.

Like unit testing, integration testing is also done as automated, programmed tests, done by developers or test engineers.

System testing

System testing is conducted on the entire system to verify it meets both functional and system requirements specified in the design phase.

For instance, testers might simulate user behavior through automated (or manual) tests to make sure the software behaves and responds correctly when a real user is using it.

Testing types

Other than categorizing tests into testing levels, we can also study them based on their purpose.

Regression testing

When you test to verify the existing features of the software are still functioning correctly after a code update, you’re doing regression testing

Regression testing is usually done at the system testing level (after uniting and integration testing).

Lower levels of testing, like the unit and integration testing, help minimize the possible defects detected during regression testing.

Smoke or sanity testing

The developer performs smoke testing to test the most vital functionalities of the application, to verify if it’s possible to proceed with further testing by the QA team.

Smoke testing is also referred to as acceptance testing.

Test-driven development (TDD)

Test-Driven Development (a.k.a TDD) is a software testing practice, in which you write a test first, then, you write code to pass that test.

TDD consists of three steps:

First, you write a test to assert the expected output of the functionality you haven’t written yet. Obviously, the functionality won’t the test as it doesn’t exist yet.

Second, you write that functionality in the most basic form. Then, you run the test again, until the tests are passed.

Third, once the tests are passed, if needed, rewrite the code in a more structured way.

The above steps are repeated for every functionality that you want to create.

Let’s go through an example in pseudo-code to see TDD in action.

Imagine, we need to create a function that determines if a value is odd or not.

The first step is to write unit tests for this function to be:

assert is_odd(5) is true

assert is_odd(4) is false

assert is_odd(1) is true

In the above pseudo-code, we’re testing the output of a function named is_odd with different inputs and outputs.

We write these test cases based on our understanding of odd and even numbers. For example, we know that numbers 5 and 1 are odd, and 4 is not. That’s why we use these basic assertions to make sure the function behaves as we expect.

These tests will fail anyway as there’s no function yet, meaning the value of is_odd(number) is still undefined.

The next step is to create the is_odd function and re-run the tests:

function is_odd (number)

if number divided by 2 is greater than 0

then return true

Now, if we re-run the tests, all tests will pass, which means our function returned the correct answers for 5, 1, and 4 — exactly what we expect.

Finally, if there’s room for refactoring the function, we rewrite it in a more structured way; if not, we let it be.

TDD pushes the developer into the habit of writing clean, testable, and maintainable code.

Unit testing might be a part of your daily routine as a web developer.

If you want to take your software testing knowledge to the next level, we suggest you check out this roadmap to software testing.

Version control

Version control (a.k.a revision control) means recording the changes made to a file over time.

Version control, enables users to see the evolution of files over time, and rollback to a certain point in time, if needed.

Version control ensures nothing gets lost, and there’s always a way back to a point when everything was working fine.

The tools that handle version control are called Version Control Systems (VCS).

In addition to the ability to go back and forth in time, version control systems allow multiple developers to work on the same file simultaneously, without being worried if the work of one developer gets overridden by the other.

Modern version control systems achieve this by an automatic version merging mechanism, while older version control systems take some sort of traditional file locking approach.

The most common version control systems are Distributed Version Control Systems, in which the complete source-code and its change history, known as the repository, is mirrored on every developer’s computer in the team.

On the other hand, every developer has a clone of the repository.

Developers apply the changes to their own offline copy, and regularly push the changes to a shared remote repository (through a CLI command).

When a developer pushes her changesets to the remote repository, if the remote repository has already been updated by another developer, the version control system asks the developer to pull (download) the latest changes first and try again.

This process ensures developer’s offline copies are always synced.

The most popular distributed version control systems are git and Mercurial.

Check out this roadmap to know more about git and version control.

Continues Integration, Continues Delivery (CICD)

Delivering your completed application (as well as its updates) to your users can be a complicated and time-consuming procedure — especially if done manually.

CICD consists of two software development practices combined:

Continuous integration (CI)

Continuous integration is a software development practice to ensure an under-development application is continuously in a state — in terms of reliability and performance — to be deployed at any time.

Based on CI, even if you’re currently working on a partially-done feature, you must be able to deploy your application right now, without letting that partially-done feature break your app.

Based on CI practices, developers should merge/push their latest changes back to the main repository branch (remember the shared remote repositories in the previous section?) once or a few times a day.

CI involves automating the build process, running tests, and applying quality control, by using an automation system, known as a CI server.

A CI server continuously monitors the shared code repository, and once the code is updated (when a developer pushes the code to the remote repository), it starts the build process and runs the tests.

As a result, the bugs or merge conflicts are detected and reported right after the main branch is updated.

This strategy makes it easier for developers to early detect bugs and resolve possible merge conflicts.

When CI is done right, it’ll result in more frequent releases, which leads to quicker feedback.

Having instance feedbacks would help you build solutions that work for your customers.

Continuous delivery/deployment

Continuous delivery (and deployment) is used alongside CI and involves deploying the code to staging or production servers automatically.

The CD phase happens if CI is completed successfully, meaning there’s no merge conflict and all tests are passed.

On the other hand, CI ensures the software is always in a state that can be deployed at any time (with all partially-done features toggled off), while CD makes the deployment process fully automated.

When CI and CD are combined, the code is built, tested, configured, and deployed without human intervention.

The whole flow can be triggered by a minor update in the codebase.

CI/CD pipelines are used alongside containers like Docker or orchestration systems like Kubernetes.

Cloud Computing

Imagine you create ten remote servers equipped with 16GB of RAM, 4 CPUs, 250GB SSD storage, located in New York, with just a few clicks.

This is cloud computing a.k.a cloud.

Cloud computing is the on-demand delivery of computing power and data storage solutions, over the Internet, so you won’t have to deal with purchasing, housing, operating, and maintaining IT resources on the premises.

Major cloud providers in the market are:

Amazon Web Services (AWS)

Google Cloud Platform (GCP),

Microsoft Azure

IBM Cloud

Alibaba Cloud

Cloud services are usually offered in the following forms:

Forms of Cloud Services

Infrastructure as a Service(IaaS) Platform as a Service(PaaS) Software as a Service(SaaS) Serverless Architecture

Infrustructure as a Service (IaaS)

IaaS is a cloud computing model that provides on-demand computing, networking, and data storage resources over the Internet.

IaaS providers run large data centers across the globe to provide users with the infrastructure they need to run their applications without having to deal with any hardware and networking equipment.

In most cases, users do not interact directly with the physical infrastructure. Instead, the service is provided to them virtually via visual or CLI interfaces and APIs.

This allows users to provision virtual resources (geographically close to their audience) with desired amounts of computing power and storage with just a few clicks.

With IaaS, it takes just a few clicks to create ten remote servers equipped with 16GB of RAM, 4 CPUs, 250GB SSD storage, located in New York.

And anytime you don’t need them, you just turn them off (remotely) so you won’t be charged.

Additionally, you can scale your infrastructure if you need more power, automatically (Auto Scaling) or with supervision.

The billing in the IaaS model is usually done in a pay-as-you-go-basis, allowing companies to significantly reduce the up-front infrastructure-related costs.

Platform as a Service (PaaS)

PaaS is another cloud computing model similar to Iaas but with a higher level of abstraction.

Unlike IaaS, which provides raw computing resources (like a server with a fresh operating system), the PaaS model provides computing resources equipped with an operational software stack; basically, all you need to run an application.

PaaS provides operating systems, databases, runtime environments, and even code libraries out of the box; however, you won’t have control over the underlying infrastructure as you normally would in the IaaS model.

PaaS enables your team to build, test, and deploy applications quicker than ever, with the ability to scale based on market demands.

Software as a Service (SaaS)

SaaS is a web application you can use online with a monthly subscription (usually on a per-user basis).

Examples are CRM systems, HR tools, project management applications, or even email services such as Google Workspace.

A SaaS service may look like an expensive option at first. However, in the long run, it might significantly minimize the development and maintenance costs.

With a SaaS solution, you can start right away without having to wait for your in-house solution to be implemented and deployed.

Serverless Architecture

Serverless architecture is an approach to develop, deploy, and run applications without having to manage and maintain the infrastructure.

The serverless approach is commonly used in the form of FaaS (function-as-a-service), where your application’s functionalities are split into several independent functions.

These functions are later deployed to autonomous event-triggered containers on your cloud platform.

These event-triggered containers call your functions upon certain events, like when a user visits a certain URL or signs up to your website, or anything.

Although PaaS and Serverless have many things in common, there’s a difference in how you develop and deploy your applications.

In the PaaS approach, your application runs on a traditional web application stack, including an OS, a web server, a language runtime environment, and a database, to name a few.

PaaS treats your application as a single unit, meaning the scaling and billing is done on the entire application level, no matter what parts of your app do the heavy lifting.

However, in the serverless approach, particularly FaaS, your application is developed and deployed as independent callable functions, which can be scaled individually based on their call frequency.

You’ll be billed only for the number of times your functions get called, and won’t pay for any idle capacity.

Serverless is suitable to be used with micro-service architecture or use cases that require a few functions, like an API with a few endpoints.

The most popular implementation of FaaS is AWS Lambda and Azure Functions, and Google Cloud Functions.

SEO Technical Concepts

SEO or Search Engine Optimization is enhancing a website’s traffic by increasing its visibility (a.k.a impressions) on search engine results pages (SERP).

High visibility is achieved by performing continuous optimizations on the content, performance, usability, link profile, etc.

No matter how excellent an online service is, it won’t pay off until it’s offered to the right audience. A website listed on the 10th page of search results won’t stand a chance against its better-positioned competitors.

As a web developer, you might not need to worry about SEO if you have an SEO expert (or experts) in the team.

However, knowing the basics, especially the technical side of SEO, will help you create more SEO-friendly systems right from the beginning.

In technical SEO, small adjustments will make an impact when they all come together; Page load speed (performance), page responsiveness, page structure fall under technical SEO.

There are many tools to evaluate your site’s technical health, such as PageSpeed Insights by Google, GTMetrix, and SEMRush’s site audit feature.

These tools audit your site and tell you what’s already good, what could be better, and what has to be fixed.

Use them!

Let Us All Agree On Some Job Titles and Their Scopes

During recent years, various job titles have emerged. Some of these job titles are valid, and some are just fancy made-up titles.

Due to the fact the skills are overlapped across job titles, it’s tricky to say what skills fall under what role. However, let’s try to get it right as much as we can.

A programmer is someone who can code and create computer programs. It’s rarely used in job advertisements today but still used by some individuals.

A software Engineer is someone usually with an academic degree — specialized in all phases of software development. Although this title doesn’t explicitly define the technologies involved, it’s usually used by recruiters to refer to software developers experienced in backend and server-level technologies.

A web developer is someone who creates web-based products, either front end or back end or both.

However, when it’s used without a front end or back end prefix, it usually refers to someone who can do both. Fullstack Developer is also used in such cases. Although Fullstack Developer is a debated and misleading term but still used by many reputable companies.

These are similar job titles: front-end developer, back-end developer, front-end engineer, back-end engineer, web application developer.

A front-end developer is someone who specializes in front-end technologies.

Some related front-end job titles are meant to emphasize specific technology if the candidate is going to be hired for that, such as JavaScript developer, JS engineer, and Node.js developer.

Related job titles: front-end engineer, JavaScript developer, JS engineer, React developer, and Angular developer.

The back-end developer is devoted to backend technologies, specialized in working with data, databases, programming languages, frameworks, knowledge of infrastructure, and more.

Related job titles: back-end engineer, back-end developer, web application developer.

Web Designer is a generic term used for a person who’s more focused on the design and probably knowledge of working with a CMS, adequate knowledge of HTML/CSS, and a bit of Javascript.

Titles like a ninja, rockstar, master, wizard are not valid job titles and you may not use them on your public profiles.

Wrapping Up

I hope this could help you decode some of the complexities around the web development topic.

The software industry is evolving at a rapid pace, and if we’re not focused, we’ll be left in the dust.

Luckily, there are plenty of ways to keep up:

Get in touch with your community as much as possible

Follow inspiring and active members of your community via social networks

Listen to podcasts

contribute code to the open-source community even though small.

To have a deep understanding of a topic, try to read books about it. Books cover the most detailed aspects of a topic; Yes, it requires some patience, but it’s absolutely worth it.

Besides books, taking online courses is an excellent choice to scratch the surface of a certain technology.

If you’ve made it this far, then you are a completer, and you’ll be contributing amazing stuff to the community soon enough!

By the way, if you like more detailed content like this one, visit my website skillupp.tech, and follow me on Twitter, because these are the channels I use to share my everyday findings.

Thanks for reading and enjoy learning!