DEV Community: Bilal Ahmad

Ultimate 10 Stages to Master Backend Development

Bilal Ahmad — Wed, 07 Sep 2022 12:38:21 +0000

Background:

Backend development refers to server-side programming in which a developer creates application architecture and business logic to process and store the data and output useful information.

There are multiple backend programming languages, frameworks, and stacks like JavaScript, Python, PHP, Java, Ruby, etc but in this article, I’ll only discuss the complete backend JS stack here.

Stage 1: Web Basics

Learning some web basics is the initial stage for every developer. Having networking concepts can help you to better understand how the internet works, what protocols are used, how messages are delivered etc.

Some basics concepts are:

What’s HTTP and how is communication done?

How many types of HTTP requests are and what are their roles?

What is the client/server model?

What is the OSI model?

How does DNS work?

Add a little more and learn about basic HTML tags, CSS styling, and DOM manipulation:

Task:

Create a simple web page using HTML tags
Add different styles, Use DOM to change the styles of HTML elements

Stage 2: OS knowledge

Operating System manages all of the software and hardware on the computer. It performs memory and process management, handling input and output, etc.

An operating system runs a server that further runs a complete web app. So, it is necessary to learn about OS operations to maximize performance and optimize memory.

In this stage, you need to learn about OS architecture, file system, basic CLI commands, memory and process management, OS threads, etc.

Task:

Open window / Linux terminal
Try file/folder commands (rm, md, ren, del, copy, move)
Try path traversal commands (dir, ls, cd)
Try some networking commands (ipconfig, tracert, arp, netstat, ping)
Try some system and process commands also.

Stage 3: Runtimes

The next stage is to learn a backend framework/language to work with. As I mentioned earlier that I’m discussing JS stack here, so the first step is to learn JavaScript. Learn basics about JS like data types, loops, selection, functions, objects, classes, arrays, strings, regular expression, etc.

JavaScript consist of three parts:

ECMAScript — Core javascript
DOM — Interact with the document using JS
BOM — Interact with browser using JS

ECMAScript is a scripting language specification on which JavaScript is based. It introduced new javascript features like arrow function, async-await, template literals, etc. It is also called advanced javascript. Learn some important JS features which can be helpful in efficient coding.

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code. Learn some basic node js modules like fs, path, os, etc.

Task:

Use the fs module to create, delete, and update file /folder
Use the path module to set the path for static files/ folders.
Use the OS module to get the statistics of the operating system.
try async-await and arrow function

Stage 4(a): Server Framework

The main role in backend development is a server framework. It’s a communication gateway between the frontend and backend (node app) with the integration of the database.

Server framework provides you full control over incoming and outgoing requests/responses, provides endpoints, executes middleware functions, etc.

Some famous server frameworks are Express JS(recommended), Nest JS, and Koa JS.

Task:

Setup a basic server
Interact with req & res callbacks
create middleware functions
Use different HTTP requests (GET, POST, DELETE, PUT/PATCH)

Stage 4(b): API development

This is a type of practical stage in which you learn how to create a simple REST API using Express JS and node JS and perform CRUD operations. Use express middleware for validating incoming requests, routers for handling endpoints, etc.

Here’s the practical implementation of API development:

Postman is helpful in testing API endpoints. Add more and learn about swagger and Open API.

Task:

create a folder structure for API
Manage routes and data in separate folders.
Use middleware to filter and validate the input data.
Use proper status code and error message for results.

Stage 5: Template Engine

Usually, communication between the frontend (React app) and backend (express app) is done using API calls in the MERN stack. Client requests the data from the server and the server sends the requested data back to the client.

But if your project is small and you don’t have good knowledge of React or another frontend framework, use a template engine.

Template engine helps you to create the static HTML template files and replaces variables in a template file with actual values at runtime which makes it a dynamic website. Template Engine works with the integration of Express JS. It gets data values from the database and renders these in an HTML template file.

Some template engines are hbs(recommended), ejs, pug, etc.

Task:

Integrate template engine with node js.
create a static template in the template engine.
Output express values in the template engine.
Use if/else and loops in the template engine.
Use partial to create reusable components like navbar, header, footer, etc.

Stage 6: Database

Database has the biggest role in backend development. It is used for storing the data in a structured way and accessing and maintaining the data.

Some famous databases to learn about:

SQL database: MYSQL, SQLSERVER, POSTGRESQL
NoSQL database: MongoDB, Cassandra
Cached database: Redis
Real-time database: Firebase

Backend apps directly interact with the database by querying the database using third-party npm packages like MongoDB, MySQL, etc

if you don’t know SQL or database language, you need to learn any ORM / ODM as a middleware that translates object methods to complex database queries. It provides you with a complete structure called model to validate data before entering data into the database. Moreover, it provides an extra security layer on top of the object model.

Sequelize is a famous ORM used for SQL databases like MySQL, SQL Server, SQLite, PostgresSQL, etc.

mongoose is also a good ODM used for NoSQL databases like MongoDB etc.

There are some other concepts to learn about databases like ACID properties, backup/migration techniques, applying normalization and indexing, data replication and sharding, etc.

Task:

Try some basic SQL queries
Understand the difference between SQL and NoSQL database
Check how ORM/ODM works with the database

Stage 7: Security

Security is a big concern for enterprise-level web applications. A single vulnerability causes the leakage of data or failure of the application. There should be proper validation, authentication, and authorization in a web app.

Some techniques to make your app secure better:

JWT: Use a token to prevent unwanted access to a protected resource.
Cookie: Use to store information about visits to the webpage.
Session: Use to maintain a secure connection with the server.
CORS: Use cors to make requests from one website to another website
hashing: Use middleware to hash the password using salt.
encrypt/decrypt: Use middleware to encrypt and decrypt important data.
SSL: Use SSL certification to secure the transaction.
Limiting: Use middleware to apply request limits to prevent DDOS attacks.

Task:

try injecting some malicious js scripts in input tags.
try sending multiple requests at a time.
check how JWT token, cookies, encryption, and hashing work

Stage 8: Message Brokers

Modern applications are complex. Due to large time-complexity, CPU-intensive operations, large amounts of data processing, and API communication between multiple services are some time-consuming issues that leave a bad user experience. Message Broker is one of the solutions that can help to overcome some of these difficulties.

Message Broker is a type of middleware software that allows services and applications to communicate with one another through the use of messages.

Point-to-point messaging and Publish/subscribe messaging are famous models of message brokers.

Message broker consist of 3 components:

Producer: Producers send messages on a topic. One or many publishers can publish on the same topic.
Consumer: Subscribers subscribe to topics, and all messages published to the topic are received by all subscribers on the topic.
Queue/topic: Queue holds the message published by the producer and accessed by the consumer.

RabbitMQ and Kafka provide the implementation of a message broker.

Task:

create a newsletter subscription using Kafka message broker.

Stage 9: Testing

Testing is important before deploying a web application on a live server. A single wrong input or missing data can cause the failure of a running server.

Testing can be done on multiple levels based on multiple criteria. For example, you can check if the web app returns a proper status code, error message, data, etc.

Jest is a famous unit testing framework to test both web apps and APIs. It provides multiple methods to automate the testing process, check responses on wrong or missing data, etc.

Supertest is used for APIs testing with the integration of other testing libraries and is easy to use.

Task:

Use jest to test a complete API

Stage 10: Server / Cloud deployment

Final stage of application development is deploying the web app on a live server/ cloud.

Before deploying a web app, it’s necessary to learn version control like git, Github, and Github actions to make your deployment flexible and scalable.

Git is used for version control to create multiple branches, track changes in the source code, and enable multiple developers to work together.
GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
GitHub Actions help you automate your software development workflows. Individual actions are reusable pieces of code that let you build, test, package, or deploy projects on GitHub. It can also be used to automate any step of your workflow.

Deploying a complete web app is more complex. You’ll need a dedicated server to respond to the HTTP requests that it will be receiving and work with an online database.

Some famous PaaS are:

Heroku: If you’re a beginner, your project is small and you want to deploy, Heroku is good to start with.

I personally don’t recommend Heroku as there are multiple problems with this cloud platform like issues with environmental variables, slow bandwidth, etc.

Instead, use Vercel or netlify which provides more control and flexibility over the deployed app.

AWS, Docker, and Kubernetes: If you’re seeking a career in full-stack web development or DevOps, now’s a good time to familiarize yourself with Amazon Web Services and/or container platforms like Docker and Kubernetes.

Azure: If you’re a C# or .NET developer, Azure appears to be a seamless way to deploy your apps without having to leave the safety of the Microsoft ecosystem.

Task:

deploy a complete API on Vercel cloud

Conclusion:

The learning process will never end. It continues until you’re alive. These stages are just the initial step to start as a beginner/intermediate level backend development and there are a lot of other things to learn and it depends on your project requirement and problem-solving techniques.

KEEP LEARNING, STAY PASSIONATE ALWAYS AND EXPLORE THE THINGS

Web3 js in practical (Part-I)

Bilal Ahmad — Wed, 03 Aug 2022 10:34:50 +0000

Background:

Web3 js is an Ethereum JavaScript API that is used to interact with the Ethereum blockchain. It provides multiple methods that allow you to perform actions like sending Ethers from one account to another, creating smart contracts, interacting with smart contracts, and so much more.

This blog consist of 3 parts:

basics of web3 js
interact with a smart contract using web3 js
compile and deploy smart contract using web3 js

In this blog, we’ll discuss web3 js basics, so let’s do something practical :)

Pre-requisite:

Some prior knowledge is required related to:

Advance Javascript (async-await, arrow function)
Node JS (install and import libraries)

Node JS should be installed. To verify, type the command in CMD:

node -v

Setup environment:

There are multiple tools and options to create and set up blockchain but here are some easy steps to set up everything quickly:

Initialize npm

create a folder, and open it with vs code or your editor. Type command in terminal:

npm init -y

Install web3 js library

npm install web3

setup blockchain

Ganache is a personal Ethereum blockchain that you can use to run tests, execute commands, and monitor transactions.

Download from here: https://trufflesuite.com/ganache/

After installation, open Ganache (quick start):

Coding:

create a file “index.js” in the same folder and write some code.

Import library and initialize provider (ganache network)

const Web3 = require('web3');

const web3 =   
new Web3(new Web3.providers.HttpProvider("HTTP://127.0.0.1:7545"));

use ganache network (RPC server) address in HttpProvider

List all ganache accounts:

web3.eth.getAccounts((*err*, *accounts*) => {

     console.log("Accounts:", *accounts*);

})

Get the balance of the account:

web3.eth.getBalance(web3.eth.accounts\[0\], (*err*, *balance*) => {

     console.log(web3.fromWei(*balance*, 'ether'));

})

web3.eth.accounts[0]: It refers to the first account.

web3.from Wei: It converts balance from Wei to Ethers.

Send ethers from one account to another account

web3.eth.sendTransaction(  
    { from: web3.eth.accounts\[0\],   
      to: web3.eth.accounts\[1\],   
      value: web3.toWei('5', 'ether') },   
      (*err*, *transactionHash*) => {

          console.log(*transactionHash*);

})

web3.toWei: It converts balance from Ethers to Wei.

Code:

complete code files

Conclusion:

I discussed some basic and important methods but there are multiple other methods to interact with the blockchain.

web3 js documentation: https://web3js.readthedocs.io/en/v3.0.0-rc.5/

Wait!!! Where’s the smart contract ?!

In web3 js (Part-II), I’ll discuss, how to interact with smart contracts.

How to hide the source code of an HTML web page?

Bilal Ahmad — Wed, 03 Aug 2022 10:11:40 +0000

Beginner developers used to think that they could hide the HTML code of their web page by restricting visitors, but this is not the case.

Here are some techniques if you want to restrict your visitor to view or scrap your HTML code in inspect element:

You can disable Ctrl and F12 keys using javascript

F12. Opens Chrome’s Developer Tools. F12 tools provide a set of tools that you can use to view webpage source code and behavior.

Ctrl key is mostly used in the combination with other keys to view the source code of the web.

for example:

Ctrl + S: It is used to save a whole web page.

Ctrl + U: It is used to open source code of web in new tab.

You can use this code in the script tag to apply this change.

 document.addEventListener("keydown", function (event){

  if (event.ctrlKey){

     event.preventDefault();

  }

  if(event.keyCode == 123){

     event.preventDefault();

  }

})

You can disable mouse right click using javascript

By clicking right-click on the webpage, it will give you the option to view and inspect the source code of the web.

You can use this code in the script tag to apply this change.

  document.addEventListener('contextmenu', 

     event => event.preventDefault() 

  )

Is it enough?

These two techniques are good for non-technical visitors or for some people who have just joined the Computer science field.

What about Web developers (technical experts)?

They can still view the source code of the web using chrome extension, HTML interceptor (BURP), or postman.

View source code in postman

THEN HOW TO HIDE?

You can't hide your HTML source code in browser anyway because your browser needs HTML code to run and view the web page.

However, here are some other techniques to minimize web scraping or code copy-pasting :

Use REACT JS to minimum encapsulate your source code.
Use server-side rendering to change code structure from time to time.
Apply copyright act for legal actions.
enable SSL certification to encrypt data between client and server-side.

Conclusion

If you hide some website code, the Google crawler can still read it, but certain parts, such as No-Follow and No-Index, will tell the crawler whether or not to index the site.

“Hiding text or links in your content to manipulate Google’s search rankings can be seen as deceptive and is a violation of Google’s Webmaster Guidelines.”

You can hide data from users but not from crawlers, but now bots can read all of your website’s source code.

I think the hiding of source code is not a good idea. You might be facing some SEO issues in the future.

Cyber security essentials

Bilal Ahmad — Sat, 04 Dec 2021 05:56:14 +0000

Cyber security is the practice of defending computers networks, electronic devices and data from malicious attacks.

A cybersecurity framework is a collection of best practices that an organization should follow to manage its cybersecurity risk.
The goal of the framework is to reduce the company’s exposure to cyberattacks, and to identify the areas most at risk for data breaches and other compromising activity perpetrated by cyber criminals.

Cyber security framework works under 5 main functions:

Identify : An understanding and identification of the cyber security risks.
Protect : Measures to protect and maintain systems, assets and data.
Detect : Processes to identify the occurrence of a cyber security event.
Respond : Arrangements of detection of a possible cyber security event.
Recover : Plans and restoration procedures to reinstate services.

How to ensure that your information is secure? Well, Information security is based on CIA triad model. The CIA triad refers to an information security model made up of the three main components:

Confidentiality : It’s ability of system to keep your data secret and private only to you.
Integrity : A system’s ability to ensure that the information is accurate and correct.
Availability : This means that the information is available to authorized users when it is needed.

A cybersecurity threat refers to any possible malicious act that seeks to damage data, steal data, or disrupt digital life in general.

Here are some cyber security threads that will cause cyber attack :

Phishing : An email-borne attack that involves tricking the email recipient into disclosing confidential information or downloading malware by clicking on a hyperlink in the message.
Social engineering : This technique is used to deceive and manipulate victims to obtain information or gain access to their computer. This is achieved by tricking users into clicking malicious links or by physically gaining access to a computer through deception.
DDoS attacks : DDoS (distributed denial-of-service) attacks attempt to disrupt normal web traffic and take targeted websites offline by flooding systems, servers or networks with more requests than they can handle, causing them to crash.
Malware : The term is used to describe malicious software designed to perform an attack on the device or server that downloads or runs it. Malware attacks can cause a corruption of data or even take down an entire system.
Malware is a broad term used to describe any file or program intended to harm or disrupt a computer. This includes:
Viruses : these infect applications attaching themselves to the initialization sequence.
Worms : they don’t attack the host, being self-contained programs that propagate across networks and computers in order to overload an server.
Trojans : it hiding inside a useful program with malicious purposes
Spyware : a type of program installed to collect information about users
Ransomware : An attack that involves encrypting data on the target system and demanding a ransom in exchange for letting the user have access to the data again. These attacks range from low-level nuisances to serious incidents like the locking down of the entire city of Atlanta’s municipal government data in 2018.

Experts estimate that a ransomware attack will occur every 11 seconds in 2021. (Cybercrime Magazine, 2019)
The average cost of a data breach is $3.86 million as of 2020. (IBM)
Data breaches exposed 36 billion records in the first half of 2020. (RiskBased)

Here are some historical data breaches:

In 2020, a Twitter breach targeted 130 accounts, including those of past presidents and Elon Musk, resulted in attackers swindling $121,000 in Bitcoin through nearly 300 transactions. (CNBC)
In 2020, Marriott disclosed a security breach impacted data of more than 5.2 million hotel guests. (Marriott)
The 2019 MGM data breach resulted in hackers leaking records of 142 million hotel guests. (CPO Magazine)
In 2018, Under Armor reported that its “My Fitness Pal” was hacked, affecting 150 million users. (Under Armour)
In 2017, 147.9 million consumers were affected by the Equifax Breach. (Equifax)
The Equifax breach cost the company over $4 billion in total. (Time Magazine)
In 2017, 412 million user accounts were stolen from Friendfinder’s sites. (Wall Street Journal) 8. 100,000 groups in at least 150 countries and more than 400,000 machines were infected by the Wannacry virus in 2017, at a total cost of around $4 billion. (Technology Inquirer)
In 2016, Uber reported that hackers stole the information of over 57 million riders and drivers. (Uber) 10. Uber tried to pay off hackers to delete the stolen data of 57 million users and keep the breach quiet. (Bloomberg) 11. In one of the biggest breaches of all time, 3 billion Yahoo accounts were hacked in 2013. (New York Times)

Is there a way to protect yourself from a cyber attack?

Update your software and operating system
Use anti-virus software
Use strong passwords
don’t open email from unknown email addresses
avoid risky clicks
Avoid using unsecure WiFi networks

Today due to high rate of cyber attack, cybersecurity is one of the biggest need of the world as cybersecurity threats are very dangerous to the country’s security. Not only the government but also the citizens should spread awareness among the people to always update your system and network security settings and to the use proper anti-virus so that your system and network security settings stay virus and malware-free.